/* The first run (studio/firstrun.js): Home in setup mode, the recorder, the twin's progress, Read my website and the
   team's made-by-itself twin box. Tokens and parts from studio/ds.css only (DESIGN.md). */

/* ---------- Home in setup mode ---------- */
.fr-head .hgreet{margin-top:10px}
.fr-lead{margin:10px 0 0;font-size:var(--fs-lg);color:var(--c-text-2);max-width:620px}
.fr-hero{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-8);padding:var(--sp-8);margin-top:var(--sp-5);position:relative;overflow:hidden}
.fr-hero.solo{grid-template-columns:minmax(0,1fr)}
.fr-hero::after{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c-accent) 38%,transparent),transparent);pointer-events:none}
.fr-hero>*{position:relative;z-index:1}
.fr-ht{font-family:var(--wide);font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(30px,4.4vw,52px);color:var(--c-on-dark);margin:var(--sp-3) 0 0;max-width:640px}
.fr-hx{margin:var(--sp-4) 0 0;font-size:var(--fs-lg);line-height:1.5;color:var(--c-on-dark-2);max-width:560px}
.fr-hero .sx-ctas{margin-top:var(--sp-6)}
.fr-cta{min-height:var(--ctl-lg);padding:0 30px;font-size:var(--fs-lg);gap:10px}
.fr-cta svg{width:20px;height:20px}
.fr-hm{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:var(--sp-4) 0 0;font-size:var(--fs-xs);color:var(--c-on-dark-2)}
.fr-hm svg{width:15px;height:15px;opacity:.8}

/* the phone with the words on it (the record step) */
.fr-phone{width:190px;aspect-ratio:9/17;border-radius:var(--r-2xl);background:var(--c-dark-2);box-shadow:0 0 0 6px var(--c-dark-line),var(--sh-2);padding:var(--sp-3);display:flex;transform:rotate(3deg)}
.fr-ph-in{position:relative;flex:1;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--c-strong),var(--c-dark-2));overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:var(--sp-4) var(--sp-3)}
.fr-ph-dot{position:absolute;top:8px;left:50%;width:36px;height:6px;border-radius:var(--r-pill);background:var(--c-dark-line);transform:translateX(-50%)}
.fr-ph-in p{margin:0;font-weight:700;font-size:var(--fs-sm);line-height:1.45;color:var(--c-on-dark);text-align:center;mask-image:linear-gradient(180deg,transparent,var(--c-strong) 25%,var(--c-strong) 75%,transparent)}
.fr-ph-rec{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--c-bad);background:var(--c-on-dark);box-shadow:0 0 0 4px var(--c-dark-line)}
.fr-ph-rec svg{width:18px;height:18px;animation:frpulse 1.6s ease-in-out infinite}
.fr-thumb .ds-thumb{width:170px}

/* the path */
.fr-path .ds-bar{margin-bottom:var(--sp-4)}
.fr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--c-border);border-radius:var(--r-xl);background:var(--c-surface);overflow:hidden}
.fr-step{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--c-border)}
.fr-step:first-child{border-top:0}
.fr-step b{display:block;color:var(--c-strong);font-weight:var(--fw-strong)}
.fr-ss{display:block;font-size:var(--fs-xs);color:var(--c-mute);margin-top:2px;line-height:1.45}
.fr-sn{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:var(--fw-heavy);font-size:var(--fs-sm);color:var(--c-mute);background:var(--c-surface-2);box-shadow:inset 0 0 0 1.5px var(--c-border-2)}
.fr-sn svg{width:16px;height:16px}
.fr-sl{flex:none;align-self:center;font-size:var(--fs-2xs);font-weight:var(--fw-strong);text-transform:uppercase;letter-spacing:.12em;color:var(--c-mute)}
.fr-step.done .fr-sn{background:var(--c-mark);color:var(--c-strong);box-shadow:none}
.fr-step.done b{color:var(--c-text-2)}
.fr-step.now{background:var(--c-accent-soft)}
.fr-step.now .fr-sn{background:var(--c-accent);color:var(--c-on-dark);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 18%,transparent)}
.fr-step.now .fr-sl{color:var(--c-accent)}
.fr-step.work .fr-sn{background:var(--c-surface);box-shadow:inset 0 0 0 1.5px var(--c-accent)}
.fr-step.work .fr-sl{color:var(--c-accent)}
.fr-spin{width:14px;height:14px;border-radius:50%;border:2.5px solid var(--c-accent-soft);border-top-color:var(--c-accent);animation:dsspin .9s linear infinite}

/* ---------- the twin's progress ---------- */
.fr-prog{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5);align-items:center;min-width:0}
.fr-side .fr-prog{width:min(420px,38vw)}
.fr-prog.sm{display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-2);align-items:stretch}
.fr-pb{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.fr-pe{color:var(--c-accent)}
.fr-prog.dark .fr-pe{color:var(--c-mark)}
.fr-stn{margin:0;font-weight:var(--fw-heavy);font-size:var(--fs-lg);color:var(--c-strong)}
.fr-prog.sm .fr-stn{font-size:inherit;font-weight:var(--fw-strong);color:var(--c-text-2)}
.fr-prog.dark .fr-stn{color:var(--c-on-dark)}
.fr-pl{margin:0;font-size:var(--fs-xs);color:var(--c-mute);line-height:1.45}
.fr-prog.dark .fr-pl{color:var(--c-on-dark-2)}
.fr-stages{list-style:none;margin:var(--sp-1) 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--c-mute)}
.fr-stages li{display:flex;align-items:center;gap:var(--sp-2)}
.fr-stages .fr-sd{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--c-border-2);flex:none}
.fr-stages .fr-sd svg{width:10px;height:10px}
.fr-stages li.done{color:var(--c-text-2)}
.fr-stages li.done .fr-sd{background:var(--c-mark);color:var(--c-strong);box-shadow:none}
.fr-stages li.now{color:var(--c-strong);font-weight:var(--fw-strong)}
.fr-stages li.now .fr-sd{box-shadow:inset 0 0 0 1.5px var(--c-accent);background:radial-gradient(circle,var(--c-accent) 0 3px,transparent 3.5px)}
.fr-prog.dark .fr-stages{color:var(--c-on-dark-2)}
.fr-prog.dark .fr-stages li.now{color:var(--c-on-dark)}
.fr-prog.dark .fr-stages .fr-sd{box-shadow:inset 0 0 0 1.5px var(--c-dark-line)}
.fr-prog.dark .fr-stages li.now .fr-sd{box-shadow:inset 0 0 0 1.5px var(--c-mark);background:radial-gradient(circle,var(--c-mark) 0 3px,transparent 3.5px)}
/* the face, being read: a light sweeps over it while the twin is made */
.fr-scan{position:relative;width:128px;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 0 0 1.5px var(--c-accent),0 0 0 6px color-mix(in srgb,var(--c-accent) 14%,transparent)}
.fr-prog.dark .fr-scan{box-shadow:0 0 0 1.5px var(--c-mark),0 0 0 6px color-mix(in srgb,var(--c-mark) 16%,transparent)}
.fr-scan .ds-thumb{display:block;width:100%;border-radius:0}
.fr-sweep{position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c-mark) 55%,transparent) 85%,var(--c-mark));opacity:0}
.fr-scan.on .fr-sweep{opacity:.9;animation:frsweep 2.6s cubic-bezier(.45,.05,.55,.95) infinite}
.fr-pct{position:absolute;right:6px;bottom:6px;padding:2px 8px;border-radius:var(--r-pill);background:var(--c-scrim);color:var(--c-on-dark);font-size:var(--fs-2xs);font-weight:var(--fw-heavy)}

/* ---------- the recorder ---------- */
.sheet.fr-rec.ds-wide{--sheet-w:980px}
.fr-rin .ds-sb{gap:var(--sp-5)}
.fr-prep{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp-7);align-items:start}
.fr-sc{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.fr-sc .ds-row{gap:var(--sp-4)}
.fr-script{background:var(--c-strong);color:var(--c-on-dark);border-radius:var(--r-xl);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);max-height:46vh;overflow:auto}
.fr-script p{margin:0;font-size:var(--fs-xl);line-height:1.5;font-weight:var(--fw-medium);letter-spacing:-.005em}
.fr-script .fr-first{padding-left:var(--sp-4);box-shadow:inset 3px 0 0 var(--c-mark);color:var(--c-on-dark)}
.fr-script:focus-visible{outline:none;box-shadow:var(--ring)}
.fr-tipsw{display:flex;flex-direction:column;gap:var(--sp-5)}
.fr-tg .ds-eyebrow{margin-bottom:var(--sp-2)}
.fr-tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.fr-tips li{display:flex;gap:var(--sp-3);align-items:flex-start}
.fr-tips li>span:last-child{display:flex;flex-direction:column;min-width:0}
.fr-tips b{color:var(--c-strong);font-size:var(--fs-sm)}
.fr-tips li>span:last-child>span{font-size:var(--fs-xs);color:var(--c-mute);line-height:1.45}
.fr-ti{flex:none;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--c-accent-soft);color:var(--c-accent)}
.fr-ti svg{width:18px;height:18px}
/* 16px: the sheet focuses this hidden picker first, and phones zoom into a smaller field */
.fr-upl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.fr-upl svg,.fr-recb svg,.fr-stop svg{width:18px;height:18px}
.ds-sf .fr-upl{margin-right:auto}

/* the camera */
.fr-stage{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--c-strong);aspect-ratio:16/9;max-height:62vh;width:100%;margin:0 auto}
.fr-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.fr-guide{position:absolute;left:50%;top:52%;width:min(34%,280px);aspect-ratio:3/4;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb,var(--c-on-dark) 55%,transparent);pointer-events:none;transition:opacity var(--t-mid)}
.fr-stage.live .fr-guide{opacity:0}
.fr-prompt{position:absolute;left:0;right:0;top:0;height:46%;overflow:hidden;padding:0 8%;background:linear-gradient(180deg,var(--c-scrim),color-mix(in srgb,var(--c-strong) 30%,transparent) 70%,transparent);mask-image:linear-gradient(180deg,transparent,var(--c-strong) 18%,var(--c-strong) 72%,transparent);cursor:pointer;opacity:.35;transition:opacity var(--t-mid)}
.fr-stage.live .fr-prompt{opacity:1}
.fr-pin{padding:12% 0 40%}
.fr-pin p{margin:0 0 var(--sp-3);font-size:clamp(20px,2.4vw,28px);line-height:1.4;font-weight:var(--fw-strong);color:var(--c-on-dark);text-align:center;text-shadow:0 1px 8px var(--c-scrim)}
.fr-pin .fr-end{font-size:var(--fs-sm);letter-spacing:.2em;text-transform:uppercase;color:var(--c-mark)}
.fr-hud{position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.fr-time{display:inline-flex;align-items:center;gap:var(--sp-2);padding:6px 12px;border-radius:var(--r-pill);background:var(--c-scrim);color:var(--c-on-dark);font-weight:var(--fw-heavy);font-size:var(--fs-sm)}
.fr-goal{font-weight:var(--fw-medium);color:var(--c-on-dark-2);font-size:var(--fs-xs)}
.fr-dot{width:10px;height:10px;border-radius:50%;background:var(--c-on-dark-2)}
.fr-stage.live .fr-dot{background:var(--c-bad);animation:frpulse 1.2s ease-in-out infinite}
.fr-lvl{width:120px;padding:9px 12px;border-radius:var(--r-pill);background:var(--c-scrim)}
.fr-lvl .ds-bar-f{transition:width .08s linear}
.fr-count{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:clamp(90px,16vw,180px);color:var(--c-on-dark);text-shadow:0 4px 30px var(--c-scrim);pointer-events:none}
.fr-count:empty{display:none}
.fr-count.pop{animation:frpop .9s var(--ease)}
.fr-camerr{position:absolute;left:var(--sp-5);right:var(--sp-5);top:50%;transform:translateY(-50%);margin:0;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-surface);color:var(--c-bad-ink);font-weight:var(--fw-medium);text-align:center}
.fr-camerr:empty{display:none}
.fr-ctl{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.fr-spd{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--c-mute)}
.fr-spd .btn{min-width:0;width:var(--ctl-sm);padding:0}
.fr-spd svg{width:16px;height:16px}
.fr-recb{min-height:var(--ctl-lg);padding:0 30px;font-size:var(--fs-lg)}
.fr-recb svg{color:var(--c-bad)}
.btn.volt.fr-recb svg{color:var(--c-on-dark)}
.fr-stop{min-height:var(--ctl-lg);padding:0 26px;background:var(--c-sunk);color:var(--c-text-2);font-size:var(--fs-md)}
.fr-stop.ready{background:var(--c-bad);color:var(--c-on-dark)}

/* the take, their OK, sending, done */
.fr-check{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);align-items:start}
.fr-play video{display:block;width:100%;max-height:56vh;border-radius:var(--r-lg);background:var(--c-strong)}
.fr-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.fr-checks li{display:flex;align-items:flex-start;gap:var(--sp-3);font-weight:var(--fw-medium);color:var(--c-text-2)}
.fr-checks .fr-sd{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--c-sunk);color:var(--c-mute);font-weight:var(--fw-heavy)}
.fr-checks .fr-sd svg{width:14px;height:14px}
.fr-checks li.ok .fr-sd{background:var(--c-mark);color:var(--c-strong)}
.fr-checks li.bad{color:var(--c-bad-ink)}
.fr-checks li.bad .fr-sd{background:var(--c-bad-soft);color:var(--c-bad)}
.fr-agree{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-surface-2);box-shadow:inset 0 0 0 1px var(--c-border);cursor:pointer;font-size:var(--fs-sm);line-height:1.5}
.fr-agree input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--c-accent)}
.fr-rin .ds-help svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.fr-sending{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6) 0}
.fr-upl2{margin:0;font-size:var(--fs-md);color:var(--c-text-2)}
.fr-upl2 b{font-family:var(--wide);font-stretch:125%;font-size:var(--fs-2xl);color:var(--c-strong);margin-right:var(--sp-2)}
.fr-done{display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);padding:var(--sp-2) 0}
.fr-done .fr-prog{width:100%;max-width:560px}
.fr-burst{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--c-mark);color:var(--c-strong);box-shadow:0 0 0 10px var(--c-mark-soft);animation:frburst .6s var(--ease)}
.fr-burst svg{width:38px;height:38px}

/* ---------- Read my website ---------- */
.fr-read{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-5) var(--sp-6);margin-top:var(--sp-6);background:linear-gradient(135deg,var(--c-accent-soft),var(--c-surface) 60%)}
.fr-ri{flex:none;width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--c-accent);color:var(--c-on-dark)}
.fr-ri svg{width:22px;height:22px}
.fr-rt{margin:0;font-size:var(--fs-lg);font-weight:750;color:var(--c-strong)}
.fr-rrow{display:flex;gap:var(--sp-3);margin-top:var(--sp-3);flex-wrap:wrap}
.fr-rrow .ds-input{flex:1 1 240px;width:auto}
.fr-rrow .btn{flex:none}
.fr-rrow .btn svg{width:18px;height:18px}
.fr-read .ds-error{margin-top:var(--sp-2)}
.fr-reading{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.fr-reading li{display:flex;align-items:center;gap:var(--sp-3);font-weight:var(--fw-medium);color:var(--c-text-2);opacity:0;animation:frin .4s var(--ease) forwards}
.fr-reading li::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid var(--c-border-2);border-top-color:var(--c-accent);animation:dsspin .8s linear infinite;flex:none}
.fr-reading li:nth-child(2){animation-delay:2.5s}.fr-reading li:nth-child(3){animation-delay:5.5s}.fr-reading li:nth-child(4){animation-delay:9s}
.fr-anss{display:flex;flex-direction:column;gap:var(--sp-4)}
.fr-ans{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--c-border);transition:box-shadow var(--t-fast),opacity var(--t-fast);opacity:.6}
.fr-ans.on{box-shadow:inset 0 0 0 1.5px var(--c-accent);opacity:1}
.fr-ansh{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;cursor:pointer}
.fr-ansh input{width:20px;height:20px;accent-color:var(--c-accent)}
.fr-ansh b{color:var(--c-strong)}

/* ---------- Your twin's hero: progress once sent; files they already have, one tap away ---------- */
.sx-twprog{margin-top:var(--sp-5);max-width:560px}
.sx-twprog .fr-scan{width:104px}
.sx-twalt{margin-top:var(--sp-4)}
.sx-twalt>summary{cursor:pointer;width:max-content;max-width:100%;font-weight:var(--fw-medium);font-size:var(--fs-sm);color:var(--c-on-dark-2);text-decoration:underline;text-underline-offset:3px}
.sx-twalt>summary:hover{color:var(--c-on-dark)}
.sx-twalt[open]>summary{margin-bottom:var(--sp-3)}
.sx-twcancel{color:var(--c-on-dark-2)}

/* ---------- the team's twin box, made by itself ---------- */
.fr-tbox .fr-tauto{display:flex;flex-direction:column;gap:var(--sp-2);margin:var(--sp-2) 0}
.fr-tclip{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--sp-4);align-items:start;margin:var(--sp-3) 0}
.fr-tclip video{width:100%;max-height:300px;border-radius:var(--r-md);background:var(--c-strong)}
.fr-tclip p{margin:0}
@media (max-width:540px){.fr-tclip{grid-template-columns:minmax(0,1fr)}}

/* ---------- motion ---------- */
@keyframes frsweep{0%{transform:translateY(0)}100%{transform:translateY(350%)}}
@keyframes frpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes frpop{0%{transform:scale(1.4);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.2}}
@keyframes frburst{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes frin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 .fr-scan.on .fr-sweep,.fr-ph-rec svg,.fr-stage.live .fr-dot,.fr-count.pop,.fr-burst,.fr-spin{animation:none}
 .fr-reading li{animation:none;opacity:1}
 .fr-reading li::before{animation:none}
}

/* ---------- small screens ---------- */
@media (max-width:960px){
 .fr-hero{grid-template-columns:minmax(0,1fr);padding:var(--sp-6) var(--sp-5);gap:var(--sp-6)}
 .fr-side .fr-prog{width:100%}
 .fr-phone{display:none}
 .fr-prep,.fr-check{grid-template-columns:minmax(0,1fr)}
 .fr-script{max-height:none}
 .fr-script p{font-size:var(--fs-lg)}
 /* dvh: the height left by the phone browser's toolbars, so the close X is never under them (vh where dvh is unknown) */
 .scrim.mob .sheet.fr-rec.ds-sheet{max-height:100vh;height:100vh;max-height:100dvh;height:100dvh;border-radius:0}
 .fr-stage{aspect-ratio:9/14;max-height:62vh}
 .fr-guide{width:56%}
 .fr-prompt{height:52%}
 .fr-ctl{justify-content:center}
 .fr-ctl .fr-recb,.fr-ctl .fr-stop{flex:1 1 100%}
 .fr-step{padding:var(--sp-4)}
 .fr-cta{width:100%}
}
@media (max-width:540px){
 .fr-prog{grid-template-columns:minmax(0,1fr)}
 .fr-scan{width:96px}
 .fr-sl{display:none}
}