/* NexaroAI — Partytura scroll v03 (Claude): 8-step knowledge-to-video process, 3 fictional examples.
   Loaded after scrollcraft.css. Never restyles .sc-stage position. */

:root{
  --dark:#16232b; --navy:#1e3a46; --paper:#f6f5f3; --ink:#292827;
  --cyan:#4ec3e0; --blue:#3b7fd4; --violet:#8b6fd6;
  --cond:"Avenir Next Condensed","DIN Condensed","Helvetica Neue","Arial Narrow",Impact,sans-serif;
  --sans:"Avenir Next","Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",Menlo,ui-monospace,monospace;
  --dyn:Georgia,"Times New Roman",serif;
  --pad:clamp(24px,6.667vw,96px);
  --line:rgba(246,245,243,.2);
  --muted:rgba(246,245,243,.68);
  --tile:rgba(22,35,43,.78);
  --accent:#f2c14e; /* example client's caption colour, set per persona by app.js */

  --sc-canvas:#16232b; --sc-surface:#1e3a46; --sc-ink:#f6f5f3; --sc-ink-soft:#a9b4b9;
  --sc-accent:#4ec3e0; --sc-accent-ink:#16232b;
  --sc-font-display:var(--cond); --sc-font-text:var(--sans); --sc-font-mono:var(--mono);
}

body{font:400 16px/1.5 var(--sans);letter-spacing:0;background:var(--dark);color:var(--paper)}
html.mode-flow{scroll-behavior:auto}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shared controls ---------- */
.logo{flex:none;--logo-w:clamp(150px,22.13vw,318.64px);margin-left:calc(var(--logo-w) * -0.123902)}
.logo svg{width:var(--logo-w);height:calc(var(--logo-w) * 0.14587);max-width:none}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topnav{display:flex;align-items:center;gap:20px}
.ghost{height:40px;padding:0 20px;border:1.5px solid rgba(246,245,243,.72);border-radius:999px;background:transparent;font:600 14px/1 var(--sans);color:var(--paper);cursor:pointer;white-space:nowrap}
.ghost:hover{border-color:var(--paper)}
.textbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:none;font:500 13px/1 var(--mono);color:var(--cyan);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.motion-link{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-underline-offset:3px}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 22px;border:0;border-radius:0;cursor:pointer;font:800 19px/1 var(--cond);font-stretch:condensed;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.btn-primary{background:var(--cyan);color:var(--dark)}
.btn-primary:hover{background:#71d1e8}
.btn-dark{background:var(--ink);color:var(--paper)}

/* ---------- intro ---------- */
.hl{margin:0;font:800 clamp(52px,7.6vw,118px)/.88 var(--cond);font-stretch:condensed;letter-spacing:-.005em;text-transform:uppercase}
.hl:focus{outline:none}
.hl mark{display:inline-block;line-height:.8;padding:.07em .08em .02em;background:var(--cyan);color:var(--dark)}
.oneline{margin:16px 0 0;font:700 clamp(18px,1.8vw,24px)/1.3 var(--sans);color:rgba(246,245,243,.9)}
.choose{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:26px}
.choose-l{flex-basis:100%;margin:0 0 2px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.persona{min-height:44px;padding:0 18px;border:1.5px solid rgba(246,245,243,.6);border-radius:999px;background:transparent;font:700 15px/1 var(--sans);color:var(--paper);cursor:pointer}
.persona:hover{border-color:var(--paper)}
.persona[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--dark)}
.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:22px}
.hint{margin:0;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}

/* ---------- caption + duo ---------- */
.kicker{margin:0;font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.kicker span{margin-right:8px;color:var(--paper)}
.cap h2{margin:10px 0 12px;font:800 clamp(28px,3vw,44px)/.94 var(--cond);font-stretch:condensed;text-transform:uppercase}
.cap h2:focus{outline:none}
.cap h2:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.say{margin:0;font-size:16px;line-height:1.5;color:rgba(246,245,243,.86)}
.cap-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:20px}
.duo{display:grid;gap:8px;margin:0}
.duo div{display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:baseline}
.duo dt{padding:4px 0;font:800 13px/1 var(--cond);letter-spacing:.08em;text-align:center}
.duo .you dt{background:var(--cyan);color:var(--dark)}
.duo .we dt{box-shadow:inset 0 0 0 1.5px var(--violet);color:#cfc4f2}
.duo dd{margin:0;font-size:15px;line-height:1.4}

/* =================================================================
   THE BOARD: one composition per step; material accumulates with --l
   (each element: --a = its own arrival 0..1 derived from --l)
   ================================================================= */
.step{--l:1}
.board{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.7em;padding:clamp(12px,3cqw,22px);border:1px solid var(--line);background:linear-gradient(160deg,rgba(30,58,70,.75),rgba(22,35,43,.9));container-type:inline-size;font-size:clamp(12px,2.6cqw,16px);line-height:1.35}
.board > *{margin:0}
.b-label{font:500 clamp(10px,1.9cqw,12px)/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--cyan)}
.b-foot{margin-top:auto !important;font:400 clamp(10px,1.8cqw,12px)/1.4 var(--mono);color:var(--muted)}
.pk{display:block;font:500 clamp(9px,1.7cqw,11px)/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--cyan)}
.mini{font:400 clamp(9px,1.7cqw,11px)/1.3 var(--mono);color:var(--muted)}
.sws{display:inline-flex;gap:4px;vertical-align:middle}
.sw{display:inline-block;width:1.2em;height:1.2em;border:1px solid rgba(246,245,243,.4)}
/* the recognisable fragment that travels: the expert's own sentence */
.frag-quote{padding-left:.7em;border-left:3px solid var(--cyan);font:italic 400 clamp(14px,3cqw,21px)/1.3 var(--dyn);color:var(--paper)}

/* 1 gather: six pieces arrive on the board */
.pile{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-rows:repeat(4,minmax(0,1fr));grid-template-areas:"photo quote" "photo offer" "voice qs" "style qs";gap:.5em}
.piece{position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.2em;margin:0;padding:.55em .65em;border:1px solid var(--line);background:var(--tile);opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 26px))}
.pc-photo{grid-area:photo;padding:0}
.pc-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%}
.pc-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:.35em .5em;background:rgba(22,35,43,.8);font:500 clamp(9px,1.7cqw,11px)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.pc-voice{grid-area:voice;color:var(--cyan)}
.pc-voice svg{width:100%;height:1.6em;max-width:none;flex:none}
.pc-voice .pk{color:var(--paper)}
.pc-offer{grid-area:offer}
.pc-qs{grid-area:qs}
.pc-qs span:not(.pk)::before{content:"“";color:var(--cyan)}
.pc-qs span:not(.pk)::after{content:"”";color:var(--cyan)}
.pc-quote{grid-area:quote;font-size:clamp(12px,2.6cqw,18px);justify-content:center}
.pc-style{grid-area:style}
.pc-photo{--a:clamp(0,calc((var(--l) - .02) * 5),1)}
.pc-voice{--a:clamp(0,calc((var(--l) - .1) * 5),1)}
.pc-offer{--a:clamp(0,calc((var(--l) - .18) * 5),1)}
.pc-qs{--a:clamp(0,calc((var(--l) - .26) * 5),1)}
.pc-quote{--a:clamp(0,calc((var(--l) - .34) * 5),1)}
.pc-style{--a:clamp(0,calc((var(--l) - .42) * 5),1)}

/* 2 understand: the same material becomes a brief, each line traced to its source */
.brief{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.5em}
.row{display:grid;grid-template-columns:5.6em minmax(0,1fr);grid-template-areas:"src src" "k v";column-gap:.6em;row-gap:.15em;padding:.45em .65em;border-left:3px solid var(--cyan);background:var(--tile);opacity:var(--a);transform:translateX(calc((1 - var(--a)) * -18px))}
.row .src{grid-area:src;font:400 clamp(9px,1.7cqw,11px)/1.2 var(--mono);color:var(--muted)}
.row .src::before{content:"↳ ";color:var(--cyan)}
.row .k{grid-area:k;font:500 clamp(9px,1.7cqw,11px)/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cyan)}
.row .v{grid-area:v}
.row:nth-child(1){--a:clamp(0,calc((var(--l) - .05) * 5),1)}
.row:nth-child(2){--a:clamp(0,calc((var(--l) - .17) * 5),1)}
.row:nth-child(3){--a:clamp(0,calc((var(--l) - .29) * 5),1)}
.row:nth-child(4){--a:clamp(0,calc((var(--l) - .41) * 5),1)}
.st-brief .frag-quote{font-size:clamp(12px,2.4cqw,16px);opacity:.75}

/* 3 topics: three proposals emerge from the quote; one is marked as this example's pick */
.topics{--s:clamp(0,calc((var(--l) - .5) * 5),1);flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.55em;padding:0;list-style:none}
.topics li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tn tt" "tn sel";column-gap:.7em;align-items:center;padding:.6em .7em;border:1px solid var(--line);background:var(--tile);opacity:calc(var(--a) * (1 - .62 * var(--s)));transform:translate(calc(var(--s) * 14px),calc((1 - var(--a)) * 20px))}
.topics li:nth-child(1){--a:clamp(0,calc((var(--l) - .08) * 5),1)}
.topics li:nth-child(2){--a:clamp(0,calc((var(--l) - .16) * 5),1)}
.topics li:nth-child(3){--a:clamp(0,calc((var(--l) - .24) * 5),1)}
.topics li.is-target{opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 20px)) scale(calc(1 + .02 * var(--s)));box-shadow:inset 0 0 0 2px rgba(78,195,224,var(--s))}
.tn{grid-area:tn;display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border:1px solid var(--line);font:600 clamp(10px,1.9cqw,12px)/1 var(--mono)}
.tt{grid-area:tt;font:800 clamp(15px,3.3cqw,22px)/1 var(--cond);font-stretch:condensed;text-transform:uppercase;letter-spacing:.02em}
.sel-l{grid-area:sel;display:none;margin-top:.3em;font:500 clamp(9px,1.7cqw,11px)/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.topics li.is-target .sel-l{display:block;opacity:var(--s)}
.topics li.is-target .tn{background:var(--cyan);color:var(--dark);border-color:var(--cyan)}

/* 4 script: the selected topic becomes a hook and shots, in the brief's tone and colours */
.ty{display:inline-block;margin-right:.5em;padding:.15em .45em;font:600 clamp(9px,1.7cqw,11px)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--dark);vertical-align:.15em}
.ty.av{background:var(--cyan)}
.ty.mo{background:var(--violet)}
.hook{font:800 clamp(20px,4.6cqw,32px)/1 var(--cond);font-stretch:condensed;text-transform:uppercase;opacity:clamp(0,calc((var(--l) - .04) * 5),1)}
.hook .ty{display:block;width:fit-content;margin-bottom:.45em;font-size:clamp(9px,1.7cqw,11px)}
.hook mark,.cap-on mark{background:var(--accent);color:var(--dark);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.shots{display:flex;flex-direction:column;gap:.1em;padding:0;list-style:none}
.shots li{padding:.5em 0;border-top:1px solid var(--line)}
.shots li:nth-child(1){opacity:clamp(0,calc((var(--l) - .2) * 5),1)}
.shots li:nth-child(2){opacity:clamp(0,calc((var(--l) - .32) * 5),1)}
.shots li:nth-child(3){opacity:clamp(0,calc((var(--l) - .44) * 5),1)}

/* 5 revise: one note, one fix, then gate 1 */
.note{padding:.6em .75em;background:var(--paper);color:var(--ink);opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 16px));--a:clamp(0,calc((var(--l) - .04) * 5),1)}
.note .pk{color:var(--blue)}
.ba{padding:.55em .7em;background:var(--tile);border-left:3px solid var(--line);opacity:var(--a)}
.ba .tx{display:block}
.before{--a:clamp(0,calc((var(--l) - .16) * 5),1);--k:clamp(0,calc((var(--l) - .3) * 6),1)}
.before .tx{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 55%;background-size:calc(var(--k) * 100%) 1.5px;color:rgba(246,245,243,calc(1 - .45 * var(--k)))}
.after{--a:clamp(0,calc((var(--l) - .46) * 5),1);border-left-color:var(--cyan);transform:translateY(calc((1 - var(--a)) * 14px))}
.gate{display:flex;align-items:center;gap:.55em;margin-top:auto !important;padding:.55em .7em;border:1.5px solid var(--cyan);font:800 clamp(15px,3.2cqw,21px)/1 var(--cond);font-stretch:condensed;text-transform:uppercase;letter-spacing:.03em;opacity:var(--a);transform:scale(calc(.96 + .04 * var(--a)))}
.st-revise .gate{--a:clamp(0,calc((var(--l) - .68) * 6),1)}
.st-draft .gate{--a:clamp(0,calc((var(--l) - .66) * 6),1)}
.chk{display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;border-radius:50%;background:var(--cyan);color:var(--dark);font:700 .8em/1 var(--sans)}
.gate .g{margin-left:auto;font:500 clamp(9px,1.7cqw,11px)/1 var(--mono);letter-spacing:.06em;color:var(--muted)}

/* 6 photo draft: a still photo where the avatar will be; parts listed */
.draft{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1em;align-items:stretch}
.frame{position:relative;margin:0;height:100%;aspect-ratio:9/16;overflow:hidden;background:var(--navy)}
.frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.chip{position:absolute;z-index:2;top:.5em;left:.5em;right:.5em;width:fit-content;padding:.25em .45em;background:rgba(22,35,43,.82);font:500 clamp(8px,1.6cqw,10.5px)/1.25 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.chip-low{top:auto;bottom:.5em}
.cap-on{position:absolute;z-index:2;left:.45em;right:.45em;bottom:18%;margin:0;font:800 clamp(10px,2.4cqw,16px)/1 var(--cond);font-stretch:condensed;text-transform:uppercase;text-shadow:0 1px 6px rgba(22,35,43,.9)}
.parts{display:flex;flex-direction:column;justify-content:center;gap:.1em;padding:0;list-style:none}
.parts li{padding:.45em 0;border-top:1px solid var(--line)}
.parts li::before{content:"✓ ";color:var(--cyan)}
.parts li:last-child::before{content:"○ ";color:var(--muted)}
.parts small{display:block;font:400 clamp(9px,1.7cqw,11px)/1.2 var(--mono);color:var(--muted)}
.parts li:nth-child(1){opacity:clamp(0,calc((var(--l) - .06) * 5),1)}
.parts li:nth-child(2){opacity:clamp(0,calc((var(--l) - .16) * 5),1)}
.parts li:nth-child(3){opacity:clamp(0,calc((var(--l) - .26) * 5),1)}
.parts li:nth-child(4){opacity:clamp(0,calc((var(--l) - .36) * 5),1)}

/* 7 final render: photo draft -> planned final; only the avatar track changes */
.pair{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;gap:.7em}
.frame.sm{height:100%;max-width:calc(50% - 1.1em)}
.arrow{align-self:center;font:700 1.4em/1 var(--sans);color:var(--cyan)}
.planned{box-shadow:0 0 0 2px var(--cyan);opacity:clamp(.4,calc((var(--l) - .08) * 4),1)}
.tracks{display:grid;gap:.3em}
.tr{display:grid;grid-template-columns:5.4em minmax(0,1fr);gap:.5em;align-items:center}
.tk{font:500 clamp(9px,1.7cqw,11px)/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.bar{position:relative;display:flex;align-items:center;height:1.7em;padding:0 .5em;overflow:hidden;background:rgba(246,245,243,.08);font:400 clamp(9px,1.7cqw,11px)/1 var(--mono);color:var(--muted)}
.tr-av .tk{color:var(--cyan)}
.b-photo,.b-render{position:absolute;inset:0;display:flex;align-items:center;padding:0 .5em;white-space:nowrap}
.b-render{--k:clamp(0,calc((var(--l) - .25) * 2.6),1);background:repeating-linear-gradient(135deg,var(--cyan) 0 8px,#71d1e8 8px 16px);color:var(--dark);font-weight:600;clip-path:inset(0 calc((1 - var(--k)) * 100%) 0 0)}

/* 8 delivery */
.done-topic{font:800 clamp(18px,4.2cqw,30px)/1 var(--cond);font-stretch:condensed;text-transform:uppercase}
.done-topic::before{content:"Topic · ";display:block;margin-bottom:.3em;font:500 clamp(9px,1.7cqw,11px)/1 var(--mono);letter-spacing:.07em;color:var(--cyan)}
.files{display:flex;flex-direction:column;padding:0;list-style:none}
.files li{display:flex;align-items:center;gap:.7em;padding:.55em 0;border-top:1px solid var(--line)}
.files small{color:var(--muted);font:400 clamp(9px,1.7cqw,11px)/1 var(--mono)}
.ic{min-width:3.4em;padding:.25em 0;border:1px solid var(--cyan);text-align:center;font:600 clamp(9px,1.7cqw,11px)/1 var(--mono);color:var(--cyan)}
.files li:nth-child(1){opacity:clamp(0,calc((var(--l) - .05) * 5),1)}
.files li:nth-child(2){opacity:clamp(0,calc((var(--l) - .15) * 5),1)}
.files li:nth-child(3){opacity:clamp(0,calc((var(--l) - .25) * 5),1)}
.benefit{opacity:clamp(0,calc((var(--l) - .35) * 5),1)}

/* ---------- score bar ---------- */
.sb-now{margin:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.sb-no{font:500 12px/1 var(--mono);color:var(--cyan)}
.sb-name{font:800 22px/1 var(--cond);font-stretch:condensed;letter-spacing:.04em;text-transform:uppercase}
.sb-track{position:relative;height:46px}
.sb-line{position:absolute;left:0;right:0;top:10px;height:1px;background:rgba(246,245,243,.35)}
.sb-fill{position:absolute;left:0;right:0;top:9px;height:3px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));transform-origin:0 50%;transform:scaleX(0)}
.sb-head{position:absolute;top:0;left:0;width:3px;height:22px;margin-left:-1.5px;background:var(--cyan);box-shadow:0 0 10px rgba(78,195,224,.7)}
.sb-ticks{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.sb-ticks li{position:absolute;top:0;left:0}
.tick{position:relative;display:block;min-height:44px;padding:22px 0 0;border:0;background:none;font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;cursor:pointer;text-align:left}
.tick::before{content:"";position:absolute;left:0;top:4px;width:1px;height:13px;background:rgba(246,245,243,.55)}
.tick:hover{color:var(--paper)}
.tick[aria-current="step"]{color:var(--cyan)}
.tick[aria-current="step"]::before{width:2px;background:var(--cyan)}

/* ---------- end note, dialog ---------- */
.endnote{position:relative;z-index:2;padding:40px var(--pad) 56px;border-top:1px solid var(--line);background:var(--dark)}
.endnote p{margin:0;max-width:72em;font:400 12px/1.6 var(--mono);color:rgba(246,245,243,.6)}
.endnote .endlinks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;margin-top:14px}
.talk{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:32px;border:0;background:var(--paper);color:var(--ink)}
.talk::backdrop{background:rgba(22,35,43,.8)}
.talk .kicker{color:var(--blue)}
.talk h2{margin:10px 0 14px;font:800 36px/.94 var(--cond);font-stretch:condensed;text-transform:uppercase}
.talk p{margin:0 0 12px;font-size:15px;line-height:1.5}
.talk .btn{margin-top:10px}
.talk:not([open]){display:none}

/* =================================================================
   FLOW MODE (no JS, reduced motion, ?motion=off): all 8 steps, final states
   ================================================================= */
html:not(.mode-score) .topbar{padding:28px var(--pad) 0}
html:not(.mode-score) .intro{padding:clamp(40px,8vh,96px) var(--pad) clamp(32px,5vh,64px)}
html:not(.mode-score) .hint,
html:not(.mode-score) .scorebar,
html:not(.mode-score) .skip-top{display:none}
html:not(.mode-score) .steps{margin:0;padding:0 var(--pad);list-style:none}
html:not(.mode-score) .step{display:grid;grid-template-columns:minmax(0,320px) minmax(0,600px) minmax(0,260px);grid-template-areas:"cap board duo";gap:40px;align-items:center;padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:16px}
html:not(.mode-score) .cap{grid-area:cap}
html:not(.mode-score) .board{grid-area:board;min-height:440px}
html:not(.mode-score) .duo{grid-area:duo}
html:not(.mode-score) .frame{height:auto;width:min(44%,220px)}
html:not(.mode-score) .draft{grid-template-columns:min(44%,220px) minmax(0,1fr)}
html:not(.mode-score) .draft .frame{width:100%}
html:not(.mode-score) .frame.sm{width:min(40%,190px)}
html:not(.mode-score) .pair{align-items:center}
@media (max-width:1100px){
  html:not(.mode-score) .step{grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-areas:"cap board" "duo board";align-items:start}
}
@media (max-width:760px){
  html:not(.mode-score) .step{grid-template-columns:minmax(0,1fr);grid-template-areas:"cap" "board" "duo";gap:18px;padding:36px 0}
  html:not(.mode-score) .board{min-height:400px}
  .hl{font-size:clamp(40px,11vw,56px)}
  .topnav .motion-link,.topnav .ghost{display:none} /* CTA stays in the intro and Delivery */
}

/* =================================================================
   SCORE MODE (pinned; engine makes .stage sticky)
   ================================================================= */
html.mode-score{
  --deck-top:clamp(78px,10.5svh,108px);
  --deck-bot:clamp(84px,12svh,124px);
  --board-h:min(720px,calc(100svh - var(--deck-top) - var(--deck-bot) - 12px));
}
.mode-score .stage{background:var(--dark)}
.mode-score .topbar{position:absolute;z-index:40;top:0;left:0;right:0;padding:clamp(16px,3svh,32px) var(--pad) 0}
.mode-score .intro{position:absolute;z-index:30;left:var(--pad);right:var(--pad);top:clamp(110px,20svh,220px);will-change:opacity,transform}
.mode-score .steps{position:absolute;z-index:10;left:var(--pad);right:var(--pad);top:var(--deck-top);bottom:var(--deck-bot);margin:0;padding:0;list-style:none}
.mode-score .step{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"cap board duo";column-gap:clamp(24px,3.4vw,48px);align-items:center;opacity:0;visibility:hidden;will-change:opacity,transform}
.mode-score .cap{grid-area:cap;justify-self:end;width:100%;max-width:330px}
.mode-score .board{grid-area:board;width:min(600px,46vw);height:var(--board-h)}
.mode-score .duo{grid-area:duo;justify-self:start;width:100%;max-width:260px}
.mode-score .scorebar{position:absolute;z-index:35;left:var(--pad);right:var(--pad);bottom:clamp(12px,2.6svh,30px);display:grid;grid-template-columns:200px minmax(0,1fr);align-items:end;column-gap:28px}
.mode-score .sb-now{padding-bottom:16px}
.mode-score .sb-skip{display:none}

@media (max-width:1100px) and (min-width:761px){
  .mode-score .step{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cap board" "duo board";align-content:center;row-gap:24px}
  .mode-score .cap{align-self:end;justify-self:start}
  .mode-score .duo{align-self:start}
  .mode-score .board{width:min(460px,54vw)}
  .mode-score .scorebar{grid-template-columns:140px minmax(0,1fr)}
  .tick span{font-size:9.5px}
  .mode-score .topnav .motion-link{display:none}
}

@media (max-width:760px){
  html.mode-score{
    --deck-top:64px;
    --deck-bot:78px;
    --board-h:clamp(240px,calc(100svh - var(--deck-top) - var(--deck-bot) - 230px),520px);
  }
  .mode-score .topbar{padding-top:16px}
  .mode-score .topnav{gap:12px}
  .mode-score .topnav .motion-link,.mode-score .skip-top{display:none}
  .mode-score .ghost{height:36px;padding:0 12px;font-size:13px}
  .mode-score .intro{top:clamp(84px,15svh,140px)}
  .mode-score .choose{margin-top:18px}
  .mode-score .persona{padding:0 14px;font-size:14px}
  .mode-score .step{grid-template-columns:minmax(0,1fr);grid-template-areas:"board" "cap" "duo";align-content:start;row-gap:12px}
  .mode-score .board{width:100%}
  .mode-score .cap{justify-self:stretch;max-width:none}
  .mode-score .duo{max-width:none}
  .mode-score .cap h2{margin:4px 0 4px;font-size:24px}
  .mode-score .say{font-size:14px;line-height:1.4}
  .mode-score .cap-actions{margin-top:8px;gap:2px 16px}
  .mode-score .cap-actions .btn{min-height:44px;padding:0 16px;font-size:16px}
  .mode-score .duo{grid-template-columns:1fr 1fr;gap:10px}
  .mode-score .duo div{grid-template-columns:34px minmax(0,1fr);gap:8px}
  .mode-score .duo dd{font-size:13px}
  .mode-score .scorebar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;bottom:10px}
  .mode-score .sb-now{grid-column:1;grid-row:1;padding-bottom:0}
  .mode-score .sb-skip{display:inline-flex;grid-column:2;grid-row:1;min-height:36px}
  .mode-score .sb-track{grid-column:1 / -1;grid-row:2;height:30px}
  .mode-score .sb-name{font-size:18px}
  .mode-score .tick{min-width:28px;min-height:30px;padding-top:0}
  .mode-score .tick span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* v05: actual storyboard, the same edit in draft/final, tangible delivery. */
.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;flex:1;min-height:0}
.story-card{margin:0;display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);background:var(--tile);opacity:clamp(.25,calc((var(--l) - var(--order)*.12)*4),1);transform:translateY(calc((1 - clamp(0,calc((var(--l) - var(--order)*.12)*4),1))*16px))}
.shot-thumb{position:relative;flex:1;min-height:60px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--dark);padding:8px}
.shot-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.shot-overlay{position:absolute;bottom:8px;left:8px;right:8px;color:var(--paper);background:rgba(22,35,43,.86);padding:8px;font:800 clamp(13px,3cqw,21px)/1.05 var(--cond);text-transform:uppercase}
.shot-play{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--cyan);color:var(--dark)}
.story-card figcaption{padding:8px 10px;border-top:1px solid var(--line);min-height:76px}
.story-card figcaption>span{font:500 10px/1.2 var(--mono);color:var(--cyan)}
.story-card figcaption p{margin:5px 0 0;font-size:clamp(11px,2.35cqw,15px);line-height:1.25}
.shot-graphic{flex-direction:column;gap:10px;background:var(--accent);color:var(--dark)}
.week-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%;text-align:center;font:600 12px/1.4 var(--mono)}
.week-grid b{opacity:.7}.week-grid i{font-style:normal;padding:5px 0;background:var(--dark);color:var(--accent)}
.week-grid .skipped{background:rgba(22,35,43,.12);color:var(--dark)}
.count-switch{font:800 clamp(28px,7cqw,50px)/1 var(--cond)}
.count-switch s{opacity:.4;text-decoration-thickness:2px}
.takeaway-type{font:800 clamp(25px,6cqw,45px)/.95 var(--cond);text-transform:uppercase;color:var(--accent);text-align:center}
.speech-pair{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:clamp(12px,2.8cqw,18px)}
.speech-pair span{padding:8px;background:var(--dark);color:var(--paper)}
.speech-pair span+span{align-self:flex-end;background:var(--paper);color:var(--dark)}
.edit-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:20px;flex:1;min-height:0}
.reel-frame{position:relative;aspect-ratio:9/16;margin:0;overflow:hidden;min-width:0;background:var(--dark);height:100%;max-height:100%;width:auto;justify-self:center}
.reel-frame>img,.reel-frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.reel-tag{position:absolute;top:8px;left:8px;padding:4px 6px;background:rgba(22,35,43,.85);font:500 9px/1.1 var(--mono);letter-spacing:.04em;color:var(--paper)}
.reel-caption{position:absolute;bottom:17%;left:5%;right:5%;margin:0;background:rgba(22,35,43,.9);padding:8px 6px;text-align:center;font:800 clamp(15px,4cqw,27px)/1.04 var(--cond);text-transform:uppercase;color:var(--paper);text-wrap:balance}
.reel-caption .spoken{background:var(--accent);color:var(--dark);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.reel-graphic{position:absolute;top:43%;right:5%;left:5%;padding:10px;background:var(--accent);color:var(--dark);transform-origin:100% 0;box-shadow:3px 5px 0 rgba(22,35,43,.25)}
.reel-graphic .graph-label{display:block;font:600 9px/1.2 var(--mono);letter-spacing:.05em;margin-bottom:6px}
.reel-graphic strong{display:block;font:800 clamp(14px,3.1cqw,22px)/1.1 var(--cond)}
.tiny-week{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:5px 0 8px;font:500 10px/1 var(--mono);text-align:center}
.tiny-week b{padding:5px 1px;background:rgba(22,35,43,.13);text-decoration:line-through;opacity:.6}
.tiny-week b:nth-child(1),.tiny-week b:nth-child(3){background:var(--dark);color:var(--accent);opacity:1;text-decoration:none}
.edit-side{min-width:0;display:flex;flex-direction:column;gap:18px}
.edit-title{margin:0;font:800 clamp(20px,5cqw,34px)/.95 var(--cond);text-transform:uppercase}
.edit-timeline{display:flex;flex-direction:column;gap:6px}
.edit-timeline>div{display:grid;grid-template-columns:1fr;gap:5px;font:500 10px/1 var(--mono);color:var(--muted)}
.edit-timeline i{height:14px;background:var(--cyan);transform-origin:0 50%;transform:scaleX(clamp(.1,calc(var(--l)*1.4),1))}
.edit-timeline .tl-motion{background:var(--violet);transform:scaleX(clamp(.08,calc((var(--l) - .12)*1.5),1))}
.edit-timeline .tl-captions{background:var(--accent);transform:scaleX(clamp(.05,calc((var(--l) - .24)*1.6),1))}
.calendar-demo{--progress:1;padding:12px;background:var(--accent);color:var(--dark);opacity:clamp(.25,var(--progress),1);transform:translateY(calc((1 - var(--progress))*14px))}
.calendar-demo>p{font-size:clamp(11px,2.35cqw,15px);line-height:1.25;margin:8px 0 0}
.calendar-demo .count-switch{display:block;margin-top:8px}
.render-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(60px,.35fr) 20px minmax(0,1fr);align-items:center;gap:12px}
.before-frame{margin:0;position:relative;aspect-ratio:9/16;width:100%;align-self:center;overflow:hidden;opacity:.7}
.before-frame img{width:100%;height:100%;object-fit:cover;display:block}
.before-frame figcaption{position:absolute;bottom:0;left:0;right:0;background:var(--dark);padding:5px;font:500 8px/1.2 var(--mono)}
.render-arrow{font-size:22px;color:var(--cyan)}
.final-frame{border:2px solid var(--cyan)}
.render-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
.render-controls .mini{max-width:65%}
.render-controls .textbtn{font-size:11px;min-height:44px;white-space:normal;text-align:right}
.delivery-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px;flex:1;min-height:0;align-items:center}
.delivery-pack{display:flex;flex-direction:column;gap:10px;min-width:0}
.cover-preview{position:relative;aspect-ratio:4/5;margin:0;overflow:hidden;border:1px solid var(--line);background:var(--dark)}
.cover-preview img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.cover-preview figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 8px;background:var(--accent);color:var(--dark);font:800 clamp(16px,4cqw,29px)/.95 var(--cond);text-transform:uppercase}
.pack-label{font:500 10px/1 var(--mono);color:var(--cyan);margin:0}
.pack-files{list-style:none;margin:0;padding:0;font-size:clamp(10px,2.4cqw,14px)}
.pack-files li{display:flex;gap:6px;border-top:1px solid var(--line);padding:9px 0;align-items:center;min-height:42px}
.pack-files span{font:500 9px/1 var(--mono);color:var(--cyan)}
.pack-files a{color:var(--paper);text-underline-offset:3px}
.delivery-benefit{font:800 clamp(18px,4cqw,29px)/1.05 var(--cond);text-transform:uppercase;padding-top:10px;border-top:1px solid var(--line)}
.delivery-play{position:absolute;inset:0;z-index:3;width:100%;border:0;background:transparent;color:transparent;cursor:pointer}
.delivery-play:after{content:'▶';position:absolute;bottom:10px;right:10px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cyan);color:var(--dark);font-size:14px}
.mode-score .st-deliv .board{height:min(var(--board-h),620px)}
[hidden]{display:none!important}
html:not(.mode-score) .reel-frame{height:420px;max-width:100%;width:auto}
html:not(.mode-score) .st-script .board{min-height:600px}
html:not(.mode-score) .render-layout,html:not(.mode-score) .delivery-layout,html:not(.mode-score) .edit-layout{min-height:420px}
@media(max-width:760px){
 .story-grid{gap:8px}.story-card figcaption{padding:5px 6px;min-height:62px}.story-card figcaption>span{font-size:8px}.story-card figcaption p{font-size:11px;margin-top:3px}
 .shot-overlay{font-size:13px;bottom:4px;left:4px;right:4px;padding:5px}.shot-thumb{min-height:40px;padding:6px}
 .week-grid{font-size:9px;gap:2px}.week-grid i{padding:3px 0}.count-switch{font-size:30px}.takeaway-type{font-size:25px}
 .edit-layout{gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}.edit-side{gap:10px}.edit-title{font-size:22px}.edit-timeline>div{font-size:8px}.edit-timeline i{height:9px}.calendar-demo{padding:8px}
 .reel-caption{font-size:17px;padding:6px 4px;bottom:18%}.reel-graphic{padding:7px}.reel-graphic .graph-label{font-size:7px;margin-bottom:4px}.reel-graphic strong{font-size:14px}.tiny-week{font-size:8px;margin:3px 0 5px}.tiny-week b{padding:3px 0}
 .render-layout{grid-template-columns:minmax(40px,.32fr) 14px minmax(0,1fr);gap:8px}.render-arrow{font-size:18px}.before-frame figcaption{font-size:7px;padding:3px}.reel-tag{font-size:7px;top:5px;left:5px;padding:3px}
 .render-controls{gap:6px}.render-controls .mini{font-size:9px}.render-controls .textbtn{font-size:10px}
 .delivery-layout{gap:10px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.delivery-pack{gap:6px}.cover-preview figcaption{font-size:17px;padding:6px}.pack-files{font-size:11px}.pack-files li{min-height:33px;padding:6px 0}.pack-files span{font-size:8px}.pack-label{font-size:8px}.delivery-pack>.mini{font-size:9px;line-height:1.25}
 .delivery-benefit{font-size:18px;padding-top:7px}.delivery-play:after{width:32px;height:32px;bottom:6px;right:6px}
 .mode-score .st-deliv .cap-actions{margin-top:4px}.mode-score .st-deliv .cap h2{font-size:23px}.mode-score .st-deliv .say{font-size:13px}
 .st-final .board,.st-deliv .board{gap:8px}
 html:not(.mode-score) .reel-frame{height:330px}html:not(.mode-score) .render-layout,html:not(.mode-score) .delivery-layout,html:not(.mode-score) .edit-layout{min-height:330px}
}

.calendar-demo .week-grid .skipped{opacity:calc(1 - var(--progress)*.8);transform:scale(calc(1 - var(--progress)*.1))}
.calendar-demo .count-switch s{opacity:calc(1 - var(--progress)*.6)}

@media(max-width:760px){.cover-preview{height:112px;aspect-ratio:auto}.cover-preview figcaption{font-size:16px}.delivery-layout{overflow:hidden}.delivery-benefit{flex:none}}

@media(max-width:760px){.cover-preview img{object-position:50% 5%}}

/* v06: feedback attached to the actual shot, with a visible revision. */
.review-board{--revision:clamp(0,calc((var(--l) - .38)*5),1)}
.review-workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:center}
.review-shot{position:relative;align-self:stretch;min-height:0;margin:0;overflow:hidden;background:var(--dark);border:1px solid var(--line)}
.review-shot>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.review-shot-tag{position:absolute;top:10px;left:10px;background:var(--dark);padding:5px;font:500 9px/1.2 var(--mono)}
.review-caption{position:absolute;bottom:12%;left:7%;right:7%;display:grid;background:rgba(22,35,43,.94);padding:12px 10px;font:800 clamp(17px,4cqw,29px)/1.05 var(--cond);text-transform:uppercase}
.review-caption>*{grid-area:1/1;align-self:center}
.review-old{opacity:calc(1 - var(--revision));text-decoration:line-through;text-decoration-color:var(--accent)}
.review-new{opacity:var(--revision);color:var(--accent);transform:translateX(calc((1 - var(--revision))*-10px))}
.review-pin{position:absolute;bottom:8%;right:4%;display:grid;place-items:center;background:var(--cyan);color:var(--dark);width:28px;height:28px;border-radius:50%;font:700 13px/1 var(--mono);box-shadow:0 0 0 5px rgba(78,195,224,.2)}
.review-thread{display:flex;flex-direction:column;gap:14px;min-width:0}
.client-bubble{position:relative;background:var(--paper);color:var(--dark);padding:15px;border-left:4px solid var(--cyan)}
.client-bubble:before{content:'1';position:absolute;left:-14px;top:-12px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--cyan);font:700 12px/1 var(--mono)}
.comment-author{display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between;font:600 10px/1.3 var(--mono);letter-spacing:.04em}
.comment-author small{font:400 9px/1.3 var(--mono);opacity:.7}
.client-bubble p,.editor-response p{margin:9px 0 0;font-size:clamp(12px,2.7cqw,17px);line-height:1.4}
.editor-response{padding:12px;border-left:2px solid var(--violet);opacity:var(--revision);transform:translateX(calc((1 - var(--revision))*-12px))}
.editor-response .comment-author{color:#cfc4f2}
.change-label{display:inline-block;margin-top:10px;padding:4px 6px;background:var(--cyan);color:var(--dark);font:600 9px/1.2 var(--mono)}
.revision-diff{padding-top:12px;border-top:1px solid var(--line);font-size:clamp(11px,2.4cqw,15px);line-height:1.35}
.revision-diff s,.revision-diff strong{display:block;margin-top:8px}.revision-diff s{color:var(--muted)}.revision-diff strong{color:var(--cyan);opacity:var(--revision)}
.review-status{font:400 11px/1.4 var(--mono);color:var(--muted)}
.review-board .gate{margin-top:0!important;flex:none}
html:not(.mode-score) .review-workspace{min-height:440px}
@media(max-width:760px){
 .review-workspace{gap:12px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .review-thread{gap:8px}.client-bubble{padding:9px 8px}.editor-response{padding:7px 8px}
 .client-bubble p,.editor-response p{font-size:11px;line-height:1.3;margin-top:5px}
 .comment-author{font-size:8px}.comment-author small{font-size:7px}
 .review-shot-tag{top:5px;left:5px;font-size:7px;padding:3px}
 .review-caption{font-size:16px;left:4%;right:4%;padding:8px 5px;bottom:13%}
 .review-pin{width:20px;height:20px;font-size:10px;bottom:6%}
 .revision-diff{padding-top:7px;font-size:10px}.revision-diff>*{margin-top:4px!important}
 .change-label{font-size:7px;margin-top:6px;padding:3px}
 .review-status{font-size:9px}.review-board .gate{font-size:16px;padding:7px}
 .review-board .b-label{font-size:9px}
}
@media(max-width:760px) and (max-height:780px){.revision-diff{display:none}.review-status{display:none}}

/* v07 — source materials converge into the expert profile. */
.gather-board{--assembled:clamp(0,calc((var(--l) - .43)*3.6),1);gap:10px}
.expert-kit{position:relative;flex:1;min-height:0;container-type:size;isolation:isolate}
.profile-sheet{position:absolute;inset:0;background:rgba(22,35,43,.68);border:1px solid rgba(78,195,224,.6);opacity:var(--assembled);transform:scale(calc(.92 + var(--assembled)*.08));z-index:-1}
.kit-photo{position:absolute;left:0;top:0;width:36%;height:52%;margin:0;transform-origin:0 0;transform:translate(calc((32 - var(--assembled)*26)*1cqw),calc((19 - var(--assembled)*14)*1cqh)) scale(calc(1 - var(--assembled)*.45));border:2px solid var(--cyan);overflow:hidden;box-shadow:8px 10px 0 rgba(0,0,0,.2)}
.kit-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;max-width:none}
.kit-photo figcaption{position:absolute;bottom:0;left:0;right:0;background:rgba(22,35,43,.9);padding:6px 4px;font:500 9px/1.2 var(--mono);text-align:center}
.kit-heading{position:absolute;left:30%;right:5%;top:7%;display:flex;flex-direction:column;gap:6px;opacity:var(--assembled);transform:translateX(calc((1 - var(--assembled))*12px))}
.kit-heading strong{font:800 clamp(21px,5cqw,35px)/.95 var(--cond);text-transform:uppercase}
.kit-heading>span:last-child{font:400 clamp(10px,2.5cqw,15px)/1.3 var(--sans);color:var(--muted)}
.kit-material{--arrive:clamp(0,calc((var(--l) - var(--delay))*7),1);position:absolute;left:0;top:0;width:43%;margin:0;z-index:2;box-sizing:border-box;padding:12px;background:var(--paper);color:var(--dark);box-shadow:4px 6px 0 rgba(0,0,0,.2);opacity:var(--arrive);transform-origin:50% 50%;transform:translate(calc((var(--x0) + (var(--x1) - var(--x0))*var(--assembled))*1cqw),calc((var(--y0) + (var(--y1) - var(--y0))*var(--assembled))*1cqh)) translateX(calc((1 - var(--arrive))*-20px)) rotate(calc(var(--tilt)*(1 - var(--assembled))*1deg))}
.material-tag{display:block;font:600 clamp(8px,1.7cqw,10px)/1.25 var(--mono);letter-spacing:.04em;margin-bottom:9px;opacity:.7}
.kit-offer{--delay:.03;--x0:3;--x1:5;--y0:5;--y1:62;--tilt:-4;background:var(--accent)}
.offer-mini{display:flex;flex-direction:column;gap:10px}.offer-rule{display:block;width:34px;height:4px;background:var(--dark)}
.offer-mini strong{font:800 clamp(15px,3.8cqw,26px)/1 var(--cond);text-transform:uppercase;text-wrap:balance}
.offer-link{font:600 9px/1 var(--mono);padding-top:8px;border-top:1px solid rgba(22,35,43,.25)}
.kit-voice{--delay:.11;--x0:2;--x1:5;--y0:64;--y1:34;--tilt:3;background:#d7edf2}
.voice-player{display:flex;align-items:center;gap:7px}.voice-play{flex:none;display:grid;place-items:center;min-width:44px;min-height:44px;border:0;border-radius:50%;background:var(--dark);color:var(--paper);cursor:pointer;font-size:14px}.voice-play:disabled{opacity:.35;cursor:default}
.voice-wave{display:flex;flex:1;align-items:center;justify-content:space-between;height:26px;gap:2px;overflow:hidden}.voice-wave i{display:block;flex:1;min-width:2px;height:calc(var(--bar)*1%);background:var(--dark)}
.voice-length{font:500 9px/1 var(--mono)}
.kit-voice p{font-size:clamp(10px,2.4cqw,14px);line-height:1.3;margin:9px 0 6px}.voice-disclosure{display:block;font:400 clamp(7px,1.7cqw,9px)/1.3 var(--mono);opacity:.7}
.kit-questions{--delay:.20;--x0:55;--x1:52;--y0:33;--y1:34;--tilt:4;background:transparent;color:var(--paper);box-shadow:none;padding:0}
.kit-questions>.material-tag{padding-left:4px;color:var(--cyan);opacity:1}
.question-message{display:flex;align-items:flex-start;gap:7px;padding:12px;background:var(--paper);color:var(--dark);font:500 clamp(12px,2.9cqw,18px)/1.25 var(--sans);border-radius:12px 12px 12px 0;box-shadow:3px 4px 0 rgba(0,0,0,.15)}
.question-message+.question-message{margin:9px 0 0 9px;background:#dcd4ee;border-radius:12px 12px 0 12px}
.message-dot{display:grid;place-items:center;flex:none;width:19px;height:19px;background:var(--dark);color:var(--paper);border-radius:50%;font:700 12px/1 var(--mono)}
.kit-style{--delay:.29;--x0:55;--x1:52;--y0:77;--y1:74;--tilt:-3;background:var(--dark);color:var(--paper);border:1px solid var(--line)}
.style-preview{display:flex;align-items:center;justify-content:space-between;gap:6px}.style-aa{font:800 clamp(32px,7cqw,46px)/.9 var(--cond);color:var(--accent)}
.style-caption{display:block;font:600 clamp(7px,1.6cqw,9px)/1.3 var(--mono);margin-top:8px;color:var(--muted)}
.kit-collected{position:absolute;left:5%;right:5%;bottom:2%;font:500 clamp(8px,1.9cqw,11px)/1.3 var(--mono);color:var(--cyan);opacity:clamp(0,calc((var(--l) - .72)*7),1)}
.kit-progress{display:grid;font:800 clamp(17px,3.8cqw,25px)/1 var(--cond);text-transform:uppercase;flex:none;min-height:2em}
.kit-progress>*{grid-area:1/1;align-self:center}.kit-phase-in{opacity:calc(1 - var(--assembled))}.kit-phase-out{opacity:var(--assembled);color:var(--cyan)}
.kit-disclaimer{flex:none;font-size:9px}
.brief-profile{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);flex:none}
.brief-profile img{width:54px;height:66px;object-fit:cover;object-position:50% 15%;border:1px solid var(--cyan)}
.brief-profile>div{display:flex;flex-direction:column;gap:4px}.brief-profile strong{font:800 clamp(19px,4cqw,28px)/1 var(--cond);text-transform:uppercase}.brief-profile div>span:last-child{font:400 clamp(9px,2cqw,12px)/1.3 var(--mono);color:var(--muted)}
html:not(.mode-score) .expert-kit{flex:none;height:580px}
@media(max-width:760px){
 .gather-board{gap:7px;padding:12px}.gather-board>.b-label{font-size:9px}
 .kit-material{padding:9px}.material-tag{font-size:7px;margin-bottom:6px}
 .offer-mini{gap:6px}.offer-mini strong{font-size:17px}.offer-link{font-size:7px;padding-top:5px}
 .voice-player{gap:4px}.voice-play{min-width:36px;min-height:44px;font-size:12px}.voice-wave{gap:1px;height:20px}.voice-wave i{min-width:1px}.voice-length{font-size:7px}
 .kit-voice p{font-size:10px;line-height:1.25;margin:5px 0}.voice-disclosure{font-size:7px}
 .kit-questions{padding:0}.question-message{padding:9px;font-size:12px;gap:5px}.question-message+.question-message{margin-top:7px;margin-left:5px}.message-dot{width:15px;height:15px;font-size:10px}
 .style-aa{font-size:32px}.kit-style .sw{width:15px;height:15px}.style-caption{font-size:7px;margin-top:5px}
 .kit-heading{gap:5px}.kit-heading strong{font-size:22px}.kit-heading>span:last-child{font-size:10px}.kit-heading .pk{font-size:8px}
 .kit-photo figcaption{font-size:7px;padding:4px}.kit-collected{font-size:8px}.kit-progress{font-size:18px}.kit-disclaimer{font-size:8px}
 .brief-profile{gap:8px;padding-bottom:8px}.brief-profile img{width:42px;height:50px}.brief-profile div>span:last-child{font-size:8px}
 html:not(.mode-score) .expert-kit{height:440px}
}
.kit-collected{opacity:clamp(0,calc((var(--l) - .64)*8),1)}
@media(max-width:760px){
 .kit-voice,.kit-offer{width:47%;--x1:3;padding:8px}
 .kit-voice{--y1:31}.kit-offer{--y1:66}
 .offer-mini strong{font-size:15px}.offer-mini{gap:5px}.offer-rule{height:3px}.offer-link{font-size:6px}
 .kit-voice p{font-size:9px;line-height:1.25}.voice-disclosure{font-size:6px}.voice-length{display:none}
 .kit-questions{--y1:31}.kit-style{--y1:73}.kit-collected{display:none}
}
@media(max-width:760px) and (max-height:780px){
 .gather-board .kit-progress{font-size:16px;min-height:2em}.kit-material .material-tag{font-size:6px;margin-bottom:4px}
 .kit-offer .offer-link{display:none}.kit-offer .offer-mini strong{font-size:14px}
 .kit-voice p{font-size:8px}.kit-voice .voice-player{height:44px}.kit-voice .voice-disclosure{font-size:6px}
 .kit-voice,.kit-questions{--y1:29}.kit-offer{--y1:67}.kit-style{--y1:75}
 .question-message{font-size:11px;padding:8px}.kit-heading strong{font-size:20px}
}

/* v09 — discoverable timeline transport, next to the timeline itself. */
.mode-score .scorebar{row-gap:8px}
.timeline-controls{display:flex;align-items:center;justify-content:flex-end;gap:6px;grid-column:1/-1;grid-row:1}
.transport-hint{margin-right:10px;font:400 11px/1.3 var(--mono);color:var(--muted)}
.transport-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--line);background:var(--dark);color:var(--paper);font:500 20px/1 var(--sans);cursor:pointer}
.transport-btn:hover:enabled{border-color:var(--cyan);color:var(--cyan)}
.transport-btn:disabled{opacity:.3;cursor:default}
.transport-play{min-width:104px;background:var(--cyan);color:var(--dark);border-color:var(--cyan);font:700 13px/1 var(--mono)}
.transport-play:hover:enabled{background:#71d1e8;color:var(--dark)}
.transport-play[aria-pressed="true"]{background:var(--paper);border-color:var(--paper)}
.mode-score .sb-now{grid-column:1;grid-row:2}.mode-score .sb-track{grid-column:2;grid-row:2}
@media(max-width:760px){
 .mode-score .scorebar{grid-template-columns:minmax(0,1fr) auto;row-gap:5px;column-gap:6px}
 .mode-score .timeline-controls{grid-column:2;grid-row:1;gap:3px}
 .mode-score .sb-now{grid-column:1;grid-row:1;gap:6px;align-self:center}
 .mode-score .sb-track{grid-column:1/-1;grid-row:2}
 .mode-score .sb-skip,.transport-hint{display:none}
 .transport-btn{padding:0 8px}.transport-play{min-width:76px;font-size:11px;gap:6px}
 .mode-score .sb-name{font-size:16px}.mode-score .sb-no{font-size:10px}
}
@media(max-width:360px){.transport-play{min-width:44px}.transport-play [data-play-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.mode-score .sb-name{font-size:15px}}


/* v10: visual topic concepts. Only transforms/opacity follow the existing --l. */
.topics-board{gap:10px}
.topics-board>.frag-quote{font-size:clamp(13px,3cqw,18px);line-height:1.25;margin:0;padding-left:12px;border-left:2px solid var(--cyan)}
.topics-board .topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:12px;margin:0;padding:24px 3px;--s:clamp(0,calc((var(--l) - .55)*4),1)}
.topics-board .topics li{height:80%;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:10px;padding:12px 10px;background:var(--dark);opacity:calc(var(--a)*(1 - .3*var(--s)));transform:translate3d(calc(var(--s)*(var(--order) - 1)*8px),calc((1 - var(--a))*22px + (var(--order) - 1)*12px),0) rotate(calc((var(--order) - 1)*-2deg));box-shadow:0 10px 20px #0002}
.topics-board .topics li.is-target{z-index:2;opacity:var(--a);transform:translate3d(0,calc((1 - var(--a))*22px - var(--s)*10px),0) scale(calc(1 + var(--s)*.04));border-color:var(--cyan);box-shadow:0 14px 24px #0003}
.topics-board .tn{width:25px;height:25px;font-size:11px;flex:none}
.topics-board .tt{font-size:clamp(16px,3.8cqw,23px);line-height:1.05}
.topics-board .sel-l{margin-top:auto;font-size:9px;letter-spacing:0;min-height:22px}
.topic-motif{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;flex:1;min-height:0;padding:12px 5px;background:var(--accent);color:var(--dark);overflow:hidden}
.topic-motif small{font:500 9px/1.25 var(--mono);text-align:center}
.motif-number{display:flex;align-items:center;gap:8px;font:800 clamp(28px,7cqw,48px)/1 var(--cond)}
.motif-number s{opacity:.45}.motif-number span{font-size:.55em}
.motif-week{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;width:100%;font:700 11px/1 var(--mono)}
.motif-week>*{padding:9px 0;text-align:center;font-style:normal;background:#16232b22}.motif-week b{background:var(--dark);color:var(--accent)}
.motif-list{font:600 clamp(10px,2.1cqw,13px)/1.8 var(--mono)}
.motif-quote{font:700 clamp(12px,2.7cqw,17px)/1.15 var(--sans);text-align:center}
.motif-bubbles{display:grid;gap:7px;width:100%;font:600 11px/1.2 var(--sans)}.motif-bubbles b{padding:7px;background:var(--dark);color:var(--accent)}.motif-bubbles b+ b{background:#ffffffaa;color:var(--dark);text-align:right}
.topic-choice{font:800 clamp(18px,4.2cqw,26px)/1 var(--cond);text-transform:uppercase;margin:0!important}.topic-choice strong{color:var(--cyan)}
.topic-choice>span{display:block;margin-top:6px;font:400 10px/1.3 var(--mono);text-transform:none;color:var(--muted)}
.board-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex:none}.board-head .b-label{min-width:0;margin:0}
.hotspot-trigger{display:inline-flex;align-items:center;gap:5px;flex:none;max-width:50%;min-height:32px;padding:3px 0;border:0;background:none;color:var(--cyan);font:500 10px/1.2 var(--mono);text-align:left;cursor:pointer}
.hotspot-trigger>span{display:grid;place-items:center;width:21px;height:21px;flex:none;border:1px solid var(--cyan);border-radius:50%;font-size:13px}.hotspot-trigger:hover>span,.hotspot-trigger[aria-expanded=true]>span{background:var(--cyan);color:var(--dark)}
.process-help{position:fixed;inset:96px 24px auto auto;margin:0;box-sizing:border-box;width:300px;max-width:calc(100vw - 32px);padding:25px 22px;background:var(--paper);color:var(--dark);border:1px solid var(--cyan);box-shadow:0 12px 40px #0004;font:400 15px/1.5 var(--sans)}
.process-help[hidden]{display:none}.process-help .help-eyebrow{font:500 10px/1 var(--mono);text-transform:uppercase;color:var(--blue);margin:0 0 14px}.process-help h3{font:800 27px/1 var(--cond);text-transform:uppercase;margin:0 20px 16px 0}.process-help p{margin:0 0 16px}.process-help small{display:block;font:400 11px/1.4 var(--mono);color:#465a64}
[data-help-close]{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;background:none;color:var(--dark);font-size:25px;cursor:pointer}
@media(max-width:760px){
 .topics-board{gap:7px}.topics-board>.b-label{font-size:9px}.topics-board>.frag-quote{font-size:12px;line-height:1.15}
 .topics-board .topics{grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;padding:3px}
 .topics-board .topics li{position:relative;height:auto;align-self:stretch;display:grid;grid-template-columns:65px minmax(0,1fr);grid-template-rows:1fr auto;gap:2px 9px;padding:7px 9px;transform:translate3d(calc((var(--order) - 1)*4px),calc((1 - var(--a))*16px),0) rotate(calc((var(--order) - 1)*-.6deg))}
 .topics-board .topics li.is-target{transform:translate3d(0,calc((1 - var(--a))*16px),0) scale(calc(1 + .015*var(--s)))}
 .topics-board .tn{position:absolute;left:7px;top:5px;width:17px;height:17px;font-size:8px;background:var(--dark);color:var(--paper);z-index:1}
 .topics-board .topic-motif{grid-column:1;grid-row:1/3;min-height:0;padding:3px;gap:0;align-self:stretch}.topic-motif small{display:none}
 .topics-board .tt{grid-column:2;grid-row:1;align-self:center;font-size:16px}.topics-board .sel-l{grid-column:2;grid-row:2;min-height:0;font-size:8px;margin:0;line-height:1.1}
 .motif-number{font-size:30px;gap:3px}.motif-week{font-size:8px;gap:1px}.motif-week>*{padding:7px 0}.motif-list{font-size:8px;line-height:1.5}.motif-quote{font-size:10px}.motif-bubbles{font-size:8px;gap:2px}.motif-bubbles b{padding:3px}
 .topic-choice{font-size:20px}.topic-choice>span{font-size:8px;margin-top:3px}
 .hotspot-trigger{font-size:9px;min-height:32px;max-width:48%}.board-head{gap:6px}.board-head .b-label{font-size:9px}
 .process-help{inset:90px 16px auto 16px;width:auto;max-height:calc(100svh - 200px);overflow:auto;padding:22px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.topics-board .topics li,.topics-board .topics li.is-target{transform:none}}

/* v11: same Understand content, a visual four-part brief. */
.understand-board .brief-profile{position:relative;padding:8px 12px 12px;background:#16232b99;border:1px solid var(--line);border-bottom-color:var(--cyan)}
.understand-board .brief-profile::after{content:"";position:absolute;left:50%;top:100%;height:14px;border-left:1px solid var(--cyan)}
.understand-board .brief{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;margin:2px 0 0;isolation:isolate}
.understand-board .brief::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px solid var(--line);z-index:-1}
.understand-board .brief-tile{display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:44px 1fr auto;grid-template-areas:"symbol k" "v v" "src src";gap:9px;padding:13px;border:1px solid var(--line);border-top:2px solid var(--cyan);background:var(--dark);transform:translate3d(0,calc((1 - var(--a))*18px),0);overflow:hidden}
.understand-board .tile-1{border-top-color:var(--violet)}.understand-board .tile-2{border-top-color:var(--accent)}
.brief-symbol{grid-area:symbol;display:block;position:relative;width:60px;height:44px;color:var(--cyan)}
.brief-symbol svg{width:60px;height:40px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.tile-1 .brief-symbol{color:var(--violet)}.tile-2 .brief-symbol{color:var(--accent)}
.brief-symbol img{width:60px;height:44px;object-fit:cover;object-position:50% 20%}
.brief-sample-caption{position:absolute;left:3px;bottom:3px;right:3px;padding:2px;background:var(--accent);color:var(--dark);font:800 6px/.95 var(--cond)}
.understand-board .row .k{font:800 clamp(19px,4.4cqw,27px)/1 var(--cond);text-transform:uppercase;letter-spacing:0;align-self:center;color:var(--paper)}
.understand-board .row .v{font:500 clamp(14px,3cqw,19px)/1.22 var(--sans);align-self:start}
.understand-board .row .src{border-top:1px solid var(--line);padding-top:7px;font-size:clamp(8px,1.7cqw,10px)}
.understand-board .frag-quote{margin:0;font-size:clamp(12px,2.5cqw,15px);line-height:1.2}

/* The target is neutral until the illustrative cursor reaches and clicks it. */
.topic-stage{position:relative;flex:1;min-height:0;isolation:isolate}
.topic-stage .topics{height:100%;--s:clamp(0,calc((var(--l) - .70)*8),1)}
.topics-board:not([data-choice="picked"]) .topics li.is-target{opacity:var(--a);transform:translate3d(0,calc((1 - var(--a))*22px + (var(--order) - 1)*12px),0) rotate(calc((var(--order) - 1)*-2deg));border-color:var(--line);box-shadow:0 10px 20px #0002}
.topics-board:not([data-choice="picked"]) .topics li.is-target .tn{background:transparent;color:var(--paper);border-color:var(--line)}
.topics-board:not([data-choice="picked"]) .topics li.is-target .sel-l{visibility:hidden}
.topics-board[data-choice="hover"] .topics li.is-target{border-color:rgba(78,195,224,.7)}
.demo-cursor{--approach:clamp(0,calc((var(--l) - .36)*3.9),1);--press:calc(clamp(0,calc((var(--l) - .66)*40),1) - clamp(0,calc((var(--l) - .72)*40),1));position:absolute;left:calc(16.666% + var(--target-index,1)*33.333%);top:45%;z-index:5;width:30px;height:38px;pointer-events:none;opacity:calc(clamp(0,calc((var(--l) - .32)*15),1)*(1 - clamp(0,calc((var(--l) - .86)*12),1)));transform:translate3d(calc((1 - var(--approach))*130px),calc((1 - var(--approach))*90px),0) scale(calc(1 - var(--press)*.16));transform-origin:3px 2px;filter:drop-shadow(2px 3px 2px #0005)}
.demo-cursor svg{position:relative;z-index:2;display:block;width:30px;height:38px;fill:var(--paper);stroke:var(--dark);stroke-width:1.5;stroke-linejoin:round}
.demo-cursor small{position:absolute;top:36px;left:14px;white-space:nowrap;background:var(--paper);color:var(--dark);padding:4px 6px;font:500 8px/1 var(--mono)}
.demo-cursor i{position:absolute;left:-15px;top:-15px;width:36px;height:36px;border:2px solid var(--cyan);border-radius:50%;opacity:calc(clamp(0,calc((var(--l) - .69)*60),1)*(1 - clamp(0,calc((var(--l) - .73)*15),1)));transform:scale(calc(.4 + clamp(0,calc((var(--l) - .69)*7),1)*1.4))}
html:not(.mode-score) .demo-cursor{display:none}
@media(max-width:760px){
 .understand-board{gap:7px}.understand-board .brief-profile{padding:6px 8px;gap:8px}.understand-board .brief-profile img{width:36px;height:44px}.understand-board .brief-profile strong{font-size:20px}
 .understand-board .brief{gap:7px}.understand-board .brief-tile{grid-template-columns:38px minmax(0,1fr);grid-template-rows:30px 1fr auto;gap:5px;padding:8px;border-top-width:2px}
 .brief-symbol,.brief-symbol img{width:38px;height:30px}.brief-symbol svg{width:38px;height:28px}.brief-sample-caption{font-size:4px;left:1px;right:1px;bottom:1px}
 .understand-board .row .k{font-size:17px}.understand-board .row .v{font-size:12px;line-height:1.15}.understand-board .row .src{font-size:8px;line-height:1.1;padding-top:4px}.understand-board .frag-quote{font-size:11px}
 .topics-board:not([data-choice="picked"]) .topics li.is-target{transform:translate3d(calc((var(--order) - 1)*4px),calc((1 - var(--a))*16px),0) rotate(calc((var(--order) - 1)*-.6deg))}
 .demo-cursor{left:55%;top:calc(16.666% + var(--target-index,1)*33.333%);width:25px;height:32px;transform:translate3d(calc((1 - var(--approach))*80px),calc((1 - var(--approach))*60px),0) scale(calc(1 - var(--press)*.16))}.demo-cursor svg{width:25px;height:32px}.demo-cursor small{top:29px;font-size:7px}
}
@media(prefers-reduced-motion:reduce){.demo-cursor{display:none}.understand-board .brief-tile{transform:none}}

/* v12: OwnTake entry. The three expert portraits are the start action. */
.product-brand{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:none}
.product-name{font:800 34px/.9 var(--cond);letter-spacing:-.02em;color:var(--paper)}
.maker-by{margin-top:3px;font:500 8px/1 var(--mono);color:var(--muted)}
.product-brand .logo{--logo-w:140px;line-height:0}
html.mode-score{--deck-top:clamp(96px,13svh,126px)}
.act[data-view="intro"] .scorebar{visibility:hidden;opacity:0;pointer-events:none}
.act[data-view="intro"] .topbar [data-change]{display:none}
.act:not([data-view="delivery"]) .topbar [data-talk]{display:none}
.choose{gap:12px;align-items:stretch;max-width:680px}
.choose-l{margin-bottom:2px;font-size:11px}
.choose .persona,.choose .persona[aria-pressed="true"]{display:flex;flex-direction:column;width:clamp(145px,14vw,190px);min-height:0;padding:0;border:1px solid var(--line);border-radius:3px;background:var(--dark);color:var(--paper);text-align:left;overflow:hidden}
.choose .persona:hover,.choose .persona[aria-pressed="true"]:hover{border-color:var(--cyan);background:#1e3a46}
.persona-portrait{display:block;width:100%;height:clamp(95px,10vw,135px);overflow:hidden;background:var(--navy)}
.persona-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.persona-job{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:43px;padding:10px 12px;font:700 14px/1.1 var(--sans)}
.persona-job>span{color:var(--cyan);font-size:17px}
.choose-note{margin:10px 0 0;color:var(--muted);font:400 10px/1.35 var(--mono)}
@media(max-width:760px){
 .product-name{font-size:29px}.product-brand .logo{--logo-w:117px}.maker-by{font-size:7px;margin-top:2px}
 .mode-score .intro{top:clamp(100px,15svh,140px)}
 .choose{gap:8px}.choose-l{font-size:10px;line-height:1.3}
 .choose .persona,.choose .persona[aria-pressed="true"]{width:calc((100% - 16px)/3);padding:0;font-size:12px}
 .persona-portrait{height:clamp(84px,24vw,118px)}
 .persona-job{min-height:44px;padding:8px 7px;font-size:11px;gap:3px}.persona-job>span{font-size:14px}
 .choose-note{font-size:9px;max-width:32em}
}
@media(max-height:650px) and (min-width:761px){.mode-score .intro{top:112px}.hl{font-size:clamp(52px,6.6vw,90px)}.oneline{margin-top:10px}.choose{margin-top:18px}.persona-portrait{height:88px}}
/* Keep complete faces in the wide entry thumbnails. */
.persona-portrait img{object-position:50% 3%}
/* v13: explicit, persistent interface language; never changes scroll timing. */
.language-control{display:inline-flex;align-items:center;flex:none}
.language-control select{appearance:auto;width:60px;min-height:36px;border:1px solid var(--line);border-radius:3px;padding:5px 7px;background:var(--dark);color:var(--paper);font:600 12px/1 var(--mono);cursor:pointer}
.audio-language{margin:0!important;font:400 9px/1.3 var(--mono);color:var(--muted)}
html[lang="de"] .cap h2{font-size:clamp(25px,2.8vw,40px)}
html[lang="pl"] .hl,html[lang="de"] .hl{font-size:clamp(46px,7.1vw,110px)}
@media(max-width:760px){
 .mode-score .topnav{gap:8px}.mode-score .topbar{gap:10px}.mode-score .topnav [data-change]{font-size:10px;max-width:110px;text-align:right;line-height:1.2}
 .mode-score .topbar [data-talk]{display:none}
 .language-control select{width:53px;font-size:11px;padding:4px;min-height:34px}
 html[lang="de"] .cap h2,html[lang="pl"] .cap h2{font-size:23px}
 html[lang="pl"] .hl,html[lang="de"] .hl{font-size:46px}
 html[lang="de"] .say,html[lang="pl"] .say{font-size:13px;line-height:1.3}
 html[lang="de"] .sb-name,html[lang="pl"] .sb-name{font-size:14px}
 html[lang="de"] .persona-job,html[lang="pl"] .persona-job{font-size:10px}
 html[lang="de"] .understand-board .row .k,html[lang="pl"] .understand-board .row .k{font-size:15px}
}
.persona-role{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.persona-job>.persona-role{color:inherit;font-size:inherit}
html[lang="de"] .persona-job{font-size:12px}
@media(max-width:760px){html[lang="de"] .persona-job{font-size:10px}}
/* Translation length is variable. Keep the delivered package inside its board. */
.cap h2{overflow-wrap:anywhere;hyphens:auto}
.mode-score .delivery-layout{align-items:stretch}
.mode-score .delivery-pack{height:100%;min-height:0;gap:7px}
.mode-score .delivery-pack .cover-preview{flex:1;min-height:70px;height:auto;aspect-ratio:auto}
.mode-score .delivery-pack .pack-files,.mode-score .delivery-pack .pack-label,.mode-score .delivery-pack>.mini,.mode-score .delivery-pack>.audio-language{flex:none}
.mode-score .delivery-pack>.mini{font-size:10px;line-height:1.2}
.mode-score .delivery-benefit{flex:none;font-size:clamp(16px,3.7cqw,24px);line-height:1.05;overflow-wrap:anywhere}
.mode-score .delivery-layout>.reel-frame{align-self:center;justify-self:center;max-height:100%}
@media(max-width:760px){.mode-score .delivery-pack{gap:5px}.mode-score .delivery-pack .cover-preview{min-height:52px}.mode-score .delivery-pack>.mini,.mode-score .delivery-pack>.audio-language{font-size:8px;line-height:1.15}.mode-score .delivery-benefit{font-size:16px}}
html[lang="de"] .cap h2{font-size:clamp(23px,2.4vw,34px)}
.mode-score .cover-preview img{object-position:50% 0%}
.mode-score .cover-preview figcaption{font-size:clamp(14px,3cqw,21px);line-height:1}
@media(max-width:760px){html[lang="de"] .cap h2{font-size:23px}.mode-score .cover-preview figcaption{font-size:13px;padding:5px}}

/* v14: compact product endorsement, own-likeness promise and native timeline seeking. */
.product-brand{display:grid;grid-template-columns:max-content;gap:7px}
.product-name{grid-column:1;grid-row:1}
.maker-line{grid-column:1;grid-row:2;display:flex;align-items:center;gap:5px;width:100%;min-width:0}
.maker-line .maker-by{flex:none;margin:0;font-size:10px}
.product-brand .maker-line .logo{flex:1;min-width:0;width:0;margin:0;line-height:0}
.product-brand .maker-line .logo svg{display:block;width:100%;height:auto}
.identity-promise{color:var(--paper)}
.identity-detail{margin:8px 0 0;max-width:58ch;font:400 clamp(14px,1.25vw,18px)/1.4 var(--sans);color:var(--muted)}
.sb-seek{position:absolute;z-index:3;left:-6px;top:-2px;width:calc(100% + 12px);height:24px;margin:0;padding:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:pan-y}
.sb-seek::-webkit-slider-runnable-track{height:3px;background:transparent}
.sb-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:24px;margin-top:-10px;background:transparent;border:0}
.sb-seek::-moz-range-track{height:3px;background:transparent}
.sb-seek::-moz-range-thumb{width:12px;height:24px;background:transparent;border:0}
.sb-seek:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}
.sb-track:has(.sb-seek:hover) .sb-head,.sb-track:has(.sb-seek:focus-visible) .sb-head{width:5px;box-shadow:0 0 14px var(--cyan)}
@media(max-width:760px){.maker-line{gap:4px}.maker-line .maker-by{font-size:8px}.identity-detail{font-size:13px;max-width:42ch;margin-top:6px}.identity-promise{font-size:17px}}

/* v15: source insight, traceable topic and the same approved composition in both frames. */
.kit-insight{flex:none;margin:0;border-left:2px solid var(--accent);padding-left:9px;font:400 clamp(11px,2.3cqw,14px)/1.3 var(--sans);color:var(--paper)}
.kit-insight>span{display:block;font:500 8px/1.3 var(--mono);text-transform:uppercase;color:var(--cyan);margin-bottom:3px}
.selected-topic{flex:none;display:flex;gap:8px;align-items:baseline;margin:0 0 5px;font-size:12px;line-height:1.25}.selected-topic>span{flex:none;color:var(--cyan);font:500 8px/1.3 var(--mono);text-transform:uppercase}.selected-topic strong{font-weight:500}
.before-frame{opacity:1;container-type:inline-size}
.before-frame .reel-caption{font-size:clamp(6px,8cqw,12px);padding:3px 2px;bottom:17%}
.before-frame .reel-graphic{padding:4px;left:5%;right:5%}.before-frame .graph-label{font-size:clamp(4px,4cqw,7px);margin-bottom:3px}.before-frame .reel-graphic strong{font-size:clamp(6px,8cqw,12px)}.before-frame .tiny-week{font-size:clamp(4px,5cqw,8px);gap:2px;margin:2px 0}.before-frame .tiny-week b{padding:2px 0}
.voice-length[hidden],.audio-language[hidden]{display:none!important}
@media(max-width:760px){.kit-insight{font-size:11px;line-height:1.2}.kit-insight>span{font-size:7px;margin-bottom:2px}.gather-board{gap:7px}.selected-topic{font-size:10px;gap:5px}.selected-topic>span{font-size:7px}}
.kit-voice p{font-size:clamp(9px,2.1cqw,12px);line-height:1.2;margin:6px 0 3px}
@media(max-width:760px){
 .mode-score .edit-layout{grid-template-rows:minmax(0,1fr)}
 .mode-score .edit-side{min-height:0;gap:6px}
 .mode-score .edit-title{font-size:18px}
 .mode-score .edit-side .calendar-demo{padding:5px}
 .mode-score .edit-side .speech-pair{font-size:10px;line-height:1.2;gap:5px}
 .mode-score .edit-side .speech-pair span{padding:5px}
 .mode-score .edit-side .calendar-demo>p{font-size:9px;margin-top:5px}
 .mode-score .edit-side>.mini{font-size:9px;line-height:1.2}
}

/* v18: no decorative canvas or WebGL; keep the existing process and hotspot animation. */
.hotspot-trigger>span{animation:hotspot-beacon 2.4s ease-out infinite;transform-origin:center}
.hotspot-trigger:hover>span,.hotspot-trigger:focus-visible>span,.hotspot-trigger[aria-expanded="true"]>span{animation:none;background:var(--cyan);color:var(--dark);box-shadow:0 0 0 4px #4ec3e022}
@keyframes hotspot-beacon{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #4ec3e000}12%{transform:scale(1.10);box-shadow:0 0 0 0 #4ec3e077}65%{transform:scale(1);box-shadow:0 0 0 10px #4ec3e000}}
.mode-flow .hotspot-trigger>span{animation:none}
@media(prefers-reduced-motion:reduce){.hotspot-trigger>span{animation:none}}

/* v17: language flags and an inset chevron; no manual Motion toggle. */
.language-control select{appearance:none;-webkit-appearance:none;width:98px;min-height:38px;padding:6px 31px 6px 10px;font-size:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f6f5f3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
@media(max-width:760px){.language-control select{width:90px;min-height:34px;font-size:11px;padding:5px 28px 5px 8px;background-position:right 10px center}}

/* Keep the approval status out of the draft's interactive audio controls. */
.st-draft .gate{flex:0 0 auto;pointer-events:none}
.st-draft .edit-layout{flex:1 1 0}

/* Keep each mobile scene inside its own scroll area, above timeline controls.
   Content may grow with translations or larger text without covering controls. */
@media(max-width:760px){
 html.mode-score{--deck-bot:110px}
 .mode-score .steps{bottom:var(--deck-bot)}
 .mode-score .step{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding-bottom:16px;align-content:start;grid-auto-rows:max-content}
 .mode-score .board{min-height:var(--board-h)}
 .mode-score .scorebar{background:var(--dark);padding-top:8px}
}