:root{
  --ink:#0f0d0e; --panel:#1b1719; --panel2:#241f22; --line:#3a3135;
  --spot:#ffc94a; --spot2:#ff9a3d; --rec:#ff3b3b; --cream:#f3e9d2; --dim:#9a8e86;
  --nc:110px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--cream);font-family:'DM Mono',monospace;font-size:13px;overflow:hidden}
button,select,input{font-family:inherit;font-size:12px}
button{background:var(--panel2);color:var(--cream);border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;transition:.15s}
button:hover{border-color:var(--spot);color:var(--spot)}
button.hot{background:var(--spot);color:#1a1205;border-color:var(--spot);font-weight:500}
button.hot:hover{background:var(--spot2);color:#1a1205}
button.on{background:var(--spot);color:#1a1205;border-color:var(--spot)}
button.ghost{background:none}
select{background:var(--panel2);color:var(--cream);border:1px solid var(--line);border-radius:8px;padding:5px}

#app{display:grid;height:100vh;height:100dvh;grid-template-columns:260px 1fr 300px;grid-template-rows:54px 1fr 150px 26px;
  grid-template-areas:"top top top" "left stage right" "tl tl tl" "foot foot foot"}
#top{grid-area:top;display:flex;align-items:center;justify-content:space-between;padding:0 14px;
  background:repeating-linear-gradient(90deg,#161214 0 22px,#1c1719 22px 44px);border-bottom:2px solid var(--spot)}
.logo{font-family:'Bowlby One SC',cursive;font-size:22px;letter-spacing:1px;display:flex;align-items:center;gap:10px}
.logo b{color:var(--spot);font-weight:400}
.clap{width:26px;height:20px;background:linear-gradient(#fff 0 6px,#111 6px);border-radius:3px;position:relative;
  background-image:repeating-linear-gradient(-45deg,#fff 0 4px,#111 4px 8px);background-size:100% 6px;background-repeat:no-repeat;background-color:#222}
.topbtns{display:flex;gap:6px}
.mob{display:none}

.panel{background:var(--panel);overflow-y:auto;border-color:var(--line)}
#left{grid-area:left;border-right:1px solid var(--line);padding:12px}
#right{grid-area:right;border-left:1px solid var(--line);padding:12px}
.tabs{display:flex;gap:4px;margin-bottom:10px}
.tabs button{flex:1;padding:6px 2px;font-size:11px}
.drop{display:block;border:2px dashed var(--line);border-radius:12px;padding:18px 10px;text-align:center;cursor:pointer;transition:.2s;
  background:radial-gradient(circle at 50% 0,#2b2326,transparent 70%)}
.drop.over,.drop:hover{border-color:var(--spot);background:radial-gradient(circle at 50% 0,#3d2f1a,transparent 70%)}
.dropbig{font-family:'Bowlby One SC';font-size:16px;color:var(--spot)}
.dropsm{color:var(--dim);font-size:11px;margin-top:4px}
.assets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.asset{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px;cursor:pointer;position:relative;
  animation:pop .35s both}
.asset.on{border-color:var(--spot);box-shadow:0 0 0 1px var(--spot)}
.asset .th{height:70px;border-radius:6px;background-size:contain;background-position:center;background-repeat:no-repeat;
  background-color:#0c0a0b;background-image:var(--img)}
.asset .nm{font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset .x{position:absolute;top:2px;right:2px;padding:0 6px;font-size:11px;border-radius:6px}
.hint{color:var(--dim);font-size:11px;line-height:1.5}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(6px)}}

#stage{grid-area:stage;position:relative;overflow:hidden;background:#000}
#scene-container{position:absolute;inset:0}
#scene-container canvas{display:block;touch-action:none}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
  font-family:'Bowlby One SC';font-size:20px;color:var(--dim);pointer-events:none;
  background:radial-gradient(ellipse at 50% 0,rgba(255,201,74,.15),transparent 60%)}
.empty button{pointer-events:auto}
.camtools{position:absolute;top:10px;left:10px;display:flex;gap:4px}
.camtools button{background:rgba(20,16,18,.75);backdrop-filter:blur(4px);font-size:11px}
.recbadge{position:absolute;top:10px;right:12px;color:var(--rec);font-weight:500;animation:blink 1s infinite;font-size:14px}
@keyframes blink{50%{opacity:.25}}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Bowlby One SC';
  font-size:min(22vw,180px);color:var(--spot);background:rgba(0,0,0,.55);text-shadow:0 0 40px rgba(255,201,74,.6)}
.countdown span{animation:cd .6s both}
@keyframes cd{from{transform:scale(1.8);opacity:0}}

/* inspector */
.ihead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.iname{font-family:'Bowlby One SC';font-size:17px;color:var(--spot);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec{border-top:1px dashed var(--line);padding:10px 0 6px}
.sec h4{margin:0 0 8px;font-family:'Bowlby One SC';font-weight:400;font-size:12px;letter-spacing:1.5px;color:var(--cream);
  display:flex;align-items:center;gap:6px}
.sec h4:before{content:'';width:10px;height:10px;border-radius:50%;background:var(--spot)}
.sl{display:grid;grid-template-columns:78px 1fr 40px;align-items:center;gap:6px;margin:4px 0}
.sl label{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl output{font-size:10px;text-align:right;color:var(--cream)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line);border-radius:4px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--spot);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--spot);border:none}
.row{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.chk{display:flex;gap:6px;align-items:center;margin:4px 0;font-size:11px}
.bigrec{width:100%;padding:12px;background:#2a1213;border-color:var(--rec);color:#ffd9d9;font-size:14px;font-weight:500}
.bigrec.live{background:var(--rec);color:#fff;animation:blink 1s infinite}
#wave{width:100%;height:44px;background:#0d0b0c;border-radius:8px;margin-top:6px;display:block}
.danger{border-color:#6b2a2a;color:#ff9b9b}

/* timeline */
#timeline{grid-area:tl;background:linear-gradient(#171315,#120f10);border-top:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tlbar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.03) 14px 18px)}
.round{width:32px;height:32px;border-radius:50%;padding:0}
.round.rec{color:var(--rec);border-color:var(--rec)}
.round.rec.live{background:var(--rec);color:#fff}
.mono{min-width:56px;color:var(--spot)}
#scrub{flex:1}
#tlwrap{position:relative;flex:1;overflow-y:auto;min-height:0}
.track{display:flex;align-items:center;height:28px;border-bottom:1px solid #221c1f}
.track.on{background:rgba(255,201,74,.06)}
.tname{width:var(--nc);flex:none;padding:0 8px;font-size:11px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane{flex:1;position:relative;height:100%;cursor:pointer;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#2a2326 calc(10% - 1px) 10%)}
.kf{position:absolute;top:50%;width:10px;height:10px;background:var(--spot);transform:translate(-50%,-50%) rotate(45deg)}
.clip{position:absolute;top:5px;bottom:5px;background:linear-gradient(90deg,#c22,#ff5a3d);border-radius:5px;font-size:9px;padding:0 5px;
  color:#fff;font-weight:400;overflow:hidden;line-height:18px}
.tl-empty{padding:16px;color:var(--dim)}
#playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--rec);pointer-events:none;left:var(--nc);box-shadow:0 0 8px var(--rec)}

#foot{grid-area:foot;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:10px;color:var(--dim);
  background:#0b090a;border-top:1px solid var(--line)}
#foot a{color:var(--spot)}

/* bench modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.modal[hidden]{display:none}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:min(980px,100%);max-height:100%;display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .3s both}
.mhead{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line)}
.mtabs{display:flex;gap:4px}
.mbody{display:flex;gap:12px;padding:12px;min-height:0;flex:1;overflow:auto}
.bwrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:300px;border-radius:10px;
  background:repeating-conic-gradient(#2a2a2a 0 25%,#3a3a3a 0 50%) 0 0/20px 20px}
#bcv{max-width:100%;max-height:62vh;touch-action:none;cursor:crosshair}
.btools{width:250px;flex:none}
.limb{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;background:var(--panel2);border-radius:6px;margin:3px 0;font-size:11px}

#toast{position:fixed;left:50%;bottom:190px;transform:translateX(-50%) translateY(20px);background:var(--spot);color:#1a1205;padding:9px 16px;
  border-radius:20px;font-weight:500;opacity:0;transition:.3s;pointer-events:none;z-index:99}
#toast.show{opacity:1;transform:translateX(-50%)}

@media (max-width:900px){
  :root{--nc:74px}
  #app{grid-template-columns:1fr;grid-template-rows:50px 1fr 140px 24px;grid-template-areas:"top" "stage" "tl" "foot"}
  .logo{font-size:16px}
  .topbtns{gap:3px;overflow-x:auto}
  .topbtns button{padding:5px 7px;font-size:11px}
  #btnLoad,#btnNew{display:none}
  .mob{display:inline-block}
  .panel{position:fixed;left:0;right:0;bottom:0;height:58vh;z-index:30;transform:translateY(105%);transition:.3s;
    border-top:2px solid var(--spot);border-radius:16px 16px 0 0;box-shadow:0 -20px 50px rgba(0,0,0,.6)}
  .panel.open{transform:none}
  .mbody{flex-direction:column}
  .btools{width:auto}
}