* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #171717; font: 15px/1.45 system-ui, sans-serif; }
main { max-width: 1080px; margin: 32px auto; padding: 0 18px; }
a { color: inherit; text-underline-offset: 3px; }
h1 { font-size: 24px; font-weight: 600; margin: 20px 0 6px; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
p { margin: 0 0 12px; }
.intro { color: #666; margin-bottom: 18px; }
.viewer { position: relative; height: 65vh; min-height: 320px; max-height: 800px; background: #1e1e1e; overflow: hidden; }
.viewer canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.viewer canvas:active { cursor: grabbing; }
.viewer canvas:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; background: #1e1e1e; padding: 28px; text-align: center; }
[hidden] { display: none !important; }
progress { width: min(320px, 90%); height: 8px; accent-color: #aaa; }
.status[data-state="error"] { color: #fff; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
button, select { color: inherit; background: #fff; font: inherit; border: 1px solid #aaa; border-radius: 5px; padding: 6px 11px; }
button { cursor: pointer; }
button:disabled { color: #888; cursor: default; }
button[aria-pressed="true"] { background: #171717; color: #fff; }
.controls label { display: flex; gap: 6px; align-items: center; }
output { margin-left: auto; color: #666; font-variant-numeric: tabular-nums; }
.hint { color: #666; font-size: 13px; margin: 0 0 5px; }
details { margin-top: 14px; }
summary { width: fit-content; cursor: pointer; color: #666; font-size: 13px; }
.touch-controls { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0; }
.pad-group > span { display: block; font-size: 12px; margin-bottom: 6px; color: #666; }
.pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 3px; }
.pad button { padding: 0; }
.north { grid-area: 1 / 2; }
.west { grid-area: 2 / 1; }
.south { grid-area: 2 / 2; }
.east { grid-area: 2 / 3; }
.touch-controls button { min-height: 44px; touch-action: none; user-select: none; }
.vertical-controls { display: flex; gap: 3px; margin-bottom: 3px; }
.source { border-top: 1px solid #ddd; padding-top: 20px; margin-top: 24px; font-size: 13px; }
.source p { color: #666; max-width: 90ch; }
@media (max-width: 680px) {
  main { margin: 24px auto; padding: 0 14px; }
  h1 { font-size: 22px; }
  .viewer { height: 60vh; min-height: 280px; }
  .touch-controls { gap: 10px; }
  .pad { grid-template-columns: repeat(3, 44px); }
  .pad-group:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
  .pad-group:last-child > span { margin: 0; }
  .vertical-controls { margin: 0; }
  output { font-size: 13px; }
}