/* ══════════════════════════════════════════════════════════════════════════════
   soft-glass.css — "Soft Glass" layer
   ------------------------------------------------------------------------------
   Sits on top of shapes-skin.css (Clinical Blue). Three ideas:

     1. Soft UI    surfaces are pressed out of the page, not printed on it:
                   raised pills and tiles with a light top-left edge and a
                   soft bottom-right shadow; fields and tracks sink in.
     2. Glass      chrome that floats (top bar, rail, menus, modals) is frosted
                   glass with a bright rim, and everything that appears does so
                   out of a blur, the way macOS and Linear bring things in.
     3. Riso grain the stipple from the Optimal Shapes poster is much heavier,
                   with light AND dark specks, and colour blocks get sprayed,
                   speckled shading (soft-fx.js mounts the grain sheet).

   Palette stays Clinical Blue: navy / cobalt / sky / ice, white and slate,
   with the warm crimson as the one hot accent (like the coral in the refs).

   Remove with: python3 tools/shapes_switch.py off
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root{
  --sg-warm:#C7434B;--sg-warm-2:#E0666C;--sg-warm-deep:#8E1F2A;
  --bg:#E4E9F0;--surface:#E9EEF4;--surface2:#DEE5ED;--surface3:#D4DCE6;
  --border:rgba(22,42,74,.10);--border2:rgba(22,42,74,.16);
  --sg-hi:rgba(255,255,255,.92);
  --sg-lo:rgba(24,44,78,.18);
  --sg-lo2:rgba(24,44,78,.10);
  --sg-rim:inset 0 1px 0 rgba(255,255,255,.75);
  --sg-glass:rgba(233,238,245,.58);
  --sg-glass-strong:rgba(236,241,247,.78);
  --sg-glass-edge:rgba(255,255,255,.65);
  --sg-glass-shadow:0 18px 50px -18px rgba(18,36,66,.35),0 2px 6px rgba(18,36,66,.06);
  --sg-blur:blur(16px) saturate(1.6);
  --radius:20px;--radius-sm:14px;--radius-lg:28px;
  --sg-ease:cubic-bezier(.16,1,.3,1);
  --sg-spring:cubic-bezier(.3,1.45,.5,1);
  --os-grain-op:.34;
}
body.dark{
  --bg:#0D1829;--surface:#12213A;--surface2:#0F1C31;--surface3:#182B48;
  --border:rgba(141,182,226,.10);--border2:rgba(141,182,226,.18);
  --sg-hi:rgba(120,162,218,.10);
  --sg-lo:rgba(0,0,0,.55);
  --sg-lo2:rgba(0,0,0,.32);
  --sg-rim:inset 0 1px 0 rgba(170,200,240,.10);
  --sg-glass:rgba(17,31,54,.52);
  --sg-glass-strong:rgba(17,31,54,.78);
  --sg-glass-edge:rgba(160,195,240,.16);
  --sg-glass-shadow:0 22px 60px -20px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.25);
  --sg-warm:#D9545B;--sg-warm-2:#EE7A7F;
  --os-grain-op:.4;
}
/* Composite shadows are declared on body, not :root: a custom property that
   uses var() is resolved where it is declared, so on :root they would bake in
   the LIGHT highlight and dark mode would get white halos. */
body{
  --sg-raise:-7px -7px 16px var(--sg-hi),8px 9px 20px var(--sg-lo);
  --sg-raise-sm:-4px -4px 9px var(--sg-hi),4px 5px 11px var(--sg-lo);
  --sg-raise-xs:-2px -2px 5px var(--sg-hi),2px 3px 6px var(--sg-lo);
  --sg-press:inset 3px 3px 7px var(--sg-lo),inset -3px -3px 7px var(--sg-hi);
  --sg-press-sm:inset 2px 2px 4px var(--sg-lo),inset -2px -2px 4px var(--sg-hi);
  --shadow-sm:var(--sg-raise-xs);
  --shadow:var(--sg-raise-sm);
  --shadow-lg:var(--sg-raise);
}
/* the root follows the theme (html can't see body.dark's tokens) */
html{background:#E4E9F0;color-scheme:light}
html.os-dk{background:#0B1628;color-scheme:dark}
body{background-color:var(--bg)}

/* ── Page transitions: cross-document, through a fog ───────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:sg-vt-out .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:sg-vt-in .3s ease-out both}
@keyframes sg-vt-out{to{opacity:0;transform:scale(.992)}}   /* no blur: a full-page filter per frame stutters */
@keyframes sg-vt-in{from{opacity:0}}   /* the blur-to-clear is html.sg-lf's job */
/* the top bar holds still between pages instead of fading with them */
body.lin-v2 .lin-topbar{view-transition-name:sg-topbar}
::view-transition-group(sg-topbar){animation-duration:0s}

/* ── Riso grain: soft-fx.js mounts .sg-grain; body::after is the no-JS fallback ── */
html.sg-js body::after{display:none}
/* Perf: plain alpha specks on their own composited layer. (mix-blend-mode on a
   full-screen fixed layer forces a re-blend of the whole viewport every scroll
   frame — that was the lag.) */
.sg-grain{position:fixed;inset:-50px;z-index:2147483000;pointer-events:none;transform:translateZ(0);contain:strict}
.sg-grain::before,.sg-grain::after{content:"";position:absolute;inset:0}
/* dark specks */
.sg-grain::before{
  opacity:calc(var(--os-grain-op) * .95);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .13 0 0 0 0 .24 0 0 0 1.9 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .14 0 0 0 0 .26 0 0 0 2.6 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px,420px 420px;
}
/* light specks — the white stipple on the colour blocks */
.sg-grain::after{
  opacity:calc(var(--os-grain-op) * .7);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .95 0 0 0 0 1 0 0 0 2.1 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}
body.dark .sg-grain::before{opacity:calc(var(--os-grain-op) * 1.05)}
body.dark .sg-grain::after{opacity:calc(var(--os-grain-op) * .6)}
@media (prefers-reduced-transparency:reduce){.sg-grain{opacity:.5}}
/* print the page without the grain */
@media print{.sg-grain{display:none}}

/* Sprayed shading (the airbrush on the poster's shapes): a speckled gradient
   made by masking a colour wash with noise. Used on colour blocks. */
.sg-spray{position:relative;isolation:isolate}
.sg-spray::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 90% at 100% 100%,var(--sg-spray-dk,rgba(4,10,22,.55)),transparent 62%),
    radial-gradient(90% 70% at 0% 0%,var(--sg-spray-lt,rgba(255,255,255,.5)),transparent 58%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size:180px 180px;mask-size:180px 180px;
}

/* ── Glass chrome: top bar, header, menus ──────────────────────────────────── */
header,
body.lin-v2 .lin-topbar{
  background:var(--sg-glass)!important;
  -webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur);
  border-bottom:1px solid var(--sg-glass-edge)!important;
  box-shadow:0 10px 30px -18px rgba(18,36,66,.28),inset 0 -1px 0 rgba(255,255,255,.15);
}
body.dark header,body.dark.lin-v2 .lin-topbar{box-shadow:0 12px 34px -18px rgba(0,0,0,.6),inset 0 -1px 0 rgba(160,195,240,.06)}

.log-menu,
body.lin-v2 .lin-study-menu,
body.lin-v2 .lin-search-dd,
.nb-pop,.nb-popover,
.sec-switcher .sec-menu{
  background:var(--sg-glass-strong)!important;
  -webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur);
  border:1px solid var(--sg-glass-edge)!important;
  border-radius:18px!important;
  box-shadow:var(--sg-glass-shadow),var(--sg-rim)!important;
}
/* menus come in out of a blur */
.log-menu{filter:blur(8px);transform:translateY(-6px) scale(.97);transform-origin:top right;
  transition:opacity .28s var(--sg-ease),visibility .28s,transform .38s var(--sg-ease),filter .32s var(--sg-ease)!important}
.log-menu.open{filter:none;transform:none}
body.lin-v2 .lin-study-wrap.open .lin-study-menu,
body.lin-v2 .lin-search-dd:not([hidden]){animation:sg-fog-drop .36s var(--sg-ease) both;transform-origin:top center}
@keyframes sg-fog-drop{from{opacity:0;filter:blur(10px);transform:translateY(-8px) scale(.97)}}
.log-item,.lin-study-item,.lin-cmdk-item{border-radius:11px!important;transition:background .2s,transform .25s var(--sg-ease)}
.log-item:hover,.lin-study-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)!important;transform:translateX(2px)}

/* ── Buttons: soft pills pressed out of the page ───────────────────────────── */
.qo-btn,.aq-btn,.checkup-btn,.for-btn,.chat-sug-btn,.checkup-cam,.checkup-cam-alt,.checkup-part,
.for-cat,.for-tag-chip,.fc-chip,.guide-chip,.guide-tab,.btn-login,.tut-replay,.lin-study-btn,
.fc-nav button,.capture-btn,.acc-btn,.plan-btn,.pl-btn{
  border-radius:999px!important;
  border:0!important;
  background:var(--surface)!important;
  color:var(--text2)!important;
  box-shadow:var(--sg-raise-xs),var(--sg-rim)!important;
  transition:box-shadow .3s var(--sg-ease),transform .3s var(--sg-ease),color .2s,background .3s!important;
}
.qo-btn:hover,.aq-btn:hover,.checkup-btn:hover,.for-btn:hover,.chat-sug-btn:hover,.checkup-cam:hover,
.checkup-cam-alt:hover,.checkup-part:hover,.for-cat:hover,.for-tag-chip:hover,.fc-chip:hover,.guide-chip:hover,
.guide-tab:hover,.btn-login:hover,.tut-replay:hover,.lin-study-btn:hover,.fc-nav button:hover,.capture-btn:hover{
  color:var(--text)!important;
  box-shadow:var(--sg-press-sm)!important;      /* the fabric gives under the pointer */
  transform:translateY(1px) scale(.985);
}
.qo-btn:active,.aq-btn:active,.checkup-btn:active,.for-btn:active,.chat-sug-btn:active,.checkup-part:active,
.for-cat:active,.fc-chip:active,.guide-tab:active,.btn-login:active,.fc-nav button:active{
  box-shadow:var(--sg-press)!important;transform:translateY(1px) scale(.965)}
/* selected / on: sunk in, with a warm dot of colour like a lit switch */
.checkup-part.sel,.for-cat.active,.fc-chip.active,.guide-tab.on,.for-tag-chip.active,.for-tag-chip.on,
.checkup-step.on,.sec-pill.active,.for-btn.voted{
  background:var(--surface2)!important;
  color:var(--text)!important;
  box-shadow:var(--sg-press-sm)!important;
  border:0!important;
}
.checkup-part.sel::before,.for-cat.active::before,.fc-chip.active::before,.guide-tab.on::before,.sec-pill.active::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.45em;vertical-align:.1em;
  background:var(--sg-warm);box-shadow:0 0 8px color-mix(in srgb,var(--sg-warm) 70%,transparent);
}
body.dark .for-cat.active{color:var(--text)!important}

/* primary: a warm glossy lens set into a soft pill */
.qo-btn.next,.aq-btn.primary,.checkup-btn.primary,.for-btn.primary,#composerSubmit,.chat-send,
.fc-nav button.primary,.capture-btn,.ai-send-btn,.for-new-btn,#newTopicBtn,.forum-head .for-btn{
  background:
    radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.28),transparent 55%),
    linear-gradient(180deg,var(--sg-warm-2),var(--sg-warm) 55%,var(--sg-warm-deep))!important;
  color:#fff!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:
    -4px -4px 10px var(--sg-hi),
    5px 7px 16px color-mix(in srgb,var(--sg-warm-deep) 38%,transparent),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(80,10,20,.25)!important;
  text-shadow:0 1px 1px rgba(80,10,20,.3);
}
body.dark .qo-btn.next,body.dark .aq-btn.primary,body.dark .fc-nav button.primary,body.dark .ai-send-btn,
body.dark .chat-send,body.dark .capture-btn,body.dark .for-btn.primary,body.dark .checkup-btn.primary{
  background:
    radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.22),transparent 55%),
    linear-gradient(180deg,var(--sg-warm-2),var(--sg-warm) 55%,var(--sg-warm-deep))!important;
  color:#fff!important;
  box-shadow:-3px -3px 8px var(--sg-hi),6px 8px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 4px rgba(60,5,15,.35)!important;
}
.qo-btn.next:hover,.aq-btn.primary:hover,.checkup-btn.primary:hover,.for-btn.primary:hover,.chat-send:hover,
.fc-nav button.primary:hover,.capture-btn:hover,.ai-send-btn:hover,#composerSubmit:hover{
  transform:translateY(1px) scale(.985);filter:brightness(1.04) saturate(1.05);
  box-shadow:-2px -2px 6px var(--sg-hi),2px 3px 7px color-mix(in srgb,var(--sg-warm-deep) 30%,transparent),
    inset 2px 3px 6px rgba(70,8,18,.28),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.qo-btn.next:active,.aq-btn.primary:active,.checkup-btn.primary:active,.for-btn.primary:active,.chat-send:active{
  transform:translateY(0) scale(.97);
  box-shadow:inset 2px 3px 6px rgba(70,8,18,.45),inset -1px -1px 3px rgba(255,255,255,.2)!important;
}
.checkup-btn:disabled{filter:grayscale(.6);opacity:.5}

/* landing hero CTAs: the red one stays the lens, the blue one is a cobalt lens */
.landing .hero .qo-btn,.landing .hero-ctas .qo-btn,.landing .hero a.qo-btn{padding:.95rem 1.8rem!important}
.landing .hero .qo-btn:not(.next),.landing .hero-ctas .qo-btn:not(.next){
  background:
    radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.26),transparent 55%),
    linear-gradient(180deg,#3F77BD,var(--os-cobalt) 55%,var(--os-navy))!important;
  color:#fff!important;
  box-shadow:-4px -4px 10px var(--sg-hi),5px 7px 16px rgba(18,41,74,.35),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 4px rgba(4,12,28,.3)!important;
}

.qo-btn .vi-ico,.qo-btn > svg,.qo-btn .lin-ico{margin-right:.5em}
.landing nav.landing-nav{background:transparent!important;border:0!important;box-shadow:none!important}

/* round icon buttons — the circle keys from the reference */
.btn-icon,.for-close,.for-del,.back-top,.checkup-camstop,.sidebar-toggle,#darkToggle,#langToggle{
  border-radius:50%!important;
  border:0!important;
  background:var(--surface)!important;
  color:var(--text2)!important;
  box-shadow:var(--sg-raise-xs),var(--sg-rim)!important;
  transition:box-shadow .3s var(--sg-ease),transform .35s var(--sg-spring),color .2s!important;
}
.btn-icon:hover,.for-close:hover,.for-del:hover,.back-top:hover,#darkToggle:hover,#langToggle:hover{
  box-shadow:var(--sg-press-sm)!important;transform:scale(.95);color:var(--text)!important}
.btn-icon:active,.for-close:active,.for-del:active,.back-top:active{box-shadow:var(--sg-press-sm)!important;transform:scale(.94)}
.for-del:hover{color:var(--sg-warm)!important}

/* top-bar category pills carry the sidebar's airbrushed emblems, small */
.sec-ico.sg-emb-sm{display:inline-flex;width:22px;height:22px;margin:-3px 0}
.sec-ico.sg-emb-sm svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px rgba(6,16,34,.25))}

/* ── Learn panel controls (knowledge.css): the same soft pills, so pressing
   one gives under the finger like every other button on the page ─────────── */
.kn-tab,.kn-chip,.kn-more,.kv-seg button,.kv-opts button,.kv-tools button,.kv-path button,.kv-mmt button,.kv-btn,
.kn-fc-nav button,.kn-mode button,.ks-btn,.ks-tab{
  border:0!important;
  box-shadow:var(--sg-raise-xs),var(--sg-rim)!important;
  transition:box-shadow .3s var(--sg-ease),transform .35s var(--sg-spring),color .2s,background .3s,opacity .2s!important}
.kn-tab,.kn-chip,.kv-seg button,.kv-opts button,.kv-tools button,.kv-path button,.kv-mmt button,.kv-btn,.kn-fc-nav button,.ks-btn,.ks-tab{background:var(--surface)!important}
.kn-more{background:var(--surface)!important;border-radius:999px!important}
.kv-seg{background:var(--surface2)!important;box-shadow:var(--sg-press-sm)!important;border-radius:14px!important;padding:4px!important;gap:4px!important}
.kn-tab:hover,.kn-chip:hover,.kn-more:hover,.kv-seg button:hover,.kv-opts button:hover:not(:disabled),.kv-tools button:hover,
.kv-path button:hover,.kv-mmt button:hover,.kv-btn:hover,.kn-fc-nav button:hover,.ks-btn:hover,.ks-tab:hover{
  box-shadow:var(--sg-press-sm)!important;transform:translateY(1px) scale(.985)}
.kn-tab:active,.kn-chip:active,.kn-more:active,.kv-seg button:active,.kv-opts button:active:not(:disabled),.kv-tools button:active,
.kv-path button:active,.kv-mmt button:active,.kv-btn:active,.kn-fc-nav button:active,.ks-btn:active,.ks-tab:active{
  box-shadow:var(--sg-press)!important;transform:translateY(1px) scale(.965)}
/* chosen: sunk in, lit with the accent */
.kn-tab[aria-selected="true"],.kv-seg button[aria-pressed="true"],.kv-tools button.on,.kv-path button[aria-pressed="true"],.kv-mmt button.on,.ks-tab.on{
  background:var(--surface2)!important;color:var(--accent)!important;box-shadow:var(--sg-press-sm)!important}
.kn-tab[aria-selected="true"]::before,.kv-seg button[aria-pressed="true"]::before,.ks-tab.on::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:.4em;vertical-align:.12em;
  background:var(--sg-warm);box-shadow:0 0 8px color-mix(in srgb,var(--sg-warm) 70%,transparent)}
.kv-opts button.right{background:color-mix(in srgb,var(--green) 16%,var(--surface2))!important;box-shadow:var(--sg-press-sm),inset 0 0 0 2px color-mix(in srgb,var(--green) 55%,transparent)!important}
.kv-opts button.wrong{background:color-mix(in srgb,var(--red) 13%,var(--surface2))!important;box-shadow:var(--sg-press-sm),inset 0 0 0 2px color-mix(in srgb,var(--red) 50%,transparent)!important}
.kv-opts button:disabled{transform:none!important}
.kv-btn.primary,.ks-btn.primary{background:var(--accent)!important;color:#fff!important}
/* ═══ Practice tray: mode buttons ═════════════════════════════════════════
   .ks-tabs was display:block with no gap, so the mode buttons rendered as
   inline-blocks butted against each other on wrapped lines - which is what
   read as "squeezed" on the IB pages, where a section yields 8 modes
   instead of the textbook's 7 and wraps sooner. Same fix as every other
   chip row on the site: flex, wrap, an explicit gap, 40px tap minimum. */
.ks-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.ks-tabs .ks-tab{flex:0 0 auto;white-space:nowrap;min-height:40px}
.kn-learn,.ks{border:0!important;box-shadow:var(--sg-raise),var(--sg-rim)!important;background:var(--surface)!important;border-radius:24px!important}

/* ── Fields: sunk into the surface ─────────────────────────────────────────── */
input[type=text],input[type=email],input[type=search],input[type=password],input[type=number],textarea,select,
.chat-input,.for-field input,.for-field select,.for-field textarea,body.lin-v2 .lin-search{
  background:var(--surface2)!important;
  border:0!important;
  border-radius:16px!important;
  box-shadow:var(--sg-press)!important;
  color:var(--text)!important;
  transition:box-shadow .3s var(--sg-ease)!important;
}
.chat-input,body.lin-v2 .lin-search,input[type=search]{border-radius:999px!important}
input[type=text]:focus,input[type=email]:focus,input[type=search]:focus,input[type=password]:focus,textarea:focus,select:focus,
.chat-input:focus,.for-field input:focus,.for-field textarea:focus,body.lin-v2 .lin-search:focus-within{
  outline:none!important;
  box-shadow:var(--sg-press),0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important;
}
body.lin-v2 .lin-search input,body.lin-v2 .lin-search-input{background:transparent!important;box-shadow:none!important}
input[type=checkbox],input[type=radio]{accent-color:var(--sg-warm)}

/* ── Cards & panels: tiles pressed out of the page ─────────────────────────── */
.feature-card,.fork-card,.stat-card,.ch-card,.acc-item,.quiz-card,.qo-card,.dash-card,.chat-window,
.checkup-panel,.for-topic,.for-post,.plan-card,.phase-card,.pl-card,.rec-box,.callout,.fc-card,
.progress-item,.res-card,.exam-card,.q-card{
  border:0!important;
  border-radius:var(--radius)!important;
  background:var(--surface)!important;
  box-shadow:var(--sg-raise),var(--sg-rim)!important;
}
.callout,.rec-box{background:color-mix(in srgb,var(--accent-bg) 30%,var(--surface))!important;box-shadow:var(--sg-raise-sm),var(--sg-rim)!important}
.callout{border-left:0!important;position:relative}
.callout::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:4px;border-radius:4px;
  background:linear-gradient(var(--sg-warm-2),var(--sg-warm))}
.callout{padding-left:1.5rem!important}
.for-post{box-shadow:var(--sg-press-sm)!important;background:var(--surface2)!important}
.forum-modal{border:1px solid var(--sg-glass-edge)!important;border-radius:26px!important;
  background:var(--sg-glass-strong)!important;-webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur);
  box-shadow:var(--sg-glass-shadow),var(--sg-rim)!important}
.for-modal-head,.for-modal-foot{background:transparent!important;border-color:var(--border)!important}
.forum-overlay{background:color-mix(in srgb,var(--bg) 35%,rgba(8,18,34,.35))!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.chat-window{overflow:hidden}
.chat-window .chat-header,.chat-window .chat-suggestions{background:transparent!important;border-color:var(--border)!important}
.chat-messages{background:var(--surface2)!important;box-shadow:var(--sg-press-sm);border-radius:18px;margin:0 .8rem}
.chat-msg{border-radius:18px!important;border:0!important}
.chat-msg.bot{background:var(--surface)!important;box-shadow:var(--sg-raise-xs)!important}
.chat-input-row{border-top:0!important;background:transparent!important}
.dash-card{padding:1rem 1.2rem!important}
.checkup-sym label{border:0!important;border-radius:16px!important;background:var(--surface)!important;box-shadow:var(--sg-raise-xs)!important;transition:box-shadow .25s var(--sg-ease),transform .25s var(--sg-ease)!important}
.checkup-sym label:hover{box-shadow:var(--sg-press-sm)!important;transform:scale(.99)}
.checkup-sym label.ticked{background:var(--surface2)!important;box-shadow:var(--sg-press-sm)!important}
.checkup-steps{gap:.7rem}
.checkup-step{border:0!important;background:var(--surface)!important;box-shadow:var(--sg-raise-xs)!important}
.checkup-step .cdot{background:var(--surface2)!important;color:var(--text3)!important;box-shadow:var(--sg-press-sm)}
.checkup-step.on .cdot{background:var(--sg-warm)!important;color:#fff!important;box-shadow:0 0 10px color-mix(in srgb,var(--sg-warm) 60%,transparent)}
.checkup-wrap{text-align:center}
.checkup-wrap h1{justify-content:center}
.checkup-panel,.checkup-panel *{text-align:left}
.checkup-panel .checkup-bodymap,.checkup-panel .checkup-btnrow,.checkup-panel .checkup-map-hint,.checkup-panel .checkup-cam-priv{text-align:center}
.checkup-badge,.hero-badge,.section-label{
  border:0!important;border-radius:999px!important;
  box-shadow:var(--sg-raise-xs),var(--sg-rim)!important;
}
.hero-badge,.section-label{background:var(--surface)!important;color:var(--text)!important}
.hero-badge .dot,.section-label::before{background:var(--sg-warm)!important;box-shadow:0 0 8px var(--sg-warm)!important}
.checkup-badge{background:var(--surface)!important;color:var(--sg-warm)!important}

/* chapter numbers & avatars: round soft keys with a coloured face */
.ch-num,.author-ava,.for-topic-av{border-radius:50%!important;box-shadow:var(--sg-raise-xs),inset 0 1px 0 rgba(255,255,255,.3)!important}

/* hover: the card is pressed in where the pointer is (soft-fx.js sets --sg-mx/--sg-my) */
.sg-sheen{position:relative}
.sg-sheen::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  /* a dimple lit from the top-left: shade on the upper-left wall, light on the lower-right lip */
  background:
    radial-gradient(150px circle at calc(var(--sg-mx,50%) - 14px) calc(var(--sg-my,0%) - 14px),rgba(20,40,72,.16),rgba(20,40,72,.06) 45%,transparent 70%),
    radial-gradient(170px circle at calc(var(--sg-mx,50%) + 16px) calc(var(--sg-my,0%) + 16px),transparent 52%,rgba(255,255,255,.42) 66%,transparent 82%);
  transition:opacity .45s var(--sg-ease);
}
body.dark .sg-sheen::before{background:
    radial-gradient(150px circle at calc(var(--sg-mx,50%) - 14px) calc(var(--sg-my,0%) - 14px),rgba(0,0,0,.4),rgba(0,0,0,.14) 45%,transparent 70%),
    radial-gradient(170px circle at calc(var(--sg-mx,50%) + 16px) calc(var(--sg-my,0%) + 16px),transparent 52%,rgba(150,190,240,.13) 66%,transparent 82%)}
.sg-sheen:hover::before{opacity:1}
.feature-card,.fork-card,.ch-card,.for-topic,.stat-card,.qo-card,.res-card,.plan-card{
  transition:transform .45s var(--sg-ease),box-shadow .45s var(--sg-ease)!important}
.feature-card:hover,.fork-card:hover,.ch-card:hover,.for-topic:hover,.stat-card:hover,.qo-card:hover,.res-card:hover,.plan-card:hover{
  transform:scale(.992)!important;                 /* pressed into the cloth, not lifted off it */
  box-shadow:-3px -3px 8px var(--sg-hi),4px 5px 10px var(--sg-lo),var(--sg-rim)!important;
}
.landing .feature-card:hover,.landing .fork-card:hover,.landing .ch-card:hover{border-color:transparent!important}

/* progress tracks: sunk channel, glowing warm fill */
.prog-bar,.progress-bar,.pl-bar,.plan-progress,.qo-progress,.fc-progress{
  background:var(--surface2)!important;border:0!important;border-radius:999px!important;box-shadow:var(--sg-press-sm)!important;overflow:hidden}
.prog-bar > *,.progress-bar > *,.pl-bar > *,.plan-progress > *,.qo-progress > *,.fc-progress > *,.prog-fill,.progress-fill{
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--sg-warm-2),var(--sg-warm))!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--sg-warm) 45%,transparent)}
#readingBar{background:linear-gradient(90deg,var(--sg-warm-2),var(--sg-warm))!important;box-shadow:0 0 10px var(--sg-warm)}
/* soft-fx.js readBar() draws the reading position as part of the glass:
   a sunk channel tucked under the top bar, a lit fill with rounded ends and
   a raised bead riding at your place. It only shows once you start reading. */
html.sg-read-on #readingBar{display:none!important}
.sg-read{--p:0;position:fixed;left:18px;right:18px;top:6px;height:6px;border-radius:99px;z-index:501;pointer-events:none;
  background:var(--surface2);box-shadow:inset 1px 1px 3px var(--sg-lo),inset -1px -1px 2px var(--sg-hi);
  opacity:0;transform:translateY(-4px);transition:opacity .5s var(--sg-ease),transform .5s var(--sg-ease)}
.sg-read.on{opacity:1;transform:none}
.sg-read-fill{position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--sg-warm) 45%,var(--surface)),var(--sg-warm-2) 55%,var(--sg-warm));
  clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0 round 99px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.sg-read-bead{position:absolute;top:50%;left:calc(var(--p) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--surface);box-shadow:var(--sg-raise-xs),0 0 0 2px var(--sg-warm),0 0 12px color-mix(in srgb,var(--sg-warm) 60%,transparent);
  transition:box-shadow .4s var(--sg-ease),scale .4s var(--sg-spring)}
.sg-read-bead::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--sg-warm);opacity:.85}
.sg-read.end .sg-read-bead{scale:1.2;box-shadow:var(--sg-raise-xs),0 0 0 2px var(--green),0 0 14px color-mix(in srgb,var(--green) 70%,transparent)}
.sg-read.end .sg-read-bead::after{background:var(--green)}
@media (max-width:640px){.sg-read{left:12px;right:12px;height:5px}.sg-read-bead{width:12px;height:12px;margin:-6px 0 0 -6px}}
@media print{.sg-read{display:none}}

/* ── Top bar pieces ────────────────────────────────────────────────────────── */
.sec-switcher{background:var(--surface2)!important;border:0!important;border-radius:999px!important;box-shadow:var(--sg-press-sm)!important;padding:3px!important}
.sec-pill{border-radius:999px!important;transition:background .3s,box-shadow .3s,color .2s!important}
.sec-pill.active{background:var(--surface)!important;color:var(--text)!important;box-shadow:var(--sg-raise-xs),var(--sg-rim)!important}
.sec-pill.active::before{display:none}
.sec-pill.active .sec-ico{color:var(--sg-warm)!important}
body.lin-v2 .lin-kbd,body.lin-v2 .lin-search-kbd{border:0!important;border-radius:7px!important;background:var(--surface)!important;box-shadow:var(--sg-raise-xs)!important}

/* ── Semicircle rail: re-glazed as liquid glass ────────────────────────────── */
html.os-semi .sidebar.sidebar{
  --os-semi-body:radial-gradient(circle at 0 50%,rgba(236,241,247,.66) 0,rgba(226,233,242,.56) 72%,rgba(214,224,236,.5) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.8)!important;backdrop-filter:blur(24px) saturate(1.8)!important;
}
body.dark .sidebar.sidebar{
  --os-semi-body:radial-gradient(circle at 0 50%,rgba(22,40,68,.66) 0,rgba(15,28,49,.6) 72%,rgba(12,22,40,.55) 100%);
}
html.os-semi .sidebar .sidebar-link{border-radius:999px!important}
html.os-semi .sidebar .sidebar-link.active{background:var(--surface)!important;box-shadow:var(--sg-raise-xs),var(--sg-rim)!important}
html.os-semi:not(.sg-wheel) .sidebar .sidebar-link.active::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--sg-warm);box-shadow:0 0 8px var(--sg-warm)}
.sidebar-link{position:relative}
.sidebar-link.active,body.lin-v2 .sidebar-link.active{box-shadow:none}

/* ── Appear: things come in out of a fog (soft-fx.js arms .sg-fog) ─────────── */
.sg-fog{opacity:0}
.sg-fog.sg-in{animation:sg-fog-reveal .95s var(--sg-ease) var(--sg-d,0ms) both!important}
@keyframes sg-fog-reveal{
  from{opacity:0;filter:blur(8px);transform:translateY(14px) scale(.985)}
  to{opacity:1;filter:blur(0);transform:none}
}
/* never leave a filter behind on content that has settled (it breaks
   background-clip:text and costs paint) — soft-fx.js strips the classes */

/* checkup + chat steps: each step fogs in */
.checkup-stepbody.active{animation:sg-fog-up .55s var(--sg-ease) both!important}
@keyframes sg-fog-up{from{opacity:0;filter:blur(10px);transform:translateY(10px)}}
.chat-msg{animation:sg-fog-up .5s var(--sg-ease) both}

/* ── Landing: the hero mosaic becomes soft, sprayed poster tiles ───────────── */
.landing .os-mosaic{
  gap:14px!important;padding:14px!important;border:0!important;border-radius:34px!important;
  background:var(--surface)!important;
  box-shadow:var(--sg-raise),var(--sg-rim)!important;
}
.landing .os-mosaic > *{border-radius:22px!important;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -8px 24px rgba(4,10,22,.18)}
.landing .os-mosaic::after{display:none!important}

/* ── Loading screens: the hospital at dusk, the Vitalité icons around it ──── */
/* index.html draws the hospital + treeline; shapes-skin used to hide them.
   They are back, in clinical blues, and soft-fx.js floats the airbrushed
   icon set (heart, bone, dumbbell, apple, clinic, pulse) around the mark. */
#v-splash{
  --vback:#1B355C;--vfront:#0C1A30;--vhosp:#17304F;--vgold:#A9C8EA;
  --vtile:#FFFFFF;--vring:rgba(169,200,234,.4);
}
body:not(.dark) #v-splash{
  --vback:#B8CCE2;--vfront:#7F9DC2;--vhosp:#5F84B3;--vgold:#FFFFFF;
  --vtile:#0F2238;--vring:rgba(30,79,143,.3);
}
#v-splash .v-forest,#v-splash .v-hosp{display:block!important}
#v-splash .v-hosp{opacity:.92!important}
#v-splash .v-forest{opacity:.7!important}
#v-splash.v-splash-off{
  opacity:0!important;filter:blur(18px);transform:scale(1.04);
  transition:opacity .7s var(--sg-ease),filter .7s var(--sg-ease),transform .9s var(--sg-ease)!important}
.sg-icons{position:absolute;inset:0;pointer-events:none;z-index:0}
.sg-ico{position:absolute;width:var(--w,96px);opacity:0;
  animation:sg-ico-in 1.1s var(--sg-ease) var(--d,0s) forwards,sg-bob 7s ease-in-out calc(var(--d,0s) + 1.1s) infinite}
.sg-ico svg{width:100%;height:auto;display:block}
@keyframes sg-ico-in{from{opacity:0;transform:translateY(18px) scale(.8) rotate(-8deg);filter:blur(10px)}to{opacity:.96;transform:none;filter:none}}
@keyframes sg-bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:2deg}}
#v-splash > :not(.sg-icons):not(svg){position:relative;z-index:1}
/* splash extras (soft-fx.js splashExtras): heartbeat, the site's three parts, a fact, a warm-up bar */
#v-splash{gap:.8rem!important;padding-bottom:min(22vh,220px)}
#v-splash .v-tile.sg-beat{animation:v-rise .7s cubic-bezier(.16,1,.3,1) both,sg-beat 1.15s ease-in-out 1s infinite}
@keyframes sg-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(.99)}36%{transform:scale(1.035)}52%{transform:scale(1)}}
.sg-ecg{position:absolute;left:50%;top:50%;width:100vw;height:120px;margin:-60px 0 0 -50vw;z-index:-1;pointer-events:none}
.sg-ecg svg{width:100%;height:100%;display:block;overflow:visible}
.sg-ecg path{fill:none;stroke:var(--vacc);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px var(--vacc));stroke-dasharray:1600;stroke-dashoffset:1600;opacity:.8}
.sg-ecg .sg-ecg-l{animation:sg-ecg-l 1.6s .35s cubic-bezier(.5,0,.3,1) forwards}
.sg-ecg .sg-ecg-r{animation:sg-ecg-l 1.6s .75s cubic-bezier(.5,0,.3,1) forwards}
@keyframes sg-ecg-l{to{stroke-dashoffset:0}}
.sg-parts{display:flex;gap:1.6rem;margin-top:.5rem}
.sg-part{display:flex;flex-direction:column;align-items:center;gap:.35rem;opacity:0;animation:sg-part-in .8s cubic-bezier(.16,1,.3,1) calc(1.05s + var(--i) * .28s) forwards}
.sg-part-i{display:block;width:52px;height:52px;animation:sg-bob 5s ease-in-out calc(2s + var(--i) * .4s) infinite}
.sg-part-i svg{width:100%;height:100%;display:block}
.sg-part-t{font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--vtag)}
@keyframes sg-part-in{from{opacity:0;transform:translateY(22px) scale(.6) rotate(-10deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.sg-fact{max-width:min(560px,86vw);min-height:2.9em;text-align:center;font-size:.9rem;line-height:1.5;color:var(--vname);opacity:0;animation:v-rise .6s 1.4s cubic-bezier(.16,1,.3,1) forwards}
.sg-fact b{color:var(--vacc);font-weight:800;letter-spacing:.04em}
.sg-fact cite{display:block;margin-top:.25rem;font-style:normal;font-size:.72rem;opacity:.65;letter-spacing:.03em}
.sg-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--vacc);animation:sg-caret .8s steps(2) infinite}
@keyframes sg-caret{50%{opacity:0}}
.sg-prog{display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:0;animation:v-rise .5s .5s cubic-bezier(.16,1,.3,1) forwards}
.sg-prog-bar{width:220px;height:4px;border-radius:9px;overflow:hidden;background:color-mix(in srgb,var(--vtag) 25%,transparent)}
.sg-prog-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--vacc),var(--vrule));transform-origin:0 50%;transform:scaleX(0);
  animation:sg-fill var(--hold,4600ms) cubic-bezier(.4,.1,.3,1) forwards;box-shadow:0 0 10px var(--vacc)}
@keyframes sg-fill{to{transform:scaleX(1)}}
.sg-prog-t{font-size:.64rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--vtag)}
.sg-prog-t.flip{animation:sg-flip .45s cubic-bezier(.16,1,.3,1)}
@keyframes sg-flip{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sg-skip{position:absolute!important;top:1.4rem;left:0;right:0;text-align:center;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--vtag);opacity:0;animation:v-rise .6s 1.8s forwards}
/* vitals either side of the mark, like a bedside monitor */
.sg-vitals{position:absolute;inset:0;pointer-events:none}
.sg-vital{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:80px;padding:.4rem .65rem;border-radius:13px;
  color:var(--vname);font-family:inherit;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:color-mix(in srgb,var(--vname) 6%,transparent);border:1px solid color-mix(in srgb,var(--vname) 14%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;
  animation:sg-vital-in .7s cubic-bezier(.34,1.4,.64,1) forwards;animation-delay:calc(1s + var(--i) * .16s)}
.sg-vital-l{right:calc(100% + 20px)}
.sg-vital-r{left:calc(100% + 20px)}
.sg-vital:nth-child(odd){top:-20px}
.sg-vital:nth-child(even){top:52px}
.sg-vital .k{font-size:.54rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.sg-vital .v{font-size:1.05rem;font-weight:800;line-height:1.1}
.sg-vital .u{font-size:.54rem;letter-spacing:.1em;opacity:.55}
.sg-vital:first-child .v{color:var(--vacc)}
@keyframes sg-vital-in{from{opacity:0;transform:translateY(10px) scale(.85);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.sg-fact span{transition:opacity .35s,filter .35s}
.sg-fact.swap span{opacity:0;filter:blur(5px)}
/* the finale: light pulses off the mark, a shine runs across the name */
#v-splash .v-tile::before{content:"";position:absolute;inset:-4px;border-radius:26px;pointer-events:none;opacity:0;border:2px solid var(--vacc)}
#v-splash.sg-welcome .v-tile::before{animation:sg-welcome-ring 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes sg-welcome-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
#v-splash.sg-welcome .v-name{opacity:1;animation:v-rise .01s both,sg-shine 1.1s cubic-bezier(.3,.6,.3,1) both}
@keyframes sg-shine{0%{text-shadow:0 0 0 transparent;letter-spacing:-.02em}45%{text-shadow:0 0 22px color-mix(in srgb,var(--vacc) 70%,transparent),0 0 2px #fff;letter-spacing:.01em}100%{text-shadow:0 0 0 transparent;letter-spacing:-.02em}}
@media (max-width:640px){.sg-vital{min-width:60px;padding:.3rem .45rem}.sg-vital .v{font-size:.85rem}.sg-vital-l{right:calc(100% + 10px)}.sg-vital-r{left:calc(100% + 10px)}}
@media (prefers-reduced-motion:reduce){.sg-vital{animation:none;opacity:1}}
@media (max-width:640px){.sg-ico-apple,.sg-ico-dumbbell{display:none}.sg-parts{gap:1rem}.sg-part-i{width:42px;height:42px}.sg-fact{font-size:.82rem}}
@media (prefers-reduced-motion:reduce){.sg-part,.sg-fact,.sg-prog,.sg-skip{animation:none;opacity:1}.sg-ecg path{animation:none;stroke-dashoffset:0}#v-splash .v-tile.sg-beat{animation:none}}
@media (max-width:640px){.sg-ico{width:calc(var(--w,96px) * .62)}}
@media (prefers-reduced-motion:reduce){.sg-ico{animation:none;opacity:.96}}

/* ── Phones ────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  :root{--radius:18px;--radius-sm:12px}
  .feature-card:hover,.fork-card:hover,.ch-card:hover,.for-topic:hover{transform:none!important}
  .landing .os-mosaic{gap:10px!important;padding:10px!important;border-radius:26px!important}
  .landing .os-mosaic > *{border-radius:16px!important}
}
@media (hover:none){
  .sg-sheen::before{display:none}
}

/* ── Reduced motion: no fog, no bob, instant transitions ───────────────────── */
@media (prefers-reduced-motion:reduce){
  .sg-fog{opacity:1!important;filter:none!important;transform:none!important}
  .chat-msg,.checkup-stepbody.active,
  body.lin-v2 .lin-study-wrap.open .lin-study-menu,body.lin-v2 .lin-search-dd:not([hidden]){animation:none!important;opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* gold-blue paints `.hero h1 span` gold in light mode; the reveal splits those
   headings into word spans, so every word came out gold. Clinical ink instead. */
html body:not(.dark) .hero h1:not(.os-gradtext) span{
  background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--os-navy)!important}
html body:not(.dark) .hero h1:not(.os-gradtext) span.os-w:last-child .os-wt,
html body:not(.dark) .hero h1:not(.os-gradtext) > span:only-child:not(.os-w){color:var(--os-crimson)!important}

/* ── Fabric: the paper dimple, parked in one spot ──────────────────────────
   soft-fx.js places .sg-fabric once — centred horizontally, a little above
   the middle of the viewport — and sets --sg-dent to .22. It is lit from the
   top-left like the rest of the skin: its upper-left wall falls into shade,
   its lower-right wall catches light, and soft folds break up the surface.
   No rings, no halo.

   It used to be steered by the pointer, with a WebGL membrane (see
   soft-fx.js 3b) doing the same thing across the whole viewport. On a
   desktop mouse the surface visibly lagged and wobbled behind the arrow, so
   the tracking is gone and only the texture is left. The box is still
   340px square with a -170 margin, which is what lets soft-fx.js centre it
   from the width alone. */
.sg-fabric{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;
  pointer-events:none;z-index:2147482990;opacity:0;will-change:transform,opacity;contain:strict;
  transition:opacity .6s var(--sg-ease)}
.sg-fabric.on{opacity:1}
.sg-fabric > i{position:absolute;inset:0;border-radius:50%;display:block}
/* the hollow itself: a soft falloff, darkest a touch up-left of centre */
.sg-f-bowl{opacity:calc(var(--sg-dent,.5) * .9);
  background:radial-gradient(closest-side at 47% 46%,rgba(20,40,72,.17),rgba(20,40,72,.1) 26%,rgba(20,40,72,.045) 50%,rgba(20,40,72,.012) 72%,transparent)}
/* upper-left inner wall faces away from the light */
.sg-f-shade{opacity:var(--sg-dent,.5);
  background:radial-gradient(closest-side at 56% 57%,transparent 20%,rgba(20,40,72,.2) 40%,rgba(20,40,72,.07) 58%,transparent 74%);
  -webkit-mask-image:linear-gradient(135deg,#000 22%,rgba(0,0,0,.35) 46%,transparent 60%);
          mask-image:linear-gradient(135deg,#000 22%,rgba(0,0,0,.35) 46%,transparent 60%)}
/* lower-right inner wall catches it */
.sg-f-lit{opacity:var(--sg-dent,.5);
  background:radial-gradient(closest-side at 44% 43%,transparent 24%,rgba(255,255,255,.5) 42%,rgba(255,255,255,.14) 58%,transparent 72%);
  -webkit-mask-image:linear-gradient(315deg,#000 24%,rgba(0,0,0,.3) 46%,transparent 58%);
          mask-image:linear-gradient(315deg,#000 24%,rgba(0,0,0,.3) 46%,transparent 58%)}
/* folds: a few uneven, broad creases drawn toward the press, fading out in the cloth */
.sg-f-fold{opacity:calc((var(--sg-dent,.5) - .38) * 1.25);
  background:
    conic-gradient(from 0deg,transparent 6deg,rgba(20,40,72,0.075) 20deg,rgba(255,255,255,0.130) 32deg,transparent 46deg,transparent 59deg,rgba(20,40,72,0.052) 70deg,rgba(255,255,255,0.091) 78deg,transparent 89deg,transparent 109deg,rgba(20,40,72,0.068) 126deg,rgba(255,255,255,0.117) 140deg,transparent 157deg,transparent 179deg,rgba(20,40,72,0.045) 191deg,rgba(255,255,255,0.078) 201deg,transparent 213deg,transparent 225deg,rgba(20,40,72,0.075) 240deg,rgba(255,255,255,0.130) 254deg,transparent 269deg,transparent 296deg,rgba(20,40,72,0.056) 307deg,rgba(255,255,255,0.098) 317deg,transparent 328deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 20%,rgba(0,0,0,.8) 38%,rgba(0,0,0,.35) 62%,transparent 86%);
          mask-image:radial-gradient(closest-side,transparent 20%,rgba(0,0,0,.8) 38%,rgba(0,0,0,.35) 62%,transparent 86%)}
body.dark .sg-f-bowl{background:radial-gradient(closest-side at 47% 46%,rgba(0,0,0,.42),rgba(0,0,0,.26) 26%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.03) 72%,transparent)}
body.dark .sg-f-shade{background:radial-gradient(closest-side at 56% 57%,transparent 20%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.16) 58%,transparent 74%)}
body.dark .sg-f-lit{background:radial-gradient(closest-side at 44% 43%,transparent 24%,rgba(150,190,240,.16) 42%,rgba(150,190,240,.05) 58%,transparent 72%)}
body.dark .sg-f-fold{background:conic-gradient(from 0deg,transparent 6deg,rgba(0,0,0,0.240) 20deg,rgba(150,190,240,0.050) 32deg,transparent 46deg,transparent 59deg,rgba(0,0,0,0.168) 70deg,rgba(150,190,240,0.035) 78deg,transparent 89deg,transparent 109deg,rgba(0,0,0,0.216) 126deg,rgba(150,190,240,0.045) 140deg,transparent 157deg,transparent 179deg,rgba(0,0,0,0.144) 191deg,rgba(150,190,240,0.030) 201deg,transparent 213deg,transparent 225deg,rgba(0,0,0,0.240) 240deg,rgba(150,190,240,0.050) 254deg,transparent 269deg,transparent 296deg,rgba(0,0,0,0.180) 307deg,rgba(150,190,240,0.038) 317deg,transparent 328deg)}
/* press + drag: a ridge of cloth bunches up ahead of the finger and taut
   creases pull out behind it. .sg-f-drag is turned to the heading (+x =
   forward) and fades in with --sg-drag (pressed AND moving). */
.sg-fabric > .sg-f-drag{position:absolute;inset:0;display:block;opacity:var(--sg-drag,0);will-change:transform}
.sg-f-drag > i{position:absolute;inset:0;display:block}
.sg-f-bunch{background:radial-gradient(22% 40% at 71% 50%,transparent 36%,rgba(255,255,255,.62) 53%,rgba(20,40,72,.28) 69%,transparent 84%)}
.sg-f-wake{background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(20,40,72,.14) 9px 11px,rgba(255,255,255,.22) 11px 12px,transparent 12px 20px),
    radial-gradient(42% 20% at 30% 50%,rgba(20,40,72,.2),transparent 72%);
  -webkit-mask-image:radial-gradient(46% 26% at 30% 50%,#000 34%,transparent 100%);
          mask-image:radial-gradient(46% 26% at 30% 50%,#000 34%,transparent 100%)}
body.dark .sg-f-bunch{background:radial-gradient(22% 40% at 71% 50%,transparent 36%,rgba(150,190,240,.26) 53%,rgba(0,0,0,.55) 69%,transparent 84%)}
body.dark .sg-f-wake{background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(0,0,0,.42) 9px 11px,rgba(150,190,240,.09) 11px 12px,transparent 12px 20px),
    radial-gradient(42% 20% at 30% 50%,rgba(0,0,0,.5),transparent 72%)}
/* the simulated cloth (soft-fx.js cloth()) replaces the layered dimple when WebGL2 is there */
.sg-cloth{position:fixed;left:0;top:0;pointer-events:none;z-index:2147482990;contain:strict}
@media (hover:none),(prefers-reduced-motion:reduce){.sg-fabric,.sg-cloth{display:none}}
/* one mark under the pointer: the fabric replaces the card sheen dimple and
   button-glow's spotlight (together they drew a second circle). Only for the
   pointer-steered fabric — html.sg-fab is set when soft-fx.js FOLLOWS is on,
   so with the dimple parked the sheen and the button spotlight both stay. */
html.sg-fab .sg-sheen::before,html.sg-fab .vt-spot{display:none!important}

/* ── Page arrival: the page comes up out of a fog ────────────────────────────
   html.sg-lf is set by the head-first script before first paint, so the page
   is born blurred. The fog HOLDS until soft-fx.js adds .sg-lf-go two frames
   after it runs (the page has really painted), then clears from the middle
   outward. Only transform and opacity animate, which the compositor does on
   its own: the old mask-radius animation repainted a full-screen backdrop
   blur every frame, and that is what made arriving on a page (and switching
   category) stutter, worst in Firefox/Zen. If the script never runs, the fog
   lifts after 5 s anyway. */
html.sg-lf::after,html.sg-lf-hand::after{content:"";position:fixed;left:50%;top:50%;width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;
  z-index:2147482994;pointer-events:none;transform:scale(.36);transform-origin:50% 50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sg-wash-base,#E4E9F0) 16%,transparent),color-mix(in srgb,var(--sg-wash-base,#E4E9F0) 44%,transparent));
  -webkit-backdrop-filter:blur(16px) saturate(.8);backdrop-filter:blur(16px) saturate(.8);
  /* a hole in the middle of an oversized veil: scaling the veil up opens the
     hole outward, so the centre clears first and the edges last, and the
     compositor does it without repainting anything */
  -webkit-mask-image:radial-gradient(closest-side,transparent 0%,rgba(0,0,0,.4) 5%,#000 13%);
          mask-image:radial-gradient(closest-side,transparent 0%,rgba(0,0,0,.4) 5%,#000 13%)}
html.sg-lf:not(.sg-lf-go)::after{animation:sg-page-safety 1.9s 5s cubic-bezier(.55,0,.35,1) both}
html.sg-lf.sg-lf-go::after{animation:sg-page-in 1.9s .1s cubic-bezier(.55,0,.35,1) both}
@keyframes sg-page-in{0%{transform:scale(.36);opacity:1}70%{opacity:1}100%{transform:scale(3.4);opacity:0}}
@keyframes sg-page-safety{0%{transform:scale(.36);opacity:1}70%{opacity:1}100%{transform:scale(3.4);opacity:0}}   /* a different name, so .sg-lf-go restarts from full fog */
/* after a splash/loader: it leaves sharp → the fog rolls in → clears from the middle */
html.sg-lf-hand::after{animation:sg-page-hand 2.4s cubic-bezier(.5,0,.35,1) both}
@keyframes sg-page-hand{0%{transform:scale(.36);opacity:0}18%{transform:scale(.36);opacity:1}30%{transform:scale(.4);opacity:1}80%{opacity:1}100%{transform:scale(3.4);opacity:0}}

/* ── Theme + language swaps (soft-fx.js → view transition) ───────────────── */
@property --sg-r{syntax:'<length>';inherits:true;initial-value:0px}
html.sg-vt-theme::view-transition-old(root),html.sg-vt-theme::view-transition-new(root),
html.sg-vt-lang::view-transition-old(root),html.sg-vt-lang::view-transition-new(root){mix-blend-mode:normal}
html.sg-vt-theme::view-transition-old(root){animation:sg-theme-old .75s cubic-bezier(.5,0,.3,1) both}
html.sg-vt-theme::view-transition-new(root){animation:sg-theme-wipe .75s cubic-bezier(.55,0,.25,1) both;
  -webkit-mask-image:radial-gradient(circle at var(--sg-tx,90%) var(--sg-ty,0),#000 calc(var(--sg-r) - 110px),transparent var(--sg-r));
          mask-image:radial-gradient(circle at var(--sg-tx,90%) var(--sg-ty,0),#000 calc(var(--sg-r) - 110px),transparent var(--sg-r))}
@keyframes sg-theme-wipe{from{--sg-r:0px}to{--sg-r:var(--sg-tr,2400px)}}
@keyframes sg-theme-old{to{filter:blur(5px)}}
html.sg-vt-lang::view-transition-old(root){animation:sg-lang-out .24s cubic-bezier(.4,0,1,1) both}
html.sg-vt-lang::view-transition-new(root){animation:sg-lang-in .5s var(--sg-ease) .08s both}
@keyframes sg-lang-out{to{opacity:0;filter:blur(9px);transform:translateY(-5px)}}
@keyframes sg-lang-in{from{opacity:0;filter:blur(11px);transform:translateY(7px)}}
/* during a swap the top bar is part of the page, not pinned above it */
html.sg-vt-theme body.lin-v2 .lin-topbar,html.sg-vt-lang body.lin-v2 .lin-topbar,
html.sg-leaving body.lin-v2 .lin-topbar,html.sg-catgo body.lin-v2 .lin-topbar{view-transition-name:none}
/* fallback where view transitions don't exist: an overlay does the same job */
.sg-swap{position:fixed;inset:0;z-index:2147483300;pointer-events:none}
.sg-swap-theme{clip-path:circle(0 at var(--sg-tx,90%) var(--sg-ty,0));
  transition:clip-path .44s cubic-bezier(.55,0,.25,1),opacity .45s var(--sg-ease)}
.sg-swap-theme.go{clip-path:circle(var(--sg-tr,2400px) at var(--sg-tx,90%) var(--sg-ty,0))}
.sg-swap-lang{background:var(--bg);opacity:0;transition:opacity .22s ease-in}
.sg-swap-lang.go{opacity:.92}
.sg-swap.done{opacity:0;transition:opacity .45s var(--sg-ease)}

/* the sky that rides the theme wipe (soft-fx.js sky()) — its own transition
   layer, so it animates live above the old/new snapshots */
@property --sg-rr{syntax:'<length>';inherits:false;initial-value:0px}
.sg-sky{position:fixed;inset:0;z-index:2147483400;pointer-events:none;overflow:hidden;contain:strict;view-transition-name:sg-sky}
::view-transition-group(sg-sky){animation:none;z-index:10}
::view-transition-new(sg-sky){animation:none}
.sg-sky > *{position:absolute;display:block}
.sg-sky-ring{inset:0;--rc:141,182,226;animation:sg-ring .75s cubic-bezier(.55,0,.25,1) both;
  background:radial-gradient(circle at var(--x) var(--y),transparent calc(var(--sg-rr) - 90px),rgba(var(--rc),.10) calc(var(--sg-rr) - 46px),rgba(var(--rc),.55) calc(var(--sg-rr) - 26px),rgba(var(--rc),.12) calc(var(--sg-rr) - 10px),transparent var(--sg-rr))}
.sg-sky-day .sg-sky-ring{--rc:255,205,120}
@keyframes sg-ring{from{--sg-rr:0px;opacity:1}85%{opacity:1}to{--sg-rr:var(--R);opacity:0}}
.sg-star{border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(196,218,255,.85);opacity:0;animation:sg-star 1.5s ease-out both}
@keyframes sg-star{0%{opacity:0;transform:scale(0)}22%{opacity:1;transform:scale(1.7)}42%{opacity:.45;transform:scale(1)}62%{opacity:1}100%{opacity:0;transform:scale(.8)}}
.sg-mote{border-radius:50%;background:#FFE3A3;box-shadow:0 0 8px 2px rgba(255,210,130,.7);opacity:0;animation:sg-mote 1.7s cubic-bezier(.3,.6,.3,1) both}
@keyframes sg-mote{0%{opacity:0;transform:translateY(8px) scale(.4)}25%{opacity:.95;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(calc(var(--dr) * -1)) scale(.6)}}
.sg-moon{left:var(--x);top:var(--y);width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  box-shadow:inset -14px 9px 0 0 #EAF1FB;filter:drop-shadow(0 0 16px rgba(170,200,240,.75));animation:sg-moon 1.9s cubic-bezier(.2,.7,.3,1) both}
@keyframes sg-moon{0%{transform:translate(0,0) scale(.2) rotate(-50deg);opacity:0}16%{opacity:1}
  70%{transform:translate(var(--mx),var(--my)) scale(1.35) rotate(8deg);opacity:1}100%{transform:translate(calc(var(--mx) * 1.2),calc(var(--my) * 1.2)) scale(1.2) rotate(14deg);opacity:0}}
.sg-sun{left:var(--x);top:var(--y);width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  background:radial-gradient(circle,#FFF8E1 0 28%,#FFD27A 52%,rgba(255,190,90,0) 72%);animation:sg-sun 1.7s cubic-bezier(.2,.7,.3,1) both}
.sg-sun i{position:absolute;inset:-64px;border-radius:50%;display:block;
  background:repeating-conic-gradient(from 0deg,rgba(255,212,130,.5) 0 4deg,transparent 4deg 20deg);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 68%);mask-image:radial-gradient(circle,#000 18%,transparent 68%);animation:sg-rays 1.7s linear both}
@keyframes sg-sun{0%{transform:scale(0);opacity:0}18%{opacity:1;transform:scale(1.3)}
  65%{transform:translate(var(--mx),var(--my)) scale(1.6);opacity:.95}100%{transform:translate(calc(var(--mx) * 1.2),calc(var(--my) * 1.2)) scale(1.4);opacity:0}}
@keyframes sg-rays{to{transform:rotate(80deg)}}
.sg-glare{inset:-20%;opacity:0;animation:sg-glare 1.3s .12s cubic-bezier(.3,.6,.3,1) both;
  background:linear-gradient(115deg,transparent 36%,rgba(255,232,190,.28) 47%,rgba(255,250,235,.42) 50%,rgba(255,232,190,.24) 53%,transparent 64%)}
@keyframes sg-glare{0%{transform:translateX(55%);opacity:0}20%{opacity:1}100%{transform:translateX(-55%);opacity:0}}
#darkToggle.sg-tg-spin{animation:sg-tg-spin .8s cubic-bezier(.3,1.4,.5,1)}
@keyframes sg-tg-spin{0%{transform:rotate(0) scale(1)}35%{transform:rotate(200deg) scale(.8)}100%{transform:rotate(360deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.sg-sky{display:none}}

/* ── Switching category: a wash in its ink, its emblem, its name ─────────────
   html.sg-catgo::before is the same wash painted before first paint (head
   script), so there's never a frame of the new page before the wash. */
html{--sg-wash-base:#E4E9F0;--sg-wash-ink:#1E4F8F;--sg-wash-text:#0E1E33}
html.os-dk{--sg-wash-base:#0B1628;--sg-wash-text:#EEF3F9}
html[data-sg-cat=knowledge],.sg-catwash[data-cat=knowledge]{--sg-wash-ink:#2A63AB}
html[data-sg-cat=infirmary],.sg-catwash[data-cat=infirmary]{--sg-wash-ink:#C23A43}
html[data-sg-cat=social],.sg-catwash[data-cat=social]{--sg-wash-ink:#4F8BD0}
html[data-sg-cat=dev],.sg-catwash[data-cat=dev]{--sg-wash-ink:#6A7788}
html.sg-catgo::before,.sg-catwash{
  background:
    radial-gradient(70% 60% at 50% 44%,color-mix(in srgb,var(--sg-wash-ink) 34%,var(--sg-wash-base)) 0%,transparent 70%),
    radial-gradient(120% 90% at 50% 110%,color-mix(in srgb,var(--sg-wash-ink) 16%,var(--sg-wash-base)),var(--sg-wash-base) 70%)}
html.sg-catgo::before{content:"";position:fixed;inset:0;z-index:2147482995}
.sg-catwash{position:fixed;inset:0;z-index:2147482995;display:flex;will-change:opacity,transform;align-items:center;justify-content:center;
  pointer-events:none;color:var(--sg-wash-text)}
.sg-cw-in{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.sg-cw-emb{width:132px;filter:drop-shadow(0 14px 24px color-mix(in srgb,var(--sg-wash-ink) 40%,transparent))}
.sg-cw-emb svg{width:100%;height:auto;display:block}
.sg-cw-name{font-family:var(--font-heading,inherit);font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.sg-cw-sub{font-size:.66rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.55}
/* leaving: the wash fogs in over the old page */
.sg-catwash.sg-cw-enter{animation:sg-cw-enter .34s cubic-bezier(.3,.6,.3,1) both}
.sg-catwash.sg-cw-enter .sg-cw-in{animation:sg-cw-rise .5s var(--sg-ease) .06s both}
@keyframes sg-cw-enter{from{opacity:0}}
@keyframes sg-cw-rise{from{opacity:0;transform:translateY(14px) scale(.9);filter:blur(8px)}}
/* arriving: the wash lifts off like mist while the page clears underneath */
.sg-catwash.sg-cw-out{animation:sg-cw-out .75s cubic-bezier(.4,0,.2,1) both}
.sg-catwash.sg-cw-out .sg-cw-in{animation:sg-cw-float .75s cubic-bezier(.4,0,.2,1) both}
@keyframes sg-cw-out{to{opacity:0;transform:scale(1.04)}}
@keyframes sg-cw-float{to{transform:translateY(-18px) scale(1.06);filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){
  html.sg-lf::after,html.sg-lf-hand::after{display:none}
  html.sg-catgo::before,.sg-catwash{display:none}
}

/* UI never underlines on hover — links styled as buttons, chips, tabs, cards, nav */
a[class]:hover,a[class]:focus-visible,button:hover,.sidebar-link:hover,.sec-pill:hover,.lin-tab:hover,
.qo-btn:hover,.btn-login:hover,.fork-card:hover,.fork-card *:hover,.ch-card:hover,.ch-card *:hover,
header a:hover,.lin-topbar a:hover,.landing-nav a:hover,.log-item:hover,.lin-study-item:hover{text-decoration:none!important}

/* ── Sidebar wheel (soft-fx.js adds html.sg-wheel and the per-row vars) ─────
   Rows are ribbons: a band pressed out of the glass that reaches the curve of
   the semicircle at its height (--sg-w) and ends in a folded twist, like the
   bands of the impossible shapes. Each category has its own ink. */
@media (hover:hover) and (min-width:901px){
  html.os-semi.sg-wheel .sidebar.sidebar{
    padding:calc(var(--os-semi-r) - 26px) 0!important;
    scroll-snap-type:y proximity;
    overscroll-behavior:contain;
  }
  html.os-semi.sg-wheel .sidebar .sidebar-group.part > .part-body{display:block!important;max-height:none!important;overflow:visible!important}
  html.os-semi.sg-wheel .sidebar .part-caret,
  html.os-semi.sg-wheel .sidebar .sg-emb ~ .part-icon{display:none!important}
  /* the same gap between every category */
  html.os-semi.sg-wheel .sidebar .sidebar-group.part{margin:0 0 30px!important;padding:0!important;border:0!important}
  html.os-semi.sg-wheel .sidebar .sidebar-group.part:last-child{margin-bottom:0!important}
  .sidebar .sg-cat-knowledge{--sg-ink:#1E4F8F;--sg-ink-2:#3A78C2;--sg-ink-d:#12294A}
  .sidebar .sg-cat-infirmary{--sg-ink:#B3323A;--sg-ink-2:#D4555C;--sg-ink-d:#7A1822}
  .sidebar .sg-cat-social{--sg-ink:#3A78C2;--sg-ink-2:#8DB6E2;--sg-ink-d:#1E4F8F}
  .sidebar .sg-cat-dev{--sg-ink:#5E6B7B;--sg-ink-2:#8593A5;--sg-ink-d:#3B4553}
  body.dark .sidebar .sg-cat-knowledge{--sg-ink:#3A78C2;--sg-ink-2:#8DB6E2}
  body.dark .sidebar .sg-cat-social{--sg-ink:#8DB6E2;--sg-ink-2:#C3DAF1;--sg-ink-d:#3A78C2}

  /* every wheel row: width from the arc, tilt + fade from the centre line */
  html.os-semi.sg-wheel .sidebar .sidebar-logo,
  html.os-semi.sg-wheel .sidebar .part-toggle,
  html.os-semi.sg-wheel .sidebar .sidebar-link,
  html.os-semi.sg-wheel .sidebar .sidebar-label{
    width:var(--sg-w,220px)!important;max-width:none!important;box-sizing:border-box;
    transform-origin:0 50%;
    transform:perspective(640px) rotateX(var(--sg-rx,0deg)) scale(var(--sg-s,1))!important;
    opacity:var(--sg-o,1)!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    scroll-snap-align:center;
    transition:background .25s,color .2s,box-shadow .25s!important;
  }
  /* category head: the emblem + name, no band */
  html.os-semi.sg-wheel .sidebar .part-toggle{
    display:flex!important;align-items:center;gap:.55rem;height:44px;padding:0 0 0 14px!important;
    background:none!important;box-shadow:none!important;cursor:default;
    font-size:.72rem!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sg-ink,var(--text))!important}
  body.dark .sidebar .part-toggle{color:var(--sg-ink-2,var(--text))!important}
  .sidebar .sg-emb{flex:none;width:34px;height:34px;display:block;filter:drop-shadow(0 3px 5px rgba(6,16,34,.25))}
  .sidebar .sg-emb svg{width:100%;height:100%;display:block}
  html.os-semi.sg-wheel .sidebar .sidebar-label{
    height:26px;display:flex!important;align-items:flex-end;padding:0 0 3px 22px!important;margin:6px 0 0!important;
    font-size:.64rem!important;letter-spacing:.16em;text-transform:uppercase;color:var(--text3)!important;background:none!important}

  /* the ribbon */
  html.os-semi.sg-wheel .sidebar .sidebar-link{
    position:relative;display:flex!important;align-items:center;height:36px;margin:6px 0!important;
    padding:0 34px 0 20px!important;border-radius:0!important;
    font-size:.84rem!important;color:var(--text)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),
      linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 10%,var(--surface)) 22px)!important;
    clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
  }
  body.dark.dark .sidebar .sidebar-link{background:
      linear-gradient(180deg,rgba(170,200,240,.10),rgba(170,200,240,0) 55%),
      linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 22%,var(--surface)) 22px)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sub{padding-left:32px!important}
  /* the fold: the band twists away at its end, showing its other face */
  html.os-semi.sg-wheel .sidebar .sidebar-link::after{
    content:"";position:absolute;top:0;bottom:0;right:0;width:30px;pointer-events:none;
    background:linear-gradient(180deg,var(--sg-ink-2,var(--accent)),var(--sg-ink,var(--accent)));
    clip-path:polygon(62% 0,100% 0,54% 100%,16% 100%);
    opacity:.9;transition:width .3s var(--sg-ease),opacity .2s;
  }
  /* hover: the ribbon is pressed into the glass; the fold opens a little */
  html.os-semi.sg-wheel .sidebar .sidebar-link:hover{
    background:
      linear-gradient(180deg,rgba(6,16,34,.10),rgba(6,16,34,0) 60%),
      linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 20%,var(--surface)) 22px)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link:hover::after{width:40px;opacity:1}
  /* the page you are on: the ribbon takes its category's ink */
  html.os-semi.sg-wheel .sidebar .sidebar-link.active,
  html.os-semi.sg-wheel .sidebar .sidebar-link.on{
    color:#fff!important;font-weight:700;
    background:
      linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),
      linear-gradient(90deg,transparent 0,var(--sg-ink,var(--accent)) 22px)!important;
    box-shadow:none!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.active::after,
  html.os-semi.sg-wheel .sidebar .sidebar-link.on::after{background:linear-gradient(180deg,var(--sg-ink-d,#0A1A2E),var(--sg-ink,var(--accent)));opacity:1}
  html.os-semi.sg-wheel .sidebar .sidebar-link.active::before{display:none}
  html.os-semi.sg-wheel .sidebar .sidebar-logo{height:44px;padding-left:14px!important}
  /* chapter sub-tabs hang off their parent ribbon: a thread runs down from it
     and each chapter is a slimmer, lighter ribbon tied onto the thread */
  html.os-semi.sg-wheel .sidebar .sb-subtabs{position:relative;margin:-2px 0 8px 22px;padding-left:0}
  html.os-semi.sg-wheel .sidebar .sb-subtabs::before{content:"";position:absolute;left:4px;top:0;bottom:16px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--sg-ink,var(--accent)),color-mix(in srgb,var(--sg-ink,var(--accent)) 25%,transparent))}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub{
    width:calc(var(--sg-w,220px) - 22px)!important;height:28px;margin:4px 0!important;padding:0 28px 0 22px!important;
    font-size:.76rem!important;color:var(--text2,var(--text))!important;
    background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 6%,var(--surface)) 18px)!important}
  body.dark.dark .sidebar .sidebar-link.sb-sub{background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 13%,var(--surface)) 18px)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub::before{content:"";position:absolute;left:5px;top:50%;width:11px;height:2px;margin-top:-1px;border-radius:2px;
    background:color-mix(in srgb,var(--sg-ink,var(--accent)) 60%,transparent);display:block!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub::after{width:18px;opacity:.55}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub:hover{color:var(--text)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub.on{color:#fff!important;
    background:linear-gradient(90deg,transparent 0,var(--sg-ink,var(--accent)) 18px)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub.on::before{background:var(--sg-ink,var(--accent));width:14px}
}
/* sub-tabs outside the wheel (phones, the drawer): an indented tree */
.sidebar .sb-subtabs{margin:.1rem 0 .35rem 1.6rem;border-left:2px solid color-mix(in srgb,var(--accent,#2A63AB) 35%,transparent);padding-left:.15rem}
.sidebar .sb-subtabs .sidebar-link.sb-sub{font-size:.78rem;padding-top:.32rem;padding-bottom:.32rem}
.sidebar .sidebar-group.part.open > .part-body{max-height:2000px}

/* ── Mobile sidebar (soft-fx.js mobileNav) ──────────────────────────────────
   Below 1025px the rail is an off-canvas drawer. A soft menu pill in the top
   bar opens it; the drawer glides in over a frosted scrim, its rows float in
   one after another, and a thumb can pull it out from the left edge or push
   it back. The inline toggle and draft.js's backdrop stay out of the way. */
.sg-menu,.sg-menu-x,.sg-scrim{display:none}
@media (max-width:1024px){
  html.sg-mnav .sg-menu{display:inline-flex;flex:0 0 36px;order:-3;width:36px;height:36px;margin:0 4px 0 0;padding:0;border:0;border-radius:12px;
    position:relative;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding-left:10px;cursor:pointer;
    background:var(--surface);color:var(--text);box-shadow:var(--sg-raise-xs),var(--sg-rim);-webkit-tap-highlight-color:transparent;
    transition:transform .3s var(--sg-ease),box-shadow .3s var(--sg-ease)}
  html.sg-mnav .sg-menu i{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:width .35s var(--sg-ease)}
  html.sg-mnav .sg-menu i:nth-child(2){width:10px}
  html.sg-mnav .sg-menu i:nth-child(3){width:13px}
  html.sg-mnav .sg-menu:hover i{width:16px}
  html.sg-mnav .sg-menu:active{transform:scale(.94);box-shadow:var(--sg-press-sm)}
  html.sg-mnav .sg-menu.sg-menu-float{position:fixed;top:10px;left:10px;z-index:1100}
  html.sg-mnav .sidebar.sidebar{z-index:1200!important;border-radius:0 26px 26px 0!important;
    transition:transform .5s cubic-bezier(.2,.85,.25,1),box-shadow .5s!important}
  html.sg-mnav .sidebar.sidebar.open{box-shadow:18px 0 48px rgba(8,14,24,.28)!important}
  html.sg-nav-drag .sidebar.sidebar{transition:none!important}
  html.sg-mnav .sidebar .sg-menu-x{display:block;position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:var(--surface);box-shadow:var(--sg-raise-xs),var(--sg-rim);color:var(--text2,var(--text));-webkit-tap-highlight-color:transparent}
  html.sg-mnav .sidebar .sg-menu-x i{position:absolute;left:11px;top:17px;width:14px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
  html.sg-mnav .sidebar .sg-menu-x i + i{transform:rotate(-45deg)}
  html.sg-mnav .sidebar .sg-menu-x:active{transform:scale(.92)}
  html.sg-mnav .sidebar.sidebar{padding-top:62px!important}
  html.sg-mnav .sg-scrim{display:block;position:fixed;inset:0;z-index:1190;opacity:0;pointer-events:none;
    background:rgba(8,14,24,.34);-webkit-backdrop-filter:blur(6px) saturate(1.15);backdrop-filter:blur(6px) saturate(1.15);transition:opacity .45s var(--sg-ease)}
  html.sg-nav-open .sg-scrim{opacity:1;pointer-events:auto}
  html.sg-nav-drag .sg-scrim{transition:none}
  html.sg-nav-open,html.sg-nav-open body{overflow:hidden!important}
  html.sg-mnav .sm-backdrop{display:none!important}
  html.sg-mnav .sidebar.sidebar{width:min(86vw,320px)!important}
  html.sg-mnav .sidebar .sidebar-link{white-space:normal!important;height:auto!important;min-height:36px;line-height:1.3!important;padding-top:6px!important;padding-bottom:6px!important}
  html.sg-mnav .sidebar .sidebar-label .vi-ico{margin-right:7px}
  /* the category pills, carried in from the hidden top-bar switcher */
  html.sg-mnav .sidebar .sg-dsec{position:absolute;top:12px;left:12px;right:60px;display:flex;gap:6px;z-index:2}
  html.sg-mnav .sidebar .sg-dsec .sec-pill{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    height:44px;padding:3px 2px 2px;border-radius:14px;text-decoration:none!important;color:var(--text2,var(--text));
    background:var(--surface);box-shadow:var(--sg-raise-xs),var(--sg-rim);transition:transform .25s var(--sg-ease),box-shadow .25s var(--sg-ease)}
  html.sg-mnav .sidebar .sg-dsec .sec-pill.active{box-shadow:var(--sg-press-sm);color:var(--accent,var(--text))}
  html.sg-mnav .sidebar .sg-dsec .sec-pill:active{transform:scale(.95)}
  html.sg-mnav .sidebar .sg-dsec .sec-ico{width:22px;height:22px;display:block;margin:0}
  html.sg-mnav .sidebar .sg-dsec .sec-ico svg{width:100%;height:100%;display:block}
  html.sg-mnav .sidebar .sg-dsec .sec-pill-label{display:block;font-size:.6rem;line-height:1.1;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  html.sg-mnav .sidebar.sidebar{padding-top:70px!important}
  html.sg-mnav .sidebar .sg-menu-x{top:16px}
  html.sg-nav-open .sidebar .sg-dsec .sec-pill{animation:sgNavIn .5s var(--sg-ease) backwards}
  html.sg-nav-open .sidebar .sg-dsec .sec-pill:nth-child(2){animation-delay:.05s}
  html.sg-nav-open .sidebar .sg-dsec .sec-pill:nth-child(3){animation-delay:.1s}
  html.sg-nav-open .sidebar :is(.sidebar-logo,.part-toggle,.sidebar-label,.sidebar-link){
    animation:sgNavIn .5s var(--sg-ease) backwards;animation-delay:calc(var(--sg-i,0) * 22ms + 90ms)}
}
@keyframes sgNavIn{from{opacity:0;transform:translateX(-22px);filter:blur(3px)}}
@media (prefers-reduced-motion:reduce){html.sg-nav-open .sidebar *{animation:none!important}}

/* ── Landing bar for visitors who aren't signed in (soft-fx.js guestBar) ────
   Wordmark, the page's anchors, 中/EN, theme, Log in and Sign up — nothing
   that only makes sense with an account. */
html.sg-guestbar .sec-switcher,
html.sg-guestbar .lin-study-wrap,
html.sg-guestbar .tut-replay,
html.sg-guestbar .lin-search,
html.sg-guestbar .nb-bell,html.sg-guestbar .nb-pop,
html.sg-guestbar .sg-menu{display:none!important}
html.sg-guestbar .sg-signup{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 1.05rem;margin-left:.5rem;border-radius:999px;
  font-weight:700;font-size:.82rem;letter-spacing:.04em;text-decoration:none!important;white-space:nowrap;color:#fff!important;
  background:linear-gradient(135deg,var(--os-crimson,#C23A43),#9E2A33);box-shadow:var(--sg-raise-xs),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s var(--sg-ease),box-shadow .25s var(--sg-ease)}
html.sg-guestbar .sg-signup:hover{transform:translateY(-1px)}
html.sg-guestbar .sg-signup:active{transform:scale(.96);box-shadow:var(--sg-press-sm)}
.sg-signup{display:none}

/* ── Splash versions (index.html picks data-sky / data-scene / data-fin) ─────
   5 skies per theme × 5 scenes × 2 finales = 50 per theme. A sky only swaps
   the palette the silhouettes already use and adds its own particles. */
html body #v-splash[data-sky=night]{--vbg1:#0B1A38;--vbg2:#060E22;--vbg3:#02060F;--vback:#101E3E;--vfront:#040A18;--vhosp:#0C1A36;--vgold:#F2D98B}
html body #v-splash[data-sky=aurora]{--vbg1:#0E2C3A;--vbg2:#0A1A2C;--vbg3:#040A14;--vback:#0F2A36;--vfront:#03090F;--vhosp:#0B2230;--vgold:#9FF0D0;--vacc:#7FE3C4}
html body #v-splash[data-sky=storm]{--vbg1:#2A3645;--vbg2:#18212C;--vbg3:#0B1016;--vback:#222C38;--vfront:#0A0F15;--vhosp:#1C2530;--vgold:#BFD4EA}
html body #v-splash[data-sky=deep]{--vbg1:#0B3B55;--vbg2:#07233A;--vbg3:#03101D;--vback:#0A2D44;--vfront:#021019;--vhosp:#08263A;--vgold:#7FE3F0;--vacc:#7FE3F0}
html body #v-splash[data-sky=dawn]{--vbg1:#FFE3D0;--vbg2:#F3E6EE;--vbg3:#D9E6F4;--vback:#C9B7CC;--vfront:#8E86A8;--vhosp:#7C7FA6;--vgold:#FFFFFF}
html body #v-splash[data-sky=day]{--vbg1:#FFFFFF;--vbg2:#E6F1FB;--vbg3:#C9DDF0;--vback:#B8CCE2;--vfront:#7F9DC2;--vhosp:#5F84B3;--vgold:#FFFFFF}
html body #v-splash[data-sky=sunset]{--vbg1:#FFD2A6;--vbg2:#F6B7A4;--vbg3:#C9A6C9;--vback:#C58C8E;--vfront:#7E5A7A;--vhosp:#8A5E80;--vgold:#FFE8B0}
html body #v-splash[data-sky=snow]{--vbg1:#FFFFFF;--vbg2:#EEF3F8;--vbg3:#DCE6F0;--vback:#C7D3E0;--vfront:#9FB2C8;--vhosp:#8EA4BE;--vgold:#FFFFFF}
html body #v-splash[data-sky=spring]{--vbg1:#F4FFF4;--vbg2:#E4F4EA;--vbg3:#CFE6DA;--vback:#A9CDB6;--vfront:#6E9E84;--vhosp:#6A9483;--vgold:#FFFFFF;--vacc:#2F8A5B}
html #v-splash > div.sg-skyfx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sg-skyfx i{position:absolute;display:block}
.sg-skyfx .st{width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(200,220,255,.8);animation:sg-tw 3.2s ease-in-out infinite}
@keyframes sg-tw{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.sg-skyfx .moon{right:12%;top:12%;width:64px;height:64px;border-radius:50%;box-shadow:inset -16px 10px 0 0 #EEF3FB;filter:drop-shadow(0 0 18px rgba(200,220,255,.6));animation:sg-float 9s ease-in-out infinite}
.sg-skyfx .au{left:-10%;right:-10%;height:34%;border-radius:50%;opacity:.55;mix-blend-mode:screen;animation:sg-au 10s ease-in-out infinite alternate}
.sg-skyfx .a1{top:6%;background:radial-gradient(60% 50% at 40% 50%,rgba(80,240,170,.55),transparent 70%)}
.sg-skyfx .a2{top:14%;background:radial-gradient(50% 45% at 65% 50%,rgba(90,190,255,.45),transparent 70%);animation-duration:13s}
.sg-skyfx .a3{top:2%;background:radial-gradient(40% 40% at 25% 50%,rgba(170,110,255,.35),transparent 70%);animation-duration:16s}
@keyframes sg-au{from{transform:translateX(-4%) skewX(-8deg) scaleY(.9)}to{transform:translateX(5%) skewX(10deg) scaleY(1.15)}}
.sg-skyfx .rain{inset:-20% 0 0;background:repeating-linear-gradient(105deg,transparent 0 22px,rgba(190,215,240,.22) 22px 23px);animation:sg-rain .5s linear infinite}
.sg-skyfx .rain.r2{background:repeating-linear-gradient(105deg,transparent 0 34px,rgba(190,215,240,.14) 34px 35px);animation-duration:.8s}
@keyframes sg-rain{to{transform:translate(-14px,60px)}}
.sg-skyfx .flash{inset:0;background:rgba(220,235,255,.5);opacity:0;animation:sg-flash 7s linear infinite 1.6s}
@keyframes sg-flash{0%,93%,100%{opacity:0}94%{opacity:.8}95%{opacity:.1}96%{opacity:.6}97%{opacity:0}}
.sg-skyfx .bub{bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;border:1px solid rgba(160,235,255,.45);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),transparent 45%);animation:sg-bub linear infinite}
@keyframes sg-bub{to{transform:translateY(-110vh) translateX(18px)}}
.sg-skyfx .caus{inset:0;background:repeating-radial-gradient(circle at 30% -10%,rgba(127,227,240,.035) 0 18px,transparent 18px 44px);animation:sg-float 8s ease-in-out infinite}
.sg-skyfx .sun{left:50%;bottom:30%;width:220px;height:220px;margin-left:-110px;border-radius:50%;background:radial-gradient(circle,#FFF6E0 0 34%,rgba(255,190,120,.55) 52%,transparent 70%);animation:sg-rise 7s cubic-bezier(.2,.7,.3,1) both}
[data-sky=sunset] .sg-skyfx .sun{background:radial-gradient(circle,#FFE0B0 0 36%,rgba(255,120,90,.5) 54%,transparent 72%);animation-name:sg-set}
@keyframes sg-rise{from{transform:translateY(80px);opacity:.4}}
@keyframes sg-set{from{transform:translateY(-40px)}to{transform:translateY(50px)}}
.sg-skyfx .haze{left:0;right:0;bottom:24%;height:30%;background:linear-gradient(to top,rgba(255,255,255,.4),transparent)}
.sg-skyfx .cl{left:-30%;width:var(--w);height:calc(var(--w) * .32);border-radius:50%;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.9),rgba(255,255,255,0) 68%);animation:sg-cloud linear infinite}
@keyframes sg-cloud{to{transform:translateX(160vw)}}
.sg-skyfx .sn{top:-12px;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(150,180,210,.6);animation:sg-snow linear infinite}
@keyframes sg-snow{to{transform:translate(var(--dx),110vh)}}
.sg-skyfx .pt{top:-14px;width:10px;height:7px;border-radius:70% 0;background:#F4A9C0;opacity:.85;animation:sg-petal linear infinite}
@keyframes sg-petal{to{transform:translate(var(--dx),110vh) rotate(var(--r))}}
@keyframes sg-float{50%{transform:translateY(-8px)}}
#v-splash .sg-lamp{animation:sg-lamp 2.6s ease-in-out infinite}
@keyframes sg-lamp{50%{opacity:.08}}
#v-splash .sg-flag{transform-origin:602px 146px;animation:sg-flagw 1.6s ease-in-out infinite}
@keyframes sg-flagw{50%{transform:scaleX(.8) skewY(4deg)}}
/* the second finale: a burst of sparks off the mark instead of a ring */
#v-splash[data-fin=burst].sg-welcome .v-tile::before{display:none}
.sg-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.sg-burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--vacc);box-shadow:0 0 10px var(--vacc);
  transform:rotate(var(--a)) translateX(0);opacity:0;animation:sg-spark .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes sg-spark{0%{opacity:1;transform:rotate(var(--a)) translateX(30px) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateX(150px) scale(.3)}}
/* splash on phones and short landscape screens */
@media (max-width:600px){
  #v-splash{gap:.55rem!important;padding:0 16px min(18vh,160px)}
  #v-splash .v-name{font-size:1.7rem}
  #v-splash .v-tag{font-size:.6rem;letter-spacing:.12em;text-align:center}
  .sg-vital{min-width:0;padding:.25rem .4rem}.sg-vital .k{font-size:.46rem}.sg-vital .v{font-size:.78rem}.sg-vital .u{display:none}
  .sg-vital:nth-child(even){top:46px}
  .sg-skyfx .moon{width:44px;height:44px;box-shadow:inset -11px 7px 0 0 #EEF3FB}
  .sg-skyfx .sun{width:150px;height:150px;margin-left:-75px}
}
@media (max-width:600px){#v-splash .sg-ico-heart,#v-splash .sg-ico-bone{display:none}}
@media (max-width:360px){.sg-vitals{display:none}}
@media (max-height:560px) and (orientation:landscape){
  #v-splash{flex-direction:row!important;flex-wrap:wrap;align-content:center;justify-content:center;column-gap:1.4rem;row-gap:.35rem;padding:0 24px 0!important}
  #v-splash .v-hosp,#v-splash .v-forest{height:40vh}
  #v-splash .v-tile{transform:scale(.75)}
  .sg-vitals,.sg-parts,#v-splash .v-rule{display:none!important}
  .sg-fact{flex-basis:100%;font-size:.8rem;min-height:0}
  .sg-prog{flex-basis:100%}
  .sg-skip{top:8px}
  .sg-icons{display:none}
}
@media (prefers-reduced-motion:reduce){.sg-skyfx i{animation:none!important}}

/* ── Reading bar, in detail (soft-fx.js readBar) ────────────────────────────
   Ticks for every section (current one pulses, read ones turn green; hover
   for the name, click to jump), and a chip over the bead with the section,
   the percentage and the time left. Only the ticks take the pointer. */
.sg-read-ticks{position:absolute;inset:0;pointer-events:none}
.sg-read-ticks i{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:auto;cursor:pointer;
  background:var(--surface);box-shadow:var(--sg-raise-xs),inset 0 0 0 1.5px color-mix(in srgb,var(--text3,#8593A5) 55%,transparent);
  transition:transform .3s var(--sg-ease),background .3s,box-shadow .3s}
.sg-read-ticks i::before{content:"";position:absolute;inset:-7px}                /* a bigger hit area than the dot */
.sg-read-ticks i.past{box-shadow:var(--sg-raise-xs),inset 0 0 0 1.5px var(--accent)}
.sg-read-ticks i.read{background:var(--green,#1F8A5B);box-shadow:0 0 8px color-mix(in srgb,var(--green,#1F8A5B) 60%,transparent)}
.sg-read-ticks i.cur{transform:scale(1.45);box-shadow:var(--sg-raise-xs),inset 0 0 0 2px var(--sg-warm,#E0626A);animation:sg-tick 1.8s ease-in-out infinite}
.sg-read-ticks i:hover{transform:scale(1.7)}
@keyframes sg-tick{50%{box-shadow:var(--sg-raise-xs),inset 0 0 0 2px var(--sg-warm,#E0626A),0 0 0 5px color-mix(in srgb,var(--sg-warm,#E0626A) 18%,transparent)}}
.sg-read-chip{position:absolute;top:14px;left:var(--cx,0%);transform:translate(-50%,-4px);display:flex;align-items:center;gap:.45rem;max-width:min(520px,80vw);
  padding:.32rem .7rem;border-radius:99px;font-size:.72rem;line-height:1.2;white-space:nowrap;color:var(--text2,var(--text));
  background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--sg-raise-xs),var(--sg-rim);
  opacity:0;pointer-events:none;transition:opacity .35s var(--sg-ease),transform .35s var(--sg-ease),left .12s linear}
.sg-read.talk .sg-read-chip{opacity:1;transform:translate(-50%,0)}
.sg-rc-sec{font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
.sg-rc-t{overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:600;color:var(--text)}
.sg-rc-meta{font-variant-numeric:tabular-nums;color:var(--text3,var(--text2))}
.sg-read.end .sg-rc-meta{color:var(--green,#1F8A5B);font-weight:700}
.sg-read-tip{position:absolute;top:-30px;transform:translateX(-50%);padding:.25rem .6rem;border-radius:9px;font-size:.7rem;white-space:nowrap;color:#fff;background:rgba(14,30,51,.9);
  opacity:0;pointer-events:none;transition:opacity .2s}
.sg-read.tipping .sg-read-tip{opacity:1}
.sg-read.tipping .sg-read-chip{opacity:0}
@media (max-width:640px){.sg-read-ticks i{width:6px;height:6px;margin:-3px 0 0 -3px}.sg-read-chip{font-size:.66rem;max-width:88vw}.sg-rc-t{max-width:40vw}}
@media (prefers-reduced-motion:reduce){.sg-read-ticks i.cur{animation:none}}