/* THE FACELESS SANDBOX — two equal columns, the studio's own theme.
   Dark (the studio's night theme, and standalone /sandbox, which sets data-theme="dark") takes the
   page's --card / --border / --ink / --l0 / --l2 with night fallbacks. Light (the studio without
   data-theme) gets its own Slush set below: white panels, cream wells, black ink, and sun used as a
   fill behind black text rather than as text colour, which is unreadable on white. */
.fsb,.fsb-toast{--f-card:var(--card,#1b1b20);--f-card2:var(--card2,#232329);--f-border:var(--border,rgba(243,239,230,.2));--f-border2:var(--border2,rgba(243,239,230,.28));--f-frame:var(--f-border);--f-ink:var(--ink,#f3efe6);--f-ink2:var(--ink2,#e6e1d6);--f-muted:var(--muted,#a8a49b);--f-faint:var(--faint,#8a877f);--f-r:var(--r,14px);--f-r-lg:var(--r-lg,20px);--f-sun:var(--sun,#ffd731);--f-l0:var(--l0,#0e0e11);--f-l2:var(--l2,#1f1f25);--f-good:var(--good,#5BD17A);--f-bad:var(--bad,#FF6A5A);--f-warn:var(--warn,#FFC14D);
  --f-hl:var(--f-sun);--f-hlbg:transparent;--f-chipbg:rgba(255,215,49,.12);--f-badbg:rgba(255,106,90,.14);--f-primary:#fff;--f-primary-ink:#000;--f-shadow:rgba(0,0,0,.5);--f-ring:var(--f-sun)}
html:not([data-theme="dark"]) :is(.fsb,.fsb-toast){--f-card:#fff;--f-card2:#fff4ec;--f-border:rgba(0,0,0,.14);--f-border2:rgba(0,0,0,.34);--f-frame:#000;--f-ink:#000;--f-ink2:#1a1a1a;--f-muted:#444;--f-faint:#5a5a5a;--f-l0:#fff4ec;--f-l2:#fbefe6;--f-good:#0a7043;--f-bad:#b83900;--f-warn:#6e5200;
  --f-hl:#000;--f-hlbg:#ffd731;--f-chipbg:#ffd731;--f-badbg:#ffe1d4;--f-primary:#000;--f-primary-ink:#fff;--f-shadow:rgba(0,0,0,.18);--f-ring:#000}
.fsb{
  display:grid;grid-template-columns:minmax(330px,37%) minmax(0,1fr);gap:14px;height:calc(100vh - 150px);min-height:560px;color:var(--f-ink);
  font-family:inherit;font-size:14px;line-height:1.5}
.fsb *{box-sizing:border-box}
.fsb button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.fsb textarea,.fsb input,.fsb select{font:inherit;color:inherit;background:none;border:0;outline:none}

/* the two columns are the same object: a flat panel, full height, scrolling inside */
.fsb .col{background:var(--f-card);border:1px solid var(--f-frame);border-radius:var(--f-r-lg);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.fsb .scroll{flex:1;overflow:auto;min-height:0}

/* ── left: one continuous draft ─────────────────────────────────────────────────────── */
.fsb .draft{padding:22px 24px 8px;display:flex;flex-direction:column;gap:6px}
.fsb .sec{padding:18px 0 22px;border-bottom:1px solid var(--f-border)}
.fsb .sec:last-child{border-bottom:0}
.fsb .sh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fsb .idx{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--f-border2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--f-faint);flex-shrink:0}
.fsb .sec.done .idx{background:var(--f-sun);border-color:var(--f-sun);color:#000}
.fsb .st{font-weight:800;font-size:16px}
.fsb .sd{font-size:12.5px;color:var(--f-muted);margin-left:auto;text-align:right}
.fsb .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f-faint);margin:10px 0 6px}
.fsb .field{background:var(--f-l2);border:1px solid transparent;border-radius:var(--f-r);padding:12px 14px;font-size:14px;line-height:1.5;width:100%}
.fsb .field:focus-within{border-color:var(--f-border2)}
.fsb textarea.field{resize:vertical;min-height:88px}
.fsb .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fsb .appchip{display:inline-flex;align-items:center;gap:8px;background:var(--f-l2);border-radius:999px;padding:7px 13px 7px 8px;font-size:13px;font-weight:700}
.fsb .appchip i{width:22px;height:22px;border-radius:7px;background:var(--f-sun);display:block}
.fsb .appchip small{font-weight:400;color:var(--f-muted);font-size:12px}

.fsb .lvbtn{font-weight:700;font-size:13.5px;border-radius:999px;padding:11px 20px;border:1px solid var(--f-border2);background:var(--f-card2);color:var(--f-ink);display:inline-flex;align-items:center;gap:8px;transition:transform .12s,border-color .15s}
.fsb .lvbtn:hover{transform:translateY(-1px);border-color:var(--f-faint)}
.fsb .lvbtn.primary{background:var(--f-primary);color:var(--f-primary-ink);border-color:var(--f-primary)}
.fsb .lvbtn.sun{background:var(--f-sun);color:#000;border-color:var(--f-ring)}
.fsb .lvbtn.sm{padding:7px 14px;font-size:12px}
.fsb .lvbtn:disabled{opacity:.5;cursor:default;transform:none}
.fsb .lvchip{font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:999px;border:1px solid var(--f-border2);color:var(--f-muted);cursor:pointer;user-select:none;white-space:nowrap;background:var(--f-l2)}
.fsb .lvchip:hover{color:var(--f-ink);border-color:var(--f-faint)}
.fsb .lvchip.on{background:var(--f-sun);border-color:var(--f-ring);color:#000}

/* the script as lines, edited in place — this IS the film's document */
.fsb .lines{display:flex;flex-direction:column;gap:6px}
.fsb .ln{display:flex;gap:12px;align-items:flex-start;background:var(--f-l2);border-radius:var(--f-r);padding:11px 14px;border:1px solid transparent}
.fsb .ln.on{border-color:var(--f-border2)}
.fsb .ln i{font-style:normal;font-size:11px;font-weight:800;color:var(--f-faint);padding-top:4px;min-width:14px}
.fsb .ln .t{flex:1;font-size:14.5px;line-height:1.45;outline:none}
.fsb .ln .t b{color:var(--f-hl);font-weight:600;background:linear-gradient(transparent 58%,var(--f-hlbg) 58%)}
.fsb .ln .x{opacity:0;color:var(--f-faint);font-size:16px;padding:0 2px}
.fsb .ln:hover .x{opacity:1}
.fsb .addln{align-self:flex-start;font-size:12.5px;color:var(--f-muted);padding:6px 4px}
.fsb .addln:hover{color:var(--f-ink)}

/* looks: a list, proven first, a live swatch on each */
.fsb .looks{display:flex;flex-direction:column;gap:6px}
.fsb .look{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--f-r);background:var(--f-l2);border:1px solid transparent;cursor:pointer}
.fsb .look:hover{border-color:var(--f-border2)}
.fsb .look.on{border-color:var(--f-ring);box-shadow:0 0 0 1px var(--f-ring)}
.fsb .look .sw{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.25)}
.fsb .look .sw b{width:12px;height:12px;border-radius:50%;display:block}
.fsb .look .nm{font-weight:700;font-size:14px}
.fsb .look .ds{font-size:12px;color:var(--f-muted);line-height:1.35}
.fsb .look .tier{margin-left:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--f-faint);white-space:nowrap}
.fsb .look .tier.proven{color:var(--f-hl);background:var(--f-hlbg);border-radius:5px;padding:2px 6px}
.fsb .knob{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--f-muted)}
.fsb .knob input[type=color]{width:34px;height:34px;border-radius:50%;padding:0;border:1px solid var(--f-border2);cursor:pointer;background:none}
.fsb .knob input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.fsb .knob input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}

/* pinned foot of the left column: Make the draft, then the composer */
.fsb .foot{padding:14px 20px 18px;border-top:1px solid var(--f-border);background:var(--f-card)}
.fsb .foot .lvbtn{width:100%;justify-content:center;padding:14px}
.fsb .composer{display:flex;gap:10px;align-items:flex-end;background:var(--f-l2);border-radius:var(--f-r);padding:10px 12px}
.fsb .composer textarea{flex:1;max-height:130px;line-height:1.45;font-size:14px}
.fsb .composer button{width:34px;height:34px;border-radius:50%;background:var(--f-sun);color:#000;font-size:16px;flex:none}

/* the thread, after the draft */
.fsb .thread{padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.fsb .you{align-self:flex-end;background:var(--f-l2);border-radius:var(--f-r);padding:9px 13px;font-size:14px;max-width:86%}
.fsb .said{font-size:14px;color:var(--f-ink2);line-height:1.55}
.fsb .said em{font-style:normal;color:var(--f-ink);font-weight:700}
.fsb .chips{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.fsb .chip{font-size:11.5px;padding:4px 10px;border-radius:999px;background:var(--f-chipbg);color:var(--f-hl);font-weight:700}
.fsb .chip.bad{background:var(--f-badbg);color:var(--f-bad)}
.fsb .chip.ghost{background:var(--f-l2);color:var(--f-muted);cursor:pointer}
.fsb .chip.ghost:hover{color:var(--f-ink)}
.fsb .topbar{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--f-border);font-size:13px;color:var(--f-muted)}
.fsb .topbar .ttl{font-weight:800;color:var(--f-ink);font-size:14px}
.fsb .topbar .sp{flex:1}

/* ── right: the film, and nothing else until you ask ──────────────────────────────────── */
.fsb .stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:12px 14px 10px;gap:8px;flex:1;min-height:0}
.fsb .screen{position:relative;flex:1;min-height:0;aspect-ratio:9/16;max-width:100%;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px var(--f-shadow)}
.fsb .screen iframe{width:1080px;height:1920px;border:0;transform-origin:0 0;position:absolute;left:0;top:0}
.fsb .empty[hidden]{display:none}
.fsb .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--f-faint);font-size:13px;line-height:1.6;background:var(--f-l0)}
.fsb .transport{display:flex;align-items:center;gap:12px;color:var(--f-muted);font-size:12px;width:100%;max-width:720px}
.fsb .transport .sp{flex:1}
.fsb .transport button#fsb-pp{font-size:16px;color:var(--f-ink);width:34px;height:34px;border-radius:50%;background:var(--f-l2)}
.fsb .tc{font-variant-numeric:tabular-nums}
/* the drawer sits over the film's lower edge; closed, the film is all there is */
.fsb .drawer{display:none;position:absolute;left:14px;right:14px;bottom:58px;background:var(--f-card);border:1px solid var(--f-border2);border-radius:var(--f-r-lg);padding:14px 16px;box-shadow:0 18px 50px var(--f-shadow);z-index:5;flex-direction:column;gap:10px;align-items:center}
.fsb .drawer.open{display:flex}
.fsb .strip{width:100%;max-width:640px}
.fsb .bar{display:flex;gap:3px;position:relative;height:38px}
.fsb .seg{border-radius:7px;background:var(--f-l2);border:1px solid transparent;padding:5px 8px;overflow:hidden;cursor:pointer;min-width:0;position:relative}
.fsb .seg.on{border-color:var(--f-ring)}
.fsb .seg u{display:block;font-size:9.5px;color:var(--f-faint);text-decoration:none;white-space:nowrap;letter-spacing:.04em}
.fsb .seg s{display:block;font-size:11px;color:var(--f-ink2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsb .seg .grip{position:absolute;right:-2px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:2}
.fsb .seg .grip:hover{background:var(--f-sun)}
.fsb .head{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--f-bad);pointer-events:none}
.fsb .ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--f-faint);margin-top:5px}
.fsb .insp{width:100%;max-width:640px;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;font-size:12px;color:var(--f-muted)}
.fsb .insp .f{display:flex;flex-direction:column;gap:4px}
.fsb .insp .f.w{grid-column:1/-1}
.fsb .insp .in{background:var(--f-l2);border-radius:10px;padding:8px 10px;color:var(--f-ink);font-size:13px;outline:none}
.fsb .insp select{background:var(--f-l2);border-radius:10px;padding:8px 10px;color:var(--f-ink);font-size:13px;width:100%}
.fsb .insp input[type=range]{width:100%}
.fsb .verdict{width:100%;max-width:640px;font-size:11.5px;color:var(--f-muted);text-align:center}
.fsb .verdict b{color:var(--f-good);font-weight:700}
.fsb .verdict b.warn{color:var(--f-warn)}

.fsb-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--f-card);color:var(--f-ink);border:1px solid var(--f-border2);border-radius:12px;padding:10px 16px;font-size:13px;max-width:560px;z-index:99;box-shadow:0 10px 30px var(--f-shadow)}
.fsb-toast.bad{border-color:var(--f-bad)}
.fsb-toast a{color:var(--f-hl);background:var(--f-hlbg);border-radius:4px;padding:0 3px}

@media (max-width:1100px){.fsb{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.fsb .insp{grid-template-columns:1fr}}
@media (max-width:820px){.fsb{grid-template-columns:1fr;height:auto}.fsb .col{min-height:70vh}}