:root{color-scheme:dark;--mint:#92efc6;--panel:#171d26;--line:#303a49;--side:clamp(145px,23vw,245px)}*{box-sizing:border-box}body{margin:0;background:#0a0e15;color:#e6edf7;font:13px/1.4 system-ui,-apple-system,sans-serif}button,input{font:inherit}button{border:1px solid var(--line);border-radius:12px;background:linear-gradient(#252d3b,#171e29);color:inherit;cursor:pointer;min-height:35px;padding:7px 10px;-webkit-tap-highlight-color:transparent}button:active,button.pressed{border-color:var(--mint);background:#314941}button:disabled{opacity:.4}button small{display:block;font-size:10px;color:#a6b4c8}a{color:var(--mint)}#controller{height:100dvh;min-height:280px;padding:env(safe-area-inset-top,0) max(10px,env(safe-area-inset-right)) env(safe-area-inset-bottom,0) max(10px,env(safe-area-inset-left));overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}header{height:43px;display:flex;align-items:center;justify-content:space-between;gap:9px}#back{border:0;background:transparent;color:#a9b5c7;white-space:nowrap}.indicators{display:flex;gap:14px;font-size:11px;color:#adb9cb;white-space:nowrap}time{font-variant-numeric:tabular-nums;color:var(--mint);font-size:19px}#notice{height:22px;text-align:center;color:var(--mint);font-size:10px;letter-spacing:.03em}.deck{display:grid;grid-template-columns:var(--side) minmax(0,1fr) var(--side);gap:12px;height:calc(100% - 65px);align-items:start}.wing{background:radial-gradient(ellipse at 50% 70%,#20293755,transparent);display:flex;align-items:center;flex-direction:column;min-width:0}.shoulders{display:flex;width:100%;gap:7px;margin-bottom:8px}.shoulders button{flex:1;min-width:0;border-radius:8px 8px 15px 15px;padding:5px}.stick{width:clamp(90px,25vh,145px);height:clamp(90px,25vh,145px);flex-shrink:0;border-radius:50%;border:1px solid #354253;background:radial-gradient(circle,#202a38 0 27%,#141c28 28% 65%,#202a37 66% 68%,#111824 69%);position:relative;touch-action:none}.knob{position:absolute;left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#57667a,#2e3b50 65%);box-shadow:0 6px 12px #0008;border:1px solid #738198;pointer-events:none}.cross{position:absolute;background:#53617a30}.cross.x{height:1px;top:50%;width:100%}.cross.y{width:1px;left:50%;height:100%}.north,.west{font-size:8px;letter-spacing:.08em;color:#8493a7;position:absolute;pointer-events:none}.north{top:8px;width:100%;text-align:center}.west{top:calc(50% - 5px);left:5px;writing-mode:vertical-rl;transform:rotate(180deg)}output{color:#8d9db3;font:10px/1.5 ui-monospace,monospace;white-space:nowrap;margin-top:5px}.saveRow{margin-top:9px}.save{font-size:11px;position:relative;overflow:hidden}.save.holding{background:#45573b}.center{min-width:0;padding-top:0}.video{width:100%;aspect-ratio:16/9;background:#111823;border:1px solid #2c3848;border-radius:12px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}#videoEmpty{display:flex;align-items:center;flex-direction:column;gap:7px;color:#93a4b9;text-align:center;padding:8px}#videoEmpty strong{font-size:clamp(14px,2vw,24px);font-weight:500;letter-spacing:.06em}#videoEmpty small{font-size:10px}.liveDot{width:6px;height:6px;border-radius:50%;background:#52647a}#loadVideo{font-size:10px;min-height:28px}.scenes{display:flex;justify-content:center;gap:8px;margin-top:9px}.scenes button{font-size:11px;flex:1}.scenes span{color:#b0bace;margin-left:6px}.videoHint{font-size:9px;text-align:center;color:#65768e;margin:7px 0}.rightControls{display:flex;align-items:center;gap:5px;justify-content:center;width:100%}.right .stick{width:clamp(80px,21vh,125px);height:clamp(80px,21vh,125px)}.abxy{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,32px);width:95px;flex-shrink:0}.abxy button{border-radius:50%;width:32px;height:32px;min-height:0;padding:1px;font-size:14px;line-height:1.1;box-shadow:0 2px 4px #0007}.abxy button small{font-size:7px;color:inherit}.abxy .y{grid-area:1/2;color:#f3d56b}.abxy .x{grid-area:2/1;color:#72b9f4}.abxy .b{grid-area:2/3;color:#fa8d8d}.abxy .a{grid-area:3/2;color:#94edaf}.card{max-width:700px;margin:7vh auto;padding:30px;background:#151c28;border:1px solid #303c50;border-radius:20px}.card>small{color:var(--mint);letter-spacing:.1em}h1{font-size:clamp(22px,4vw,32px)}.row{display:flex;gap:8px;flex-wrap:wrap}label{display:block;margin:12px 0}input{display:block;padding:10px;background:#0c131e;border:1px solid #40506a;border-radius:8px;color:white;width:100%}.subtle{color:#95a5bb}#portrait{display:none}dialog{background:#171f2d;color:#e6edf7;max-width:85vw;border:1px solid #556984;border-radius:15px;padding:22px}dialog::backdrop{background:#000a}[hidden]{display:none!important}@media(max-height:360px){header{height:34px}.deck{height:calc(100% - 54px);gap:7px}.shoulders{margin-bottom:4px}.saveRow{margin-top:3px}.videoHint{display:none}.scenes{margin-top:4px}.scenes button{min-height:28px;padding:4px}#notice{height:20px}.stick{width:90px;height:90px}.right .stick{width:80px;height:80px}}@media(max-width:740px){:root{--side:155px}.deck{gap:7px}.rightControls{gap:0}.abxy{width:72px;grid-template-rows:repeat(3,25px)}.abxy button{width:25px;height:25px;font-size:12px}.abxy button small{font-size:6px}.indicators{gap:7px;font-size:9px}.scenes span{margin-left:2px}.videoHint{font-size:8px}}@media(orientation:portrait){#portrait{display:flex;position:absolute;inset:44px 0 0;background:#0a0e15f8;flex-direction:column;align-items:center;justify-content:center;font-size:18px;z-index:10;padding:20px;text-align:center}#portrait span{font-size:12px;color:#8c9db4;margin-top:15px}}

[hidden]{display:none!important}#mfValue{display:inline-block;min-width:3ch;width:3ch;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}#controller{position:relative}#pauseOverlay{position:absolute;z-index:8;inset:65px 0 0;display:grid;place-items:center;background:#080e15aa;color:#fff;font-size:16px;pointer-events:auto}#pauseOverlay~.deck{position:relative}.indicators{flex-wrap:wrap;gap:3px 10px;white-space:normal}header{flex-shrink:0}.admincard{max-width:850px;margin:24px auto;padding:20px}.admincard label{display:block;margin:10px}#adminState{white-space:pre-wrap;overflow-wrap:anywhere}
/* v0.2.1 narrow touch layout. Deck columns and central video width are unchanged.
   The 44x44 targets use two rows; output/save occupy the empty lower-left corner. */
@media(max-width:960px){
 .right{position:relative}
 .right .shoulders{height:40px;margin-bottom:4px}
 .right .shoulders button{min-height:40px;padding:3px 2px;font-size:11px}
 .rightControls{display:block;position:relative;height:176px;width:155px}
 .rightControls .stick{position:absolute;top:0;left:0;width:80px;height:80px}
 .abxy{position:absolute;right:0;top:84px;display:grid;width:92px;height:92px;grid-template-columns:repeat(2,44px);grid-template-rows:repeat(2,44px);gap:4px}
 .abxy button{width:44px;height:44px;min-height:44px;padding:2px;font-size:16px}
 .abxy button small{font-size:9px}
 .abxy .y{grid-area:1/1}.abxy .b{grid-area:1/2}.abxy .x{grid-area:2/1}.abxy .a{grid-area:2/2}
 .right>output{position:absolute;left:0;top:128px;width:60px;white-space:normal;font-size:8px;margin-top:0;overflow-wrap:anywhere}
 .right>.saveRow{position:absolute;left:0;top:162px;width:60px;margin-top:0}
 .right .save{width:60px;min-height:44px;padding:4px 2px;font-size:10px}
 .right .save small{font-size:8px}
}

/* v0.2.3 auxiliary memories stay inside the existing side columns. */
.saveRow{display:flex;gap:4px;max-width:100%}.saveRow button{min-width:0;padding:4px 5px;font-size:10px}.saveRow button small{font-size:8px}.abxy .x small,.abxy .y small{font-size:8px;line-height:1.05}
@media(max-width:960px){.right>.saveRow{display:flex;flex-direction:column;gap:3px}.right>.saveRow button{width:60px;min-height:42px;padding:2px;font-size:10px}.left>.saveRow{width:100%;justify-content:center}.left>.saveRow button{flex:1}}