*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:transparent;font-family:"Segoe UI",system-ui,sans-serif;cursor:default}
#stage{display:block;position:fixed;inset:0;width:100vw;height:100vh;background:transparent}
.control-strip{position:fixed;top:14px;left:14px;z-index:100;display:flex;flex-direction:column;gap:8px;min-width:250px;max-width:340px;padding:11px 13px;background:rgba(6,10,16,0.92);border:1px solid rgba(120,180,220,0.3);color:#d5e4f0;user-select:none;backdrop-filter:blur(8px)}
.control-strip.is-hidden{display:none}
.control-strip__brand{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;font-weight:650;color:#c7d8e6}
.control-strip__sub{margin-top:-4px;font-size:11px;color:#8fa0b0}
.control-strip__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.control-strip__row--slider{align-items:center}
.ctrl-label{font-size:11px;color:#9aabbb;white-space:nowrap;min-width:58px}
.ctrl-btn{appearance:none;border:1px solid rgba(110,170,210,0.4);background:rgba(14,22,34,0.95);color:#dceaf5;font-size:11px;letter-spacing:0.03em;padding:7px 10px;cursor:pointer}
.ctrl-btn:hover{border-color:rgba(150,210,245,0.65);background:rgba(18,30,46,0.98)}
.ctrl-btn:disabled{opacity:0.5;cursor:default}
.ctrl-btn--primary{border-color:rgba(90,190,230,0.55);background:rgba(12,28,44,0.98)}
.ctrl-btn--active{border-color:rgba(120,230,190,0.75);color:#e9fff6}
.ctrl-select{flex:1;min-width:140px;padding:6px 8px;font-size:11px;color:#dceaf5;background:rgba(14,22,34,0.95);border:1px solid rgba(110,170,210,0.38);cursor:pointer}
.ctrl-range{flex:1;min-width:110px;accent-color:#5ac8e8}
.ctrl-value{font-size:11px;color:#93a4b4;min-width:24px;text-align:right}
.control-strip__status{font-size:11px;color:#93a4b4;min-height:16px;letter-spacing:0.04em}
.control-strip__hint{font-size:10px;color:#667788;letter-spacing:0.04em}
.ctrl-select:focus,.ctrl-btn:focus{outline:1px solid rgba(120,200,240,0.55);outline-offset:1px}

/* Phone-only: hide/show existing control strip (desktop unchanged) */
.mobile-controls-toggle{display:none}
@media (max-width:768px){
  .mobile-controls-toggle{
    display:block;
    position:fixed;
    top:12px;
    right:12px;
    z-index:110;
    appearance:none;
    border:1px solid rgba(110,170,210,0.5);
    background:rgba(6,10,16,0.92);
    color:#dceaf5;
    font-family:"Segoe UI",system-ui,sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.04em;
    padding:8px 10px;
    cursor:pointer;
    user-select:none;
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-controls-toggle:active{border-color:rgba(150,210,245,0.65)}
  .control-strip{transition:opacity .28s ease,transform .28s ease,visibility .28s ease}
  .control-strip.is-hidden{
    display:flex;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
  }
}