:root{--ink:#1B2A41;--sub:#33435C;--accent:#8A6A3B;--blue:#2F5496;--boxbg:#EEF2F7;--rule:#B8C4D6;--th:#DCE4EF;--tag:#F3E3A6;--tagfg:#3A2E00;--tagb:#E0B90F;--cream:#F1F6F7;--ok:#2F6B57;--low:#8A5A00;--t:.45s}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,"EB Garamond",serif;color:var(--ink);background:var(--cream);font-size:17px;line-height:1.5}
button{font:inherit;cursor:pointer}
.sans{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.btn{font-family:system-ui,sans-serif;font-size:14px;font-weight:600;border:1px solid var(--blue);background:#fff;color:var(--blue);border-radius:6px;padding:7px 13px;transition:background var(--t),color var(--t)}
.btn:hover,.btn.on{background:var(--blue);color:#fff}
.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:#21407a}
.btn.ghost{border-color:var(--rule);color:var(--sub)}
.btn.demo{border-color:var(--tagb);background:var(--tag);color:var(--tagfg)}
/* Signed-in account controls: in-flow sticky bar (Your exams + Sign out pills). Never fixed-overlay. */
.acct-bar{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:6px 12px;background:#fff;border-bottom:1px solid #c5c5c5}
.acct-bar .acct-form{margin:0;display:inline}
.acct-bar .acct-btn{font:13px system-ui,sans-serif;padding:4px 10px;border:1px solid #aaa;border-radius:4px;background:#fff;color:#222;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.acct-bar a.acct-btn:hover,.acct-bar button.acct-btn:hover{background:#f3f3f3}
.acct-bar a.acct-btn:focus-visible,.acct-bar button.acct-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.start{max-width:720px;margin:40px auto;padding:30px;background:#fff;border:1px solid var(--rule);border-radius:10px}
.start h1{font-weight:400;font-size:34px;margin:0 0 4px}.start .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;background:var(--ink);color:#fff;font-family:system-ui,sans-serif;font-size:14px}
.top .brand{font-weight:700}.top .case{opacity:.85}.top .sp{flex:1}
.top .btn{padding:5px 10px;font-size:13px;background:transparent;color:#fff;border-color:#8ea3c4}
.top .btn.on,.top .btn:hover{background:#fff;color:var(--ink)}
.timer{font-variant-numeric:tabular-nums;font-weight:700;background:#0f1a2b;border-radius:5px;padding:4px 9px}
.timer.warn{background:var(--low)}
.searchbar{display:none;gap:6px;align-items:center}.searchbar.on{display:flex}
.searchbar input{padding:5px 8px;border-radius:5px;border:0;width:170px}
.grid{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 50px - var(--fh,0px))}
.pane{overflow:auto;padding:20px 24px}
.left{background:#fff;border-right:1px solid var(--rule)}
.right{background:var(--boxbg)}
.sec{margin-bottom:18px;transition:opacity var(--t),filter var(--t)}
.sec h3{font-size:16px;font-family:system-ui,sans-serif;color:var(--blue);margin:0 0 6px;display:flex;gap:8px;align-items:center}
.sec.past{opacity:.45;filter:grayscale(1)}
.sec.past h3::after{content:"Earlier section, read only";font-size:11px;font-weight:600;color:#555;background:#e5e5e5;border-radius:4px;padding:1px 6px}
mark.hit{background:#FCEFB4;border-radius:2px}
.qcard{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:18px 20px}
.qmeta{display:flex;justify-content:space-between;font-family:system-ui,sans-serif;font-size:13px;color:var(--sub)}
.qnum{font-weight:700}
.stem{font-weight:700;margin:10px 0 12px}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:1px solid var(--rule);border-radius:7px;padding:10px 12px;margin:7px 0;transition:border-color var(--t),background var(--t)}
.opt:hover{border-color:var(--blue)}.opt.sel{border-color:var(--blue);background:#e6edf8}
.opt .l{flex:0 0 26px;height:26px;border-radius:13px;border:1.5px solid var(--blue);display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif;font-weight:700;font-size:13px;color:var(--blue)}
.opt.sel .l{background:var(--blue);color:#fff}
.nav{display:flex;gap:8px;justify-content:space-between;margin-top:14px;flex-wrap:wrap}
.flagmark{color:var(--low);font-weight:700}
.dots{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.dot{width:30px;height:30px;border-radius:6px;border:1px solid var(--rule);background:#fff;font-family:system-ui,sans-serif;font-size:12px;position:relative}
.dot.ans{background:#dfe8f6}.dot.cur{outline:2px solid var(--blue)}.dot.fl::after{content:"\2691";position:absolute;top:-8px;right:-5px;color:var(--low);font-size:13px}
.rev table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.rev td,.rev th{padding:7px 9px;border-bottom:1px solid #e3e8f0;text-align:left}
.rev th{background:var(--th);font-family:system-ui,sans-serif;font-size:13px}
.notes{position:fixed;right:14px;top:60px;width:320px;max-width:calc(100vw - 28px);background:#fffdf3;border:1px solid var(--tagb);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:10px;z-index:30;transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform var(--t),opacity var(--t)}
.notes.on{transform:none;opacity:1;pointer-events:auto}
.notes textarea{width:100%;height:180px;border:1px solid var(--rule);border-radius:5px;padding:8px;font:15px Georgia,serif}
.notes .h{font-family:system-ui,sans-serif;font-size:13px;font-weight:700;display:flex;justify-content:space-between;margin-bottom:6px}
.disc{font-family:system-ui,sans-serif;font-size:11.5px;color:var(--sub);padding:8px 14px;background:#fff;border-top:1px solid var(--rule)}
/* review */
.review{max-width:940px;margin:0 auto;padding:26px 20px 50px}
.rhead{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.scout{height:96px;width:auto;transform:translateX(-140%) rotate(-8deg);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s}
.scout.in{transform:none;opacity:1}
.bubble{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:10px 14px;opacity:0;transform:translateY(8px);transition:opacity .5s .5s,transform .5s .5s}
.bubble.in{opacity:1;transform:none}
.card{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:18px 22px;margin:18px 0;box-shadow:0 2px 8px rgba(27,42,65,.06)}
.card h2{margin:0 0 10px;font-size:22px;display:flex;gap:10px;align-items:center}
.card h2 .n{flex:0 0 30px;height:30px;border-radius:15px;background:var(--blue);color:#fff;font:700 15px system-ui,sans-serif;display:flex;align-items:center;justify-content:center}
.tag{display:inline-block;font:600 12.5px system-ui,sans-serif;background:var(--tag);color:var(--tagfg);border:1px solid var(--tagb);border-radius:4px;padding:2px 8px}
.big{font:700 40px system-ui,sans-serif;color:var(--blue)}
.band{display:inline-block;font:700 14px system-ui,sans-serif;border-radius:20px;padding:4px 12px;margin-left:8px}
.band.b1{background:#E8F2EA;color:var(--ok)}.band.b2{background:#FFF4CC;color:#7a5c00}.band.b3{background:#E6EEF8;color:var(--blue)}
.note{font:13px system-ui,sans-serif;color:var(--sub)}
.brow{display:grid;grid-template-columns:minmax(150px,1.4fr) 70px 1fr 46px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #eef1f6;font-size:15px}
.brow .c{font:13px system-ui,sans-serif;text-align:center}
.track{height:12px;background:#e3e8f0;border-radius:6px;overflow:hidden}
.fill{display:block;height:100%;width:0;border-radius:6px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.fill.ok{background:var(--ok)}.fill.mid{background:#7FA7C9}.fill.low{background:#E3B04B}
.pct{font:600 13px system-ui,sans-serif}
.cap{font:600 12.5px system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);margin:16px 0 4px}
.pat{border-left:4px solid var(--low);background:#FFF9EA;padding:10px 14px;margin:10px 0;border-radius:0 6px 6px 0;opacity:.4;transform:translateY(6px);transition:opacity .25s ease-out,transform .25s ease-out}
.pat.in{opacity:1;transform:none}
.pat h4{margin:0 0 4px;font-size:17px}.pat .cnt{font:700 13px system-ui,sans-serif;color:var(--low)}
.chip{display:inline-block;font:12px system-ui,sans-serif;background:var(--th);border-radius:12px;padding:2px 9px;margin:2px 4px 2px 0}
.miss{border:1px solid var(--rule);border-radius:8px;padding:14px 16px;margin:14px 0}
.miss .stem{margin:4px 0 10px}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:15px}
.pick{border-radius:6px;padding:8px 12px}.pick b{display:block;font:600 11.5px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.pick.you{background:#FFF6E0;border:1px solid #EBCB86}.pick.best{background:#E8F2EA;border:1px solid #A9CDB2}
.scoutbox{background:var(--boxbg);border-left:4px solid var(--blue);padding:10px 14px;margin-top:12px}
.kt{display:flex;align-items:center;gap:8px;margin:0 0 6px}.kt img{height:52px}
.narr{background:#fff;border-left:3px solid var(--accent);padding:8px 12px;font-size:15.5px;margin:6px 0 10px}
mark.clue{background:linear-gradient(90deg,#FCEFB4 50%,transparent 50%);background-size:200% 100%;background-position:100% 0;transition:background-position 1.1s ease .2s;padding:0 2px;border-radius:2px}
mark.clue.on{background-position:0 0}
.sh{font:600 13.5px system-ui,sans-serif;margin:8px 0 2px;color:var(--ink)}
.take{background:#FFF8D6;border:1px solid var(--tagb);border-radius:5px;padding:7px 11px;font-weight:600;margin-top:6px}
.card ul{margin:6px 0;padding-left:22px}.card li{margin:4px 0}
.steps li b{color:var(--blue)}
.gatestats{display:flex;flex-wrap:wrap;gap:10px}.gs{background:var(--boxbg);border-left:4px solid var(--blue);padding:8px 12px;border-radius:0 6px 6px 0;font-size:15px}
.gtag{font:700 12.5px system-ui,sans-serif;background:var(--th);border-radius:4px;padding:1px 7px}
.gpick{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.gflow{position:relative;padding:4px 0 4px}
.gate{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:8px;padding:8px 12px;margin:6px 0;max-width:600px;padding-right:62px;transition:opacity .35s,border-color .35s,background .35s}
.gate .gn{flex:0 0 26px;height:26px;border-radius:13px;background:var(--th);font:700 13px system-ui,sans-serif;display:flex;align-items:center;justify-content:center}
.gate .gd{font-size:14px;color:var(--sub)}
.gate.pass{opacity:.55}.gate.pass .gn{background:#E8F2EA;color:var(--ok)}
.gate.stop{border-color:var(--tagb);background:#FFF8D6;box-shadow:0 0 0 2px var(--tag)}.gate.stop .gn{background:var(--tag);color:var(--tagfg)}
.gate.dim{opacity:.35}
.gscout{position:absolute;left:0;top:0;height:52px;z-index:2;transform:translate(-60px,0) scaleX(-1);transition:transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.gcap{min-height:1.5em;background:var(--boxbg);padding:6px 10px;border-radius:6px}
@media (max-width:760px){.gate{margin-left:0!important}.gscout{height:40px}
 .grid{grid-template-columns:1fr;height:auto}.pane{overflow:visible;padding:16px}
 .left{border-right:0;border-bottom:1px solid var(--rule)}
 .top{font-size:13px}.searchbar input{width:120px}
 .picks{grid-template-columns:1fr}.brow{grid-template-columns:1fr 54px 1fr 40px}
 .scout{height:72px}
 /* Phone question nav: Previous|Next on top, Flag below (NCMHCE has 3 buttons; Next doubles as Review section) */
 .qcard .nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;justify-content:stretch}
 .qcard .nav>.btn{width:100%;min-width:0;box-sizing:border-box;text-align:center;white-space:nowrap;line-height:1.25;padding:6px 6px;font-size:12.5px}
 .qcard .nav #prev{order:1}
 .qcard .nav #next{order:2}
 .qcard .nav #flag{order:3}
 .qcard .nav #back{order:1}
 .qcard .nav #cont{order:2}
}
@media (max-width:400px){
 .qcard .nav>.btn{font-size:11.5px;padding:6px 4px}
}

/* Desktop exam column (NCMHCE sample + full mocks): case above questions in one centered 42rem column.
   Matches items.css ASWB/L&E measure. Scout breath uses shared scoutBreath* keyframes. */
@media (min-width:761px){
 .grid{display:flex;flex-direction:column;align-items:center;height:auto;max-width:42rem;margin:0 auto;padding:12px 0 28px}
 .pane{width:100%;max-width:42rem;overflow:visible;padding:16px 0}
 .left{border-right:0;border-bottom:1px solid var(--rule);background:transparent;padding-bottom:18px;margin-bottom:4px}
 .right{background:transparent;padding-top:4px}
 .qcard{max-width:42rem;width:100%;box-sizing:border-box;margin:0 auto}
 .qcard .qmeta{width:100%;box-sizing:border-box}
 .qcard .stem{font-size:18px;line-height:1.55;font-weight:700}
 .qcard .opt{font-size:17px;line-height:1.5;padding:.8rem 1.05rem;margin:.55rem 0;box-sizing:border-box}
 .qcard .nav{width:100%;box-sizing:border-box;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
 .qcard .dots{width:100%}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important}
 .scout,.bubble,.pat{transform:none!important;opacity:1!important}
}

.breath{position:fixed;inset:0;z-index:100;background:#E8F2F0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s}
.breath.on{opacity:1}
.bwrap{text-align:center;max-width:460px;padding:24px}
.blead{font-size:20px;color:var(--ink);margin:0 0 18px}
.circle{width:170px;height:170px;margin:10px auto 18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#cfe6e0,#8fbfcf);box-shadow:0 0 0 14px rgba(143,191,207,.25);display:flex;align-items:center;justify-content:center;animation:breathe 3.4s ease-in-out infinite}
.circle span{font:600 16px system-ui,sans-serif;color:#1d4a5a}
.circle.still{animation:none}
/* one breath = 3.4s: inhale 0-40% (1.36s), hold 40-60% (0.68s), exhale 60-100% (1.36s) */
@keyframes breathe{0%,100%{transform:scale(.72)}40%,60%{transform:scale(1.05)}}
.btext{font-size:19px;margin:6px 0}.bnote{font:14px system-ui,sans-serif;color:var(--sub);margin:8px 0 16px}
.bskip{font-size:16px;padding:9px 26px}

.revisit{float:right;font:600 12px system-ui,sans-serif;color:#7a5200;background:#FFF1CC;border:1px solid #E8C25A;border-radius:12px;padding:2px 10px}
.miss{border-left:4px solid #E8C25A}

/* Scout guides the breathing pause. Original art, cropped to his face with CSS; the head image never moves or scales.
   Feature layers animate on an 8s breath: inhale 0-50% (4s), exhale 50-100% (4s), no hold. Two breaths after the intro (--bd).
   Rest frame (0%/100%): every layer is hidden or untransformed, so it matches the original art exactly.
   transform/opacity only, will-change set, no JS animation loop. */
.bstage{position:relative;width:240px;height:240px;margin:6px auto 14px}
.halo{position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(closest-side,rgba(143,191,207,.45),rgba(143,191,207,0));transform:scale(.88);opacity:.5;will-change:transform,opacity;animation:halo 8s ease-in-out var(--bd) 2}
.bface{position:absolute;inset:0;overflow:hidden;border-radius:50%;background:#F7FBFA;box-shadow:0 0 0 6px rgba(143,191,207,.25)}
.bface img{position:absolute;left:-42.86%;top:0;width:200.7%;height:auto}
.bface .chest{clip-path:inset(84% 0 0 0);will-change:transform;animation:chest 8s ease-in-out var(--bd) 2}
.bface span{position:absolute;transform:translate(-50%,-50%)}
.lid{border-radius:50%;overflow:hidden}.lid i{position:absolute;inset:0;background:linear-gradient(#EE5409,#F87420);border-bottom:3px solid #3a1606;border-radius:0 0 50% 50%/0 0 30% 30%;transform:translateY(-102%);will-change:transform;animation:lid 8s ease-in-out var(--bd) 2}
.ll{left:37.6%;top:58.9%;width:17.6%;height:19.4%}.lr{left:71.5%;top:55%;width:12.8%;height:18.6%}
.lip{left:56.5%;top:76.8%;width:16.5%;height:13%;border-radius:45% 45% 50% 50%;overflow:hidden}.lip i{position:absolute;inset:0;background:#FBCB36;border-bottom:3px solid #6b1d06;border-radius:0 0 50% 50%/0 0 40% 40%;transform:translateY(-104%);will-change:transform;animation:lip 8s ease-in-out var(--bd) 2}
.nos{width:2.2%;height:1.6%;border-radius:50%;background:#2a0d03;opacity:0;will-change:transform,opacity;animation:nos 8s ease-in-out var(--bd) 2}.n1{left:56.3%;top:65.4%}.n2{left:60.3%;top:65.4%}
.puff{width:17%;height:12%;border-radius:50%;opacity:0;background:radial-gradient(closest-side,#FDD542,#FBCB36 70%,rgba(251,203,54,0));border-bottom:3px solid rgba(205,120,12,.9);will-change:transform,opacity}
.pl{left:33%;top:77%;animation:puffL 8s cubic-bezier(.45,0,.55,1) calc(var(--bd) + 250ms) 2}
.pr{left:79%;top:73%;animation:puffR 8s cubic-bezier(.45,0,.55,1) calc(var(--bd) + 250ms) 2}
@keyframes lid{0%,100%{transform:translateY(-102%)}50%{transform:translateY(-46%)}}
@keyframes lip{0%,100%{transform:translateY(-104%)}50%{transform:translateY(-66%)}}
@keyframes nos{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.4)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.25,1)}}
@keyframes puffL{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.7)}10%,90%{opacity:1}50%{opacity:1;transform:translate(-50%,-50%) translate(-6%,4%) scale(1.6,1.45)}}
@keyframes puffR{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.7)}10%,90%{opacity:1}50%{opacity:1;transform:translate(-50%,-50%) translate(6%,4%) scale(1.6,1.45)}}
@keyframes chest{0%,100%{transform:none}50%{transform:translateY(-1.6%)}}
@keyframes halo{0%,100%{transform:scale(.88);opacity:.5}50%{transform:scale(1.06);opacity:1}}
.bstage.still *{animation:none!important}
.bbub{position:relative;display:inline-block;min-width:200px;max-width:380px;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:12px 18px;font-size:19px;color:var(--ink);margin:4px auto 10px;box-shadow:0 2px 10px rgba(27,42,65,.06)}
.bbub::before{content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;background:#fff;border-left:1px solid var(--rule);border-top:1px solid var(--rule);transform:translateX(-50%) rotate(45deg)}
.bwrap .btext{font-size:16px;color:var(--sub)}
@media (max-width:760px){.bstage{width:190px;height:190px}.bbub{font-size:17px;max-width:320px}}

/* ===== Shared Scout breath (ONE set — do not duplicate elsewhere) =====
   Shape: 0–25% inhale, hold through 50%, release by 75%, rest to 100%.
   Screens pick duration/iteration: NCMHCE / post-exam = 8s × 2; ASWB/L&E boxmode = 16s × 1.
   Chest/bowtie rises; cheeks puff on inhale and settle on exhale. Gently but noticeable. */
/* Doubled motion (Oliver 10:05): whole figure ~1.07; chest -12% @ 1.08×1.14; cheeks 1.38×1.40 ±5%/-3%; shoulders -9%; head lift -3% (no tilt). Shape/timing unchanged. */
@keyframes scoutBreathFigure{0%{scale:1}25%,50%{scale:1.07}75%,100%{scale:1}}
@keyframes scoutBreathHalo{0%{transform:scale(.72);opacity:.55}25%,50%{transform:scale(1.18);opacity:1}75%,100%{transform:scale(.72);opacity:.55}}
@keyframes scoutBreathBody{0%{scale:1 1}25%,50%{scale:1.06 1.08}75%,100%{scale:1 1}}
@keyframes scoutBreathChest{0%{translate:0 0;scale:1 1}25%,50%{translate:0 -12%;scale:1.08 1.14}75%,100%{translate:0 0;scale:1 1}}
@keyframes scoutBreathShoulders{0%{translate:0 0}25%,50%{translate:0 -9%}75%,100%{translate:0 0}}
@keyframes scoutBreathCheekL{0%{scale:1 1;translate:0 0}25%,50%{scale:1.38 1.4;translate:-5% -3%}75%,100%{scale:1 1;translate:0 0}}
@keyframes scoutBreathCheekR{0%{scale:1 1;translate:0 0}25%,50%{scale:1.38 1.4;translate:5% -3%}75%,100%{scale:1 1;translate:0 0}}
@keyframes scoutBreathHead{0%{translate:0 0}25%,50%{translate:0 -3%}75%,100%{translate:0 0}}
/* prefers-reduced-motion: same amplitudes (or nearly) — still an obvious breath */
@keyframes scoutBreathFigureGentle{0%{scale:1}25%,50%{scale:1.06}75%,100%{scale:1}}
@keyframes scoutBreathHaloGentle{0%{transform:scale(.72);opacity:.55}25%,50%{transform:scale(1.14);opacity:1}75%,100%{transform:scale(.72);opacity:.55}}
@keyframes scoutBreathBodyGentle{0%{scale:1 1}25%,50%{scale:1.055 1.07}75%,100%{scale:1 1}}
@keyframes scoutBreathChestGentle{0%{translate:0 0;scale:1 1}25%,50%{translate:0 -10%;scale:1.06 1.12}75%,100%{translate:0 0;scale:1 1}}
@keyframes scoutBreathShouldersGentle{0%{translate:0 0}25%,50%{translate:0 -8%}75%,100%{translate:0 0}}
@keyframes scoutBreathCheekGentleL{0%{scale:1 1;translate:0 0}25%,50%{scale:1.32 1.34;translate:-4% -2.5%}75%,100%{scale:1 1;translate:0 0}}
@keyframes scoutBreathCheekGentleR{0%{scale:1 1;translate:0 0}25%,50%{scale:1.32 1.34;translate:4% -2.5%}75%,100%{scale:1 1;translate:0 0}}
@keyframes scoutBreathHeadGentle{0%{translate:0 0}25%,50%{translate:0 -2.5%}75%,100%{translate:0 0}}

/* Vector Scout (?scout=vector). Built per breathing-animation-spec.md with Oliver's overrides:
   cheeks EXPAND on the 4s inhale and shrink on the 4s exhale; 8s breath, two breaths, tiny drift 45-50% instead of a hold.
   Wave: belly/torso 0ms, chest +100ms, shoulders +200ms, head +300ms, ears +400ms. Head rotates only, never scales.
   Inhale easing cubic-bezier(.37,0,.63,1), exhale cubic-bezier(.33,0,.2,1). First and last frames match. */
.bstage.vec{width:340px;height:340px}
.vface svg{position:absolute;inset:3%;width:94%;height:94%;overflow:visible}
/* Whole-SVG figure scale removed: it read as a uniform zoom and hid per-part chest/cheek motion in video. Parts animate on their own. */
.vface .vscout{transform-origin:50% 100%;transform-box:view-box}
.vface .vscout *{transform-box:fill-box}
.vface .sv-torso{transform-origin:50% 100%;will-change:transform;animation:scoutBreathBody 8s var(--bd) 2 both ease-in-out}
.vface .sv-belly{transform-origin:50% 100%;animation:scoutBreathBody 8s var(--bd) 2 both ease-in-out}
.vface .sv-chest{transform-origin:50% 100%;will-change:transform;animation:scoutBreathChest 8s calc(var(--bd) + 100ms) 2 both ease-in-out}
.vface .sv-shoulders{will-change:transform;animation:scoutBreathShoulders 8s calc(var(--bd) + 200ms) 2 both ease-in-out}
.vface .sv-head{transform-origin:50% 100%;transform-box:fill-box;will-change:transform;animation:scoutBreathHead 8s calc(var(--bd) + 300ms) 2 both ease-in-out}
.vface .sv-ears{transform-origin:50% 100%;animation:svEars 8s calc(var(--bd) + 400ms) 2 both}
.vface .sv-cheek{transform-origin:50% 35%;will-change:transform;animation:scoutBreathCheekL 8s calc(var(--bd) + 300ms) 2 both ease-in-out}
.vface .sv-cr{animation-name:scoutBreathCheekR}
.vface .sv-lid{transform-box:view-box;will-change:transform;animation:svLid 8s calc(var(--bd) + 300ms) 2 both}
.vface .sv-eyeclosed{animation:svClosed 8s calc(var(--bd) + 300ms) 2 both}
.vface .sv-brows{animation:svBrows 8s calc(var(--bd) + 300ms) 2 both}
.vface .sv-mouthopen{animation:svMouthOpen 8s calc(var(--bd) + 300ms) 2 both}
.vface .sv-mouthsmile{animation:svMouthSmile 8s calc(var(--bd) + 300ms) 2 both}
.vface .sv-nose{transform-origin:50% 60%;animation:svNose 8s calc(var(--bd) + 300ms) 2 both}
@keyframes svTorso{0%{scale:1 1;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{scale:1.02 1.04}50%{scale:1.021 1.042;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{scale:1 1}}
@keyframes svBelly{0%{scale:1 1;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{scale:1.06 1.06}50%{scale:1.062 1.062;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{scale:1 1}}
@keyframes svChest{0%{translate:0 0;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{translate:0 -3%}50%{translate:0 -3.1%;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{translate:0 0}}
@keyframes svShoulders{0%{translate:0 0;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{translate:0 -3%}50%{translate:0 -3.1%;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{translate:0 0}}
@keyframes svHead{0%{translate:0 0;rotate:0deg;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{translate:0 -1.6%;rotate:-2deg}50%{translate:0 -1.7%;rotate:-2.05deg;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{translate:0 0;rotate:0deg}}
@keyframes svEars{0%{rotate:0deg;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{rotate:-1.2deg}50%{rotate:-1.25deg;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{rotate:0deg}}
@keyframes svCheekL{0%{scale:1 1;translate:0 0;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{scale:1.14 1.22;translate:-2% 0}50%{scale:1.15 1.23;translate:-2% 0;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{scale:1 1;translate:0 0}}
@keyframes svCheekR{0%{scale:1 1;translate:0 0;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{scale:1.14 1.22;translate:2% 0}50%{scale:1.15 1.23;translate:2% 0;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{scale:1 1;translate:0 0}}
@keyframes svNose{0%{scale:1 1;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{scale:1.12 1.04}50%{scale:1.12 1.04;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{scale:1 1}}
@keyframes svBrows{0%{translate:0 0;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{translate:0 -5px}50%{translate:0 -5.2px;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{translate:0 0}}
@keyframes svLid{0%{translate:0 0;animation-timing-function:cubic-bezier(.37,0,.63,1)}40%{translate:0 98px}50%{translate:0 100px;animation-timing-function:cubic-bezier(.33,0,.2,1)}62%{translate:0 100px;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{translate:0 0}}
@keyframes svClosed{0%,28%{opacity:0;animation-timing-function:cubic-bezier(.37,0,.63,1)}42%,62%{opacity:1;animation-timing-function:cubic-bezier(.33,0,.2,1)}78%,100%{opacity:0}}
@keyframes svMouthOpen{0%{opacity:1;animation-timing-function:cubic-bezier(.37,0,.63,1)}18%,50%{opacity:0;animation-timing-function:cubic-bezier(.33,0,.2,1)}68%,100%{opacity:1}}
@keyframes svMouthSmile{0%{opacity:0;animation-timing-function:cubic-bezier(.37,0,.63,1)}18%,50%{opacity:1;animation-timing-function:cubic-bezier(.33,0,.2,1)}68%,100%{opacity:0}}
@media (max-width:760px){.bstage.vec{width:240px;height:240px}}
/* Vector scene: Scout sits in a soft breathing light, no frame. Cue and count sit under his chin in the same soft style. */
.bstage.vec .vface{border-radius:0;background:none;box-shadow:none;overflow:visible;-webkit-mask-image:linear-gradient(#000 88%,transparent 100%);mask-image:linear-gradient(#000 88%,transparent 100%)}
.bstage.vec .halo{inset:-30%;background:radial-gradient(closest-side,rgba(255,250,232,.95),rgba(252,239,180,.55) 38%,rgba(143,191,207,.28) 66%,rgba(143,191,207,0));transform:scale(.86);opacity:.75;animation:scoutBreathHalo 8s var(--bd) 2 both ease-in-out}
.bstage.vec::after{content:"";position:absolute;left:18%;right:18%;bottom:-2%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(27,42,65,.16),rgba(27,42,65,0));z-index:-1;animation:vShadow 8s var(--bd) 2 both}
.bstage.vec{isolation:isolate}.bstage.vec .halo{z-index:-1}
@keyframes vHalo{0%{transform:scale(.86);opacity:.75;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{transform:scale(1.08);opacity:1}50%{transform:scale(1.085);opacity:1;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{transform:scale(.86);opacity:.75}}
@keyframes vShadow{0%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%,50%{transform:scale(.94);opacity:.8;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{transform:scale(1);opacity:1}}
.vecmode .bbub{background:none;border:0;box-shadow:none;padding:2px 10px;margin:0 auto;font-size:24px;letter-spacing:.01em;color:#2B4A55}
.vecmode .bbub::before{display:none}
.vecmode .bcount{font:500 20px Georgia,serif;color:var(--ok);opacity:.75;min-height:28px;margin:0 0 6px}
.vecmode .bstage{margin-bottom:4px}

@media (prefers-reduced-motion:reduce){
 /* Kill lids/mouth/ears/etc.; keep full shared breath (figure, chest, cheeks, head lift) at near-full amplitude */
 .bstage *{animation:none!important}
 .bstage.vec .halo{animation:scoutBreathHaloGentle 8s var(--bd) 2 both ease-in-out!important}
 .vface .sv-torso,.vface .sv-belly{animation:scoutBreathBodyGentle 8s var(--bd) 2 both ease-in-out!important}
 .vface .sv-chest{animation:scoutBreathChestGentle 8s calc(var(--bd) + 100ms) 2 both ease-in-out!important}
 .vface .sv-shoulders{animation:scoutBreathShouldersGentle 8s calc(var(--bd) + 200ms) 2 both ease-in-out!important}
 .vface .sv-cheek{animation:scoutBreathCheekGentleL 8s calc(var(--bd) + 300ms) 2 both ease-in-out!important;transform-origin:50% 35%}
 .vface .sv-cr{animation-name:scoutBreathCheekGentleR!important}
 .vface .sv-head,.vecmode .sv-head{animation:scoutBreathHeadGentle 8s calc(var(--bd) + 300ms) 2 both ease-in-out!important;transform-origin:50% 100%}
 .boxmode .bstage.vec .halo,.boxmode .vface .sv-torso,.boxmode .vface .sv-belly{animation-duration:16s!important;animation-iteration-count:1!important}
 .boxmode .vface .sv-chest,.boxmode .vface .sv-shoulders,.boxmode .vface .sv-cheek,.boxmode .vface .sv-head{animation-duration:16s!important;animation-iteration-count:1!important}
}
/* Vector scene: the line and exam-day note show with the intro, then fade so only Scout, glow, cue, count and a small Skip remain. */
.vecmode .btext,.vecmode .bnote{transition:opacity .7s ease}
.vecmode.breathing .btext,.vecmode.breathing .bnote{opacity:0}
.vecmode .bskip{transition:opacity .7s ease,background .4s,color .4s,border-color .4s}
.vecmode.breathing .bskip{background:transparent;color:var(--sub);border-color:transparent;font-size:14px;font-weight:500;opacity:.7}
.vecmode.breathing .bskip:hover,.vecmode.breathing .bskip:focus-visible{opacity:1;border-color:var(--rule)}

/* Default scene v3: one top-down read (cue, then Scout); glow leads; Scout's face rests. */
.vecmode .bwrap{display:flex;flex-direction:column;align-items:center}
.vecmode .bbub{order:1;min-height:2.4em;display:flex;align-items:flex-end;justify-content:center;transition:opacity .7s ease}
.vecmode .bcount{order:2;transition:opacity .7s ease}
.vecmode .bstage{order:3;margin-top:10px}
.vecmode .btext{order:4}.vecmode .bnote{order:5}.vecmode .bskip{order:6}
.vecmode .bbub.hide,.vecmode .bcount.hide{opacity:0}
.vecmode .bbub.soft{font-size:19px;color:var(--sub);font-style:italic}
.vecmode .bcount.soft{font:italic 17px Georgia,serif;color:var(--sub)}
.vecmode.breathing .btext,.vecmode.breathing .bnote{display:none}
/* glow is the main guide */
.bstage.vec .halo{inset:-58%;background:radial-gradient(closest-side,rgba(255,250,232,.95),rgba(252,239,180,.6) 30%,rgba(143,191,207,.32) 58%,rgba(143,191,207,.12) 78%,rgba(143,191,207,0));animation-name:scoutBreathHalo}
@keyframes vHalo2{0%{transform:scale(.72);opacity:.55;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%{transform:scale(1.14);opacity:1}50%{transform:scale(1.145);opacity:1;animation-timing-function:cubic-bezier(.33,0,.2,1)}95%,100%{transform:scale(.72);opacity:.55}}
/* restful face: only cheeks, chest, torso, shoulders move; eyes closed during breathing */
.vecmode .sv-ears,.vecmode .sv-lid,.vecmode .sv-brows,.vecmode .sv-nose,.vecmode .sv-mouthopen,.vecmode .sv-mouthsmile,.vecmode .sv-eyeopen,.vecmode .sv-eyeclosed{animation:none!important}
.vecmode .sv-head{animation:scoutBreathHead 8s calc(var(--bd) + 300ms) 2 both ease-in-out!important;transform-origin:50% 100%;transform-box:fill-box}
.vecmode .sv-eyeopen,.vecmode .sv-eyeclosed,.vecmode .sv-mouthopen,.vecmode .sv-mouthsmile{transition:opacity .9s ease}
.vecmode.breathing .sv-eyeopen,.vecmode.breathing .sv-mouthopen{opacity:0}
.vecmode.breathing .sv-eyeclosed,.vecmode.breathing .sv-mouthsmile{opacity:1}

/* ===== Default breathing scene v4: fixed slots, crossfades only ===== */
.breath.vecmode{transition:opacity 1.1s ease-in-out}
.vwrap{position:relative;width:min(520px,calc(100vw - 24px));height:min(560px,calc(100dvh - 24px));max-height:calc(100dvh - 16px);padding:0;box-sizing:border-box}
.vwrap>*{position:absolute;left:0;right:0;margin:0 auto;text-align:center}
.vwrap .bpre{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity 1.1s ease-in-out;pointer-events:none}
.vwrap .bpre p{margin:4px 0;font-size:22px;color:var(--ink)}.vwrap .bpre p+p{font-size:19px;color:var(--sub)}
.vecmode.pre .bpre{opacity:1}.vecmode.pre.prefade .bpre{opacity:0}
.vwrap .vcue{top:4px;height:48px}.vwrap .vcount{top:50px;height:26px}
.vwrap .vcue span,.vwrap .vcount span{position:absolute;left:0;right:0;bottom:0;opacity:0;visibility:hidden}
@keyframes vcueIn{from{opacity:.6}to{opacity:1}}
.vwrap .vcue span{font-size:24px;color:#2B4A55;line-height:1.3;transition:none}
.vwrap .vcount span{font:500 20px Georgia,serif;color:var(--ok);transition:none}
.vwrap .vcue span.on{opacity:1;visibility:visible;animation:vcueIn .12s ease-out}
.vwrap .vcount span.on{opacity:.75;visibility:visible;transition:none}
.vwrap .vcue .soft{font-size:19px;color:var(--sub)}
.vwrap .bstage{top:78px;margin:0 auto}
.vwrap .bnote{top:auto;bottom:56px;font:14px system-ui,sans-serif;color:var(--sub);transition:opacity 1s ease-in-out}
.vwrap .bskip{top:auto;bottom:8px;left:50%;right:auto;transform:translateX(-50%);width:auto;z-index:2;transition:opacity 1s ease-in-out,background-color 1s ease-in-out,color 1s ease-in-out,border-color 1s ease-in-out}
.vecmode.breathing .bnote{opacity:0}
.vecmode.breathing .bskip{background:transparent;color:var(--sub);border-color:transparent;opacity:.75}
.vecmode .vcue,.vecmode .vcount,.vecmode .bstage,.vecmode .bnote{transition:opacity 1.1s ease-in-out}
.vecmode.pre .vcue,.vecmode.pre .vcount,.vecmode.pre .bstage,.vecmode.pre .bnote{opacity:0}
.vecmode .sv-eyeopen,.vecmode .sv-eyeclosed,.vecmode .sv-mouthopen,.vecmode .sv-mouthsmile{transition:opacity 1.1s ease-in-out}
@media (max-width:760px){
 .vwrap{height:min(620px,calc(100dvh - 12px));width:min(100%,calc(100vw - 16px))}
 .vwrap .vcue{top:2px;height:44px}.vwrap .vcount{top:44px;height:22px}
 .vwrap .bstage{top:68px}
 .vwrap .bnote{bottom:52px}.vwrap .bskip{bottom:6px}
 .vwrap .vcue span{font-size:18px}
}
@media (max-width:400px) and (max-height:760px){
 .bstage.vec{width:210px;height:210px}
 .vwrap{height:min(560px,calc(100dvh - 8px))}
 .vwrap .vcue{top:0;height:40px}.vwrap .vcount{top:38px;height:20px}
 .vwrap .bstage{top:56px}
 .vwrap .bnote{bottom:48px}.vwrap .bskip{bottom:4px}
 .vwrap .vcue span{font-size:16px}
}
/* Breathing overlay: never scroll the page underneath */
.breath{overflow:hidden!important}
.breath.on{overscroll-behavior:none}
body:has(.breath.on){overflow:hidden;height:100%}
.vecmode .vwrap{display:block}
.vecmode .vwrap .bskip,.vecmode.breathing .vwrap .bskip{font-size:16px;font-weight:600;padding:9px 26px}
.breath.vecmode:not(.on){pointer-events:none}
/* ---- Practice Exams staging v3: opaque breathing backdrop (approved fix), single intro line, transform/opacity-only motion ---- */
.breath.vecmode{opacity:1;background:#E8F2F0;overflow:hidden}
.breath.vecmode.out{opacity:0;pointer-events:none;transition:opacity 1s ease-in-out}
.vwrap .bpre{transition:opacity 1s ease-in-out}
.vecmode.pre .bpre{opacity:0}.vecmode.pre.lineon .bpre{opacity:1}.vecmode.pre.lineon.prefade .bpre{opacity:0}
/* intro line fully gone (opacity 0, then hidden) before Scout starts fading in */
.vecmode.pre.prefade .bpre,.vecmode.pre.lineon.prefade .bpre{opacity:0;visibility:hidden;transition:opacity .3s ease-in,visibility 0s linear .3s}
.vecmode:not(.pre) .bpre{opacity:0;visibility:hidden;transition:none}
.vwrap .bpre p{font-size:22px;color:var(--ink)}
.btn,.opt{transition:none}
.sec{transition:opacity var(--t)}
.fill{width:100%;transform:scaleX(0);transform-origin:left center;border-radius:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.fill.mid{background:#E6C866}.fill.low{background:#8FB3D4}
mark.clue{background:#FCEFB4;transition:none}
.gate{transition:opacity .35s,transform .35s}
.expect{font-size:18px;color:var(--ink);background:#EEF6F3;border-left:4px solid #2F6B57;padding:10px 14px;border-radius:0 6px 6px 0}
.start.quiet{text-align:center}
.brk h1{font-size:30px}
ul.strong{list-style:none;padding:0;margin:6px 0}ul.strong li{padding:6px 10px;background:#E9F2EC;border-radius:6px;margin:4px 0;color:#1F2B3A}ul.strong .c{font:600 13px system-ui,sans-serif;color:var(--ok);margin-left:6px}
.card.cta{background:#F2F8F5;border-color:#2F6B57}.card.cta .price{font:700 18px system-ui,sans-serif;color:#8A5A00}
/* restore spec motion (breathing-animation-spec.md): head moves +300ms with 2deg chin tilt; cheeks scale from fill-box 50% 35% */
/* Head: translate-up only via scoutBreathHead (no tilt). */
.vface .sv-cheek{transform-box:fill-box;transform-origin:50% 35%}
/* head lift kept under reduced-motion via scoutBreathHeadGentle above */
.btn.dl{border-color:#2F6B57;color:#2F6B57;background:#fff}.btn.dl:hover{background:#E9F2EC;color:#1F2B3A}
#pr{display:none}
@media print{
 body{background:#fff}body>*:not(#pr){display:none!important}
 #pr{display:block;font:11pt/1.45 Georgia,serif;color:#1F2B3A}
 #pr header{display:flex;justify-content:space-between;border-bottom:2px solid #1F5E7A;padding-bottom:4pt;color:#1F5E7A;font:10pt system-ui,sans-serif}
 #pr h1{font-size:20pt;margin:12pt 0 0;color:#1F2B3A}#pr .sub{margin:0;color:#3D4A5C}
 #pr h2{font-size:13pt;color:#1F5E7A;margin:14pt 0 4pt;break-after:avoid}
 #pr .big{font:700 14pt system-ui,sans-serif;color:#2F6B57;margin:2pt 0}
 #pr .cap{font:600 9pt system-ui,sans-serif;color:#3D4A5C;margin:6pt 0 2pt}
 #pr table{border-collapse:collapse;width:100%;font:9.5pt system-ui,sans-serif}#pr th,#pr td{border-bottom:1px solid #D5DEE8;padding:2pt 4pt;text-align:left}#pr th{background:#EEF4F7}
 #pr .pq{border-left:3pt solid #8A5A00;background:#FFF9EA;padding:6pt 9pt;margin:8pt 0;break-inside:avoid}
 #pr .stem{font-weight:700;margin:2pt 0}#pr ol{margin:2pt 0 4pt 16pt;padding:0}#pr p{margin:3pt 0}
 #pr footer{margin-top:16pt;border-top:1px solid #D5DEE8;padding-top:6pt;font:8.5pt system-ui,sans-serif;color:#3D4A5C}
 @page{margin:16mm 14mm}
}

/* coaching bands: soft green 80+, soft yellow 65-79, soft blue under 65 */
.fill.ok{background:#7FB59A}
/* small quiet NBCC disclaimer on the sample's first frame */
.vwrap .bdisc{position:fixed;left:0;right:0;bottom:14px;margin:0 auto;max-width:640px;padding:0 16px;font:400 11.5px/1.45 system-ui,sans-serif;color:#6b7a88;text-align:center;opacity:0;transition:opacity 1s ease-in-out;pointer-events:none}
.vecmode.pre.lineon .bdisc{opacity:.9}.vecmode.pre.lineon.prefade .bdisc{opacity:0}
/* ---- v5: calm Skip button (soft light border, muted text, gentle focus ring) ---- */
.breath .bskip,.vecmode .vwrap .bskip,.vecmode.breathing .vwrap .bskip{background:rgba(255,255,255,.55);color:#5B6B80;border:1px solid #CBD6E2;font-weight:500;box-shadow:none;outline:none;opacity:.85}
.breath .bskip:hover,.vecmode.breathing .vwrap .bskip:hover{opacity:1;background:rgba(255,255,255,.8);border-color:#B8C4D6}
.breath .bskip:focus{outline:none}
.breath .bskip:focus-visible{outline:2px solid #B8D3CC;outline-offset:2px}

/* ---- consistency v6: landing sans for all UI, serif only for case narrative; one teal pill button system ---- */
:root{--uisans:Inter,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;--teal:#1F5E7A;--tealh:#174A61}
body,button,.sans,.btn,.top,.qmeta,.sec h3,.rev th,.notes .h,.disc,.start,.start h1,.review,.card,.card h2,.pat h4,.brk h1,.expect,.stem,.opt,.vwrap .bpre p,.vwrap .vcue span{font-family:var(--uisans)}
.left,.left .sec,.narr,.notes textarea{font-family:Georgia,"EB Garamond",serif}
.left .sec h3{font-family:var(--uisans)}
.big,.band,.tag,.pct,.cap,.chip,.note,.sh,.gtag,.pick b,.pat .cnt,.brow .c,.card h2 .n,.gate .gn,.card.cta .price{font-family:var(--uisans)}
.btn,.btn.ghost,.btn.dl,.btn.demo{font-family:var(--uisans);font-size:14px;font-weight:600;border-radius:999px;padding:8px 18px;border:1.5px solid var(--teal);background:#fff;color:var(--teal)}
.btn:hover,.btn.on,.btn.ghost:hover,.btn.dl:hover{background:#EEF6FA;color:var(--teal);border-color:var(--teal)}
.btn.on{background:var(--teal);color:#fff}
.btn.primary,a.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff;text-decoration:none;display:inline-block}
.btn.primary:hover{background:var(--tealh);border-color:var(--tealh);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.top .btn{border-radius:999px;background:transparent;color:#fff;border-color:#8ea3c4}
.top .btn.on,.top .btn:hover{background:#fff;color:var(--ink)}
.ctarow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (max-width:600px){.ctarow>*{width:100%;text-align:center}}
/* keep the softened quiet Skip as is (re-asserted after the pill system) */
.btn.bskip{border-radius:6px}
.breath .bskip.btn,.vecmode .vwrap .bskip.btn,.vecmode.breathing .vwrap .bskip.btn{background:rgba(255,255,255,.55);color:#5B6B80;border:1px solid #CBD6E2;font-weight:500;box-shadow:none;outline:none;opacity:.85}
.breath .bskip.btn:hover,.vecmode.breathing .vwrap .bskip.btn:hover{opacity:1;background:rgba(255,255,255,.8);border-color:#B8C4D6;color:#5B6B80}
.card.dlbox{border-color:#2F6B57}.card.endbox{background:#F2F8F5;border-color:#2F6B57}
.btn.dltop{margin-left:12px;vertical-align:middle}@media (max-width:600px){.btn.dltop{display:block;width:100%;margin:12px 0 0}}.note.saved{color:#2F6B57}
/* Mock picker (buyers) and save warning */
.mocklist{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.mocklist .mock{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--rule);border-radius:8px;padding:12px 14px;background:#fff}
.mocklist .mt{display:flex;flex-direction:column;min-width:140px}.mocklist .mt b{font-size:18px;font-weight:600}
.mocklist .mst{flex:1;font:14px var(--uisans,system-ui),sans-serif;color:var(--sub)}
.mocklist .mock.ip .mst{color:#7a5c00}.mocklist .mock.fin .mst{color:#2F6B57;font-weight:600}
.mocklist .mb{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:600px){.mocklist .mock{flex-direction:column;align-items:stretch}.mocklist .mb .btn{flex:1}}
.savewarn{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);max-width:90vw;background:#fff6e0;border:1px solid #e0c36b;color:#5a4300;border-radius:8px;padding:10px 14px;font:14px system-ui,sans-serif;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* results chips are links to their question card */
button.chip{color:inherit;border:0;text-align:left;cursor:pointer;min-height:32px;line-height:1.3;padding:6px 10px;box-sizing:border-box;vertical-align:middle;transition:background-color .15s;-webkit-tap-highlight-color:transparent}
button.chip:hover,button.chip:focus-visible{text-decoration:underline;text-underline-offset:2px;background:#f3e3bf}
button.chip:focus-visible{outline:2px solid #d9a441;outline-offset:2px}
.chiphit{outline:3px solid rgba(232,170,60,.85);outline-offset:3px;box-shadow:0 0 0 8px rgba(245,200,110,.28);transition:outline-color .4s,box-shadow .4s}
[id^="rq-"],.chipback{scroll-margin:24px}

/* "Back to where you were" on a card reached from a chip */
.chipback{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 12px;margin:0 0 10px;border:1px solid #e3c27a;border-radius:16px;background:#fdf3dc;color:inherit;font:13px var(--uisans,system-ui,sans-serif);cursor:pointer}
.chipback:hover,.chipback:focus-visible{text-decoration:underline;text-underline-offset:2px;background:#f8e6bd}
.chipback:focus-visible{outline:2px solid #d9a441;outline-offset:2px}