:root{
  --bg:#E3E6E9; --panel:#F6F7F8; --ink:#18202A; --muted:#5A6573; --line:#C9CFD6;
  --accent:#2D4BD6; --accent-ink:#FFFFFF; --mark:#D99A00; --stage:#D3D8DE; --dot:#BCC3CB;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15191E; --panel:#1E232A; --ink:#E6EAEE; --muted:#97A1AD; --line:#323A44;
    --accent:#8398FF; --accent-ink:#0E1320; --mark:#F2C14E; --stage:#0F1216; --dot:#262D36;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15191E; --panel:#1E232A; --ink:#E6EAEE; --muted:#97A1AD; --line:#323A44;
  --accent:#8398FF; --accent-ink:#0E1320; --mark:#F2C14E; --stage:#0F1216; --dot:#262D36;
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13.5px; line-height:1.5; font-weight:400;
}
header{padding:22px 20px 6px; max-width:1500px; margin:0 auto}
h1{font-size:clamp(24px,3vw,38px); line-height:1.1; font-weight:300; letter-spacing:-0.04em; margin:0 0 6px}
h1 b{font-weight:700}
header p{margin:0; color:var(--muted); max-width:62ch}

.app{
  display:grid; grid-template-columns:minmax(300px,370px) 1fr; gap:18px;
  padding:16px 20px 28px; max-width:1500px; margin:0 auto; align-items:start;
}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:2px 14px 4px}
.stage{position:sticky; top:calc(env(safe-area-inset-top,0px) + 12px); min-width:0}

.step{border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step > summary{
  list-style:none; cursor:pointer; user-select:none;
  font-size:14px; font-weight:600; padding:10px 2px; display:flex; align-items:center; gap:9px;
}
.step > summary::-webkit-details-marker{display:none}
.step > summary::after{
  content:""; margin-left:auto; width:7px; height:7px; flex:0 0 auto;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(-45deg); transition:transform .15s;
}
.step[open] > summary::after{transform:rotate(45deg)}
.step > summary:hover{color:var(--accent)}
.step .n{
  width:19px; height:19px; border-radius:50%; border:1.5px solid currentColor;
  display:inline-grid; place-items:center; font-size:11px; font-weight:700; flex:0 0 auto;
}
.step .body{padding:0 2px 10px}
.hint{font-size:13px; color:var(--muted); margin:4px 0 8px}
.sub{font-size:13px; font-weight:600; margin:14px 0 2px}

.ctl{display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; margin:8px 0}
.ctl label{font-size:13.5px}
.ctl input[type=range]{grid-column:1/-1; width:100%; margin:4px 0 0; accent-color:var(--accent); height:22px}
.numwrap{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:7px; background:var(--bg); padding:0 8px 0 0}
.numwrap input{
  width:78px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:13.5px;
  padding:4px 4px 4px 8px; text-align:right; -moz-appearance:textfield;
}
.numwrap input::-webkit-inner-spin-button{opacity:.5}
.numwrap .unit{font-size:12px; color:var(--muted); min-width:10px}

.btn{
  font:inherit; font-size:14px; font-weight:600; padding:9px 14px; border-radius:9px;
  border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn.primary:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btns{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; margin:6px 0 10px}
.seg button{flex:1; font:inherit; font-size:13.5px; padding:7px 4px; border:0; background:transparent; color:var(--ink); cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--panel); font-weight:600}

.check{display:flex; gap:8px; align-items:center; font-size:13.5px; margin:8px 0}
.check input{accent-color:var(--accent); width:16px; height:16px}

video.preview{width:100%; max-height:190px; border-radius:8px; background:#000; display:none; margin-top:8px}
.meta{font-size:13px; color:var(--muted); margin-top:6px; overflow-wrap:anywhere}
.estimate{font-size:13px; color:var(--muted); background:var(--bg); border-radius:8px; padding:8px 10px; margin-top:6px}

.viewport{
  position:relative; height:min(70vh,760px); min-height:320px; border-radius:14px; overflow:hidden;
  background-color:#000; --vp-ink:#E6EAEE; --vp-muted:#8A929C;
}
.viewport.light-bg{--vp-ink:#18202A; --vp-muted:#5A6573}
.viewport canvas{display:block; width:100%; height:100%; object-fit:contain; touch-action:none; cursor:grab}
.viewport canvas:active{cursor:grabbing}
.viewport.picking canvas, .strip.picking .thumb{cursor:crosshair}
.gizmo{position:absolute; right:10px; top:10px; width:70px; height:70px; pointer-events:none; overflow:visible}
.gizmo text{font:700 9px "Roboto Mono",ui-monospace,monospace; fill:#fff; text-anchor:middle; dominant-baseline:central}
.viewport.drag{outline:3px dashed var(--accent); outline-offset:-10px}

.empty{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px;
}
.empty .inner{max-width:420px}
.empty .big{font-size:clamp(22px,2.6vw,30px); font-weight:600; letter-spacing:-0.02em; line-height:1.15; margin:0 0 10px; color:var(--vp-ink)}
.empty p{color:var(--vp-muted); margin:0 0 16px}

.progress{position:absolute; left:16px; right:16px; top:16px; display:none; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px}
.bar{height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:6px}
.bar i{display:block; height:100%; width:0; background:var(--accent)}

.hud{
  position:absolute; left:12px; bottom:12px; right:12px; display:flex; flex-wrap:wrap; gap:6px; pointer-events:none;
}
.hud span{background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:3px 8px; font-size:12.5px}
.hud b{font-weight:600}
.orbit-hint{position:absolute; left:12px; top:12px; right:96px; font-size:12px; color:var(--vp-muted); pointer-events:none}
.bgrow{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin:-4px 0 8px}
.swatch{width:18px; height:18px; border-radius:5px; border:1px solid var(--line); flex:0 0 auto}

.strip{display:flex; gap:6px; overflow-x:auto; padding:10px 2px 6px; min-height:24px}
.thumb{
  flex:0 0 auto; display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  border:2px solid transparent; border-radius:7px; padding:2px; background:none; cursor:pointer;
  color:var(--muted); font:inherit; font-size:11px;
}
.thumb canvas{height:54px; width:auto; display:block; border-radius:4px}
.thumb[aria-current="true"]{border-color:var(--mark); color:var(--ink)}
.thumb.off canvas{opacity:.35}

.toast{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); transform:translateX(-50%);
  background:var(--ink); color:var(--panel); padding:9px 14px; border-radius:9px; font-size:14px;
  opacity:0; transition:opacity .2s; pointer-events:none; max-width:90vw; z-index:10;
}
.toast.show{opacity:1}

select{
  font:inherit; font-size:13.5px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:7px; padding:4px 6px;
}
.transport{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.transport .seg{margin:0; max-width:440px}
.playrow{display:flex; align-items:center; gap:12px}
.playrow input[type=range]{flex:1; min-width:0; accent-color:var(--accent); height:22px}
.play{display:inline-flex; align-items:center; gap:8px; min-width:136px; justify-content:center}
.play svg{width:14px; height:14px; fill:currentColor}
.clock{font-size:13px; color:var(--muted); min-width:128px; text-align:right}
.playopts{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; font-size:13.5px}
.playopts label{display:inline-flex; align-items:center; gap:8px}
.viewport.front canvas, .viewport.iso canvas{cursor:default}

.presets{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px}
.btn.sm{font-size:13px; padding:6px 10px}
.tl{position:relative; padding-top:16px; margin:8px 0 2px}
.tl input[type=range]{width:100%; accent-color:var(--accent); height:22px; margin:0; display:block}
.tl-marks{position:absolute; left:8px; right:8px; top:0; height:14px}
.kf{position:absolute; top:1px; width:11px; height:11px; margin-left:-5.5px; transform:rotate(45deg); background:var(--mark); border:0; padding:0; border-radius:2px; cursor:pointer}
.kf.cur{outline:2px solid var(--ink); outline-offset:1px}
.tlinfo{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted)}
.colors{display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; font-size:13.5px; margin:6px 0}
.colors label{display:inline-flex; gap:6px; align-items:center}
input[type=color]{width:34px; height:24px; padding:0; border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer}
.seg button:disabled{opacity:.4; cursor:not-allowed}

.credits{border-top:1px solid var(--line); margin-top:4px; padding:14px 2px 12px; font-size:12px; line-height:1.6; color:var(--muted)}
.credits p{margin:0}
.credits p + p{margin-top:10px}
.credits b{font-weight:600; color:var(--ink)}
.credits a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.credits a:hover{color:var(--accent)}

@media (max-width:860px){
  .app{grid-template-columns:1fr; padding:12px}
  .stage{position:static; order:-1}
  .viewport{height:52vh}
  header{padding:16px 14px 0}
  .clock{min-width:0}
  .play{min-width:0}
}
@media (prefers-reduced-motion:reduce){ .toast{transition:none} }