/* Screen Recorder — design system from the Hi75C Pro remapper (Switch & Cap), "midnight canvas, molten filament".
   Near-black canvas, grayscale text, one orange accent (actions + what you changed), blue only for status.
   Flat surfaces with hairline borders, no elevation. 12px cards, 4px buttons, pills only for tags/segments.
   Type: Geist (Latin) + IBM Plex Sans Arabic (Arabic) in one stack, Geist Mono for raw data. */

@font-face{font-family:"UI";src:url(fonts/geist-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21FF,U+20AC}
@font-face{font-family:"UI";src:url(fonts/geist-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21FF,U+20AC}
@font-face{font-family:"UI";src:url(fonts/geist-latin-600-normal.woff2) format("woff2");font-weight:600 700;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21FF,U+20AC}
@font-face{font-family:"UI";src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"UI";src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"UI";src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
/* text on the video (editor phase 3): fonts/text/, SIL OFL 1.1 (fontsource 5.3.0) */
@font-face{font-family:"T Cairo";src:url(fonts/text/cairo-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"T Cairo";src:url(fonts/text/cairo-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"T Cairo";src:url(fonts/text/cairo-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"T Cairo";src:url(fonts/text/cairo-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"T Tajawal";src:url(fonts/text/tajawal-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"T Tajawal";src:url(fonts/text/tajawal-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"T Tajawal";src:url(fonts/text/tajawal-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"T Tajawal";src:url(fonts/text/tajawal-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"T Lalezar";src:url(fonts/text/lalezar-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"T Lalezar";src:url(fonts/text/lalezar-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"T Amiri";src:url(fonts/text/amiri-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"T Amiri";src:url(fonts/text/amiri-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"T Amiri";src:url(fonts/text/amiri-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"T Amiri";src:url(fonts/text/amiri-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"T Bebas Neue";src:url(fonts/text/bebas-neue-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"T Caveat";src:url(fonts/text/caveat-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"T Caveat";src:url(fonts/text/caveat-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mono";src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --void:#040404;       /* page canvas */
  --graphite:#0c0c0c;   /* panels, cards (onyx) */
  --well:#121212;       /* inputs, wells (obsidian) */
  --fill:#1b1b1b;       /* neutral button fill, active segment */
  --seam:#252525;       /* card borders */
  --line:#303030;       /* dividers */
  --text:#f3f3f3; --ash:#dedede; --muted:#909090; --slate:#646464;
  --brass:#ff6c02;      /* the one warm voice: write, changed keys, active marker */
  --brass-hi:#ff9b51;
  --ok:#55c2ff;         /* status only: connected, tested, done */
  --bad:#ff5a52;        /* errors only */
  --cap:#1a1a1a; --cap-hi:#242424; --cap-acc:#2c2c2c; --legend:#dedede;
  --gap:5px;
  --r-case:16px; --r-key:6px; --r-ctl:4px; --r-card:12px; --r-in:8px;
  --on:#040404;         /* text on light fills */
  --code:#dedede; --edge:#909090;
  --side:220px;         /* sidebar width */
  --mono:"Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme=light]{
  --void:#f7f7f6; --graphite:#fff; --well:#f1f1ef; --fill:#e8e8e6; --seam:#e2e2df; --line:#d6d6d2;
  --text:#121212; --ash:#2a2a2a; --muted:#646464; --slate:#909090;
  --brass:#e85f00; --ok:#0b84c6; --on:#fff; --code:#1b1b1b; --edge:#646464;
  --cap:#fbfbfa; --cap-hi:#ffffff; --cap-acc:#e9e9e6; --legend:#1b1b1b;
}
*{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;background:var(--void);color:var(--text);font:16px/1.5 "UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
[hidden]{display:none!important}
a{color:var(--brass)}
/* machined Latin type: tight tracking on headings (never on Arabic, it breaks the joins) */
html[lang=en] .brand-model{letter-spacing:-.04em}
html[lang=en] .modal h2,html[lang=en] .psteps h4{letter-spacing:-.02em}

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px clamp(16px,4vw,40px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand-model{font-size:25.5px;font-weight:600;line-height:1}
.brand-line{display:flex;align-items:center;gap:10px;line-height:1}
.brand-sub{font-size:15px;color:var(--muted)}
.sc-logo{display:block;line-height:0;border-radius:var(--r-ctl)}
.sc-logo img{display:block;width:38px;height:38px;transition:transform .12s}
.sc-logo:hover img{transform:translateY(-1px) rotate(-4deg)}
/* "by SWITCH [cap] CAP" in the channel's own wordmark: text = mask tinted by theme, keycap = the logo svg */
.sc-by{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--slate);text-decoration:none;border-inline-start:1px solid var(--line);padding-inline-start:10px}
.wm{position:relative;display:block;height:13px;aspect-ratio:1096/150}
.wm-txt{position:absolute;inset:0;background:var(--ash);-webkit-mask:url(sc-wordmark-en.png) center/100% 100% no-repeat;mask:url(sc-wordmark-en.png) center/100% 100% no-repeat;transition:background .15s}
.wm-cap{position:absolute;left:55.84%;top:0;width:13.69%;height:100%}
html[lang=ar] .wm{height:15px;aspect-ratio:980/159}
html[lang=ar] .wm-txt{-webkit-mask-image:url(sc-wordmark-ar.png);mask-image:url(sc-wordmark-ar.png)}
html[lang=ar] .wm-cap{left:30.31%;top:2.52%;width:15.51%;height:94.97%}
.sc-by:hover{color:var(--muted)}
.sc-by:hover .wm-txt{background:var(--text)}
.support{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);color:var(--muted);text-decoration:none;font-weight:500;transition:border-color .15s,color .15s}
.support .ico{width:16px;height:16px}
.support:hover{border-color:var(--edge);color:var(--text)}
.support:hover .ico{color:var(--brass);fill:var(--brass)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--slate)}
.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.spacer{flex:1}

/* ---------- buttons ---------- */
button{background:transparent;border:1px solid var(--line);border-radius:var(--r-ctl);padding:7px 14px;cursor:pointer;font-weight:500;color:var(--ash);transition:border-color .15s,color .15s,background .15s}
button:hover:not(:disabled){border-color:var(--edge);color:var(--text)}
button:disabled{opacity:.35;cursor:not-allowed}
button.ghost,button.quiet{background:transparent}
button.quiet{color:var(--muted)}
button.quiet:hover:not(:disabled){color:var(--text)}
button.danger:hover:not(:disabled){color:var(--bad);border-color:var(--bad)}
button.on{border-color:var(--brass);color:var(--brass)}
button.primary{background:var(--fill);color:var(--text);border-color:var(--fill)}
button.primary:hover:not(:disabled){background:var(--seam);border-color:var(--line)}
button.write{background:var(--brass);color:#f3f3f3;border-color:var(--brass);font-weight:500}
button.write:hover:not(:disabled){background:#ff7a1c;border-color:#ff7a1c;color:#fff}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.row.end{justify-content:flex-end}
.seg{display:inline-flex;background:var(--graphite);border:1px solid var(--seam);border-radius:999px;padding:3px;gap:2px}
.seg .tab{border:1px solid transparent;background:transparent;border-radius:999px;padding:5px 16px;font-size:15px;color:var(--muted)}
.seg .tab:hover:not(:disabled){color:var(--text);border-color:transparent}
.seg .tab.active{background:var(--fill);border-color:var(--line);color:var(--text)}
.seg.small .tab{padding:4px 12px;font-size:14px}
.fine{margin:6px 0 0;color:var(--muted);font-size:15px;max-width:72ch}
.form{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center}
.form label,.form span{font-size:16px;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--brass);direction:ltr}
input[type=range]:disabled{opacity:.4}
.chk{display:flex;gap:8px;align-items:center;cursor:pointer}
.chk input{width:16px;height:16px;margin:0;accent-color:var(--brass)}
.rng{display:flex;gap:12px;align-items:center}
.rng output{min-width:7ch;font:15px var(--mono);color:var(--ash);font-variant-numeric:tabular-nums}
.warn{flex:1;min-width:280px;margin:0;font-size:15px;color:var(--ash);background:#ff6c020d;border:1px solid #ff6c0259;border-inline-start:2px solid var(--brass);border-radius:var(--r-ctl);padding:10px 12px}
.foot{max-width:1440px;margin:0 auto;padding:8px clamp(16px,4vw,40px) 40px;color:var(--slate);font-size:14px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--fill);border:1px solid var(--line);color:var(--text);font-weight:500;padding:10px 18px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:10;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1}
.muted{color:var(--muted)}
code{font:14.5px var(--mono);color:var(--code);background:var(--well);border:1px solid var(--seam);border-radius:var(--r-ctl);padding:2px 7px;direction:ltr;unicode-bidi:embed}
.seg.pills{display:flex;flex-wrap:wrap;border-radius:16px}
.seg.pills .tab{padding:4px 12px;font-size:15px}

/* ================= Screen Recorder ================= */
main{max-width:1440px;width:100%;margin:0 auto;padding:clamp(16px,3vw,32px) clamp(16px,4vw,40px)}
.ico{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn{display:inline-grid;place-items:center;padding:7px}
.rec-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.panel{background:var(--graphite);border:1px solid var(--seam);border-radius:var(--r-card);padding:20px 24px}
.panel h3{margin:0 0 10px;font-size:16px;font-weight:600}
html[lang=en] .panel h3{letter-spacing:-.01em}
.blk{padding:16px 0;border-top:1px solid var(--line)}
.blk:first-child{padding-top:0;border-top:none}
.blk .seg{margin:2px 0 6px}
.seg.pills{display:flex;flex-wrap:wrap;border-radius:16px}
.seg .tab{display:inline-flex;align-items:center;gap:6px}
.seg .tab .ico{width:16px;height:16px}
.field{display:grid;gap:6px;margin-top:10px}
.field>span{font-size:14.5px;color:var(--muted)}
select{width:100%;background:var(--well);border:1px solid var(--seam);border-radius:var(--r-in);padding:8px 10px;color:var(--text)}
select:focus{border-color:var(--edge);outline:none}
.chk{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:15px;cursor:pointer;color:var(--ash)}
.chk input{margin-top:4px;width:16px;height:16px;accent-color:var(--brass)}
.chk small{display:block;color:var(--muted);font-size:13.5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

/* stage: the live picture that is being recorded */
.stage-box{position:relative;aspect-ratio:16/9;width:100%;background:var(--well);border:1px solid var(--seam);border-radius:var(--r-card);overflow:hidden;display:grid;place-items:center;user-select:none}
.stage-box canvas,.stage-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.stage-empty{display:grid;justify-items:center;gap:10px;text-align:center;color:var(--muted);padding:24px;max-width:46ch;font-size:15px}
.stage-empty .ico{width:44px;height:44px;color:var(--slate);stroke-width:1.2}
/* camera bubble handle (only before recording, to place it) */
.bubble{position:absolute;border-radius:50%;overflow:hidden;cursor:grab;touch-action:none;box-shadow:0 0 0 2px #ffffff30,0 6px 24px #0008;background:#111}
.bubble.sq{border-radius:18%}
.bubble video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bubble.mirror video{transform:scaleX(-1)}
.bubble.drag{cursor:grabbing;box-shadow:0 0 0 2px var(--brass),0 6px 24px #0008}
.countdown{position:absolute;inset:0;display:grid;place-items:center;background:#000a;font:600 min(22vw,140px)/1 "UI",system-ui;color:#fff}
.rec-badge{position:absolute;top:12px;inset-inline-start:12px;display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:#000b;color:#fff;font:14px var(--mono)}
.rec-badge i{width:9px;height:9px;border-radius:50%;background:var(--bad);animation:blink 1.2s infinite}
.rec-badge.paused i{background:var(--muted);animation:none}
@keyframes blink{50%{opacity:.25}}

.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.controls .spacer{flex:1}
button.rec{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;font-size:16px;background:var(--brass);border-color:var(--brass);color:#fff}
button.rec:hover:not(:disabled){background:#ff7a1c;border-color:#ff7a1c;color:#fff}
button.rec i{width:12px;height:12px;border-radius:50%;background:#fff}
button.rec.stop i{border-radius:2px}
.timer{font:20px var(--mono);color:var(--ash);font-variant-numeric:tabular-nums;min-width:6ch}
.size-out{font:14px var(--mono);color:var(--muted)}
.meter{height:6px;border-radius:3px;background:var(--well);border:1px solid var(--seam);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;width:0;background:var(--ok);transition:width .08s}
.hint-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* recordings */
.takes{margin-top:28px}
.takes h3{margin:0 0 12px;font-size:16px;font-weight:600}
.take-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.take{background:var(--graphite);border:1px solid var(--seam);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.take video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.take-body{padding:12px 14px;display:grid;gap:4px}
.take-name{font-weight:500;overflow-wrap:anywhere;direction:ltr;text-align:start}
.take-meta{font:13.5px var(--mono);color:var(--muted)}
.take .row{margin-top:8px}
.take .row button,.take .row a.btn{padding:5px 12px;font-size:14.5px}
a.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-ctl);padding:7px 14px;color:var(--ash);text-decoration:none;font-weight:500}
a.btn:hover{border-color:var(--edge);color:var(--text)}
a.btn.write{background:var(--brass);border-color:var(--brass);color:#fff}
.empty-takes{color:var(--muted);font-size:15px;margin:0}
.ok-text{color:var(--ok)}
details.adv{margin-top:14px}
details>summary{cursor:pointer;color:var(--muted);font-size:15px}
details>summary:hover{color:var(--text)}
details ul{margin:8px 0 0;padding-inline-start:20px;color:var(--muted);font-size:14.5px}
details li{margin:4px 0}
kbd{font:13px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 6px;color:var(--ash);direction:ltr;unicode-bidi:embed}

@media (max-width:1024px){.rec-grid{grid-template-columns:1fr}}
@media (max-width:760px){
  .top{gap:10px}
  .brand-model{font-size:21px}
  .panel{padding:16px}
  .two{grid-template-columns:1fr}
  .take-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.rec-badge i{animation:none}}
.stage-box canvas{cursor:default;touch-action:none}
.stage-box canvas.grab{cursor:grab}.stage-box canvas.grabbing{cursor:grabbing}
.stage-empty{position:relative;pointer-events:none;background:#121212cc;border-radius:var(--r-card)}
:root[data-theme=light] .stage-empty{background:#121212cc;color:#dedede}
.srcs{position:fixed;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none;overflow:hidden}

/* ================= recordings cards (layers) ================= */
.take-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:none;border-radius:0;background:#000;cursor:pointer}
.take-thumb canvas{display:block;width:100%;height:100%}
.take-dur{position:absolute;bottom:8px;inset-inline-end:8px;background:#000c;color:#fff;font:13px var(--mono);padding:2px 7px;border-radius:4px}
.take-play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .15s;background:#0006}
.take-play .ico{width:44px;height:44px;fill:#fff;stroke:none}
.take-thumb:hover .take-play,.take-thumb:focus-visible .take-play{opacity:1}
.tag{display:inline-block;margin-inline-start:8px;padding:1px 8px;border-radius:999px;border:1px solid var(--brass);color:var(--brass);font-size:12.5px;vertical-align:2px}
.take-prog:empty{display:none}

/* ================= editor ================= */
html[dir=rtl] .flip-rtl{transform:scaleX(-1)}
/* camera / mic lists */
.dev-list{display:grid;gap:10px;margin-top:8px}
.dev-row{border:1px solid var(--seam);border-radius:var(--r-in);padding:10px;background:var(--well)}
.dev-head{display:flex;align-items:center;gap:8px}
.dev-head select{flex:1;min-width:0;background:var(--graphite)}
.dev-num{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font:12.5px var(--mono);color:var(--ash)}
.dev-row .icon-btn{padding:5px}
.dev-row .icon-btn .ico{width:16px;height:16px}
.dev-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.dev-opts select{background:var(--graphite);padding:6px 8px;font-size:14.5px}
.dev-row .chk{margin-top:8px;font-size:14.5px}
.dev-row .meter{margin-top:8px}
.dev-note{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.blur-lv{display:block;width:100%;margin-top:8px;background:var(--graphite);padding:6px 8px;font-size:14.5px}
.blur-warn{color:var(--ash);border-inline-start:2px solid var(--brass);padding-inline-start:8px}
.blur-warn.slow{color:var(--brass);font-weight:600}
.ed-blur{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14.5px;color:var(--ash)}
.ed-blur select{flex:1;min-width:0;background:var(--graphite);padding:5px 8px;font-size:14px}
.hint-row button{display:inline-flex;align-items:center;gap:6px}
.hint-row button .ico{width:16px;height:16px}
.ed-cams .chk{margin-top:6px}
.ed-bubmode{margin-top:6px}
.ed-bubmode .fine{margin:6px 0 0}
.ed-cam{margin-top:8px;padding:4px 10px 10px;border:1px solid var(--seam);border-radius:var(--r-in);background:var(--well)}
.ed-cam.sel{border-color:var(--brass)}
.ed-bub .field{margin-top:6px}
.ed-bub-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.ed-bub-row select{flex:1;min-width:0;background:var(--graphite);padding:5px 8px;font-size:14px}
.ed-bub-row .chk{margin-top:0}
.ed-player canvas.sizable,.ed-player canvas.sizing{cursor:nwse-resize}
.ed-sound .field>.field{margin-top:6px}
.ed-music-row{margin-top:6px}
.ed-music-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--ash)}

/* ================= multi-track editor + projects ================= */
.top #btnEditor{display:inline-flex;align-items:center;gap:6px}
.top #btnEditor .ico{width:18px;height:18px}
.proj-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.proj-head h3{margin:0}
.proj-head button{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:14.5px}
.proj-head .ico{width:16px;height:16px}
.projects .fine{margin:4px 0 12px}
.proj-thumb img{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.ed-import-row{margin-top:0}
.ed-import-row button{display:inline-flex;align-items:center;gap:6px}
.ed-assets{display:grid;gap:8px;margin-top:12px}
.ed-asset{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;padding:6px;border:1px solid var(--seam);border-radius:var(--r-in);background:var(--well);cursor:grab}
.ed-asset:hover{border-color:var(--line)}
.ed-asset-th{width:72px;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#000;display:grid;place-items:center;color:var(--muted)}
.ed-asset-th canvas{width:100%;height:100%;display:block}
.ed-asset-th.k-audio{background:#17291f;color:var(--ok)}
.ed-asset-th .ico{width:22px;height:22px}
.ed-asset-body{min-width:0;display:grid;gap:2px}
.ed-asset-name{font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:auto;text-align:start}
.ed-asset-meta{font:12.5px var(--mono);color:var(--muted)}
.ed-asset-btns{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.ed-asset-btns button{padding:3px 10px;font-size:13.5px}
button.icon-x{padding:3px 9px;font-size:15px;line-height:1}
.bk{border:1px solid var(--seam);border-radius:var(--r-in);background:var(--well);padding:10px 12px;margin-top:10px}
.bk-head b{display:block;font-weight:600;font-size:15px}
.bk-head small{display:block;color:var(--muted);font-size:13.5px}
.bk-file{margin-top:6px;font-size:14px;color:var(--ash);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:auto;text-align:start}
.bk-file.none{color:var(--slate)}
.bk .row{margin-top:8px}
.bk .row button{padding:4px 10px;font-size:13.5px}
.bk .chk{font-size:14px;margin-top:8px}
.bk input[type=color]{width:100%;height:34px;padding:2px;background:var(--graphite);border:1px solid var(--seam);border-radius:var(--r-in)}
.bk .two{grid-template-columns:1fr 1fr 1fr;gap:0 8px}
.bk-sfx{display:grid;gap:6px;margin-top:6px}
.bk-sfx-row{display:flex;align-items:center;gap:6px}
.bk-sfx-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--ash)}
.bk-sfx-row button{padding:3px 10px;font-size:13.5px}
.ed-drop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#040404cc;border:3px dashed var(--brass);pointer-events:none;font-size:22px;font-weight:600;color:var(--text)}
/* text clips (editor phase 3) */
#edTextRow textarea{width:100%;min-height:68px;resize:vertical;background:var(--well);border:1px solid var(--seam);border-radius:var(--r-in);padding:8px 10px;color:var(--text);line-height:1.45}
#edTextRow textarea:focus{border-color:var(--edge);outline:none}
#edTextRow input[type=color]{width:100%;height:34px;padding:2px;background:var(--graphite);border:1px solid var(--seam);border-radius:var(--r-in)}
#edTextRow .two{grid-template-columns:1fr 1fr}
.tx-colors [hidden]{display:none}
/* zoom + crop (editor phase 3) */
.ed-zoomblk{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ed-subhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ed-subhead b{font-size:14px;font-weight:600;color:var(--text)}
.ed-subhead button{padding:4px 12px;font-size:13.5px}
.zm-row{border:1px solid var(--seam);border-radius:var(--r-in);padding:8px;margin-bottom:8px;background:var(--well)}
.zm-row.sel{border-color:var(--brass)}
.zm-head{all:unset;cursor:pointer;display:block;width:100%;font-size:13.5px;color:var(--ash);margin-bottom:4px}
.zm-head:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.zm-row.sel .zm-head{color:var(--text)}
.zm-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.zm-btns button{padding:3px 10px;font-size:13px}
.zm-btns .icon-x{margin-inline-start:auto}

/* ================= editor layout (2026-11-12 rework) =================
   desktop: top bar · [media | player | properties] · tools · timeline — one screen, each column scrolls on its own.
   narrow (≤1024px): one column, the page scrolls: player → tools → timeline → properties → media. */
body.ed-open{overflow:hidden}
.editor{position:fixed;inset:0;z-index:20;background:var(--void);display:flex;flex-direction:column;overflow:hidden}
.ed-top{flex:none;display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--graphite);flex-wrap:wrap}
.ed-top #edClose{display:inline-flex;align-items:center;gap:6px}
.ed-top .ed-name{flex:0 1 320px;min-width:120px;background:transparent;border:1px solid transparent;border-radius:var(--r-in);padding:6px 8px;font-weight:600;color:var(--text);direction:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-top .ed-name:hover{border-color:var(--seam)}
.ed-top .ed-name:focus{border-color:var(--edge);outline:none;background:var(--well)}
.ed-saved{margin:0;font-size:13.5px}
.ed-sel{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.ed-sel select{width:auto;padding:5px 8px;font-size:14.5px}
.ed-work{--binw0:260px;--sidew0:320px;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:var(--binw,var(--binw0)) minmax(0,1fr) var(--sidew,var(--sidew0))}
.ed-col{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--graphite)}
/* drag the inner edge of the media / properties column to make it wider or narrower (double-click = back to normal) */
.ed-col-grip{position:absolute;top:0;bottom:0;width:10px;z-index:3;cursor:ew-resize;touch-action:none}
.ed-bin>.ed-col-grip{inset-inline-end:-5px}
.ed-side>.ed-col-grip{inset-inline-start:-5px}
.ed-col-grip:hover,.ed-col-grip.on{background:linear-gradient(90deg,transparent 4px,var(--brass) 4px,var(--brass) 6px,transparent 6px)}
.ed-bin{border-inline-end:1px solid var(--line)}
.ed-side{border-inline-start:1px solid var(--line)}
.ed-tabs{display:flex;flex:none;margin:12px 12px 0}
.ed-tabs .tab{flex:1;justify-content:center;padding-inline:6px}
.ed-col-body{flex:1;min-height:0;overflow:auto;padding:12px 14px 20px}
.ed-col-body h3{margin:2px 0 6px;font-size:16px}
.ed-side .seg.pills .tab{padding:4px 10px;font-size:14px}
.ed-stage{min-width:0;min-height:0;display:flex;flex-direction:column;padding:14px 16px 10px}
.ed-stage-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ed-player{position:relative;flex:none;width:320px;height:180px;background:#000;border:1px solid var(--seam);border-radius:var(--r-in);overflow:hidden}
.ed-player canvas{display:block;width:100%;height:100%;touch-action:none}
.ed-player canvas.grab{cursor:grab}.ed-player canvas.grabbing{cursor:grabbing}
.ed-player canvas.sizable,.ed-player canvas.sizing{cursor:nwse-resize}
.ed-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;padding:24px;text-align:center;color:var(--muted);font-size:15px;pointer-events:none}
.ed-empty::before{content:"";width:46px;height:46px;border:1.5px dashed var(--line);border-radius:10px}
.ed-transport{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding-top:10px}
.ed-transport-mid{display:flex;align-items:center;gap:6px}
.ed-transport .icon-btn{display:inline-grid;place-items:center}
.ed-playbtn{width:44px;height:44px;padding:0;border-radius:50%}
.ed-time{font:14px var(--mono);color:var(--ash);font-variant-numeric:tabular-nums;direction:ltr;white-space:nowrap}
.ed-size{justify-self:end;font-size:13px;color:var(--muted)}
.ed-tools{flex:none;display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--line);background:var(--graphite);flex-wrap:wrap}
.ed-tools button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:14px}
.ed-zoom{display:flex;align-items:center;gap:4px;color:var(--muted)}
.ed-zoom input{width:130px}
.ed-zoom .icon-btn{padding:5px}
.ed-tl{flex:none;position:relative;height:var(--tlh,240px);display:flex;flex-direction:column;background:var(--well);border-top:1px solid var(--line)}
.ed-tl-grip{position:absolute;left:0;right:0;top:-5px;height:10px;cursor:ns-resize;z-index:2;touch-action:none}
.ed-tl-grip:hover,.ed-tl-grip.on{background:linear-gradient(transparent 4px,var(--brass) 4px,var(--brass) 6px,transparent 6px)}
.ed-tl-view{position:relative;flex:1;min-height:0}
.ed-tl canvas{position:absolute;left:0;top:0;pointer-events:none}
/* no native scroll bars: they appeared and disappeared as the canvas resized (the shaking) — wheel / drag / the bar below instead */
.ed-tl-scroll{position:absolute;inset:0;overflow:auto;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior:contain}
.ed-tl-scroll::-webkit-scrollbar{display:none}
.ed-hbar{flex:none;position:relative;height:10px;margin:2px 10px 6px 112px;border-radius:5px;background:var(--graphite);border:1px solid var(--seam);cursor:pointer;touch-action:none}
.ed-hbar[hidden]{display:none}
.ed-hbar i{position:absolute;top:1px;bottom:1px;left:0;width:40px;border-radius:4px;background:var(--line);cursor:grab}
.ed-hbar:hover i,.ed-hbar.drag i{background:var(--ash)}
.ed-prog{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--graphite);border-top:1px solid var(--line)}
.ed-prog-bar{flex:1;height:8px;border-radius:4px;background:var(--well);border:1px solid var(--seam);overflow:hidden}
.ed-prog-bar i{display:block;height:100%;width:0;background:var(--brass);transition:width .2s}
.ed-prog span{font:14px var(--mono);color:var(--ash);min-width:14ch}
.ed-link{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 6px;padding:8px 10px;border:1px dashed var(--brass);border-radius:var(--r-in);font-size:13.5px;color:var(--ash)}
.ed-link .ico{width:16px;height:16px;color:var(--brass);flex:none}
.ed-link span{flex:1;min-width:140px}
.ed-link button{padding:3px 10px;font-size:13px}
.ed-howto{margin-top:18px;font-size:13.5px}
.ed-sound .field>.field{margin-top:6px}
.ed-media{position:fixed;left:-10px;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
.ed-media video,.ed-media audio{width:2px;height:2px}
@media (max-width:1280px){.ed-work{--binw0:220px;--sidew0:290px}}
@media (max-width:1024px){
  .editor{overflow:auto}
  .ed-work{display:contents}
  .ed-col-grip{display:none}
  .ed-top{order:0}.ed-stage{order:1}.ed-tools{order:2}.ed-tl{order:3}.ed-side{order:4}.ed-bin{order:5}.ed-prog{order:6;position:sticky;bottom:0}
  .editor>*,.ed-work>*{flex:none}
  .ed-stage{flex:none;padding:12px 12px 6px}
  .ed-stage-area{flex:none;height:min(56vh,calc((100vw - 26px) / var(--ar,1.7778)))}
  .ed-col{border:none;border-top:1px solid var(--line)}
  .ed-col-body{overflow:visible}
  .ed-tl{height:var(--tlh,220px)}
  .ed-hbar{margin-left:112px}
}
@media (max-width:760px){.ed-top .ed-name{order:9;flex-basis:100%}.ed-sel span{display:none}.bk .two{grid-template-columns:1fr}.ed-size{display:none}.ed-zoom input{width:90px}}
@media (max-width:520px){.ed-tools{padding-inline:10px;gap:6px}.ed-tools button>span{display:none}.ed-tools button{padding-inline:9px}.ed-fit{display:none}.ed-zoom input{width:64px}.ed-transport{grid-template-columns:auto 1fr}.ed-transport-mid{justify-self:end}}
/* download choices under a recording card */
.dl-panel{margin-top:10px;padding:10px 12px;border:1px solid var(--seam);border-radius:var(--r-in);background:var(--well)}
.dl-panel>.fine{margin:0 0 8px;font-size:13.5px}
.dl-row{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:14.5px;color:var(--ash)}
.dl-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-row select{flex:none;width:auto;min-width:9.5em;background:var(--graphite);padding:5px 8px;font-size:14px}
.dl-warn{color:var(--brass)!important;margin:8px 0 0!important}
.dl-warn[hidden]{display:none}
/* auto subtitles (phase 4) */
.sb-prog{height:6px;border-radius:3px;background:var(--well);border:1px solid var(--seam);overflow:hidden;margin-top:10px}
.sb-prog i{display:block;height:100%;width:0;background:var(--brass);transition:width .2s}
.sb-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px}
.sb-item{display:flex;gap:8px;align-items:flex-start;padding:4px;border-radius:var(--r-in);border:1px solid transparent}
.sb-item.on{border-color:var(--brass);background:var(--well)}
.sb-time{flex:none;font-family:var(--mono);font-size:12px;color:var(--brass);background:none;border:0;padding:7px 2px;cursor:pointer;direction:ltr}
.sb-time:hover{text-decoration:underline}
.sb-item textarea{flex:1;min-width:0;resize:none;overflow:hidden;background:var(--well);border:1px solid var(--seam);border-radius:var(--r-in);padding:6px 8px;color:var(--text);line-height:1.45}
.sb-item textarea:focus{border-color:var(--edge);outline:none}
.sb-files{flex-wrap:wrap;gap:6px}
/* folder gate: nothing works before the work has a home */
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:var(--void);overflow:auto}
.gate[hidden]{display:none}
.gate-card{max-width:520px;width:100%;background:var(--graphite);border:1px solid var(--seam);border-radius:var(--r-card);padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.gate-card img{border-radius:12px}
.gate-card h2{margin:4px 0 0;font-size:22px}
.gate-card p{margin:0;line-height:1.55}
.gate-tree{margin:0;padding:10px 14px;list-style:none;background:var(--well);border:1px solid var(--seam);border-radius:var(--r-in);display:flex;flex-direction:column;gap:4px}
.gate-tree b{font-family:var(--mono);color:var(--brass);font-weight:500}
.gate-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.bad-text{color:var(--bad)}
.bad-text:empty{display:none}