/* ═══════════════════════════════════════════════════════════════════════
   IOCL Officer (Marketing), Grade A — study system
   ───────────────────────────────────────────────────────────────────────
   Apple's system appearance, light first, following the reader's device.
   Grouped grey ground with white cards that actually sit above it, Apple's
   own system colours at full saturation, and the system typeface where the
   device has one. Depth comes from real shadow in light and from stepped
   fills in dark, the way Apple does it — never both.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── light: systemGroupedBackground and its raised surfaces ── */
  --paper:      #f2f2f7;
  --paper-2:    #e9e9ef;
  --surface:    #ffffff;
  --surface-2:  #f7f7fa;

  --ink:        #1d1d1f;
  --ink-2:      #494950;
  --ink-3:      #63636d;
  --faint:      #6c6c76;

  /* systemBlue, at the saturation Apple ships it */
  --accent:     #0062d6;
  --accent-2:   #0052b5;
  --accent-fill:#0062d6;   /* white sits on this */
  --accent-wash:#007aff1f;
  --accent-line:#007aff59;
  --on-accent:  #ffffff;

  /* systemGreen and systemRed: a question's verdict, nothing else */
  --ok:         #1b7231;
  --ok-tint:    #34c759;
  --ok-wash:    #34c7592b;
  --no:         #d70015;
  --no-tint:    #ff3b30;
  --no-wash:    #ff3b302b;

  --rule:       rgba(60,60,67,.20);      /* separator            */
  --rule-2:     rgba(60,60,67,.10);
  --edge:       rgba(60,60,67,.32);      /* control outline, 3:1 */

  --glass:      rgba(242,242,247,.78);
  --glass-edge: rgba(255,255,255,.7);
  /* light carries depth in shadow; dark carries it in fill */
  --shadow-1:   0 1px 1.5px rgba(0,0,0,.045), 0 2px 8px rgba(0,0,0,.045);
  --shadow-2:   0 2px 6px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.07);
  --shadow-3:   0 8px 22px rgba(0,0,0,.10), 0 28px 70px rgba(0,0,0,.11);
  --inset:      inset 0 1px 0 rgba(255,255,255,.85);
  --raise:      none;
  --ring-1:     #007aff;
  --ring-2:     #30b0c7;
  --ring-3:     #5856d6;
  --hero-a:     #0062d6;
  --hero-b:     #4a48c4;
  --sheet:      #ffffff;

  /* the device's own face first; it already carries optical sizing and
     tracking tables tuned for the screen. Geist stands in elsewhere. */
  --ui:   -apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',
          'Segoe UI Variable Display','Segoe UI','Geist',system-ui,sans-serif;
  --code: ui-monospace,'SF Mono',SFMono-Regular,'Geist Mono',Menlo,Consolas,monospace;
  --disp: var(--ui);    /* aliases: inline styles in app.js reach for these */
  --serif:var(--ui);
  --mono: var(--ui);

  --out:    cubic-bezier(.16,1,.3,1);
  --out-2:  cubic-bezier(.16,1,.3,1);
  --io:     cubic-bezier(.77,0,.175,1);
  --spring: cubic-bezier(.32,.72,0,1);
  --t-press:110ms; --t-fast:180ms; --t-med:260ms;

  --r-xs:9px; --r-s:12px; --r-m:18px; --r-l:26px; --r-pill:980px;

  --body-weight:400;
  --rail:264px;
  --aside:280px;
  --pad: clamp(20px,3.4vw,44px);
}

/* ── dark: Apple's elevation ramp on true black ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:      #000000;
    --paper-2:    #1c1c1e;
    --surface:    #1c1c1e;
    --surface-2:  #2c2c2e;

    --ink:        #f5f5f7;
    --ink-2:      #b9b9c0;
    --ink-3:      #98989f;
    --faint:      #8a8a93;

    --accent:     #0a84ff;
    --accent-2:   #0a68d0;
    --accent-fill:#0a72e0;
    --accent-wash:#0a84ff2e;
    --accent-line:#0a84ff66;
    --on-accent:  #ffffff;

    --ok:         #30d158;
    --ok-tint:    #30d158;
    --ok-wash:    #30d1582e;
    --no:         #ff6961;
    --no-tint:    #ff453a;
    --no-wash:    #ff453a30;

    --rule:       rgba(84,84,88,.62);
    --rule-2:     rgba(84,84,88,.34);
    --edge:       rgba(142,142,147,.55);

    --glass:      rgba(0,0,0,.72);
    --glass-edge: rgba(255,255,255,.10);
    /* a cast shadow on #000 darkens nothing; the hairline is the elevation */
    --shadow-1:   inset 0 0 0 1px rgba(255,255,255,.075), 0 1px 3px rgba(0,0,0,.7);
    --shadow-2:   inset 0 0 0 1px rgba(255,255,255,.09), 0 6px 20px rgba(0,0,0,.72);
    --shadow-3:   inset 0 0 0 1px rgba(255,255,255,.11), 0 16px 48px rgba(0,0,0,.8),
                  0 44px 110px rgba(0,0,0,.62);
    --inset:      inset 0 1px 0 rgba(255,255,255,.08);
    --raise:      linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014) 100px,transparent 280px);
    --ring-1:     #0a84ff;
    --ring-2:     #40cbe0;
    --ring-3:     #5e5ce6;
    --hero-a:     #0062d6;
    --hero-b:     #4a48c4;
    --sheet:      #ffffff;
  }
}
:root[data-theme="dark"]{
  --paper:      #000000;
  --paper-2:    #1c1c1e;
  --surface:    #1c1c1e;
  --surface-2:  #2c2c2e;
  --ink:        #f5f5f7;
  --ink-2:      #b9b9c0;
  --ink-3:      #98989f;
  --faint:      #8a8a93;
  --accent:     #0a84ff;
  --accent-2:   #0a68d0;
  --accent-fill:#0a72e0;
  --accent-wash:#0a84ff2e;
  --accent-line:#0a84ff66;
  --on-accent:  #ffffff;
  --ok:         #30d158;
  --ok-tint:    #30d158;
  --ok-wash:    #30d1582e;
  --no:         #ff6961;
  --no-tint:    #ff453a;
  --no-wash:    #ff453a30;
  --rule:       rgba(84,84,88,.62);
  --rule-2:     rgba(84,84,88,.34);
  --edge:       rgba(142,142,147,.55);
  --glass:      rgba(0,0,0,.72);
  --glass-edge: rgba(255,255,255,.10);
  /* a cast shadow on #000 darkens nothing; the hairline is the elevation */
  --shadow-1:   inset 0 0 0 1px rgba(255,255,255,.075), 0 1px 3px rgba(0,0,0,.7);
  --shadow-2:   inset 0 0 0 1px rgba(255,255,255,.09), 0 6px 20px rgba(0,0,0,.72);
  --shadow-3:   inset 0 0 0 1px rgba(255,255,255,.11), 0 16px 48px rgba(0,0,0,.8),
                0 44px 110px rgba(0,0,0,.62);
  --inset:      inset 0 1px 0 rgba(255,255,255,.08);
  --raise:      linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014) 100px,transparent 280px);
  --ring-1:     #0a84ff;
  --ring-2:     #40cbe0;
  --ring-3:     #5e5ce6;
  --hero-a:     #0062d6;
  --hero-b:     #4a48c4;
  --sheet:      #ffffff;
}
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){color-scheme:dark} }

/* ═══ base ═══ */
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.6;font-weight:var(--body-weight);
  letter-spacing:-.006em;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100dvh;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--ui);margin:0;line-height:1.08;font-weight:640;
  letter-spacing:-.028em;text-wrap:balance}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
button,select,input{font-family:var(--ui);font-size:inherit}
.clock,.plate pre,.field input[inputmode="numeric"]{font-family:var(--code)}
button{cursor:pointer;border:0;background:none;color:inherit;letter-spacing:inherit;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
::selection{background:var(--accent-wash);color:var(--ink)}
img{max-width:100%}

/* ═══ shell: rail | main | aside ═══ */
.app{display:grid;min-height:100dvh;grid-template-columns:1fr;
  padding-bottom:calc(74px + env(safe-area-inset-bottom))}
main{min-width:0;padding:0 var(--pad) 44px}
@media(min-width:1024px){
  .app{grid-template-columns:var(--rail) minmax(0,1fr);padding-bottom:0}
  .app.has-aside{grid-template-columns:var(--rail) minmax(0,1fr) var(--aside)}
  main{padding-bottom:88px}
}

/* ── left rail: a translucent sidebar, not a painted column ── */
.rail{display:none}
@media(min-width:1024px){
  .rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100dvh;
    padding:26px 14px 20px;border-right:1px solid var(--rule);overflow-y:auto;
    background:var(--glass);backdrop-filter:saturate(180%) blur(24px);
    -webkit-backdrop-filter:saturate(180%) blur(24px)}
}
.mark{display:flex;align-items:center;gap:10px;padding:0 10px 20px;min-width:0;
  font-family:var(--ui);font-weight:700;font-size:15px;letter-spacing:-.022em;color:var(--ink)}
.mark > span{min-width:0}
/* a 9px dot beside a wordmark reads as a stray bullet. A tile with the same
   three ascending bars the favicon carries reads as the product. */
.mark b{width:24px;height:24px;flex:0 0 auto;margin-top:0;border-radius:7.5px;
  background:linear-gradient(155deg,var(--ring-1),var(--accent-2));
  box-shadow:0 1px 3px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.34)}
.mark b svg{display:block;width:100%;height:100%}
.mark span{display:block;font-size:10px;letter-spacing:.038em;text-transform:uppercase;
  color:var(--ink-3);font-weight:540;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rail > a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  font-size:13.5px;font-weight:530;letter-spacing:-.008em;color:var(--ink);
  transition:background var(--t-fast) var(--out),color var(--t-fast) var(--out)}
.rail > a.on{background:var(--accent-wash);color:var(--accent);font-weight:620}
.rail > a .n{margin-left:auto;font-size:11px;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.rail > a.on .n{color:var(--accent);opacity:.72}
.rail-sep{height:1px;background:var(--rule);margin:14px 12px}
.rail-foot{margin-top:auto;padding:16px 12px 0;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:1px}
.rail-foot .lbl{font-size:10.5px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-3);font-weight:560}
.rail-foot .val{font-size:34px;font-weight:680;letter-spacing:-.045em;margin-top:4px;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.rail-foot .sub{font-size:12px;color:var(--ink-3);margin-top:4px;letter-spacing:-.004em}

/* ── right aside ── */
.aside{display:none}
@media(min-width:1024px){
  /* only a populated aside becomes a grid item. An empty one wraps to a new
     implicit row, adding a viewport of dead scroll, and because it is sticky
     it then slides up over the content and swallows clicks. */
  .app.has-aside > .aside{display:block;position:sticky;top:0;height:100dvh;overflow-y:auto;
    padding:32px 22px 40px;border-left:1px solid var(--rule)}
}
.aside:empty{display:none!important}
.aside h4{font-size:10.5px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-3);font-weight:560;margin-bottom:12px}
.aside + .aside-block{margin-top:26px}
.toc{display:flex;flex-direction:column;gap:1px}
.toc a{font-size:13px;line-height:1.42;color:var(--ink-2);padding:8px 10px;font-weight:460;
  border-radius:9px;display:flex;gap:10px;transition:background var(--t-fast) var(--out),color var(--t-fast) var(--out)}
.toc a i{font-size:11px;color:var(--faint);font-style:normal;flex:0 0 auto;
  font-variant-numeric:tabular-nums;font-weight:540}

/* ── mobile masthead: a real nav bar, translucent over the scroll ── */
.top{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
  margin:0 calc(var(--pad) * -1) 2px;padding:11px var(--pad) 10px;
  border-bottom:1px solid var(--rule);
  background:var(--glass);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px)}
@media(min-width:1024px){.top{display:none}}
.top .mark{padding:0;flex:1;min-width:0}

/* the deck's run panel, which is what the spare laptop column is for */
.runstat{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.runstat .k{font-size:12.5px;color:var(--ink-3);font-weight:520}
.runstat b{font-size:17px;font-weight:650;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.lvs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lvs li{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 2px;font-size:13.5px;color:var(--ink-2);font-weight:460}
.lvs li + li{border-top:1px solid var(--rule-2)}
.lvs i{width:9px;height:9px;border-radius:var(--r-pill)}
.lvs b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lvs .l0 i{background:var(--faint)}   .lvs .l1 i{background:var(--ring-3)}
.lvs .l2 i{background:var(--ring-2)}  .lvs .l3 i{background:var(--ring-1)}

/* ── bottom tab bar ── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  border-top:1px solid var(--rule);
  background:var(--glass);backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  box-shadow:inset 0 1px 0 var(--glass-edge);
  padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right))}
@media(min-width:1024px){.bar{display:none}}
.bar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:6px 2px;border-radius:10px;color:var(--faint);min-height:50px;
  transition:color var(--t-fast) var(--out),transform var(--t-press) var(--out)}
.bar a.on{color:var(--accent)}
.bar a:active{transform:scale(.94)}
.bar svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-fast) var(--out),stroke-width var(--t-fast) var(--out)}
.bar a.on svg{transform:scale(1.07);stroke-width:1.9}
.bar span{font-size:10.5px;letter-spacing:-.005em;font-weight:560}
.bar a.on span{font-weight:640}

/* ═══ typography scale ═══ */
.kicker{display:inline-block;font-size:11.5px;letter-spacing:.06em;font-weight:620;
  text-transform:uppercase;color:var(--accent)}
a.kicker{color:var(--ink-3)}
a.kicker:hover{color:var(--accent);text-decoration:none}
.page-h{font-size:clamp(36px,5.6vw,62px);font-weight:700;letter-spacing:-.04em;
  line-height:1.03;margin-top:14px;max-width:17ch}
.lede{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-2);margin-top:17px;
  max-width:50ch;letter-spacing:-.012em;font-weight:430}
.sec-h{font-size:clamp(23px,2.6vw,33px);font-weight:670;letter-spacing:-.032em;line-height:1.1}
.prose{max-width:52ch}
.muted{color:var(--ink-3);font-size:15px;line-height:1.6;max-width:54ch}

.head{padding:clamp(32px,5vw,68px) 0 clamp(24px,2.8vw,36px)}
.band{padding:clamp(28px,3.2vw,40px) 0 0;border-top:1px solid var(--rule);margin-top:clamp(42px,5.2vw,70px)}
.band:first-child{border-top:0;margin-top:0;padding-top:0}

/* ═══ activity rings ═══ */
/* Text left, graphic right, and a single column once there is no room for
   both. Anything centred here would waste the width the rings need. */
.head.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,48px);align-items:center}
@media(min-width:940px){ .head.hero{grid-template-columns:minmax(0,1fr) auto} }
.hero-t{min-width:0}
.hero-g{margin:0;display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);flex-wrap:wrap}
.rings{width:clamp(148px,17vw,196px);height:auto;flex:0 0 auto;overflow:visible}
.rings .trk{stroke:currentColor;opacity:.15}
.rings .arc{stroke:currentColor;stroke-dasharray:var(--c);
  stroke-dashoffset:calc(var(--c) * (1 - var(--p)));
  transition:stroke-dashoffset 1.15s var(--out-2)}
@starting-style{ .rings .arc{stroke-dashoffset:var(--c)} }
.rings .r1,.legend .r1{color:var(--ring-1)}
.rings .r2,.legend .r2{color:var(--ring-2)}
.rings .r3,.legend .r3{color:var(--ring-3)}

.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:140px}
.legend li{display:grid;grid-template-columns:9px minmax(0,1fr);gap:3px 10px;align-items:center}
.legend i{width:9px;height:9px;border-radius:var(--r-pill);background:currentColor;grid-row:1/3}
.legend .k{font-size:11.5px;letter-spacing:.045em;text-transform:uppercase;
  font-weight:580;color:var(--ink-3);grid-column:2}
.legend b{grid-column:2;font-size:23px;font-weight:660;letter-spacing:-.03em;line-height:1.05;
  color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:480px){
  .hero-g{gap:18px}
  .rings{width:132px}
  .legend{gap:9px;min-width:0}
  .legend b{font-size:20px}
}

/* ═══ buttons: Apple's pill, sentence case, weight does the work ═══ */
.btn{--btn-bg:var(--paper-2);--btn-fg:var(--ink);--btn-bd:transparent;--btn-sh:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:var(--btn-sh);
  font-size:15px;font-weight:590;letter-spacing:-.014em;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  border-radius:var(--r-pill);padding:0 20px;min-height:46px;
  transition:transform var(--t-press) var(--out),background var(--t-fast) var(--out),
             border-color var(--t-fast) var(--out),opacity var(--t-fast) var(--out)}
.btn i{font-style:normal;font-size:17px;line-height:0;opacity:.62;margin-right:-3px;
  transition:transform var(--t-med) var(--out)}
.btn.key{--btn-bg:var(--accent-fill);--btn-fg:var(--on-accent);--btn-sh:var(--shadow-1)}
.btn.quiet{--btn-bg:var(--surface);--btn-fg:var(--ink);--btn-bd:var(--rule);--btn-sh:var(--shadow-1)}
.btn.sm{font-size:13.5px;padding:0 16px;min-height:38px;gap:6px}
.btn.sm i{font-size:15px}
.btn:disabled{cursor:default;--btn-bg:var(--paper-2);--btn-fg:var(--ink-3);--btn-bd:transparent;
  --btn-sh:none;transform:none!important}
.btn:disabled i{opacity:.4}
.btn:active:not(:disabled){transform:scale(.965)}

/* the small circular theme switch reads as a control, not a word */
#theme2{padding:0;min-width:38px;min-height:38px;border-radius:var(--r-pill);font-size:15px}

.tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.015em;font-weight:580;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-3);
  border:1px solid var(--rule-2);white-space:nowrap}
.tag.key{background:var(--accent-wash);color:var(--accent);border-color:var(--accent-line)}
.tag.ok{background:var(--ok-wash);color:var(--ok);border-color:transparent}
.tag.no{background:var(--no-wash);color:var(--no);border-color:transparent}

/* download strip */
.grab{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.grab a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:530;
  letter-spacing:-.008em;padding:9px 16px;border:1px solid var(--edge);border-radius:var(--r-pill);
  color:var(--ink-2);background:transparent;
  transition:background var(--t-fast) var(--out),border-color var(--t-fast) var(--out),
             color var(--t-fast) var(--out),transform var(--t-press) var(--out)}
.grab a b{font-weight:500;color:var(--faint)}
.grab a:active{transform:scale(.97)}

/* ═══ index lists ═══ */
.list{display:flex;flex-direction:column;background:var(--surface);background-image:var(--raise);
  border-radius:var(--r-m);box-shadow:var(--shadow-1);overflow:hidden}
.item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:17px 18px;color:inherit;position:relative;
  transition:background var(--t-fast) var(--out),transform var(--t-press) var(--out)}
.item::after{content:"";position:absolute;left:18px;right:0;bottom:0;height:1px;background:var(--rule-2)}
.item:last-child::after{display:none}
.item:active{transform:scale(.993)}
.item .num{font-size:12px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;
  letter-spacing:.01em}
.item .t,.item .d{display:block}
.item .t{font-weight:600;font-size:16.5px;letter-spacing:-.021em;line-height:1.3;color:var(--ink)}
.item .d{font-size:14.5px;line-height:1.5;color:var(--ink-3);margin-top:5px;max-width:52ch;font-weight:420}
.item .meta{font-size:11.5px;color:var(--ink-3);font-weight:520;
  display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;align-items:center}
.item .end{font-size:12px;color:var(--ink-3);white-space:nowrap;font-weight:520;
  font-variant-numeric:tabular-nums;text-align:right;display:flex;align-items:baseline;
  gap:16px;justify-content:flex-end}
.item .end .meta{margin-top:0}
.item .end b{display:block;font-size:20px;font-weight:660;color:var(--ink);letter-spacing:-.03em}
.item.done .num{color:var(--faint)}

/* ═══ stat tiles ═══ */
/* These strips hold exactly three tiles or four. auto-fit put three across and
   dropped the fourth into a lone track with dead space beside it, so the count
   is fixed instead: two up, or four up once there is room for four. A three-tile
   strip gives its last tile the spare track in either layout. */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.stats > .stat:nth-child(3):last-child{grid-column:span 2}
@media(min-width:1180px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stat{padding:18px 20px 20px;background:var(--surface);background-image:var(--raise);border-radius:var(--r-m);
  box-shadow:var(--shadow-1);min-width:0}
.stat .k{font-size:11.5px;letter-spacing:.045em;text-transform:uppercase;color:var(--ink-3);font-weight:580}
.stat .v{font-size:clamp(30px,3vw,40px);font-weight:680;letter-spacing:-.045em;
  margin-top:10px;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.stat .v small{font-size:.42em;color:var(--ink-3);font-weight:560;letter-spacing:-.015em}
.stat .s{font-size:13px;color:var(--ink-3);margin-top:8px;line-height:1.45;font-weight:430}

/* progress bar: scaleX off the main thread, and it grows in on arrival */
.track{height:5px;background:var(--rule-2);margin-top:14px;border-radius:var(--r-pill);overflow:hidden}
.track i{display:block;height:100%;width:100%;border-radius:var(--r-pill);background:var(--accent);
  transform-origin:left center;transform:scaleX(var(--p,0));
  transition:transform 720ms var(--out-2)}
@starting-style{ .track i{transform:scaleX(0)} }

/* ═══ quiz ═══ */
.quiz{max-width:76ch;padding-top:clamp(22px,3vw,42px)}
.qbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.qbar .c{font-size:12.5px;color:var(--ink-3);font-weight:560;font-variant-numeric:tabular-nums;letter-spacing:.005em}
.clock{font-family:var(--code);font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums;
  margin-left:auto;padding:7px 14px;border:1px solid var(--edge);border-radius:var(--r-pill);font-weight:500}
.clock.low{color:var(--no);border-color:transparent;background:var(--no-wash)}

.brief{margin:22px 0;padding:18px 20px;background:var(--surface);background-image:var(--raise);border-radius:var(--r-m);box-shadow:var(--shadow-1)}
.brief .t{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:580;display:block;margin-bottom:9px}
.brief p{font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.brief img{display:block;width:100%;height:auto;margin-top:15px;border-radius:var(--r-s);
  border:1px solid var(--rule);background:oklch(1 0 0)}

.qtext{font-size:clamp(19px,2vw,25px);font-weight:600;line-height:1.34;
  letter-spacing:-.026em;margin:26px 0 20px;color:var(--ink);text-wrap:pretty}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;
  background:var(--surface);border:1px solid transparent;border-radius:var(--r-s);
  box-shadow:var(--shadow-1);
  padding:14px 16px;min-height:54px;font-weight:430;
  font-size:15.5px;line-height:1.5;color:var(--ink-2);letter-spacing:-.008em;
  transition:border-color var(--t-fast) var(--out),background var(--t-fast) var(--out),
             transform var(--t-press) var(--out),color var(--t-fast) var(--out)}
.opt:disabled{cursor:default}
.opt:active:not(:disabled){transform:scale(.985)}
.opt em{font-size:12px;font-weight:620;color:var(--ink-3);background:var(--paper-2);
  border-radius:var(--r-pill);width:26px;height:26px;display:grid;place-items:center;
  flex:0 0 auto;margin-top:-1px;font-style:normal;
  transition:background var(--t-fast) var(--out),color var(--t-fast) var(--out)}
.opt.ok{border-color:var(--ok);background:var(--ok-wash);color:var(--ink)}
.opt.ok em{background:var(--ok);color:var(--paper)}
.opt.no{border-color:var(--no);background:var(--no-wash);color:var(--ink)}
.opt.no em{background:var(--no);color:var(--paper)}
/* chosen, not yet judged: exam mode must never borrow the correct-answer green */
.opt.picked{border-color:var(--accent);background:var(--accent-wash);color:var(--ink)}
.opt.picked em{background:var(--accent-fill);color:var(--on-accent)}

.why{margin-top:19px;padding:17px 19px;border-radius:var(--r-m);background:var(--surface);background-image:var(--raise);
  box-shadow:var(--shadow-1);
  transition:opacity var(--t-med) var(--out),transform var(--t-med) var(--out)}
@starting-style{ .why{opacity:0;transform:translateY(7px)} }
.why .t{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:620;display:block;margin-bottom:8px}
.why.ok .t{color:var(--ok)}
.why.no .t{color:var(--no)}
.why p{font-size:15.5px;line-height:1.6;color:var(--ink-2)}

.qnav{display:flex;gap:9px;margin-top:24px;align-items:center;flex-wrap:wrap}
.pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px}
.pad{aspect-ratio:1;border-radius:10px;border:1px solid transparent;background:var(--surface);box-shadow:var(--shadow-1);
  font-size:12px;font-weight:560;color:var(--ink-3);display:grid;place-items:center;min-height:34px;
  font-variant-numeric:tabular-nums;
  transition:transform var(--t-press) var(--out),border-color var(--t-fast) var(--out),
             background var(--t-fast) var(--out)}
.pad.ok{background:var(--ok-wash);color:var(--ok);border-color:var(--ok)}
.pad.no{background:var(--no-wash);color:var(--no);border-color:var(--no)}
.pad.picked{background:var(--accent-wash);color:var(--accent);border-color:var(--accent-line)}
.pad.here{outline:2px solid var(--accent);outline-offset:1px}
.pad:active{transform:scale(.93)}

/* ═══ flashcards ═══ */
/* the picker used to sit alone at the far left of a 1073px column with the
   card floating beside it. Both now share one measure and centre in the
   column, so the page reads as a single object. */
.deckwrap{max-width:660px;margin-inline:auto}
.deck-bar{display:flex;gap:10px;align-items:flex-end;margin-bottom:20px}
.pickwrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.pickwrap .lbl{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:580;color:var(--ink-3);padding-left:2px}
.deck-bar .btn{margin-bottom:0}
.deck{max-width:none;perspective:1800px}
.fc{position:relative;width:100%;min-height:clamp(300px,42vh,392px);transform-style:preserve-3d;
  cursor:grab;touch-action:pan-y;will-change:transform}
.fc:active{cursor:grabbing}
.fc .s{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--surface);background-image:var(--raise);border-radius:var(--r-l);
  padding:48px 30px 56px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:var(--shadow-3)}
.fc .s.b{transform:rotateY(180deg);background:var(--ink);border-color:transparent;color:var(--paper)}
.fc .tg{position:absolute;top:19px;left:30px;right:30px;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:580;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:12px}
.fc .s.b .tg{color:var(--paper);opacity:.56}
.fc .q{font-size:clamp(21px,2.6vw,32px);font-weight:650;line-height:1.22;letter-spacing:-.032em;
  text-wrap:pretty;color:var(--ink)}
.fc .s.b .q{font-size:14.5px;font-weight:540;color:var(--paper);opacity:.56;margin-bottom:14px;letter-spacing:-.012em}
.fc .a{font-size:clamp(17px,1.8vw,20.5px);line-height:1.52;color:var(--paper);
  font-weight:480;letter-spacing:-.014em}
.fc .ft{position:absolute;bottom:20px;left:30px;right:30px;text-align:center;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:560}
.dots{position:absolute;bottom:19px;right:30px;display:flex;gap:4px}
.dots i{width:16px;height:3px;border-radius:var(--r-pill);background:var(--rule);
  transition:background var(--t-fast) var(--out)}
.dots i.on{background:var(--accent)}
.fc .s.b .dots i{background:color-mix(in oklab,var(--paper) 26%,transparent)}
.fc .s.b .dots i.on{background:var(--paper)}
/* the topic picker above the deck */
.pick{width:100%;padding:0 38px 0 16px;min-height:44px;
  border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--surface);
  background-image:var(--raise);box-shadow:var(--shadow-1);
  color:var(--ink);font-size:15px;font-weight:560;letter-spacing:-.012em;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* ═══ coverage map ═══ */
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-width:560px}
@media(min-width:560px){ .map{grid-template-columns:repeat(8,minmax(0,1fr))} }
.cell{aspect-ratio:1;border-radius:var(--r-s);border:0;background:var(--surface);box-shadow:var(--shadow-1);
  position:relative;overflow:hidden;display:grid;place-items:center;font-size:12px;font-weight:560;
  color:var(--ink-3);min-height:46px;font-variant-numeric:tabular-nums;
  transition:transform var(--t-press) var(--out),border-color var(--t-fast) var(--out)}
.cell i{position:absolute;inset:0;height:100%;background:var(--accent);opacity:.22;
  transform-origin:bottom center;transform:scaleY(var(--p,0));transition:transform 760ms var(--out-2)}
@starting-style{ .cell i{transform:scaleY(0)} }
.cell span{position:relative;z-index:1}
.cell.full{background:var(--accent-fill);color:var(--on-accent);border-color:transparent}
.cell.full i{opacity:0}

/* ═══ note reader ═══ */
.read{max-width:none;padding-top:clamp(22px,3vw,42px)}
.read > :is(h1,h3,p,ul,ol,.aside-note,.qbar){max-width:60ch}
.read > :is(.plate,.grid-tbl){max-width:100%}
.read h1{font-size:clamp(31px,4.4vw,50px);letter-spacing:-.04em;margin:14px 0 0;
  font-weight:700;line-height:1.05}
.read h3{font-size:clamp(20px,2.2vw,26px);margin:48px 0 16px;padding-top:26px;
  border-top:1px solid var(--rule);display:flex;gap:14px;align-items:baseline;
  font-weight:670;letter-spacing:-.03em}
.read h3 i{font-size:12.5px;color:var(--accent);font-style:normal;flex:0 0 auto;
  font-weight:620;font-variant-numeric:tabular-nums}
.read p{font-size:17px;line-height:1.72;color:var(--ink-2);margin:0 0 18px;
  font-weight:420;letter-spacing:-.009em}
.read ul,.read ol{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.read li{font-size:16.5px;line-height:1.66;color:var(--ink-2);font-weight:420;letter-spacing:-.009em}
.read li::marker{color:var(--accent)}

.aside-note{padding:17px 19px;border-radius:var(--r-m);margin:0 0 20px;
  background:var(--surface);background-image:var(--raise);box-shadow:var(--shadow-1)}
.aside-note .t{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);display:block;margin-bottom:8px}
.aside-note p{margin:0;font-size:16px;line-height:1.64;color:var(--ink);font-weight:430;letter-spacing:-.009em}
.aside-note.k-simple{background:var(--accent-wash);border-color:var(--accent-line)}
.aside-note.k-simple .t{color:var(--accent)}
.aside-note.k-tip{background:var(--surface);border-color:var(--accent-line)}
.aside-note.k-tip .t{color:var(--accent)}

.grid-tbl{overflow-x:auto;margin:0 0 22px;border-radius:var(--r-m);
  background:var(--surface);background-image:var(--raise);box-shadow:var(--shadow-1)}
.grid-tbl table{border-collapse:collapse;width:100%;min-width:380px;font-size:14.5px}
.grid-tbl td{padding:12px 16px;border-bottom:1px solid var(--rule-2);vertical-align:top;
  color:var(--ink-2);line-height:1.5;font-weight:420}
.grid-tbl thead td{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:580;
  color:var(--ink-3);background:var(--paper-2)}
.grid-tbl tr:last-child td{border-bottom:0}
.grid-tbl td:first-child{color:var(--ink);font-weight:560}

/* ═══ figures, exactly as the source PDF sets them ═══ */
.plate{margin:0 0 26px;border-radius:var(--r-m);background:var(--surface);background-image:var(--raise);
  box-shadow:var(--shadow-1);overflow:hidden}
.plate-h{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--rule-2);
  font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink-3);font-weight:570}
/* a real segmented control: grey track, one raised thumb */
.plate-h .sw{margin-left:auto;display:flex;gap:2px;background:var(--paper-2);
  border-radius:var(--r-pill);padding:2px}
.plate-h .sw button{font-size:11px;letter-spacing:.01em;text-transform:none;padding:5px 13px;
  border-radius:var(--r-pill);color:var(--ink-3);font-weight:560;
  transition:background var(--t-fast) var(--out),color var(--t-fast) var(--out)}
.plate-h .sw button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.plate-h .dl{margin-left:auto;font-size:11px;letter-spacing:.02em;text-transform:none;
  color:var(--accent);font-weight:560}
.plate-h .sw + .dl{margin-left:12px}
.plate pre{margin:0;padding:18px 16px;overflow-x:auto;font-family:var(--code);
  font-size:11.5px;line-height:1.62;color:var(--ink-2);white-space:pre;tab-size:4}
@media(min-width:700px){.plate pre{font-size:12.5px;padding:22px}}
/* the figure is a scan of a printed page, so it keeps its paper in both
   themes; a hairline keeps it legible when the card behind it is also white */
.plate .sheet{background:var(--sheet);padding:20px 16px;display:flex;justify-content:center;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.plate .sheet img{display:block;width:auto;max-width:100%;height:auto}
.brief img{background:var(--sheet)}

/* ═══ plan ═══ */
.sess{border-bottom:1px solid var(--rule)}
.sess summary{display:flex;align-items:center;gap:14px;padding:19px 4px;cursor:pointer;
  list-style:none;min-height:64px}
.sess summary::-webkit-details-marker{display:none}
.sess .sd{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
  width:98px;flex:0 0 auto;font-weight:600}
.sess .st{font-weight:620;font-size:18.5px;letter-spacing:-.026em;flex:1;min-width:0;color:var(--ink);
  transition:color var(--t-fast) var(--out)}
.sess .body{padding:0 4px 28px}
.sess .goal{font-size:15.5px;line-height:1.6;color:var(--ink-3);margin-bottom:24px;max-width:54ch;font-weight:420}
.blk{margin-bottom:22px}
.blk h5{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:580;margin:0 0 10px;display:flex;justify-content:space-between;gap:10px}
.task{display:flex;gap:12px;align-items:flex-start;padding:8px;cursor:pointer;border-radius:10px;
  transition:background var(--t-fast) var(--out)}
.task input{margin-top:3px;width:19px;height:19px;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
.task:active{background:var(--surface)}
.task span{font-size:15.5px;line-height:1.54;color:var(--ink-2);max-width:52ch;font-weight:430;letter-spacing:-.009em}
.task input:checked + span{color:var(--faint);text-decoration:line-through}
.task a{border-bottom:1px solid var(--accent-line);padding-bottom:1px}
.task a:hover{text-decoration:none;border-bottom-color:var(--accent)}
.check{margin-top:16px;padding-top:15px;border-top:1px solid var(--rule-2);font-size:14.5px;
  color:var(--ink-2);max-width:54ch;font-weight:420}
.check b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:6px;font-weight:620}

/* ═══ account ═══ */
/* The form leads: it is the reason the page exists, it is first in tab order
   and first on a phone. The panel sits beside it once there is room, and
   carries the one number that matters before you have an account. */
.gate{min-height:max(560px, calc(100dvh - 118px));display:grid;place-items:center;
  padding:26px 0 48px;gap:clamp(30px,4vw,64px)}
@media(min-width:900px){
  .gate{grid-template-columns:392px minmax(0,430px);align-items:center;
    justify-content:center;place-items:stretch;align-content:center}
}
.gate-in{width:100%;max-width:392px;margin-inline:auto;align-self:center}

.gate-hero{width:100%;max-width:430px;margin-inline:auto;align-self:center;color:#fff;
  background:linear-gradient(152deg,var(--hero-a),var(--hero-b));
  border-radius:var(--r-l);padding:clamp(26px,3vw,36px);box-shadow:var(--shadow-3);
  position:relative;overflow:hidden}
/* a single soft highlight, so the panel reads as a lit surface and not a swatch */
.gate-hero::after{content:"";position:absolute;inset:-40% -30% auto auto;width:78%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
  pointer-events:none}
.gate-hero > *{position:relative}
.gh-k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:620;
  color:rgba(255,255,255,.82);display:block}
.gh-n{font-size:clamp(64px,8vw,92px);font-weight:700;letter-spacing:-.05em;line-height:.92;
  margin-top:10px;font-variant-numeric:tabular-nums}
.gh-d{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.86);margin-top:10px;letter-spacing:-.008em}
.gh-l{list-style:none;margin:clamp(24px,3vw,32px) 0 0;padding:clamp(20px,2.4vw,26px) 0 0;
  border-top:1px solid rgba(255,255,255,.26);display:flex;flex-direction:column;gap:14px}
.gh-l li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;align-items:baseline}
.gh-l b{font-size:19px;font-weight:660;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
  text-align:right}
.gh-l span{font-size:14px;line-height:1.42;color:rgba(255,255,255,.88);font-weight:440}
.gh-f{margin-top:clamp(22px,2.6vw,28px);padding-top:16px;border-top:1px solid rgba(255,255,255,.26);
  font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.76);font-weight:430}
@media(max-width:430px){
  .gh-l li{grid-template-columns:54px minmax(0,1fr);gap:12px}
  .gh-l span{font-size:13.5px}
}
.gate h1{font-size:clamp(32px,4.4vw,46px);letter-spacing:-.042em;margin:14px 0 0;font-weight:700;line-height:1.04}
.gate .sub{color:var(--ink-3);font-size:15.5px;line-height:1.55;margin-top:14px;font-weight:420}
.field{margin-top:18px}
.field label{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;font-weight:580}
.field input{width:100%;padding:15px 16px;border:1px solid var(--rule);border-radius:var(--r-s);
  background:var(--surface);box-shadow:var(--shadow-1);color:var(--ink);font-size:16.5px;font-weight:450;letter-spacing:-.012em;
  transition:border-color var(--t-fast) var(--out),box-shadow var(--t-fast) var(--out)}
.field input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3.5px var(--accent-wash)}
.field input:focus-visible{outline:none}
.field input::placeholder{color:var(--faint)}
.field input[inputmode="numeric"]{font-family:var(--code);letter-spacing:.42em;font-size:18px}
.gate .go{width:100%;margin-top:24px}
.gate .alt{margin-top:18px;text-align:center;font-size:14.5px;color:var(--ink-3);font-weight:430}
.gate .alt button{font-size:14.5px;font-weight:560;color:var(--accent)}
.gate .alt button:hover{text-decoration:underline;text-underline-offset:3px}
.gate .err{margin-top:16px;padding:13px 15px;border-radius:var(--r-s);background:var(--no-wash);
  border:1px solid var(--no);color:var(--no);font-size:14.5px;line-height:1.45;font-weight:480}
.gate .fine{margin-top:28px;font-size:12.5px;line-height:1.6;color:var(--faint);text-align:center;font-weight:420}

.who{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-s);
  background:var(--surface);background-image:var(--raise);box-shadow:var(--shadow-1);margin-bottom:6px}
.who .av{width:28px;height:28px;border-radius:var(--r-pill);background:var(--accent-fill);
  color:var(--on-accent);display:grid;place-items:center;font-size:13px;font-weight:650;flex:0 0 auto}
.who .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:-.014em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .nm:hover{text-decoration:none}
.who .out{font-size:11.5px;letter-spacing:.02em;color:var(--ink-3);font-weight:560}
.sync{font-size:11px;letter-spacing:.04em;color:var(--faint);padding:0 10px 12px;font-weight:530}
.sync.on{color:var(--ok)}

/* ═══ misc ═══ */
.foot{margin-top:60px;padding-top:26px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--faint);line-height:1.85;font-weight:420;letter-spacing:-.004em}
.blank{padding:86px 0;text-align:center;color:var(--ink-3)}
.blank b{display:block;font-size:25px;color:var(--ink);margin-bottom:10px;font-weight:660;letter-spacing:-.03em}

/* ═══ motion: entrance ═══ */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{animation:riseIn 380ms var(--out) both}
.reveal:nth-child(2){animation-delay:34ms}   .reveal:nth-child(3){animation-delay:68ms}
.reveal:nth-child(4){animation-delay:102ms}  .reveal:nth-child(5){animation-delay:136ms}
.reveal:nth-child(6){animation-delay:170ms}  .reveal:nth-child(7){animation-delay:204ms}
.reveal:nth-child(8){animation-delay:238ms}  .reveal:nth-child(9){animation-delay:264ms}
.reveal:nth-child(n+10){animation-delay:288ms}

/* the shell is fetching 1,030 questions and 31 notes; show the shape of the
   page rather than an empty column */
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.skel{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r-s)}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ink) 7%,transparent),transparent);
  animation:shimmer 1.35s var(--io) infinite}
.boot{padding:clamp(32px,5vw,68px) 0 0;display:flex;flex-direction:column;gap:14px;max-width:720px}
.boot .skel:nth-child(1){height:15px;width:220px}
.boot .skel:nth-child(2){height:58px;width:min(100%,460px);margin-top:6px}
.boot .skel:nth-child(3){height:19px;width:min(100%,540px)}
.boot .skel:nth-child(4){height:19px;width:min(100%,410px)}
.boot .skel:nth-child(5){height:104px;margin-top:20px;border-radius:var(--r-m)}

/* details open/close, where the browser can interpolate it */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .sess::details-content{height:0;overflow:hidden;opacity:0;
    transition:height var(--t-med) var(--out),opacity var(--t-med) var(--out),content-visibility var(--t-med) allow-discrete}
  .sess[open]::details-content{height:auto;opacity:1}
}

/* ═══ pointer-only affordances ═══ */
/* a tap fires :hover on touch and the state latches until the next tap */
@media (hover:hover) and (pointer:fine){
  .item:hover{background:var(--surface);text-decoration:none}
  .btn:hover:not(:disabled){--btn-bg:var(--surface-2)}
  .btn.key:hover:not(:disabled){--btn-bg:var(--accent-2)}
  .btn.quiet:hover:not(:disabled){--btn-bg:var(--surface-2)}
  .opt:hover:not(:disabled){box-shadow:var(--shadow-2)}
  .btn:hover i{transform:translateX(2px)}
  .rail > a:hover{background:var(--surface);color:var(--ink);text-decoration:none}
  .rail > a.on:hover{background:var(--accent-wash);color:var(--accent)}
  .toc a:hover{background:var(--surface);color:var(--ink);text-decoration:none}
  .opt:hover:not(:disabled){border-color:var(--edge);background:var(--surface-2)}
  .pad:hover{border-color:var(--accent-line)}
  .cell:hover{transform:translateY(-2px);border-color:var(--accent-line)}
  .grab a:hover{border-color:var(--accent-line);color:var(--ink);background:var(--surface);text-decoration:none}
  .sess summary:hover .st{color:var(--accent)}
  .who .out:hover{color:var(--ink)}
}

@media (prefers-reduced-transparency:reduce){
  .rail,.bar,.top{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--rule:rgba(60,60,67,.55);--rule-2:rgba(60,60,67,.35);--edge:rgba(60,60,67,.75);
        --ink-2:#2e2e33;--ink-3:#4a4a52;--faint:#5e5e66}
  :root[data-theme="dark"]{--rule:rgba(190,190,198,.6);--rule-2:rgba(190,190,198,.38);
        --edge:rgba(210,210,218,.8);--ink-2:#e2e2e8;--ink-3:#c8c8d0;--faint:#b0b0b8}
  .btn,.opt,.pad,.cell,.stat,.plate,.grid-tbl,.why,.brief,.aside-note,.list,.field input{
    border:1px solid var(--edge)}
  .item::after{background:var(--edge)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .track i,.cell i,.rings .arc{transition:none}
}

/* ═══ touch and small screens ═══ */
@media (max-width:1023px){
  /* every control reaches a 44px target */
  .btn.sm{min-height:44px;padding:0 18px}
  #theme2{min-height:44px;min-width:44px}
  .kicker{display:inline-flex;align-items:center;min-height:40px}
  .plate-h .sw button{min-height:40px;padding:8px 15px}
  .grab a{min-height:44px}
  /* on a phone the aside becomes a real navigation list under the content,
     so its rows are thumb targets rather than sidebar text */
  .aside .toc a{min-height:44px;align-items:center;font-size:14.5px;padding:8px 12px}
  .task{padding-top:10px;padding-bottom:10px}
  .pad{min-height:42px;font-size:13px}

  /* the question palette and topic list are generated and then thrown away on
     phones; give them a home under the content instead */
  .app.has-aside > .aside{display:block;position:static;height:auto;overflow:visible;
    padding:30px 0 0;border-left:0;border-top:1px solid var(--rule);margin:36px var(--pad) 0}
  .aside .pads{grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}

  /* a wide block must announce that it scrolls */
  .plate pre,.grid-tbl{position:relative;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .grid-tbl table{min-width:320px}
}

@media (max-width:600px){
  /* A third `auto` track let the meta chips claim the width and squeezed the
     title to ~45px, so titles truncated mid-word under the chips. On a phone
     the meta belongs on its own line under the title instead. */
  .item{grid-template-columns:30px minmax(0,1fr);gap:4px 12px;padding:15px 10px}
  .item > .num{grid-column:1;grid-row:1}
  .item > :nth-child(2){grid-column:2;grid-row:1;min-width:0}
  .item .end{grid-column:2;grid-row:2;justify-content:flex-start;align-items:baseline;
    flex-direction:row;flex-wrap:wrap;gap:6px 12px;margin-top:7px;text-align:left}
  .item .end .meta{justify-content:flex-start;flex-wrap:wrap}
  .item .t{overflow-wrap:anywhere}
  .stats{gap:8px}
  .stat{padding:15px 15px 17px}
  .stat .k{min-height:2.5em;line-height:1.25}
  /* the 24px tile costs width the old 9px dot did not, and the post line was
     5.7px short of fitting. Smaller tile, tighter tracking, and it holds. */
  .top .mark span{font-size:9.5px;letter-spacing:.004em}
  .top .mark b{width:20px;height:20px;border-radius:6.4px}
  .top .mark{gap:9px}
  .sess summary{flex-wrap:wrap;gap:6px 12px}
  .sess .sd{width:auto;order:1}
  .sess .st{order:3;flex:1 0 100%}
  .sess summary .tag{order:2;margin-left:auto}
  .fc .s{padding:44px 24px 52px}
  .fc .tg,.fc .ft{left:24px;right:24px}
  .dots{right:24px}
}

/* ═══ signed out: the nav leads nowhere, so the gate stands alone ═══ */
/* hide the navigation, but never the way in */
body.locked .rail > a,
body.locked .rail .rail-sep,
body.locked .rail .rail-foot .lbl,
body.locked .rail .rail-foot .val,
body.locked .rail .rail-foot .sub,
body.locked .bar{display:none}
body.locked .rail-foot{margin-top:6px;border-top:0;padding-top:0}
body.locked .rail{justify-content:flex-start}
body.locked .app{padding-bottom:0}
body.locked main{padding-bottom:40px}

/* ═══ SSC CGL additions ═══ */
/* the section rail over a mock: done sections are spent, not revisitable */
.secbar{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.secbar span{font-size:12.5px;font-weight:600;letter-spacing:-.01em;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--paper-2);color:var(--ink-3)}
.secbar span.on{background:var(--accent-fill);color:var(--on-accent)}
.secbar span.gone{text-decoration:line-through;opacity:.7}

/* the score trend: one line, one cut-off, a faint grid */
.chart{background:var(--surface);background-image:var(--raise);border-radius:var(--r-m);
  box-shadow:var(--shadow-1);padding:14px 12px 8px;overflow-x:auto}
.chart svg{display:block;width:100%;min-width:320px;height:auto}
.chart .gl{stroke:var(--rule-2);stroke-width:1}
.chart .ax{fill:var(--ink-3);font-size:11px;font-family:var(--ui)}
.chart .cut{stroke:var(--no);stroke-width:1.5;stroke-dasharray:5 5}
.chart .cutl{fill:var(--no);font-weight:600}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--surface);stroke:var(--accent);stroke-width:2.5}
.plan{display:flex;flex-direction:column}

/* printed-page crops: they are black type on white paper, so they keep a
   paper sheet in both themes, exactly as note figures do in the IOCL site */
.qstem{margin:22px 0 20px}
.qstem .qtext{margin:0}
.qfig{margin:0 0 10px;background:var(--sheet);border-radius:var(--r-s);padding:12px 14px;
  box-shadow:var(--shadow-1);overflow-x:auto}
.qfig img{display:block;max-width:100%;height:auto;width:auto;max-height:520px}
.opt .oimg{display:block;max-width:100%;height:auto;max-height:180px;background:var(--sheet);
  border-radius:6px;padding:4px 6px}
.why .oimg{display:inline-block;max-width:100%;max-height:120px;background:var(--sheet);border-radius:6px;padding:4px 6px}
.passage p{font-size:15.5px;line-height:1.7;max-height:320px;overflow-y:auto}

/* ═══════════ learn: topic pages ═══════════
   A topic reads top to bottom in the order it is meant to be met: notes,
   formulas, method and traps, examples, a lesson, then its questions. The
   step numbers are that order, not decoration. */
.band-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.offic{margin-top:14px;max-width:72ch}
.offic summary{cursor:pointer;font-size:13.5px;font-weight:560;color:var(--accent);list-style:none;
  display:inline-flex;align-items:center;gap:6px}
.offic summary::-webkit-details-marker{display:none}
.offic summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--t-fast) var(--out)}
.offic[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.offic p{margin-top:10px;font-size:14.5px;line-height:1.62;color:var(--ink-3)}

.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.steps{display:flex;gap:6px;margin-top:24px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
.steps::-webkit-scrollbar{display:none}
.steps a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;
  border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-1);
  font-size:13.5px;font-weight:560;color:var(--ink-2);letter-spacing:-.01em;
  transition:transform var(--t-press) var(--out),color var(--t-fast) var(--out)}
.steps a:active{transform:scale(.97)}
@media(min-width:1024px){.steps{display:none}}   /* the aside carries the same list */
.sn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-wash);color:var(--accent);font-size:11.5px;font-weight:680;
  font-variant-numeric:tabular-nums;letter-spacing:0}
.sec-h .sn{width:30px;height:30px;font-size:14px;margin-right:12px;vertical-align:.14em}
.tstep{scroll-margin-top:72px}
.toc a .sn{width:20px;height:20px;font-size:10.5px}
.aside-note b{display:block;font-size:26px;font-weight:680;letter-spacing:-.035em;color:var(--ink);line-height:1.1}
.aside-note > span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:4px}

.notes{display:grid;gap:12px;margin-top:20px}
@media(min-width:1180px){.notes{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.note{padding:20px 22px 22px;border-radius:var(--r-m);background:var(--surface);
  background-image:var(--raise);box-shadow:var(--shadow-1)}
.note h3{font-size:17px;font-weight:650;letter-spacing:-.022em;color:var(--ink);line-height:1.3;
  text-wrap:balance;margin-bottom:10px}
.note h3 small{font-size:12px;font-weight:560;color:var(--faint);margin-left:6px;font-variant-numeric:tabular-nums}
.pts{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.pts li{font-size:15.5px;line-height:1.6;color:var(--ink-2);font-weight:420;letter-spacing:-.008em;max-width:70ch}
.pts li::marker{color:var(--accent);font-weight:650}
.note.trap{background:var(--no-wash);box-shadow:none}
.note.trap h3{color:var(--no)}
.note.trap li::marker{color:var(--no)}
.two{display:grid;gap:12px;margin-top:20px}
@media(min-width:900px){.two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}

.fx{margin-top:20px;border-radius:var(--r-m);background:var(--surface);background-image:var(--raise);
  box-shadow:var(--shadow-1);overflow:hidden}
.fx-r{display:grid;gap:5px;padding:14px 20px;border-bottom:1px solid var(--rule-2)}
.fx-r:last-child{border-bottom:0}
@media(min-width:900px){.fx-r{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:baseline}}
.fx-r code{font-family:var(--code);font-size:14px;line-height:1.55;color:var(--ink);font-weight:500;
  overflow-wrap:anywhere}
.fx-r span{font-size:14px;line-height:1.55;color:var(--ink-3)}

.exs{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.ex{border-radius:var(--r-m);background:var(--surface);background-image:var(--raise);box-shadow:var(--shadow-1)}
.ex summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;
  padding:17px 20px;align-items:baseline}
.ex summary::-webkit-details-marker{display:none}
.exn{font-size:12px;font-weight:650;color:var(--accent);font-variant-numeric:tabular-nums}
.exq{font-size:15.5px;line-height:1.55;color:var(--ink);font-weight:500;letter-spacing:-.01em}
.exq::after{content:"Show answer";display:block;margin-top:10px;font-size:13px;font-weight:580;color:var(--accent)}
.ex[open] .exq::after{content:"Hide answer"}
.exa{margin:0 20px 18px 62px;padding:14px 16px;border-radius:var(--r-s);background:var(--ok-wash)}
.exa b{display:block;color:var(--ok);font-size:15.5px;font-weight:650;letter-spacing:-.015em}
.exa p{margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
@media(max-width:600px){.exa{margin-left:20px}}
.ex[open] .exa{animation:riseIn 260ms var(--out) both}

.cta{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;
  padding:22px 24px;border-radius:var(--r-l);background:var(--surface);background-image:var(--raise);box-shadow:var(--shadow-2)}
.cta > div:first-child{min-width:0;flex:1 1 280px}
.cta b{display:block;font-size:21px;font-weight:680;letter-spacing:-.03em;color:var(--ink)}
.cta span{display:block;font-size:14.5px;color:var(--ink-3);margin-top:5px;line-height:1.5;max-width:52ch}
.cta-b{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lchk{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:540;color:var(--ink-2);cursor:pointer;
  padding:6px 4px;min-height:44px}
.lchk span{margin:0!important;display:inline!important;font-size:14px!important;color:var(--ink-2)!important}
.lchk input{width:20px;height:20px;accent-color:var(--accent-fill);margin:0}
.tnav{display:flex;justify-content:space-between;gap:10px;margin-top:40px;flex-wrap:wrap}

/* ═══ video: a still until pressed, then the player in the same box ═══ */
.vids{display:grid;gap:14px;margin-top:18px}
.vids.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.vid{margin:0;min-width:0;display:flex;flex-direction:column}
.vid-f,.vid-if{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-m);overflow:hidden;
  background:#0b0b0f;position:relative;box-shadow:var(--shadow-2)}
.vid-f{cursor:pointer;padding:0;transition:transform var(--t-press) var(--out)}
.vid-f:active{transform:scale(.985)}
.vid-f img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;
  transition:opacity var(--t-med) var(--out),transform 600ms var(--out)}
.vid-go{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(0,0,0,.35);
  transition:transform var(--t-med) var(--out)}
.vid-go svg{width:26px;height:26px;fill:#111;margin-left:4px}
.vid-pl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:16px 18px;color:#fff;text-align:left;
  background:radial-gradient(120% 90% at 85% 10%,var(--hero-b),transparent 60%),linear-gradient(135deg,var(--hero-a),#101018)}
.vid-pl b{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:650;opacity:.85}
.vid-pl span{font-size:15px;font-weight:600;margin-top:3px}
@media (hover:hover) and (pointer:fine){
  .vid-f:hover img{opacity:1;transform:scale(1.025)}
  .vid-f:hover .vid-go{transform:scale(1.07)}
}
.vid-f:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.vid figcaption{padding:12px 2px 0;display:flex;flex-direction:column;gap:3px}
.vid figcaption b{font-size:15.5px;font-weight:620;letter-spacing:-.018em;color:var(--ink);line-height:1.35}
.vid figcaption span{font-size:13px;color:var(--ink-3);line-height:1.5}
.vid .vid-why{font-size:13.5px;color:var(--ink-2)}
.vid.big{max-width:880px}
.vid.big figcaption b{font-size:17px}

/* ═══ library ═══ */
.item .num.pdf{font-size:10px;letter-spacing:.05em;color:var(--no);font-weight:700}
.reader{padding-top:clamp(22px,3vw,40px)}
.reader-h h1{font-size:clamp(24px,3vw,34px);font-weight:680;letter-spacing:-.032em;line-height:1.15;margin-top:10px;text-wrap:balance}
.reader-a{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 18px}
.pdfv{display:block;width:100%;height:calc(100dvh - 210px);min-height:480px;border:0;border-radius:var(--r-m);
  background:var(--surface);box-shadow:var(--shadow-2)}

/* ═══ current affairs: months as a segmented control ═══ */
.seg{display:flex;gap:2px;margin-top:24px;padding:3px;border-radius:var(--r-pill);background:var(--paper-2);
  width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg a{flex:0 0 auto;padding:8px 14px;border-radius:var(--r-pill);font-size:13.5px;font-weight:560;color:var(--ink-2);
  position:relative;transition:background var(--t-fast) var(--out),color var(--t-fast) var(--out)}
.seg a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.seg a.read::after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--ok-tint)}
.notes-link{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0 14px;font-size:13.5px;font-weight:580;color:var(--accent)}
.head + .tstep{margin-top:clamp(10px,1.6vw,22px)}
/* 2025 crops: printed size, horizontal scroll inside their own frame */
.qfig:has(img[data-k]){overflow-x:auto}
.qfig img[data-k]{max-width:none;max-height:none}
.opt .oimg[data-k]{max-width:100%;max-height:none;height:auto}
.opt > span:has(.oimg[data-k]){overflow-x:auto;min-width:0}
.asprint{margin:-6px 0 12px}
.asprint summary{cursor:pointer;font-size:13px;font-weight:560;color:var(--ink-3);list-style:none;display:inline-block;padding:4px 0}
.asprint summary::-webkit-details-marker{display:none}
.asprint summary::before{content:"+ ";color:var(--accent)}
.asprint[open] summary::before{content:"− "}
.asprint .qfig{margin-top:8px}
.seg-2 a{padding:8px 18px}

/* ═══════════ finding a topic ═══════════
   Sixty-three topics is too many to scroll for. A search that matches the
   words people actually type, section chips, and a "not learned" filter sit
   pinned under the header, so the list is always one tap from the answer. */
.conts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:4px}
.cont{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border-radius:var(--r-m);color:inherit;
  background:var(--surface);background-image:var(--raise);box-shadow:var(--shadow-1);
  transition:transform var(--t-press) var(--out)}
.cont:active{transform:scale(.985)}
.cont .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:620;color:var(--accent)}
.cont b{font-size:18px;font-weight:660;letter-spacing:-.022em;color:var(--ink)}
.cont span:last-child{font-size:13.5px;color:var(--ink-3)}
.cont.next{background:var(--accent-wash);box-shadow:none}

.finder{position:sticky;top:0;z-index:30;margin:18px calc(var(--pad) * -1) 0;padding:12px var(--pad);
  background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--rule-2);display:flex;flex-direction:column;gap:10px}
@media(max-width:1023px){.finder{top:61px}}
.fsearch{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:46px;border-radius:var(--r-s);
  background:var(--surface);box-shadow:var(--shadow-1);max-width:560px}
.fsearch svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.fsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px}
.fsearch:focus-within{box-shadow:0 0 0 3px var(--accent-line)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--rule);background:transparent;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:560;
  padding:7px 14px;border-radius:var(--r-pill);cursor:pointer;min-height:36px;
  transition:background var(--t-fast) var(--out),color var(--t-fast) var(--out),transform var(--t-press) var(--out)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fempty{margin-top:28px}
[hidden]{display:none!important}
.finder + .fempty + .band,.finder ~ .band:first-of-type{margin-top:26px}

/* ═══════════ studying a topic ═══════════
   Reading type, not interface type: bigger, looser, one column, and a size
   the reader controls (A− / A+). Focus hides everything but the page. */
:root{--rs:1}
.tbar{position:sticky;top:0;z-index:35;display:flex;align-items:center;gap:8px;
  margin:0 calc(var(--pad) * -1);padding:10px var(--pad);
  background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--rule-2)}
.tb-back{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);font-size:18px;
  background:var(--surface);box-shadow:var(--shadow-1);flex:0 0 auto}
.tb-sel{flex:1;min-width:0;max-width:420px}
.tb-sel select{width:100%;min-height:40px;border-radius:var(--r-pill);border:0;padding:0 34px 0 16px;
  background:var(--surface);box-shadow:var(--shadow-1);color:var(--ink);font:inherit;font-size:15px;font-weight:600;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.tb-r{display:flex;gap:6px;margin-left:auto}
.tb-b{min-width:40px;height:40px;padding:0 12px;border-radius:var(--r-pill);border:0;background:var(--surface);box-shadow:var(--shadow-1);
  color:var(--ink);font:inherit;font-size:14px;font-weight:620;cursor:pointer;transition:transform var(--t-press) var(--out)}
.tb-b:active{transform:scale(.95)}
.tb-b[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tb-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:600px){ .tb-b[data-rs]{display:none} .tb-sel{max-width:none} }

/* on a phone the topic bar replaces the site masthead while reading */
@media(max-width:1023px){ body.studying .top{display:none} }

.study{max-width:calc(72ch * var(--rs));}
.study .page-h{font-size:clamp(34px,5vw,56px)}
.study .lede{font-size:calc(19px * var(--rs));line-height:1.55;max-width:62ch}
.study .notes{grid-template-columns:1fr!important;gap:14px}
.study .note{padding:24px 26px 26px}
.study .note h3{font-size:calc(20px * var(--rs));margin-bottom:12px}
.study .pts{gap:11px;padding-left:22px}
.study .pts li{font-size:calc(17.5px * var(--rs));line-height:1.72;color:var(--ink);max-width:66ch}
.study .fx-r{padding:16px 22px}
@media(min-width:900px){ .study .fx-r{grid-template-columns:1fr} }
.study .fx-r code{font-size:calc(16px * var(--rs))}
.study .fx-r span{font-size:calc(15px * var(--rs))}
.study .two{grid-template-columns:1fr!important}
.study .exq{font-size:calc(17px * var(--rs));line-height:1.6}
.study .exa b{font-size:calc(17px * var(--rs))}
.study .exa p{font-size:calc(16px * var(--rs));line-height:1.65}
.study .cta span{font-size:calc(15px * var(--rs))}
@media(max-width:600px){
  .study .note{padding:20px 18px 22px}
  .study .pts li{font-size:calc(17px * var(--rs))}
}

/* focus: the page and nothing else */
body.focus .rail,body.focus .aside{display:none!important}
@media(min-width:1024px){
  body.focus .app,body.focus .app.has-aside{grid-template-columns:minmax(0,1fr)}
  body.focus main{max-width:calc(820px * var(--rs));margin-inline:auto;width:100%}
}
body.focus .bar{display:none}
.tb-aa{display:none}
@media(max-width:600px){ .tb-aa{display:block} }

/* ═══ analysis table ═══ */
.atbl{margin-top:18px;overflow-x:auto;border-radius:var(--r-m);background:var(--surface);background-image:var(--raise);box-shadow:var(--shadow-1)}
.atbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
.atbl td{padding:11px 14px;border-bottom:1px solid var(--rule-2);vertical-align:middle;color:var(--ink-2)}
.atbl tr:last-child td{border-bottom:0}
.atbl thead td{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink-3);background:var(--paper-2)}
.atbl td:first-child a{color:var(--ink);font-weight:600}
.atbl td:first-child span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;max-width:34ch;line-height:1.4}
.atbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.atbl .p{background:var(--accent-wash)}
.atbl .p b{font-size:17px;color:var(--ink)}
.tr{font-style:normal;font-size:10px;margin-left:5px}
.tr.up{color:var(--ok)} .tr.down{color:var(--no)}
.spark{width:88px;height:26px;display:block}
.spark polyline{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--accent)}
.note.ins summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.note.ins summary::-webkit-details-marker{display:none}
.note.ins summary h3{margin:0}
.note.ins summary::after{content:"+";font-size:20px;font-weight:500;color:var(--accent);flex:0 0 auto}
.note.ins[open] summary::after{content:"−"}
.note.ins[open] summary{margin-bottom:12px}
.study-ish .pts li{font-size:16px;line-height:1.65;color:var(--ink)}
a.chip{display:inline-flex;align-items:center}
@media(max-width:600px){
  .atbl table{min-width:0}
  .atbl .old{display:none}
  .atbl td{padding:10px 10px}
  .atbl td:first-child span{max-width:22ch}
  .spark{width:64px}
}

/* ═══════════ collapsible rail ═══════════
   The rail's own width animates (the grid track is `auto`, so the page
   follows it). Icons sit at the same x in both states, so nothing jumps:
   labels fade out first, then the rail narrows; widening reverses that. */
@media(min-width:1024px){
  .app{grid-template-columns:auto minmax(0,1fr)}
  .app.has-aside{grid-template-columns:auto minmax(0,1fr) var(--aside)}
  body.focus .app,body.focus .app.has-aside{grid-template-columns:minmax(0,1fr)}
  .rail{width:264px;transition:width 420ms cubic-bezier(.32,.72,0,1) 60ms;overflow-x:hidden}
  body.rail-mini .rail{width:84px;transition-delay:0ms}
}
.rail{padding-left:14px!important;padding-right:14px!important}
.rail > a{position:relative;white-space:nowrap;overflow:hidden;padding:10px 12px 10px 18px;gap:13px}
.rail .ri{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.rail > a.on .ri{opacity:1;stroke-width:1.9}
.rail .lb,.rail > a .n,.rail .mark > span,.rail-foot .lbl,.rail-foot .sub,#whoBox .nm,#whoBox .out,#whoBox .sync,#theme .lb{
  transition:opacity 160ms var(--out) 200ms}
body.rail-mini .rail .lb,body.rail-mini .rail > a .n,body.rail-mini .rail .mark > span,body.rail-mini .rail-foot .lbl,
body.rail-mini .rail-foot .sub,body.rail-mini #whoBox .nm,body.rail-mini #whoBox .out,body.rail-mini #whoBox .sync,body.rail-mini #theme .lb{
  opacity:0;pointer-events:none;transition-delay:0ms}
.rail .mark{padding:0 44px 20px 16px;white-space:nowrap}
.rail-toggle{position:absolute;top:24px;right:12px;width:34px;height:34px;border-radius:10px;border:0;background:transparent;
  color:var(--ink-3);cursor:pointer;display:grid;place-items:center;transition:background var(--t-fast) var(--out),color var(--t-fast) var(--out),top 420ms cubic-bezier(.32,.72,0,1),right 420ms cubic-bezier(.32,.72,0,1)}
.rail-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-toggle .chev{transition:transform 320ms cubic-bezier(.32,.72,0,1);transform-origin:14.8px 12px}
.rail-toggle:hover{background:var(--paper-2);color:var(--ink)}
.rail-foot{padding-left:4px!important;padding-right:0!important;white-space:nowrap}
.rail-foot .who{overflow:hidden}
#theme{justify-content:flex-start;overflow:hidden;white-space:nowrap}

/* collapsed: the mark stays put, the toggle drops beneath it, the footer
   becomes the avatar, the day count and the theme switch */
body.rail-mini .rail{overflow-y:auto;scrollbar-width:none}
body.rail-mini .rail::-webkit-scrollbar{display:none}
body.rail-mini .rail-toggle{top:66px;right:25px}
body.rail-mini .rail .mark{padding-bottom:62px}
body.rail-mini .rail-sep{margin:10px 10px}
body.rail-mini .rail-foot .val{font-size:20px;padding-left:12px}
body.rail-mini #whoBox .who{background:transparent;box-shadow:none;padding-left:13px}
body.rail-mini #theme{width:44px;padding:9px 0;justify-content:center;margin-left:8px}
body.rail-mini #theme .lb{width:0;overflow:hidden}
@media(max-height:820px){ body.rail-mini .rail > a{padding-top:8px;padding-bottom:8px} }

/* floating label for the collapsed rail: fixed, so the rail can scroll */
.rtip{position:fixed;z-index:200;pointer-events:none;padding:7px 11px;border-radius:9px;font-size:12.5px;font-weight:560;
  color:var(--paper);background:var(--ink);box-shadow:var(--shadow-2);white-space:nowrap;
  opacity:0;transform:translate(-4px,-50%) scale(.97);transform-origin:left center;transition:opacity 120ms var(--out),transform 160ms var(--out)}
.rtip.on{opacity:1;transform:translate(0,-50%) scale(1)}

/* ═══════════ section identity ═══════════
   Four sections, four of Apple's system colours: Reasoning blue, GA teal,
   Quant indigo, English orange. `--tc` is the text-safe shade, `--tf` the
   fill, `--tw` the wash. */
.t-r{--tc:#0062d6;--tf:#007aff;--tw:rgba(0,122,255,.12);--tg1:#007aff;--tg2:#5ac8fa}
.t-g{--tc:#0b7285;--tf:#30b0c7;--tw:rgba(48,176,199,.14);--tg1:#30b0c7;--tg2:#34c759}
.t-q{--tc:#4a48c4;--tf:#5856d6;--tw:rgba(88,86,214,.13);--tg1:#5856d6;--tg2:#af52de}
.t-e{--tc:#a85300;--tf:#ff9500;--tw:rgba(255,149,0,.14);--tg1:#ff9500;--tg2:#ff2d55}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .t-r{--tc:#64b0ff} :root:not([data-theme="light"]) .t-g{--tc:#5fd4e6}
  :root:not([data-theme="light"]) .t-q{--tc:#a5a3ff} :root:not([data-theme="light"]) .t-e{--tc:#ffb34d} }
:root[data-theme="dark"] .t-r{--tc:#64b0ff} :root[data-theme="dark"] .t-g{--tc:#5fd4e6}
:root[data-theme="dark"] .t-q{--tc:#a5a3ff} :root[data-theme="dark"] .t-e{--tc:#ffb34d}

/* mini ring */
.mring{display:block;transform:rotate(-90deg)}
.mring circle{fill:none;stroke-width:10;stroke-linecap:round}
.mring .mr-t{stroke:var(--rule-2)}
.mring .mr-a{stroke:url(#none);stroke:var(--tf,var(--accent));transition:stroke-dashoffset 900ms cubic-bezier(.16,1,.3,1)}
.mring.big .mr-a{stroke:var(--ring-1)}

/* ── Learn hub ── */
.lhero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:clamp(34px,5vw,64px) 0 clamp(20px,2.6vw,30px)}
.lh-ring{position:relative;width:168px;height:168px}
.lh-n{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.lh-n b{font-size:38px;font-weight:720;letter-spacing:-.04em;line-height:1}
.lh-n span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:4px}
@media(max-width:700px){ .lhero{grid-template-columns:1fr} .lh-ring{display:none} }

.stiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
@media(max-width:1180px){ .stiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stile{position:relative;overflow:hidden;text-align:left;border:0;cursor:pointer;font:inherit;color:#fff;
  display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;border-radius:var(--r-l);
  background:linear-gradient(140deg,var(--tg1),color-mix(in oklab,var(--tg1) 62%,#000));
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 14px 34px color-mix(in oklab,var(--tg1) 30%,transparent);
  transition:transform 380ms cubic-bezier(.32,.72,0,1),box-shadow 380ms cubic-bezier(.32,.72,0,1)}
.stile::before{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--tg2) 70%,transparent),transparent);opacity:.75;pointer-events:none}
.stile > *{position:relative}
.st-k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:680;opacity:.9}
.stile b{font-size:40px;font-weight:740;letter-spacing:-.04em;line-height:1.05}
.stile b small{font-size:20px;font-weight:600;opacity:.78}
.st-d{font-size:13px;opacity:.9;font-weight:520}
.st-bar{display:block;height:5px;border-radius:9px;background:rgba(255,255,255,.28);margin-top:8px;overflow:hidden}
.st-bar i{display:block;height:100%;background:#fff;border-radius:9px;transform:scaleX(var(--p));transform-origin:0 50%}
.stile.on{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--tg1),0 14px 34px color-mix(in oklab,var(--tg1) 30%,transparent)}
.stile:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .stile:hover{transform:translateY(-3px)} }

.lsec .sec-h{display:flex;align-items:center;gap:14px}
.sdot{display:block;width:14px;height:14px;border-radius:50%;background:var(--tf);box-shadow:0 0 0 5px var(--tw)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:12px;margin-top:20px}
.tcard{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;border-radius:var(--r-m);color:inherit;
  background:var(--surface);background-image:var(--raise);box-shadow:var(--shadow-1);position:relative;
  transition:transform 380ms cubic-bezier(.32,.72,0,1),box-shadow 380ms cubic-bezier(.32,.72,0,1)}
.tcard:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){ .tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)} }
.tc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.tc-w{font-size:12.5px;color:var(--ink-3);font-weight:560}
.tc-w b{font-size:15px;color:var(--tc);font-weight:720;font-variant-numeric:tabular-nums}
.tc-t{font-size:19px;font-weight:660;letter-spacing:-.022em;line-height:1.25;color:var(--ink)}
.tc-bar{display:block;height:6px;border-radius:9px;background:var(--tw);overflow:hidden}
.tc-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--tg1),var(--tg2));transform:scaleX(var(--p));transform-origin:0 50%}
.tc-d{font-size:13px;color:var(--ink-3);font-weight:500}
.tcard.done .tc-t::after{content:" ✓";color:var(--ok);font-weight:700}

/* ── topic page: full width, a hero in the section's colour ── */
.study{max-width:none!important}
.thero{position:relative;overflow:hidden;margin-top:clamp(18px,2.4vw,28px);padding:clamp(28px,3.6vw,48px);border-radius:28px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,48px);align-items:end;
  background:
    radial-gradient(60% 90% at 100% 0%,color-mix(in oklab,var(--tg2) 26%,transparent),transparent 70%),
    radial-gradient(70% 90% at 0% 100%,color-mix(in oklab,var(--tg1) 22%,transparent),transparent 70%),
    var(--surface);
  box-shadow:var(--shadow-2)}
.thero .page-h{font-size:clamp(40px,5.4vw,74px)}
.thero .kicker{color:var(--tc)}
.thero .lede{max-width:70ch}
.th-stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.th-s{min-width:150px;padding:16px 20px;border-radius:var(--r-m);background:color-mix(in oklab,var(--surface) 72%,transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 0 0 1px var(--rule-2),var(--shadow-1)}
.th-s b{display:block;font-size:32px;font-weight:740;letter-spacing:-.04em;color:var(--tc);line-height:1.05;font-variant-numeric:tabular-nums}
.th-s span{font-size:12.5px;color:var(--ink-3);font-weight:560}
.th-s.ring{display:flex;align-items:center;gap:14px}
.thero .steps{grid-column:1 / -1;display:flex!important;flex-wrap:wrap;margin-top:6px;-webkit-mask-image:none;overflow:visible}
.thero .steps a{background:color-mix(in oklab,var(--surface) 80%,transparent)}
.thero .sn,.study .sec-h .sn{background:var(--tw);color:var(--tc)}
@media(max-width:900px){ .thero{grid-template-columns:1fr} .th-stats{justify-content:flex-start} .th-s{min-width:0;flex:1 1 140px} }

/* notes flow in columns: full width, but every line stays a readable length */
.study .notes{display:block!important;columns:2 440px;column-gap:16px}
.study .notes > .note{break-inside:avoid;margin:0 0 16px;display:block}
.study .pts li::marker{color:var(--tf)}
.study .pts li{max-width:none}
.fxg{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:12px;margin-top:20px}
.fxc{display:flex;flex-direction:column;gap:10px;padding:20px 22px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1)}
.fxc code{font-family:var(--code);font-size:calc(16.5px * var(--rs));line-height:1.55;color:var(--ink);font-weight:500;overflow-wrap:anywhere;
  padding:12px 14px;border-radius:12px;background:var(--tw)}
.fxc span{font-size:calc(14.5px * var(--rs));line-height:1.55;color:var(--ink-2)}
.study .two{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))!important}
.study .exs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:12px;align-items:start}
.study .exn{color:var(--tc)}
.study .exq::after{color:var(--tc)}

/* ═══════════ current affairs ═══════════ */
.cahead{position:relative;overflow:hidden;margin:clamp(14px,2vw,24px) 0 0;padding:clamp(30px,4vw,56px) clamp(24px,3.4vw,48px) 86px;
  border-radius:30px;isolation:isolate;background:var(--surface);box-shadow:var(--shadow-2)}
.ca-mesh{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ca-mesh i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.55}
.ca-mesh i:nth-child(1){width:520px;height:520px;left:-120px;top:-180px;background:#007aff;animation:caDrift1 18s ease-in-out infinite alternate}
.ca-mesh i:nth-child(2){width:460px;height:460px;right:-80px;top:-120px;background:#af52de;opacity:.42;animation:caDrift2 22s ease-in-out infinite alternate}
.ca-mesh i:nth-child(3){width:420px;height:420px;left:38%;bottom:-260px;background:#30b0c7;opacity:.45;animation:caDrift3 20s ease-in-out infinite alternate}
@keyframes caDrift1{to{transform:translate(120px,60px) scale(1.12)}}
@keyframes caDrift2{to{transform:translate(-110px,70px) scale(.92)}}
@keyframes caDrift3{to{transform:translate(-80px,-50px) scale(1.1)}}
@media (prefers-reduced-motion:reduce){ .ca-mesh i{animation:none} }
.ca-ht{position:relative}
.cahead .lede{max-width:62ch;color:var(--ink-2)}

/* the glass selector: a frosted track, a solid pill that springs to the
   chosen item, and a lighter glass pill that chases the pointer */
.gseg{position:relative;display:flex;gap:2px;padding:5px;border-radius:999px;width:max-content;max-width:100%;
  overflow-x:auto;scrollbar-width:none;
  background:color-mix(in oklab,var(--surface) 46%,transparent);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,#fff 55%,transparent),inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px rgba(0,0,0,.08)}
.gseg::-webkit-scrollbar{display:none}
.gseg a{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:baseline;gap:5px;padding:10px 18px;border-radius:999px;
  font-size:15px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:color 200ms var(--out)}
.gseg a small{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.gseg a.on{color:var(--ink)}
.gseg a.done::after{content:"";position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--ok-tint)}
.gs-act,.gs-hov{position:absolute;z-index:1;left:0;top:5px;bottom:5px;border-radius:999px;pointer-events:none;will-change:transform,width}
.gs-act{background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.gs-hov{opacity:0;transition:opacity 220ms var(--out);
  background:color-mix(in oklab,#fff 38%,transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 4px 14px rgba(0,0,0,.06);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gseg.hovering .gs-hov{opacity:1}
.gseg.mode{margin-top:26px}
.gseg.mode a{padding:10px 22px}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .gs-act{background:#3a3a3c;box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)}
  :root:not([data-theme="light"]) .gs-hov{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} }
:root[data-theme="dark"] .gs-act{background:#3a3a3c;box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)}
:root[data-theme="dark"] .gs-hov{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* the month strip sits on the bottom edge of the header, so its glass has colour to blur */
.ca-sel{position:relative;z-index:3;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:-62px clamp(18px,3vw,40px) 0}
.ca-sel .gseg{box-shadow:inset 0 0 0 1px color-mix(in oklab,#fff 55%,transparent),inset 0 1px 0 rgba(255,255,255,.6),0 14px 40px rgba(0,0,0,.12)}
.ca-read{font-size:13px;font-weight:600;color:var(--ink-3)}

.ca-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
@media(max-width:900px){ .ca-top{grid-template-columns:1fr} }
.ca-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.catest{display:grid;grid-template-columns:auto auto;gap:4px 28px;align-items:end;padding:20px 24px;border-radius:var(--r-l);color:#fff;min-width:330px;
  background:radial-gradient(90% 120% at 100% 0%,#5856d6,transparent 60%),linear-gradient(135deg,#0062d6,#1d1d6b);
  box-shadow:0 16px 40px rgba(0,60,160,.28);transition:transform 380ms cubic-bezier(.32,.72,0,1)}
@media (hover:hover) and (pointer:fine){ .catest:hover{transform:translateY(-3px)} }
.catest:active{transform:scale(.985)}
.ct-k{grid-column:1/-1;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:680;opacity:.85}
.catest b{grid-column:1/-1;font-size:28px;font-weight:720;letter-spacing:-.03em}
.ct-d,.ct-s{font-size:13.5px;opacity:.88}
.ct-s{grid-column:1}
.ct-go{grid-column:2;grid-row:3/5;align-self:center;justify-self:end;display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.18);font-weight:650;font-size:14.5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

.cachips{margin-top:26px;flex-wrap:wrap;overflow:visible}
.chip small{opacity:.6;font-weight:600;margin-left:2px}
.cagrid{columns:3 360px;column-gap:14px;margin-top:18px}
.cacard{break-inside:avoid;display:block;margin:0 0 14px;padding:20px 22px 22px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1)}
.cc-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cc-i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--tw);font-size:18px;color:var(--tc);font-weight:700}
.cc-h h3{font-size:17px;font-weight:680;letter-spacing:-.02em;flex:1}
.cc-h small{font-size:12px;font-weight:650;color:var(--tc);background:var(--tw);padding:3px 9px;border-radius:999px}
.cc-l{list-style:none;display:flex;flex-direction:column}
.cc-l li{font-size:15.5px;line-height:1.62;color:var(--ink);padding:10px 0;border-top:1px solid var(--rule-2)}
.cc-l li:first-child{border-top:0;padding-top:2px}
.cc-l li b{font-weight:680;color:var(--tc)}
.stiles + .conts{margin-top:14px}
.thero + .tstep{margin-top:clamp(26px,3vw,40px)}
.cc-l{padding:0;margin:0} .cc-l li{list-style:none}
.cahead .kicker{color:var(--ink);opacity:.72}
.gseg a,.gseg a:hover,.stile,.tcard,.tcard:hover,.catest,.catest:hover{text-decoration:none}

/* ═══════════ calm pass ═══════════
   One accent (system blue) for everything interactive; section colour
   survives only as a small dot. Surfaces are white, type is ink. */
.stile{color:var(--ink);background:var(--surface);background-image:var(--raise);box-shadow:var(--shadow-1);border-radius:var(--r-m)}
.stile::before{display:none}
.st-k{display:flex;align-items:center;gap:8px;color:var(--ink-3);opacity:1}
.st-k::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tf)}
.stile b small{color:var(--ink-3);opacity:1}
.st-d{color:var(--ink-3);opacity:1}
.st-bar{background:var(--rule-2)}
.st-bar i{background:var(--accent)}
.stile.on{box-shadow:0 0 0 2px var(--accent),var(--shadow-1)}
.tc-w b{color:var(--ink)}
.tc-bar{background:var(--rule-2)}
.tc-bar i{background:var(--accent)}
.sdot{box-shadow:none;width:11px;height:11px}
.lh-ring .mr-a,.mring.big .mr-a{stroke:var(--accent)}

.thero{background:var(--surface);background-image:radial-gradient(70% 120% at 100% 0%,var(--accent-wash),transparent 60%);box-shadow:var(--shadow-1)}
.thero .kicker{color:var(--accent)}
.th-s{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.th-s b{color:var(--ink)}
.mring .mr-a{stroke:var(--accent)}
.thero .sn,.study .sec-h .sn{background:var(--accent-wash);color:var(--accent)}
.study .pts li::marker{color:var(--accent)}
.study .exn,.study .exq::after{color:var(--accent)}
.fxc code{background:var(--paper)}

/* notes: an even two-column grid. Cards in a row share a height; an odd
   last card takes the full width, so the page always closes square. */
.study .notes{display:grid!important;columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.study .notes > .note{margin:0;height:100%}
.study .notes > .note:last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:1100px){ .study .notes{grid-template-columns:1fr} }
.study .two{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch}
.study .two > .note{height:100%}
.study .two > .note:only-child{grid-column:1 / -1}
@media(max-width:1100px){ .study .two{grid-template-columns:1fr!important} }
.fxg{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.fxg .fxc:last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:1100px){ .fxg{grid-template-columns:1fr} }
.study .exs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media(max-width:1100px){ .study .exs{grid-template-columns:1fr} }
.study .note h3{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--rule-2)}

/* current affairs, calmer */
.ca-mesh i{opacity:.28!important;filter:blur(80px)}
.ca-mesh i:nth-child(2){background:#5856d6}
.ca-mesh i:nth-child(3){background:#5ac8fa}
.cc-i{display:none}
.cc-h{gap:10px}
.cc-h::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tf);flex:0 0 auto}
.cc-h small{color:var(--ink-3);background:var(--paper-2)}
.cc-l li b{color:var(--ink);font-weight:700}
.catest{background:var(--ink);box-shadow:var(--shadow-2)}
.catest,.catest *{color:var(--paper)}
.cagrid{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.cacard{margin:0}
@media(max-width:1300px){ .cagrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:760px){ .cagrid{grid-template-columns:1fr} }
.cagrid{display:block;columns:3 340px;column-gap:14px}
.cacard{margin:0 0 14px}

/* ═══════════ dropdown ═══════════ */
.dd{position:relative;min-width:0}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;padding:0 14px 0 16px;
  border:0;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--rule-2);
  color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:left;
  transition:box-shadow var(--t-fast) var(--out),transform var(--t-press) var(--out)}
.dd-btn:active{transform:scale(.985)}
.dd-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 260ms cubic-bezier(.32,.72,0,1)}
.dd.open .dd-btn{box-shadow:0 0 0 3px var(--accent-line),var(--shadow-1)}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-pop{position:absolute;z-index:120;top:calc(100% + 8px);left:0;min-width:max(100%,300px);max-width:min(420px,calc(100vw - 32px));
  max-height:min(460px,60vh);display:flex;flex-direction:column;padding:6px;border-radius:16px;
  background:color-mix(in oklab,var(--surface) 88%,transparent);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 0 0 1px var(--rule-2),0 18px 50px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top left;
  transition:opacity 160ms var(--out),transform 220ms cubic-bezier(.32,.72,0,1),visibility 0s linear 220ms}
.dd.up .dd-pop{top:auto;bottom:calc(100% + 8px);transform-origin:bottom left;transform:translateY(6px) scale(.97)}
.dd.open .dd-pop{opacity:1;visibility:visible;transform:none;transition:opacity 140ms var(--out),transform 240ms cubic-bezier(.32,.72,0,1),visibility 0s}
.dd-s{display:flex;align-items:center;gap:8px;margin:2px 2px 6px;padding:0 12px;min-height:40px;border-radius:11px;background:var(--paper-2)}
.dd-s svg{width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;flex:0 0 auto}
.dd-q{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:15px}
.dd-list{overflow-y:auto;overscroll-behavior:contain}
.dd-g{padding:12px 12px 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:620;color:var(--ink-3)}
.dd-o{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:10px;
  background:transparent;color:var(--ink);font:inherit;font-size:14.5px;font-weight:520;text-align:left;cursor:pointer}
.dd-o:hover,.dd-o:focus-visible{background:var(--accent-wash);outline:0}
.dd-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-sub{font-size:12px;color:var(--ink-3);font-weight:500;white-space:nowrap}
.dd-ck{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.dd-o.on{color:var(--accent);font-weight:640}
.dd-o.on .dd-ck{opacity:1}
.dd-none{padding:16px 12px;font-size:14px;color:var(--ink-3)}
.tb-dd{flex:1;min-width:0;max-width:440px}
.tb-dd .dd-pop{min-width:max(100%,360px)}
.pickwrap .dd{width:100%}
@media (prefers-reduced-motion:reduce){ .dd-pop,.dd-btn svg{transition:none} }
.dd-pop{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.study .notes{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media(max-width:1100px){ .study .notes{grid-template-columns:1fr!important} }
/* hero: one column; the intro gets the full measure, stats sit in a row under it */
.thero{grid-template-columns:1fr;align-items:start;gap:26px}
.thero .lede{max-width:78ch}
.th-stats{justify-content:flex-start}
.th-s{min-width:170px}
.th-stats{align-items:stretch}
.th-s{display:flex;flex-direction:column;justify-content:center;min-height:96px}
.th-s.ring{flex-direction:row;justify-content:flex-start}
.th-s.ring .mring{width:62px;height:62px}
.thero .steps{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;padding:2px}
.thero .steps::-webkit-scrollbar{display:none}
.thero .steps a{padding:7px 14px 7px 7px;font-size:13.5px}
.dd-pop{display:none;max-width:calc(100vw - 24px)}
.dd.show .dd-pop{display:flex}
@media(max-width:600px){ .tb-dd .dd-pop,.dd-pop{min-width:min(340px,calc(100vw - 24px))} }

/* ═══════════ phone pass ═══════════ */
@media(max-width:600px){
  .thero{padding:22px 18px 20px;border-radius:22px;gap:18px}
  .thero .page-h{font-size:40px}
  .thero .lede{font-size:calc(16.5px * var(--rs))}
  .th-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .th-s{min-width:0;min-height:0;padding:12px 14px}
  .th-s b{font-size:24px}
  .th-s span{font-size:11.5px}
  .th-s.ring{grid-column:1 / -1;gap:12px}
  .th-s.ring .mring{width:44px;height:44px}
  .study .sec-h{font-size:24px}
  .study .note{padding:18px 16px 18px}
  .study .note h3{font-size:calc(17.5px * var(--rs))}
  .fxc{padding:16px}
  .lhero{padding-top:26px}
  .stile{padding:16px 16px 18px}
  .stile b{font-size:30px}
  .st-d{font-size:12px}
  .tgrid{grid-template-columns:1fr 1fr;gap:8px}
  .tcard{padding:14px 14px 16px;gap:8px}
  .tc-t{font-size:16px}
  .tc-d{font-size:12px}
  .cahead{padding:24px 18px 76px;border-radius:22px}
  .ca-sel{margin:-58px 10px 0}
  .gseg a{padding:9px 14px;font-size:14px}
  .catest{min-width:0}
  .cc-l li{font-size:15px}
  .atbl td:first-child a{font-size:14px}
}
@media(max-width:360px){ .tgrid{grid-template-columns:1fr} }
.swipe{display:flex;align-items:center;gap:6px;margin:-4px 0 12px;font-size:12.5px;font-weight:560;color:var(--ink-3)}
.swipe::after{content:"→";color:var(--accent);font-weight:700}

/* ═══════════ public: header and signed-out layout ═══════════ */
.pubnav{display:none}
body.locked .pubnav{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;padding:12px max(var(--pad),calc((100vw - 1180px)/2));
  background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--rule-2)}
.pn-b{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink);margin-right:auto}
.pn-b b{width:28px;height:28px;border-radius:8px;background:linear-gradient(155deg,var(--ring-1),var(--accent-2));display:block}
.pn-b b svg{width:100%;height:100%;display:block}
.pn-l{display:flex;gap:4px;margin-right:6px}
.pn-l a{padding:8px 12px;border-radius:999px;font-size:14px;font-weight:560;color:var(--ink-2)}
.pn-l a:hover{background:var(--paper-2);color:var(--ink)}
@media(max-width:600px){ .pn-l{display:none} body.locked .pubnav{padding:10px 16px} }
body.locked .rail,body.locked .top,body.locked .bar{display:none!important}
@media(min-width:1024px){ body.locked .app,body.locked .app.has-aside{grid-template-columns:minmax(0,1fr)} }
body.locked main{max-width:1180px;margin-inline:auto;width:100%}

/* ═══════════ landing ═══════════ */
.lhero2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(40px,6vw,88px) 0 clamp(26px,3vw,40px)}
@media(max-width:900px){ .lhero2{grid-template-columns:1fr} }
.l2-h{font-size:clamp(38px,5.2vw,68px);font-weight:720;letter-spacing:-.045em;line-height:1.02;margin-top:14px;text-wrap:balance}
.lhero2 .lede{max-width:56ch}
.l2-b{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.btn.big{min-height:52px;padding:0 26px;font-size:16px}
.l2-f{margin-top:14px;font-size:14px;color:var(--ink-3)}
.l2-f a{color:var(--accent);font-weight:600}
.l2-v{position:relative;min-height:420px}
.l2-q,.l2-n,.l2-c{position:absolute;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-3)}
.l2-q{left:0;right:12%;top:0;padding:22px 22px 18px;animation:l2in 700ms var(--out) both}
.l2-qm{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:620;color:var(--ink-3);margin-bottom:8px}
.l2-q p{font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.012em;margin-bottom:14px}
.l2-o{padding:10px 14px;border-radius:12px;background:var(--paper);font-size:14.5px;font-weight:540;margin-top:8px;border:1.5px solid transparent}
.l2-o.ok{background:var(--ok-wash);border-color:var(--ok-tint);color:var(--ok);font-weight:650}
.l2-n{right:0;left:30%;top:268px;padding:18px 20px;animation:l2in 700ms var(--out) 160ms both}
.l2-n p{font-size:15.5px;line-height:1.5}
.l2-n b{color:var(--accent)}
.l2-c{left:4%;top:330px;padding:14px 18px;display:flex;flex-direction:column;gap:2px;animation:l2in 700ms var(--out) 300ms both;background:var(--ink);color:var(--paper)}
.l2-c b{font-family:var(--code);font-size:26px;font-weight:600}
.l2-c span{font-size:12px;opacity:.75}
@keyframes l2in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:900px){ .l2-v{min-height:430px;max-width:520px} }
@media (prefers-reduced-motion:reduce){ .l2-q,.l2-n,.l2-c{animation:none} }
.l2-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border-radius:var(--r-l);overflow:hidden;background:var(--rule-2);box-shadow:var(--shadow-1)}
.l2-stats > div{background:var(--surface);padding:22px 24px}
.l2-stats b{display:block;font-size:clamp(26px,3vw,36px);font-weight:720;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.l2-stats span{font-size:13.5px;color:var(--ink-3)}
@media(max-width:700px){ .l2-stats{grid-template-columns:1fr 1fr} }
.l2-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
@media(max-width:1000px){ .l2-feat{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .l2-feat{grid-template-columns:1fr} }
.l2-fc{padding:24px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1)}
.l2-fn{font-size:12px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.l2-fc h3{font-size:19px;font-weight:660;letter-spacing:-.02em;margin:10px 0 8px}
.l2-fc p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.l2-price{display:grid;grid-template-columns:1fr 1.3fr;gap:14px;margin-top:22px}
@media(max-width:700px){ .l2-price{grid-template-columns:1fr} }
.l2-price > div{padding:24px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.l2-price b{font-size:32px;font-weight:720;letter-spacing:-.04em}
.l2-price b small{font-size:15px;font-weight:560;color:var(--ink-3);letter-spacing:0}
.l2-price span{color:var(--ink-2);font-size:15px;line-height:1.55}
.l2-price .pro{box-shadow:0 0 0 2px var(--accent),var(--shadow-2)}
.l2-price .btn{margin-top:8px}
.l2-faq{display:flex;flex-direction:column;gap:10px;margin-top:20px;max-width:820px}
.l2-qa{padding:16px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1);margin:0;max-width:none}
.l2-qa summary{color:var(--ink);font-size:16px;font-weight:620;display:flex;justify-content:space-between;width:100%}
.l2-qa p{font-size:15px}

/* ═══════════ first sign-in ═══════════ */
.welcome{max-width:720px;padding:clamp(34px,5vw,64px) 0}
.wf{margin-top:30px;padding:28px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:12px}
.wl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:640;color:var(--ink-3);margin-top:8px}
.wl small{text-transform:none;letter-spacing:0;font-weight:500;margin-left:6px}
.wdate{font:inherit;font-size:18px;font-weight:600;color:var(--ink);padding:12px 16px;border-radius:14px;border:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);max-width:280px;color-scheme:light dark}
.wdate:focus{outline:0;box-shadow:0 0 0 3px var(--accent-line)}
.hopts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(max-width:600px){ .hopts{grid-template-columns:1fr 1fr} .wf{padding:20px} }
.hopt{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule-2);font:inherit;color:var(--ink);cursor:pointer;text-align:left;transition:box-shadow var(--t-fast) var(--out),transform var(--t-press) var(--out)}
.hopt b{font-size:20px;font-weight:720;letter-spacing:-.03em}
.hopt span{font-size:12.5px;color:var(--ink-3)}
.hopt.on{box-shadow:0 0 0 2px var(--accent);background:var(--accent-wash)}
.hopt:active{transform:scale(.98)}
.wf .go{margin-top:14px;align-self:flex-start}

/* ═══════════ premium ═══════════ */
.prhead{padding:clamp(34px,5vw,64px) 0 clamp(22px,3vw,34px);max-width:800px}
.prgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:stretch}
@media(max-width:860px){ .prgrid{grid-template-columns:1fr} }
.prcard{display:flex;flex-direction:column;gap:6px;padding:28px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-1)}
.prcard.pro{box-shadow:0 0 0 2px var(--accent),var(--shadow-3)}
.pr-k{font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:680;color:var(--ink-3)}
.prcard.pro .pr-k{color:var(--accent)}
.pr-p{font-size:52px;font-weight:740;letter-spacing:-.05em;line-height:1.05}
.pr-d{font-size:14px;color:var(--ink-3)}
.pr-l{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column}
.pr-l li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--rule-2);font-size:14.5px;color:var(--ink-2)}
.pr-l em{font-style:normal;font-weight:650;color:var(--ink);text-align:right;white-space:nowrap}
.prcard .btn{align-self:stretch;justify-content:center}
.pr-f{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.pr-f a{color:var(--accent)}
.paymsg{margin-top:10px}
.okm{padding:12px 14px;border-radius:12px;background:var(--accent-wash);color:var(--ink);font-size:14px}

/* locks and prompts */
.lk{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-2px}
.tag.lock{display:inline-flex;align-items:center;gap:5px;background:var(--paper-2);color:var(--ink-2);border-color:transparent}
.tcard.locked .tc-t,.item.locked .t{color:var(--ink-2)}
.tcard.locked .tc-bar i{background:var(--ink-3);opacity:.5}
.gseg a .lk{width:12px;height:12px;margin-right:3px;opacity:.7}
.btn .lk{margin-right:2px}
.upsell{margin:26px 0;padding:clamp(26px,4vw,40px);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-2);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.us-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--accent-wash);color:var(--accent)}
.us-ic .lk{width:24px;height:24px}
.upsell h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.upsell p{max-width:52ch;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.us-b{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.freebar{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 16px;border-radius:14px;background:var(--accent-wash);color:var(--ink);font-size:14px}
.freebar span{flex:1}
.freebar b{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:650;white-space:nowrap}
.rail > a.is-prem{color:var(--accent)}

/* ═══════════ admin ═══════════ */
.adstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:700px){ .adstats{grid-template-columns:1fr 1fr} }
.ads{padding:18px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1)}
.ads b{display:block;font-size:30px;font-weight:720;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ads span{font-size:13px;color:var(--ink-3)}
.adbar{display:flex;gap:10px;align-items:center;margin:22px 0 14px}
.adbar .fsearch{flex:1}
.adlist{display:flex;flex-direction:column;gap:10px}
.adrow{padding:18px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:14px}
.ad-id{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ad-id .av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700}
.ad-id > div{flex:1;min-width:180px}
.ad-id b{display:block;font-size:16.5px;font-weight:660}
.ad-id div span{font-size:12.5px;color:var(--ink-3)}
.ad-st{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
@media(max-width:800px){ .ad-st{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ad-st span{padding:10px 12px;border-radius:12px;background:var(--paper);font-size:11.5px;color:var(--ink-3);display:flex;flex-direction:column}
.ad-st b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.ad-act{display:flex;gap:8px;flex-wrap:wrap}
.btn.danger{color:var(--no)}

/* ═══════════ legal + footer ═══════════ */
.legal{max-width:760px;display:flex;flex-direction:column;gap:22px}
.legal h2{font-size:19px;font-weight:660;letter-spacing:-.02em;margin-bottom:6px}
.legal p{font-size:16px;line-height:1.7;color:var(--ink-2)}
.l2-legalnav,.footnav{display:flex;gap:6px;flex-wrap:wrap;margin-top:30px}
.l2-legalnav a,.footnav a{padding:7px 12px;border-radius:999px;font-size:13.5px;color:var(--ink-2);background:var(--paper-2)}
.l2-legalnav a.on{background:var(--ink);color:var(--paper)}
.footnav{margin:0 0 14px}
.footnav a{background:transparent;padding:4px 10px 4px 0}
.l2-v{min-height:500px}
.l2-q{right:10%}
.l2-n{top:318px;left:22%;right:0}
.l2-c{top:auto;bottom:0;left:0}
@media(max-width:900px){ .l2-v{min-height:520px} }
.pdfwrap{position:relative}
.pdfskel{position:absolute;inset:0;border-radius:var(--r-m)}
/* the compass mark tile: one gradient, used wherever the brand appears */
.mark b,.pn-b b,.mark-tile{background:linear-gradient(145deg,#168bff,#0a4fb0);box-shadow:0 1px 3px rgba(10,79,176,.3),inset 0 1px 0 rgba(255,255,255,.3)}

/* ═══ CGL Compass: sign-in and hero stage ═══
   Form on the left, a lit compass on the right. On a phone the compass
   comes first but stays short, so the form is still in reach of a thumb. */
.gate2{min-height:max(580px,calc(100dvh - 118px));display:grid;gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:center;padding:clamp(20px,3vw,40px) 0 48px;
  max-width:1080px;margin-inline:auto}
.g2-form{width:100%;max-width:400px}
.g2-form h1{font-size:clamp(34px,4.2vw,48px);letter-spacing:-.045em;line-height:1.02;font-weight:700;margin:14px 0 0}
.g2-form .sub{color:var(--ink-3);font-size:15.5px;line-height:1.55;margin-top:14px;font-weight:420;max-width:40ch}
.g2-form .kicker{color:var(--accent)}
.g2-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:26px;padding:4px;
  border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--rule)}
.g2-seg button{position:relative;z-index:1;min-height:40px;border-radius:9px;font-size:14.5px;font-weight:560;
  color:var(--ink-3);transition:color 180ms ease}
.g2-seg button[aria-selected="true"]{color:var(--ink)}
.g2-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.g2-seg i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;
  background:var(--surface);box-shadow:var(--shadow-1),0 0 0 1px var(--rule);
  transition:transform 260ms cubic-bezier(.23,1,.32,1)}
.g2-seg button[data-gm="up"][aria-selected="true"] ~ i{transform:translateX(100%)}
.g2-form .field{margin-top:16px}
.g2-form .go{width:100%;margin-top:22px}
.g2-form .go:active{transform:scale(.98)}
.g2-form .fine{margin-top:22px;font-size:12.5px;line-height:1.6;color:var(--faint);font-weight:420}
.g2-form .fine a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.g2-form .err{margin-top:16px;padding:12px 14px;border-radius:var(--r-s);background:var(--no-wash);
  border:1px solid var(--no);color:var(--no);font-size:14.5px;line-height:1.45;font-weight:480}

.g2-stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:540px;
  border-radius:var(--r-l);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 38%,var(--surface) 0%,var(--paper-2) 70%);
  box-shadow:inset 0 0 0 1px var(--rule)}
.g2-art{position:relative;min-height:0}
.g2-svg,.g2-gl{position:absolute;inset:0;width:100%;height:100%}
.g2-svg{padding:12%;transition:opacity 420ms ease}
.g2-gl{opacity:0;transition:opacity 520ms ease}
.g2-stage.live .g2-gl{opacity:1}
.g2-stage.live .g2-svg{opacity:0}
.g2-svg .bz{fill:var(--rule-2);stroke:var(--rule);stroke-width:1}
.g2-svg .fc{fill:var(--surface)}
.g2-svg line{stroke-linecap:round}
.g2-svg .tq{stroke:var(--accent);stroke-width:2.4}
.g2-svg .tm{stroke:var(--ink);stroke-width:1.6}
.g2-svg .tn{stroke:var(--faint);stroke-width:.9}
.g2-svg .nn{fill:var(--accent)} .g2-svg .ns{fill:var(--ink-3)} .g2-svg .hub{fill:var(--ink-2)}
.g2-cap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
  padding:18px clamp(20px,2.6vw,28px) 22px;border-top:1px solid var(--rule)}
.g2-cap b{font-size:clamp(40px,4.6vw,56px);font-weight:700;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.g2-cap span{font-size:14px;line-height:1.5;color:var(--ink-3);font-weight:440;max-width:38ch}
.g2-stage.small{min-height:460px}
@media(max-width:900px){
  .gate2{grid-template-columns:1fr;min-height:0;padding-top:8px}
  .gate2 .g2-stage{order:-1;min-height:330px}
  .g2-form{margin-inline:auto}
  .lhero2 .g2-stage{min-height:380px}
}
@media(max-width:430px){
  .gate2 .g2-stage{min-height:290px}
  .g2-cap{gap:12px;padding:14px 18px 16px}
  .g2-cap span{font-size:13px}
}
@media(prefers-reduced-transparency:reduce){ .g2-stage{background:var(--surface)} }

/* ═══ public pages: full width ═══
   The front door used to sit in a 1,180 px column, which left a laptop
   screen a third empty. Public pages now run to 1,440 px with a gutter
   that grows with the window, and the nav lines up with the same edges. */
:root{--wide:1440px;--gut:clamp(16px,4.2vw,64px)}
body.locked main{max-width:calc(var(--wide) + 2 * var(--gut));padding-inline:var(--gut)}
body.locked .pubnav{padding:12px max(var(--gut),calc((100vw - var(--wide)) / 2))}
.pn-w{display:flex;flex-direction:column;line-height:1.1}
.pn-w small{font-size:11.5px;font-weight:520;color:var(--ink-3);letter-spacing:0;margin-top:2px}
@media(max-width:420px){ .pn-w small{display:none} }

.lp-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,96px);align-items:center;
  min-height:min(820px,calc(100dvh - 64px));padding:clamp(32px,5vw,72px) 0}
.lp-h{font-size:clamp(42px,5.6vw,92px);font-weight:720;letter-spacing:-.05em;line-height:.98;margin-top:18px;text-wrap:balance}
.lp-lede{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--ink-2);margin-top:24px;max-width:46ch}
.lp-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.lp-cta .btn:active,.lp-tiers .btn:active{transform:scale(.98)}
.lp-fine{margin-top:16px;font-size:14px;color:var(--ink-3)}
.lp-fine a{color:var(--accent);font-weight:600}
.lp-hero .g2-stage{min-height:clamp(440px,44vw,640px)}
@media(max-width:960px){
  .lp-hero{grid-template-columns:1fr;min-height:0}
  .lp-hero .g2-stage{min-height:380px}
}

.lp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lp-stats > div{padding:clamp(20px,2.4vw,34px) clamp(4px,1.4vw,24px) clamp(20px,2.4vw,34px) 0}
.lp-stats > div + div{border-left:1px solid var(--rule);padding-left:clamp(16px,2vw,32px)}
.lp-stats b{display:block;font-size:clamp(30px,3.4vw,52px);font-weight:720;letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1}
.lp-stats span{display:block;margin-top:8px;font-size:14px;color:var(--ink-3)}
@media(max-width:760px){
  .lp-stats{grid-template-columns:1fr 1fr}
  .lp-stats > div:nth-child(3){border-left:0;padding-left:0}
  .lp-stats > div:nth-child(n+3){border-top:1px solid var(--rule)}
}

.lp-h2{font-size:clamp(30px,3.4vw,52px);font-weight:700;letter-spacing:-.042em;line-height:1.04;margin-top:12px;text-wrap:balance;max-width:20ch}
.lp-plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:center;padding:clamp(64px,8vw,128px) 0}
.lp-steps{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:26px}
.lp-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px}
.lp-steps li > span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:680;font-size:15px;
  color:var(--accent);background:var(--accent-wash)}
.lp-steps h3{font-size:19px;font-weight:650;letter-spacing:-.02em;margin-top:8px}
.lp-steps p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-top:6px;max-width:52ch}

.lp-day{border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-3),0 0 0 1px var(--rule);padding:clamp(18px,2vw,28px)}
.lp-dh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.lp-dh span{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:620;color:var(--ink-3)}
.lp-dh b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;margin-top:4px}
.lp-dh em{font-style:normal;font-size:13px;font-weight:600;color:var(--accent);background:var(--accent-wash);padding:6px 10px;border-radius:999px;white-space:nowrap}
.lp-day ul{list-style:none;margin:0;padding:0}
.lp-day li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--rule)}
.lp-day li:last-child{border-bottom:0}
.lp-day li i{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.lp-day li.done i{background:var(--accent);box-shadow:none;position:relative}
.lp-day li.done i::after{content:"";position:absolute;left:7px;top:3.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lp-day li.done b{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--rule-2)}
.lp-sec{display:block;font-size:11.5px;font-weight:620;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.lp-day b{display:block;font-size:15.5px;font-weight:620;letter-spacing:-.012em;margin-top:2px}
.lp-day small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.lp-day time{font-size:13.5px;font-weight:560;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-dbar{height:6px;border-radius:999px;background:var(--paper-2);margin-top:14px;overflow:hidden}
.lp-dbar span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
@media(max-width:960px){ .lp-plan{grid-template-columns:1fr} }

.lp-band{padding:clamp(56px,7vw,112px) 0;border-top:1px solid var(--rule)}
.lp-bh{margin-bottom:clamp(28px,3vw,44px)}
.lp-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.lp-bento article{grid-column:span 4;padding:clamp(22px,2.2vw,32px);border-radius:var(--r-l);background:var(--surface);box-shadow:0 0 0 1px var(--rule);
  display:flex;flex-direction:column;gap:10px}
.lp-bento .b-notes{grid-column:span 7;grid-row:span 2}
.lp-bento .b-mock{grid-column:span 5}
.lp-bento .b-mock + article{grid-column:span 5}
.lp-bento h3{font-size:clamp(19px,1.5vw,24px);font-weight:660;letter-spacing:-.025em}
.lp-bento p{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:54ch}
.b-snip{margin-top:auto;padding:20px 22px;border-radius:var(--r-m);background:var(--paper-2)}
.b-snip span{font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:620;color:var(--ink-3)}
.b-snip p{font-size:clamp(17px,1.5vw,22px);color:var(--ink);margin-top:8px;font-weight:540}
.b-snip b{color:var(--accent)}
.b-timer{margin-top:auto;display:flex;align-items:baseline;gap:12px}
.b-timer b{font-family:var(--code);font-size:34px;font-weight:600;letter-spacing:-.02em}
.b-timer span{font-size:13px;color:var(--ink-3)}
@media(max-width:960px){
  .lp-bento article,.lp-bento .b-notes,.lp-bento .b-mock,.lp-bento .b-mock + article{grid-column:span 6;grid-row:auto}
  .lp-bento .b-notes{grid-column:span 12}
}
@media(max-width:600px){ .lp-bento article,.lp-bento .b-mock,.lp-bento .b-mock + article{grid-column:span 12} }

.lp-tiers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px}
.lp-tiers > div{padding:clamp(24px,2.6vw,36px);border-radius:var(--r-l);background:var(--surface);box-shadow:0 0 0 1px var(--rule);
  display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.lp-tiers b{font-size:clamp(30px,3vw,44px);font-weight:720;letter-spacing:-.045em}
.lp-tiers b small{font-size:15px;font-weight:560;color:var(--ink-3);letter-spacing:0}
.lp-tiers span{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:52ch}
.lp-tiers .btn{margin-top:auto}
.lp-tiers .pro{box-shadow:0 0 0 2px var(--accent),var(--shadow-2)}
@media(max-width:760px){ .lp-tiers{grid-template-columns:1fr} }

.lp-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,96px);align-items:start}
.lp-faq .lp-bh{position:sticky;top:96px}
.lp-qs{display:flex;flex-direction:column;gap:10px}
@media(max-width:860px){ .lp-faq{grid-template-columns:1fr} .lp-faq .lp-bh{position:static} }
.lp-bento article:nth-child(4),.lp-bento article:nth-child(5){grid-column:span 6}
@media(max-width:600px){ .lp-bento article:nth-child(4),.lp-bento article:nth-child(5){grid-column:span 12} }

/* ── fact bank ── */
.factbank{margin-top:18px;padding:clamp(18px,2vw,26px);border-radius:var(--r-l);background:var(--surface);box-shadow:0 0 0 1px var(--rule)}
.fb-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.fb-h h3{font-size:19px;font-weight:660;letter-spacing:-.02em}
.fb-h small{font-size:13px;font-weight:600;color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums}
.fb-q{flex:0 1 300px;min-width:0;padding:10px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font-size:15px}
.fb-q:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.fgs{display:flex;flex-direction:column;gap:8px}
.fg{border-radius:var(--r-m);background:var(--paper);padding:0 16px}
.fg summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style:none;font-weight:620;font-size:15.5px}
.fg summary::-webkit-details-marker{display:none}
.fg summary em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-3);background:var(--surface);padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.fg[open] summary{border-bottom:1px solid var(--rule)}
.fg .pts{padding:10px 0 14px}
.fgl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 28px;margin:0}
.fgl .fr{display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.fgl dt{font-weight:650;font-size:15px}
.fgl dd{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.fb-none{color:var(--ink-3);font-size:14.5px;padding:10px 0}
.fr[hidden],.fg[hidden]{display:none}

/* ── Google / phone sign-in ── */
.gbtn{width:100%;min-height:52px;margin-top:22px;display:flex;align-items:center;justify-content:center;gap:12px;
  border-radius:999px;background:var(--surface);color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 0 0 1px var(--rule-2),var(--shadow-1);transition:transform 120ms ease-out,box-shadow 160ms ease}
.gbtn svg{width:20px;height:20px;flex:none}
.gbtn:hover{box-shadow:0 0 0 1px var(--ink-3),var(--shadow-2)}
.gbtn:active{transform:scale(.98)}
.gbtn:disabled{opacity:.55}
.g2-or{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--ink-3);font-size:13px;font-weight:520}
.g2-or::before,.g2-or::after{content:"";flex:1;height:1px;background:var(--rule)}
.ph-in{display:flex;align-items:stretch;border:1px solid var(--rule);border-radius:var(--r-s);background:var(--surface);box-shadow:var(--shadow-1);
  transition:border-color 150ms ease,box-shadow 150ms ease}
.ph-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-wash)}
.ph-in span{display:grid;place-items:center;padding:0 12px 0 16px;font-size:16.5px;font-weight:560;color:var(--ink-2);border-right:1px solid var(--rule)}
.ph-in input{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:transparent!important;letter-spacing:.04em}
.field input.otp{font-family:var(--code);letter-spacing:.5em;font-size:20px;text-align:center}
.ph-step .go{margin-top:14px!important}
.ph-alt{display:flex;justify-content:space-between;margin-top:14px;font-size:14px}
.ph-alt button{color:var(--accent);font-weight:560}
.ph-alt button:disabled{color:var(--ink-3);font-weight:450}
.g2-form .fine button{color:var(--accent);font-weight:600}
.btn.busy{pointer-events:none}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;margin-right:8px;
  animation:spin 700ms linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .spin{animation-duration:1.6s} }
#fb-rc{position:fixed;bottom:0;right:0;z-index:5}

/* ── sign-in methods on the account page ── */
.methods{display:flex;flex-direction:column;border-radius:var(--r-l);background:var(--surface);box-shadow:0 0 0 1px var(--rule);padding:6px 20px;max-width:640px}
.mrow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.mrow:last-child{border-bottom:0}
.mi{width:36px;height:36px;border-radius:10px;background:var(--paper-2);display:grid;place-items:center}
.mi svg{width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round}
.mi svg path[fill]{stroke:none}
.mrow b{display:block;font-size:15.5px;font-weight:620}
.mrow div > span{display:block;font-size:14px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.mok{font-size:13px;font-weight:600;color:var(--ok);background:var(--ok-wash);padding:5px 11px;border-radius:999px}
.lkp-form{padding:4px 0 16px;border-bottom:1px solid var(--rule)}
.methods .err{margin:12px 0 4px}

/* ── toast: glass over content ── */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,0);z-index:200;
  padding:12px 20px;border-radius:999px;font-size:15px;font-weight:600;color:var(--ink);
  background:color-mix(in oklab,var(--surface) 72%,transparent);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 10px 30px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px var(--rule)}
@media(prefers-reduced-transparency:reduce){ .toast{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none} }

/* ═══ polish: links, top bar, front page motion ═══
   Links no longer grow an underline on hover. Links in running text carry a
   quiet underline all the time (so they read as links) and only deepen in
   colour; everything button-like changes its fill, never its decoration. */
a:hover{text-decoration:none}
.lede a,.sub a,.fine a,.pts a,.legal a,.foot a:not(.btn){text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color 150ms ease,text-decoration-color 150ms ease}
.lede a:hover,.sub a:hover,.fine a:hover,.pts a:hover,.legal a:hover{color:var(--accent-2);text-decoration-color:currentColor}
.footnav a{text-decoration:none!important;border-radius:999px;transition:color 150ms ease}
.footnav a:hover{color:var(--ink)}
.lp-fine a{text-decoration:none}
.lp-fine a:hover{color:var(--accent-2)}

body.locked .pubnav{border-bottom-color:transparent;transition:border-color 200ms ease,box-shadow 200ms ease}
body.locked .pubnav.scrolled{border-bottom-color:var(--rule-2);box-shadow:0 8px 24px -18px rgba(0,0,0,.35)}
.pn-l{position:relative}
.pn-l a{position:relative;z-index:1;transition:color 150ms ease}
.pn-l a:hover{background:transparent}
.pn-pill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;opacity:0;pointer-events:none;z-index:0;
  background:color-mix(in oklab,var(--surface) 70%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px var(--rule),0 2px 8px rgba(0,0,0,.06)}
@media(prefers-reduced-transparency:reduce){ .pn-pill{background:var(--surface)} }

.lp-h > span{display:inline-block}
.lp-day li i{transition:background 180ms ease,box-shadow 180ms ease}
.lp-dbar span{transform-origin:0 50%;transition:none}
.lp-bento article,.lp-tiers > div{position:relative;overflow:hidden;isolation:isolate}
.lp-bento article::before,.lp-tiers > div::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--accent-wash),transparent 60%);transition:opacity 250ms ease}
.lp-bento article:hover::before,.lp-tiers > div:hover::before{opacity:1}
.b-timer b{font-variant-numeric:tabular-nums;font-family:var(--code)}
.pn-pill{background:color-mix(in oklab,var(--ink) 7%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
:root[data-theme="dark"] .pn-pill{background:rgba(255,255,255,.1)}
.fg .pts{padding-left:20px}