/* ---------------------------------------------------------------- type */
  @font-face { font-family:"Bebas Neue"; src:url(/static/fonts/BebasNeue-Regular.ttf); font-display:swap }

  /* The hidden attribute always hides. Without this any rule that sets a
     display (".phone .making" is flex) wins over it, and the element the
     script hid stays on screen: the "Making a preview" veil did, over the
     finished video, which read as a preview that never ended. */
  [hidden] { display:none !important }

  /* ---------------------------------------------------------------- tokens */
  :root { color-scheme:dark;
    --bg:#0b0c10; --surface:#14161c; --surface-2:#1b1e26; --surface-3:#242835;
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
    --text:#f2f3f5; --muted:#9aa0ad; --dim:#7b8290;
    --accent:#ff4d6d; --accent-hi:#ff6b85; --accent-ink:#14161c; --accent-soft:rgba(255,77,109,.14); --accent-glow:rgba(255,77,109,.45);
    --ok:#2ed37a; --ok-soft:rgba(46,211,122,.14); --warn:#ffb454; --warn-soft:rgba(255,180,84,.14);
    --bad:#ff5c5c; --bad-soft:rgba(255,92,92,.14); --info:#58a6ff; --info-soft:rgba(88,166,255,.14);
    --r:16px; --rs:12px; --rx:8px;
    --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
    --sans:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
    --shadow-h:0 2px 4px rgba(0,0,0,.5), 0 22px 44px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
    --ease:160ms cubic-bezier(.2,.7,.3,1) }
  * { box-sizing:border-box }
  html { scrollbar-color:#2a2e3a var(--bg) }
  body { margin:0; min-height:100vh; color:var(--text); font:15px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
    background-color:var(--bg);
    background-image:radial-gradient(1200px 500px at 50% -10%, rgba(255,77,109,.06), transparent), radial-gradient(900px 600px at 100% 100%, rgba(88,166,255,.03), transparent);
    background-repeat:no-repeat; background-attachment:fixed }
  ::selection { background:rgba(255,77,109,.35) }
  a { color:var(--accent); text-decoration:none } a:hover { text-decoration:underline }
  button, input, select, textarea { font:inherit; color:inherit }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px }

  /* ---------------------------------------------------------------- forms */
  input[type=text],input[type=number],input[type=password],input[type=url],select,textarea {
    width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--rs); padding:9px 12px; outline:none; color:var(--text);
    transition:border-color var(--ease), box-shadow var(--ease), background var(--ease) }
  input::placeholder, textarea::placeholder { color:var(--dim) }
  input:hover,select:hover,textarea:hover { border-color:var(--line-2) }
  input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,77,109,.25) }
  input[readonly] { color:var(--muted) }
  input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); vertical-align:-2px; margin-right:7px }
  .field { margin-bottom:12px } .field label { display:block; color:var(--muted); font-size:13px; font-weight:500; margin:0 0 5px }
  .field label.chk { color:var(--text); font-weight:400; display:flex; align-items:center; gap:0; cursor:pointer }

  /* ---------------------------------------------------------------- buttons */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:8px 14px; background:var(--surface-2); color:var(--text);
    border:1px solid var(--line-2); border-radius:var(--rs); font-weight:500; font-size:14px; cursor:pointer; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    transition:background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease) }
  .btn:hover { background:var(--surface-3); border-color:rgba(255,255,255,.22); text-decoration:none }
  .btn:active { transform:translateY(1px) }
  .btn:disabled { opacity:.4; cursor:not-allowed; transform:none }
  .btn.primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -10px var(--accent-glow) }
  .btn.primary:hover { background:var(--accent-hi); border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -10px rgba(255,77,109,.7) }
  .btn.ghost { background:transparent; border-color:transparent; color:var(--muted); box-shadow:none }
  .btn.ghost:hover { background:rgba(255,255,255,.06); color:var(--text); border-color:transparent }
  .btn.ok { background:transparent; color:var(--ok); border-color:rgba(46,211,122,.4) } .btn.ok:hover { background:var(--ok-soft) }
  .btn.bad { background:transparent; color:var(--bad); border-color:rgba(255,92,92,.45) } .btn.bad:hover { background:var(--bad-soft); border-color:var(--bad) }
  .btn.sm { min-height:30px; padding:4px 10px; font-size:13px; border-radius:var(--rx) }

  /* ---------------------------------------------------------------- shell */
  .top { position:sticky; top:0; z-index:10; height:56px; background:rgba(11,12,16,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:0 22px }
  .logo { display:flex; align-items:center; gap:10px; font:20px/1 var(--display); letter-spacing:.05em; margin-right:22px; padding-top:1px; color:var(--text) }
  .logo img { --s:26px; width:var(--s); height:var(--s); flex:none; display:block; border-radius:50%;
    box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 16px -6px rgba(0,0,0,.6) }
  .nav { display:flex; gap:2px; align-self:stretch }
  .nav a { position:relative; display:flex; align-items:center; padding:0 12px; color:var(--muted); font-weight:500; font-size:14px; transition:color var(--ease) }
  .nav a:hover { color:var(--text); text-decoration:none } .nav a.on { color:var(--text) }
  .nav a.on::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:var(--accent); box-shadow:0 0 12px var(--accent-glow) }
  .sp { flex:1 } .who { color:var(--muted); font-size:14px }
  .pill { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:5px 11px 5px 10px; border-radius:999px; border:1px solid transparent }
  .pill.live { background:var(--accent-soft); color:var(--accent); border-color:rgba(255,77,109,.28) }
  .pill.warn { background:var(--warn-soft); color:var(--warn); border-color:rgba(255,180,84,.28) }
  .pill:hover { text-decoration:none; filter:brightness(1.12) }
  .pill.live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:p 1.2s infinite }
  main { max-width:1500px; margin:0 auto; padding:28px 22px 72px }
  /* narrow screens: the nav drops to its own scrollable row instead of being clipped */
  @media (max-width:820px) {
    .top { height:auto; flex-wrap:wrap; padding:8px 14px; gap:8px } .logo { margin-right:auto }
    .nav { order:3; width:100%; min-width:0; height:42px; overflow-x:auto; scrollbar-width:none; align-self:auto }
    .nav a { padding:0 10px } .nav::-webkit-scrollbar { height:0 } .top .who { display:none }
    main { padding:18px 14px 52px }
  }

  /* ---------------------------------------------------------------- layout */
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow) }
  h1 { font:34px/1 var(--display); font-weight:400; letter-spacing:.02em; margin:0 0 6px; color:var(--text) }
  h2 { font:18px/1 var(--display); font-weight:400; letter-spacing:.04em; margin:0 0 14px; color:var(--text) }
  h2 .dim { font:13px/1 var(--sans); letter-spacing:0; margin-left:4px }
  .muted { color:var(--muted) } .dim { color:var(--dim); font-size:13px }
  .head { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin-bottom:22px }
  .head .sub { color:var(--muted); font-size:14px }
  .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap } .row + .row { margin-top:10px }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; animation:fade 200ms ease-out }
  /* Cards off screen are not laid out or painted until they are scrolled to.
     The reserved size is a card's own, so the scrollbar stays honest. */
  .grid > .lead { content-visibility:auto; contain-intrinsic-size:auto 300px auto 620px }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start } @media (max-width:960px) { .two { grid-template-columns:1fr } }
  .stack > * + * { margin-top:16px }
  @keyframes fade { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }

  /* ---------------------------------------------------------------- chips + badges */
  .chips { display:flex; gap:7px; flex-wrap:wrap }
  .chip { padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; font-size:13px; font-weight:500; color:var(--muted);
    transition:background var(--ease), border-color var(--ease), color var(--ease) }
  .chip:hover { border-color:var(--line-2); color:var(--accent) }
  .chip:active, .chip.on { background:var(--accent); color:var(--accent-ink); border-color:transparent }
  .chip b { font-weight:600; opacity:.65; margin-left:5px }
  /* the pipeline strip: five stage tiles in one bar, then two quiet pills */
  .tabs { display:flex; gap:12px; align-items:stretch; margin-bottom:14px }
  .strip { display:flex; flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden }
  .strip .chip { position:relative; flex:1; min-width:118px; display:flex; flex-direction:column-reverse; justify-content:center; gap:3px; padding:14px 12px 13px;
    border:0; border-radius:0; background:transparent; color:var(--muted); font-size:12.5px; font-weight:500; letter-spacing:.01em; text-align:center }
  .strip .chip + .chip::before { content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:linear-gradient(var(--line) 0 34%, transparent 34% 66%, var(--line) 66%) }
  .strip .chip:not(:last-child)::after { content:"\203A"; position:absolute; right:-5px; top:50%; transform:translateY(-58%); z-index:2; color:var(--dim); font-size:17px; line-height:1; pointer-events:none }
  .strip .chip b { font:30px/1 var(--display); letter-spacing:.02em; color:var(--text); margin:0; opacity:1 }
  .strip .chip b.z { color:var(--dim) }
  .strip .chip:hover { background:rgba(255,255,255,.03); color:var(--text) }
  .strip .chip.on { background:var(--surface-2); color:var(--text); box-shadow:inset 0 -2px 0 var(--accent) }
  .strip .chip.on b { color:var(--accent); text-shadow:0 0 18px rgba(255,77,109,.4) }
  .side { display:flex; gap:8px; align-items:center; flex:none }
  .side .chip { padding:8px 14px; background:var(--surface); box-shadow:var(--shadow) }
  .side .chip b { font-size:12px }
  .side .chip.on { background:var(--surface-2); color:var(--text); border-color:var(--line-2); box-shadow:inset 0 -2px 0 var(--accent), var(--shadow) }
  .side .chip.on b { color:var(--accent); opacity:1 }
  @media (max-width:820px) {
    .tabs { overflow-x:auto; scrollbar-width:none; margin:0 -14px 14px; padding:0 14px 6px } .tabs::-webkit-scrollbar { height:0 }
    .strip { flex:none } .strip .chip { flex:none; padding:12px 14px 11px }
  }
  .hint { color:var(--muted); font-size:14px; margin:0 0 18px }
  .b { display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.07); color:var(--muted); white-space:nowrap }
  .b.hot { background:var(--accent-soft); color:var(--accent) } .b.ok { background:var(--ok-soft); color:var(--ok) } .b.warn { background:var(--warn-soft); color:var(--warn) }
  .b.bad { background:var(--bad-soft); color:var(--bad) } .b.info { background:var(--info-soft); color:var(--info) }

  /* ---------------------------------------------------------------- lead cards */
  .lead { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
    transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease) }
  .lead:hover { transform:translateY(-2px); border-color:var(--line-2); box-shadow:var(--shadow-h) }
  .lead .media { position:relative; aspect-ratio:9/12; max-height:440px; background:#000; overflow:hidden }
  .lead video { width:100%; height:100%; object-fit:cover; display:block }
  .lead .nomedia { height:100%; display:grid; place-items:center; color:var(--dim); font-size:13px; background:linear-gradient(160deg,#171921,#0b0c10) }
  .lead.skip video, .lead.skip .nomedia { opacity:.55; filter:grayscale(.6) }
  .subs { margin-top:8px; max-height:150px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:13px; line-height:1.5 }
  .subs .subline { display:flex; align-items:center; gap:8px; margin-bottom:4px }
  .subs b { color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; flex:none }
  .subs input { flex:1; min-width:0; background:transparent; border:1px solid transparent; color:var(--text); border-radius:6px; padding:3px 6px; font:inherit }
  .subs input:hover { border-color:var(--line) } .subs input:focus { border-color:var(--accent); outline:none; background:var(--surface-2) }
  .subs .who { flex:none; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
    border:1px solid var(--line); background:var(--warn-soft); color:var(--warn); border-radius:999px; padding:2px 8px }
  .subs .who.main { background:var(--surface-2); color:var(--muted) }
  .lead .media .b { position:absolute; top:10px; left:10px; z-index:2; background:rgba(8,9,12,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    color:#fff; border:1px solid rgba(255,255,255,.14); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px }
  .lead .cap { position:absolute; left:0; right:0; bottom:0; z-index:1; padding:96px 14px 12px; pointer-events:none;
    background:linear-gradient(to bottom, rgba(20,22,28,0) 0%, rgba(20,22,28,.55) 50%, var(--surface) 100%) }
  .lead .t { font-weight:600; font-size:17px; line-height:1.25; color:#fff; letter-spacing:-.01em; text-shadow:0 1px 2px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.4) }
  .lead .s { color:var(--muted); font-size:13.5px; margin-top:3px; text-shadow:0 1px 2px rgba(0,0,0,.7) }
  /* two lines of it on the card; the rest is in the tooltip, and all of it is
     in the run log. Without the clamp a long one climbs up over the picture. */
  .phone .making { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:12px; background:rgba(8,9,12,.72); backdrop-filter:blur(3px); color:#fff; font-size:13.5px; text-align:center; padding:0 18px }
  .phone .making .spin { width:26px; height:26px; border-radius:50%; border:3px solid rgba(255,255,255,.22);
    border-top-color:#fff; animation:spin .8s linear infinite }
  @keyframes spin { to { transform:rotate(360deg) } }
  .voices { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap }
  .voices .voice { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11.5px; color:var(--muted) }
  .voices input[type=color] { width:44px; height:30px; padding:0; border:1px solid var(--line); border-radius:8px; background:none; cursor:pointer }
  .note.bad { color:var(--warn); border-left:3px solid var(--warn); padding-left:10px }
  .lead .timing { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; margin:-2px 0 10px }
  .lead .timing .tmwhy { color:var(--dim); flex:1 1 160px; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .lead .why { font-size:12.5px; color:var(--dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .lead .body { padding:10px 14px 14px; display:flex; flex-direction:column; gap:10px; flex:1 }
  .watch { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); background:var(--surface-2); border-radius:var(--rs) }
  .watch .go { display:block; font-weight:600; font-size:13.5px; color:var(--text); white-space:nowrap }
  .watch .go::first-letter { color:var(--accent); margin-right:7px; font-size:11px }
  .watch a.go:hover { text-decoration:none; color:var(--accent) }
  .watch button.go { background:none; border:0; padding:0; cursor:pointer; text-align:left } .watch button.go:hover { color:var(--accent) }
  .watch .alt { font-size:12.5px; color:var(--dim); margin-left:auto } .watch .alt:hover { color:var(--text); text-decoration:none }
  .acts { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:2px }
  .lead .foot { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--dim); border-top:1px solid var(--line); padding-top:10px }
  .lead .foot a { color:var(--dim) } .lead .foot a:hover { color:var(--text); text-decoration:none }
  /* library: the finished video itself, full 9:16, with the caption that was burned in */
  .lib .media { aspect-ratio:9/16; max-height:none } .lib video { object-fit:contain; background:#000 }
  .lib .poster { all:unset; position:absolute; inset:0; cursor:pointer; display:block }
  .lib .poster img, .lib video { width:100%; height:100%; object-fit:contain; display:block; background:#000 }
  .lib .poster .play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%;
    background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; font-size:22px; transition:transform var(--ease), background var(--ease) }
  .lib .poster:hover .play, .lib .poster:focus-visible .play { background:var(--accent); transform:translate(-50%,-50%) scale(1.06) }
  .lib .poster:focus-visible { outline:2px solid var(--accent); outline-offset:-2px }
  .lib .body .t { font-size:16px; text-shadow:none } .lib .body .s { text-shadow:none; margin-top:0 }
  .capq { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; font-size:13.5px; color:var(--muted); font-style:italic; line-height:1.4;
    padding:8px 10px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px }
  .capq .btn { flex:none; font-style:normal }
  .empty { color:var(--muted); text-align:center; padding:56px 20px; border:1px dashed var(--line-2); border-radius:var(--r); background:rgba(255,255,255,.015) }
  .empty b { display:block; color:var(--text); font-size:16px; margin-bottom:5px }

  /* ---------------------------------------------------------------- tiles + tables */
  .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px }
  .tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px 14px; box-shadow:var(--shadow) }
  .tile b { display:block; font:40px/1 var(--display); font-weight:400; letter-spacing:.02em; color:var(--text) }
  .tile .bar { display:block; height:3px; border-radius:2px; margin:10px 0 9px; background:var(--accent); box-shadow:0 0 10px var(--accent-glow) }
  .tile .bar.dim { background:var(--dim); box-shadow:none }
  .tile b + span { display:block; margin-top:8px }
  .tile span { color:var(--muted); font-size:12.5px; letter-spacing:.02em }
  .tile .pct { display:block; color:var(--dim); font-size:12px; margin-top:1px; letter-spacing:0 }
  table { width:100%; border-collapse:collapse; font-size:13.5px }
  th { text-align:left; color:var(--dim); font-weight:600; font-size:11.5px; letter-spacing:.06em; padding:6px 10px 8px; border-bottom:1px solid var(--line) }
  td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; transition:background var(--ease) } tr:last-child td { border-bottom:none }
  tr:hover td { background:var(--surface-2) }
  .log { background:#07080b; color:var(--muted); border:1px solid var(--line); border-radius:12px; padding:13px 14px; height:260px; overflow:auto; font:12.5px/1.6 var(--mono); white-space:pre-wrap }
  code { background:rgba(255,255,255,.07); color:var(--text); padding:2px 7px; border-radius:6px; font-size:12.5px; font-family:var(--mono) }

  /* ---------------------------------------------------------------- bots + activity */
  .bot { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
    transition:border-color var(--ease), box-shadow var(--ease) }
  .bot:hover { border-color:var(--line-2); box-shadow:var(--shadow-h) }
  .bot .n { font-weight:600; font-size:16px }
  .st { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted) }
  .st::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--dim); flex:none }
  .st.running::before { background:var(--accent); box-shadow:0 0 8px var(--accent); animation:p 1.2s infinite } .st.error::before { background:var(--bad) }
  .st.cooldown::before { background:var(--warn) } .st.idle::before { background:var(--ok) }
  @keyframes p { 50% { opacity:.25 } }
  details.card summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; color:var(--text) }
  details.card summary::-webkit-details-marker { display:none }
  details.card summary::before { content:""; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(-45deg); margin-left:2px; transition:transform var(--ease) }
  details[open].card summary::before { transform:rotate(45deg) }

  /* ---------------------------------------------------------------- modal + misc */
  .modal { position:fixed; inset:0; background:rgba(5,6,10,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; place-items:center; z-index:30; padding:16px }
  .modal.open { display:grid }
  .box { background:var(--surface); border:1px solid var(--line-2); border-radius:18px; width:min(940px,96vw); max-height:92vh; overflow:auto; padding:24px 26px;
    box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); animation:fade 200ms ease-out }
  .box h1 { font-size:26px } .box .two { gap:26px }
  .auth { min-height:100vh; display:grid; place-items:center; padding:20px } .auth .box { width:min(420px,94vw); padding:32px }
  .auth .logo { flex-direction:column; align-items:center; gap:14px; margin:0 0 18px; font-size:26px; letter-spacing:.14em; color:var(--text) }
  .auth .logo img { --s:88px } .auth h1 { font-size:28px; text-align:center } .auth h1 + p { text-align:center }
  /* Browser autofill paints inputs pale yellow; keep them on the dark surface. */
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset; -webkit-text-fill-color:var(--text); caret-color:var(--text); border-color:var(--line-2); transition:background-color 9999s }
  .toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,8px); background:var(--surface-2); border:1px solid var(--line-2); color:#fff; padding:11px 18px; border-radius:12px;
    opacity:0; transition:opacity var(--ease), transform var(--ease); pointer-events:none; z-index:40; box-shadow:0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
    max-width:92vw; text-align:center; font-size:14px }
  .toast.show { opacity:1; transform:translate(-50%,0) }
  /* the preview sits inside a phone: bezel, notch, black screen */
  .phone-col { display:flex; flex-direction:column; align-items:center; gap:12px }
  /* NO aspect-ratio here. It would size the BORDER box, and the 6px bezel then
     eats into the screen: at 310 wide the content box came out 298x539 while a
     real 9:16 frame at that width is 298x530. The exact-frame layer is
     object-fit:contain, so it centred inside those 9 spare pixels and drew a
     thin black band along the top of a full-bleed render. The screen takes its
     height from .prev instead, which IS the frame's shape. */
  .phone { position:relative; width:100%; max-width:310px; background:#000; border:6px solid var(--surface-2); border-radius:28px; overflow:hidden;
    box-shadow:0 0 0 1px var(--line-2), inset 0 0 0 1px rgba(255,255,255,.04), 0 30px 60px -24px rgba(0,0,0,.9) }
  .lookbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line) }
  .lookbar .chips { align-items:center }
  /* the Look's settings, one tab at a time */
  .looktabs { display:flex; gap:2px; padding:3px; margin-bottom:18px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--rs); overflow-x:auto; scrollbar-width:none }
  .looktabs::-webkit-scrollbar { height:0 }
  .looktabs button { flex:1 0 auto; border:0; background:transparent; color:var(--muted); padding:8px 14px; border-radius:9px; cursor:pointer; font-size:14px; font-weight:500; transition:background var(--ease), color var(--ease) }
  .looktabs button:hover { color:var(--text) }
  .looktabs button.on { background:var(--accent); color:var(--accent-ink); font-weight:600 }
  .looktabs button:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
  .lookpane[hidden] { display:none }
  /* ---------------------------------------------------------------- activity
     A tab per account, a status line you read at a glance, the reels that
     passed first, the rest folded. Rows are patched in place, never redrawn. */
  .acard, .adetail { transition:box-shadow .25s var(--ease), border-color .25s var(--ease) }
  .acard.lit, .adetail.lit { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 26px -6px var(--accent-glow) }
  .atabs { display:flex; gap:3px; padding:4px; margin-bottom:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--rs); overflow-x:auto; scrollbar-width:none }
  .atabs button { display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--muted); padding:9px 15px; min-height:40px; border-radius:9px; cursor:pointer; font:500 14px var(--sans); white-space:nowrap }
  .atabs button:hover { color:var(--text) }
  .atabs button.on { background:var(--accent); color:var(--accent-ink); font-weight:600 }
  .atabs button.on .adot { background:var(--accent-ink); box-shadow:none }
  .atabs .anote { font-size:12px; font-weight:500; opacity:.8 } .atabs .anote:empty { display:none }
  .adot { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; background:var(--ok) }
  .adot.running { background:var(--accent); box-shadow:0 0 8px var(--accent); animation:p 1.2s infinite }
  .adot.error { background:var(--bad) } .adot.cooldown { background:var(--warn) }
  .acards { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; margin-bottom:16px }
  .acard, .adetail { display:flex; flex-direction:column; gap:11px }
  .adetail { margin-bottom:16px; gap:14px }
  .acard.trouble, .adetail.trouble { border-color:rgba(255,92,92,.35) }
  .ahead { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
  .aname { display:flex; align-items:center; gap:9px; min-width:0 } .aname b { font-size:16px } .adetail .aname b { font-size:19px }
  .arow-btns { display:flex; gap:6px; align-items:center }
  .aline { color:var(--muted); font-size:13.5px; font-variant-numeric:tabular-nums } .aline.bad { color:#ff8a8a }
  .aprob { background:var(--bad-soft); color:#ff8a8a; border-radius:10px; padding:9px 12px; font-size:13.5px }
  .aprob a { color:#ffb3b3; font-weight:600; margin-left:6px }
  .amini { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
  .amini div { background:var(--surface-2); border-radius:9px; padding:7px 10px; display:flex; flex-direction:column }
  .amini b { font-size:18px; font-variant-numeric:tabular-nums } .amini span { color:var(--dim); font-size:11.5px }
  .afunnel { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
  .afunnel > div { background:var(--surface-2); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; font-size:12.5px }
  .aftop { display:flex; justify-content:space-between; align-items:baseline; gap:8px } .aftop b { font-size:26px; line-height:1; font-variant-numeric:tabular-nums }
  .abar { height:6px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden } .abar i { display:block; height:100%; border-radius:99px; width:0; transition:width .4s var(--ease) }
  .abar .s0 { background:var(--info) } .abar .s1 { background:var(--muted) } .abar .s2 { background:var(--warn) } .abar .s3 { background:var(--ok) }
  @media (max-width:720px) { .afunnel, .amini { grid-template-columns:repeat(2,minmax(0,1fr)) } }
  .afoundbox, .aotherbox { padding:0; overflow:hidden; margin-bottom:16px }
  .alisthead { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line) }
  .alisthead h2 { margin:0; font-size:16px; display:flex; align-items:center; gap:8px }
  .aotherbox .alisthead { border-bottom:0 } .aotherbox .alist:not([hidden]) { border-top:1px solid var(--line) }
  .alistwrap { position:relative }
  .alist { max-height:min(70vh,760px); overflow:auto; overflow-anchor:none }
  .anew { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:2; border:0; border-radius:99px; padding:6px 14px; cursor:pointer;
    background:var(--accent); color:var(--accent-ink); font:700 12.5px var(--sans); box-shadow:0 6px 18px -6px var(--accent-glow) }
  .arow { display:grid; grid-template-columns:40px minmax(0,1fr) auto 160px 72px auto; gap:14px; align-items:center; padding:9px 18px; border-bottom:1px solid rgba(255,255,255,.05); transition:background-color 1.2s ease }
  .arow:not(:has(.achip)) { grid-template-columns:40px minmax(0,1fr) 160px 72px auto }
  .arow.fresh { background:var(--accent-soft); transition:none }
  .ath { width:40px; height:58px; border-radius:7px; overflow:hidden; background:var(--surface-3) } .ath img { width:100%; height:100%; object-fit:cover; display:block }
  .amain { min-width:0; display:flex; flex-direction:column; gap:2px }
  .atitle { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .ameta { color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .achip { background:var(--surface-2); border-radius:99px; padding:3px 10px; font-size:12.5px; color:#c9ced8; white-space:nowrap }
  .apill { display:inline-block; border-radius:99px; padding:3px 10px; font-size:12.5px; font-weight:600; white-space:nowrap; background:rgba(255,255,255,.07); color:var(--muted) }
  .apill.ok { background:var(--ok-soft); color:var(--ok) } .apill.info { background:var(--info-soft); color:var(--info) }
  .apill.work { background:var(--accent-soft); color:var(--accent-hi) }
  .apill.work::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:6px; vertical-align:1px; animation:p 1.2s infinite } .apill.warn { background:var(--warn-soft); color:var(--warn) } .apill.bad { background:var(--bad-soft); color:var(--bad) }
  .aago { color:var(--dim); font-size:12.5px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
  .alinks { display:flex; gap:10px; font-size:12.5px; white-space:nowrap }
  .aempty { padding:22px 18px; text-align:center } .aempty[hidden] { display:none }
  .aother { display:grid; grid-template-columns:180px minmax(0,1fr) 80px; gap:14px; padding:7px 18px; font-size:13px; border-bottom:1px solid rgba(255,255,255,.04) }
  .aother span:nth-child(2) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .aruns summary { cursor:pointer } .aruns table { margin-top:12px }
  @media (max-width:820px) {
    .arow, .arow:not(:has(.achip)) { grid-template-columns:40px minmax(0,1fr) auto; row-gap:4px }
    .arow .ath { grid-row:span 2 }
    .arow .achip { grid-column:2; grid-row:2; justify-self:start }
    .arow .aago { grid-column:2; grid-row:2; justify-self:end }
    .arow .alinks { grid-column:3; grid-row:2; justify-self:end }
    .aother { grid-template-columns:minmax(0,1fr) auto } .aother span:nth-child(2) { grid-column:1 / -1; grid-row:2 }
  }
  .igstage { position:relative; width:100%; aspect-ratio:900/780; background:#0b0c10; border:1px solid var(--line-2); border-radius:12px; overflow:hidden; display:grid; place-items:center }
  .igstage img { width:100%; height:100%; object-fit:contain; display:block; cursor:crosshair; user-select:none }
  .igwait { color:var(--muted); font-size:14px; padding:24px; text-align:center }
  /* the crawl view shows a different browser from the sign-in one, so it takes
     its shape from the frame rather than from the login viewport */
  .igstage.crawl { aspect-ratio:auto; min-height:220px; max-height:72vh }
  .igstage.crawl img { width:100%; height:auto; max-height:72vh; cursor:default }
  .phone .stage { position:absolute; left:0; top:0; width:1080px; height:1920px; transform-origin:0 0; transform:scale(var(--k,.28)); z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none }
  /* appears instantly on an edit; only the hand-off to the exact frame fades */
  .phone .stage.off { opacity:0; transition:opacity .18s var(--ease) }
  /* which of the reel's videos the card is showing, when it is not the original */
  /* Which video is playing, in the free corner: the stage chip has the left one
     and the title runs along the bottom. It sat bottom-left with the top:10px
     above still in force, and a box pinned top AND bottom stretches -- which is
     how a corner chip became a capsule down the whole side of the card. */
  /* stacked under the source chip: both are facts about the video file, and the
     bottom of the picture belongs to the title. */
  .lead .media .b.mute { position:absolute; top:45px; left:auto; right:10px; background:var(--warn-soft); color:var(--warn); border-color:transparent }
  .lead .media .b.src { position:absolute; left:auto; right:10px; top:10px; background:rgba(10,10,12,.78); backdrop-filter:blur(6px) }
  .stage .cap { width:960px; text-align:center; white-space:pre-wrap; overflow-wrap:break-word }
  .stage .cap .ink { display:inline }
  .stage .cap .emo { font-size:1.1em }   /* EMOJI_SCALE in render.py */
  .stage .gap { height:22px; flex:none }
  .stage .pic { position:relative; width:1080px; height:606px; overflow:hidden; background:#101218 }
  /* Full-bleed: the picture is the whole frame and the caption floats on it.
     top + translateY of the SAME percentage puts the caption's own middle
     wherever the slider says, for any number of lines — the browser's version
     of render.py's (H - caption_h) * offset. */
  .stage.full .pic { position:absolute; inset:0; width:1080px; height:1920px }
  .stage.full .cap { position:absolute; left:50%; margin-left:-480px; z-index:2 }
  /* The render dialog's live layer: laid out by render.layout's arithmetic, so
     everything sits where the numbers put it rather than in a flex column. */
  .phone .stage.exact { display:block }
  .stage.exact .pic { position:absolute; width:auto; height:auto }
  .stage.exact .pic img.raw { position:absolute; display:block; max-width:none }
  .stage.exact .cap { position:absolute; width:960px; margin:0 }
  /* the subtitle line, as libass draws it: bold, a 6px black outline under the
     fill (paint-order) and a 3px shadow */
  .stage .sub { position:absolute; width:920px; text-align:center; font-weight:700; line-height:1.15; white-space:pre-wrap; text-wrap:balance;
    -webkit-text-stroke:12px #000; paint-order:stroke fill; text-shadow:3px 3px 0 rgba(0,0,0,.85);
    pointer-events:auto; cursor:grab; touch-action:none; z-index:3 }
  /* the render dialog: two folding sections, each saying what it holds */
  .rsec { margin-top:12px; border:1px solid var(--line); border-radius:var(--rs); background:var(--surface-2) }
  .rsec > summary { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; user-select:none }
  .rsec > summary::-webkit-details-marker { display:none }
  .rsec > summary::before { content:""; width:7px; height:7px; border:solid var(--muted); border-width:0 2px 2px 0; transform:rotate(-45deg); transition:transform var(--ease); flex:none; margin-right:2px }
  .rsec[open] > summary::before { transform:rotate(45deg) }
  .rsec-t { font-weight:600 }
  .rsec-sum { color:var(--muted); font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .rsec-body { padding:2px 14px 14px }
  .rsec .field label output { color:var(--text); margin-left:4px }
  .rsec input[type=range] { margin:10px 0 4px }
  .trim { display:grid; grid-template-columns:repeat(4,1fr) auto; gap:6px }
  .trim input { min-width:0 }
  /* an on/off switch, here for the subtitles in their section's header */
  .switch { position:relative; display:inline-block; width:38px; height:22px; flex:none; cursor:pointer }
  .switch input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:1 }
  .switch span { position:absolute; inset:0; border-radius:99px; background:var(--surface-3); border:1px solid var(--line-2); transition:background var(--ease) }
  .switch span::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform var(--ease) }
  .switch input:checked + span { background:var(--accent); border-color:transparent }
  .switch input:checked + span::after { transform:translateX(16px) }
  .switch input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px }
  .rplaces { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; font-size:13px }
  /* Render stays in reach however far the form scrolls */
  .ractions { position:sticky; bottom:-24px; z-index:4; display:flex; gap:8px; align-items:center; margin:14px 0 -24px; padding:12px 0 22px;
    background:var(--surface); border-top:1px solid var(--line) }
  /* the caption on the live picture is grabbed by its words, not its frame-wide box */
  .stage.exact .cap { pointer-events:none }
  .stage.exact .cap .ink { pointer-events:auto; cursor:grab; touch-action:none }
  .substyle { margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:var(--rs); background:var(--surface-2) }
  .speakers { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
  .speakers .spk { display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 4px; border:1px solid var(--line-2); border-radius:99px; font-size:13px; cursor:pointer }
  .speakers .spk input[type=color] { width:26px; height:26px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer }
  .subline select.who { width:auto; padding:4px 8px; font-size:12.5px; border-width:2px }
  .stage .pic img.bg { width:100%; height:100%; object-fit:cover; display:block; transform:scale(var(--zoom,1)); transform-origin:50% 50% }
  /* the stage is click-through so the real frame underneath can be seen; the
     mark is the one thing on it you are meant to grab. */
  .stage .wm { pointer-events:auto; position:absolute; font-family:"rh-BebasNeue-Regular","Bebas Neue",Impact,sans-serif; font-size:40px; line-height:1; color:#fff; letter-spacing:.02em;
    white-space:nowrap; text-shadow:2px 2px 0 rgba(0,0,0,.85) }
  .stage img.wm { height:48px; width:auto }
  .stage.exact .wm { cursor:grab; touch-action:none; z-index:3; user-select:none }
  /* drag guides; the stage is scaled down by --k, so a line one screen pixel
     wide is 1/k of a stage pixel */
  .stage .guides { position:absolute; inset:0; pointer-events:none; z-index:4 }
  .stage .guides i { position:absolute; display:block; background:rgba(255,255,255,.22) }
  .stage .guides i.v { top:0; bottom:0; width:calc(1px / var(--k, .28)); transform:translateX(-50%) }
  .stage .guides i.h { left:0; right:0; height:calc(1px / var(--k, .28)); transform:translateY(-50%) }
  .stage .guides i.mid { background:rgba(255,255,255,.5) }
  .stage .guides i.hit { background:var(--accent); box-shadow:0 0 calc(6px / var(--k, .28)) var(--accent) }
  .stage .guides i.v.hit { width:calc(2px / var(--k, .28)) } .stage .guides i.h.hit { height:calc(2px / var(--k, .28)) }
  .phone::before { content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:36%; height:16px; border-radius:999px; background:var(--surface-2); z-index:1 }
  .prev { display:block; width:100%; aspect-ratio:9/16; height:auto; background:#000; object-fit:contain }
  .prev:not([src]) { opacity:0 }  /* no broken-image glyph on the screen before the first preview arrives */
  @media (max-width:960px) { .phone-col { order:-1 } .phone { max-width:240px } }
  .card canvas { max-height:260px }

  /* ---------------------------------------------------------------- settings */
  /* five panels behind a sub-nav: a list with a coral bar at desktop, a row of chips on a phone */
  .settings { display:grid; grid-template-columns:190px minmax(0,1fr); gap:26px; align-items:start; animation:fade 200ms ease-out }
  .subnav { display:flex; flex-direction:column; gap:2px; position:sticky; top:72px }
  .subnav a { position:relative; display:block; padding:8px 14px; color:var(--muted); font-weight:500; font-size:14px; border-radius:var(--rx); transition:color var(--ease), background var(--ease) }
  .subnav a:hover { color:var(--text); background:rgba(255,255,255,.04); text-decoration:none }
  .subnav a.on { color:var(--text) }
  .subnav a.on::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px var(--accent-glow) }
  @media (max-width:959px) {
    .settings { grid-template-columns:1fr; gap:14px }
    .subnav { flex-direction:row; gap:7px; position:static; overflow-x:auto; scrollbar-width:none; margin:0 -22px; padding:0 22px 4px } .subnav::-webkit-scrollbar { height:0 }
    .subnav a { flex:none; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); font-size:13px }
    .subnav a:hover { border-color:var(--line-2); color:var(--accent); background:var(--surface-2) }
    .subnav a.on { background:var(--accent); color:var(--accent-ink); border-color:transparent } .subnav a.on::before { display:none }
  }
  @media (max-width:820px) { .subnav { margin:0 -14px; padding:0 14px 4px } }
  .panel > * + * { margin-top:16px }
  .grp + .grp { margin-top:26px }
  .grp h3, .grp .h3 { font:15px/1 var(--display); font-weight:400; letter-spacing:.1em; color:var(--muted); margin:0 0 12px; text-transform:uppercase }
  .grp.danger h3 { color:var(--bad) }
  .pair { display:grid; grid-template-columns:1fr 1fr; gap:12px }
  .note { color:var(--dim); font-size:12.5px; margin-top:5px; line-height:1.4 }
  /* range: dark track, coral thumb */
  .rng { display:flex; align-items:center; gap:14px }
  .rng output { min-width:38px; text-align:right; font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--text) }
  input[type=range] { -webkit-appearance:none; appearance:none; flex:1; min-width:0; width:100%; height:4px; margin:12px 0; padding:0; border:0; border-radius:2px; background:var(--surface-3); cursor:pointer }
  input[type=range]:hover, input[type=range]:focus { border:0; box-shadow:none; background:var(--surface-3) }
  input[type=range]:focus-visible { outline:2px solid var(--accent); outline-offset:6px }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-2), 0 0 10px var(--accent-glow); transition:transform var(--ease) }
  input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-2), 0 0 10px var(--accent-glow) }
  input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.12) }
  /* segmented control: two or three buttons in one pill */
  .seg { display:inline-flex; gap:2px; padding:3px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--rs) }
  .seg button { border:0; background:transparent; color:var(--muted); padding:6px 16px; border-radius:9px; cursor:pointer; font-size:13.5px; font-weight:500; transition:background var(--ease), color var(--ease) }
  .seg button:hover { color:var(--text) }
  .seg button.on { background:var(--accent); color:var(--accent-ink); font-weight:600 }
  /* corner picker: a 9:16 outline with a square in each corner */
  /* the picture, as a 16:9 slab inside the 9:16 frame; the eight spots are on it */
  .corners { position:relative; width:78px; aspect-ratio:9/16; flex:none; padding:6px; display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr; place-items:center; background:var(--surface-2); border:1px solid var(--line-2); border-radius:9px }
  .corners::before { content:""; position:absolute; left:4px; right:4px; top:50%; height:38px; transform:translateY(-50%); border-radius:3px; background:linear-gradient(160deg,#2a2e3c,#171921); border:1px solid var(--line) }
  .corners button { width:16px; height:16px; padding:0; border-radius:4px; border:1px solid var(--line-2); background:var(--surface-3); cursor:pointer; transition:background var(--ease), border-color var(--ease), transform var(--ease) }
  .corners button:hover { border-color:rgba(255,255,255,.3); transform:scale(1.1) }
  .corners button.on { background:var(--accent); border-color:transparent; box-shadow:0 0 8px var(--accent-glow) }
  .corners button { position:relative; z-index:1 }
  /* colour: a swatch beside its hex */
  .swatch { display:flex; align-items:center; gap:8px }
  .swatch input[type=color] { flex:none; width:40px; height:40px; padding:3px; border:1px solid var(--line-2); border-radius:11px; background:var(--surface-2); cursor:pointer }
  .swatch input[type=color]::-webkit-color-swatch-wrapper { padding:0 } .swatch input[type=color]::-webkit-color-swatch { border:0; border-radius:8px } .swatch input[type=color]::-moz-color-swatch { border:0; border-radius:8px }
  .swatch input[type=text] { flex:1; min-width:0; font-family:var(--mono); font-size:13px; padding:9px 10px }
  /* watermark image box */
  .wm { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px dashed var(--line-2); border-radius:var(--rs); background:rgba(255,255,255,.015) }
  .wm img { height:52px; max-width:200px; object-fit:contain; background:repeating-conic-gradient(#2a2d36 0 25%,#1b1e26 0 50%) 0 0/14px 14px; border:1px solid var(--line); border-radius:8px; padding:4px }
  /* the Look form: sample caption sits above the phone, buttons under it */
  .look .phone-col .field { width:100%; max-width:310px; margin:0 }
  /* The settings are a long column and the preview is the point of them, so it
     comes along rather than scrolling away off the top. 72px clears the sticky
     header, the same offset the side nav uses; 14px put it underneath. The
     height cap is the other half: a sticky box taller than the space it has
     cannot be scrolled to the bottom of, so it keeps its own scrollbar for the
     short windows where that happens. */
  .look .phone-col { position:sticky; top:72px; align-self:start;
    max-height:calc(100vh - 88px); overflow-y:auto; overflow-x:hidden; scrollbar-width:thin }
  /* and in a short window the phone itself gives way first, so the scrollbar
     is a last resort rather than the normal state */
  @media (max-height:860px) { .look .phone { max-width:260px } }
  /* The same in the render dialog, whose own box is what scrolls: the phone
     stays in view while the caption, trim and subtitle lines scroll past it.
     Two columns only; stacked, the phone is above the form anyway. */
  @media (min-width:961px) {
    .box .phone-col { position:sticky; top:0; align-self:start;
      max-height:calc(92vh - 52px); overflow-y:auto; overflow-x:hidden; scrollbar-width:thin }
  }
  @media (min-width:961px) and (max-height:860px) { .box .phone { max-width:260px } }
  @media (max-height:740px) { .look .phone { max-width:210px } }
  @media (max-width:960px) { .look .phone-col { position:static; max-height:none; overflow:visible } }
  @media (max-width:960px) { .look .phone-col .field { max-width:240px } }
  /* service list with status pills */
  .svc > div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line) }
  .svc > div:last-child { border-bottom:0; padding-bottom:0 } .svc > div:first-child { padding-top:0 }
  .svc b { display:block; font-weight:600; font-size:14.5px } .svc .dim { display:block; margin-top:1px }
  .svc .b { flex:none }
  /* radio cards: one per provider */
  .rcards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px } @media (max-width:640px) { .rcards { grid-template-columns:1fr } }
  .rcard { position:relative; display:block; padding:12px 14px; border:1px solid var(--line); border-radius:var(--rs); background:var(--surface-2); cursor:pointer; transition:border-color var(--ease), background var(--ease), box-shadow var(--ease) }
  .rcard:hover { border-color:var(--line-2) }
  .rcard.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 8px 18px -12px var(--accent-glow); background:linear-gradient(180deg, rgba(255,77,109,.09), rgba(255,77,109,.03)) }
  .rcard:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px }
  .rcard b { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px }
  .rcard b::before { content:""; width:12px; height:12px; border-radius:50%; border:1.5px solid var(--dim); flex:none; transition:border-color var(--ease), box-shadow var(--ease) }
  .rcard.on b::before { border-color:var(--accent); box-shadow:inset 0 0 0 3px var(--accent) }
  .rcard .dim { display:block; margin-top:3px; line-height:1.4 }
  .sr { position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
  /* on/off switch */
  .sw { display:inline-flex; align-items:center; gap:11px; cursor:pointer }
  .sw input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; margin:0 }
  .sw i { position:relative; flex:none; width:38px; height:22px; border-radius:999px; background:var(--surface-3); border:1px solid var(--line-2); transition:background var(--ease), border-color var(--ease) }
  .sw i::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform var(--ease), background var(--ease) }
  .sw input:checked + i { background:var(--accent); border-color:transparent } .sw input:checked + i::after { transform:translateX(16px); background:var(--accent-ink) }
  .sw input:focus-visible + i { outline:2px solid var(--accent); outline-offset:2px }
  /* the Advanced fold inside a card */
  details.adv summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:500; font-size:14px }
  details.adv summary::-webkit-details-marker { display:none }
  details.adv summary::before { content:""; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(-45deg); margin-left:2px; transition:transform var(--ease) }
  details.adv[open] summary::before { transform:rotate(45deg) }
  details.adv > div { margin-top:14px; padding-top:14px; border-top:1px solid var(--line) }
  .addrow { display:grid; grid-template-columns:1fr 1fr 1fr 140px auto; gap:10px; align-items:end } @media (max-width:700px) { .addrow { grid-template-columns:1fr 1fr } }
  .addrow .field { margin:0 }
  pre { background:#07080b; color:var(--muted); border:1px solid var(--line); padding:12px 14px; border-radius:10px; overflow:auto; font:12.5px/1.6 var(--mono); margin:10px 0 0 }
  .bulklist { max-height:340px; overflow:auto; border:1px solid var(--line); border-radius:var(--rs); background:var(--surface-2) }
  .bulkrow { display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:13.5px; border-bottom:1px solid var(--line) }
  .bulkrow:last-child { border-bottom:none }
  .bulkrow .sc { font-family:var(--mono); font-size:12.5px; color:var(--muted) }

  @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important } }

  /* ---------------------------------------------------------------- timeline */
  /* Cut, split and rejoin your own recording: docked along the foot of the
     Caption & render dialog, which widens to give it room. The phone above
     shrinks to fit what is left, so the form, the picture and the strip are
     all on screen together. */
  .box.has-tl { width:min(1180px,96vw); padding-bottom:0 }
  .box.has-tl .ractions { bottom:var(--tlh,214px); margin-bottom:0; padding-bottom:12px }
  @media (min-width:961px) {
    .box.has-tl .phone-col { max-height:calc(92vh - 52px - var(--tlh,214px)) }
    .box.has-tl .phone { max-width:min(310px, calc((92vh - 104px - var(--tlh,214px)) * 0.5625)) }
  }
  @media (min-width:961px) {
    .box.has-tl.tl-short { padding-bottom:24px }
    .box.has-tl.tl-short .ractions { bottom:-24px; margin-bottom:-24px; padding-bottom:22px }
    .box.has-tl.tl-short .rform { grid-column:1; grid-row:1 }
    .box.has-tl.tl-short .phone-col { grid-column:2; grid-row:1 / span 2; max-height:calc(92vh - 52px) }
    .box.has-tl.tl-short .phone { max-width:260px }
    .rdialog > .tl { position:static; grid-column:1; grid-row:2; min-width:0; margin:4px 0 0; padding:14px 0 0; background:none;
      border-top:1px solid var(--line); box-shadow:none; z-index:auto }
  }
  .stage.exact .pic video.raw { position:absolute; display:block; max-width:none; pointer-events:none }
  .tl { --tl-keep:#ffd60a; position:sticky; bottom:0; z-index:6; margin:16px -26px 0; padding:10px 26px 12px;
    background:var(--surface); border-top:1px solid var(--line-2); box-shadow:0 -16px 30px -20px rgba(0,0,0,.85); outline:none; user-select:none; -webkit-user-select:none }
  .tl:focus-visible { box-shadow:inset 0 2px 0 var(--accent), 0 -16px 30px -20px rgba(0,0,0,.85) }
  .tl[hidden] { display:none }
  .tl-top { display:flex; align-items:center; gap:10px; min-height:26px; margin-bottom:6px; flex-wrap:wrap; font-size:12.5px }
  .tl-top[hidden] { display:none }
  .tl-status { display:inline-flex; align-items:center; gap:8px; color:var(--muted) }
  .tl-spin { width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.2); border-top-color:var(--text); animation:spin .8s linear infinite; flex:none }
  .tl-sugg { display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 4px 0 11px; border-radius:999px; background:var(--info-soft); border:1px solid rgba(88,166,255,.3); color:#8cc2ff }
  .tl-sugg button { height:20px; padding:0 10px; border-radius:999px; border:0; background:var(--info); color:#0b0c10; font-size:12px; font-weight:700; cursor:pointer }
  .tl-sugg button.x { background:none; color:#8cc2ff; padding:0 6px; font-size:15px; font-weight:400 }
  .tl-warn { display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px; background:var(--warn-soft); border:1px solid rgba(255,180,84,.3); color:var(--warn); font-weight:500 }
  .tl-view { position:relative; cursor:pointer; touch-action:none }
  .tl-view canvas { position:absolute; inset:0 }
  .tl-over { position:absolute; inset:0 }
  .tl-cut { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:3px; overflow:hidden;
    background:repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 5px, transparent 5px 10px), rgba(11,12,16,.7) }
  .tl-cut span { font:600 10px/1 var(--mono); color:#c9ccd4; white-space:nowrap }
  .tl-cut.sel { box-shadow:inset 0 0 0 2px #fff }
  .tl-restore { width:22px; height:22px; padding:0; border-radius:50%; border:1px solid rgba(46,211,122,.5); background:rgba(20,22,28,.9); color:var(--ok); font-size:13px; line-height:1; cursor:pointer }
  .tl-restore:hover { background:var(--ok-soft) }
  .tl-dim { position:absolute; background:rgba(20,22,28,.74); pointer-events:none }
  .tl-run.open-l { border-left:0 } .tl-run.open-r { border-right:0 }
  .tl-run { position:absolute; border-top:2px solid var(--tl-keep); border-bottom:2px solid var(--tl-keep); pointer-events:none; box-sizing:border-box }
  .tl-end { position:absolute; width:16px; cursor:ew-resize; z-index:3 }
  .tl-end i { position:absolute; top:4px; bottom:4px; width:12px; background:var(--tl-keep); display:flex; align-items:center; justify-content:center }
  .tl-end.l i { right:2px; border-radius:5px 0 0 5px } .tl-end.r i { left:2px; border-radius:0 5px 5px 0 }
  .tl-end i::after { content:""; width:5px; height:5px; border:solid #14161c; border-width:0 0 2px 2px }
  .tl-end.l i::after { transform:translateX(1px) rotate(45deg) } .tl-end.r i::after { transform:translateX(-1px) rotate(-135deg) }
  .tl-end:hover i, .tl-end.on i { box-shadow:0 0 0 2px #fff, 0 0 14px rgba(255,214,10,.7) }
  .tl-split { position:absolute; width:12px; margin-left:-6px; cursor:pointer; z-index:2 }
  .tl-split::before { content:""; position:absolute; left:5.5px; top:0; bottom:0; width:1px; background:rgba(0,0,0,.7) }
  .tl-split i { position:absolute; left:1.5px; top:calc(50% - 4.5px); width:9px; height:9px; background:var(--tl-keep); transform:rotate(45deg); box-shadow:0 0 0 1.5px #14161c }
  .tl-selbox { position:absolute; border-radius:4px; box-shadow:inset 0 0 0 2px #fff; pointer-events:none }
  .tl-chip { position:absolute; transform:translateX(-50%); height:16px; padding:0 7px; border-radius:999px; background:#fff; color:#14161c; font-size:10px; font-weight:700; line-height:16px; white-space:nowrap; pointer-events:none; z-index:4 }
  .tl-guide { position:absolute; width:0; border-left:1px dashed var(--tl-keep); pointer-events:none; z-index:4 }
  .tl-bubble { position:absolute; top:0; transform:translateX(-50%); height:16px; padding:0 7px; border-radius:5px; background:var(--tl-keep); color:#14161c; font:700 10.5px/16px var(--mono); white-space:nowrap; pointer-events:none; z-index:5 }
  .tl-msg { position:absolute; display:flex; align-items:center; gap:6px; padding-left:8px; font-size:11px; color:var(--dim); border:1px dashed rgba(255,255,255,.1); border-radius:3px; box-sizing:border-box; white-space:nowrap; overflow:hidden; pointer-events:none }
  .tl-link { pointer-events:auto; background:none; border:0; padding:0; color:var(--accent-hi); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px }
  .tl-shim { position:absolute; border-radius:3px; pointer-events:none; background:linear-gradient(90deg,#1f222b 0,#2a2e3a 50%,#1f222b 100%); background-size:400px 100%; animation:tlshim 1.4s linear infinite }
  @keyframes tlshim { 0% { background-position:-200px 0 } 100% { background-position:400px 0 } }
  .tl-head { position:absolute; left:0; top:0; bottom:0; width:0; pointer-events:none; z-index:5 }
  .tl-head::before { content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.5) }
  .tl-head i { position:absolute; left:-6px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px #fff }
  .tl-menu { position:absolute; bottom:calc(100% - 14px); width:228px; padding:4px; background:var(--surface-3); border:1px solid var(--line-2); border-radius:var(--rs); box-shadow:0 18px 40px rgba(0,0,0,.6); z-index:10 }
  .tl-menu button { display:block; width:100%; height:34px; padding:0 12px; background:none; border:0; border-radius:var(--rx); color:var(--text); font-size:13.5px; text-align:left; cursor:pointer }
  .tl-menu button:hover { background:rgba(255,255,255,.07) }
  .tl-bar { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap }
  .tl-bar .btn kbd { font:11px var(--mono); color:var(--dim) }
  .tl-bar .btn.on { color:var(--tl-keep); border-color:rgba(255,214,10,.4) }
  .tl-bar .btn.ok { color:var(--ok); border-color:rgba(46,211,122,.45) }
  .tl-play { width:34px; padding:0; border-radius:50%; background:var(--text); color:#14161c; border-color:transparent; font-size:11px }
  .tl-play:hover { background:#fff }
  .tl-clock { font:600 13px var(--mono); white-space:nowrap; margin-left:4px }
  .tl-clock span { color:var(--muted); font-weight:400 }
  .tl-clock b.cut { color:var(--muted); font-weight:500; font-family:var(--sans); font-size:12.5px }
  .tl-clock.warn b, .tl-clock.warn span { color:var(--warn) }
  .tl-parts { color:var(--dim); font-size:12.5px }
  .tl-sp { flex:1 }
  .tl-sep { width:1px; height:20px; background:var(--line-2); margin:0 2px }
  .tl-fold { display:flex; align-items:center; gap:10px; min-height:32px; font-size:13px; color:var(--muted) }
  .tl-fold b { color:var(--text); font-weight:600 }
  .tl-veil { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; pointer-events:none;
    background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px), rgba(8,9,12,.62) }
  .tl-veil span { padding:6px 12px; border-radius:999px; background:rgba(20,22,28,.92); border:1px solid var(--line-2); font-size:12px; font-weight:600 }
  .tl-view.shake { animation:tlshake .12s linear 2 }
  @keyframes tlshake { 25% { transform:translateX(-3px) } 75% { transform:translateX(3px) } }
  .subs .subline.cut { opacity:.4 } .subs .subline.cut b::after { content:" cut"; color:var(--bad); font-weight:600 }
  .subs .subline.split b::after { content:" ✂"; color:var(--warn) }

  /* ---------------------------------------------------------------- the reel's shape */
  .ratios { display:flex; gap:7px; flex-wrap:wrap }
  .ratios .chip { padding:5px 12px; font-variant-numeric:tabular-nums }
  .rsec .field label .pct { width:62px; display:inline-block; margin:0 2px 0 6px; padding:3px 6px; font-size:13px }
  .cropview { position:relative; width:min(100%, calc(320px * var(--ar, 1.78))); overflow:hidden; border-radius:var(--rx); background:#000; user-select:none; touch-action:none }
  .cropwrap { position:absolute; inset:0; overflow:hidden }
  .cropwrap img { position:absolute; display:block; max-width:none; pointer-events:none }
  .cropsel { position:absolute; box-sizing:border-box; border:2px solid #fff; cursor:move; box-shadow:0 0 0 9999px rgba(5,6,10,.6) }
  .cropsel::before, .cropsel::after { content:""; position:absolute; pointer-events:none; border:solid rgba(255,255,255,.35); }
  .cropsel::before { left:33.33%; right:33.33%; top:0; bottom:0; border-width:0 1px }
  .cropsel::after { top:33.33%; bottom:33.33%; left:0; right:0; border-width:1px 0 }
  .cropsel i { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; background:#fff; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.5); z-index:1 }
  .cropsel i[data-h=nw] { left:0; top:0; cursor:nwse-resize } .cropsel i[data-h=ne] { left:100%; top:0; cursor:nesw-resize }
  .cropsel i[data-h=se] { left:100%; top:100%; cursor:nwse-resize } .cropsel i[data-h=sw] { left:0; top:100%; cursor:nesw-resize }
  .cropsel i[data-h=n] { left:50%; top:0; cursor:ns-resize } .cropsel i[data-h=s] { left:50%; top:100%; cursor:ns-resize }
  .cropsel i[data-h=e] { left:100%; top:50%; cursor:ew-resize } .cropsel i[data-h=w] { left:0; top:50%; cursor:ew-resize }
  .cropsel:not(.free) i[data-h=n], .cropsel:not(.free) i[data-h=s], .cropsel:not(.free) i[data-h=e], .cropsel:not(.free) i[data-h=w] { display:none }
  .stage .bgblur { position:absolute; inset:0; overflow:hidden; z-index:-1 }
  .stage .bgblur img { position:absolute; max-width:none; filter:blur(40px) brightness(.94) }
  /* the video itself is grabbable on the live picture, and nothing moved past the frame shows */
  .stage.exact .pic { pointer-events:auto; cursor:grab; touch-action:none }
  .stage .wmbox { position:absolute; pointer-events:none }
  /* outside a frame shorter than the screen: dimmed, its edges drawn; a clip
     moved past them shows faintly there, as the render crops it */
  .phone .framemask { position:absolute; inset:0; z-index:3; pointer-events:none }
  .phone .framemask i { position:absolute; left:0; right:0; display:block;
    background:repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px), rgba(5,6,10,.78) }
  .phone .framemask i.above { top:0 } .phone .framemask i.below { bottom:0 }
  .phone .framemask b { position:absolute; left:0; right:0; display:block; border-top:1px dashed rgba(255,255,255,.35); border-bottom:1px dashed rgba(255,255,255,.35) }