:root{
  --bg:#0e0d0b;
  --panel:#181613;
  --line:#2c2822;
  --ink:#e8e0cf;
  --dim:#8a8272;
  --gold:#c9a24b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#080706}
body{
  background:radial-gradient(120% 90% at 50% 0%, #191712 0%, #0b0a09 70%);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.app{height:100%;display:flex;flex-direction:column}
.stage{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:14px 14px 6px;
}
#c{
  height:100%;width:auto;max-width:100%;
  aspect-ratio:9/16;
  border-radius:6px;
  box-shadow:0 24px 70px rgba(0,0,0,.75), 0 0 0 1px rgba(201,162,75,.18);
  background:#0a0908;
  display:block;
}
.bar{
  height:62px;flex:0 0 62px;
  display:flex;align-items:center;gap:16px;
  padding:0 18px;
  background:linear-gradient(180deg,rgba(24,22,19,.6),rgba(14,13,11,.98));
  border-top:1px solid var(--line);
}
.bar-left,.bar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.bar-mid{flex:1;min-width:120px;display:flex;align-items:center}
.btn{
  appearance:none;border:1px solid #3a342b;background:#1f1c18;color:var(--ink);
  height:32px;padding:0 12px;border-radius:5px;cursor:pointer;
  font-size:13px;letter-spacing:.4px;font-family:inherit;
  transition:.15s background,.15s border-color;
}
.btn:hover{background:#2a251f;border-color:#4d4436}
.btn.primary{background:#2a2318;border-color:#6b5730;color:#f0dcb4}
.btn.primary:hover{background:#372d1d}
.time{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.5px}
.shotname{font-size:12px;color:#b9ae97;letter-spacing:1px;min-width:92px;text-align:right}
.chk{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.chk input{accent-color:var(--gold)}

.track{
  position:relative;height:6px;width:100%;border-radius:3px;
  background:#241f19;cursor:pointer;
}
.track-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:linear-gradient(90deg,#6b5730,#c9a24b)}
.track-head{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:#f2e3c2;box-shadow:0 0 0 2px #1a1611,0 0 12px rgba(201,162,75,.6);
  pointer-events:none}
.track-ticks{position:absolute;inset:0;pointer-events:none}
.tick{position:absolute;top:-2px;width:1px;height:10px;background:#4a4235;opacity:.85}
.tick.major{background:#7d6a45;height:14px;top:-4px}

.boot{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#0b0a09;color:#8a8272;font-size:13px;letter-spacing:3px;z-index:9;
  transition:opacity .5s;
}
.boot.hide{opacity:0;pointer-events:none}

/* 逐帧截图 / 成片预览模式：隐藏控件，画布 1:1 铺满 */
body.raw{overflow:hidden}
html:has(body.raw){background:#080706}
body.raw .bar{display:none}
body.raw .stage{padding:0;display:block}
body.raw #c{height:100vh;width:100%;display:block;max-width:none;border-radius:0;box-shadow:none;aspect-ratio:auto}