#shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#view{flex:1;width:100%;max-width:660px;margin:0 auto;padding:22px 20px calc(96px + env(safe-area-inset-bottom))}
#view:focus{outline:none}

#tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:stretch;background:var(--barbg);backdrop-filter:blur(14px);border-top:1px solid var(--line2);padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:50}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;border-radius:12px;font-size:11px;font-weight:500;color:var(--mut);min-width:58px;min-height:48px;transition:color .15s}
.tab svg{width:21px;height:21px}
.tab .bim{width:22px;height:22px;filter:grayscale(1) brightness(1.3);opacity:.6;transition:filter .15s,opacity .15s}
.tab.on{color:var(--gold2);font-weight:600}
.tab.on .bim,.tab:hover .bim{filter:none;opacity:1}
.tab:hover{color:var(--ink2)}
.tab.on:hover{color:var(--gold2)}

#rail{display:none}
@media (min-width:960px){
  #shell{flex-direction:row}
  #tabbar{display:none}
  #rail{display:flex;flex-direction:column;gap:6px;width:236px;flex:none;padding:26px 16px;border-right:1px solid var(--line2);position:sticky;top:0;height:100vh}
  #view{padding:38px 40px 60px;max-width:780px}
  .railbrand{display:flex;align-items:center;gap:11px;padding:6px 10px 22px}
  .rlink{display:flex;align-items:center;gap:12px;padding:12px 13px;min-height:46px;border-radius:12px;font-size:14.5px;font-weight:500;color:var(--ink2);transition:background .15s,color .15s}
  .rlink svg{width:19px;height:19px}
  .rlink .bim{width:20px;height:20px;filter:grayscale(1) brightness(1.3);opacity:.62;transition:filter .15s,opacity .15s}
  .rlink:hover{background:var(--panel);color:var(--ink)}
  .rlink:hover .bim,.rlink.on .bim{filter:none;opacity:1}
  .rlink.on{background:var(--goldSoft);color:var(--gold2);font-weight:600}
  /* On a desktop the rail carries the switch with a label, so the copy next
     to the bell would be the same control twice on one screen. */
  .thmob{display:none}
  /* The quick switch sits with the account row at the foot of the rail,
     where a person goes looking for a preference, rather than among the
     four places to go. It takes the free space so the pair stay together. */
  .railtheme{width:100%;text-align:left;margin-top:auto;color:var(--ink2)}
  .railtheme svg{width:19px;height:19px;color:var(--mut)}
  .railtheme:hover svg{color:var(--ink2)}
  .railfoot{display:flex;align-items:center;gap:10px;padding:12px 10px;border-top:1px solid var(--line2);border-radius:0 0 12px 12px;transition:background .15s}
  .railfoot:hover{background:var(--panel)}
  .railfoot .rfg{margin-left:auto;color:var(--mut);display:flex}
  .railfoot .rfg svg{width:17px;height:17px}
  .railfoot:hover .rfg{color:var(--ink2)}
  .mission .cta .btn{min-width:220px}
}
/* Large call-to-action buttons stop short of the full column well before the
   desktop rail appears, and centre whether the footer is a row or a column. */
@media (min-width:640px){
  .stepfoot{justify-content:center;align-items:center}
  .stepfoot .btn-block{max-width:340px}
}

/* Distraction-free session: the app chrome steps back during a live step. */
body.focus #tabbar,body.focus #rail{display:none}
body.focus #view{padding-bottom:48px;max-width:720px}

.apphead{display:flex;align-items:center;gap:8px;margin-bottom:20px;min-height:44px}
.apphead .hgroup{flex:1;min-width:0;text-align:center}
.apphead .ht{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}
.apphead .hs{font-size:13px;color:var(--mut);margin-top:1px}
.apphead .spacer{width:40px;flex:none}
/* A named header action: icon plus word, boxed, unmistakable. */
.hbtn{display:inline-flex;align-items:center;gap:8px;padding:0 14px;height:40px;border-radius:999px;border:1px solid var(--line3);background:var(--panel);color:var(--ink2);font-size:13px;font-weight:600;flex:none;transition:border-color .15s,color .15s}
.hbtn svg{width:16px;height:16px}
.hbtn:hover{border-color:var(--gold2);color:var(--gold2)}
@media (max-width:399px){.hbtn{width:40px;padding:0;justify-content:center}.hbtn .hl{display:none}}

.greetrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px}
.greet{font-size:17px;font-weight:600;letter-spacing:.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hactions{display:flex;align-items:center;gap:4px;flex:none}
/* Day streak, next to notifications. Filled once today has been counted. */
.streakchip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line3);color:var(--mut);font-variant-numeric:tabular-nums;transition:color .15s,border-color .15s,background .15s}
.streakchip svg{width:17px;height:17px}
.streakchip b{font-size:14.5px;font-weight:700}
.streakchip:hover{color:var(--ink2);border-color:var(--ink2)}
.streakchip.on{background:var(--goldSoft);border-color:rgba(201,162,39,.42);color:var(--gold2)}
.streakchip.on:hover{color:var(--gold2);border-color:var(--gold)}
.bellwrap{position:relative}
.bellwrap .bdg{position:absolute;top:6px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--gold);color:var(--onGold);border:2px solid var(--bg);font-size:10px;font-weight:700;line-height:13px;text-align:center;font-variant-numeric:tabular-nums}

.mission{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--panel);margin-bottom:16px}
.mission .cvr{position:absolute;inset:0}
.mission .cvr svg{width:100%;height:100%}
.mission .body{position:relative;padding:22px 22px 20px;background:linear-gradient(180deg,rgba(11,16,13,.34),rgba(11,16,13,.86) 62%)}
.mission h1{font-family:var(--serif);font-size:33px;font-weight:600;line-height:1.14;margin:7px 0 6px}
.mission .mm{font-size:13.5px;color:var(--ink2)}
.mission .mm b{font-weight:600;color:var(--ink)}
.mission .dur{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);margin-top:6px;font-variant-numeric:tabular-nums}
.mission .dur svg{width:14px;height:14px}
.mission .cta{margin-top:18px}

.frule{display:flex;align-items:center;gap:16px;padding:18px 20px;margin-bottom:16px}
.frule .fx{flex:1;min-width:0}
.frule .fl{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--goldT);text-transform:uppercase;margin-bottom:6px}
.frule .ft{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.4}
.frule .lotus .bim{opacity:.85}
/* Save carries its word as well as its mark, and the saved state is filled,
   labelled and boxed, never a colour change on a lone icon. */
.rulesave{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;min-height:40px;border-radius:999px;border:1px solid var(--line3);color:var(--ink2);font-size:13px;font-weight:600;flex:none;transition:all .15s}
.rulesave svg{width:16px;height:16px}
.rulesave:hover{border-color:var(--ink2);color:var(--ink)}
.rulesave.saved{background:var(--goldSoft);border-color:rgba(201,162,39,.5);color:var(--gold2)}
.rulesave.saved svg path{fill:currentColor}

.donecard{text-align:center;padding:34px 24px}
.donecard h2{font-family:var(--serif);font-size:26px;font-weight:600;margin:12px 0 6px}
.donecard p{font-size:14.5px;color:var(--ink2);line-height:1.6}

/* ---- mission hero + plan ------------------------------------------------
   The flow screen is the mission's own poster: its atmosphere behind the
   title, then the plan as a connected timeline naming what actually plays.
   Completed, current, available, optional and locked each read differently
   without relying on opacity or colour alone.                              */
.mhero{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line2);margin-bottom:6px;background:var(--panel)}
.mhero .mhbg{position:absolute;inset:0}
.mhero .mhbg svg{width:100%;height:100%}
.mhero .mhbody{position:relative;padding:64px 20px 20px;background:linear-gradient(180deg,rgba(11,16,13,.06),rgba(11,16,13,.62) 46%,rgba(11,16,13,.94))}
.mhero h1{font-family:var(--serif);font-size:31px;font-weight:600;line-height:1.14;margin:7px 0 8px}
.mhero .mhmeta{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.mhero .mhmeta svg{width:14px;height:14px;flex:none}
.plan{margin-top:4px}
.planrow{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;padding:2px 4px}
.planrow .pcol{display:flex;flex-direction:column;align-items:center;align-self:stretch;flex:none}
.planrow .ptile{width:42px;height:42px;flex:none;border-radius:13px;background:var(--panel3);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.planrow .ptile svg{width:19px;height:19px}
.planrow .pline{flex:1;width:2px;min-height:14px;background:var(--line2);margin:4px 0}
.planrow .px{flex:1;min-width:0;padding:5px 0 15px}
.planrow .pn{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.planrow .pd{font-size:13px;color:var(--mut);margin-top:2px;line-height:1.5}
.planrow .pst{flex:none;color:var(--mut);display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;margin-top:12px}
.planrow .pst svg{width:17px;height:17px}
.planrow.done .ptile{color:var(--ok);border-color:var(--okLine);background:var(--okSoft)}
.planrow.done .pline{background:var(--okLine)}
.planrow.done .pst{color:var(--ok)}
.planrow.now .ptile{color:var(--gold2);border-color:rgba(201,162,39,.55);background:var(--goldSoft);box-shadow:0 0 0 3px rgba(201,162,39,.12)}
.planrow.now .pn{color:var(--gold2)}
.planrow.now .pst{color:var(--gold2)}
.planrow.lockd .ptile{color:var(--mut);background:transparent;border-style:dashed}
.planrow.lockd .pn{color:var(--ink2)}
.tagopt{font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 8px;border-radius:999px;border:1px solid var(--line3);color:var(--mut);text-transform:none}

/* Locked items stay legible and say why they are locked. */
.lockchip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mut);margin-top:6px;background:var(--hover2);border:1px solid var(--line2);border-radius:999px;padding:4px 11px}
.lockchip svg{width:13px;height:13px;flex:none}

.stepwrap{max-width:560px;margin:0 auto}
.stepk{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--goldT);margin-bottom:14px}
.stepk svg{width:14px;height:14px;flex:none}
.steph{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.2;margin-bottom:10px}
.stepp{color:var(--ink2);font-size:15.5px;line-height:1.7}
.stepfoot{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}

/* Where you are in the session stays on screen the whole way through. */
.sessbar{position:sticky;top:0;z-index:30;background:var(--barbg);backdrop-filter:blur(10px);margin:-22px -20px 18px;padding:12px 20px 10px;border-bottom:1px solid var(--line2)}
.sessbar .sbtop{display:flex;align-items:center;gap:8px;margin-bottom:9px;min-width:0}
/* Step back. Always present so the bar does not shift between steps. */
.sessbar .sbback{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line3);color:var(--ink2);transition:color .15s,border-color .15s,opacity .15s}
.sessbar .sbback svg{width:17px;height:17px}
.sessbar .sbback:hover:not(:disabled){color:var(--ink);border-color:var(--ink2)}
.sessbar .sbback:disabled{opacity:.34;cursor:not-allowed}
.replaytag{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gold2)}
.replaytag svg{width:14px;height:14px}
.replaytag.solo{justify-content:center;margin:0 auto 14px;display:flex}
.replaynote{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r);background:var(--goldSoft);border:1px solid rgba(201,162,39,.3);color:var(--ink2);font-size:13.5px;line-height:1.55;margin-bottom:14px}
.replaynote svg{width:17px;height:17px;color:var(--gold2);flex:none;margin-top:1px}
.sessbar .sbl{flex:1;font-size:13px;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.sessbar .sbl b{color:var(--gold2);font-variant-numeric:tabular-nums;flex:none}
.sessbar .sbn{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sessbar .sbx{flex:none;display:flex;align-items:center;gap:4px}
.sessbar .exitb{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink2);padding:8px 12px;min-height:40px;border-radius:10px;border:1px solid var(--line3);white-space:nowrap}
/* The component name stays on screen at every width; only the button label
   contracts, so "current component + progress" is never lost. */
@media (max-width:430px){
  .sessbar .exitb .l1{display:none}
  .sessbar .sbl{font-size:12.5px;gap:6px}
}
.sessbar .exitb:hover{color:var(--ink);border-color:var(--ink2)}
.sessbar .exitb svg{width:15px;height:15px}
.stepprog{display:flex;gap:4px}
.stepprog i{flex:1;height:4px;border-radius:2px;background:var(--trackSolid)}
.stepprog i.done{background:var(--ok)}
.stepprog i.on{background:var(--gold)}
@media (min-width:960px){.sessbar{margin:-38px -40px 22px;padding:14px 40px 12px}}

/* ---- content canvas -----------------------------------------------------
   The stage carries the app's own surface. No file names, no external
   branding, no native controls, no black letterbox.                        */
.canvas{position:relative;margin:18px 0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-s)}
.cvstage{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(160deg,#16241C,#0B100D 70%);overflow:hidden}
.cvart{position:absolute;inset:0;transition:opacity .5s,transform 8s ease-out}
.cvart svg{width:100%;height:100%}
.cvvid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.cvveil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 20%,rgba(11,16,13,0),rgba(11,16,13,.5));pointer-events:none}
.canvas[data-state="playing"] .cvart,.canvas[data-state="buffering"] .cvart{opacity:.5;transform:scale(1.04)}
.canvas[data-state="playing"] .cvveil{opacity:.7}

.cvsurface{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0}
.cvbig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:rgba(11,16,13,.62);border:1px solid rgba(230,202,110,.55);color:var(--gold2);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:opacity .22s,transform .18s}
.cvbig span{display:flex;margin-left:3px}
.cvbig svg{width:26px;height:26px}
.cvbig:hover{transform:translate(-50%,-50%) scale(1.06)}
.canvas[data-state="playing"] .cvbig,.canvas[data-state="buffering"] .cvbig,.canvas[data-state="loading"] .cvbig,.canvas[data-state="error"] .cvbig{opacity:0;pointer-events:none}
/* The screen owns the start action; the canvas resumes control after that. */
.canvas.nobig[data-state="idle"] .cvbig,.canvas.nobig[data-state="idle"] .cvsurface{display:none}

.cvresume{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);background:rgba(11,16,13,.78);border:1px solid var(--line3);border-radius:999px;padding:9px 16px;min-height:40px;backdrop-filter:blur(6px);white-space:nowrap}
.cvresume svg{width:14px;height:14px}
.canvas[data-state="playing"] .cvresume,.canvas[data-state="paused"] .cvresume,.canvas[data-state="ended"] .cvresume,.canvas[data-state="loading"] .cvresume,.canvas[data-state="buffering"] .cvresume{display:none}

.cvfx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;flex-direction:column;align-items:center;gap:11px;color:var(--ink2);font-size:13px;font-weight:500;letter-spacing:.02em}
.canvas[data-state="loading"] .cvfx,.canvas[data-state="buffering"] .cvfx{display:flex}
.cvspin{width:30px;height:30px;border-radius:50%;border:2px solid rgba(230,202,110,.28);border-top-color:var(--gold2);animation:spin .8s linear infinite}

.cverr{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;background:rgba(11,16,13,.86);backdrop-filter:blur(4px)}
.canvas[data-state="error"] .cverr{display:flex}
.cverr .cvei{color:var(--warn)}
.cverr .cvei svg{width:26px;height:26px}
.cverr .cvet{font-size:14px;color:var(--ink2);max-width:280px;line-height:1.55}

.cvcap{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);max-width:88%;text-align:center;font-size:14.5px;line-height:1.45;color:#F2F0E6;background:rgba(7,11,9,.78);border-radius:10px;padding:7px 13px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:pre-line}
.canvas.cc .cvcap:not(:empty){opacity:1}

/* Transport is hidden until the viewer asks for it, and whenever focus
   enters the canvas so keyboard users are never locked out. */
.cvctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(0deg,rgba(7,11,9,.9),rgba(7,11,9,0));opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s}
.canvas.show .cvctl{opacity:1;transform:none}
.canvas[data-state="error"] .cvctl{display:none}
.cvb{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:#EDE8DA;flex:none;position:relative}
.cvb:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.cvb:hover{background:rgba(237,232,218,.12)}
.cvb svg{width:19px;height:19px}
.cvb.on{color:var(--gold2)}
.cvtime{font-size:12.5px;color:#DCD8CB;font-variant-numeric:tabular-nums;flex:none;min-width:38px;text-align:center}
.cvtrack{position:relative;flex:1;height:20px;display:flex;align-items:center;cursor:pointer;min-width:40px}
.cvtrack:before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px;background:rgba(237,232,218,.24)}
.cvbuf{position:absolute;left:0;height:4px;width:0;border-radius:2px;background:rgba(237,232,218,.34)}
.cvfill{position:absolute;left:0;height:4px;width:0;border-radius:2px;background:var(--gold)}
.cvknob{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--gold2);left:0;transform:translateX(-50%);opacity:0;transition:opacity .15s}
.canvas.show .cvknob,.cvtrack:focus-visible .cvknob{opacity:1}
.canvas.fs .cvstage{aspect-ratio:auto;height:100vh}
.cvposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Immersive variant: the stage IS the screen. Full bleed on mobile, taller
   ratio, no card frame, and the piece's kicker and title live on the media
   under a readable gradient rather than above a boxed player. */
.canvas.imm{margin:2px -20px 18px;border:0;border-radius:0;box-shadow:none;background:transparent}
.canvas.imm .cvstage{aspect-ratio:4/3;max-height:58vh}
.canvas.imm .cvveil{background:linear-gradient(180deg,rgba(11,16,13,.42),rgba(11,16,13,0) 34%,rgba(11,16,13,0) 55%,rgba(11,16,13,.66));opacity:1}
.cvhead{position:absolute;left:0;right:0;top:0;padding:16px 20px;display:flex;flex-direction:column;gap:7px;pointer-events:none;background:linear-gradient(180deg,rgba(7,11,9,.55),rgba(7,11,9,0))}
.cvhead .cvkick{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gold2);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.cvhead .cvkick svg{width:14px;height:14px;flex:none}
.cvhead .cvtitle{font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.16;color:#F2F0E6;text-shadow:0 2px 14px rgba(0,0,0,.55);max-width:26ch}
.canvas.imm[data-state="playing"] .cvhead{opacity:0;transition:opacity .4s}
.canvas.imm.show[data-state="playing"] .cvhead,.canvas.imm[data-state="paused"] .cvhead{opacity:1}
@media (min-width:640px){
  .canvas.imm{margin:6px 0 18px;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-s)}
  .canvas.imm .cvstage{aspect-ratio:16/9}
}
@media (min-width:960px){.canvas.imm{margin-left:-40px;margin-right:-40px;border-radius:0}
  body.focus .canvas.imm{margin-left:0;margin-right:0;border-radius:var(--r-l)}}

/* The blurred atmosphere behind a step. Fixed, veiled, and always under the
   content layer; the session bar keeps its own backdrop above it. */
.stepbg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.stepbg img{width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(.85) brightness(.5);transform:scale(1.18)}
.stepbg i{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,13,.6),rgba(11,16,13,.86) 70%,var(--bg))}

.kmeta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut);margin-top:-4px;flex-wrap:wrap}
.kmeta .kdot{width:3px;height:3px;border-radius:50%;background:var(--mut);flex:none}

.takeaway{border-left:3px solid var(--gold);border-radius:6px 14px 14px 6px;background:var(--panel);padding:15px 17px;margin-top:16px}
.takeaway .tl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:5px}
.takeaway .tt{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.4}

.player{text-align:center;padding-top:6px}
.ringwrap{position:relative;width:min(258px,68vw);margin:26px auto 18px}
.ringwrap svg.ring{width:100%;height:auto;transform:rotate(-90deg)}
.ringwrap .rc{fill:none;stroke:var(--trackSolid);stroke-width:5}
.ringwrap .rp{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .4s linear}
.ringcore{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ringcore .wv{display:flex;align-items:flex-end;gap:3px;height:16px;margin-top:8px}
.ringcore .wv i{width:3px;border-radius:2px;background:rgba(230,202,110,.6);height:5px}
.playing .wv i{animation:wv 1.15s ease-in-out infinite}
.playing .wv i:nth-child(2){animation-delay:.12s}.playing .wv i:nth-child(3){animation-delay:.26s}.playing .wv i:nth-child(4){animation-delay:.4s}.playing .wv i:nth-child(5){animation-delay:.52s}
@keyframes wv{0%,100%{height:4px}50%{height:15px}}
.ptitle{font-family:var(--serif);font-size:23px;font-weight:600;margin-top:6px}
.ptime{font-size:15px;color:var(--ink2);font-variant-numeric:tabular-nums;margin-top:3px}
/* Room for two lines is kept whether or not a line is showing, so switching
   captions on never moves the controls under somebody's thumb. */
.ringcap{min-height:2.9em;max-width:34ch;margin:10px auto 14px;font-size:15px;line-height:1.45;color:var(--ink);white-space:pre-line}
.pctl{display:flex;align-items:center;justify-content:center;gap:26px;margin:24px 0 18px}
.pmain{width:72px;height:72px;border-radius:50%;background:linear-gradient(180deg,var(--panel3),var(--panel2));border:1px solid rgba(201,162,39,.45);color:var(--gold2);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-s)}
.pmain svg{width:28px;height:28px}
.pmain:hover{filter:brightness(1.15)}
.pskip{width:48px;height:48px;border-radius:50%;color:var(--ink2);border:1px solid var(--line3);display:flex;align-items:center;justify-content:center}
.pskip svg{width:22px;height:22px}
.pskip:hover{color:var(--ink);border-color:var(--ink2)}
.pchips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* Sits beside the step kicker, which carries no trailing space of its own. */
.scenpill{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 13px;border-radius:999px;background:var(--goldSoft);color:var(--gold2);border:1px solid rgba(201,162,39,.34);margin:0 0 16px 12px}
.scencard{padding:20px;margin-bottom:14px}
.scentxt{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.42}
.scenq{font-weight:600;font-size:15.5px;margin-top:14px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:15px 16px;min-height:56px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line2);margin-bottom:10px;font-size:15px;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--line3)}
.opt .ck{width:22px;height:22px;flex:none;border-radius:50%;border:1.6px solid var(--line3);display:flex;align-items:center;justify-content:center;color:transparent;transition:all .15s}
.opt .ck svg{width:13px;height:13px}
.opt.sel{border-color:rgba(201,162,39,.6);background:var(--panel2);box-shadow:inset 3px 0 0 var(--gold)}
.opt.sel .ck{background:var(--gold);border-color:var(--gold);color:var(--onGold)}
.opt.dim{background:var(--bg2);color:var(--mut)}
.whyrow{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;min-height:48px;border-radius:var(--r);border:1px solid var(--line2);color:var(--ink2);font-size:14px;font-weight:500;margin:4px 0 10px}
.whyrow:hover{border-color:var(--line3);color:var(--ink)}
.whyrow svg{width:16px;height:16px;transition:transform .18s}
.whyrow.open svg{transform:rotate(90deg)}
.optfb{border-left:3px solid var(--gold);border-radius:6px 14px 14px 6px;background:var(--panel);padding:15px 17px;margin-bottom:12px;font-size:14.5px;color:var(--ink2);line-height:1.65}

.reflq{margin-bottom:20px}
.reflq .rq{font-weight:600;font-size:15.5px;margin-bottom:9px}
/* Where a Real-world Deployment comes from, said where it happens. */
.depnote{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--mut);margin-top:7px;line-height:1.5}
.depnote svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--goldT)}
.deploycard{display:flex;align-items:center;gap:14px;text-align:left;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-l);padding:16px 18px;margin:22px auto 0;max-width:460px}
.deploycard>svg{width:22px;height:22px;flex:none;color:var(--gold2)}
.deploycard .dx{flex:1;min-width:0}
.deploycard .dx b{display:block;font-size:14.5px}
.deploycard .dx span{display:block;font-size:13px;color:var(--mut);margin-top:3px;line-height:1.5}
.deploycard .btn{flex:none}
.deploycard:hover{border-color:rgba(201,162,39,.4)}
/* The list of commitments behind the Real-world Deployments figure. */
.depitem{display:flex;gap:14px;padding:16px 18px;margin-bottom:11px;align-items:flex-start}
.depitem .dpd{flex:none;width:78px;padding-top:1px}
.depitem .dpn{display:block;font-size:13px;font-weight:700;color:var(--gold2);font-variant-numeric:tabular-nums}
.depitem .dpw{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.depitem .dpx{flex:1;min-width:0}
.depitem .dpt{font-size:14.5px;line-height:1.55}
.depitem .dps{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mut);margin-top:8px}
.depitem .dps svg{width:13px;height:13px;flex:none;color:var(--goldT)}
.depitem .dpl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gold2);margin-top:9px}
.depitem .dpl svg{width:13px;height:13px}
.depitem .dpl:hover{text-decoration:underline}
@media (max-width:520px){
  .depitem{flex-wrap:wrap}
  .depitem .dpd{width:100%;display:flex;align-items:baseline;gap:8px}
  .depitem .dpw:before{content:'·';margin-right:8px}
}
.privnote{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mut);margin-bottom:14px;background:var(--hover);border:1px solid var(--line2);border-radius:999px;padding:5px 12px}
.privnote svg{width:13px;height:13px;flex:none}

.shieldwrap{width:150px;height:150px;margin:8px auto 20px;position:relative;display:flex;align-items:center;justify-content:center}
.shieldwrap svg{width:100%;height:100%}
.shieldwrap img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 30px rgba(0,0,0,.4))}
.compl{text-align:center}
.compl h1{font-family:var(--serif);font-size:33px;font-weight:600;margin-bottom:4px}
.compl .cm{color:var(--ink2);font-size:14.5px}
.compl .ct{font-size:16px;color:var(--ink);margin-top:6px}
/* Equal columns and one type scale, so both figures and both labels sit on
   the same line. A flex row of differently sized content did not. */
.compl .cchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px auto;max-width:440px}
.cchip{padding:15px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line2);text-align:center}
.cchip .cv{font-size:24px;font-weight:700;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.cchip .ck2{font-size:12px;color:var(--mut);margin-top:4px}
@media (max-width:339px){.compl .cchips{grid-template-columns:1fr}}
.compl .cmsg{font-size:15px;color:var(--ink2);line-height:1.7;max-width:440px;margin:0 auto}

/* ---- feedback ------------------------------------------------------------
   Optional, asked once at the end of a Day, never after each component.    */
.fbblock{margin:26px auto 0;max-width:460px;text-align:left;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-l);padding:20px}
.fbblock .fbq{font-size:15.5px;font-weight:600;text-align:center;margin-bottom:4px}
.fbblock .fbs{font-size:12.5px;color:var(--mut);text-align:center;margin-bottom:16px}
.fbrate{display:flex;justify-content:center;gap:14px;margin-bottom:4px}
.fbr{width:60px;height:60px;border-radius:18px;border:1px solid var(--line3);color:var(--ink2);display:flex;align-items:center;justify-content:center;transition:all .15s}
.fbr svg{width:24px;height:24px}
.fbr:hover{border-color:var(--ink2);color:var(--ink)}
.fbr.on{background:var(--goldSoft);border-color:rgba(201,162,39,.55);color:var(--gold2)}
.fbr.on.down{background:var(--badSoft);border-color:var(--badLine);color:var(--bad)}
.fbchips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.fbchips .chip{font-size:13px;padding:8px 13px;min-height:38px}
.fbdone{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--ok);font-size:14.5px;font-weight:600;padding:8px 0}
.fbdone svg{width:18px;height:18px}
.fbskip{display:block;margin:14px auto 0;font-size:13.5px;color:var(--mut);text-decoration:underline;padding:8px}

.toolrow{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px;border-radius:var(--r-l);background:var(--panel);border:1px solid var(--line2);margin-bottom:11px;transition:border-color .15s,background .15s}
.toolrow:hover{border-color:var(--line);background:var(--panel2)}
.tooltile{width:48px;height:48px;flex:none;border-radius:13px;background:linear-gradient(180deg,var(--panel3),var(--panel2));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold2)}
.tooltile svg{width:22px;height:22px}
/* Board badge art carries its own ring, so the tile chrome steps aside. */
.tooltile.asimg,.utile.asimg,.ticon.asimg{background:none!important;border:none!important}
.tooltile.asimg .bim,.utile.asimg .bim,.ticon.asimg .bim{width:100%;height:100%}
.toolrow .tx{flex:1;min-width:0}
.toolrow .tn{font-weight:600;font-size:15.5px}
.toolrow .td{font-size:13px;color:var(--mut);margin-top:2px}
.toolplay{width:38px;height:38px;flex:none;border-radius:50%;background:var(--goldSoft);border:1px solid rgba(201,162,39,.4);color:var(--gold2);display:flex;align-items:center;justify-content:center}
.toolplay svg{width:16px;height:16px;margin-left:1px}

.usegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.usecard{text-align:left;padding:18px 16px;border-radius:var(--r-l);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);display:flex;flex-direction:column;gap:10px;transition:border-color .15s,background .15s}
.usecard:hover{border-color:rgba(201,162,39,.45)}
.usecard .utile{width:42px;height:42px;border-radius:12px;background:var(--goldSoft);display:flex;align-items:center;justify-content:center;color:var(--gold2)}
.usecard .utile svg{width:20px;height:20px}
.usecard .ul{font-weight:600;font-size:15px;line-height:1.3}
.usecard .uh{font-size:13px;color:var(--mut);line-height:1.5}
.usecard .ut{font-size:12.5px;color:var(--gold2);font-weight:600;display:flex;align-items:center;gap:6px;margin-top:auto}
.usecard .ut svg{width:13px;height:13px}

.profhead{display:flex;align-items:center;gap:15px;padding:6px 2px 20px}
.avatar{width:58px;height:58px;border-radius:50%;background:var(--panel3);border:1.5px solid rgba(201,162,39,.5);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:var(--gold2);flex:none}
.profhead .px{flex:1;min-width:0}
.profhead .pn{font-weight:600;font-size:17px}
.profhead .pe{font-size:13px;color:var(--mut);margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.prow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 16px;min-height:56px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line2);margin-bottom:9px;font-size:15px;font-weight:500;transition:border-color .15s,background .15s}
.prow:hover{border-color:var(--line3);background:var(--panel2)}
.prow svg.pi{width:19px;height:19px;color:var(--gold2);flex:none}
.prow img.pi{width:22px;height:22px}
.prow .pv{margin-left:auto;font-size:13px;color:var(--mut);font-weight:500;display:flex;align-items:center;gap:8px}
.prow .pv svg{width:15px;height:15px}
.prow.signout{color:var(--bad)}
.prow.signout svg.pi{color:var(--bad)}

.stiles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:22px}
.stile{padding:16px 12px;border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);text-align:center}
.stile .sv{font-size:27px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.stile .sk{font-size:12px;color:var(--mut);margin-top:4px;display:flex;align-items:center;justify-content:center;gap:2px}
.sect{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);margin:24px 0 12px}
.sect .secthint{display:block;font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--mut);margin-top:4px}

/* ---- sub-tabs: one screen, three views ---------------------------------- */
.subtabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;min-height:40px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--mut);transition:background .15s,color .15s}
.subtab:hover{color:var(--ink2)}
.subtab.on{background:var(--goldSoft);color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(201,162,39,.32)}
.subtab .stn{font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--panel3);color:var(--ink2);font-variant-numeric:tabular-nums}
.subtab.on .stn{background:rgba(201,162,39,.22);color:var(--gold2)}

/* ---- my programmes: what the user holds, not the catalogue -------------- */
.mprog{padding:18px;margin-bottom:12px}
.mprog.on{border-color:rgba(201,162,39,.42)}
.mprog .mph{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.mprog .mpn{font-weight:600;font-size:16px}
.mprog .mpd{font-size:12.5px;color:var(--mut);margin-top:2px}
.mprog .mpf{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut);margin-top:7px;font-variant-numeric:tabular-nums}
.mprog .mpa{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---- past missions ------------------------------------------------------ */
.pastrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:13px 15px;min-height:56px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line2);margin-bottom:9px;transition:border-color .15s,background .15s}
.pastrow:hover{border-color:var(--line3);background:var(--panel2)}
.pastrow .dnum{width:30px;height:30px;flex:none;border-radius:50%;background:var(--okSoft);border:1px solid var(--okLine);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pastrow .dx{flex:1;min-width:0}
.pastrow .dt{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pastrow .dd{font-size:12.5px;color:var(--mut);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pastrow .dst{flex:none;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--gold2)}
.pastrow .dst svg{width:15px;height:15px}

/* ---- tools grouped by the moment they are for --------------------------- */
.momenthead{margin:22px 0 11px}
.momenthead:first-of-type{margin-top:6px}
.momenthead .ml{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--goldT)}
.momenthead .mh{font-size:13px;color:var(--mut);margin-top:3px}
.introtag{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--goldSoft);color:var(--gold2);font-size:11px;font-weight:600;vertical-align:1px}
.introtag svg{width:12px;height:12px}
.impact{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.icard{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line2)}
.icard .itile{width:38px;height:38px;flex:none;border-radius:10px;background:var(--hover2);color:var(--ink2);display:flex;align-items:center;justify-content:center}
.icard .itile svg{width:17px;height:17px}
.icard .iv{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.icard .ik{font-size:12px;color:var(--mut);line-height:1.4;margin-top:1px;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
/* Only the metric that has a list behind it offers a way into it. */
.icard.link{border-color:rgba(201,162,39,.24)}
.icard .ihint{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--gold2);margin-top:5px}
.icard .ihint svg{width:12px;height:12px}
.icard .ihint:hover{text-decoration:underline}
.growth{display:flex;align-items:center;gap:18px;padding:18px;margin-top:22px;flex-wrap:wrap}
.growth .gx{flex:1;min-width:180px}
.growth .gl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:6px;display:flex;align-items:center;gap:4px}
.growth .gt{font-size:14.5px;color:var(--ink2);line-height:1.6}
.gring{position:relative;width:88px;height:88px;flex:none}
.gring svg{transform:rotate(-90deg)}
.gring .gc{fill:none;stroke:var(--trackSolid);stroke-width:6}
.gring .gp{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round}
.gring .gv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.gring .gk{font-size:9px;color:var(--mut);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

.traincard{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);margin-bottom:18px;background:var(--panel)}
.traincard .tcv{position:relative;height:110px}
.traincard .tcv svg{position:absolute;inset:0;width:100%;height:100%}
.traincard .tcb{padding:16px 18px 18px}
.traincard h2{font-family:var(--serif);font-size:23px;font-weight:600}
.pbar{height:6px;border-radius:4px;background:var(--trackSolid);overflow:hidden;margin:12px 0 8px}
.pbar i{display:block;height:100%;background:var(--bar);border-radius:0 3px 3px 0;min-width:3px}
.dayli{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:14px 15px;min-height:60px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line2);margin-bottom:9px;transition:border-color .15s,background .15s}
.dayli:hover{border-color:var(--line3);background:var(--panel2)}
.dayli .dnum{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.dayli .dx{flex:1;min-width:0}
.dayli .dt{font-weight:600;font-size:14.5px}
.dayli .dd{font-size:12.5px;color:var(--mut);margin-top:2px}
.dayli .dst{flex:none;color:var(--mut);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.dayli .dst svg{width:16px;height:16px}
.dayli.done .dnum{background:var(--okSoft);border-color:var(--okLine);color:var(--ok)}
.dayli.done .dst{color:var(--ok)}
.dayli.now{border-color:rgba(201,162,39,.5);box-shadow:inset 3px 0 0 var(--gold)}
.dayli.now .dnum{background:var(--gold);border-color:var(--gold);color:var(--onGold)}
.dayli.now .dst{color:var(--gold2)}
.dayli.lockd{background:var(--bg2);border-style:dashed}
.dayli.lockd .dnum{color:var(--mut)}
/* One program, at its own address. The signed-in half of the public page: the
   same trailer on the same stage, the same curriculum, and the button that
   makes it the daily mission. It replaced a modal, so it inherits nothing and
   these are all its own. */
.pghero{margin:14px 0 0;border-radius:var(--r-l);overflow:hidden}
.pghero .canvas{margin:0}
.pghero.still{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:var(--panel)}
.pghero.still img,.pghero.still svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pgbody{padding-top:20px}
.pgtitle{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.16;margin:8px 0 0}
.pgdesc{color:var(--ink2);font-size:14.5px;line-height:1.7;margin:12px 0 0}
.pgchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pgcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pgcta .btn{flex:1 1 auto;min-width:160px;justify-content:center}
.pgday{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px solid var(--line2)}
.pgday:last-child{border-bottom:0}
.pgdn{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.pgdn svg{width:15px;height:15px}
.pgdx{min-width:0}
.pgdt{font-weight:600;font-size:14.5px}
.pgdd{font-size:12.5px;color:var(--mut);margin-top:2px}
.pgday.done .pgdn{background:var(--okSoft);border-color:var(--okLine);color:var(--ok)}
.pgday.soon .pgdt,.pgday.soon .pgdn{color:var(--mut);opacity:.75}

.progcard{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line2);background:var(--panel);margin-bottom:12px;width:100%;text-align:left;display:block;transition:border-color .15s}
.progcard:hover{border-color:var(--line)}
.progcard .pcv{position:relative;height:88px}
.progcard .pcv svg{position:absolute;inset:0;width:100%;height:100%}
.progcard .pcb{padding:14px 16px 15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.progcard .pct{font-weight:600;font-size:15.5px}
.progcard .pcd{font-size:12.5px;color:var(--mut);margin-top:2px}

.pbanner{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:var(--goldSoft);border:1px solid rgba(201,162,39,.4);color:var(--gold2);font-size:13px;font-weight:600;margin-bottom:16px}
.pbanner svg{width:16px;height:16px;flex:none}

.notifpop .nrow{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line2)}
.notifpop .nrow:last-child{border-bottom:0}
.notifpop .ndot{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:7px;flex:none}
.notifpop .ndot.rd{background:var(--dotArch)}
.notifpop .nt{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.notifpop .nb{font-size:13.5px;color:var(--ink2);margin-top:3px;line-height:1.55}
.notifpop .nw{font-size:12px;color:var(--mut);margin-top:4px}
.newtag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--onGold);background:var(--gold);border-radius:4px;padding:1px 6px}

.faq{border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);margin-bottom:10px;overflow:hidden}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;min-height:52px;font-weight:500;font-size:14.5px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:16px;height:16px;color:var(--mut);transition:transform .18s;flex:none}
.faq[open] summary svg{transform:rotate(90deg)}
.faq .fb2{padding:0 16px 16px;font-size:14px;color:var(--ink2);line-height:1.7}

/* ---- authentication ------------------------------------------------------
   Own surface, centred, one card. Sign in, create account, verify and reset
   all share it so the flow never changes shape underneath the user.       */
.authwrap{min-height:calc(100vh - 40px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0 32px}
.authcard{width:100%;max-width:400px}
.authcard.wide{max-width:420px;text-align:center}
.abrandline{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:26px}
.authback{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--mut);padding:8px 12px 8px 8px;margin:0 0 10px -8px;border-radius:10px;min-height:40px}
.authback:hover{color:var(--ink2)}
.authback svg{width:16px;height:16px}
.authcard .ah{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.15;margin-bottom:6px}
.authcard .as{color:var(--ink2);font-size:14.5px;line-height:1.6;margin-bottom:24px}
.ahero{margin-bottom:26px}
.ahero img.bim{margin-left:auto;margin-right:auto}
.ahero .awm{display:flex;justify-content:center;margin:18px 0 14px}
.ahero .wt{color:var(--ink2);font-size:15.5px;line-height:1.65;max-width:320px;margin:0 auto}
.apoints{list-style:none;text-align:left;max-width:330px;margin:0 auto 28px;display:grid;gap:12px}
.apoints li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.55}
.apoints li svg{width:17px;height:17px;color:var(--ok);flex:none;margin-top:2px}
.alegal{font-size:12px;color:var(--mut);line-height:1.6;margin-top:18px}
.aswitch{text-align:center;font-size:14px;color:var(--mut);margin-top:22px}
.aswitch button{color:var(--gold2);font-weight:600;text-decoration:underline;padding:6px 2px}
.alink{display:inline-block;font-size:13.5px;color:var(--gold2);text-decoration:underline;padding:8px 2px;margin-top:2px}
.inwrap{position:relative}
.inwrap .peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--mut)}
.inwrap .peek:hover{color:var(--ink2)}
.inwrap .peek svg{width:17px;height:17px}
.inwrap .input{padding-right:46px}
.field.bad .input{border-color:var(--badLine)}
.ferr{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--bad);margin-top:7px}
.ferr svg{width:14px;height:14px;flex:none}
.fhint{font-size:12.5px;color:var(--mut);margin-top:7px}
.checkline{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink2);line-height:1.5;margin-top:4px;cursor:pointer}
.checkline input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--gold)}
.codein{text-align:center;font-size:26px;font-weight:600;letter-spacing:.34em;font-variant-numeric:tabular-nums}
.asent{display:flex;justify-content:center;margin:6px 0 26px;color:var(--gold2)}
.asent svg{width:52px;height:52px}
.ademo{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--mut);line-height:1.55;margin-top:18px}
.ademo svg{width:15px;height:15px;flex:none;margin-top:1px}
@media (min-width:960px){.authwrap{min-height:calc(100vh - 100px)}}

/* Signing in with Google. The button itself is Google's, rendered by their
   library into .gbtn, so nothing here styles it: their terms require their
   mark unaltered. What is ours is the space around it and the divider that
   says these are two ways to do one thing rather than two separate steps.
   The slot starts hidden and is only revealed once a button really exists in
   it, so a deployment with no Google client shows no empty gap.            */
.gwrap{margin-top:18px}
.ordiv{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--line2)}
.gbtn{display:flex;justify-content:center;min-height:44px;transition:opacity .15s}
/* Their iframe carries its own width. This keeps it from overflowing a narrow
   card without touching anything inside it. */
.gbtn>div{max-width:100%}

/* Manage Subscription. */
.plancard{padding:20px;margin-bottom:14px}
.plancard .plname{font-family:var(--serif);font-size:31px;font-weight:600;margin-top:7px}
.plancard .plmeta{font-size:13px;color:var(--mut);margin-top:3px}
.plancard .plfeats{list-style:none;margin-top:16px;display:grid;gap:10px}
.plancard .plfeats li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.5}
.plancard .plfeats svg{width:16px;height:16px;color:var(--ok);flex:none;margin-top:2px}

.rulecard{display:flex;gap:14px;padding:16px 18px;margin-bottom:11px;align-items:flex-start}
.rulecard .rx{flex:1;min-width:0}
.rulecard .rt2{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.42}
.rulecard .rs{font-size:12.5px;color:var(--mut);margin-top:6px}

.permrow{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line2);background:var(--bg2);margin-bottom:14px;font-size:13.5px;color:var(--ink2);line-height:1.55}
.permrow svg{width:17px;height:17px;flex:none;margin-top:1px}
.permrow.warn{border-color:var(--warnLine)}
.permrow.warn svg{color:var(--warn)}
.permrow.ok svg{color:var(--ok)}

@media (max-width:400px){
  .stiles{gap:8px}
  .stile .sv{font-size:23px}
  .usegrid{grid-template-columns:1fr}
  .impact{grid-template-columns:1fr}
  .greet{font-size:16px}
  .streakchip{padding:0 10px}
  .subtab{font-size:12.5px;padding:0 10px}
  .authcard .ah{font-size:28px}
}
/* Laptop heights: keep the session readable without vertical scrolling. */
@media (min-height:600px) and (max-height:800px) and (min-width:960px){
  #view{padding-top:26px}
  .steph{font-size:25px}
  .mission h1{font-size:29px}
  .ringwrap{width:min(216px,46vh);margin:18px auto 14px}
}

/* A confirmation link that has done its job, or has not. */
.asent.ok{color:var(--ok)}
.asent.bad{color:var(--bad)}

/* The line asking a new account to confirm its address. It sits under the
   greeting on Today and nowhere else: one ask per screen, not one per view. */
.vbanner{display:flex;align-items:center;gap:12px;padding:13px 15px;margin:0 0 18px;border-radius:14px;background:var(--goldSoft);border:1px solid rgba(201,162,39,.34)}
.vbanner>svg{width:19px;height:19px;flex:none;color:var(--gold2)}
.vbanner div{display:flex;flex-direction:column;gap:2px;min-width:0}
.vbanner b{font-size:13.5px;font-weight:600;color:var(--ink)}
.vbanner span{font-size:12.5px;line-height:1.5;color:var(--mut)}
.vbanner button{margin-left:auto;flex:none;white-space:nowrap}
@media (max-width:520px){
  .vbanner{flex-wrap:wrap}
  .vbanner button{margin-left:0;width:100%}
}

/* ---- light-theme corrections --------------------------------------------
   The tokens carry nearly all of this. What is left is the handful of places
   where the app assumes a dark ground for a reason a variable cannot express.

   Three kinds, and only three. A filter cannot read a variable, so the brand
   marks are re-dimmed by hand. Two surfaces are pictures rather than panels
   and stay dark on purpose. And the backdrop behind a session is a photograph,
   so it is lifted rather than recoloured.                                   */

/* The rail and tab-bar marks are gold PNGs greyed and lifted towards a dark
   page for their resting state. On a light page they drop towards it instead,
   landing at about the weight of the label underneath.                      */
[data-theme="light"] .tab .bim{filter:grayscale(1) brightness(.6);opacity:.7}
[data-theme="light"] .rlink .bim{filter:grayscale(1) brightness(.6);opacity:.72}
/* And the resting state must not outrank the tab you are actually on. These
   two carry the same weight as the rules they are correcting and are read
   later, so without restating them here the current tab loses its gold. */
[data-theme="light"] .tab.on .bim,[data-theme="light"] .tab:hover .bim,
[data-theme="light"] .rlink.on .bim,[data-theme="light"] .rlink:hover .bim{filter:none;opacity:1}

/* Gold thinned against black. Thinned gold disappears on white, so the
   waveform takes the darkened gold at full strength instead. */
[data-theme="light"] .ringcore .wv i{background:var(--goldT)}

/* A shadow tuned to disappear into a dark page reads as a smudge on a light
   one, so the mark casts the page's own shadow instead. */
[data-theme="light"] .shieldwrap img{filter:drop-shadow(0 12px 26px rgba(21,36,27,.16))}

/* ---- three surfaces that stay dark in both themes ------------------------
   The mission poster, the mission hero and the content canvas are artwork with
   a scrim over it, and a scrim over a photograph is dark in any theme. Rather
   than restate every rule inside them, each re-declares the ink tokens for its
   own subtree: the components underneath are unchanged and simply inherit the
   palette they were written against. Everything the canvas draws, controls and
   captions included, sits inside .cvstage, so one declaration covers it.    */
[data-theme="light"] .mission .body,
[data-theme="light"] .mhero .mhbody,
[data-theme="light"] .cvstage{
  --ink:#EDE8DA;
  --ink2:#CBD5C4;
  --mut:#A9BAAE;
  --goldT:#D9B63F;
  --gold2:#E6CA6E;
  --line2:rgba(237,232,218,.10);
  --line3:rgba(237,232,218,.16);
  --sage:#C6DCC0;
  --sageInk:#132019;
  --moss:#3E5C4A;
  --moss2:#4E7460;
  --ok:#8CBFA0;
  --warn:#DFA151;
  --bad:#E08B85;
  color:var(--ink);
}

/* The atmosphere behind a session is one photograph, blurred and darkened
   until words sit on it. In daylight it is the same photograph lifted instead,
   and the veil over it fades to the page rather than away from it.          */
[data-theme="light"] .stepbg img{filter:blur(26px) saturate(.5) brightness(1.5)}
[data-theme="light"] .stepbg i{background:linear-gradient(180deg,rgba(244,246,242,.66),rgba(244,246,242,.88) 70%,var(--bg))}