/* Palestine: primary display & title font */
  @font-face { font-family:"Palestine"; src:url("fonts/Palestine-Regular.ttf") format("truetype"); font-weight:normal; font-style:normal; font-display:swap; }

  /* Tajarib: one of the caption fonts drawn into the video */
  @font-face { font-family:"Tajarib"; src:url("fonts/Tajarib-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
  @font-face { font-family:"Tajarib"; src:url("fonts/Tajarib-Medium.otf") format("opentype"); font-weight:500 600; font-display:swap; }
  @font-face { font-family:"Tajarib"; src:url("fonts/Tajarib-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }
  @font-face { font-family:"Tajarib"; src:url("fonts/Tajarib-Black.otf") format("opentype"); font-weight:800 900; font-display:swap; }

  /* SuperBoard paper theme: warm paper, ink black, one orange marker (+ a yellow highlighter for emphasis) */
  :root {
    color-scheme:light;
    --bg:#F7F3EA; --card:#FFFFFF; --card2:#FBF9F4; --card3:#F1ECE1; --field:#FFFFFF; --ink:#1C1B1F; --muted:#6B675F; --line:#E3DCCD; --line2:#CFC6B4;
    --a1:#FF5A0A; --a1h:#E54A00; --a1d:#B83B00; --a1soft:rgba(255,90,10,.07); --a1ring:rgba(255,90,10,.2);
    --hl:#FFE14D;
    --ok:#16A34A; --warn:#D97706; --r:16px;
    --violet:#7C3AED; --cyan:#0891B2; --amber:#D97706; --emerald:#059669;
    --shadow:0 1px 0 var(--line), 0 18px 40px -26px rgba(60,45,20,.35);
    --glow:3px 3px 0 var(--ink);
    --display:"Baloo Bhaijaan 2","Cairo","IBM Plex Sans Arabic",sans-serif;
    --body:"Baloo Bhaijaan 2","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; font-family:var(--body); background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; }
  ::selection { background:var(--a1); color:#fff; }
  h1, h2 { font-family:var(--display); font-weight:800; letter-spacing:normal; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
  a { color:inherit; }
  .hidden { display:none !important; }

  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:11px 20px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; background:var(--card2); color:var(--ink); transition:.2s; }
  .btn:hover { border-color:var(--a1); color:#fff; transform:translateY(-1px); }
  .btn.primary { background:var(--a1); border-color:var(--a1); color:#fff; box-shadow:var(--glow); }
  .btn.primary:hover { background:var(--a1h); border-color:var(--a1h); }
  .btn.green { background:var(--ok); border-color:var(--ok); color:#fff; }
  .btn.small { padding:7px 14px; font-size:14px; }
  .btn.big { padding:15px 30px; font-size:18px; border-radius:999px; }
  .btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
  .btn.primary:disabled:hover { background:var(--a1); }

  /* studio */
  #studio { padding:10px 20px 50px; scroll-margin-top:16px; }
  .stepper { display:flex; gap:0; margin-bottom:14px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:8px; }
  .stepper button { flex:1; min-width:0; display:flex; align-items:center; gap:12px; background:none; border:1px solid transparent; border-radius:14px; padding:10px 14px; font:inherit; font-weight:800; color:var(--muted); cursor:pointer; transition:.2s; text-align:start; position:relative; }
  .stepper button + button::before { content:''; position:absolute; inset-inline-end:100%; top:50%; width:14px; height:2px; margin-inline-end:-7px; background:var(--line2); transform:translateY(-50%); }
  .stepper button i { font-style:normal; flex:none; width:34px; height:34px; border-radius:50%; background:var(--card3); border:1px solid var(--line2); display:grid; place-items:center; font-size:15px; transition:.2s; }
  .stepper button span { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
  .stepper button small { font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* every step has its own color; finished steps turn green */
  .stepper button { --sc:var(--a1); } .stepper button:nth-child(1) { --sc:var(--cyan); } .stepper button:nth-child(2) { --sc:var(--violet); }
  .stepper button.done { --sc:var(--emerald); }
  .stepper button.on { color:var(--ink); background:color-mix(in srgb, var(--sc) 10%, transparent); border-color:color-mix(in srgb, var(--sc) 45%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--sc) 22%, transparent); }
  .stepper button.on small { color:color-mix(in srgb, var(--sc) 70%, #fff); }
  .stepper button.on i, .stepper button.done i { background:var(--sc); border-color:var(--sc); color:#fff; box-shadow:0 6px 18px -4px color-mix(in srgb, var(--sc) 70%, transparent); }
  .stepper button.done { color:var(--ink); }
  .stepper button.done i { font-size:0; } .stepper button.done i::after { content:'✓'; font-size:16px; }
  .stepper button:disabled { cursor:not-allowed; opacity:.5; }
  @media (max-width:700px){ .stepper { padding:6px; } .stepper button { padding:8px; gap:8px; justify-content:center; } .stepper button span { display:none; } .stepper button.on span { display:flex; } .stepper button small { display:none; } .stepper button i { width:30px; height:30px; } .panel { padding:16px; } }
  .panel { background:linear-gradient(180deg,var(--card2),var(--card) 220px); border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:var(--shadow); }
  .panel h2 { margin:0 0 4px; font-size:22px; } .panel .sub { color:var(--muted); margin:0 0 18px; }

  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:800px){ .grid2 { grid-template-columns:1fr; } }
  .drop { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; border:2px dashed var(--line2); border-radius:16px; padding:26px 16px; cursor:pointer; background:var(--card2); min-height:150px; transition:.2s; }
  #audioDrop { --c:var(--violet); } #imgDrop { --c:var(--cyan); }
  .drop:hover, .drop.over { border-color:var(--c, var(--a1)); background:color-mix(in srgb, var(--c, var(--a1)) 8%, transparent); }
  .drop .ic { font-size:34px; } .drop b { font-size:17px; } .drop small { color:var(--muted); }
  .drop.has { border-style:solid; border-color:var(--ok); background:rgba(16,185,129,.08); }
  .exp-keep { text-align:center; font-weight:700; margin-top:8px; }
  .drop.busy { border-style:solid; border-color:var(--c, var(--a1)); opacity:.75; pointer-events:none; }
  input[type=file] { display:none; }
  audio { width:100%; margin-top:10px; }
  /* Small remove buttons: the voice-over, every image, the whole script */
  .audio-row { display:flex; align-items:center; gap:8px; margin-top:10px; }
  .audio-row audio { flex:1; min-width:0; margin:0; }
  .btn.small.del-btn { flex:none; padding:4px 10px; font-size:13px; min-height:34px; color:#b42318; }
  .del-row { display:flex; justify-content:flex-end; margin-top:8px; }
  .del-row:has(.hidden) { display:none; }
  .script-card .head .del-btn { margin-inline-start:auto; }
  .thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; margin-top:12px; }
  .th { position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#fff; }
  .th img { width:100%; height:100%; object-fit:contain; }
  .th b { position:absolute; top:4px; right:4px; background:var(--a1); color:#fff; border-radius:6px; font-size:11px; padding:0 6px; }
  .th button { position:absolute; top:4px; left:4px; border:none; background:#000c; color:#fff; border-radius:50%; width:22px; height:22px; cursor:pointer; }
  .th { cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
  .th.dragging { cursor:grabbing; opacity:.55; outline:2px dashed var(--a1); outline-offset:2px; }
  .chips { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px; }
  .chip { border:1px solid var(--line); background:var(--card2); color:var(--ink); border-radius:12px; padding:8px 14px; font:inherit; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; transition:.2s; }
  .chip:hover { border-color:var(--line2); }
  .chip.on { border-color:var(--a1); background:var(--a1); color:#fff; box-shadow:0 4px 15px rgba(255,90,10,.3); }
  .chip .shape { display:inline-block; border:2px solid currentColor; border-radius:3px; }
  .label { font-weight:700; margin:18px 0 6px; display:block; }
  .note { color:var(--muted); font-size:14px; }
  .status { margin-top:12px; font-weight:600; }
  .bar { height:10px; border-radius:8px; background:var(--card3); overflow:hidden; margin-top:10px; }
  .bar > div { height:100%; width:0; background:linear-gradient(90deg,var(--a1d),var(--a1),#FF9A5C); transition:width .2s; }

  /* editor */
  .editor { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; }
  @media (max-width:980px){ .editor { grid-template-columns:1fr; } }
  .stage-box { background:var(--field); border:1px solid var(--line); border-radius:16px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; }
  .stage-view { position:relative; display:flex; justify-content:center; width:100%; }
  #stage { max-width:100%; max-height:58vh; width:auto; height:auto; background:#fff; border-radius:8px; display:block; }
  /* video player: exactly the picture's size and shape; the bar floats over its bottom (LTR like every player) and
     fades away while it plays, so the caption is seen. It comes back on hover, on a tap, or when paused. */
  .vp { position:relative; max-width:100%; line-height:0; border-radius:8px; overflow:hidden; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  .vp #stage { border-radius:0; }
  .vp-bar { position:absolute; inset-inline:0; bottom:0; direction:ltr; display:flex; flex-direction:column; gap:2px; padding:26px 6px 4px; line-height:1; color:#fff;
    background:linear-gradient(transparent, rgba(0,0,0,.6)); opacity:0; transition:opacity .25s; }
  .vp:hover .vp-bar, .vp.paused .vp-bar, .vp.show .vp-bar, .vp:focus-within .vp-bar { opacity:1; }
  /* a tall (9:16) picture is narrow: the volume slider goes, mute stays */
  .vp.narrow .vp-vol { display:none; }
  .vp.narrow .vp-btn { width:28px; }
  .vp-row { display:flex; align-items:center; gap:4px; }
  .vp-btn { border:none; background:none; color:#fff; font-size:17px; width:32px; height:32px; border-radius:6px; cursor:pointer; flex:none; padding:0; }
  .vp-btn:hover { background:rgba(255,255,255,.18); }
  .vp-t { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; margin-inline-start:auto; padding:0 4px; }
  .vp-seek, .vp-vol { accent-color:var(--a1); cursor:pointer; height:4px; margin:0; }
  .vp-seek { width:100%; height:14px; }
  .vp-vol { width:64px; flex:none; }
  /* full screen: the picture grows to fill the screen in its own shape (black only where the shapes differ) */
  .vp:fullscreen { max-width:none; width:100vw; height:100vh; border-radius:0; background:#000; }
  .vp:fullscreen #stage { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; border:none; box-shadow:none; background:#000; }
  .vp.full { position:fixed; inset:0; z-index:1000; max-width:none; border-radius:0; background:#000; }
  .vp.full #stage { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; border:none; background:#000; }
  .vp:fullscreen .vp-bar { padding:40px 16px 10px; }
  .vp:fullscreen .vp-vol, .vp.full .vp-vol { display:block; }
  .vp:fullscreen .vp-btn { width:40px; height:40px; font-size:20px; }
  .vp:fullscreen .vp-t { font-size:15px; }
  .bigplay { position:absolute; inset:0; margin:auto; width:76px; height:76px; border-radius:50%; border:none; background:var(--a1); color:#fff; font-size:30px; cursor:pointer; box-shadow:var(--glow); }
  .transport { display:flex; align-items:center; gap:10px; width:100%; color:var(--muted); flex-wrap:wrap; }
  .transport .t { direction:ltr; font-variant-numeric:tabular-nums; font-weight:700; min-width:100px; color:var(--ink); }
  .transport .btn { background:var(--card2); color:var(--ink); padding:8px 14px; }
  .transport .btn.play { width:46px; height:46px; border-radius:50%; padding:0; font-size:18px; background:var(--a1); border-color:var(--a1); color:#fff; }
  .side { border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; max-height:640px; background:var(--card); }
  .tabs { display:flex; background:var(--card2); border-bottom:1px solid var(--line); }
  .tabs button { flex:1; border:none; background:none; padding:12px 6px; font:inherit; font-weight:700; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; }
  .tabs button.on { color:var(--a1); border-bottom-color:var(--a1); background:var(--card); }
  .tabbody { padding:12px; overflow:auto; flex:1; }
  .srow { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; cursor:pointer; background:var(--card2); }
  .srow.sel { border-color:var(--a1); background:var(--a1soft); }
  .srow img { width:56px; height:42px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:6px; }
  .srow { flex-wrap:wrap; } .srow .meta { flex:1; font-size:13px; min-width:0; white-space:nowrap; color:var(--muted); } .srow .meta b { display:block; font-size:14px; color:var(--ink); }
  .srow .ctrls { display:flex; gap:6px; align-items:center; width:100%; justify-content:flex-end; }
  .srow input { width:62px; padding:3px 5px; border:1px solid var(--line); border-radius:6px; font:inherit; direction:ltr; background:var(--field); color:var(--ink); }
  .srow button, .cap button { border:1px solid var(--line); background:var(--card3); color:var(--ink); border-radius:6px; padding:3px 7px; cursor:pointer; }
  .srow button:hover, .cap button:hover { border-color:var(--a1); }
  .field { margin-bottom:14px; } .field label { display:block; font-weight:700; margin-bottom:4px; font-size:14px; }
  select, input[type=number], input[type=text], .field input[type=range] { width:100%; padding:8px; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--field); color:var(--ink); }
  select:focus, input:focus, textarea:focus { outline:none; border-color:var(--a1); box-shadow:0 0 0 3px var(--a1ring); }
  input[type=range], input[type=checkbox] { accent-color:var(--a1); }
  .field input[type=range] { padding:0; background:none; border:none; }
  .hand-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
  .hand-opt { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px; border:2px solid var(--line); border-radius:12px; background:#fff; color:#1f1f1f; font:inherit; font-size:12px; font-weight:700; line-height:1.25; cursor:pointer; transition:.15s; }
  .hand-opt img { display:block; width:100%; aspect-ratio:1; object-fit:contain; }
  .hand-opt:hover { border-color:var(--line2); }
  .hand-opt.on { border-color:var(--a1); box-shadow:0 0 0 2px color-mix(in srgb, var(--a1) 28%, transparent); }
  .hand-opt:focus-visible { outline:2px solid var(--a1); outline-offset:2px; }
  .cap { display:flex; gap:6px; align-items:center; padding:4px 0; border-bottom:1px solid var(--line); }
  .cap .time { width:58px; direction:ltr; padding:4px; font-size:12px; }
  .cap input.text { flex:1; min-width:0; padding:4px 6px; }

  /* timeline */
  .nav-row { display:flex; justify-content:space-between; gap:10px; margin-top:18px; flex-wrap:wrap; }
  .savebar { display:flex; align-items:center; gap:12px; margin:-6px 4px 12px; font-size:14px; font-weight:600; color:var(--muted); min-height:30px; }
  .savebar #newProj { margin-inline-start:auto; }
  .savest.ok { color:var(--ok); } .savest.err { color:#DC2626; }
  .resume { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--a1soft); border:1px solid rgba(255,90,10,.35); border-radius:14px; padding:14px 16px; margin-bottom:18px; }
  .resume .txt { flex:1; min-width:220px; } .resume .txt b { display:block; font-size:15px; line-height:1.4; }
  .resume .note { display:block; margin:0; font-size:13px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .resume .btn { white-space:nowrap; }
  /* the create button: the arrow gives way to a turning ring while the video is being made */
  #createBtn { gap:10px; }
  #createBtn .cb-arrow { flex:none; width:20px; height:20px; transition:transform .2s; }
  #createBtn:not(:disabled):hover .cb-arrow { transform:translateX(-4px); }
  #createBtn .cb-spin { display:none; flex:none; width:20px; height:20px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:len-spin .8s linear infinite; }
  #createBtn.busy:disabled { opacity:1; cursor:progress; }
  #createBtn.busy .cb-spin { display:block; }
  #createBtn.busy .cb-arrow { display:none; }
  #createBtn.busy .cb-txt { font-size:0; }
  #createBtn.busy .cb-txt::after { content:attr(data-busy) "..."; font-size:16px; }
  .transport .btn:disabled { opacity:.35; }
  .script-card { margin-top:18px; border:1px solid var(--line); border-radius:16px; padding:16px; background:var(--card2); }
  .script-card textarea { width:100%; min-height:150px; border:1px solid var(--line); border-radius:12px; padding:12px; font:inherit; font-size:15px; resize:vertical; background:var(--field); color:var(--ink); }
  .script-card textarea::placeholder { color:#6b6b6b; opacity:1; }
  .script-card .head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
  .script-card .head b { font-size:17px; } .opt { background:rgba(251,191,36,.08); color:var(--amber); border:1px solid rgba(251,191,36,.3); border-radius:999px; padding:1px 10px; font-size:12px; font-weight:700; }
  .script-card { border-top:2px solid var(--amber) !important; }
  .split { display:grid; gap:6px; margin-top:10px; }
  .split .sp { display:flex; gap:8px; align-items:flex-start; font-size:13px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px; }
  .split .sp img { width:46px; height:34px; object-fit:contain; border-radius:6px; border:1px solid var(--line); background:#fff; flex:none; }
  .split .sp.empty { border-color:#FCA5A5; background:#FEF2F2; }
  .split-fit { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; padding:10px 12px; border:1px dashed var(--a1); border-radius:12px; background:var(--card2); font-size:13px; }
  .split-fit span { flex:1 1 220px; color:var(--muted); }
  .split-fit.hidden { display:none; }
  /* nudges up: a quiet chip in the counter and a line under the finished video */
  .cr-chip.c-up { text-decoration:none; color:var(--a1); border-style:dashed; cursor:pointer; }
  .cr-chip.c-up:hover { background:var(--a1soft); }
  .up-nudge { margin:4px 0; padding:10px 12px; border:2px dashed var(--a1); border-radius:12px; background:var(--a1soft); font-size:14px; font-weight:700; line-height:1.6; }
  .up-nudge a { color:var(--a1); font-weight:800; text-decoration:none; white-space:nowrap; }
  .syncb { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--a1soft); border:1px solid rgba(255,90,10,.35); border-radius:12px; padding:10px 14px; margin-bottom:14px; font-weight:600; }
  .syncb.ok { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.3); } .syncb.warn { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.35); }
  .syncb .bar { flex-basis:100%; margin-top:2px; }
  .srow textarea { width:100%; min-height:54px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit; font-size:13px; resize:vertical; background:var(--field); color:var(--ink); }

  /* export */
  .qgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  @media (max-width:800px){ .qgrid { grid-template-columns:1fr; } }
  .qcard { --qc:var(--a1); position:relative; border:1px solid var(--line); border-radius:16px; padding:16px; cursor:pointer; background:var(--card2); transition:.2s; display:block; }
  .qcard:hover { border-color:var(--line2); transform:translateY(-2px); }
  .qcard input { position:absolute; opacity:0; }
  .qcard.q-480 { --qc:var(--cyan); } .qcard.q-720 { --qc:var(--a1); } .qcard.q-1080 { --qc:var(--amber); }
  .qcard.on { border-color:var(--qc); background:color-mix(in srgb, var(--qc) 10%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--qc) 22%, transparent), 0 20px 45px -12px color-mix(in srgb, var(--qc) 25%, transparent); }
  .qcard h3 { margin:0; font-size:20px; } .qcard .dim { color:var(--muted); direction:ltr; text-align:right; font-size:14px; }
  .qcard .size { font-size:26px; font-weight:900; margin:8px 0 2px; color:var(--qc); }
  .qcard .tag { position:absolute; top:12px; left:12px; background:var(--qc); color:#fff; font-size:12px; padding:1px 10px; border-radius:999px; }
  .result { margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
  @media (max-width:800px){ .result { grid-template-columns:1fr; } }
  .result video { width:100%; max-height:60vh; background:#000; border:1px solid var(--line); border-radius:14px; }
  .result .info { display:flex; flex-direction:column; gap:10px; }
  .kv { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:6px 0; }
  .kv span { color:var(--muted); }

  /* sections */
  .section { padding:40px 20px; position:relative; }
  .section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--line2),transparent); }
  .section h2 { font-size:clamp(22px,3vw,32px); margin:0 0 22px; text-align:center; }
  .section h2 em { font-style:normal; color:var(--a1); }
  .cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  @media (max-width:800px){ .cards3 { grid-template-columns:1fr; } }
  .fc { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px; transition:.3s; }
  .fc:hover { border-color:rgba(255,90,10,.35); box-shadow:0 20px 45px -12px rgba(255,90,10,.2); }
  .fc .n { width:40px; height:40px; border-radius:12px; background:var(--a1); color:#fff; display:grid; place-items:center; font-weight:900; margin-bottom:10px; box-shadow:0 8px 20px -6px rgba(255,90,10,.7); }
  .fc h3 { margin:0 0 6px; }
  details { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:10px; transition:.2s; }
  details[open] { border-color:rgba(255,90,10,.35); }
  summary { font-weight:700; cursor:pointer; } summary::marker { color:var(--a1); } details p { color:var(--muted); margin:8px 0 0; }
  footer { border-top:1px solid var(--line); padding:24px 0; color:var(--muted); text-align:center; font-size:14px; }
  footer b { color:var(--a1); }
  .toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--card2); border:1px solid var(--line2); color:#fff; padding:10px 18px; border-radius:12px; z-index:100; box-shadow:0 10px 30px rgba(60,45,20,.18); font-weight:600; }
  .overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(6px); z-index:90; display:grid; place-items:center; color:#fff; text-align:center; }
  .overlay .box { background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:20px; padding:26px 34px; min-width:300px; }
  ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background:var(--bg); }
  ::-webkit-scrollbar-thumb { background:var(--line); border-radius:10px; border:2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background:var(--a1); }
  /* showcase strip: videos made with the tool (same look as the course page strip) */
  .showcase { padding:10px 0 34px; }
  .showcase .head { text-align:center; padding:0 20px; margin-bottom:16px; }
  .showcase h2 { font-size:clamp(20px,2.6vw,30px); margin:0 0 4px; }
  .showcase h2 em { font-style:normal; color:var(--a1); text-shadow:0 0 40px rgba(255,90,10,.35); }
  .showcase .head p { color:var(--muted); margin:0; }
  .sv-viewport { direction:ltr; overflow:hidden; padding:6px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
  .sv-track { display:flex; gap:14px; width:max-content; animation:sv-marquee var(--sv-dur,60s) linear infinite; }
  .sv-viewport:hover .sv-track, .sv-track.paused { animation-play-state:paused; }
  @keyframes sv-marquee { from { transform:translateX(-50%); } to { transform:translateX(0); } }
  .sv-card { --h:200px; position:relative; height:var(--h); flex:none; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#000; cursor:pointer; padding:0; transition:transform .3s, border-color .3s; }
  @media (max-width:600px) { .sv-card { --h:150px; } }
  .sv-card:hover, .sv-card:focus-visible { border-color:var(--a1); transform:translateY(-4px); outline:none; }
  .sv-card img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; transition:transform .5s; }
  .sv-fallback { position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:4px; background:radial-gradient(circle at 50% 40%, rgba(255,90,10,.35), var(--card) 70%); color:var(--muted); font-size:12px; font-weight:700; }
  .sv-fallback b { font-size:28px; line-height:1; }
  .sv-card:hover img { transform:scale(1.05); }
  .sv-card::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.2); transition:background .3s; }
  .sv-card:hover::after { background:rgba(0,0,0,.35); }
  /* play button in the YouTube shape: dark rounded rectangle with a white triangle; pink with a dark triangle on hover */
  .sv-play { position:absolute; inset:0; margin:auto; width:68px; height:48px; border-radius:14px; background:#0F0F0F; color:#fff; border:0; box-shadow:0 6px 20px rgba(0,0,0,.4); display:grid; place-items:center; z-index:2; transition:background .2s, color .2s, transform .2s, box-shadow .2s; }
  .sv-play svg { width:26px; height:26px; display:block; transition:transform .2s; }
  .sv-card:hover .sv-play, .sv-card:focus-visible .sv-play { background:var(--a1); color:#0F0F0F; transform:scale(1.06); box-shadow:0 8px 26px rgba(255,90,10,.45); }
  @media (max-width:600px) { .sv-play { width:56px; height:40px; border-radius:12px; } .sv-play svg { width:22px; height:22px; } }
  .ord-modal { position:fixed; inset:0; z-index:96; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
  .ord-box { background:var(--card); border:1px solid var(--line2); border-radius:var(--r); padding:20px; max-width:100%; box-shadow:var(--shadow); }
  .ord-box h3 { margin:0 0 6px; font-family:var(--display); }
  .ord-box p { margin:0 0 12px; color:var(--muted); font-size:14px; }
  .ord-box canvas { display:block; max-width:100%; border-radius:12px; background:#fff; cursor:pointer; }
  .ord-act { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .sv-modal { position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.6); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:16px; animation:sv-fade .2s ease-out; }
  .sv-frame { position:relative; background:#000; border:1px solid rgba(255,255,255,.2); border-radius:10px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:sv-zoom .3s ease-out; }
  .sv-frame iframe, .sv-frame img { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
  .sv-frame img { transition:opacity .5s; pointer-events:none; }
  .sv-close { position:absolute; top:12px; right:12px; z-index:3; width:38px; height:38px; border-radius:50%; border:1px solid var(--line2); background:rgba(0,0,0,.7); color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center; }
  .sv-close:hover { background:#000; transform:scale(1.05); }
  @keyframes sv-fade { from { opacity:0; } }
  @keyframes sv-zoom { from { opacity:0; transform:scale(.92) translateY(16px); } }
  /* credit meter (paid plans): balance, plan, top-up link */
  .credits { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:0 0 16px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); }
  .credits .cr-main { display:flex; align-items:center; gap:10px; font-weight:700; } .credits .cr-main b { color:var(--a1); font-size:18px; }
  .cr-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .cr-chip { --cc:var(--a1); display:inline-flex; align-items:baseline; gap:6px; padding:6px 12px; border-radius:12px; font-size:14px; font-weight:700; color:var(--ink);
    background:color-mix(in srgb, var(--cc) 10%, transparent); border:1px solid color-mix(in srgb, var(--cc) 30%, transparent); }
  .cr-chip b { color:var(--cc) !important; font-size:17px !important; } .cr-chip small { color:var(--muted); font-weight:600; font-size:12.5px; }
  .cr-chip.c-emerald { --cc:var(--emerald); } .cr-chip.c-violet { --cc:var(--violet); } .cr-chip.c-amber { --cc:var(--amber); }
  .credits .cr-ico { font-size:20px; } .credits .cr-side { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14px; }
  .credits .btn { padding:8px 14px; font-size:14px; }
  .credits.low { border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.06); } .credits.empty { border-color:rgba(255,90,10,.55); background:var(--a1soft); }
  .credits.empty .btn, .credits.low .btn { background:var(--a1); border-color:var(--a1); color:#fff; }
  /* The free video's terms (green), the project already on it (amber), today's used (red, live countdown) */
  .freebar { --fb:var(--ok); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px; margin:0 0 12px; padding:7px 14px; border:1px solid color-mix(in srgb, var(--fb) 45%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--fb) 6%, var(--card)); font-size:14px; }
  .freebar.using { --fb:var(--warn); } .freebar.out { --fb:#DC2626; }
  .freebar .fb-main { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
  .freebar .fb-main > b { font-size:15px; font-weight:800; color:var(--fb); }
  .freebar .fb-chips { display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--muted); font-weight:600; }
  .freebar .fb-side { display:flex; align-items:center; gap:10px; }
  .freebar .fb-timer { font-weight:700; color:var(--fb); }
  .freebar .fb-timer b { font-variant-numeric:tabular-nums; }
  .freebar .fb-link { color:var(--fb); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
  .freebar:not(.out) .fb-main > b::before { content:""; display:inline-block; width:7px; height:7px; margin-inline-end:7px; border-radius:50%; background:var(--fb); vertical-align:middle; animation:fb-pulse 1.8s ease-out infinite; }
  .freebar.shake { animation:fb-shake .5s; }
  @keyframes fb-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--fb) 55%, transparent); } 100% { box-shadow:0 0 0 7px transparent; } }
  @keyframes fb-shake { 20%, 60% { transform:translateX(-5px); } 40%, 80% { transform:translateX(5px); } }
  @media (prefers-reduced-motion: reduce) { .freebar.shake, .freebar .fb-main > b::before { animation:none; } }
  #createCost.bad { color:#DC2626; font-weight:700; padding:8px 10px; border-radius:10px; background:rgba(220,38,38,.07); border:1px solid rgba(220,38,38,.3); }
  @media (max-width:640px) { .freebar { padding:7px 12px; font-size:13px; } .freebar .fb-main > b { font-size:14px; } }
  /* the plan's longest video, under the voice-over drop zone */
  .len-block { margin-top:10px; padding:14px 16px; border:1px solid rgba(255,90,10,.55); border-radius:14px; background:var(--a1soft); display:flex; flex-direction:column; gap:6px; }
  .len-block b { font-size:15.5px; color:#fff; } .len-block span { font-size:14px; color:var(--ink); line-height:1.7; }
  .len-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
  /* the shortened-pauses offer: shown only when the recording fits once its long pauses are shortened */
  .len-fix { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:4px; padding:10px 12px; border:1.5px dashed var(--ok); border-radius:12px; background:color-mix(in srgb, var(--ok) 7%, var(--card)); }
  .len-fix.hidden { display:none; }
  /* busy: a spinner and what is happening (and a bar when there is a percentage); ready: the length and the button */
  .len-fix .len-busy, .len-fix.busy .len-ready { display:none; }
  .len-fix.busy .len-busy { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--ink); }
  .len-fix.busy { border-color:var(--line2); background:var(--card2); }
  .len-spin { flex:none; width:20px; height:20px; border-radius:50%; border:2.5px solid var(--line2); border-top-color:var(--a1); animation:len-spin .8s linear infinite; }
  @keyframes len-spin { to { transform:rotate(360deg); } }
  .len-prog { width:100%; height:6px; border-radius:99px; background:var(--line); overflow:hidden; }
  .len-prog.hidden, .len-fix:not(.busy) .len-prog { display:none; }
  .len-prog i { display:block; height:100%; width:0; background:var(--a1); border-radius:inherit; transition:width .2s ease; }
  @media (prefers-reduced-motion: reduce) { .len-spin { animation-duration:2.4s; } .len-prog i { transition:none; } }
  .len-fix:not(.hidden) + .len-acts .btn.primary { background:var(--card); color:var(--ink); border-color:var(--ink); }
  .drop.too-long { border-style:solid; border-color:var(--a1); background:var(--a1soft); }
  .qcard.locked { opacity:.45; cursor:not-allowed; } .qcard.locked:hover { transform:none; border-color:var(--line); }
  .qcard .tag.lock { background:var(--line2); }
  /* where the export's video is taken from: this month's plan videos, an earlier plan's videos, or extra credits */
  .srcpick { margin-top:18px; }
  .srcpick h3 { margin:0 0 10px; font-size:16px; }
  .srcgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
  .srccard { position:relative; border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--card2); cursor:pointer; display:flex; flex-direction:column; gap:2px; transition:.2s; }
  .srccard input { position:absolute; opacity:0; }
  .srccard b { font-size:15px; } .srccard .n { font-size:22px; font-weight:900; color:var(--a1); }
  .srccard small { color:var(--muted); font-size:12px; line-height:1.5; }
  .srccard.on { border-color:var(--a1); background:color-mix(in srgb, var(--a1) 10%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent); }
  .srccard.off { opacity:.45; cursor:not-allowed; }
  .srccard .why { color:#b91c1c; font-weight:700; }
  #expCost { margin-top:10px; } #expCost a { color:var(--a1); font-weight:700; }

  /* my videos (on-device library of finished exports) */
  .library { margin:0 0 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:4px 16px; }
  .library[open] { padding-bottom:16px; }
  .library summary { cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:10px 0; font-weight:800; font-size:17px; }
  .library summary::-webkit-details-marker { display:none; }
  .library .lib-n { color:var(--a1); }
  .library .lib-sz { margin-inline-start:auto; font-size:13px; font-weight:600; color:var(--muted); }
  .library .note { color:var(--muted); font-size:14px; margin:0 0 14px; }
  .lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
  .lib-card { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--card2); }
  .lib-card video { width:100%; aspect-ratio:16/9; object-fit:contain; background:#000; border-radius:10px; }
  .lib-card b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lib-card small { color:var(--muted); }
  .lib-actions { display:flex; gap:6px; margin-top:4px; } .lib-actions .btn { flex:1; padding:7px 8px; } .lib-actions .btn:last-child { flex:0 0 auto; }

  /* ───────── studio redesign ───────── */
  /* slim credit strip */
  .credits { padding:9px 14px; border-radius:14px; font-size:14px; }
  .credits .cr-main b { font-size:16px; }
  /* save state pill */
  .savebar { margin:0 2px 12px; }
  .savest { display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13px; }
  .savest:empty { display:none; }
  .savest.ok { border-color:rgba(16,185,129,.35); }
  /* step 1: files on the left, project summary on the right */
  .s1 { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
  @media (max-width:1000px){ .s1 { grid-template-columns:1fr; } }
  .sec-h { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
  .sec-h h2 { margin:0; }
  .drop { min-height:170px; border-radius:20px; background:linear-gradient(160deg,var(--card2),var(--card2)); }
  .drop .ic { --ac:var(--c, var(--a1)); width:58px; height:58px; border-radius:18px; display:grid; place-items:center; color:var(--ac); background:color-mix(in srgb, var(--ac) 14%, transparent); border:1px solid color-mix(in srgb, var(--ac) 35%, transparent); box-shadow:0 10px 30px -10px var(--ac); transition:.25s; }
  .drop .ic .ico { width:28px; height:28px; }
  .drop:hover .ic, .drop.over .ic { transform:translateY(-3px) scale(1.05); }
  .drop.has .ic { color:var(--ok); background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.4); box-shadow:0 10px 30px -10px rgba(16,185,129,.6); }
  .drop b { overflow-wrap:anywhere; }
  .script-card { border-radius:20px; background:linear-gradient(160deg,var(--card2),var(--card2)); }
  .chip { border-radius:14px; }
  .summary { position:sticky; top:12px; display:flex; flex-direction:column; gap:12px; padding:18px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,var(--card2),var(--card2)); box-shadow:0 20px 50px -25px rgba(255,90,10,.35); }
  .summary h3 { margin:0; font-family:var(--display); font-size:18px; }
  .check { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .check li { display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; padding:9px 12px; border-radius:12px; background:var(--card2); border:1px solid var(--line); }
  .check li i { flex:none; width:20px; height:20px; border-radius:50%; border:2px solid var(--line2); display:grid; place-items:center; font-style:normal; font-size:12px; color:transparent; }
  .check li em { margin-inline-start:auto; font-style:normal; font-weight:700; font-size:12px; color:var(--muted); direction:ltr; }
  .check li.ok { border-color:rgba(16,185,129,.35); background:rgba(16,185,129,.07); }
  .check li.ok i { border-color:var(--ok); background:var(--ok); color:#fff; } .check li.ok i::after { content:'✓'; }
  .check li.ok em { color:var(--ok); }
  .check li.opt:not(.ok) i { border-style:dashed; }
  /* The video's settings, before it is made. On a wide screen they scroll on their own, so the create button stays in view */
  .set-box { display:flex; flex-direction:column; gap:8px; min-height:0; }
  .set-box h4 { margin:0; font-family:var(--display); font-size:15px; }
  .set-box .set-fields { max-height:max(200px, calc(100vh - 500px)); overflow-y:auto; overscroll-behavior:contain; padding-inline-end:4px; }
  .set-group { border:1px solid var(--line); border-radius:12px; background:var(--card); margin-bottom:8px; }
  .set-group:last-child { margin-bottom:0; }
  .set-group > summary { cursor:pointer; font-weight:800; font-size:14px; padding:10px 12px; min-height:40px; box-sizing:border-box; }
  .set-grid > .field { margin:0 12px 12px; }
  .hand-name, .split-more { display:none; }
  .create-bar { display:flex; flex-direction:column; gap:12px; }
  .set-group .field label:has(input[type=checkbox]) { display:flex; align-items:center; gap:8px; }
  .set-group .field input[type=checkbox] { flex:none; width:18px; height:18px; }
  @media (max-width:1000px){ .set-box .set-fields { max-height:none; overflow:visible; padding:0; } }
  .summary .btn.big { width:100%; border-radius:16px; padding:14px 16px; font-size:16px; }
  .summary .status { margin:0; font-size:14px; } .summary .status:empty { display:none; }
  .summary .tip { margin:0; font-size:13px; }
  /* editor */
  .stage-box { border-radius:20px; background:radial-gradient(600px 260px at 50% 0, rgba(255,90,10,.08), transparent), var(--field); }
  #stage { border-radius:12px; box-shadow:0 24px 60px -20px rgba(0,0,0,.9); }
  .side { border-radius:20px; }
  .tabs { padding:6px; gap:4px; } .tabs button { border-radius:10px; border-bottom:none; padding:9px 6px; }
  .tabs button.on { background:var(--a1soft); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,90,10,.45); }
  .nav-row { padding-top:16px; border-top:1px solid var(--line); }
  .resync-row { display:flex; justify-content:center; gap:6px; margin:12px 0; }
  /* export */
  .qcard { border-radius:20px; padding:20px; }
  .qcard.on::after { content:'✓'; position:absolute; top:12px; left:12px; width:24px; height:24px; border-radius:50%; background:var(--qc); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:900; }
  /* badge + check sit on the left so they never cover the title on the right */
  .qcard .tag { left:12px; right:auto; } .qcard.on .tag { left:44px; }
  .qcard .tag:not(.lock) { color:#000; font-weight:800; }
  .result { padding:18px; border:1px solid rgba(16,185,129,.35); border-radius:20px; background:rgba(16,185,129,.05); }
  #exportBtn { min-width:260px; }

  /* ───────── phones: tighter padding, bigger touch targets, nothing wider than the screen ───────── */
  html { -webkit-text-size-adjust:100%; }
  img, video, canvas { max-width:100%; }
  @media (max-width:640px){
    /* the step bar and the save strip take less height */
    .stepper { border-radius:16px; margin-bottom:10px; }
    .stepper button { min-height:46px; }
    .savebar { margin:0 2px 8px; min-height:0; font-size:13px; gap:8px; }
    .savebar:empty, .savebar:not(:has(.savest:not(:empty), #newProj:not(.hidden))) { display:none; }
    .credits { padding:8px 12px; margin-bottom:10px; gap:8px 10px; }
    .credits .cr-side { width:100%; justify-content:space-between; }
    /* panels */
    .panel { padding:14px; border-radius:18px; }
    .panel h2 { font-size:19px; line-height:1.4; }
    .panel .sub { font-size:14px; margin-bottom:14px; }
    .s1 { gap:16px; }
    .grid2 { gap:12px; }
    .drop { padding:18px 12px; min-height:120px; }
    .drop b { font-size:16px; }
    .drop small { font-size:13px; }
    .script-card { padding:12px; margin-top:12px; }
    .script-card textarea { min-height:120px; }
    .resume { padding:12px; }
    .resume .txt { min-width:0; flex-basis:100%; }
    .resume .btn { flex:1; }
    /* every field is at least 16px so the phone does not zoom in on focus, and 44px tall to tap */
    select, input[type=number], input[type=text], textarea { font-size:16px; min-height:44px; }
    .script-card textarea, .srow textarea { min-height:90px; }
    .btn { min-height:44px; padding:10px 16px; }
    .btn.small { min-height:40px; }
    .btn.big { padding:13px 22px; font-size:16px; }
    .nav-row .btn { flex:1; }
    /* editor: preview on top, controls under it */
    .editor { gap:12px; }
    .stage-box { padding:8px; gap:8px; border-radius:14px; }
    #stage { max-height:42vh; }
    .vp-vol { display:none; }
    .bigplay { width:64px; height:64px; font-size:26px; }
    .transport { gap:8px; justify-content:center; }
    .transport .t { min-width:0; font-size:14px; }
    .transport .btn { padding:8px 12px; min-height:40px; }
    .transport .btn.play { width:48px; height:48px; min-height:48px; }
    .side { max-height:none; }
    .tabs button { padding:12px 4px; font-size:14px; }
    .tabbody { padding:10px; overflow:visible; }
    .srow { padding:8px; }
    .srow .ctrls { flex-wrap:wrap; justify-content:flex-start; }
    .srow button, .cap button { min-width:36px; min-height:36px; }
    .srow input { width:72px; min-height:36px; }
    .cap { flex-wrap:wrap; }
    .cap .time { width:72px; min-height:36px; }
    .cap input.text { flex-basis:100%; order:3; }
    .field label { font-size:14px; }
    /* export */
    .qgrid { gap:10px; }
    .qcard { padding:14px; }
    .qcard h3 { font-size:18px; }
    .qcard .size { font-size:22px; }
    .result { padding:12px; margin-top:14px; gap:12px; }
    .result video { max-height:44vh; }
    #exportBtn { min-width:0; width:100%; }
    .library { padding:2px 12px; }
    .library summary { font-size:16px; }
    .lib-grid { grid-template-columns:1fr; }
    .toast { width:calc(100% - 24px); text-align:center; bottom:12px; }
    .overlay .box { min-width:0; width:calc(100% - 32px); padding:20px 18px; }
  }

  /* ───────── phones, compact: the first screen is the work (files), not the chrome around it ───────── */
  @media (max-width:640px){
    /* credit strip: one slim row */
    .credits { flex-wrap:nowrap; align-items:center; padding:6px 10px; margin-bottom:8px; border-radius:12px; gap:8px; }
    .credits .cr-ico { display:none; }
    .credits .cr-main { flex:1; min-width:0; font-size:13px; }
    .credits .cr-main b { font-size:14px; }
    .credits .cr-main { overflow:hidden; } .credits .cr-main #crText { min-width:0; flex:1; overflow:hidden; }
    .cr-chips { gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    .cr-chip { flex:none; white-space:nowrap; }
    .cr-chip { padding:3px 8px; font-size:12px; border-radius:10px; gap:4px; }
    .cr-chip b { font-size:14px !important; } .cr-chip small { font-size:11px; }
    .credits .cr-side { width:auto; flex:none; gap:8px; }
    .credits #crPlan { display:none; }
    .credits .btn { min-height:34px; padding:5px 10px; font-size:13px; white-space:nowrap; }
    /* step bar */
    .stepper { margin-bottom:8px; padding:4px; }
    .stepper button { min-height:40px; padding:5px 8px; }
    .stepper button i { width:26px; height:26px; font-size:13px; }
    .stepper button + button::before { width:8px; margin-inline-end:-4px; }
    /* heading + panel */
    .panel { padding:12px; }
    #p1 .sec-h h2 { font-size:17px; margin:0; }
    #p1 .sec-h .sub { display:none; }
    .sec-h { margin-bottom:10px; }
    /* the two drop zones become slim rows: icon beside the text */
    /* ... side by side in one row, so the page stays short; the player and any length notice take a row of their own */
    #p1 .grid2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
    #p1 .grid2 > div { display:contents; }
    #p1 .grid2 #audioRow { grid-column:1 / -1; grid-row:2; margin:0; }
    #p1 .grid2 #audio1 { height:40px; }
    #p1 .grid2 #lenBlock { grid-column:1 / -1; grid-row:3; }
    .drop { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; text-align:start; gap:8px; min-height:52px; padding:6px 8px; border-radius:14px; min-width:0; }
    .drop .ic { flex:none; width:34px; height:34px; border-radius:10px; }
    .drop .ic .ico { width:18px; height:18px; }
    .drop b { font-size:13px; line-height:1.3; min-width:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
    .drop small { display:none; }
    .drop:hover .ic, .drop.over .ic { transform:none; }
    .thumbs { grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px; margin-top:8px; }
    .script-card { margin-top:10px; padding:10px; }
    .script-card .head { margin-bottom:6px; gap:6px; }
    .script-card .head b { font-size:15px; }
    .script-card .opt { font-size:11px; }
    .script-card textarea { min-height:72px; font-size:16px; }
    .label { margin:12px 0 6px; }
    /* video shape: four small tiles in two columns */
    .chips { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:4px 0; }
    .chip { padding:8px 8px; font-size:12.5px; gap:6px; min-height:40px; border-radius:12px; }
    /* the create button stays in reach while the files are filled in */
    .summary { position:static; gap:6px; padding:8px; border-radius:16px; background:var(--card2); box-shadow:0 -10px 30px -12px rgba(0,0,0,.9), 0 10px 30px -12px rgba(255,90,10,.4); }
    .summary h3, .summary .tip { display:none; }
    .check { flex-direction:row; gap:6px; overflow-x:auto; scrollbar-width:none; }
    .check li { flex:none; padding:4px 9px; gap:6px; font-size:12px; border-radius:10px; }
    .check li i { width:16px; height:16px; font-size:10px; }
    .check li em { display:none; }
    .summary .btn.big { padding:10px 14px; font-size:15px; min-height:44px; }
    .summary .note { font-size:12px; line-height:1.45; margin:0; }
    .s1 { gap:10px; grid-template-columns:minmax(0,1fr); } .s1 > * { min-width:0; }
  }

  /* ───────── one column: the create button is always in sight, and a long script does not push it away ───────── */
  @media (max-width:1000px){
    /* the summary's box gives way so the bar can stick anywhere in the upload section, not only inside that box */
    .s1 { display:flex; flex-direction:column; align-items:stretch; }
    .summary { display:contents; }
    .summary > * { min-width:0; }
    .create-bar { position:sticky; bottom:max(8px, env(safe-area-inset-bottom)); z-index:20; gap:6px; padding:6px; border:2px solid var(--ink); border-radius:18px; background:var(--card); box-shadow:0 -8px 24px -10px rgba(28,27,31,.35); }
    /* the first two scenes show, the rest scroll inside the list (app.js measures them) */
    .split { max-height:var(--list-h, none); overflow-y:auto; }
    .split-more:not(.hidden) { display:block; margin:6px 0 0; font-size:12px; font-weight:700; color:var(--muted); }
  }
  /* the editor under the preview: long lists scroll inside themselves, so the export button is never far (app.js measures the rows) */
  @media (max-width:980px){
    .side { max-height:none; }
    .tabbody { overflow:visible; }
    #sceneList, #capList { max-height:var(--list-h, none); overflow-y:auto; }
  }
  /* ───────── phones: the video's settings, side by side ───────── */
  @media (max-width:640px){
    /* the preview gets the room: its own bar already plays and shows the time, so nothing else stays under it */
    .stage-box { padding:6px; gap:6px; }
    #stage { max-height:62vh; }
    .transport { display:none; }
    #resyncBtn { min-height:36px; padding:4px 12px; font-size:13px; }
    #undoBtn, #redoBtn { width:40px; min-height:36px; padding:0; font-size:18px; }
    #undoBtn .lbl, #redoBtn .lbl { display:none; }
    /* a saved project: one line of text with its two buttons under it */
    .resume { gap:8px; padding:8px 10px; margin-bottom:10px; border-radius:12px; }
    .resume .txt { flex:1 1 100%; min-width:0; }
    .resume .txt b { font-size:14px; }
    .resume .note { font-size:12px; }
    .resume .btn { flex:1; min-height:36px; padding:4px 8px; font-size:13px; }
    .script-card textarea { height:96px; }
    .set-box { gap:6px; }
    .set-box h4 { font-size:14px; }
    .set-group { margin-bottom:6px; padding:0; border-radius:10px; }
    .set-group > summary { min-height:34px; padding:6px 10px; font-size:13px; }
    .set-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:8px; padding:0 10px 10px; }
    .set-grid > .field { margin:0; min-width:0; }
    .set-grid > .field.wide { grid-column:1 / -1; }
    .set-grid .field label { margin-bottom:2px; font-size:12px; line-height:1.3; }
    .set-grid .field label:has(input[type=checkbox]) { min-height:40px; margin:0; gap:6px; }
    .set-grid select { min-height:40px; padding:4px 6px; }
    .dflt { display:none; }
    /* the hands: four small squares to a row, the chosen one's name beside the heading */
    .hand-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
    .hand-opt { position:relative; padding:2px; border-radius:9px; }
    .hand-opt span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .hand-name { display:inline; margin-inline-start:6px; font-weight:500; color:var(--muted); }
    /* a message must not cover the bar */
    .toast { bottom:84px; }
  }

  /* ───────── SuperBoard sketch layer: ink outlines, offset "pen" shadows, highlighter emphasis ───────── */
  body { background-color:var(--bg); background-image:radial-gradient(rgba(28,27,31,.08) 1px, transparent 1px); background-size:22px 22px; }
  h1, h2, h3 { font-family:var(--display); }
  ::selection { background:var(--hl); color:var(--ink); }
  .btn { border:2px solid var(--ink); background:var(--card); color:var(--ink); box-shadow:2px 2px 0 var(--ink); border-radius:12px 14px 12px 15px / 14px 12px 15px 12px; }
  .btn:hover { border-color:var(--ink); color:var(--ink); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
  .btn:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
  .btn.primary { background:var(--a1); border-color:var(--ink); color:#fff; box-shadow:3px 3px 0 var(--ink); }
  .btn.primary:hover { background:var(--a1h); border-color:var(--ink); color:#fff; box-shadow:4px 4px 0 var(--ink); }
  .btn.primary:disabled:hover { background:var(--a1); }
  .btn.green { background:var(--ok); border-color:var(--ink); color:#fff; }
  .btn:disabled { box-shadow:none; }
  .panel { background:var(--card); border:2px solid var(--ink); border-radius:24px 20px 26px 18px / 20px 26px 18px 24px; box-shadow:6px 6px 0 var(--ink); }
  .stepper { border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); border-radius:18px 22px 18px 22px / 22px 18px 22px 18px; }
  .stepper button i { background:var(--card); border:2px solid var(--ink); color:var(--ink); }
  .stepper button.on, .stepper button.done { color:var(--ink); }
  .stepper button.on i, .stepper button.done i { border-color:var(--ink); color:#fff; box-shadow:2px 2px 0 var(--ink); }
  .stepper button.on small { color:var(--muted); }
  .drop { background:var(--card2); border:2px dashed var(--line2); }
  .drop:hover, .drop.over { border-color:var(--a1); }
  .drop .ic { box-shadow:none; border-width:2px; }
  .drop.has { background:color-mix(in srgb, var(--ok) 7%, var(--card)); }
  .chip { border:2px solid var(--line2); background:var(--card); }
  .chip.on { border-color:var(--ink); background:var(--a1); color:#fff; box-shadow:2px 2px 0 var(--ink); }
  .script-card { background:var(--card2); border:2px solid var(--line); border-top:3px solid var(--amber) !important; }
  .summary { background:var(--card2); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
  .check li { background:var(--card); }
  .opt { background:color-mix(in srgb, var(--hl) 45%, transparent); color:var(--ink); border-color:#E8C200; }
  .stage-box { background:var(--card3); border:2px solid var(--ink); }
  #stage { box-shadow:0 18px 40px -22px rgba(60,45,20,.5); border:1px solid var(--line); }
  .bigplay { border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
  .transport .btn.play { border-color:var(--ink); }
  .side { border:2px solid var(--ink); }
  .tabs { background:var(--card3); }
  .tabs button.on { background:var(--card); color:var(--a1); box-shadow:inset 0 0 0 2px var(--a1); }
  .qcard { background:var(--card); border:2px solid var(--line2); }
  .qcard.on { border-color:var(--ink); box-shadow:4px 4px 0 var(--ink); background:color-mix(in srgb, var(--qc) 8%, var(--card)); }
  .qcard .tag:not(.lock) { color:#fff; }
  .qcard .tag.lock { background:var(--line2); color:var(--ink); }
  .result { background:color-mix(in srgb, var(--ok) 6%, var(--card)); border:2px solid var(--ok); }
  .len-block b { color:var(--ink); }
  .credits, .library { border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
  .toast { background:var(--ink); color:var(--bg); border:none; box-shadow:4px 4px 0 var(--a1); }
  .overlay { background:rgba(247,243,234,.75); color:var(--ink); }
  .overlay .box { border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }
  .section h2 em, .showcase h2 em { color:var(--ink); text-shadow:none; background:linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); padding:0 4px; }
  .fc { border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
  .fc:hover { border-color:var(--ink); box-shadow:6px 6px 0 var(--ink); }
  .fc .n { border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
  .sv-card { border:2px solid var(--ink); }
  .sv-fallback { background:var(--card3); }
  .sv-modal, .ord-modal { background:rgba(28,27,31,.55); }
  .ord-box { border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }
  @media (max-width:640px){
    .panel { box-shadow:4px 4px 0 var(--ink); }
    .summary { background:var(--card); box-shadow:0 -10px 30px -14px rgba(60,45,20,.35), 3px 3px 0 var(--ink); }
  }

  /* ───────── motion: things arrive, answer the hand and celebrate a step done (all off with reduced motion) ───────── */
  @media (prefers-reduced-motion: no-preference) {
    /* a panel and its blocks rise in, one after the other, each time it is opened */
    .panel:not(.hidden) { animation:mo-rise .45s cubic-bezier(.2,.8,.2,1) backwards; }
    .panel:not(.hidden) > * { animation:mo-rise .5s cubic-bezier(.2,.8,.2,1) backwards; }
    .panel > :nth-child(2) { animation-delay:.06s; } .panel > :nth-child(3) { animation-delay:.12s; }
    .panel > :nth-child(4) { animation-delay:.18s; } .panel > :nth-child(n+5) { animation-delay:.24s; }
    .panel:not(.hidden) .s1 > * { animation:mo-rise .55s cubic-bezier(.2,.8,.2,1) backwards; } .s1 > :nth-child(2) { animation-delay:.12s; }
    .stepper button.on i { animation:mo-pop .45s cubic-bezier(.3,1.6,.5,1); }
    .stepper button.done i::after { display:inline-block; animation:mo-pop .4s cubic-bezier(.3,1.6,.5,1); }

    /* the drop boxes breathe while waiting, wiggle when a file is held over them and pop when filled */
    .drop .ic { animation:mo-float 3.4s ease-in-out infinite; }
    #imgDrop .ic { animation-delay:-1.7s; }
    .drop.over .ic { animation:mo-wiggle .6s ease-in-out infinite; }
    .drop.over { animation:mo-breathe 1.2s ease-out infinite; }
    .drop.has .ic { animation:mo-pop .5s cubic-bezier(.3,1.6,.5,1); }

    /* scene thumbnails pop in as they are added; held ones tilt like a card in the hand */
    .th.new { animation:mo-pop-in .42s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:var(--d, 0s); }
    .th img { transition:transform .25s ease; }
    .th:hover img { transform:scale(1.05); }
    .th { transition:transform .2s ease, box-shadow .2s ease; }
    .th.dragging { transform:rotate(-3deg) scale(1.06); box-shadow:0 14px 30px -10px rgba(0,0,0,.35); z-index:2; }

    /* the checklist ticks itself, and the create button wakes up once everything is in */
    .check li { transition:background-color .3s ease, border-color .3s ease; }
    .check li.ok i { animation:mo-pop .45s cubic-bezier(.3,1.7,.5,1); }
    #createBtn { position:relative; overflow:hidden; isolation:isolate; }
    #createBtn:not(:disabled)::after { content:""; position:absolute; inset:-2px auto -2px -40%; width:35%; z-index:-1; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); animation:mo-shine 3.6s ease-in-out 1s infinite; }
    #createBtn.ready-pop { animation:mo-tada .7s ease; }
    /* pressed: it gives way once, then breathes with a light passing over it until the video is made */
    #createBtn.busy { animation:cb-press .35s ease, cb-breathe 1.6s ease-in-out .35s infinite; }
    #createBtn.busy::after { content:""; position:absolute; inset:-2px auto -2px -40%; width:35%; z-index:-1; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); animation:mo-shine 1.6s ease-in-out infinite; }

    .chip.on, .qcard.on { animation:mo-pop .35s cubic-bezier(.3,1.6,.5,1); }
    .len-fix:not(.hidden), .split-fit:not(.hidden) { animation:mo-rise .35s ease-out backwards; }
    .toast { animation:mo-toast-in .35s cubic-bezier(.2,.9,.3,1.2) backwards; }
    .toast.out { animation:mo-toast-out .3s ease-in forwards; }

    /* the page: sections slide up as they scroll into view, and the highlighter draws under the headline word */
    .rv { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d, 0s); }
    .rv.in { opacity:1; transform:none; }
    .section h2 em, .showcase h2 em { background-repeat:no-repeat; background-position:100% 0; background-size:100% 100%; transition:background-size .8s cubic-bezier(.6,.1,.2,1) .35s; }
    h2.rv:not(.in) em { background-size:0% 100%; }
    .fc.rv.in .n { animation:mo-pop .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d, 0s) + .25s) backwards; }
    .fc:hover { transform:translate(-2px,-2px); }
    .sb-pill { animation:mo-rise .6s cubic-bezier(.2,.8,.2,1) backwards; }
    .sb-pill:nth-child(1) { animation-delay:.25s; } .sb-pill:nth-child(2) { animation-delay:.35s; }
    .sb-pill:nth-child(3) { animation-delay:.45s; } .sb-pill:nth-child(4) { animation-delay:.55s; }
    .sb-pill-icon { display:inline-block; transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
    .sb-pill:hover .sb-pill-icon { transform:rotate(-12deg) scale(1.25); }
  }
  /* with motion turned down (a system setting) things still fade in and out, without moving */
  @media (prefers-reduced-motion: reduce) {
    .panel:not(.hidden), .th.new, .len-fix:not(.hidden), .split-fit:not(.hidden) { animation:mo-fade .4s ease-out backwards; }
    .toast { animation:mo-fade .25s ease-out backwards; } .toast.out { animation:mo-fade-out .25s ease-in forwards; }
    .rv { opacity:0; transition:opacity .6s ease; transition-delay:var(--d, 0s); } .rv.in { opacity:1; }
  }
  @keyframes mo-fade { from { opacity:0; } }
  @keyframes mo-fade-out { to { opacity:0; } }
  @keyframes mo-rise { from { opacity:0; transform:translateY(16px); } }
  @keyframes mo-pop { 0% { transform:scale(.4); } 60% { transform:scale(1.18); } 100% { transform:scale(1); } }
  @keyframes mo-pop-in { from { opacity:0; transform:scale(.6) rotate(-6deg); } }
  @keyframes mo-float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
  @keyframes mo-wiggle { 0%, 100% { transform:rotate(0) scale(1.1); } 25% { transform:rotate(-9deg) scale(1.1); } 75% { transform:rotate(9deg) scale(1.1); } }
  @keyframes mo-breathe { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--c, var(--a1)) 40%, transparent); } 100% { box-shadow:0 0 0 12px transparent; } }
  @keyframes mo-shine { 0%, 55% { left:-40%; } 100% { left:120%; } }
  @keyframes mo-tada { 0% { transform:scale(1); } 15% { transform:scale(.95) rotate(-1.5deg); } 40% { transform:scale(1.05) rotate(1.5deg); } 65% { transform:scale(1.02) rotate(-1deg); } 100% { transform:scale(1); } }
  @keyframes cb-press { 0% { transform:scale(1); } 40% { transform:scale(.95); } 100% { transform:scale(1); } }
  @keyframes cb-breathe { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.018); } }
  @keyframes mo-toast-in { from { opacity:0; transform:translate(-50%, 24px) scale(.94); } }
  @keyframes mo-toast-out { to { opacity:0; transform:translate(-50%, 12px) scale(.96); } }