/* Booth Crew Academy — shared styles */
/* Layout: the home screen is a mixing console (one channel strip per module, fader height = progress); each strip opens focused one-card-at-a-time lessons */
:root{
  color-scheme: dark;
  --bg:#12161d; --panel:#1b212b; --panel-2:#232b37; --line:#333d4c; --fg:#e9edf3; --muted:#9aa6b8; --knob:#3c4759;
  --foh:#f0a83a; --stream:#3cc3dc; --pp:#ee6b8f; --ptz:#72d17d;
  --good:#5ad08a; --bad:#ff6b5e; --warn:#f5c04a; --on-accent:#14181f;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --mc: var(--foh);
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  color-scheme: light;
  --bg:#eceff3; --panel:#ffffff; --panel-2:#f4f6f9; --line:#cdd4de; --fg:#18202b; --muted:#556175; --knob:#c6ced9;
  --foh:#b06a05; --stream:#0b7a91; --pp:#c3335d; --ptz:#2b8739;
  --good:#1f8a4c; --bad:#c7362b; --warn:#a07000; --on-accent:#ffffff;
}}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#eceff3; --panel:#ffffff; --panel-2:#f4f6f9; --line:#cdd4de; --fg:#18202b; --muted:#556175; --knob:#c6ced9;
  --foh:#b06a05; --stream:#0b7a91; --pp:#c3335d; --ptz:#2b8739;
  --good:#1f8a4c; --bad:#c7362b; --warn:#a07000; --on-accent:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--mc);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.mono{font-family:var(--f-mono)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;flex-wrap:wrap}
.brand{background:none;border:0;padding:0;display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.brand .led{width:10px;height:10px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 25%,transparent)}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tbtn{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;line-height:1.2}
.tbtn .dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.tbtn[aria-pressed="true"] .dot{background:var(--good);box-shadow:0 0 6px var(--good)}
.tbtn[disabled]{opacity:.5;cursor:not-allowed}
.bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px;width:14px}
.bars i{display:block;width:3px;background:var(--muted);height:3px;border-radius:1px}
body.speaking .bars i{background:var(--good);animation:bar .7s ease-in-out infinite}
body.speaking .bars i:nth-child(2){animation-delay:.15s}
body.speaking .bars i:nth-child(3){animation-delay:.3s}
@keyframes bar{0%,100%{height:3px}50%{height:12px}}
.settings{position:relative}
[hidden]{display:none!important}
.spanel{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:14px;box-shadow:0 12px 32px rgba(0,0,0,.25);z-index:40}
.spanel label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.spanel select,.spanel input[type=range]{width:100%;accent-color:var(--foh)}
.spanel select{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px}
.note{font-size:13px;color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:10px 16px;font-weight:700;min-height:44px}
.btn:hover{border-color:var(--mc)}
.btn.primary{background:var(--mc);border-color:var(--mc);color:var(--on-accent)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--bad);color:var(--bad);background:transparent}
.link{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:14px}

/* hero + console */
.hero{padding-block:36px 24px;display:grid;gap:14px}
.kicker{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(52px,10vw,112px);line-height:.88;text-transform:uppercase;letter-spacing:.01em}
.hero p{max-width:62ch;font-size:18px;color:var(--muted)}
.hero .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.console{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.strip{display:flex;flex-direction:column;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:left;min-width:0;transition:border-color .15s,transform .15s}
.strip:hover{border-color:var(--mc);transform:translateY(-2px)}
.scribble{display:flex;justify-content:space-between;gap:6px;background:var(--mc);color:var(--on-accent);font-family:var(--f-mono);font-weight:600;font-size:13px;letter-spacing:.06em;padding:6px 8px;border-radius:6px}
.sname{font-family:var(--f-display);font-weight:800;font-size:clamp(19px,1.85vw,26px);line-height:.95;text-transform:uppercase;min-height:1.9em;overflow-wrap:break-word}
.gear{font-family:var(--f-mono);font-size:12px;color:var(--muted);min-height:2.6em}
.fader{position:relative;height:150px;margin-inline:auto;width:100%;max-width:140px}
.fader .slot{position:absolute;left:50%;top:0;bottom:0;width:6px;transform:translateX(-50%);background:var(--bg);border:1px solid var(--line);border-radius:3px}
.fader .lit{position:absolute;left:50%;bottom:0;width:6px;transform:translateX(-50%);background:var(--mc);border-radius:3px;height:calc((100% - 24px) * var(--p) + 12px)}
.fader .tick{position:absolute;left:0;width:calc(50% - 10px);display:flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:10px;color:var(--muted);transform:translateY(50%)}
.fader .tick::after{content:"";flex:1;height:1px;background:var(--line)}
.fader .tick.done{color:var(--mc)}
.fader .cap{position:absolute;left:50%;transform:translateX(-50%);bottom:calc((100% - 24px) * var(--p));width:46px;height:24px;border-radius:4px;background:linear-gradient(var(--knob),var(--panel));border:1px solid var(--line);box-shadow:0 3px 6px rgba(0,0,0,.25)}
.fader .cap::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:var(--mc)}
.readout{margin-top:auto;font-family:var(--f-mono);font-size:13px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.good{border-color:var(--good);color:var(--good)}
.chip.mc{border-color:var(--mc);color:var(--mc)}
.strip.master .scribble{background:var(--fg);color:var(--bg)}
.howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-block:28px 8px}
.howto div{display:grid;gap:4px}
.howto b{font-family:var(--f-display);font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.howto span{color:var(--muted);font-size:15px}
.foot{padding-block:28px 40px;color:var(--muted);font-size:13px}

/* module view */
.back{display:inline-flex;align-items:center;gap:6px;margin-top:20px}
.mhead{display:grid;gap:10px;padding-block:18px 22px}
.mhead h1{font-family:var(--f-display);font-weight:800;font-size:clamp(44px,7vw,76px);line-height:.92;text-transform:uppercase}
.mhead p{max-width:64ch;font-size:17px;color:var(--muted)}
.mhead .scribble{justify-self:start;gap:14px}
.seg{display:flex;gap:4px;max-width:420px}
.seg i{flex:1;height:8px;border-radius:2px;background:var(--line)}
.seg i.on{background:var(--mc)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding-bottom:40px}
.lbox{display:grid;gap:8px;align-content:start;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0;transition:border-color .15s,transform .15s}
.lbox:not([aria-disabled="true"]):hover{border-color:var(--mc);transform:translateY(-2px)}
.lbox .num{font-family:var(--f-mono);color:var(--mc);font-weight:600;font-size:13px;letter-spacing:.08em}
.lbox .lt{font-weight:700;font-size:19px;line-height:1.25}
.lbox .lg{color:var(--muted);font-size:14px}
.lbox .lrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.lbox[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.lbox.quiz{border-style:dashed;border-color:var(--mc)}

/* lesson view */
.ltop{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;padding-block:18px 14px}
.ltop .lt{display:grid;gap:2px;min-width:0}
.ltop .lt b{font-family:var(--f-display);font-size:26px;text-transform:uppercase;line-height:1}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots i{width:26px;height:7px;border-radius:4px;background:var(--line)}
.dots i.ok{background:var(--mc);opacity:.55}
.dots i.cur{background:var(--mc);opacity:1}
.cardp{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,4vw,36px);display:grid;gap:18px;min-height:340px;align-content:start}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cardp h2{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,5.4vw,58px);line-height:.95;text-transform:uppercase}
.lead{font-size:18px;max-width:64ch}
.lnav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-block:16px 40px}
.lnav .r{display:flex;gap:10px;flex-wrap:wrap}
.hint{font-size:14px;color:var(--muted);align-self:center}

/* hotspots */
.hot{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.hot.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.hot.flow .hbox{flex:1 1 130px}
.hot.flow .arrow{align-self:center;color:var(--muted);font-family:var(--f-mono)}
.hbox{position:relative;display:grid;gap:4px;align-content:start;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 30px 12px 12px;min-width:0;transition:border-color .15s,background .15s}
.hbox:hover{border-color:var(--mc)}
.hbox .hk{font-weight:700;font-size:16px;line-height:1.25}
.hbox .hs{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.hbox::after{content:"";position:absolute;top:12px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--mc);animation:pulse 1.6s ease-in-out infinite}
.hbox.seen::after{content:"✓";animation:none;background:none;width:auto;height:auto;top:8px;color:var(--mc);font-weight:700;font-size:15px}
.hbox.active{border-color:var(--mc);background:color-mix(in srgb,var(--mc) 12%,var(--panel-2))}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.hdetail{background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:14px 16px;min-height:84px;display:grid;gap:6px}
.hdetail b{font-size:17px}
.hcount{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.scrollx{overflow-x:auto;padding-bottom:4px}
.hot.pp{min-width:560px;grid-template-columns:1.1fr 2fr 1.3fr;grid-template-areas:"tool tool tool" "lib slides prev" "lib slides clear" "lib media media"}
.hot.pp .hbox{min-height:70px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px}
.thumbs i{display:block;aspect-ratio:16/9;border-radius:3px;background:var(--bg);border-top:4px solid var(--g)}
.hot.ctl{min-width:500px;grid-template-columns:1fr 1fr 1.2fr;grid-template-areas:"lcd lcd lr" "cam speed ud" "preset focus twist"}
.hot.ctl .hbox[data-a="lcd"]{font-family:var(--f-mono)}

/* checks + quiz */
.q{font-size:20px;font-weight:700;max-width:60ch}
.opts{display:grid;gap:8px;max-width:720px}
.opt{text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px;display:flex;gap:12px;align-items:center}
.opt:hover{border-color:var(--mc)}
.opt .ol{font-family:var(--f-mono);font-weight:600;color:var(--muted);min-width:1.2em}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 16%,var(--panel-2))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--panel-2))}
.fb{border-radius:10px;padding:12px 14px;border:1px solid var(--line);background:var(--bg);max-width:720px}
.fb.good{border-color:var(--good)}
.fb.bad{border-color:var(--bad)}
.fb b{display:block}
.score{font-family:var(--f-display);font-weight:800;font-size:clamp(64px,12vw,120px);line-height:.9}

/* gain sim */
.gsim{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.mwrap{display:flex;gap:8px;align-items:stretch}
.mscale{position:relative;width:30px;height:230px;font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.mscale span{position:absolute;right:0;transform:translateY(50%)}
.meter{position:relative;width:34px;height:230px;background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mzone{position:absolute;left:0;right:0;bottom:66.67%;height:10%;background:var(--good);opacity:.22}
.mbar{position:absolute;left:5px;right:5px;bottom:0;height:0;background:linear-gradient(to top,var(--good) 0 160px,var(--warn) 160px 205px,var(--bad) 205px);background-size:100% 230px;background-position:bottom;border-radius:2px}
.mpeak{position:absolute;left:3px;right:3px;height:2px;background:var(--fg);bottom:0}
.clip{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);background:var(--bg);margin:0 auto 6px}
.clip.on{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.gctl{display:grid;gap:14px;min-width:0}
.gval{font-family:var(--f-mono);font-size:30px;font-weight:600}
.gctl input[type=range]{width:100%;accent-color:var(--mc);height:32px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* frame sim */
.fsim{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px;align-items:start}
.vf{position:relative;aspect-ratio:16/9;width:100%;max-width:100%;border-radius:8px;overflow:hidden;background:#0b0d11;border:1px solid var(--line)}
.vf svg{display:block;width:100%;height:100%}
.thirds{position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.45) calc(33.333% - .5px) calc(33.333% + .5px),transparent calc(33.333% + .5px) calc(66.666% - .5px),rgba(255,255,255,.45) calc(66.666% - .5px) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
 linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.45) calc(33.333% - .5px) calc(33.333% + .5px),transparent calc(33.333% + .5px) calc(66.666% - .5px),rgba(255,255,255,.45) calc(66.666% - .5px) calc(66.666% + .5px),transparent calc(66.666% + .5px))}
.tally{position:absolute;top:8px;left:8px;background:#d33a2f;color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;padding:2px 6px;border-radius:3px}
.vro{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 6px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#e8edf4;font-family:var(--f-mono);font-size:11px;display:flex;gap:12px;flex-wrap:wrap}
.pad{display:grid;gap:12px;justify-items:center}
.joy{position:relative;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--panel-2) 55%,var(--bg));border:1px solid var(--line);touch-action:none;user-select:none}
.joy::before,.joy::after{content:"";position:absolute;background:var(--line)}
.joy::before{left:50%;top:14px;bottom:14px;width:1px}
.joy::after{top:50%;left:14px;right:14px;height:1px}
.knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--panel),var(--knob));border:2px solid var(--mc);box-shadow:0 4px 10px rgba(0,0,0,.3);z-index:1}
.zrow{display:flex;gap:8px;width:100%}
.zrow .btn{flex:1;padding:8px 6px;font-size:14px}
.flabel{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* certificate */
.cert{border:1px solid var(--line);outline:1px solid var(--line);outline-offset:6px;border-radius:14px;background:var(--panel);padding:clamp(20px,5vw,48px);display:grid;gap:18px;justify-items:center;text-align:center;margin-block:28px}
.cert h2{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,7vw,72px);text-transform:uppercase;line-height:.92}
.cert .nm{font-family:var(--f-display);font-weight:600;font-size:clamp(30px,5vw,48px);border-bottom:2px solid var(--line);padding-inline:20px;min-width:min(420px,80%)}
.seals{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.seals span{display:inline-flex;gap:6px;align-items:center;font-family:var(--f-mono);font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--mc);color:var(--mc)}
.field{display:grid;gap:6px;max-width:360px;width:100%;text-align:left}
.field input{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}


/* animated demos */
.chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pnode{display:grid;justify-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 8px;min-width:76px;flex:1 1 76px}
.pnode b{font-size:13px}
.pnode:disabled{cursor:default;opacity:1}
.pnode.guess{cursor:pointer;border-style:dashed}
.pnode.guess:hover{border-color:var(--mc)}
.pm{width:10px;height:30px;border-radius:3px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:flex-end;overflow:hidden}
.pm i{display:block;width:100%;height:0;background:var(--mc)}
.pnode.lit{border-color:var(--mc)}
.pnode.lit .pm i{height:70%;animation:lvl .45s ease-in-out infinite alternate}
.pnode.fault{border-color:var(--bad);border-style:solid;background:color-mix(in srgb,var(--bad) 12%,var(--panel-2))}
@keyframes lvl{from{height:35%}to{height:95%}}
.pw{flex:0 0 14px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.pw i{display:block;height:100%;width:0;background:var(--mc);transition:width .25s linear}
.pw.lit i{width:100%}
.arow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.canvasbox{position:relative;width:100%;border-radius:10px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.canvasbox canvas{display:block;width:100%}
.fbgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
.fbctl{display:grid;gap:12px}
.fbctl input[type=range]{width:100%;accent-color:var(--mc)}
.tog{justify-content:flex-start;text-align:left}
.tog[aria-pressed="true"]{border-color:var(--mc);background:color-mix(in srgb,var(--mc) 14%,var(--panel-2))}
.stat{font-family:var(--f-mono);font-size:13px}
.lamps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lamp{display:flex;gap:10px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:15px}
.lamp i{width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--line);flex:none}
.lamp.on i{background:var(--warn);box-shadow:0 0 14px var(--warn)}
.lamp.on.sync i{background:var(--good);box-shadow:0 0 14px var(--good)}
.hands{position:relative;height:74px;border-radius:10px;background:#141a24;border:1px solid var(--line);overflow:hidden}
.hands i{position:absolute;top:16px;width:26px;height:44px;border-radius:12px;background:#c99671}
.hands .hl{left:calc(50% - 30px)}
.hands .hr{right:calc(50% - 30px)}
.hands span{position:absolute;left:8px;top:6px;font-family:var(--f-mono);font-size:10px;color:#aab4c4;letter-spacing:.1em}
.lstage{position:relative;width:100%;max-width:620px;aspect-ratio:16/9;margin-inline:auto;margin-block:18px 26px;perspective:1100px}
.lstack{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.lstack.exploded{transform:scale(.7) rotateX(56deg) rotateZ(-28deg)}
.ly{position:absolute;inset:0;border-radius:6px;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .3s}
.lstack.exploded .ly{outline:1px solid rgba(255,255,255,.45);background-color:rgba(160,180,220,.07)}
.lstack.exploded .ly:nth-child(2){transform:translateZ(60px)}
.lstack.exploded .ly:nth-child(3){transform:translateZ(120px)}
.lstack.exploded .ly:nth-child(4){transform:translateZ(180px)}
.ly.off{opacity:.07}
.ly-media{background:radial-gradient(circle at 30% 30%,#5d4bb0,transparent 55%),radial-gradient(circle at 75% 70%,#1e7c8f,transparent 55%),#141a33}
.ly-slide{display:grid;place-items:center;text-align:center;color:#fff;font-weight:700;font-size:clamp(13px,3vw,24px);line-height:1.3;text-shadow:0 2px 8px rgba(0,0,0,.6);padding:10%}
.ly-props b{position:absolute;top:6%;right:4%;font-family:var(--f-mono);font-size:clamp(9px,1.6vw,13px);color:#fff;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:4px}
.ly-msg>span:first-child{position:absolute;left:0;right:0;bottom:0;background:#c43a3a;color:#fff;font-size:clamp(10px,1.8vw,14px);padding:6px 12px;border-radius:0 0 6px 6px}
.lytag{position:absolute;left:6px;top:6px;font-family:var(--f-mono);font-size:11px;color:#fff;background:rgba(0,0,0,.6);padding:2px 6px;border-radius:3px;opacity:0;transition:opacity .4s}
.lstack.exploded .lytag{opacity:1}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips .btn{min-height:38px;padding:6px 12px;font-size:14px}
.easegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.easegrid figure{margin:0;display:grid;gap:8px;min-width:0}
.easegrid figcaption{font-family:var(--f-mono);font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
/* videos */
.vids{display:grid;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(16px,3vw,24px);margin-bottom:40px}
.vids h3{font-family:var(--f-display);font-size:26px;text-transform:uppercase;line-height:1}
.vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.vlink{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0}
.vlink:hover{border-color:var(--mc)}
.vplay{flex:none;width:40px;height:28px;border-radius:7px;background:#e3302a;display:grid;place-items:center}
.vplay.doc{background:var(--mc)}
.vplay::after{content:"";border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.vlink>span:last-child{display:grid;gap:2px;min-width:0}
.vlink b{font-size:15px;line-height:1.3}
.vlink small{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.clip{margin:0}
.clip video{width:100%;max-width:100%;border-radius:10px;background:#000;display:block}
.clip figcaption{font-size:14px;color:var(--muted);margin-top:6px}
@media (max-width:860px){
  .console{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip.master{grid-column:1/-1}
  .strip.master .fader{display:none}
  .howto{grid-template-columns:1fr}
  .fsim{grid-template-columns:1fr}
  .fbgrid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .gsim{grid-template-columns:1fr;justify-items:center}
  .gctl{width:100%}
  .brand{font-size:19px}
  .tbtn .lbl{display:none}
  .easegrid,.lamps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== shared: account, toast, forms ===== */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;max-width:min(520px,calc(100vw - 32px));background:var(--fg);color:var(--bg);padding:12px 16px;border-radius:10px;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast[data-kind="good"]{background:var(--good);color:var(--on-accent)}
.acct{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.acct b{font-size:16px;color:var(--fg)}
.acct .chip{justify-self:start}
a.tbtn,a.btn{text-decoration:none;color:inherit}
.field input,.field select,.inp{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:44px;width:100%;color:var(--fg)}
.field{display:grid;gap:6px}
.field>span{font-size:14px;color:var(--muted)}
.err{color:var(--bad);font-size:15px}

/* ===== sign-in pages ===== */
.authwrap{min-height:calc(100vh - 140px);display:grid;place-items:center;padding-block:32px}
.authcard{width:min(440px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,5vw,32px);display:grid;gap:16px}
.authcard h1{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,8vw,56px);line-height:.9;text-transform:uppercase}
.authcard form{display:grid;gap:14px}
.authcard .btn.primary{width:100%;--mc:var(--foh)}
.strips{display:flex;gap:6px}
.strips i{flex:1;height:6px;border-radius:3px}

/* ===== team dashboard ===== */
.dhead{display:grid;gap:8px;padding-block:28px 18px}
.dhead h1{font-family:var(--f-display);font-weight:800;font-size:clamp(44px,7vw,72px);line-height:.92;text-transform:uppercase}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:2px}
.tile b{font-family:var(--f-display);font-weight:800;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.tile span{font-size:14px;color:var(--muted)}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:10px 12px;font-weight:700;color:var(--muted);margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--foh)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .inp{flex:1 1 220px;width:auto}
.toolbar select.inp{flex:0 1 200px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,3vw,22px);display:grid;gap:14px;margin-bottom:16px}
.panel h2{font-family:var(--f-display);font-size:28px;text-transform:uppercase;line-height:1}
.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.linkbox{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px 12px}
.linkbox code{font-family:var(--f-mono);font-size:13px;word-break:break-all;flex:1 1 260px;min-width:0;user-select:all}
.people{display:grid;gap:10px;padding-bottom:40px}
.person{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) auto;gap:14px 18px;align-items:center}
.person.disabled{opacity:.6}
.who{display:grid;gap:3px;min-width:0}
.who b{font-size:17px;overflow-wrap:anywhere}
.who small{font-family:var(--f-mono);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.who .chips{margin-top:4px;gap:6px}
.meters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mm{display:grid;gap:5px;min-width:0}
.mm .lab{display:flex;justify-content:space-between;gap:4px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.mm .lab b{color:var(--mc);font-weight:600}
.mm .bar{height:8px;border-radius:4px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.mm .bar i{display:block;height:100%;background:var(--mc)}
.pact{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pact .btn{min-height:38px;padding:6px 12px;font-size:14px}
.pmore{grid-column:1/-1;display:grid;gap:12px;border-top:1px dashed var(--line);padding-top:12px}
.pmore .formrow{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.chip.bad{border-color:var(--bad);color:var(--bad)}
.chip.warn{border-color:var(--warn);color:var(--warn)}
.empty{padding:28px;text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--line);border-radius:12px}
.crewlist,.cliplist{display:grid;gap:8px}
.crewrow,.cliprow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.crewrow .inp{flex:1 1 200px;width:auto}
.cliprow .ct{flex:1 1 220px;min-width:0;display:grid;gap:2px}
.cliprow .ct small{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.prog{height:8px;border-radius:4px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--foh);transition:width .2s}
@media (max-width:860px){
  .person{grid-template-columns:1fr}
  .pact{justify-content:flex-start}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){ .meters{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* narrator picker */
.segs{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.segs button{border:0;background:transparent;border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;color:var(--muted);min-height:34px}
.segs button[aria-checked="true"]{background:var(--fg);color:var(--bg)}
.segs button:disabled{opacity:.4;cursor:not-allowed}
.narrpick{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.spanel .segs{display:flex}
.spanel .segs button{flex:1}

/* module icons */
.sicon{display:block;color:var(--mc);height:56px}
.sicon svg{display:block;width:100%;max-width:150px;height:100%}
.strip.master .sicon{color:var(--warn)}
.sicon.big{height:92px}
.sicon.big svg{max-width:184px}

/* team dashboard: console practice */
.mcol{display:grid;gap:10px;min-width:0}
.prac{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.prac .plab{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--muted);margin-right:2px}
.prac .chip{font-size:11px}

/* readiness path + sign-off */
.chip.lvl{font-weight:600}
.chip.lvl1{border-color:var(--stream);color:var(--stream)}
.chip.lvl2{border-color:var(--good);color:var(--good)}
.chip.lvl3{border-color:var(--foh);color:var(--foh)}
.so{display:grid;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.soh{margin:0;font-size:15px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.soi{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.soi input{width:20px;height:20px;margin-top:1px;accent-color:var(--good);flex:none}
.soi span{display:grid;gap:2px}
.soi small{color:var(--muted);font-size:12px}
.so textarea{resize:vertical}
.pathcard{display:grid;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;max-width:760px}
.psteps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.psteps i{width:18px;height:2px;background:var(--line)}
.pstep{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pstep.on{border-color:var(--good);color:var(--good)}
.pstep.cur{background:var(--good);color:var(--on-accent)}

/* practice and booth tools on the home screen */
.hub{display:grid;gap:10px;padding-block:22px 18px}
.hubh{font-family:var(--f-display);font-size:26px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.hubg{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.hubt{display:grid;gap:4px;align-content:start;text-align:left;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--mc);border-radius:12px;padding:12px 14px;font:inherit}
a.hubt:hover,button.hubt:hover{border-color:var(--mc)}
.hubt b{font-size:17px}
.hubt span{font-size:14px;color:var(--muted)}
.hubt .chip{justify-self:start;margin-top:4px}
.hubt.rv{--mc:var(--warn)}
.hubt.rv.due{background:color-mix(in srgb,var(--warn) 12%,var(--panel));cursor:pointer}
.hubt.rv.due .chip{border-color:var(--warn);color:var(--fg)}
/* shared page intro for the practice and tool pages */
.pg-intro{display:grid;gap:8px;padding-block:24px 14px}
.pg-intro h1{font-family:var(--f-display);font-weight:800;font-size:clamp(44px,7vw,72px);line-height:.92;text-transform:uppercase}
.pg-intro p{max-width:72ch;color:var(--muted)}
.segs button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.hpv{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.hpv input{width:140px;accent-color:var(--foh)}
.flash{animation:flash 1.6s ease-out 2}
@keyframes flash{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--foh) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
/* weekly drill message */
.drill{display:grid;gap:12px;max-width:760px;padding-bottom:40px}
.drow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.drow .sp{flex:1}
.drill textarea{font:inherit;line-height:1.45;resize:vertical;min-height:220px}