:root{
  --bg:#08080a; --panel:#141418; --panel2:#1d1d23; --line:#2a2a32;
  --ink:#f4f4f6; --dim:#9a9aa6; --accent:#ffb020; --danger:#ff4d4d;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{overflow:hidden}
button,input,textarea,a.pill{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}

.view{position:fixed;inset:0;display:none;flex-direction:column}
.view.is-active{display:flex}

/* ---------- top bars ---------- */
.bar{display:flex;align-items:center;gap:10px;
  padding:calc(var(--sat) + 12px) calc(var(--sar) + 16px) 12px calc(var(--sal) + 16px);
  border-bottom:1px solid var(--line);background:var(--bg)}
.bar h1{font-size:21px;letter-spacing:-.02em;margin:0;flex:1;font-weight:650}
.icon{width:40px;height:40px;border-radius:12px;background:var(--panel);
  display:grid;place-items:center;font-size:22px;line-height:1;color:var(--ink);flex:none}
.icon.danger{color:var(--danger);font-size:17px}
.title-input{flex:1;min-width:0;background:transparent;border:0;font-size:18px;font-weight:600;padding:8px 0}
.title-input::placeholder{color:var(--dim)}

/* ---------- pills ---------- */
.pill{padding:12px 18px;border-radius:14px;background:var(--panel2);font-size:15px;
  font-weight:600;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;border:1px solid var(--line)}
.pill:active{transform:scale(.97)}
.pill-accent{background:var(--accent);color:#17110a;border-color:transparent}
.pill.ghost{background:transparent;color:var(--dim)}
.pill.wide{width:100%;margin-top:10px}

/* ---------- library ---------- */
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px calc(var(--sar) + 16px) calc(var(--sab) + 32px) calc(var(--sal) + 16px)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line)}
.list .meta{flex:1;min-width:0}
.list .name{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .sub{font-size:13px;color:var(--dim);margin-top:3px}
.list .go{font-size:24px;color:var(--dim)}
.empty{text-align:center;color:var(--dim);margin:64px 0;font-size:17px;line-height:1.7}
.empty span{font-size:15px}
.foot{color:#5f5f6b;font-size:13px;line-height:1.6;margin-top:28px;text-align:center}

/* ---------- editor ---------- */
.body-input{flex:1;width:100%;background:var(--bg);border:0;resize:none;outline:none;
  font-size:17px;line-height:1.62;
  padding:16px calc(var(--sar) + 16px) 16px calc(var(--sal) + 16px)}
.body-input::placeholder{color:#54545e}
.ed-foot{border-top:1px solid var(--line);background:var(--panel);
  padding:12px calc(var(--sar) + 16px) calc(var(--sab) + 14px) calc(var(--sal) + 16px)}
.stat{color:var(--dim);font-size:13px;margin-bottom:10px;text-align:center}
.stat b{color:var(--ink)}
.ed-actions{display:flex;gap:10px}
.ed-actions .pill.wide{margin-top:0;flex:1}

/* ---------- prompter ---------- */
.prompter{background:#000}
.cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000}
.cam.on{display:block}
.cam.flipped{transform:scaleX(-1)}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mirror{position:absolute;inset:0}
.mirror.mx{transform:scaleX(-1)}
.mirror.my{transform:scaleY(-1)}
.mirror.mx.my{transform:scale(-1,-1)}
.track{position:absolute;top:0;left:0;right:0;will-change:transform}
.copy{padding:0 calc(var(--sar) + 22px) 0 calc(var(--sal) + 22px);
  font-size:44px;line-height:1.34;font-weight:600;letter-spacing:-.01em;white-space:pre-wrap;
  text-shadow:0 2px 18px rgba(0,0,0,.85)}
.copy.serif{font-family:var(--font-serif);font-weight:500}
.copy.center{text-align:center}

.readline{position:absolute;top:38%;left:0;right:0;height:0;pointer-events:none}
.readline i{position:absolute;top:-8px;width:0;height:0;border:8px solid transparent;opacity:.8}
.readline i.l{left:calc(var(--sal) + 2px);border-left-color:var(--accent);border-right-width:0}
.readline i.r{right:calc(var(--sar) + 2px);border-right-color:var(--accent);border-left-width:0}

.countdown{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.66);font-size:120px;font-weight:700;color:var(--accent)}

/* ---------- chrome ---------- */
.chrome{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;
  transition:opacity .25s ease}
.chrome.hidden{opacity:0}
.chrome > *{pointer-events:auto}
.chrome.hidden > *{pointer-events:none}
.top{display:flex;align-items:center;gap:12px;
  padding:calc(var(--sat) + 10px) calc(var(--sar) + 14px) 10px calc(var(--sal) + 14px);
  background:linear-gradient(180deg,rgba(0,0,0,.92) 30%,rgba(0,0,0,.6) 70%,transparent)}
.top .icon{background:rgba(30,30,36,.8);backdrop-filter:blur(12px)}
.clock{flex:1;text-align:center;line-height:1.25}
.clock b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.clock span{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.progress{height:2px;background:rgba(255,255,255,.14);margin:0 14px;border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--accent)}
.bottom{margin-top:auto;
  padding:14px calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px);
  background:linear-gradient(0deg,rgba(0,0,0,.94) 40%,rgba(0,0,0,.72) 72%,transparent)}
.row{display:flex;align-items:center;justify-content:center;gap:12px}
.row+.row{margin-top:12px}
.knob{display:flex;align-items:center;gap:4px;background:rgba(28,28,34,.82);
  backdrop-filter:blur(12px);border-radius:14px;padding:4px}
.step{width:42px;height:38px;border-radius:11px;font-size:21px;color:var(--ink);
  display:grid;place-items:center;background:rgba(255,255,255,.07)}
.step:active{background:var(--accent);color:#17110a}
.knob-val{min-width:56px;text-align:center;line-height:1.1}
.knob-val b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.knob-val em{font-style:normal;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.tog{padding:11px 16px;border-radius:13px;font-size:14px;font-weight:600;
  background:rgba(28,28,34,.82);backdrop-filter:blur(12px);color:var(--dim)}
.tog.on{background:var(--accent);color:#17110a}
.tog.small{padding:9px 14px;font-size:13px}
.play{width:74px;height:74px;border-radius:50%;background:var(--accent);color:#17110a;
  font-size:28px;display:grid;place-items:center;box-shadow:0 8px 28px rgba(0,0,0,.5)}
.play:active{transform:scale(.94)}
.extras{min-height:0}
.extras:empty{display:none}
.rec{display:flex;align-items:center;gap:9px;padding:10px 18px;border-radius:13px;
  background:rgba(28,28,34,.82);backdrop-filter:blur(12px);font-size:14px;font-weight:600}
.rec i{width:13px;height:13px;border-radius:50%;background:var(--danger);flex:none}
.rec.live{background:var(--danger);color:#fff}
.rec.live i{border-radius:3px;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.35}}

.toast{position:absolute;left:50%;bottom:calc(var(--sab) + 190px);transform:translateX(-50%);
  background:rgba(20,20,24,.95);border:1px solid var(--line);padding:11px 18px;border-radius:12px;
  font-size:14px;max-width:82vw;text-align:center;z-index:20}

/* ---------- sheet ---------- */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:flex-end;z-index:50}
.sheet-card{width:100%;background:var(--panel);border-radius:22px 22px 0 0;border-top:1px solid var(--line);
  padding:20px calc(var(--sar) + 18px) calc(var(--sab) + 20px) calc(var(--sal) + 18px);
  max-height:92dvh;overflow-y:auto}
.sheet-card h2{margin:0 0 14px;font-size:19px}
.clip{width:100%;border-radius:14px;background:#000;max-height:44dvh}
.clip-meta{color:var(--dim);font-size:13px;margin:10px 0 2px;text-align:center}

/* hidden must win over component display rules */
[hidden]{display:none !important}
/* collapse the extras row when both buttons are hidden */
.extras:not(:has(button:not([hidden]))){display:none}

/* ---------- landscape: one compact control row ---------- */
@media (orientation:landscape) and (max-height:540px){
  .top{padding-top:calc(var(--sat) + 6px);padding-bottom:6px}
  .clock b{font-size:15px}
  .bottom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;
    padding-top:8px;padding-bottom:calc(var(--sab) + 8px)}
  .row{flex:0 0 auto;gap:9px}
  .row+.row{margin-top:0}
  .play{width:54px;height:54px;font-size:21px}
  .step{width:36px;height:32px;font-size:18px}
  .knob-val{min-width:48px}
  .knob-val b{font-size:14px}
  .tog{padding:9px 14px;font-size:13px}
  .rec{padding:9px 15px;font-size:13px}
  .readline{top:34%}
}