:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;background:#151714;color:#eeeede;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1080px;margin:auto;padding:30px 40px 24px}header,.brand,.toolbar,.actions,footer{display:flex;align-items:center}header{justify-content:space-between;margin-bottom:22px}.brand{gap:12px}.mark{color:#dcf377;font-size:38px;line-height:1}h1{font-size:25px;letter-spacing:-.04em;margin:0}.edition,.eyebrow{font-size:12px;letter-spacing:.15em;color:#bdc1b2}.cabinet{border:1px solid #454a3c;border-radius:14px;overflow:hidden;background:#080a08;box-shadow:0 22px 70px #0005}.screen-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;background:#050605}canvas{display:block;width:100%;max-height:65vh;aspect-ratio:4/3;object-fit:contain;image-rendering:pixelated;background:#000;outline:none}canvas:focus-visible{outline:2px solid #dcf377;outline-offset:-3px}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#080b08ed;text-align:center;padding:20px}#overlay[hidden]{display:none}#overlay h2{font-size:clamp(30px,5vw,54px);letter-spacing:-.04em;margin:16px 0 4px}#overlay p{font-size:15px;color:#b3b9a7;line-height:1.7;margin-bottom:26px}.toolbar{padding:14px 20px;justify-content:space-between;gap:14px;background:#23271f;flex-wrap:wrap}#status{font-size:14px;color:#dcf377}.actions{gap:8px;flex-wrap:wrap}button{font:inherit;font-size:14px;background:#30362b;color:#eeeede;border:1px solid #525a45;border-radius:6px;min-height:40px;padding:9px 15px;cursor:pointer}button:hover:enabled{background:#424b37}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #dcf377;outline-offset:3px}.slider{display:flex;align-items:center;gap:8px;font-size:14px;color:#c9cdbb;min-height:40px}.slider input{width:110px;accent-color:#dcf377;margin:0}.slider input:disabled{opacity:.45}.slider:has(input:disabled){color:#7d8472}.slider output{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}button.primary{background:#dcf377;color:#1b2110;font-size:16px;font-weight:700;min-width:190px;padding:14px 24px;border:none}button.primary:hover:enabled{background:#efffb3}.guide{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;margin:25px 0}.guide h2{font-size:14px;color:#e6e8d9;margin:0 0 12px}.guide p{color:#aeb5a4;font-size:14px;line-height:2;margin:5px 0}kbd{font-family:inherit;color:#e8ebdc;font-size:13px;display:inline-block;min-width:23px;text-align:center;border:1px solid #4a5241;border-bottom-width:2px;border-radius:4px;padding:0 5px;line-height:24px;margin:0 3px 0 0}.group{display:inline-block;margin-left:10px}#warning{background:#423421;border:1px solid #9b7a45;color:#ffe2a8;padding:12px 16px;border-radius:6px;line-height:1.6;font-size:14px}footer{border-top:1px solid #363d2e;padding-top:18px;gap:14px;flex-wrap:wrap;font-size:12px;color:#969e89}footer span{margin-right:auto}a{color:#aeb99a}#crt{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:fill;image-rendering:auto;background:none;pointer-events:none}#crt[hidden]{display:none}.screen-wrap:fullscreen #crt{max-height:none}.screen-wrap:fullscreen{width:100vw;height:100vh;background:#000}.screen-wrap:fullscreen canvas{width:100%;height:100%;max-height:100vh}.screen-wrap:fullscreen #overlay{height:100%}@media(max-width:680px){main{padding:18px 14px}h1{font-size:22px}.edition{font-size:10px;letter-spacing:.08em}.guide{grid-template-columns:1fr;gap:18px;margin:20px 4px}.toolbar{padding:12px;gap:10px}.actions{gap:6px}button{padding:8px 10px}.group{margin-left:5px}footer{font-size:12px}canvas{max-height:none}}
/* Touch controller (MOBILE_TOUCH_DESIGN.md 3): fixed, opaque, outside the picture. Shown only with html.touch-ui. */
.touchpad,.rotate-hint{display:none}
#touch-guide{grid-column:1/-1}
button{touch-action:manipulation}
/* Double-tap zoom off for the whole page while the touch controller is on (taps near the pad land on the
   picture or margins); pinch zoom stays available (MOBILE_TOUCH_DESIGN.md 2.1). */
html.touch-ui,html.touch-ui body{touch-action:manipulation}
html.touch-ui{--side:150px;--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--ol:max(12px,var(--sl));--or:max(12px,var(--sr))}
html.touch-ui main{max-width:none;padding:0 var(--or) 24px var(--ol)}
html.touch-ui .cabinet{display:grid;border-radius:0;border-width:0 0 1px;box-shadow:none;background:#11140f}
html.touch-ui .screen-wrap{grid-area:screen;min-height:0;align-self:center;justify-self:center;width:100%}
html.touch-ui canvas{max-height:none}
html.touch-ui .touchpad{display:contents}
html.touch-ui .toolbar{grid-area:bar}
/* The cabinet spans the page's side margins (and safe areas) as extra outer grid columns that
   only the controller columns enter, so the d-pad zone reaches the screen's left and bottom
   edges: the thumb cannot feel where the cross is (owner request 2026-10-06). Nothing drawn moves. */
html.touch-ui .cabinet{margin:0 calc(-1 * var(--or)) 0 calc(-1 * var(--ol))}
.tp-left,.tp-right{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:6px 4px 14px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tp-left{grid-area:left}.tp-right{grid-area:right}
/* System buttons in the top corners, play controls in the lower part (apart, to avoid mis-taps). */
.tp-sys{display:flex;gap:8px;justify-content:flex-start}.tp-sys-right{justify-content:flex-end}
.tp-zone{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-top:24px}
.dpad{position:relative;width:132px;height:132px;flex:none}
.dpad .arm,.dpad .hub{position:absolute;background:#30362b;border:1px solid #5d6750}
.dpad .up,.dpad .down{left:44px;width:44px;height:50px}.dpad .up{top:0;border-radius:8px 8px 0 0;border-bottom:0}.dpad .down{bottom:0;border-radius:0 0 8px 8px;border-top:0}
.dpad .left,.dpad .right{top:44px;width:50px;height:44px}.dpad .left{left:0;border-radius:8px 0 0 8px;border-right:0}.dpad .right{right:0;border-radius:0 8px 8px 0;border-left:0}
.dpad .hub{left:44px;top:44px;width:44px;height:44px;border:0}
.dpad[data-held="2048"] .up,.dpad[data-held="2304"] .up,.dpad[data-held="2560"] .up,
.dpad[data-held="1024"] .down,.dpad[data-held="1280"] .down,.dpad[data-held="1536"] .down,
.dpad[data-held="512"] .left,.dpad[data-held="2560"] .left,.dpad[data-held="1536"] .left,
.dpad[data-held="256"] .right,.dpad[data-held="2304"] .right,.dpad[data-held="1280"] .right{background:#dcf377}
.face{display:grid;grid-template-columns:repeat(2,60px);gap:10px}
.face .tp-btn:nth-child(2n){transform:translateY(-14px)}
.tp-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#30362b;border:1px solid #5d6750;color:#eeeede;font-size:12px;line-height:1.1}
.tp-btn b{font-size:18px;color:#dcf377}
.tp-pill{display:flex;align-items:center;justify-content:center;min-width:62px;height:44px;padding:0 8px;border-radius:22px;background:#262b21;border:1px solid #525a45;font-size:10px;letter-spacing:.08em;color:#c9cdbb}
.tp-btn.down,.tp-pill.down{background:#dcf377;color:#1b2110;border-color:#dcf377}.tp-btn.down b{color:#1b2110}
.tp-pause{min-height:44px;padding:4px 16px;font-size:13px;border-radius:22px}
/* The left column has no padding of its own; SELECT/START and the d-pad zone carry it,
   so [data-dpad] runs to the column's left, right and bottom edges. */
html.touch-ui .tp-left{padding:6px 0 0}
html.touch-ui .tp-left .tp-sys{padding:0 4px 0 calc(var(--ol) + 4px)}
html.touch-ui .tp-left .tp-zone{padding:24px 4px 14px calc(var(--ol) + 4px)}
html.touch-ui .tp-right{padding-right:calc(var(--or) + 4px)}
@media (orientation:landscape){
  html.touch-ui header{display:none}
  html.touch-ui .cabinet{grid-template-columns:var(--ol) minmax(var(--side),1fr) auto minmax(var(--side),1fr) var(--or);grid-template-areas:"left left screen right right" ". bar bar bar ."}
  html.touch-ui .screen-wrap{width:min(calc((100vh - var(--st) - var(--sb)) * 4 / 3),calc(100vw - var(--sl) - var(--sr) - 24px - 2 * var(--side)));width:min(calc((100dvh - var(--st) - var(--sb)) * 4 / 3),calc(100vw - var(--sl) - var(--sr) - 24px - 2 * var(--side)))}
}
@media (orientation:portrait){
  html.touch-ui main{padding-top:max(12px,var(--st))}
  html.touch-ui .cabinet{grid-template-columns:var(--ol) 1fr 1fr var(--or);grid-template-areas:". screen screen ." ". hint hint ." "left left right right" ". bar bar ."}
  html.touch-ui .screen-wrap{width:min(100%,calc((100vh - 380px) * 4 / 3));width:min(100%,calc((100dvh - 380px) * 4 / 3))}
  html.touch-ui .rotate-hint{display:block;grid-area:hint;margin:8px 0 0;text-align:center;font-size:13px;color:#bdc1b2}
  html.touch-ui .tp-left,html.touch-ui .tp-right{padding:12px 8px 18px}
  html.touch-ui .tp-zone{padding-top:20px}
  html.touch-ui .tp-left{padding:12px 0 0}
  html.touch-ui .tp-left .tp-sys{padding:0 8px 0 calc(var(--ol) + 8px)}
  html.touch-ui .tp-left .tp-zone{padding:20px 8px 18px calc(var(--ol) + 8px)}
  html.touch-ui .tp-right{padding-right:calc(var(--or) + 8px)}
}
html.touch-ui .cabinet:fullscreen{width:100vw;height:100vh;overflow:auto;background:#000}