:root{color-scheme:dark}
:root{--u:min(.0556vw,.1vh);--ink:#EEF1F7;--dim:rgba(238,241,247,.66);--line:rgba(238,241,247,.16);--glass:rgba(10,12,20,.82);--solid:#0E1216;--amber:#FFC48F;
  --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--g:clamp(14px,calc(28*var(--u)),28px);--pw:min(372px,calc(100vw - 2*var(--g)))}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#0E1216;color:var(--ink);font-family:var(--f);-webkit-font-smoothing:antialiased;overflow:hidden}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas#gl:active{cursor:grabbing}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,#track:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#boot-msg{position:fixed;left:50%;top:12px;transform:translateX(-50%);margin:0;font-size:clamp(11.18px,calc(13*var(--u)),13px);color:#ffb98a}
#boot-msg:empty{display:none}
#credit{position:fixed;left:var(--g);bottom:10px;margin:0;font-size:clamp(9.5px,calc(10.5*var(--u)),10.5px);letter-spacing:.02em;color:var(--dim);opacity:.7;pointer-events:none;z-index:3}

.panel{position:fixed;left:var(--g);top:var(--g);width:var(--pw);max-height:calc(100dvh - 2*var(--g) - 84px);overflow:auto;padding:clamp(12px,calc(20*var(--u)),20px) clamp(12px,calc(20*var(--u)),20px) clamp(10.8px,calc(18*var(--u)),18px);background:var(--glass);border:1px solid var(--line);border-radius:12px;z-index:5;scrollbar-width:thin;transition:opacity .35s,transform .35s}
body[data-state="menu"] #lesson,body:not([data-state="menu"]) #menu{opacity:0;pointer-events:none;transform:translateY(8px);visibility:hidden}
.eyebrow{margin:0 0 clamp(6px,calc(10*var(--u)),10px);font-size:clamp(9.9px,calc(11*var(--u)),11px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
h1{margin:0 0 clamp(10.8px,calc(18*var(--u)),18px);font-size:clamp(22px,calc(28*var(--u)),28px);line-height:1.12;font-weight:650;letter-spacing:-.02em}
h2{margin:0;font-size:clamp(16px,calc(20*var(--u)),20px);font-weight:650;letter-spacing:-.01em}
.fine{margin:clamp(9.6px,calc(16*var(--u)),16px) 0 0;font-size:clamp(9.89px,calc(11.5*var(--u)),11.5px);line-height:1.45;color:var(--dim)}


.back{display:inline-flex;align-items:center;gap:4px;margin:clamp(-6px,calc(-6*var(--u)),-3.6px) 0 clamp(8.4px,calc(14*var(--u)),14px) clamp(-6px,calc(-6*var(--u)),-3.6px);padding:clamp(3.6px,calc(6*var(--u)),6px) clamp(4.8px,calc(8*var(--u)),8px);background:none;border:0;font-size:clamp(10.75px,calc(12.5*var(--u)),12.5px);color:var(--dim);border-radius:6px}
.back:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip{font-size:clamp(9.5px,calc(10.5*var(--u)),10.5px);font-weight:650;letter-spacing:.08em;text-transform:uppercase;padding:4px clamp(4.8px,calc(8*var(--u)),8px);border:1px solid var(--amber);color:var(--amber);border-radius:99px}
.ctat{margin:clamp(10.8px,calc(18*var(--u)),18px) 0 clamp(6px,calc(10*var(--u)),10px);font-size:clamp(9.9px,calc(11*var(--u)),11px);font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.cta{display:grid;gap:2px;width:100%;padding:clamp(7.2px,calc(12*var(--u)),12px) clamp(8.4px,calc(14*var(--u)),14px);margin:0 0 clamp(4.8px,calc(8*var(--u)),8px);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;text-align:left}
.cta b{font-size:clamp(12.04px,calc(14*var(--u)),14px);font-weight:620}
.cta span{font-size:clamp(10.32px,calc(12*var(--u)),12px);color:var(--dim)}
.cta{transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s}
.cta:hover,.cta:focus-visible{background:var(--amber);border-color:var(--amber);color:#1a1209;transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,160,90,.35)}
.cta:hover span,.cta:focus-visible span{color:rgba(26,18,9,.72)}
.cta.pri{background:var(--amber);border-color:var(--amber);color:#1a1209}
.cta.pri span{color:rgba(26,18,9,.72)}
.again{margin:4px 0 0;padding:clamp(4.8px,calc(8*var(--u)),8px) 2px;background:none;border:0;font-size:clamp(10.75px,calc(12.5*var(--u)),12.5px);color:var(--dim);text-decoration:underline;text-underline-offset:.25em}
.again:hover{color:var(--ink)}


#bar{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);width:min(980px,calc(100vw - 2*var(--g)));display:flex;align-items:center;gap:clamp(7.2px,calc(12*var(--u)),12px);padding:clamp(4.8px,calc(8*var(--u)),8px) clamp(6px,calc(10*var(--u)),10px);background:var(--glass);border:1px solid var(--line);border-radius:12px;z-index:5;transition:opacity .35s}
body[data-state="menu"] #bar{opacity:0;pointer-events:none}
#pp{flex:none;width:34px;height:34px;display:grid;place-items:center;background:none;border:1px solid var(--line);border-radius:8px}
#pp:hover{border-color:var(--ink)}
#pp svg{width:16px;height:16px;fill:currentColor}
#track{position:relative;flex:1;height:34px;min-width:60px;cursor:pointer;touch-action:none}
#track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--line)}
#fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:var(--amber)}
#time{flex:none;min-width:38px;font-size:clamp(10.32px,calc(12*var(--u)),12px);font-variant-numeric:tabular-nums;color:var(--dim);text-align:right}
.seg{flex:none;display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{padding:clamp(4.8px,calc(8*var(--u)),8px) clamp(6.6px,calc(11*var(--u)),11px);background:none;border:0;font-size:clamp(10.32px,calc(12*var(--u)),12px);color:var(--dim)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:#0b0e14}

#modal,#welcome{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:var(--g);background:rgba(6,8,14,.66);}
#modal[hidden],#welcome[hidden]{display:none}
.mbox{position:relative;width:min(440px,100%);padding:clamp(15.6px,calc(26*var(--u)),26px) clamp(14.4px,calc(24*var(--u)),24px) clamp(13.2px,calc(22*var(--u)),22px);background:#12151d;border:1px solid var(--line);border-radius:14px}
.mbox h2{font-size:clamp(15.4px,calc(22*var(--u)),22px)}
.mbox p{margin:clamp(6px,calc(10*var(--u)),10px) 0 0;font-size:clamp(12.04px,calc(14*var(--u)),14px);line-height:1.5;color:var(--dim)}
.mbox label{display:block;margin:clamp(10.8px,calc(18*var(--u)),18px) 0 clamp(3.6px,calc(6*var(--u)),6px);font-size:clamp(9.9px,calc(11*var(--u)),11px);font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.mbox input[type=email]{width:100%;padding:clamp(7.2px,calc(12*var(--u)),12px) clamp(7.8px,calc(13*var(--u)),13px);font:inherit;font-size:clamp(12px,calc(15*var(--u)),15px);color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px}
#m-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.go{display:block;width:100%;margin-top:clamp(8.4px,calc(14*var(--u)),14px);padding:clamp(7.8px,calc(13*var(--u)),13px);font-weight:650;font-size:clamp(11.6px,calc(14.5*var(--u)),14.5px);color:#1a1209;background:var(--amber);border:0;border-radius:8px}
.go:disabled{opacity:.6;cursor:default}
.mx{position:absolute;right:10px;top:8px;width:34px;height:34px;font-size:clamp(16.8px,calc(24*var(--u)),24px);line-height:1;background:none;border:0;color:var(--dim)}
.err{color:#ff9d8a!important}
.err[hidden]{display:none}
.legal{font-size:clamp(9.89px,calc(11.5*var(--u)),11.5px)!important}
#w-act a{display:inline-block;margin-top:clamp(8.4px,calc(14*var(--u)),14px);color:var(--amber)}

@media (max-width:720px){
  .panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:50dvh;border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  #bar{bottom:auto;top:10px;width:calc(100vw - 20px);gap:clamp(4.8px,calc(8*var(--u)),8px);padding:clamp(3.6px,calc(6*var(--u)),6px) clamp(4.8px,calc(8*var(--u)),8px)}
  #speed{display:none}
  #credit{bottom:auto;top:auto;right:12px;left:auto;bottom:calc(50dvh + 6px)}
  body[data-state="menu"] #credit{bottom:calc(50dvh + 6px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- the opening: headline over the scene, one card per lesson ---------- */
#menu{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(9.6px,calc(16*var(--u)),16px);padding:calc(var(--g)*1.4) var(--g) 50px;pointer-events:none;transition:opacity .45s,transform .45s}
.hero{max-width:680px;text-shadow:0 2px 28px rgba(30,12,24,.5)}
.hero .eyebrow{margin:0 0 clamp(8.4px,calc(14*var(--u)),14px);font-size:clamp(9.89px,calc(11.5*var(--u)),11.5px);color:#fff;opacity:.9}
.hero h1{margin:0 0 clamp(9.6px,calc(16*var(--u)),16px);font-size:clamp(36px,calc(78*var(--u)),78px);line-height:.98;font-weight:700;letter-spacing:-.04em;color:#fff}
.hero .sub{margin:0;max-width:30em;font-size:clamp(14px,calc(17*var(--u)),17px);line-height:1.5;color:rgba(255,255,255,.9)}
#menu .fine{position:fixed;right:var(--g);bottom:11px;margin:0;max-width:min(40em,52vw);text-align:right;font-size:clamp(9.5px,calc(10.5*var(--u)),10.5px);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.cards{list-style:none;width:min(1220px,100%);margin:auto auto 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8.4px,calc(14*var(--u)),14px);align-items:stretch;pointer-events:auto}
.cards li{opacity:0}
#menu.in .cards li{animation:rise .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*80ms + 300ms)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.cards button{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:0;text-align:left;background:rgba(10,12,20,.84);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s,opacity .3s}
.art{aspect-ratio:240/140;background:#0d1018;border-bottom:1px solid var(--line)}
.trace{display:block;width:100%;height:100%}
.trace .bgp{fill:#0d1018}
.trace pattern circle{fill:rgba(255,255,255,.2)}
.trace .rw{fill:#262838;stroke:rgba(255,255,255,.28);stroke-width:.6}
.trace .ph{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.1;stroke-dasharray:2 4}
.trace .pl{fill:none;stroke:var(--amber);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.open .trace .pl{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.trace .p0{fill:#0d1018;stroke:var(--ink);stroke-width:1.4}
.trace .p1{fill:var(--amber)}
.trace .alt{fill:none;stroke:rgba(255,255,255,.38);stroke-width:1}
.trace .pm{fill:#fff;opacity:0;transition:opacity .3s}
.open button:hover .pm,.open button:focus-visible .pm{opacity:1}
.lock .trace .pl{stroke:rgba(255,255,255,.42)}
.lock .trace .p1{fill:rgba(255,255,255,.5)}
.txt{display:flex;flex-direction:column;gap:clamp(3.6px,calc(6*var(--u)),6px);padding:clamp(8.4px,calc(14*var(--u)),14px) clamp(9.6px,calc(16*var(--u)),16px) clamp(9.6px,calc(16*var(--u)),16px);flex:1}
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:clamp(3.6px,calc(6*var(--u)),6px);padding:4px clamp(5.4px,calc(9*var(--u)),9px);font-size:clamp(9.5px,calc(10.5*var(--u)),10.5px);font-weight:650;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;color:var(--dim)}
.tag svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.open .tag{background:var(--amber);border-color:var(--amber);color:#1a1209}
.txt b{margin-top:2px;font-size:clamp(13.6px,calc(17*var(--u)),17px);font-weight:650;letter-spacing:-.01em}
.txt p{margin:0;font-size:clamp(11.18px,calc(13*var(--u)),13px);line-height:1.45;color:var(--dim)}
.foot{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(5.4px,calc(9*var(--u)),9px);margin-top:auto;padding-top:clamp(6px,calc(10*var(--u)),10px)}
.txt small{white-space:nowrap;font-size:clamp(9.89px,calc(11.5*var(--u)),11.5px);color:var(--dim);font-variant-numeric:tabular-nums}
.go-i{white-space:nowrap;display:inline-flex;align-items:center;gap:clamp(3.6px,calc(6*var(--u)),6px);font-size:clamp(10.75px,calc(12.5*var(--u)),12.5px);font-weight:650;color:var(--amber)}
.go-i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.open button{border-color:rgba(255,196,143,.6);box-shadow:0 0 40px rgba(255,160,90,.2)}
.open button:hover,.open button:focus-visible{transform:translateY(-8px);box-shadow:0 22px 60px rgba(255,160,90,.34),0 0 0 1px var(--amber)}
.open button:hover .go-i svg{transform:translateX(4px)}
.lock .art{opacity:.55;transition:opacity .3s}
.lock .txt{opacity:.72;transition:opacity .3s}
.lock button{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s,background .3s}
.lock button:hover,.lock button:focus-visible{border-color:rgba(255,255,255,.4);background:rgba(10,12,20,.9)}
.lock button:hover .art,.lock button:hover .txt,.lock button:focus-visible .art,.lock button:focus-visible .txt{opacity:1}
.lock button{background:rgba(10,12,20,.9)}
@media (max-width:1100px){.cards{grid-template-columns:repeat(4,minmax(220px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:clamp(4.8px,calc(8*var(--u)),8px);scrollbar-width:none}.cards li{scroll-snap-align:start}}
@media (max-width:720px){
  #menu{padding:calc(var(--g)*1.2) var(--g) 14px;gap:clamp(6px,calc(10*var(--u)),10px)}
  .hero h1{font-size:clamp(26.6px,calc(38*var(--u)),38px)}.hero .sub{display:none}
  .cards{grid-template-columns:repeat(4,min(78vw,300px));gap:clamp(7.2px,calc(12*var(--u)),12px);margin:0 calc(var(--g)*-1);padding:0 var(--g) 6px;scroll-padding:0 var(--g)}
  .txt p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #menu .fine{display:none}
}

/* ---------- the lesson: same voice as the opening. Big title, the paragraph, then one row per chapter ---------- */
#lesson{position:fixed;left:var(--g);top:calc(var(--g)*1.2);z-index:5;width:min(470px,calc(100vw - 2*var(--g)));max-height:calc(100dvh - 150px);overflow-y:auto;overflow-x:hidden;padding:0 clamp(4.8px,calc(8*var(--u)),8px) clamp(10.8px,calc(18*var(--u)),18px) 0;scrollbar-width:none;transition:opacity .45s,transform .45s}
#lesson::-webkit-scrollbar{display:none}
#lesson .eyebrow{display:flex;align-items:center;gap:clamp(6px,calc(10*var(--u)),10px);margin:0 0 clamp(7.2px,calc(12*var(--u)),12px);font-size:clamp(9.89px,calc(11.5*var(--u)),11.5px);color:#fff;opacity:.95;text-shadow:0 2px 20px rgba(30,12,24,.5)}
#lesson .chip{font-size:clamp(9.5px,calc(10*var(--u)),10px);padding:3px clamp(4.8px,calc(8*var(--u)),8px);opacity:1}
#lesson h1{margin:0 0 clamp(8.4px,calc(14*var(--u)),14px);font-size:clamp(34px,calc(64*var(--u)),64px);line-height:.98;font-weight:700;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 28px rgba(30,12,24,.5)}
#lesson .sub{margin:0 0 clamp(12px,calc(20*var(--u)),20px);max-width:32em;font-size:clamp(13.5px,calc(15.5*var(--u)),15.5px);line-height:1.5;color:rgba(255,255,255,.9);text-shadow:0 1px 18px rgba(30,12,24,.55)}
#lesson .back{margin:0 0 clamp(9.6px,calc(16*var(--u)),16px) clamp(-8px,calc(-8*var(--u)),-4.8px);color:rgba(255,255,255,.85);text-shadow:0 1px 12px rgba(0,0,0,.4)}
#steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(6px,calc(10*var(--u)),10px)}
.row{position:relative;background:rgba(10,12,20,.84);border:1px solid var(--line);border-radius:14px;overflow:hidden;opacity:.62;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s,opacity .3s}
.row:hover{opacity:1}
.rh{display:grid;grid-template-columns:30px 1fr auto;gap:0 clamp(7.2px,calc(12*var(--u)),12px);align-items:center;padding:clamp(8.4px,calc(14*var(--u)),14px) clamp(9.6px,calc(16*var(--u)),16px)}
.rh .n{width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:clamp(10.32px,calc(12*var(--u)),12px);font-weight:650;transition:background .3s,color .3s,border-color .3s}
.rh b{display:block;font-size:clamp(12.8px,calc(16*var(--u)),16px);font-weight:650;letter-spacing:-.01em}
.rh small{display:block;margin-top:2px;font-size:clamp(9.89px,calc(11.5*var(--u)),11.5px);color:var(--dim)}
.rh .st{font-size:clamp(9.5px,calc(10.5*var(--u)),10.5px);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.rh .st::before{content:"Next"}
.rb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}
.rb>.in{overflow:hidden;min-height:0}
.rb .det{padding:2px clamp(9.6px,calc(16*var(--u)),16px) clamp(9.6px,calc(16*var(--u)),16px) clamp(34.8px,calc(58*var(--u)),58px);font-size:clamp(11.61px,calc(13.5*var(--u)),13.5px);line-height:1.5}
.rb .det p{margin:0 0 clamp(6px,calc(10*var(--u)),10px)}
.rb .det em{display:block;margin-bottom:2px;font-style:normal;font-size:clamp(9.5px,calc(10.5*var(--u)),10.5px);font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--amber)}
.rb .cues{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:clamp(3.6px,calc(6*var(--u)),6px);color:var(--dim);font-size:clamp(10.75px,calc(12.5*var(--u)),12.5px)}
.rb .cues b{color:var(--ink)}
.row.act{opacity:1;border-color:rgba(255,196,143,.6);transform:translateY(-4px);box-shadow:0 22px 60px rgba(255,160,90,.3),0 0 0 1px var(--amber)}
.row.act .rb{grid-template-rows:1fr}
.row.act .n{background:var(--amber);border-color:var(--amber);color:#1a1209}
.row.act .st::before{content:"Now";color:var(--amber)}
.row.act .st{color:var(--amber)}
.row.done{opacity:.86}
.row.done .n{background:var(--ink);border-color:var(--ink);color:#0b0e14}
.row.done .st::before{content:"Done"}
#endbox{display:none;margin-top:clamp(10.8px,calc(18*var(--u)),18px)}
body[data-state="done"] #endbox{display:block}
#endbox .deb{margin:0 0 4px;font-size:clamp(12.04px,calc(14*var(--u)),14px);line-height:1.55;color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(30,12,24,.55)}
body[data-state="done"] .row.act{transform:none;box-shadow:none;border-color:var(--line)}
@media (max-width:720px){
  #lesson{top:64px;left:var(--g);right:var(--g);width:auto;max-height:calc(100dvh - 64px - 14px);padding:0}
  #lesson h1{font-size:clamp(22.4px,calc(32*var(--u)),32px);margin-bottom:clamp(6px,calc(10*var(--u)),10px)}
  #lesson .sub{display:none}
  #lesson .back{margin-bottom:clamp(4.8px,calc(8*var(--u)),8px)}
  .rh{padding:clamp(7.2px,calc(12*var(--u)),12px) clamp(8.4px,calc(14*var(--u)),14px)}.rb .det{padding:2px clamp(8.4px,calc(14*var(--u)),14px) clamp(8.4px,calc(14*var(--u)),14px) clamp(32.4px,calc(54*var(--u)),54px)}
}

/* ---------- waiting between chapters: one thing to look at, one thing to press ---------- */
#scrim{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 70% 45%,rgba(6,8,14,.18),rgba(6,8,14,.5));opacity:0;transition:opacity .7s}
body[data-wait] #scrim{opacity:1}
.rp{display:none;margin:0;padding:clamp(3px,calc(5*var(--u)),5px) clamp(5.4px,calc(9*var(--u)),9px);font-size:clamp(9.9px,calc(11*var(--u)),11px);font-weight:600;letter-spacing:.04em;color:var(--dim);background:none;border:1px solid var(--line);border-radius:99px}
.rp:hover{color:var(--ink);border-color:var(--ink)}
.row.done:hover .rp,.row.done:focus-within .rp{display:inline-block}
.row.done:hover .st{display:none}
.rh{grid-template-columns:30px 1fr auto}
.nx{display:none;padding:0 clamp(9.6px,calc(16*var(--u)),16px) clamp(9.6px,calc(16*var(--u)),16px) clamp(34.8px,calc(58*var(--u)),58px)}
.nx p{margin:0 0 clamp(7.2px,calc(12*var(--u)),12px);font-size:clamp(11.61px,calc(13.5*var(--u)),13.5px);line-height:1.5;color:var(--dim)}
.go-step{display:inline-flex;align-items:center;gap:clamp(4.8px,calc(8*var(--u)),8px);padding:clamp(6px,calc(10*var(--u)),10px) clamp(9.6px,calc(16*var(--u)),16px);font-size:clamp(11.61px,calc(13.5*var(--u)),13.5px);font-weight:650;color:#1a1209;background:var(--amber);border:0;border-radius:99px;transition:transform .25s,box-shadow .25s}
.go-step svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.go-step:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(255,160,90,.5)}
.go-step:hover svg{transform:translateX(3px)}
.row.rdy{opacity:1;cursor:pointer;border-color:rgba(255,196,143,.7);transform:translateY(-4px);animation:breathe 2.6s ease-in-out infinite}
.row.rdy .nx{display:block}
.row.rdy .n{border-color:var(--amber);color:var(--amber)}
.row.rdy .st::before{content:"Up next";color:var(--amber)}
.row.rdy .st{color:var(--amber)}
@keyframes breathe{0%,100%{box-shadow:0 0 0 1px rgba(255,196,143,.45),0 12px 40px rgba(255,160,90,.16)}50%{box-shadow:0 0 0 1px var(--amber),0 22px 64px rgba(255,160,90,.42)}}
body[data-wait] .row:not(.rdy){opacity:.4}
body[data-wait] .row.done:hover{opacity:.9}
body[data-wait] #lesson h1,body[data-wait] #lesson .sub{opacity:.75;transition:opacity .5s}
#bar #pp{transition:background .3s,border-color .3s}
body[data-wait] #pp{border-color:var(--amber);color:var(--amber)}
@media (prefers-reduced-motion:reduce){.row.rdy{animation:none;box-shadow:0 0 0 1px var(--amber)}}
@media (max-width:720px){.nx{padding:0 clamp(8.4px,calc(14*var(--u)),14px) clamp(8.4px,calc(14*var(--u)),14px) clamp(32.4px,calc(54*var(--u)),54px)}}

#fade{position:fixed;inset:0;z-index:3;background:#0a0c12;opacity:0;pointer-events:none;transition:opacity .45s ease}
.row.rdy.starting{animation:none;box-shadow:0 0 0 1px var(--amber),0 22px 64px rgba(255,160,90,.46)}

/* the big pause mark: dead centre of the screen, nothing around it */
#pausemark{position:fixed;z-index:4;left:50%;top:50%;width:104px;height:104px;margin:0;padding:0;display:grid;place-items:center;color:#fff;background:none;border:0;border-radius:0;box-shadow:none;transform:translate(-50%,-50%);opacity:0;pointer-events:none;cursor:pointer;transition:opacity .3s}
#pausemark svg{width:100%;height:100%;fill:currentColor}
body[data-wait] #pausemark{opacity:.5;pointer-events:auto}
body[data-wait] #pausemark:hover,body[data-wait] #pausemark:focus-visible{opacity:1}
@media (max-width:720px){#pausemark{width:76px;height:76px}}

/* performance: the interface sits on its own layers, so the animated canvas behind it does not force a repaint of every panel */
#lesson,#menu,#bar,.row,.cards li,#pausemark{will-change:transform,opacity}
#lesson{contain:layout paint}

/* chapter markers on the timeline: a thin vertical line where each chapter starts */
#track .mark{position:absolute;top:50%;width:2px;height:20px;margin:clamp(-10px,calc(-10*var(--u)),-6px) 0 0 -1px;border-radius:1px;background:var(--ink);opacity:.45;pointer-events:none;transition:opacity .3s,background .3s,height .3s,margin .3s}
#track .mark.done{opacity:.95}
#track .mark.act{background:var(--amber);opacity:1;height:26px;margin-top:clamp(-13px,calc(-13*var(--u)),-7.8px)}

/* ---------- chat with the instructor: a bar like the timeline's, grows upward when you write ---------- */
#chat{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);width:min(980px,calc(100vw - 2*var(--g)));z-index:5;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:opacity .35s,border-color .3s,box-shadow .4s}
body[data-state="menu"] #chat{opacity:0;pointer-events:none;visibility:hidden}
#chat:focus-within,#chat.open{border-color:rgba(255,196,143,.55)}
#chat.open{box-shadow:0 18px 60px rgba(0,0,0,.35)}
#thread{max-height:0;overflow-y:auto;padding:0 clamp(8.4px,calc(14*var(--u)),14px);display:flex;flex-direction:column;gap:clamp(6px,calc(10*var(--u)),10px);scrollbar-width:thin;transition:max-height .5s cubic-bezier(.2,.8,.2,1),padding .35s}
#chat.open #thread{max-height:min(42vh,380px);padding:clamp(8.4px,calc(14*var(--u)),14px) clamp(8.4px,calc(14*var(--u)),14px) clamp(3.6px,calc(6*var(--u)),6px)}
.msg{max-width:min(620px,86%);padding:clamp(6px,calc(10*var(--u)),10px) clamp(7.8px,calc(13*var(--u)),13px);font-size:clamp(12.04px,calc(14*var(--u)),14px);line-height:1.5;border-radius:12px;white-space:pre-wrap;word-wrap:break-word}
.msg.u{align-self:flex-end;background:var(--amber);color:#1a1209;border-bottom-right-radius:4px}
.msg.a{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.a.err{color:#ffb4a3}
.msg.empty{align-self:center;max-width:none;padding:2px 0;background:none;border:0;font-size:clamp(10.75px,calc(12.5*var(--u)),12.5px);color:var(--dim);text-align:center}
.typing{display:inline-flex;gap:clamp(3px,calc(5*var(--u)),5px);padding:4px 2px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.35;animation:typ 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{50%{opacity:1}}
.crow{display:flex;align-items:center;gap:clamp(4.8px,calc(8*var(--u)),8px);padding:clamp(4.8px,calc(8*var(--u)),8px) clamp(6px,calc(10*var(--u)),10px)}
#c-in{flex:1;min-width:0;height:36px;padding:0 clamp(3.6px,calc(6*var(--u)),6px) 0 clamp(4.8px,calc(8*var(--u)),8px);font:inherit;font-size:clamp(11.6px,calc(14.5*var(--u)),14.5px);color:var(--ink);background:none;border:0;outline:0}
#c-in::placeholder{color:var(--dim)}
#c-send,#c-close{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:8px}
#c-send{background:var(--amber);color:#1a1209;border:0;opacity:.45;transition:opacity .25s,transform .25s}
#chat.has #c-send{opacity:1}
#c-send:hover{transform:translateY(-1px)}
#c-send:disabled{opacity:.35;cursor:default}
#c-close{background:none;border:1px solid var(--line);color:var(--dim)}
#c-close:hover{color:var(--ink);border-color:var(--ink)}
#c-send svg,#c-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){#chat{bottom:calc(50dvh + 10px);width:calc(100vw - 20px)}#chat.open #thread{max-height:min(30vh,240px)}}

/* timeline and chat share one centred block, as wide as the timeline bar alone used to be */
:root{--cw:clamp(268px,calc(320*var(--u)),320px);--bw:min(1080px,calc(100vw - 2*var(--g)))}
@media (min-width:721px){
  #bar{left:calc((100vw - var(--bw))/2);right:auto;transform:none;width:calc(var(--bw) - var(--cw) - 12px);height:54px}
  #chat{left:auto;right:calc((100vw - var(--bw))/2);bottom:34px;transform:none;width:var(--cw)}
  .msg{max-width:92%}
  #chat.open #thread{max-height:min(46vh,420px)}
}

#c-close[hidden]{display:none}
#c-close svg{transition:transform .35s}
#chat:not(.open) #c-close svg{transform:rotate(180deg)}

/* ---------- end of the lesson: a short message in the middle of the screen, like the pause mark ---------- */
#endmsg{position:fixed;z-index:4;left:50%;top:50%;width:min(620px,calc(100vw - 2*var(--g)));transform:translate(-50%,-46%);text-align:center;color:#fff;text-shadow:0 2px 30px rgba(10,6,18,.65);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),visibility 0s .9s}
#endmsg.on{opacity:.9;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),visibility 0s}
.em-eye{margin:0 0 clamp(8.4px,calc(14*var(--u)),14px);font-size:clamp(9.89px,calc(11.5*var(--u)),11.5px);font-weight:650;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.em-t{margin:0 0 clamp(8.4px,calc(14*var(--u)),14px);font-size:clamp(34px,calc(64*var(--u)),64px);line-height:1;font-weight:700;letter-spacing:-.04em}
.em-s{margin:0 auto clamp(13.2px,calc(22*var(--u)),22px);max-width:30em;font-size:clamp(15px,calc(18*var(--u)),18px);line-height:1.5;opacity:.9}
.em-h{display:inline-flex;align-items:center;gap:clamp(4.8px,calc(8*var(--u)),8px);margin:0;font-size:clamp(11.18px,calc(13*var(--u)),13px);font-weight:650;letter-spacing:.04em;color:var(--amber)}
.em-h svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
#em-x{position:absolute;right:-6px;top:-30px;width:30px;height:30px;display:grid;place-items:center;padding:0;background:none;border:0;color:#fff;opacity:.5}
#em-x:hover{opacity:1}
#em-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:720px){#endmsg{top:36%}.em-h svg{transform:rotate(-90deg);animation:none}}
@media (prefers-reduced-motion:reduce){.em-h svg{animation:none}}

#c-last{display:block;width:100%;padding:clamp(6px,calc(10*var(--u)),10px) clamp(8.4px,calc(14*var(--u)),14px) 0;text-align:left;font-size:clamp(10.75px,calc(12.5*var(--u)),12.5px);line-height:1.3;color:var(--dim);opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:0;cursor:pointer}
#c-last:hover{opacity:1}
#c-last[hidden],#chat.open #c-last{display:none}

/* closing message: the scene goes dark behind it so the text reads cleanly */
#scrim{transition:opacity 1s ease,background .6s}
body[data-end] #scrim{opacity:1;background:radial-gradient(ellipse at 50% 48%,rgba(6,8,14,.7),rgba(6,8,14,.84))}

/* "What now?" is a real H2: same voice as the other headings */
h2.ctat{margin:clamp(14.4px,calc(24*var(--u)),24px) 0 clamp(8.4px,calc(14*var(--u)),14px);font-size:clamp(22px,calc(28*var(--u)),28px);line-height:1.1;font-weight:700;letter-spacing:-.03em;text-transform:none;color:#fff;text-shadow:0 2px 24px rgba(30,12,24,.55)}

.sndb{flex:none;width:34px;height:34px;display:grid;place-items:center;background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:0}
.sndb svg{width:18px;height:18px;fill:currentColor}
.sndb .x{display:none}
.sndb[aria-pressed="false"]{color:var(--dim)}
.sndb[aria-pressed="false"] .w{display:none}
.sndb[aria-pressed="false"] .x{display:block}

#vol{flex:none;width:76px;height:34px;margin:0;padding:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;--p:50%}
#vol::-webkit-slider-runnable-track{height:2px;border-radius:0;background:linear-gradient(90deg,var(--amber) var(--p),var(--line) var(--p))}
#vol::-moz-range-track{height:2px;background:var(--line)}
#vol::-moz-range-progress{height:2px;background:var(--amber)}
#vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:clamp(-5px,calc(-5*var(--u)),-3px);border:0;border-radius:50%;background:var(--ink)}
#vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--ink)}
@media (max-width:720px){ #vol{display:none} }

#snd-menu{position:fixed;top:14px;right:14px;z-index:6;transition:opacity .35s}
body:not([data-state="menu"]) #snd-menu{opacity:0;pointer-events:none}
#snd-menu{background:rgba(11,14,20,.5);border-color:rgba(255,255,255,.35);color:#fff}
#snd-menu[aria-pressed="false"]{color:#fff}

#time{min-width:0;text-align:left;margin-left:-4px}
#snd-wrap{flex:none;display:flex;align-items:center;gap:clamp(3.6px,calc(6*var(--u)),6px)}
#snd-wrap #snd{border-color:transparent}
#snd-wrap #vol{width:0;opacity:0;pointer-events:none;transition:width .25s ease,opacity .2s ease}
#snd-wrap:hover #vol,#snd-wrap:focus-within #vol{width:76px;opacity:1;pointer-events:auto}
.adj{flex:none;min-width:34px;height:34px;padding:0 clamp(4.8px,calc(8*var(--u)),8px);background:none;border:0;border-radius:8px;font-size:clamp(10.32px,calc(12*var(--u)),12px);font-variant-numeric:tabular-nums;color:var(--dim)}
.adj:hover{color:var(--ink)}

/* ---------- the lesson column is a conversation with the instructor ---------- */
#lesson{display:flex;flex-direction:column;top:calc(var(--g)*1.2);bottom:104px;max-height:none;width:min(440px,calc(100vw - 2*var(--g)));padding:0;overflow:hidden;background:rgba(10,12,20,.86);border:1px solid var(--line);border-radius:16px}
#lesson .lh{flex:none;padding:clamp(9.6px,calc(16*var(--u)),16px) clamp(12px,calc(20*var(--u)),20px) clamp(8.4px,calc(14*var(--u)),14px);border-bottom:1px solid var(--line)}
#lesson .back{margin:0 0 clamp(6px,calc(10*var(--u)),10px) clamp(-8px,calc(-8*var(--u)),-4.8px)}
#lesson .eyebrow{margin:0 0 clamp(4.8px,calc(8*var(--u)),8px);text-shadow:none}
#lesson h1{margin:0;font-size:clamp(26px,calc(34*var(--u)),34px);line-height:1;text-shadow:none}
#convo{flex:1;min-height:0;overflow-y:auto;padding:clamp(10.8px,calc(18*var(--u)),18px) clamp(12px,calc(20*var(--u)),20px) clamp(6px,calc(10*var(--u)),10px);display:flex;flex-direction:column;gap:clamp(8.4px,calc(14*var(--u)),14px);scrollbar-width:thin;scrollbar-color:rgba(238,241,247,.2) transparent;overscroll-behavior:contain}
.m{font-size:clamp(11.6px,calc(14.5*var(--u)),14.5px);line-height:1.55;animation:min .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes min{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.m .tx{white-space:pre-wrap;word-wrap:break-word}
.m.a{align-self:stretch;color:rgba(238,241,247,.94)}
.m.u{align-self:flex-end;max-width:85%;padding:clamp(5.4px,calc(9*var(--u)),9px) clamp(7.8px,calc(13*var(--u)),13px);background:var(--amber);color:#1a1209;border-radius:14px 14px 4px 14px;font-weight:520}
.m.step{display:grid;grid-template-columns:30px 1fr;gap:clamp(7.2px,calc(12*var(--u)),12px);align-items:center;margin-top:clamp(4.8px,calc(8*var(--u)),8px);padding-top:clamp(9.6px,calc(16*var(--u)),16px);border-top:1px solid var(--line)}
.m.step .sn{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--amber);color:#1a1209;font-size:clamp(11.18px,calc(13*var(--u)),13px);font-weight:700}
.m.step small{display:block;font-size:clamp(9.5px,calc(10.5*var(--u)),10.5px);font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.m.step b{display:block;font-size:clamp(12.8px,calc(16*var(--u)),16px);font-weight:650;line-height:1.25;color:#fff}
.m.step i{display:inline-block;margin-top:clamp(3px,calc(5*var(--u)),5px);font-style:normal;font-size:clamp(9.9px,calc(11*var(--u)),11px);padding:2px clamp(4.8px,calc(8*var(--u)),8px);border:1px solid rgba(255,196,143,.5);border-radius:99px;color:var(--amber)}
.m.cue{padding:2px 0 2px clamp(7.2px,calc(12*var(--u)),12px);border-left:2px solid var(--amber);font-size:clamp(11.61px,calc(13.5*var(--u)),13.5px);color:rgba(238,241,247,.86)}
.m.cue b{display:block;font-size:clamp(9.5px,calc(10.5*var(--u)),10.5px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.acts{display:flex;flex-wrap:wrap;gap:clamp(4.8px,calc(8*var(--u)),8px);margin-top:clamp(7.2px,calc(12*var(--u)),12px)}
.cact{display:inline-flex;align-items:center;gap:clamp(4.2px,calc(7*var(--u)),7px);padding:clamp(4.8px,calc(8*var(--u)),8px) clamp(7.8px,calc(13*var(--u)),13px);font-size:clamp(11.18px,calc(13*var(--u)),13px);font-weight:560;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:99px;transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.cact:hover{border-color:var(--ink);background:rgba(255,255,255,.1)}
.cact.pri{padding:clamp(6px,calc(10*var(--u)),10px) clamp(9.6px,calc(16*var(--u)),16px);font-size:clamp(11.61px,calc(13.5*var(--u)),13.5px);font-weight:650;color:#1a1209;background:var(--amber);border-color:var(--amber)}
.cact.pri:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(255,160,90,.45)}
.cact svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cact.pri:hover svg{transform:translateX(3px)}
.cact.used,.cact:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
body[data-wait] .cact.pri:not(.used){animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,196,143,0)}50%{box-shadow:0 0 0 6px rgba(255,196,143,.18)}}
@media (prefers-reduced-motion:reduce){.m{animation:none}body[data-wait] .cact.pri:not(.used){animation:none}}
#compose{flex:none;display:flex;align-items:flex-end;gap:clamp(4.8px,calc(8*var(--u)),8px);margin:0 clamp(7.2px,calc(12*var(--u)),12px) clamp(7.2px,calc(12*var(--u)),12px);padding:clamp(3.6px,calc(6*var(--u)),6px) clamp(3.6px,calc(6*var(--u)),6px) clamp(3.6px,calc(6*var(--u)),6px) clamp(7.2px,calc(12*var(--u)),12px);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;transition:border-color .2s}
#compose:focus-within{border-color:rgba(255,196,143,.6)}
#q{flex:1;min-width:0;resize:none;max-height:150px;padding:clamp(4.8px,calc(8*var(--u)),8px) 0;font:inherit;font-size:clamp(11.6px,calc(14.5*var(--u)),14.5px);line-height:1.4;color:var(--ink);background:none;border:0;outline:0}
#q::placeholder{color:var(--dim)}
#q-send{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:var(--amber);color:#1a1209;opacity:.4;transition:opacity .2s,transform .2s}
#compose.has #q-send{opacity:1}
#q-send:disabled{opacity:.3;cursor:default}
#q-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:721px){ #bar{width:var(--bw)} }
@media (max-width:720px){
  #lesson{top:auto;bottom:10px;left:10px;right:10px;width:auto;height:min(54dvh,520px)}
  #lesson .lh{padding:clamp(6px,calc(10*var(--u)),10px) clamp(8.4px,calc(14*var(--u)),14px)}#lesson .back,#lesson .eyebrow{display:none}#lesson h1{font-size:clamp(15.4px,calc(22*var(--u)),22px)}
  #convo{padding:clamp(7.2px,calc(12*var(--u)),12px) clamp(8.4px,calc(14*var(--u)),14px) clamp(4.8px,calc(8*var(--u)),8px)}
}
/* chat buttons are no taller than the step number circle (30px) */
.cact,.cact.pri{height:30px;padding:0 clamp(7.2px,calc(12*var(--u)),12px);font-size:clamp(10.75px,calc(12.5*var(--u)),12.5px);line-height:1}
.cact svg{width:14px;height:14px}

/* collapse: the conversation folds into a black circle in its corner */
#lesson .lt{display:flex;align-items:center;gap:clamp(4.8px,calc(8*var(--u)),8px);margin:0 0 clamp(6px,calc(10*var(--u)),10px) clamp(-6px,calc(-6*var(--u)),-3.6px)}
#lesson .lt .back{margin:0}
#l-min{flex:none;width:30px;height:30px;display:grid;place-items:center;padding:0;background:none;border:1px solid var(--line);border-radius:50%;color:var(--dim);transition:color .2s,border-color .2s}
#l-min:hover{color:var(--ink);border-color:var(--ink)}
#l-min svg,#l-expand svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#l-expand{display:none;position:absolute;inset:0;width:100%;height:100%;place-items:center;padding:0;background:none;border:0;border-radius:50%;color:#fff}
#l-expand.new::after{content:"";position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--amber)}
#lesson{transition:opacity .45s,transform .45s,width .4s cubic-bezier(.2,.8,.2,1),height .4s cubic-bezier(.2,.8,.2,1),border-radius .4s,background .3s}
#lesson.min{width:44px;height:44px;bottom:auto;border-radius:50%;background:#000;border-color:rgba(255,255,255,.22)}
#lesson.min .lh,#lesson.min #convo,#lesson.min #compose{visibility:hidden;opacity:0}
#lesson.min #l-expand{display:grid}
#lesson .lh,#convo,#compose{transition:opacity .2s}
@media (max-width:720px){ #lesson.min{top:auto;right:auto;bottom:10px;height:44px} }
/* the collapse button sits in the top-right corner of the card */
#lesson .lh{position:relative}
#l-min{position:absolute;top:14px;right:14px}
#lesson .lt{margin-left:clamp(-8px,calc(-8*var(--u)),-4.8px)}
/* collapse in two overlapping moves: the width folds first and the height joins halfway through it, and it lands as a circle. Opening runs it backwards, overlapped the same way: height first, width joins halfway */
#lesson{transition:opacity .45s,transform .45s,height .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1) .1s,border-radius .3s,background .3s}
#lesson.min{border-radius:22px;transition:opacity .45s,transform .45s,width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1) .1s,border-radius .3s .1s,background .3s .1s}
#lesson .lh,#convo,#compose{transition:opacity .2s .4s,visibility 0s .4s}
#lesson.min .lh,#lesson.min #convo,#lesson.min #compose{transition:opacity .12s,visibility 0s .12s}
#lesson.min #l-expand{opacity:0;animation:xin .2s ease .38s forwards}
@keyframes xin{to{opacity:1}}
@media (prefers-reduced-motion:reduce){#lesson,#lesson.min{transition:opacity .2s}}
.ctas{margin-top:clamp(8.4px,calc(14*var(--u)),14px)}
.ctas .cta{color:var(--ink)}
.ctas .cta.pri{color:#1a1209}
/* height tag beside the drop line */
#alt-tag{position:fixed;left:0;top:0;z-index:2;pointer-events:none;display:grid;gap:1px;color:#fff;opacity:0;transition:opacity .3s;text-shadow:0 1px 10px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
#alt-tag.on{opacity:1}
#alt-tag b{font-size:clamp(12px,calc(15*var(--u)),15px);font-weight:700;letter-spacing:-.01em}
#alt-tag small{font-size:clamp(9.9px,calc(11*var(--u)),11px);color:var(--dim)}
#alt-tag[data-dir="up"] b,#alt-tag[data-dir="down"] b{color:var(--amber)}
#alt-tag[data-dir="up"] b::after{content:" \2191"}
#alt-tag[data-dir="down"] b::after{content:" \2193"}
#alt-tag{padding:clamp(3px,calc(5*var(--u)),5px) clamp(5.4px,calc(9*var(--u)),9px);background:rgba(10,12,20,.78);border:1px solid var(--line);border-radius:8px;text-shadow:none}
.ctas .cta:hover,.ctas .cta:focus-visible{color:#1a1209}
/* height tag, final: no box, small, right beside the line; white blended by difference, so it turns dark over the pale sky and light over the dark ground */
#alt-tag{padding:0;background:none;border:0;border-radius:0;gap:0;color:#fff;mix-blend-mode:difference;text-shadow:none}
#alt-tag b{font-size:clamp(10.75px,calc(12.5*var(--u)),12.5px);font-weight:650}
#alt-tag small{font-size:clamp(9.5px,calc(10*var(--u)),10px);color:#fff;opacity:.7}
#alt-tag[data-dir="up"] b,#alt-tag[data-dir="down"] b{color:#fff}
#drop-svg{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
#drop-svg.on{opacity:1}
#drop-svg line{stroke:#fff;stroke-width:1.25;stroke-opacity:.85}
/* landmark labels: above each ground reference, blended so they read on sky and on ground */
.lm-tag{position:fixed;left:0;top:0;z-index:2;pointer-events:none;display:grid;justify-items:center;gap:0;color:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .4s;white-space:nowrap;font-variant-numeric:tabular-nums}
.lm-tag.on{opacity:1}
.lm-tag b{font-size:clamp(10.32px,calc(12*var(--u)),12px);font-weight:700}
.lm-tag span{font-size:clamp(9.5px,calc(10*var(--u)),10px);opacity:.75}

.lm-tag b,.lm-tag span{display:none}
.lm-tag{font-size:clamp(10.32px,calc(12*var(--u)),12px);font-weight:700;letter-spacing:.02em}
.lm-tag.act{mix-blend-mode:normal;color:var(--amber);text-shadow:0 1px 8px rgba(0,0,0,.5)}
#sight-svg{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s}
#sight-svg.on{opacity:1}
#sight-svg line{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:6 6;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(0,0,0,.45))}
/* view switcher: the small window, bottom right above the bar; the other view is rendered into it */
#pip{position:fixed;z-index:4;right:calc((100vw - var(--bw))/2);bottom:104px;width:clamp(240px,calc(340*var(--u)),340px);aspect-ratio:16/10;padding:0;background:none;border:1px solid rgba(255,255,255,.55);border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.35);overflow:hidden;opacity:0;pointer-events:none;transition:opacity .35s,border-color .2s,transform .2s;cursor:pointer}
#pip.on{opacity:1;pointer-events:auto}
#pip:hover{border-color:#fff;transform:translateY(-2px)}
#pip .pip-l{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:clamp(3.6px,calc(6*var(--u)),6px);padding:4px clamp(4.8px,calc(8*var(--u)),8px);font-size:clamp(9.9px,calc(11*var(--u)),11px);font-weight:600;color:#fff;background:rgba(10,12,20,.62);border-radius:99px}
#pip .pip-l svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#pip[data-view="cockpit"] .pip-l b::before{content:"Cockpit"}
#pip[data-view="chase"] .pip-l b::before{content:"Outside"}
#pip-mark{position:absolute;left:0;top:0;width:26px;height:26px;border:1.5px solid var(--amber);border-radius:4px;opacity:0;transition:opacity .3s;pointer-events:none}
#pip-mark.on{opacity:1}
/* the view switcher sits in the bottom-right corner, level with the bar; the bar ends before it, so the timeline stays clear */
:root{--pipw:clamp(240px,calc(340*var(--u)),340px);--barh:54px}
#pip{width:var(--pipw);bottom:calc(34px + var(--barh))}
@media (min-width:721px){ #bar{width:calc(var(--bw) - var(--pipw) - 12px)} }
/* view switcher in the far bottom-right corner of the screen; the bar stays centred and never runs under it */
#pip{right:var(--g)}
@media (min-width:721px){ #bar{left:50%;right:auto;transform:translateX(-50%);width:min(var(--bw),calc(100vw - 2*(var(--pipw) + var(--g) + 16px)))} }
/* bottom-aligned layout: the chat card and the view window both end at the bar's top edge; the bar fills the space between the chat and the view window */
@media (min-width:721px){
  :root{--lw:min(440px,32vw)}
  #lesson{bottom:calc(34px + var(--barh));width:var(--lw)}
  #lesson.min{bottom:auto}
  #bar{left:calc(var(--g) + var(--lw) + 16px);right:calc(var(--g) + var(--pipw) + 16px);width:auto;transform:none}
}

/* instrument strip inside the view switcher */
#pip-ins{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;gap:clamp(13.2px,calc(22*var(--u)),22px);align-items:flex-start;padding:clamp(9.6px,calc(16*var(--u)),16px) clamp(6px,calc(10*var(--u)),10px) clamp(9.6px,calc(16*var(--u)),16px);box-sizing:border-box;background:linear-gradient(rgba(8,10,16,.72),rgba(8,10,16,0));color:#fff;pointer-events:none;font-variant-numeric:tabular-nums}
#pip-ins .ins{display:flex;align-items:center;gap:clamp(3px,calc(5*var(--u)),5px)}
#pip-ins svg{width:26px;height:26px;display:block;flex:none}
#pip-ins .tx{display:grid;line-height:1.05;text-align:left}
#pip-ins i{font-style:normal;font-size:clamp(9.5px,calc(7.5*var(--u)),7.5px);font-weight:500;letter-spacing:.08em;opacity:.65}
#pip-ins b{font-size:clamp(9.9px,calc(11*var(--u)),11px);font-weight:600}
/* the real altitude now lives in the strip: the tag by the line keeps only the change, bank and pitch */
#alt-tag small:nth-child(2){display:none}

/* "All lessons" lives outside the chat card, top-left, so the way back stays there when the card is collapsed; the card starts under it */
#back.back-out{position:fixed;left:var(--g);top:calc(var(--g)*1.2);z-index:6;margin:0;padding:clamp(4.2px,calc(7*var(--u)),7px) clamp(7.2px,calc(12*var(--u)),12px) clamp(4.2px,calc(7*var(--u)),7px) clamp(4.8px,calc(8*var(--u)),8px);background:rgba(10,12,20,.86);border:1px solid var(--line);border-radius:99px;color:rgba(255,255,255,.85);text-shadow:none;transition:opacity .35s,color .2s,background .2s}
body[data-state="menu"] #back.back-out{opacity:0;pointer-events:none}
#lesson .lt{margin:0}
@media (min-width:721px){ #lesson{top:calc(var(--g)*1.2 + 44px)} }
@media (max-width:720px){ #back.back-out{display:none} }
/* the title runs the full width of the header and sat on top of the collapse button: lift the button so its whole circle takes the click */
#l-min{z-index:2}
#lesson h1{padding-right:clamp(24px,calc(40*var(--u)),40px)}

/* the two fine-print lines fill the empty bands under the chat card (credit) and under the view switcher (disclaimer), level with the bar */
#fine-l{display:none}
@media (min-width:721px){
  body:not([data-state="menu"]) #credit,#fine-l{position:fixed;bottom:34px;height:var(--barh);margin:0;display:flex;align-items:center;font-size:clamp(9.5px,calc(10.5*var(--u)),10.5px);line-height:1.35;letter-spacing:.02em;color:var(--dim);opacity:.7;pointer-events:none;z-index:3}
  body:not([data-state="menu"]) #credit{left:var(--g);width:var(--lw);justify-content:center;text-align:center}
  #fine-l{right:var(--g);width:var(--pipw);justify-content:center;text-align:center;transition:opacity .35s}
  body[data-state="menu"] #fine-l{opacity:0}
}

/* bank and pitch join the strip only when the cockpit is the big view (the small window then shows the outside) */
#pip-ins .att{display:none;position:absolute;left:0;right:0;top:50px;text-align:center;font-size:clamp(9.5px,calc(10*var(--u)),10px);opacity:.8}
#pip[data-view="chase"] #pip-ins{padding-bottom:clamp(18px,calc(30*var(--u)),30px)}
#pip[data-view="chase"] #pip-ins .att{display:block}

/* ---------- B1.1: subtitles. One line of the instructor, centred above the bar, like a movie ---------- */
#cc-line{position:fixed;left:calc(var(--g) + var(--lw,0px) + 16px);right:calc(var(--g) + var(--pipw,0px) + 16px);bottom:calc(34px + var(--barh,54px) + 22px);z-index:4;transform:translateY(6px);width:fit-content;max-width:640px;margin:0 auto;padding:clamp(4.8px,calc(8*var(--u)),8px) clamp(8.4px,calc(14*var(--u)),14px);
  font-size:clamp(15px,calc(18*var(--u)),18px);line-height:1.4;font-weight:520;text-align:center;color:#fff;background:rgba(8,10,16,.72);border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#cc-line.on{opacity:1;transform:none}
body.no-cc #cc-line,body[data-state="menu"] #cc-line{display:none}
#cc{font-weight:700;letter-spacing:.04em}
#cc[aria-pressed="false"]{text-decoration:line-through;opacity:.6}
@media (max-width:720px){ #cc-line{left:12px;right:12px;bottom:auto;top:64px;max-width:none;font-size:clamp(12px,calc(15*var(--u)),15px)} }

/* ======================= V5 layout: the flight takes the screen, controls on the edges ======================= */
/* hidden for now: the chat card, the view switcher's own label and dials, bank/pitch by the drop line (now in the top row) */
#lesson{display:none!important}
#pip .pip-l,#pip-ins{display:none}
#alt-tag small.att{display:none}
.em-h{display:none}
body[data-state="menu"] #inst,body[data-state="menu"] #rail{opacity:0;pointer-events:none}
#inst,#rail{transition:opacity .35s}

/* top left: back arrow only, the rail under it */
#back.back-out{width:40px;height:40px;padding:0;justify-content:center;gap:0;border-radius:50%;font-size:0}
#back.back-out svg{width:18px;height:18px}
#rail{position:fixed;left:var(--g);top:calc(var(--g)*1.2 + 52px);z-index:5;width:40px;height:min(300px,40vh);background:rgba(10,12,20,.86);border:1px solid var(--line);border-radius:20px}

/* top centre: flight data as text */
#inst{position:fixed;top:calc(var(--g)*1.2);left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;height:40px;padding:0 clamp(3.6px,calc(6*var(--u)),6px);background:rgba(10,12,20,.86);border:1px solid var(--line);border-radius:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
#inst span{display:flex;align-items:baseline;gap:clamp(3.6px,calc(6*var(--u)),6px);padding:0 clamp(6px,calc(10*var(--u)),10px)}
#inst span+span{border-left:1px solid var(--line)}
#inst i{font-style:normal;font-size:clamp(9.5px,calc(10*var(--u)),10px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
#inst b{font-size:clamp(11.61px,calc(13.5*var(--u)),13.5px);font-weight:600;color:#fff;min-width:3.6em}

/* bottom: the timeline alone in the middle, the fine print as one centred block under it */
@media (min-width:721px){
  #bar{left:50%;right:auto;transform:translateX(-50%);width:min(620px,calc(100vw - 2*var(--g) - 280px))}
  body:not([data-state="menu"]) #credit{display:none}
  #fine-l{left:var(--g);right:var(--g);bottom:10px;height:auto;width:auto;display:block;text-align:center}
}
#cc-line{left:var(--g);right:var(--g)}

@media (max-width:720px){
  #rail{display:none}
  #inst{top:60px;left:10px;right:10px;transform:none;justify-content:space-between;height:auto;padding:clamp(3.6px,calc(6*var(--u)),6px) 4px;overflow-x:auto}
  #inst span{flex-direction:column;align-items:center;gap:0;padding:0 clamp(3.6px,calc(6*var(--u)),6px)}
  #inst b{min-width:0;font-size:clamp(10.32px,calc(12*var(--u)),12px)}
}

/* ---- minimal pass (Alberto): the flight data is big numbers, small labels, no box.
   It is white blended by difference, so they read dark over the pale sky and light over the dark ground ---- */
#inst{height:auto;padding:0;gap:clamp(18px,calc(40*var(--u)),40px);background:none;border:0;border-radius:0;color:#fff;mix-blend-mode:difference;align-items:flex-start}
#inst span{flex-direction:column;align-items:flex-start;gap:2px;padding:0}
#inst span+span{border-left:0}
#inst i{font-size:clamp(9.5px,calc(10*var(--u)),10px);font-weight:600;letter-spacing:.14em;color:#fff;opacity:.7}
#inst b{font-size:clamp(22px,calc(30*var(--u)),30px);font-weight:500;letter-spacing:-.02em;line-height:1;color:#fff;min-width:0}
#inst b small{margin-left:3px;font-size:.45em;font-weight:600;letter-spacing:.04em;opacity:.7}
@media (max-width:720px){ #inst{gap:0;padding:0} #inst b{font-size:clamp(14.4px,calc(18*var(--u)),18px)} }
/* adaptive tone (18c-layout.js reads the scene behind each item): no blend, a real dark or light colour that eases between the two */
#inst{mix-blend-mode:normal}
#inst span{color:#fff;transition:color .5s ease,opacity .2s}
#inst i,#inst b{color:inherit}
#inst span[data-tone="dark"]{color:#0E1216}
#inst span{text-shadow:none}

/* ---- weather-display figures (Alberto's reference): huge tight figures, a small lowercase label under each, pure black or pure white ---- */
#inst{gap:clamp(22px,calc(48*var(--u)),48px);font-family:"Helvetica Neue",Helvetica,Arial,var(--f)}
#inst span{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
#inst b{order:0;font-size:clamp(34px,calc(56*var(--u)),56px);font-weight:600;letter-spacing:-.015em;line-height:.86;font-feature-settings:"tnum"}
#inst i{order:1;font-size:clamp(11px,calc(13*var(--u)),13px);font-weight:500;letter-spacing:0;text-transform:none;opacity:1}
/* only pure white or pure black, no tints, no fades through grey */
#inst span,#inst i,#inst b{opacity:1}
#inst span{color:#fff;transition:none}
#inst span[data-tone="dark"]{color:#000}
@media (max-width:720px){ #inst b{font-size:clamp(15.4px,calc(22*var(--u)),22px)} #inst i{font-size:clamp(9.5px,calc(10*var(--u)),10px)} }

/* fixed cells (Alberto): every figure sits in a cell of the same width, with a thin divider between cells, so a figure that
   grows (99 -> 100, 990 -> 1,000) never pushes the others. The width fits the widest figure, "1,800", at any size */
#inst{--fz:clamp(34px,calc(56*var(--u)),56px);gap:0}
#inst span{box-sizing:border-box;width:calc(var(--fz)*2.6 + 28px);padding:0 clamp(8.4px,calc(14*var(--u)),14px);flex:none}
#inst span+span{border-left:1px solid currentColor}
#inst b{font-size:var(--fz)}
@media (max-width:720px){ #inst span{width:auto;flex:1 1 0;padding:0 clamp(3.6px,calc(6*var(--u)),6px);align-items:center} }
/* more air around the data row: it sits lower */
#inst{top:clamp(34px,calc(52*var(--u)),52px)}

/* figures a little smaller (Alberto): 56 -> 48 px at most; the cells shrink with them */
#inst{--fz:clamp(24px,calc(38*var(--u)),38px)}

/* one family of round buttons on the top corners (Alberto): the sound button on the opening and Back in the lesson
   sit in the same 40 px disc, with the same distance from the edges as Back (left/right var(--g), top var(--g)*1.2) */
#snd-menu{top:calc(var(--g)*1.2);right:var(--g);width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;
  background:rgba(10,12,20,.86);border:1px solid var(--line);color:rgba(255,255,255,.85);mix-blend-mode:normal;opacity:1;transition:opacity .35s,color .2s,border-color .2s}
#snd-menu:hover{color:#fff;border-color:rgba(255,255,255,.5)}
#snd-menu[aria-pressed="false"]{color:rgba(255,255,255,.85)}
#snd-menu svg{width:18px;height:18px}
body:not([data-state="menu"]) #snd-menu{opacity:0;pointer-events:none}

/* ---- one corner radius for everything that is not a round button (Alberto: try 8 px) ----
   Round buttons (Back, sound, the player's round thumbs) keep 50%. Everything else uses --radius, including the timeline bar, the lesson cards, the tags, the rail, the subtitles and the dialogs. */
:root{--radius:8px}
#bar,.cards button,.tag,.chip,#rail,#cc-line,.mbox,.mbox input[type=email],.go,.cta,.seg,#pp,.adj,.sndb,#snd-wrap #snd,
#lesson,#compose,#chat,.msg,.row,.cact,.go-step,.rp,.m.u,.m.step i,#q-send,#c-send,#c-close,.panel,.back,#pip-mark{border-radius:var(--radius)}
#snd-menu,#back.back-out{border-radius:50%}

/* the rail's top is set by 18c-layout.js (level with what sits under the flight data) */
#rail{transition:opacity .35s}

/* ---- the rail: phases on top, tools under a divider ---- */
#rail{height:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(3.6px,calc(6*var(--u)),6px);padding:clamp(3.6px,calc(6*var(--u)),6px) 0}
.rbtn{position:relative;width:30px;height:30px;display:grid;place-items:center;padding:0;background:none;border:0;border-radius:var(--radius);color:rgba(255,255,255,.62);cursor:pointer;transition:color .2s,background .2s}
.rbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rbtn:hover{color:#fff;background:rgba(255,255,255,.08)}
.rbtn.on{color:var(--amber);background:rgba(255,196,143,.12)}
.rdiv{width:18px;height:1px;margin:2px 0;background:var(--line)}
/* the name, to the right of the rail, on hover or keyboard focus */
.rbtn::after{content:attr(data-label);position:absolute;left:calc(100% + 14px);top:50%;transform:translate(-4px,-50%);white-space:nowrap;padding:clamp(3px,calc(5*var(--u)),5px) clamp(5.4px,calc(9*var(--u)),9px);font-size:clamp(10.32px,calc(12*var(--u)),12px);font-weight:550;color:#fff;background:rgba(10,12,20,.86);border:1px solid var(--line);border-radius:var(--radius);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.rbtn:hover::after,.rbtn:focus-visible::after{opacity:1;transform:translate(0,-50%)}
/* rail icons a little larger (Alberto): 20 px icons in 32 px buttons, still inside the 40 px rail */
.rbtn{width:32px;height:32px}
.rbtn svg{width:20px;height:20px}
/* the rail matches the timeline bar (Alberto): as wide as the bar is tall, same glass background and border */
#rail{width:var(--barh,54px);background:var(--glass);border:1px solid var(--line)}

/* ---- the rail as text (wayfinding style): no box, no icons; a title and a live line, thin dividers; one tone, black or white ---- */
#rail{width:auto;min-width:0;max-width:220px;height:auto;padding:0;gap:0;align-items:stretch;background:none;border:0;border-radius:0;color:#fff;
  font-family:"Helvetica Neue",Helvetica,Arial,var(--f)}
#rail[data-tone="dark"]{color:#000}
.ritem{display:grid;gap:2px;width:100%;padding:clamp(6px,calc(10*var(--u)),10px) 0 clamp(6.6px,calc(11*var(--u)),11px) clamp(7.2px,calc(12*var(--u)),12px);text-align:left;background:none;border:0;border-top:1px solid currentColor;color:inherit;cursor:pointer;position:relative}
.ritem:first-child{border-top:0;padding-top:0}
.ritem.tool{margin-top:clamp(10.8px,calc(18*var(--u)),18px);border-top:1px solid currentColor}
.ritem b{font-size:clamp(13.6px,calc(17*var(--u)),17px);font-weight:600;letter-spacing:-.01em;line-height:1.1}
.ritem span{font-size:clamp(10.32px,calc(12*var(--u)),12px);font-weight:450;line-height:1.3;opacity:1}
.ritem span:empty{display:none}
.ritem:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* the current phase: a short bar on its left edge */
.ritem.on::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:currentColor}
.ritem:first-child.on::before{top:2px}
/* rail text, quieter (Alberto): no gap before Solo; the small lines and the dividers softened */
.ritem.tool{margin-top:0}
.ritem span{opacity:.62}
.ritem,.ritem.tool{border-top-color:color-mix(in srgb,currentColor 32%,transparent)}
.ritem:first-child{border-top:0}
/* no marker for the current phase (Alberto); without it the text no longer needs its left inset, so it lines up with Back */
.ritem.on::before{content:none}
.ritem{padding-left:0}
/* rail font sizes, chosen with the temporary tuner (Alberto, 2026-10-10): title 24 px, small line 13 px */
.ritem b{font-size:clamp(16.8px,calc(24*var(--u)),24px)}
.ritem span{font-size:clamp(11.18px,calc(13*var(--u)),13px)}
/* more air in each rail item (Alberto): 14 px above, 15 px below (was 10/11); the first item keeps its top flush with the cards */
.ritem{padding-top:clamp(8.4px,calc(14*var(--u)),14px);padding-bottom:clamp(9px,calc(15*var(--u)),15px)}
.ritem:first-child{padding-top:0}
/* the data row's dividers get the rail's treatment (Alberto): 32 % of the text colour, so they read lighter than the figures */
#inst span+span{border-left-color:color-mix(in srgb,currentColor 32%,transparent)}

/* the rail keeps one width per lesson (set in 18c-layout.js from its longest line) */
#rail{max-width:none}
/* black <-> white now eases instead of jumping (Alberto): the figures, the rail text and their dividers follow the colour */
#inst span,#rail{transition:color .7s ease,opacity .35s}
/* step markers on the timeline: shorter, and all the same height (the current one only changes colour) */
#track .mark,#track .mark.act{height:12px;margin-top:clamp(-6px,calc(-6*var(--u)),-3.6px)}
/* closing message (Alberto): the rail and the data row sink behind the dark overlay, so only the final message is in front */
body[data-end] #rail,body[data-end] #inst{z-index:1}
/* At the closing message (Alberto) everything behind the overlay (the flight, the rail, the data row) goes out of focus */
#scrim{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:opacity 1s ease,background .6s,backdrop-filter 1s ease,-webkit-backdrop-filter 1s ease}
body[data-end] #scrim{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}   /* softer: 3 px (tried 10, then 5) */
/* a subtitle still fading out at the end goes behind the overlay too */
body[data-end] #cc-line{z-index:1}

/* closing message: two text actions under the line, separated by a thin divider (same language as the rail and the data row) */
.em-x2{display:inline-flex;align-items:center;margin-top:clamp(13.2px,calc(22*var(--u)),22px);pointer-events:auto}
.em-x2 button{padding:clamp(3.6px,calc(6*var(--u)),6px) clamp(10.8px,calc(18*var(--u)),18px);background:none;border:0;color:#fff;font:inherit;font-size:clamp(17px,calc(20*var(--u)),20px);font-weight:600;letter-spacing:-.01em;cursor:pointer}
.em-x2 button+button{border-left:1px solid rgba(255,255,255,.32)}
.em-x2 button:hover,.em-x2 button:focus-visible{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* top row aligned at the top (Alberto): the data row starts at the same height as Back (its top edge) */
#inst{top:calc(var(--g)*1.2)}
/* closing message (Alberto): the overlay catches the pointer, so nothing behind it (the flight, the rail, the data row) can be
   dragged, scrolled or clicked until the message is closed */
body[data-end] #scrim{pointer-events:auto;cursor:default}
/* closing message: the timeline bar and the fine print go behind the overlay too, and the bar is locked until the message closes */
body[data-end] #bar,body[data-end] #fine-l,body[data-end] #credit{z-index:1}
body[data-end] #bar{pointer-events:none}

/* ---- one hover colour for the whole interface (Alberto): the peach of the lesson card ---- */
:root{--hover:var(--amber)}
#snd-menu:hover{color:var(--hover);border-color:var(--hover)}
#snd-menu:focus-visible{color:var(--hover);border-color:var(--hover)}
.ritem:hover,.ritem:focus-visible{color:var(--hover)}
.ritem:hover b{text-decoration:none}
.em-x2 button:hover,.em-x2 button:focus-visible{color:var(--hover);text-decoration:none}
#em-x:hover,#em-x:focus-visible{color:var(--hover);opacity:1}
#bar #pp:hover{color:var(--hover);border-color:var(--hover)}
#bar .adj:hover,#bar #cc:hover,#bar .sndb:hover{color:var(--hover)}
.lock button:hover,.lock button:focus-visible{border-color:var(--hover)}
/* expand buttons (Alberto): a see-through dark disc that turns solid on hover; no border, the icon stays white */

/* V9: the small view window (cockpit while the outside is big) sits in the far bottom-right corner, level with the bar; behind the closing message it sinks and is locked like the rest */
@media (min-width:721px){ #pip{bottom:34px} }
body[data-end] #pip{z-index:1;pointer-events:none}

#pip-cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;border-radius:inherit}   /* the window's picture, clipped by its rounded corners */

/* ======================= V9: the briefing screen (18d-brief.js) ======================= */
#brief{position:fixed;left:0;top:0;bottom:0;width:50vw;z-index:3;display:none;overflow:hidden;background-color:#0d1018;background-image:radial-gradient(circle at center,rgba(255,255,255,.1) .8px,transparent 1.1px);background-size:14px 14px;   /* the dots of the panel: 20 % at first, 10 % now */
  transform:translateX(calc((var(--bf,.5)/.5 - 1)*50vw));font-family:"Helvetica Neue",Helvetica,Arial,var(--f);color:#fff}
body.briefing #brief{display:flex}
#brief .bp-in{position:absolute;top:var(--bp-t,135px);left:var(--bp-l,190px);right:36px;bottom:0;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding-bottom:clamp(16.8px,calc(28*var(--u)),28px);scrollbar-width:none}
#brief .bp-in::-webkit-scrollbar{display:none}
#brief .bp-col{width:100%;max-width:560px}
#bp-steps{margin:0 0 clamp(13.2px,calc(22*var(--u)),22px);padding:0;list-style:none;counter-reset:bp;display:grid;gap:clamp(6px,calc(10*var(--u)),10px)}
#bp-steps li{counter-increment:bp;display:grid;grid-template-columns:1.5em 1fr;column-gap:clamp(8.4px,calc(14*var(--u)),14px);cursor:pointer}
#bp-steps li::before{content:counter(bp);color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;font-size:clamp(14px,calc(16*var(--u)),16px);line-height:1.3;padding-top:.12em}
#bp-steps h2{margin:0;font-size:clamp(16px,calc(19*var(--u)),19px);font-weight:600;letter-spacing:-.01em;line-height:1.25}
#bp-steps h2 button{font:inherit;color:#fff;background:none;border:0;padding:0;text-align:left;cursor:pointer;transition:color .2s}
#bp-steps p{margin:4px 0 0;font-size:clamp(13px,calc(14.5*var(--u)),14.5px);line-height:1.45;color:rgba(255,255,255,.6)}
#bp-steps li:hover h2 button,#bp-steps li:focus-within h2 button{color:var(--hover)}
.bp-act{position:sticky;bottom:0;margin-top:4px;padding:clamp(8.4px,calc(14*var(--u)),14px) 0 clamp(13.2px,calc(22*var(--u)),22px);background:linear-gradient(rgba(13,16,24,0),#0d1018 38%)}   /* Start sits at the end of the text, and stays in view when the text is taller than the screen */
#bp-go{display:inline-flex;align-items:center;gap:clamp(7.2px,calc(12*var(--u)),12px);margin:0;padding:clamp(8.4px,calc(14*var(--u)),14px) clamp(15.6px,calc(26*var(--u)),26px) clamp(8.4px,calc(14*var(--u)),14px) clamp(16.8px,calc(28*var(--u)),28px);font:inherit;font-size:clamp(13.6px,calc(17*var(--u)),17px);font-weight:600;color:#FFC48F;background:rgba(255,196,143,.08);border:1px solid #FFC48F;border-radius:var(--radius);cursor:pointer;transition:background .25s,color .25s,transform .25s}
#bp-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#bp-go:hover,#bp-go:focus-visible{color:#0E1216;background:#FFC48F;transform:translateX(2px)}
/* in the briefing: no flight data, no view window, no timeline, no subtitles, no pause mark */
body.briefing #inst,body.briefing #pip,body.briefing #bar,body.briefing #pausemark,body.briefing #cc-line{opacity:0!important;pointer-events:none!important}
#inst,#bar,#cc-line{transition:opacity .6s}
@media (max-width:720px){
  #brief{width:100vw;transform:none;transition:opacity .5s;background-color:#0d1018}
  #brief.out{opacity:0}
  #brief .bp-in{top:96px;left:22px;right:22px}
  }
#brief .bp-in{transition:opacity .3s}
#brief.moving .bp-in{opacity:0}
/* in the briefing the rest of the rail is toned down: the text on the panel belongs to Briefing */
.ritem{transition:opacity .5s}
body.briefing #rail .ritem:not(.on){opacity:.38}
/* the copyright is centred in the right part (the panel takes the left) */
@media (min-width:721px){ #fine-l{left:calc(var(--bf,0)*100vw + var(--g))} }

/* the facts under the title: steps, time, airplane, entry conditions, small */
.bp-meta{margin:0 0 clamp(8.4px,calc(14*var(--u)),14px);display:flex;flex-wrap:wrap;font-size:clamp(12.5px,calc(14*var(--u)),14px);line-height:1.4;color:rgba(255,255,255,.55);letter-spacing:.01em}
.bp-meta span+span::before{content:"\00b7";margin:0 .6em;opacity:.7}
/* the rail items that are not the current one turn white when pointed at (they are toned down while the briefing is open) */
#rail .ritem:not(.on):hover,#rail .ritem:not(.on):focus-visible{color:#fff}
body.briefing #rail .ritem:not(.on):hover,body.briefing #rail .ritem:not(.on):focus-visible{opacity:1}

/* ======================= V9: the panel's sections (Free style, Chat) ======================= */
.bp-sec[hidden]{display:none!important}
.bp-in .bp-sec{transition:opacity .17s}
.bp-in.swap .bp-sec{opacity:0}
.bp-btn{display:inline-flex;align-items:center;gap:clamp(7.2px,calc(12*var(--u)),12px);margin:0;padding:clamp(8.4px,calc(14*var(--u)),14px) clamp(15.6px,calc(26*var(--u)),26px) clamp(8.4px,calc(14*var(--u)),14px) clamp(16.8px,calc(28*var(--u)),28px);font:inherit;font-size:clamp(13.6px,calc(17*var(--u)),17px);font-weight:600;color:#FFC48F;background:rgba(255,196,143,.08);border:1px solid #FFC48F;border-radius:var(--radius);cursor:pointer;transition:background .25s,color .25s,transform .25s}
.bp-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bp-btn:hover,.bp-btn:focus-visible{color:#0E1216;background:#FFC48F}
.bp-btn.bp-ghost{color:rgba(255,255,255,.7);background:none;border-color:rgba(255,255,255,.28);font-weight:500;font-size:clamp(12px,calc(15*var(--u)),15px);padding:clamp(7.2px,calc(12*var(--u)),12px) clamp(12px,calc(20*var(--u)),20px);margin-left:clamp(4.8px,calc(8*var(--u)),8px)}
.bp-btn.bp-ghost:hover,.bp-btn.bp-ghost:focus-visible{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
/* Free style: the code and how to fly with the phone */
.fs-pair{display:flex;gap:clamp(15.6px,calc(26*var(--u)),26px);align-items:flex-start;margin:0 0 clamp(10.8px,calc(18*var(--u)),18px)}
.fs-qr{flex:none;width:clamp(150px,calc(190*var(--u)),190px);aspect-ratio:1;background:#fff;border-radius:var(--radius);padding:clamp(4.8px,calc(8*var(--u)),8px);box-sizing:border-box;display:grid;place-items:center}
.fs-qr svg{display:block;width:100%;height:100%}
.fs-info{min-width:0;display:grid;gap:clamp(6px,calc(10*var(--u)),10px);align-content:start}
.fs-state{margin:0;display:flex;align-items:center;gap:clamp(6px,calc(10*var(--u)),10px);font-size:clamp(12px,calc(15*var(--u)),15px);font-weight:600;color:#fff}
.fs-state i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);flex:none}
.fs-state[data-s="wait"] i{animation:fsp 1.4s ease-in-out infinite}
.fs-state[data-s="on"] i{background:#7BE0A4}
.fs-state[data-s="err"] i{background:#FF8F7B}
@keyframes fsp{50%{opacity:.25}}
.fs-help{margin:0;font-size:clamp(11.61px,calc(13.5*var(--u)),13.5px);line-height:1.45;color:rgba(255,255,255,.6)}
.fs-help#fs-link{font-size:clamp(10.32px,calc(12*var(--u)),12px);word-break:break-all;color:rgba(255,255,255,.4)}
.fs-keys{margin:0 0 clamp(3.6px,calc(6*var(--u)),6px);font-size:clamp(11.61px,calc(13.5*var(--u)),13.5px);line-height:1.5;color:rgba(255,255,255,.6);max-width:36em}.fs-keys b{color:#fff;font-weight:600}
/* Chat: a column of text, no boxes (the text-based interface): the instructor in white, the student in the hover peach */
.bp-in:has(.bp-chat:not([hidden])){align-items:stretch}
.bp-chat{height:100%;display:flex;flex-direction:column;min-height:0}
.bp-chat.bp-sec[hidden]{display:none!important}
.ch-log{flex:1;min-height:0;overflow:auto;margin:clamp(3.6px,calc(6*var(--u)),6px) 0 0;padding:4px clamp(3.6px,calc(6*var(--u)),6px) clamp(4.8px,calc(8*var(--u)),8px) 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.ch-m{margin:0 0 clamp(10.8px,calc(18*var(--u)),18px)}
.ch-m small{display:block;margin-bottom:4px;font-size:clamp(9.9px,calc(11*var(--u)),11px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ch-m p{margin:0;font-size:clamp(15px,calc(17*var(--u)),17px);line-height:1.5;color:#fff;white-space:pre-wrap}
.ch-m.u p{color:#FFC48F;font-size:clamp(14px,calc(16*var(--u)),16px)}
.ch-dots{display:flex;gap:clamp(3px,calc(5*var(--u)),5px);padding:clamp(3.6px,calc(6*var(--u)),6px) 0}.ch-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);animation:fsp 1.1s ease-in-out infinite}.ch-dots i:nth-child(2){animation-delay:.18s}.ch-dots i:nth-child(3){animation-delay:.36s}
.ch-ask{display:grid;gap:2px;margin:0 0 clamp(7.2px,calc(12*var(--u)),12px)}.ch-ask[hidden]{display:none}
.ch-ask button{font:inherit;font-size:clamp(12.04px,calc(14*var(--u)),14px);text-align:left;color:rgba(255,255,255,.62);background:none;border:0;border-top:1px solid rgba(255,255,255,.14);padding:clamp(5.4px,calc(9*var(--u)),9px) 0;cursor:pointer;transition:color .2s}
.ch-ask button:hover,.ch-ask button:focus-visible{color:#fff}
.ch-form{display:flex;gap:clamp(8.4px,calc(14*var(--u)),14px);align-items:flex-end;border-bottom:1px solid rgba(255,255,255,.4);padding:4px 0 clamp(4.8px,calc(8*var(--u)),8px)}
.ch-form:focus-within{border-bottom-color:#FFC48F}
.ch-form textarea{flex:1;min-width:0;resize:none;font:inherit;font-size:clamp(12.8px,calc(16*var(--u)),16px);line-height:1.4;color:#fff;background:none;border:0;outline:0;padding:clamp(3.6px,calc(6*var(--u)),6px) 0;max-height:120px}
.ch-form textarea::placeholder{color:rgba(255,255,255,.4)}
.ch-form button{font:inherit;font-size:clamp(12px,calc(15*var(--u)),15px);font-weight:600;color:#FFC48F;background:none;border:0;padding:clamp(3.6px,calc(6*var(--u)),6px) 0;cursor:pointer;transition:color .2s}
.ch-form button:hover{color:#fff}
.bp-chat .bp-act{position:static;background:none;padding:clamp(8.4px,calc(14*var(--u)),14px) 0 0;flex:none}
/* while the airplane is flown by hand there is no lesson timeline, subtitles or pause mark */
body.free #bar,body.free #cc-line,body.free #pausemark{opacity:0!important;pointer-events:none!important}
@media (max-width:720px){ .fs-pair{flex-direction:column} .fs-qr{width:170px} }
.bp-chat .bp-btn.bp-ghost{margin-left:0}

/* ======================= V9, 2026-10-12: the lesson's identity under Back; the panel's blocks; one H1 size ======================= */
:root{--h1:clamp(38px,calc(60*var(--u)),60px)}
/* every H1 is the same size and voice (the lesson's, the opening's, any other) */
html h1,html .hero h1{margin:0;font-size:var(--h1);font-weight:600;letter-spacing:-.015em;line-height:1;text-wrap:balance}
.hero h1{margin:0 0 clamp(9.6px,calc(16*var(--u)),16px)}
@media (max-width:720px){ :root{--h1:40px} }
#lhead{position:fixed;left:var(--g);top:96px;z-index:5;max-width:calc(50vw - var(--g) - 24px);color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,var(--f);transition:opacity .35s,color .5s ease}
#lhead .eyebrow{margin:0 0 clamp(4.8px,calc(8*var(--u)),8px);font-size:clamp(9.89px,calc(11.5*var(--u)),11.5px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.75}
#lhead[data-tone="dark"]{color:#0E1216}
body[data-state="menu"] #lhead{opacity:0;pointer-events:none;visibility:hidden}
#rail .ritem[hidden]{display:none}
/* the panel's sections */
.bp-h{margin:0 0 clamp(4.8px,calc(8*var(--u)),8px);font-size:clamp(24px,calc(30*var(--u)),30px);font-weight:600;letter-spacing:-.015em;line-height:1.1}
.bp-lead{margin:0 0 clamp(12px,calc(20*var(--u)),20px);font-size:clamp(15px,calc(18*var(--u)),18px);line-height:1.5;color:rgba(255,255,255,.8);max-width:34em}
.bp-blk{margin:0 0 clamp(14.4px,calc(24*var(--u)),24px)}
.bp-blk h2{margin:0 0 clamp(4.2px,calc(7*var(--u)),7px);font-size:clamp(16px,calc(19*var(--u)),19px);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.bp-blk p{margin:0 0 clamp(4.8px,calc(8*var(--u)),8px);font-size:clamp(14px,calc(15.5*var(--u)),15.5px);line-height:1.5;color:rgba(255,255,255,.82);max-width:36em}
.bp-blk ul{margin:0;padding:0 0 0 1.1em;display:grid;gap:clamp(3px,calc(5*var(--u)),5px);font-size:clamp(14px,calc(15.5*var(--u)),15.5px);line-height:1.5;color:rgba(255,255,255,.82);max-width:36em}
.bp-blk dl{margin:0 0 clamp(6px,calc(10*var(--u)),10px);display:grid;gap:clamp(7.2px,calc(12*var(--u)),12px);max-width:36em}
.bp-blk dt{font-size:clamp(14px,calc(15.5*var(--u)),15.5px);font-weight:600;color:#fff}
.bp-blk dd{margin:2px 0 0;font-size:clamp(13.5px,calc(15*var(--u)),15px);line-height:1.5;color:rgba(255,255,255,.66)}
.bp-stepsec{padding-bottom:clamp(3.6px,calc(6*var(--u)),6px)}
@media (max-width:720px){ #lhead{top:56px} #brief .bp-in{top:150px} }

html .hero h1{margin:0 0 clamp(9.6px,calc(16*var(--u)),16px)}
/* in flight the item that is not the current one steps back a little, so the lit one reads (Steps once the lesson starts) */
#rail .ritem:not(.on){opacity:.55}
body.briefing #rail .ritem:not(.on){opacity:.38}
#rail .ritem:not(.on):hover,#rail .ritem:not(.on):focus-visible,body.briefing #rail .ritem:not(.on):hover,body.briefing #rail .ritem:not(.on):focus-visible{opacity:1}

.bp-blk ol{margin:0;padding:0 0 0 1.3em;display:grid;gap:clamp(4.8px,calc(8*var(--u)),8px);font-size:clamp(14px,calc(15.5*var(--u)),15.5px);line-height:1.5;color:rgba(255,255,255,.82);max-width:36em}
.bp-blk li b{color:#fff;font-weight:600}

/* after the lesson the rail and the lesson's name stay above the closing message's veil, so Brief, Steps and Chat can be used */
body[data-end] #rail,body[data-end] #lhead{z-index:7}

.trace .yk{transform-origin:100px 76px;animation:ykrock 3.6s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
@keyframes ykrock{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}75%{transform:rotate(16deg)}}
.cards li:hover .trace .yk,.cards button:hover .trace .yk,.cards button:focus-visible .trace .yk{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.trace .yk{animation:none}}

/* ======================= V9, 2026-10-13: the Figma pass (Alberto's review of Lessons, Brief, Steps, Chat and the lesson view) =======================
   One type family (Inter), sizes and spaces taken from the Figma file at 1440 x 900 and scaled with --s (1 px at that size). Everything below
   overrides the earlier rules on purpose; the panel's layout is now: Lessons link, the title over a hairline, then the rail (145) and the content (435). */
:root{--s:min(.069444vw,.111111vh,1px);--f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--h1:clamp(34px,calc(52*var(--s)),66px)}
html,body,button,input,textarea,#rail,#brief,#lhead,#inst,.cards,.hero{font-family:var(--f)}
html h1,html .hero h1{font-size:var(--h1);font-weight:600;letter-spacing:0;line-height:.9239;text-wrap:initial}
@media (min-width:721px){
/* ---- Lessons (the opening) ---- */
#menu{display:block;padding:0}
.hero{position:absolute;left:calc(70*var(--s));top:calc(61*var(--s));width:calc(424*var(--s));max-width:none;display:flex;flex-direction:column;gap:calc(12*var(--s));text-shadow:none}
.hero .eyebrow{margin:0;font-size:calc(12*var(--s));font-weight:500;letter-spacing:0;line-height:normal;color:#fff;opacity:1;text-transform:uppercase}
html .hero h1{margin:0}
.hero .sub{margin:0;max-width:none;font-size:calc(16*var(--s));font-weight:500;line-height:calc(21/16);color:rgba(255,255,255,.9);text-shadow:0 2px 28px rgba(30,12,24,.5)}
.cards{position:absolute;left:calc(70*var(--s));right:calc(70*var(--s));top:calc(500*var(--s));width:auto;height:calc(336*var(--s));margin:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(11*var(--s));align-items:stretch}
.cards li,.cards button{height:100%}
.cards button{border-radius:8px;background:rgba(10,12,20,.84)}
.open button{box-shadow:none;border-color:rgba(255,196,143,.6)}
.open button:hover,.open button:focus-visible{box-shadow:0 22px 60px rgba(255,160,90,.34),0 0 0 1px var(--amber)}
.lock button{border-color:rgba(255,255,255,.3);background:rgba(10,12,20,.84)}
.art{aspect-ratio:315/159;border-bottom:1px solid rgba(238,241,247,.16)}
.lock .art{opacity:1}.lock .txt{opacity:1}
.txt{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:calc(20*var(--s));padding:calc(24*var(--s));border-top:1px solid rgba(255,255,255,.2)}
.tx-in{display:flex;flex-direction:column;gap:calc(8*var(--s))}
.lock .tx-in{opacity:.6}
.ttl{display:flex;flex-direction:column;gap:calc(4*var(--s))}
.tt{display:flex;align-items:center;gap:calc(4*var(--s))}
.tt svg{width:calc(19.46*var(--s));height:calc(19.46*var(--s));flex:none;fill:none;stroke:#eef1f7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.txt b{margin:0;font-size:calc(16*var(--s));font-weight:600;letter-spacing:-.013em;line-height:normal;color:#eef1f7}
.txt small{font-size:calc(9.89*var(--s));line-height:normal;letter-spacing:.0116em;color:rgba(238,241,247,.66)}
.txt p{margin:0;font-size:calc(11.18*var(--s));line-height:calc(16/11.18);color:#eef1f7}
.go-i{display:flex;align-items:flex-end;gap:calc(4*var(--s));font-size:calc(12*var(--s));font-weight:600;letter-spacing:.01em;line-height:normal}
.go-i svg{width:calc(15*var(--s));height:calc(15*var(--s))}
#menu .fine{position:absolute;left:calc(50% - 8*var(--s));right:auto;bottom:auto;top:calc(851*var(--s));transform:translateX(-50%);width:calc(594*var(--s));max-width:none;margin:0;text-align:center;font-size:calc(9.5*var(--s));line-height:calc(13.78/9.5);color:rgba(238,241,247,.66);text-shadow:0 1px 12px rgba(0,0,0,.4)}
body[data-state="menu"] #credit{display:none}

/* ---- the lesson: Lessons link, the title over a hairline, the rail (145) and the content (435) ---- */
html #back.back-out{left:calc(42*var(--s));top:calc(26*var(--s));width:auto;height:auto;padding:0;gap:calc(6*var(--s));display:inline-flex;align-items:center;justify-content:flex-start;background:none;border:0;border-radius:0;font-size:calc(14*var(--s));font-weight:500;line-height:normal;color:var(--amber);transition:opacity .35s,color .4s ease}
html #back.back-out span{display:inline}
html #back.back-out svg{width:calc(16*var(--s));height:calc(16*var(--s));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body:not(.briefing) #back.back-out{font-size:calc(12*var(--s));color:#fff}
body:not(.briefing) #back.back-out[data-tone="dark"]{color:#000}
#lhead{left:calc(42*var(--s));top:calc(125*var(--s));width:calc(628*var(--s));max-width:none;padding-bottom:calc(20*var(--s));border-bottom:1px solid rgba(255,255,255,.2);transition:opacity .35s,color .5s ease,border-color .5s ease}
#lhead .eyebrow{display:none}
body:not(.briefing) #lhead{border-bottom-color:transparent}
#rail{left:calc(42*var(--s));top:calc(235*var(--s))!important;width:calc(145*var(--s))!important;max-width:none}
#rail .ritem{padding:calc(12*var(--s)) 0;gap:calc(2*var(--s));border:0;border-bottom:1px solid currentColor;opacity:1}
#rail .ritem:first-child{padding-top:0}
#rail .ritem b{font-size:calc(16*var(--s));font-weight:700;letter-spacing:0;line-height:1.25}
#rail .ritem span{font-size:calc(12*var(--s));font-weight:400;line-height:1.2108;opacity:1}
body.briefing #rail .ritem:not(.on){opacity:.38}
body.briefing #rail .ritem.on{color:var(--amber);opacity:1}
#rail .ritem{transition:opacity .5s,color .3s}
#brief .bp-in{left:calc(235*var(--s));top:calc(235*var(--s));right:auto;width:calc(435*var(--s));bottom:calc(54*var(--s));padding-bottom:0;justify-content:flex-start;align-items:flex-start}
#brief .bp-col{max-width:none;width:100%}
.bp-meta{display:none}
/* Brief */
#bp-blocks{display:flex;flex-direction:column;gap:calc(19*var(--s))}
.bp-blk{margin:0}
.bp-blk h2{margin:0 0 calc(6*var(--s));font-size:calc(16*var(--s));font-weight:700;letter-spacing:0;line-height:1.25}
#bp-blocks .bp-blk:first-child h2{margin-bottom:calc(7*var(--s));font-size:calc(19.22*var(--s));line-height:1.1}
.bp-blk p,.bp-blk ul,.bp-blk ol,.bp-blk dd{font-size:calc(14*var(--s));line-height:1.5;color:rgba(255,255,255,.82);max-width:none}
.bp-blk dt{font-size:calc(14*var(--s));font-weight:600}
.bp-blk p{margin:0 0 calc(8*var(--s))}.bp-blk p:last-child{margin-bottom:0}
/* Steps */
.bp-stepsec{display:flex;flex-direction:column;gap:calc(24*var(--s));padding:0}
.bp-stepsec .bp-h{display:none}
.bp-lead{margin:0;max-width:none;font-size:calc(14*var(--s));line-height:1.5;color:rgba(255,255,255,.82)}
#bp-steps{margin:0;gap:calc(16*var(--s))}
#bp-steps li{grid-template-columns:calc(20*var(--s)) minmax(0,1fr);column-gap:calc(16*var(--s))}
#bp-steps li::before{width:calc(20*var(--s));height:calc(20*var(--s));box-sizing:border-box;display:grid;place-items:center;padding:0;border:1px solid rgba(238,241,247,.45);border-radius:50%;font-size:calc(13*var(--s));line-height:1;color:rgba(255,255,255,.45)}
#bp-steps h2{font-size:calc(16*var(--s));font-weight:500;letter-spacing:0;line-height:1.25}
#bp-steps p{margin:calc(4*var(--s)) 0 0;font-size:calc(13*var(--s));line-height:1.45}
#bp-steps-ref:empty{display:none}
/* the one button of each section: Start in the brief, Resume once the flight is under way */
.bp-act{position:static;margin:0;padding:calc(28*var(--s)) 0 0;background:none}
#bp-go,.bp-btn{gap:calc(8*var(--s));padding:calc(10*var(--s)) calc(18*var(--s));font-size:calc(14*var(--s));font-weight:700;line-height:normal;border-radius:8px}
#bp-go svg,.bp-btn svg{width:calc(16*var(--s));height:calc(16*var(--s))}
.bp-btn.bp-ghost{margin:0;padding:calc(10*var(--s)) calc(18*var(--s));font-size:calc(14*var(--s));font-weight:600}
#brief:not(.mid) .bp-stepsec .bp-act,#brief:not(.mid) .bp-chat .bp-act{display:none}
/* Chat */
.bp-chat{box-sizing:border-box;display:flex;flex-direction:column;gap:calc(23*var(--s));height:100%;padding:calc(20*var(--s)) 0 calc(20*var(--s)) calc(40*var(--s));border-left:1px solid rgba(255,255,255,.2)}
.bp-chat .bp-h,.bp-chat .bp-lead{display:none}
.ch-log{margin:0;padding:0;display:flex;flex-direction:column;gap:calc(17*var(--s));justify-content:flex-start;scrollbar-width:none}
.ch-m{margin:0;display:flex;flex-direction:column;gap:calc(10*var(--s))}
.ch-m small{margin:0;padding-left:calc(14*var(--s));font-size:calc(9.9*var(--s));font-weight:700;letter-spacing:.133em;line-height:normal;text-transform:uppercase;color:rgba(238,241,247,.66)}
.ch-m.u small{padding:0 calc(14*var(--s)) 0 0;text-align:right}
.ch-m p{box-sizing:border-box;margin:0;padding:calc(16*var(--s)) calc(20*var(--s));font-size:calc(14*var(--s));line-height:calc(22.5/14);color:#000;background:#eef1f7;border-radius:calc(16*var(--s)) calc(16*var(--s)) calc(16*var(--s)) 0}
.ch-m.u p{font-size:calc(14*var(--s));color:#000;background:var(--amber);border-radius:calc(16*var(--s)) calc(16*var(--s)) 0 calc(16*var(--s))}
.ch-dots i{background:rgba(0,0,0,.45)}
.ch-ask{display:flex;flex-direction:column;gap:calc(2*var(--s));margin:0}
.ch-ask::before{content:"Quick shots:";display:block;margin-bottom:calc(12*var(--s));font-size:calc(9.9*var(--s));font-weight:700;letter-spacing:.133em;line-height:normal;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ch-ask button{box-sizing:border-box;height:calc(29.41*var(--s));padding:calc(7.2*var(--s)) 0 0;font-size:calc(12.04*var(--s));line-height:normal}
.ch-form{gap:calc(10*var(--s));align-items:center;padding:calc(4*var(--s)) 0;border-bottom-color:#fff}
.ch-form textarea{font-size:calc(12*var(--s));line-height:calc(17.93/12);padding:calc(3*var(--s)) 0}
.ch-form textarea::placeholder{color:rgba(238,241,247,.45)}
.ch-form button{font-size:calc(14*var(--s));font-weight:700;padding:0}
.bp-chat .bp-act{padding-top:0}
/* ---- the lesson in flight: the data row, six equal cells ---- */
#inst{top:calc(27*var(--s));left:50%;width:calc(700*var(--s));gap:0;align-items:stretch}
#inst span{flex:1 1 0;width:auto;min-width:0;box-sizing:border-box;padding:0 0 0 calc(10*var(--s));gap:0}
#inst span:first-child{padding:0 calc(11*var(--s))}
#inst span+span{border-left:1px solid currentColor}
#inst b{font-size:calc(30*var(--s));font-weight:700;letter-spacing:0;line-height:calc(26.16/30);min-width:0}
#inst i{font-size:calc(12*var(--s));font-weight:500;line-height:normal}
#cc-line{font-weight:500}
}
@media (min-width:721px){
#rail .ritem:not(.on){opacity:1}
body.briefing #rail .ritem:not(.on){opacity:.38}
body.briefing #rail .ritem:not(.on):hover,body.briefing #rail .ritem:not(.on):focus-visible{opacity:1}
#rail .ritem span{line-height:calc(15*var(--s))}
#rail .ritem b{line-height:calc(20*var(--s))}
}
@media (min-width:721px){
.bp-lead{margin:0 0 calc(20*var(--s))}
.bp-stepsec .bp-lead{margin:0}
.bp-act{position:sticky;bottom:0;padding:calc(28*var(--s)) 0 0;background:linear-gradient(rgba(13,16,24,0),#0d1018 calc(24*var(--s)))}
.bp-chat .bp-act{position:static;padding-top:0;background:none}
}
/* phone: the card's text keeps the same order as on the desktop (title with its facts under it, the description, the way in) */
@media (max-width:720px){
.txt{display:flex;flex-direction:column;gap:12px}
.tx-in{display:flex;flex-direction:column;gap:6px}
.ttl{display:flex;flex-direction:column;gap:3px}
.tt{display:flex;align-items:center;gap:5px}
.tt svg{width:16px;height:16px;fill:none;stroke:#eef1f7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.txt small{display:block}
.cards button{height:auto}
}
/* ---- V9, 2026-10-13: Play / Pause over the animation (Figma buttons); Start and Resume are gone from the panel ---- */
@media (min-width:721px){
#pbtn{position:fixed;z-index:4;left:calc((1 + var(--bf,0))*50vw);top:50%;width:calc(136*var(--s));height:calc(136*var(--s));margin:0;padding:0;transform:translate(-50%,-50%);background:none;border:0;border-radius:50%;color:#fff;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .35s,color .2s}
#pbtn[data-show="1"]{opacity:1;pointer-events:auto}
#pbtn svg{display:block;width:100%;height:100%;overflow:visible}
#pbtn .pc{fill:rgba(0,0,0,.4)}
#pbtn:hover,#pbtn:focus-visible{color:var(--amber);outline:none}
#pbtn[data-state="play"] .pi-pause,#pbtn[data-state="pause"] .pi-play{display:none}
.bp-col[data-sec="brief"] .bp-act,.bp-stepsec .bp-act,.bp-chat .bp-act{display:none}
}
@media (max-width:720px){ #pbtn{display:none} }

/* ---- V9, 2026-10-13 (review 2): nothing grows past the Figma size on big monitors; the Lessons block is centred and sits on the bottom edge ---- */
@media (min-width:721px){
:root{--lx:max(calc(70*var(--s)),calc((100vw - 1301*var(--s))/2))}
.hero{left:var(--lx)}
.cards{left:var(--lx);right:auto;width:calc(1301*var(--s));max-width:calc(100vw - 2*var(--lx));top:auto;bottom:calc(64*var(--s))}
#menu .fine{top:auto;bottom:calc(21*var(--s));left:50%}
/* the steps: an airplane window, as drawn in Figma (20 x 28, fully rounded) */
#bp-steps li::before{width:calc(20*var(--s));height:calc(28*var(--s));border-radius:50px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(5*var(--s));font-size:calc(13*var(--s));line-height:normal}
}

/* ---- V9, 2026-10-13: sizes tuned on a big monitor (2504 x 1329, Alberto's numbers). Each size is the Figma size at 1440 wide and grows smoothly to the tuned one at 2504 wide (and stays there); smaller windows shrink with --s as before ---- */
@media (min-width:721px){
:root{--k:clamp(0px,calc(100vw - 1440px),1064px)}
/* H1: 52 -> 64 */
:root{--h1:clamp(34px,calc(52*var(--s) + 0.011278*var(--k)),80px)}
.hero .sub{font-size:calc(16*var(--s) + 0.000940*var(--k))}
.txt b{font-size:calc(16*var(--s) + 0.003759*var(--k))}
.txt small{font-size:calc(9.89*var(--s) + 0.001983*var(--k))}
.txt p{font-size:calc(11.18*var(--s) + 0.002650*var(--k))}
.go-i{font-size:calc(12*var(--s) + 0.001880*var(--k))}
#menu .fine{font-size:calc(9.5*var(--s) + 0.000470*var(--k))}
#rail .ritem b{font-size:calc(16*var(--s) + 0.001880*var(--k))}
#rail .ritem span{font-size:calc(12*var(--s) + 0.001410*var(--k))}
#bp-blocks .bp-blk:first-child h2{font-size:calc(19.22*var(--s) + 0.000733*var(--k))}
.bp-blk p,.bp-blk ul,.bp-blk ol,.bp-blk dd,.bp-lead{font-size:calc(14*var(--s) + 0.000940*var(--k))}
#inst b{font-size:calc(30*var(--s) + 0.009398*var(--k))}
#inst i{font-size:calc(12*var(--s) + 0.001880*var(--k))}
#cc-line{font-size:calc(15*var(--s) + 0.000940*var(--k))}
#rail .ritem b,#rail .ritem span{line-height:1.25}
.cards{height:auto;min-height:calc(336*var(--s))}
.cards li,.cards button{height:auto}
#inst{width:calc(700*var(--s) + 0.112782*var(--k))}
}
@media (min-width:721px){
.hero{width:calc(424*var(--s) + 0.1504*var(--k))}
#inst{width:calc(700*var(--s) + 0.1693*var(--k))}
}

/* ---- V9, 2026-10-13 (review 3): the panel is 720 px at 1440 and grows only a little on big screens, so the animation (the right column) gets the rest; Lessons: the intro on the left like the lesson's title, the last card as tall as the others ---- */
@media (min-width:721px){
:root{--sp:calc(var(--s) + .0000912*var(--k))}
#brief{width:calc(720*var(--sp));transform:translateX(calc((var(--bf,.5)/var(--bmax,.5) - 1)*100%))}
#lhead{width:calc(628*var(--sp))}
#rail{width:calc(145*var(--sp))!important}
#brief .bp-in{left:calc(42*var(--s) + 193*var(--sp));width:calc(435*var(--sp))}
.hero{left:calc(42*var(--s))}
.cards li{display:flex}.cards button{flex:1;height:auto}
}

/* the free flight's one-line message (what a key just did) */
#fs-toast{position:fixed;left:50%;bottom:calc(52*var(--s,1px));z-index:6;max-width:min(720px,90vw);margin:0;padding:8px 14px;transform:translate(-50%,6px);font-size:13px;line-height:1.4;text-align:center;color:#fff;background:rgba(8,10,16,.78);border-radius:8px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#fs-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- Free flight: the crash report and the wreck ---- */
body.wreck #pip{opacity:0!important;pointer-events:none!important}
#crash{position:fixed;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9);color:#fff;text-align:center;opacity:0;pointer-events:none;transition:opacity 1.8s ease}
#crash.fade{opacity:1}#crash.on{pointer-events:auto}
#crash[hidden]{display:none}
#crash .cr-box{display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--s,1px));max-width:min(560px,86vw);opacity:0;transform:translateY(8px);transition:opacity .9s,transform .9s}
#crash.on .cr-box{opacity:1;transform:none}
.cr-t{margin:0;font-size:calc(32*var(--s,1px));font-weight:600;line-height:1.15;letter-spacing:0;text-wrap:balance}
.cr-d{margin:0 0 calc(14*var(--s,1px));font-size:calc(15*var(--s,1px));line-height:1.45;color:rgba(255,255,255,.65)}
#cr-again{display:inline-flex;align-items:center;gap:calc(10*var(--s,1px));padding:calc(10*var(--s,1px)) calc(18*var(--s,1px));font:inherit;font-size:calc(14*var(--s,1px));font-weight:700;color:#FFC48F;background:rgba(255,196,143,.08);border:1px solid #FFC48F;border-radius:8px;cursor:pointer}
#cr-again:hover,#cr-again:focus-visible{color:#0E1216;background:#FFC48F}
#cr-again kbd{font:inherit;font-size:.8em;padding:1px 6px;border:1px solid currentColor;border-radius:4px;opacity:.7}

/* V9 free flight keyboard map (Brief and Chat are hidden while flying) */
#kbd{position:fixed;left:var(--g);top:calc(215*var(--s,1px));z-index:5;display:none;flex-direction:column;gap:calc(18*var(--s,1px));width:calc(250*var(--s,1px));color:#fff;font-size:calc(12*var(--s,1px));line-height:1.35;pointer-events:none}
body.wreck #kbar{opacity:.55}
#kbd .kg{display:flex;align-items:center;gap:calc(12*var(--s,1px))}
#kbd .ka{display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--s,1px));flex:none}
#kbd .kr{display:flex;gap:calc(3*var(--s,1px))}
#kbd p{margin:0;color:rgba(255,255,255,.7)}#kbd p b{display:block;color:#fff;font-weight:600;font-size:calc(13*var(--s,1px))}
#kbd .kc{display:inline-flex;align-items:center;justify-content:center;min-width:calc(26*var(--s,1px));height:calc(26*var(--s,1px));padding:0 calc(5*var(--s,1px));box-sizing:border-box;font-style:normal;font-weight:600;font-size:calc(12*var(--s,1px));border:1px solid rgba(255,255,255,.55);border-radius:calc(5*var(--s,1px));color:#fff;transition:background .08s,color .08s}
#kbd .kc.wide{margin-left:calc(6*var(--s,1px));height:calc(20*var(--s,1px));font-size:calc(10*var(--s,1px));vertical-align:middle}
#kbd .kc.on{background:#ffd2a8;color:#14161c;border-color:#ffd2a8}
#kbd .kl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(6*var(--s,1px))}
#kbd .kl li{display:flex;align-items:center;gap:calc(10*var(--s,1px));color:rgba(255,255,255,.85)}
#kbd .kl{padding-left:calc(29*var(--s,1px))}

/* V9 Free flight intro: title, a few words and the keys on the left; Play on the right */
body.fintro .bp-free .bp-meta,body.fintro .bp-free .fs-pair,body.fintro .bp-free .fs-keys,body.fintro .bp-free .bp-act{display:none!important}
body.fintro #kbd{display:flex;top:var(--kt,350px);left:var(--kl,235px);width:calc(435*var(--s))}

/* V9 terrain warning: a red glow that blinks with the alarm */
#gpws{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .06s;background:radial-gradient(ellipse at 50% 55%,rgba(255,40,30,.10) 0%,rgba(255,20,20,.12) 45%,rgba(255,0,0,.38) 100%);box-shadow:inset 0 0 calc(140*var(--s,1px)) rgba(255,0,0,.4)}
#gpws.on{opacity:1}

/* V9 free flight: the key line along the bottom (the brief keeps the full map) */
#kbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(34*var(--s,1px));z-index:5;display:none;flex-wrap:nowrap;justify-content:center;gap:calc(8*var(--s,1px)) calc(7*var(--s,1px));width:max-content;max-width:none;color:#fff;font-size:calc(12*var(--s,1px));pointer-events:none;transition:color .5s ease,opacity .35s}
body.free #kbar{display:flex}body.fintro #kbar{display:none}
#kbar .ki{display:flex;align-items:center;gap:calc(4*var(--s,1px))}
#kbar .ki em{font-style:normal;margin-left:calc(2*var(--s,1px));opacity:.8;white-space:nowrap}
#kbar .kc{display:inline-flex;align-items:center;justify-content:center;min-width:calc(22*var(--s,1px));height:calc(22*var(--s,1px));padding:0 calc(5*var(--s,1px));box-sizing:border-box;font-style:normal;font-weight:600;font-size:calc(11*var(--s,1px));border:1px solid currentColor;border-radius:calc(5*var(--s,1px));transition:background .08s,color .08s}
#kbar .kc.on{background:#ffd2a8;color:#14161c;border-color:#ffd2a8}
#kbar[data-tone="dark"]{color:#0E1216}
#fs-toast{bottom:calc(84*var(--s,1px))!important}

body.wreck #back{z-index:9;color:#fff!important}
.cr-d{max-width:calc(480*var(--s,1px))}

body.wreck #lhead,body.wreck #rail{z-index:9;color:#fff!important}
body.wreck #kbar{opacity:0}

/* Lessons button (Alberto, 2026-10-13): no pill, no colour change on the amber one; over the scene white turns black and black turns white */
html #back.back-out:hover,html #back.back-out:focus-visible{background:none;border-color:transparent;outline:none}
html body:not(.briefing):not(.wreck) #back.back-out:hover,html body:not(.briefing):not(.wreck) #back.back-out:focus-visible{color:#000}
html body:not(.briefing):not(.wreck) #back.back-out[data-tone="dark"]:hover,html body:not(.briefing):not(.wreck) #back.back-out[data-tone="dark"]:focus-visible{color:#fff}

/* V9 balloons counter, under Brief */
#balc{position:fixed;left:calc(42*var(--s,1px));top:calc(318*var(--s,1px));z-index:5;margin:0;display:none;font-size:calc(14*var(--s,1px));font-weight:500;color:#fff;pointer-events:none;transition:color .5s ease;font-variant-numeric:tabular-nums}
body.free #balc[data-on="1"]{display:block}body.fintro #balc{display:none!important}
#balc[data-tone="dark"]{color:#0E1216}

#kbar{left:calc(50% - 46*var(--s,1px))}

/* V9 Free flight: the same speaker button as the Lessons menu, top right (kept above the crash fade) */
body.free #snd-menu{opacity:1!important;pointer-events:auto!important}
body.wreck #snd-menu{z-index:9}
/* ---------- Narration v2 card: loop map, G, teaching mode ---------- */
#ng{position:fixed;right:var(--g);top:calc(var(--g)*1.2);z-index:5;width:min(236px,calc(100vw - 2*var(--g)));display:none;padding:10px 12px 12px;background:rgba(10,12,20,.84);border:1px solid var(--line);border-radius:14px;transition:opacity .35s}
body[data-ng="1"][data-state="lesson"] #ng{display:block}
body.briefing #ng{opacity:0!important;pointer-events:none!important}
.ng-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 2px}
.ng-h b{font-size:10.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
#ng-st{font-size:11px;color:var(--dim);text-align:right}
#ng-map{display:block;width:100%;height:auto}
#ng-map .gh{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.4}
#ng-map .fl{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round}
#ng-map .ad{fill:#0d1018;stroke:rgba(255,255,255,.6);stroke-width:1.2}
#ng-map .ad.on{fill:var(--amber);stroke:var(--amber)}
#ng-map .ad.cr{stroke:var(--amber)}
#ng-map text{font-size:8.5px;fill:rgba(238,241,247,.66);font-family:var(--f)}
#ng-map text.on{fill:#fff;font-weight:650}
#ng-map .pl{fill:#fff;stroke:#0d1018;stroke-width:1.2}
.ng-g{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font-size:11px;color:var(--dim)}
.ng-g b{min-width:2.2em;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.ng-g i{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.ng-g u{display:block;height:100%;width:0;background:var(--amber);text-decoration:none}
#ng-modes{display:flex;flex-wrap:wrap;gap:4px}
#ng-modes button{padding:4px 8px;font-size:10.5px;font-weight:600;background:none;border:1px solid var(--line);border-radius:999px;color:var(--dim)}
#ng-modes button:hover{color:var(--ink);border-color:var(--ink)}
#ng-modes button.on{background:var(--ink);border-color:var(--ink);color:#0b0e14}
@media (max-width:720px){#ng{top:auto;right:auto;left:12px;bottom:calc(50dvh + 8px);width:min(230px,calc(100vw - 24px));padding:8px 10px}#ng-map{display:none}}
/* V11 (Alberto, 2026-10-20): the instructor card sits right above the cockpit view (PiP), same width, 12 px gap (PiP is 16:10) */
@media (min-width:721px){#ng{top:auto;left:auto;right:var(--g);width:var(--pipw);bottom:calc(34px + var(--pipw)*.625 + 12px)}}
/* V11: the map is smaller and centred (viewBox fitted in NG.fitMap), with air above and below */
@media (min-width:721px){#ng-map{width:100%;height:calc(var(--pipw)*.46);margin:10px 0 10px}}
/* V11 (Alberto, 2026-10-20): the INSTRUCTOR label in white, not amber */
.ng-h b{color:#fff}
/* V12 (2026-10-21): card drawings of the maneuvers, same marks as the instructor card */
.trace .gl{stroke:rgba(255,255,255,.22);stroke-width:1}
.trace .ad{fill:#0d1018;stroke:rgba(255,255,255,.6);stroke-width:1.2}
.trace .ad0{fill:#fff}
.trace .adc{fill:#0d1018;stroke:var(--amber);stroke-width:1.2}
.trace .ar{fill:rgba(255,255,255,.7)}
.trace .arh{fill:#0d1018;stroke:rgba(255,255,255,.7);stroke-width:1}
.lock .trace .adc{stroke:rgba(255,255,255,.6)}
/* V12 (Alberto, 2026-10-21): card lines draw on hover and retract in reverse on mouse out; no draw-on-load */
.cards .trace .pl,.open .trace .pl{stroke-dasharray:1;stroke-dashoffset:1;animation:none;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.cards button.drawn .trace .pl{stroke-dashoffset:0}
.cards .trace .ph{stroke:rgba(255,255,255,.3)}
@media (prefers-reduced-motion:reduce){.cards .trace .pl{transition:none}}