/* Regs Atlas v3: playful, clean, minimal. Pastel hues h0-h5 per branch, ink lines, one dark ink. */
:root{
  --paper:#FBFAF7;--panel:#FFFFFF;--ink:#16181D;--muted:#5F6470;--faint:#666B76;--line:#E7E4DD;--wash:#F3F1EC;--dot:#E4E1D9;--wire:#C9C4B8;
  --h0:#DCE6FF;--h0i:#2541A3;--h1:#D3F1E3;--h1i:#126B4D;--h2:#FFE1D1;--h2i:#AB4A17;
  --h3:#E8E0FF;--h3i:#5636B0;--h4:#FFF0C2;--h4i:#7D5A00;--h5:#FFDCE3;--h5i:#A8243F;
  --accent:#3D5BD9;--warn:#B8341D;--warn-bg:#FFE0D9;--num:#975700;
  --tip-bg:#16181D;--tip-fg:#F7F6F2;
  --head:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --shadow:0 1px 2px rgba(22,24,29,.06),0 6px 18px rgba(22,24,29,.06);
  --pop:3px 3px 0 var(--ink);
  --exam-tint:#FFF6E5;--exam-ink:#523B06;--exam-bg:#FFF6E5;--exam-panel:#FFFDF9;--exam-fg:#523B06;--exam-dim:#8A6D24;--exam-gold:#C4890A;--exam-line:#F0DCB0;
  /* Meteorology: the second premium subject, in sky blue instead of exam gold */
  --met-bg:#EAF3FD;--met-panel:#F7FBFF;--met-fg:#0E3A66;--met-dim:#4D6B8E;--met-sky:#2470CC;--met-line:#C8DCF2;--met-glow:#7CC4FF;--ld-sky1:#BFDDFB;--ld-sky2:#EEF6FF;
  /* Real-world materials in lesson pictures: the same in both themes on purpose (paint, signs, lights at night) */
  --m-asphalt:#5D626C;--m-apron:#80858F;--m-grass:#6E8F5E;--m-paint:#F7F6F0;--m-yellow:#F2C230;--m-red:#D9362B;--m-black:#17181C;--m-white:#FFFFFF;
  --m-night:#0D1017;--m-saffron:#FF9933;--m-igreen:#138808;--m-chakra:#000080;--m-nrwy:#252A35;--m-ntext:#AEB5C2;--m-light:#FFF4D6;--m-green:#2FD27C;--m-blue:#4A86FF;--m-lred:#FF4B3E;--m-lyellow:#FFC83A;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#111318;--panel:#1A1D24;--ink:#ECEDF0;--muted:#A4A9B4;--faint:#8E94A0;--line:#2B2F38;--wash:#20242C;--dot:#252932;--wire:#454B57;
  --h0:#243258;--h0i:#B8C9FF;--h1:#173D31;--h1i:#9BE3C3;--h2:#4A2A1B;--h2i:#FFC3A2;
  --h3:#33285A;--h3i:#D2C4FF;--h4:#40361A;--h4i:#FFE08A;--h5:#4A2029;--h5i:#FFB3C2;
  --accent:#8EA6FF;--warn:#FF8A73;--warn-bg:#4A221B;--num:#FFC266;--tip-bg:#ECEDF0;--tip-fg:#16181D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);color-scheme:dark;
  --exam-tint:#382F18;--exam-ink:#FFD166;--exam-bg:#2A2312;--exam-panel:#382F18;--exam-fg:#FFF3D6;--exam-dim:#DEC892;--exam-gold:#FFD166;--exam-line:#544622;
  --met-bg:#0F1C2C;--met-panel:#15273C;--met-fg:#DDEBFF;--met-dim:#97B2D1;--met-sky:#7DB8FF;--met-line:#26415F;--met-glow:#4FA3FF;--ld-sky1:#0A1A33;--ld-sky2:#173253}}
:root[data-theme="dark"]{
  --paper:#111318;--panel:#1A1D24;--ink:#ECEDF0;--muted:#A4A9B4;--faint:#8E94A0;--line:#2B2F38;--wash:#20242C;--dot:#252932;--wire:#454B57;
  --h0:#243258;--h0i:#B8C9FF;--h1:#173D31;--h1i:#9BE3C3;--h2:#4A2A1B;--h2i:#FFC3A2;
  --h3:#33285A;--h3i:#D2C4FF;--h4:#40361A;--h4i:#FFE08A;--h5:#4A2029;--h5i:#FFB3C2;
  --accent:#8EA6FF;--warn:#FF8A73;--warn-bg:#4A221B;--num:#FFC266;--tip-bg:#ECEDF0;--tip-fg:#16181D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);color-scheme:dark;
  --exam-tint:#382F18;--exam-ink:#FFD166;--exam-bg:#2A2312;--exam-panel:#382F18;--exam-fg:#FFF3D6;--exam-dim:#DEC892;--exam-gold:#FFD166;--exam-line:#544622;
  --met-bg:#0F1C2C;--met-panel:#15273C;--met-fg:#DDEBFF;--met-dim:#97B2D1;--met-sky:#7DB8FF;--met-line:#26415F;--met-glow:#4FA3FF;--ld-sky1:#0A1A33;--ld-sky2:#173253}
.h0{--hb:var(--h0);--hi:var(--h0i)}.h1{--hb:var(--h1);--hi:var(--h1i)}.h2{--hb:var(--h2);--hi:var(--h2i)}
.h3{--hb:var(--h3);--hi:var(--h3i)}.h4{--hb:var(--h4);--hi:var(--h4i)}.h5{--hb:var(--h5);--hi:var(--h5i)}
.hw{--hb:var(--warn-bg);--hi:var(--warn)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  padding-top:max(0px, env(safe-area-inset-top));
  padding-bottom:max(24px, env(safe-area-inset-bottom));
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:clip;
  width:100%;
}
a{color:inherit}button{font:inherit;color:inherit}p{margin:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px}
.ico{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em}

/* ---------- shell ---------- */
.site{
  max-width:1200px;
  margin-inline:auto;
  padding-block:18px 90px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
@media (max-width:640px){.site{padding-block:12px 60px}}
.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:clamp(20px, 3.5vw, 34px);
  flex-wrap:wrap;
  width:100%;
}
.bar a{text-decoration:none;font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.bar-l{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bar a.bar-back{color:var(--muted)}
/* Logo: a wordmark, not a heading. "70" is a sticker in the site's pastel-and-ink style. */
.bar a.brand,.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:9px;text-decoration:none;color:var(--ink);line-height:1}
.brand-mark{display:inline-flex;align-items:center;gap:5px;font-family:var(--head);font-weight:800;font-size:clamp(26px,3.4vw,32px);letter-spacing:-.02em}
.brand-70{display:inline-flex;padding:2px 7px 3px;border:2px solid var(--ink);border-radius:10px;background:var(--h4);color:var(--h4i);box-shadow:var(--pop);transform:rotate(-6deg);transition:transform .25s}
.brand-70 i{font-style:normal;display:inline-block}
.brand-70 i:first-child{transform:translateY(-1px) rotate(-4deg);color:var(--h2i)}
.brand-70 i:last-child{transform:translateY(1px) rotate(5deg);color:var(--h0i)}
.brand:hover .brand-70,.brand:focus-visible .brand-70{transform:rotate(4deg) scale(1.06)}
.brand-by{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;padding-left:2px;white-space:nowrap}
.pill{
  border:1.5px solid var(--ink);
  background:var(--panel);
  border-radius:999px;
  padding:7px 15px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;
  display:inline-flex;
  gap:6px;
  align-items:center;
  text-decoration:none;
  touch-action:manipulation;
  white-space:nowrap;
  min-height:38px;
}
.pill:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.pill:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

.pill.pill-upgrade{
  background: var(--h1);
  color: var(--h1i);
  border-color: var(--h1i);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink);
}
.pill.pill-upgrade:hover{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.pill.pill-upgrade.pending{
  background: var(--wash);
  color: var(--muted);
  border-color: var(--line);
  box-shadow: none;
}
.pill.on{background:var(--ink);color:var(--paper)}
.pill.soft{border-color:var(--line);box-shadow:none;background:var(--panel)}
@media (max-width:440px){
  .pill{padding:6px 12px;font-size:12.5px;min-height:36px}
  .bar a{font-size:13px}
}

.layout{
  display:grid;
  grid-template-columns:clamp(190px, 19vw, 250px) minmax(0,1fr);
  gap:clamp(24px, 3.5vw, 48px);
  align-items:start;
  width:100%;
}
.toc{
  position:sticky;
  top:20px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:14px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}
.toc a{
  text-decoration:none;
  color:var(--muted);
  padding:8px 12px;
  border-radius:999px;
  display:flex;
  gap:9px;
  align-items:center;
  line-height:1.25;
  transition:background .2s,color .2s;
  min-height:36px;
  touch-action:manipulation;
}
.toc a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--faint)}
.toc a:hover{background:var(--wash);color:var(--ink)}
.toc a.on{background:var(--ink);color:var(--paper)}.toc a.on i{color:var(--paper)}

/* Tablet Portrait & Mobile Section Scroller */
@media (max-width:920px){
  .layout{grid-template-columns:1fr;gap:0}
  .toc{
    display:flex;
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    position:sticky;
    top:max(8px, env(safe-area-inset-top));
    z-index:100;
    background:rgba(251,250,247,.94);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    padding:8px 6px;
    margin-bottom:24px;
    border-radius:999px;
    border:1.5px solid var(--line);
    box-shadow:0 4px 16px rgba(22,24,29,.06);
    scrollbar-width:none;
    max-width:100%;
  }
  :root[data-theme="dark"] .toc,
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toc{
    background:rgba(26,29,36,.94);
  }}
  .toc::-webkit-scrollbar{display:none}
  .toc a{
    flex-shrink:0;
    white-space:nowrap;
    font-size:13px;
    padding:6px 14px;
    border:1px solid var(--line);
    background:var(--panel);
  }
  .toc a.on{
    border-color:var(--ink);
    background:var(--ink);
    color:var(--paper);
  }
}

main.col{display:flex;flex-direction:column;gap:clamp(48px, 6vw, 84px);min-width:0;width:100%}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px, 260px);
  gap:clamp(16px, 3vw, 28px);
  align-items:center;
  width:100%;
}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-art{display:none}}
.hero-txt{display:flex;flex-direction:column;gap:12px;min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--hb,var(--h0));color:var(--hi,var(--h0i));white-space:nowrap}
h1{
  font-family:var(--head);
  font-size:clamp(28px,5vw,56px);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
  font-weight:700;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.big{font-size:clamp(15px,1.9vw,20px);color:var(--muted);line-height:1.45;max-width:640px;text-wrap:pretty}
.hero-art svg{width:100%;height:auto;max-width:260px;display:block}
.minute{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%, 200px),1fr));gap:12px}
.note{
  background:var(--hb);
  color:var(--ink);
  border-radius:18px;
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14.5px;
  line-height:1.45;
  transform:rotate(var(--rot,0deg));
  transition:transform .2s;
  min-width:0;
}
.note:hover{transform:rotate(0) translateY(-3px)}
@media (max-width:540px){.note{transform:none}}
.note b{font-family:var(--head);font-size:24px;line-height:1;color:var(--hi)}
.sect-label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:12px}

/* ---------- lesson ---------- */
.lesson{display:flex;flex-direction:column;gap:18px;scroll-margin-top:clamp(16px, 4vw, 28px);width:100%;min-width:0}
.lh{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;max-width:820px;min-width:0}
.badge{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--hb);color:var(--hi);font-family:var(--head);font-weight:700;font-size:19px;flex:none}
.badge .ico{width:22px;height:22px}
.lh h2{
  font-family:var(--head);
  font-size:clamp(20px,2.8vw,30px);
  line-height:1.15;
  margin:4px 0 0;
  letter-spacing:-.01em;
  font-weight:700;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.lh p{color:var(--muted);margin-top:6px;font-size:15px;line-height:1.45}
.stage{
  background:var(--panel);
  border-radius:24px;
  padding:clamp(16px, 3vw, 26px);
  box-shadow:var(--shadow);
  min-width:0;
  width:100%;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}
@media (max-width:480px){
  .lh{gap:10px}
  .badge{width:38px;height:38px;border-radius:12px;font-size:16px}
  .stage{padding:14px 12px;border-radius:18px}
}
.under{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;width:100%}
.takeaway{
  flex:1 1 340px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:var(--ink);
  color:var(--paper);
  border-radius:18px;
  padding:14px 18px;
  font-size:15px;
  line-height:1.45;
  min-width:0;
}
.takeaway .ico{width:20px;height:20px;margin-top:2px;color:var(--h4);flex:none}
.hook{
  flex:0 1 300px;
  background:var(--h4);
  color:var(--ink);
  border-radius:18px;
  padding:12px 16px;
  font-size:14px;
  transform:rotate(-1deg);
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.hook b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--h4i)}
@media (max-width:600px){
  .takeaway,.hook{flex:1 1 100%;transform:none}
}
.scroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  max-width:100%;
}
.scroll::-webkit-scrollbar{height:6px}
.scroll::-webkit-scrollbar-track{background:transparent}
.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.hint{font-size:13px;color:var(--faint)}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}

/* ---------- detail card (shared) ---------- */
.detail{
  margin-top:18px;
  border-radius:16px;
  background:var(--wash);
  padding:12px 16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-height:58px;
  transition:background .25s;
  min-width:0;
  box-sizing:border-box;
}
.detail .dot{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--hb,var(--panel));color:var(--hi,var(--ink));flex:none}
.detail b{display:block;font-size:15.5px;overflow-wrap:break-word}
.detail p{color:var(--muted);font-size:14.5px;overflow-wrap:break-word}
.detail.fresh{animation:pop .35s both}
@keyframes pop{from{transform:scale(.98);opacity:.4}to{transform:none;opacity:1}}

/* ---------- flowchart (tree) ---------- */
.fc{position:relative;min-width:max-content;padding:4px 4px 8px;max-width:100%}
.fc svg.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wires path{fill:none;stroke:var(--wire);stroke-width:2;transition:stroke .25s,stroke-width .25s}
.wires path.lit{stroke:var(--ink);stroke-width:2.5}
.wires path.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .8s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fc-top{display:flex;justify-content:center;margin-bottom:44px}
.fc-cols{display:flex;gap:20px;align-items:flex-start;justify-content:center}
.fc-col{display:flex;flex-direction:column;align-items:flex-start;width:200px}
.fc-leaves{display:flex;flex-direction:column;gap:8px;margin:14px 0 0 24px;width:calc(100% - 24px)}
.fc-leaves .fc-leaves{margin-top:8px;margin-left:18px;width:calc(100% - 18px)}
.fc-leaves[hidden]{display:none}
.nd{
  position:relative;
  border:1.5px solid var(--ink);
  border-radius:14px;
  background:var(--panel);
  padding:9px 12px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.3;
  text-align:left;
  cursor:pointer;
  width:100%;
  display:flex;
  gap:9px;
  align-items:flex-start;
  transition:transform .15s,box-shadow .15s,opacity .25s,background .2s;
  touch-action:manipulation;
  overflow-wrap:break-word;
  word-break:break-word;
}
.nd small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:2px}
.nd .ico{margin-top:1px;color:var(--hi);flex:none}
.nd:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}
.nd.root{background:var(--ink);color:var(--paper);font-family:var(--head);font-size:18px;padding:11px 20px;border-radius:999px;width:auto;align-items:center}
.nd.root small{color:var(--paper);opacity:.8;font-family:var(--font)}
.nd.br{background:var(--hb);border-color:transparent;font-size:14.5px;padding:11px 13px}
.nd.br small{color:var(--hi)}
.nd.lf{border-color:var(--line);font-weight:500}
.nd.lf.has::after{content:'+';position:absolute;right:8px;top:6px;font-weight:700;color:var(--faint)}
.nd.lf.has.open::after{content:'\2212'}
.nd.lf.has{padding-right:24px}
.nd.on{box-shadow:var(--pop);transform:translate(-1px,-1px);border-color:var(--ink)}
.nd.lf.on{background:var(--hb)}
.fc.focus .nd:not(.on):not(.root){opacity:.45}
.fc.stacked .fc-cols{flex-direction:column;align-items:stretch;gap:14px;padding-left:24px}
.fc.stacked .fc-top{justify-content:flex-start;margin-bottom:18px}
.fc.stacked .fc-col{width:auto}
.fc.stacked{min-width:0}
/* Phones: each branch shows how many boxes it holds and opens on tap, so the chart fits one screen */
.nd-n{display:none}
.fc.stacked .nd.br{flex-wrap:wrap}
.fc.stacked .nd-n{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;font-weight:700;color:var(--hi);background:var(--panel);border-radius:999px;padding:3px 10px;white-space:nowrap}
.fc.stacked .nd-n::after{content:'';width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.fc.stacked .fc-col.open .nd-n::after{transform:translateY(1px) rotate(-135deg)}
.fc.stacked .fc-col:not(.open) > .fc-leaves{display:none}
@media (max-width:480px){
  .fc.stacked .fc-cols{padding-left:16px;gap:12px}
  .fc-leaves{margin:10px 0 0 16px;width:calc(100% - 16px)}
  .fc-leaves .fc-leaves{margin-left:12px;width:calc(100% - 12px)}
  .nd{padding:8px 10px;font-size:13px}
  .nd.root{font-size:16px;padding:10px 16px}
}

/* ---------- decision flowchart ---------- */
.df{position:relative}
.df svg.wires{position:absolute;inset:0;pointer-events:none;overflow:visible}
.df .wires text{font-size:12px;font-weight:700;fill:var(--muted);font-family:var(--font)}
.df .wires text.lit{fill:var(--ink)}
.dn{
  position:absolute;
  border-radius:16px;
  padding:11px 13px;
  font-size:14px;
  line-height:1.3;
  font-weight:600;
  background:var(--panel);
  border:1.5px solid var(--ink);
  transition:opacity .3s,box-shadow .2s,transform .2s;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
  touch-action:manipulation;
}
.dn.q::before{content:'?';position:absolute;top:-11px;left:-11px;width:24px;height:24px;border-radius:50%;background:var(--h4);color:var(--h4i);border:1.5px solid var(--ink);display:grid;place-items:center;font-size:13px;font-weight:800}
.dn.end{background:var(--hb);border-color:transparent;border-radius:999px;text-align:center;align-items:center;justify-content:center;padding:12px 14px;font-family:var(--head);font-size:15px}
.dn.cur{box-shadow:var(--pop);transform:translate(-1px,-1px)}
.dn.end.cur{border-color:var(--ink)}
.df.tracing .dn:not(.lit){opacity:.28}
.dn .yn{display:none;gap:6px}
.dn.cur .yn{display:flex}
.yn button{
  flex:1;
  border:1.5px solid var(--ink);
  border-radius:999px;
  background:var(--panel);
  font-size:13px;
  font-weight:700;
  padding:6px 12px;
  min-height:36px;
  cursor:pointer;
  touch-action:manipulation;
}
.yn button:hover{background:var(--ink);color:var(--paper)}

/* ---------- route (sequence) ---------- */
.route{position:relative;padding:8px 0 0;width:100%}
.stops{display:flex;position:relative;z-index:1}
.stop{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  background:none;
  border:0;
  cursor:pointer;
  padding:4px 4px;
  min-width:0;
  touch-action:manipulation;
  min-height:44px;
}
.stop .wp{width:22px;height:22px;border-radius:50%;background:var(--panel);border:2.5px solid var(--line);transition:all .3s;flex:none}
.stop.done .wp{border-color:var(--ink);background:var(--ink)}
.stop.on .wp{border-color:var(--ink);background:var(--h4);transform:scale(1.25)}
.stop.warn.on .wp{background:var(--warn-bg);border-color:var(--warn)}
.stop b{
  font-size:clamp(12px, 2vw, 14px);
  line-height:1.25;
  font-weight:700;
  overflow-wrap:break-word;
  word-break:break-word;
}
.stop>div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.stop span{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.3;
  overflow-wrap:break-word;
}
.stop:not(.on) b{color:var(--muted)}
.track{position:absolute;left:0;right:0;top:51px;height:0;border-top:2.5px dashed var(--line)}
.track i{position:absolute;left:0;top:-2.5px;height:2.5px;background:var(--ink);width:0;transition:width .6s ease}
.plane{position:absolute;top:24px;left:0;width:30px;height:30px;transition:left .6s cubic-bezier(.5,0,.3,1),top .6s cubic-bezier(.5,0,.3,1);color:var(--ink);z-index:2;pointer-events:none}
.route.v .stops{flex-direction:column;gap:16px;padding-left:clamp(38px, 9vw, 48px)}
.route.v .stop{flex-direction:row;text-align:left;align-items:center;padding:4px 0;min-height:44px}
.route.v .stop>div{align-items:flex-start}
.route.v .track{left:56px;right:auto;top:0;bottom:0;border-top:0;border-left:2.5px dashed var(--line);width:0;height:auto}
.route.v .track i{width:2.5px;height:0;left:-2.5px;top:0;transition:height .6s ease}
.route.v .plane{left:0}
.route.v .plane svg{transform:rotate(90deg)}
.route-ctl{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;align-items:center}
@media (max-width:480px){
  .route-ctl .pill{flex:1;justify-content:center;padding:8px 10px;font-size:13px}
}

/* ---------- altitude (layers) ---------- */
.alt{display:grid;grid-template-columns:84px 44px minmax(0,1fr);gap:0 8px;width:100%}
.alt .lab{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;padding-top:6px}
.alt .lane{position:relative}
.alt .lane .plane{left:6px;top:0;transition:top .55s cubic-bezier(.5,0,.3,1)}
.alt .band{
  border:0;
  border-radius:14px;
  margin-bottom:6px;
  padding:12px 16px;
  text-align:left;
  cursor:pointer;
  background:var(--hb);
  color:var(--ink);
  transition:transform .2s,box-shadow .2s;
  display:flex;
  flex-direction:column;
  min-width:0;
  touch-action:manipulation;
}
.alt .band b{font-size:15px;overflow-wrap:break-word}
.alt .band span{font-size:13px;color:var(--muted);overflow-wrap:break-word}
.alt .band.on{box-shadow:var(--pop);transform:translate(-1px,-1px);outline:1.5px solid var(--ink)}
.alt .gnd{grid-column:3;height:10px;border-radius:999px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 16px);opacity:.6;margin-top:2px}
@media (max-width:480px){
  .alt{grid-template-columns:64px 34px minmax(0,1fr);gap:0 6px}
  .alt .lab{font-size:11px}
  .alt .band{padding:10px 12px;margin-bottom:5px}
  .alt .band b{font-size:14px}
  .alt .band span{font-size:12.5px}
  .alt .plane{width:24px;height:24px}
}

/* ---------- rings ---------- */
.rings{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(16px, 3vw, 28px);align-items:center;width:100%}
@media (max-width:760px){.rings{grid-template-columns:1fr}}
.rings svg{width:100%;height:auto;max-width:320px;margin-inline:auto;display:block}
.rings circle{cursor:pointer;transition:stroke-width .2s}
.rings circle.on{stroke:var(--ink)!important;stroke-width:3}
.rings ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rings li{
  display:grid;
  grid-template-columns:16px 1fr;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition:background .2s;
  min-height:44px;
  touch-action:manipulation;
}
.rings li.on{background:var(--wash)}
.rings li i{width:16px;height:16px;border-radius:50%;margin-top:3px;background:var(--hb);border:1.5px solid var(--hi);flex:none}
.rings li span{display:block;color:var(--muted);font-size:13.5px}

/* ---------- table ---------- */
table.mx{border-collapse:separate;border-spacing:0 6px;width:100%;min-width:540px;font-size:14px}
.mx th,.mx td{padding:10px 13px;text-align:left;vertical-align:top}
.mx thead th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;padding-block:2px 4px}
.mx tbody tr{background:var(--wash);transition:background .2s}
.mx tbody tr:hover{background:var(--hb)}
.mx tbody td:first-child,.mx tbody th:first-child{border-radius:12px 0 0 12px}
.mx tbody td:last-child{border-radius:0 12px 12px 0}
.mx tbody th{font-weight:700;white-space:nowrap}
.mx tbody th span{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--hb);color:var(--hi);font-size:13px}
.mx td[data-tipped]{cursor:help;text-decoration:underline dotted var(--faint);text-underline-offset:3px}
.mx .k{display:inline-block;background:var(--panel);border:1.5px solid var(--ink);border-radius:8px;padding:1px 8px;font-weight:700}
.mx .w{display:inline-block;background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:1px 8px;font-weight:700}
@media (max-width:540px){
  table.mx{min-width:440px;font-size:13px}
  .mx th,.mx td{padding:8px 10px}
}

/* ---------- decoder ---------- */
.code{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}
.code button{
  font-family:var(--mono);
  font-size:clamp(22px,5.5vw,44px);
  font-weight:700;
  border:1.5px solid transparent;
  background:var(--hb);
  color:var(--hi);
  border-radius:14px;
  padding:7px 16px;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  touch-action:manipulation;
}
.code button.on{border-color:var(--ink);box-shadow:var(--pop);transform:translate(-2px,-3px)}
/* Long lists of numbers: a calm keypad, favourites marked, one explanation panel below */
.keys[hidden]{display:none}
.code.pad{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;justify-content:stretch;margin-bottom:14px}
.code.pad button{font-size:16px;padding:9px 2px;border-radius:12px;background:var(--panel);color:var(--ink);border:1.5px solid var(--line);position:relative;box-shadow:none;transform:none}
.code.pad button.star{background:var(--wash);border-color:var(--wire);font-weight:800}
.code.pad button.on{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:none;box-shadow:none}
.code.pad .fav{position:absolute;top:4px;right:5px;width:10px;height:10px;background:var(--num);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.code.pad + .detail{margin-bottom:12px}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%, 200px),1fr));gap:10px}
.keys div{padding:12px 14px;border-radius:14px;background:var(--wash);border:1.5px solid transparent;transition:all .2s;cursor:pointer;min-height:44px;touch-action:manipulation}
.keys div.on{background:var(--hb);border-color:var(--ink)}
.keys b{font-family:var(--mono);background:var(--hb);color:var(--hi);border-radius:6px;padding:0 7px;margin-right:8px}
.keys p{font-size:13.5px;color:var(--muted);margin-top:4px}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%, 160px),1fr));gap:12px}
.num{
  border:0;
  text-align:left;
  background:var(--hb);
  border-radius:18px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:default;
  min-height:110px;
  transition:transform .2s;
  position:relative;
  touch-action:manipulation;
}
.num:hover{transform:translateY(-3px)}
.num .ico{color:var(--hi);width:20px;height:20px}
.num .v{font-family:var(--head);font-size:22px;font-weight:700;line-height:1.1;color:var(--ink);transition:filter .3s,opacity .3s}
.num .k{font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:break-word}
.num .n{font-size:12px;color:var(--muted);line-height:1.3;overflow-wrap:break-word}
.nums.quiz .num{cursor:pointer}
.nums.quiz .num:not(.shown) .v{filter:blur(9px);opacity:.5}
.nums.quiz .num:not(.shown)::after{content:'tap to reveal';position:absolute;right:12px;top:14px;font-size:11px;color:var(--hi);font-weight:700}

/* ---------- pairs ---------- */
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px;width:100%}
.pair{display:flex;flex-direction:column;gap:0;min-width:0}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;width:100%}
.side{border-radius:18px;padding:16px;background:var(--hb);min-height:96px;min-width:0}
.side b{display:block;font-family:var(--head);font-size:17px;color:var(--hi);margin-bottom:3px;line-height:1.2;overflow-wrap:break-word}
.side p{font-size:13.5px;color:var(--ink);opacity:.85;overflow-wrap:break-word}
.vs::after{
  content:'vs';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  display:grid;
  place-items:center;
  font-size:11.5px;
  font-weight:800;
  font-family:var(--head);
  z-index:2;
}
.tell{margin:-6px 14px 0;background:var(--panel);border:1.5px solid var(--ink);border-radius:14px;padding:9px 14px;font-size:13.5px;position:relative;box-shadow:var(--pop)}
.tell b{margin-right:6px}

@media (max-width:520px){
  .vs{grid-template-columns:1fr;gap:14px}
  .side{padding:14px;min-height:auto}
  .vs::after{position:static;transform:none;margin:-6px auto;width:28px;height:28px;font-size:11px}
  .tell{margin:8px 6px 0;padding:8px 12px;font-size:13px}
}

/* ---------- quiz ---------- */
.quizbox{max-width:720px;display:flex;flex-direction:column;gap:16px;width:100%}
.qbar{display:flex;gap:6px}
.qbar i{flex:1;height:6px;border-radius:999px;background:var(--line)}
.qbar i.ok{background:var(--h1i)}.qbar i.no{background:var(--warn)}.qbar i.cur{background:var(--ink)}
.qq{
  font-family:var(--head);
  font-size:clamp(18px, 4.5vw, 22px);
  line-height:1.3;
  font-weight:600;
  overflow-wrap:break-word;
}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{
  border:1.5px solid var(--line);
  background:var(--panel);
  border-radius:14px;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  font-size:15px;
  display:flex;
  gap:12px;
  align-items:center;
  transition:all .15s;
  min-height:48px;
  touch-action:manipulation;
  overflow-wrap:break-word;
}
.opt i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--wash);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.opt:hover:not([disabled]){border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:var(--pop)}
.opt.ok{background:var(--h1);border-color:var(--h1i)}.opt.ok i{background:var(--h1i);color:var(--h1)}
.opt.no{background:var(--warn-bg);border-color:var(--warn)}.opt.no i{background:var(--warn);color:var(--warn-bg)}
.opt[disabled]{cursor:default}
.why{background:var(--wash);border-radius:14px;padding:12px 16px;font-size:14.5px;animation:pop .3s both;line-height:1.45}
.score{font-family:var(--head);font-size:clamp(32px, 6vw, 42px);font-weight:700}

/* ---------- tooltip ---------- */
#tip{
  position:fixed;
  z-index:9999;
  max-width:min(300px, calc(100vw - 32px));
  background:var(--tip-bg);
  color:var(--tip-fg);
  padding:10px 13px;
  border-radius:12px;
  font-size:13.5px;
  line-height:1.45;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  pointer-events:none;
  display:none;
  overflow-wrap:break-word;
  word-break:break-word;
}
#tip b{display:block;margin-bottom:2px}

/* ---------- foot ---------- */
details.teacher{color:var(--muted);font-size:14px;background:var(--panel);border-radius:18px;padding:14px 18px}
details.teacher summary{cursor:pointer;font-weight:600}
details.teacher ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
details.teacher h4{margin:14px 0 0;font-size:13px;color:var(--ink)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.pager a{
  text-decoration:none;
  background:var(--panel);
  border-radius:18px;
  padding:16px 18px;
  box-shadow:var(--shadow);
  transition:transform .2s;
  min-height:56px;
  touch-action:manipulation;
}
.pager a:hover{transform:translateY(-3px)}
.pager a span{font-size:12.5px;color:var(--faint)}
.pager a b{display:block;font-family:var(--head);font-size:16px;line-height:1.25;overflow-wrap:break-word}
@media (max-width:480px){
  .pager{grid-template-columns:1fr;gap:10px}
  .pager a{padding:14px 16px}
}

/* ---------- index ---------- */
.ix-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px, 300px);
  gap:clamp(18px, 3vw, 28px);
  align-items:center;
  margin-bottom:28px;
  width:100%;
}
@media (max-width:760px){.ix-hero{grid-template-columns:1fr}.ix-hero .hero-art{display:none}}
.ix-search{
  width:100%;
  max-width:440px;
  padding:12px 18px;
  border-radius:999px;
  border:1.5px solid var(--ink);
  background:var(--panel);
  color:var(--ink);
  font:inherit;
  font-size:16px !important; /* Prevents auto-zoom on iOS */
  min-height:46px;
  box-shadow:var(--pop);
  box-sizing:border-box;
}
.part{margin-top:36px;width:100%}
.part h2{font-family:var(--head);font-size:clamp(22px, 3.5vw, 26px);margin:0 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%, 250px),1fr));gap:14px;width:100%}
.card{
  background:var(--panel);
  border-radius:22px;
  padding:18px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
  position:relative;
  overflow:hidden;
  min-height:180px;
  min-width:0;
  touch-action:manipulation;
}
.card:hover{transform:translate(-2px,-3px);box-shadow:var(--pop);outline:1.5px solid var(--ink)}
.card .top{display:flex;justify-content:space-between;align-items:center}
.card .no{font-family:var(--head);font-size:32px;font-weight:700;color:var(--hi);line-height:1}
.card .ic{width:42px;height:42px;border-radius:14px;background:var(--hb);color:var(--hi);display:grid;grid-template-columns:1fr;gap:0;place-items:center;flex:none}
.card .ic .ico{width:22px;height:22px}
.card h3{margin:0;font-family:var(--head);font-size:18.5px;line-height:1.2;overflow-wrap:break-word}
.card p{color:var(--muted);font-size:13.5px;line-height:1.4;overflow-wrap:break-word}
.card-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.cf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-width:0;font-size:12.5px;font-weight:600;line-height:1.3}
.cf-free{display:inline-flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}
.cf-free::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--h1i);opacity:.55}
.cf-free.full{color:var(--h1i)}.cf-free.full::before{opacity:1}
.cf-exam{display:inline-flex;align-items:center;gap:5px;color:var(--muted);white-space:nowrap}
.cf-exam i{font-style:normal;font-size:10px;color:var(--exam-gold)}
.cf-lock{display:inline-grid;place-items:center;color:var(--exam-ink);margin-left:1px}
.cf-lock .ico{width:13px;height:13px;stroke-width:2.4}
.cf-go{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--wash);color:var(--ink);font-size:15px;font-weight:700;transition:background .15s,color .15s,transform .15s}
.card:hover .cf-go{background:var(--ink);color:var(--paper);transform:translateX(2px)}
.cf-go.done{background:var(--h1);color:var(--h1i)}
.card:hover .cf-go.done{background:var(--h1);color:var(--h1i);transform:none}
.card.off{opacity:.5;pointer-events:none;box-shadow:none;background:transparent;border:1.5px dashed var(--line)}
@media (max-width:360px){
  .cards{grid-template-columns:1fr;gap:10px}
  .card{padding:14px;min-height:auto}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* book definitions */
blockquote.book{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--hi,var(--ink));background:var(--panel);border-radius:0 10px 10px 0;font-size:13.5px;line-height:1.5;color:var(--ink);font-style:italic;overflow-wrap:break-word}
blockquote.book span{display:block;font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint);margin-bottom:2px}
#tip em{display:block;margin-top:6px;opacity:.8;font-size:12.5px}
.keys .kq{font-style:italic;font-size:13px;margin-top:6px;color:var(--ink);opacity:.8;overflow-wrap:break-word}

/* ---------- auth & payment modals ---------- */
.atlas-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,18,24,.68);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:9000;
  display:grid;
  place-items:center;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  animation:atlasFadeIn .2s ease-out;
  overflow-y:auto;
}
@keyframes atlasFadeIn{from{opacity:0}to{opacity:1}}
.atlas-modal{
  background:var(--panel);
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.35),var(--pop);
  width:100%;
  max-width:480px;
  padding:clamp(20px, 4vw, 28px) clamp(16px, 4vw, 24px) 20px;
  position:relative;
  animation:atlasModalPop .24s cubic-bezier(.16,1,.3,1);
  box-sizing:border-box;
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
}
@keyframes atlasModalPop{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.atlas-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--wash);
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  transition:all .12s;
  touch-action:manipulation;
}
.atlas-modal-close:hover{color:var(--ink);background:var(--panel);border-color:var(--ink);transform:scale(1.05)}
.atlas-modal-head{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.atlas-modal-head h3{margin:0;font-family:var(--head);font-size:clamp(20px, 4vw, 24px);line-height:1.2;font-weight:700;letter-spacing:-.01em;overflow-wrap:break-word}
.atlas-modal-head p{font-size:13.5px;color:var(--muted);line-height:1.45;overflow-wrap:break-word}
.atlas-tabs{display:flex;gap:6px;padding:4px;border-radius:14px;background:var(--wash);margin-bottom:18px}
.atlas-tab{
  flex:1;
  padding:8px 10px;
  border:none;
  background:transparent;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  font-family:var(--head);
  cursor:pointer;
  color:var(--muted);
  transition:all .15s;
  min-height:38px;
  touch-action:manipulation;
}
.atlas-tab.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.atlas-form{display:flex;flex-direction:column;gap:14px;width:100%}

.atlas-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.atlas-pw-wrap .atlas-input {
  padding-right: 44px;
}
.atlas-pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.15s, background-color 0.15s;
  touch-action: manipulation;
}
.atlas-pw-toggle:hover {
  color: var(--ink);
  background: var(--wash);
}
.atlas-pw-toggle .ico {
  width: 19px;
  height: 19px;
}
.atlas-field{display:flex;flex-direction:column;gap:5px}
.atlas-field label{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.atlas-input{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:var(--wash);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px !important; /* Prevents auto-zoom on iOS Safari */
  min-height:44px;
  transition:border-color .15s;
  box-sizing:border-box;
}
.atlas-input:focus{outline:none;border-color:var(--ink);background:var(--panel)}
.atlas-input.mono{font-family:var(--mono);letter-spacing:.05em}
.atlas-btn{
  width:100%;
  padding:12px 18px;
  border:1.5px solid var(--ink);
  border-radius:14px;
  font-family:var(--head);
  font-weight:700;
  font-size:14.5px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:var(--pop);
  transition:transform .12s,box-shadow .12s;
  text-decoration:none;
  min-height:44px;
  touch-action:manipulation;
  box-sizing:border-box;
}
.atlas-btn:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.atlas-btn:active:not([disabled]){transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.atlas-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.atlas-btn-primary{background:var(--ink);color:var(--paper)}
.atlas-btn-accent{background:var(--accent);color:#ffffff;border-color:var(--ink)}
.atlas-btn-soft{background:var(--wash);border-color:var(--line);box-shadow:none;font-size:13px;padding:9px 14px;min-height:38px}
.atlas-btn-soft:hover:not([disabled]){box-shadow:2px 2px 0 var(--line);border-color:var(--ink)}
.atlas-error{padding:9px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13px;line-height:1.4;border:1px solid var(--warn);overflow-wrap:break-word}
.atlas-preset-box{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:8px}
.atlas-preset-box span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.atlas-preset-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:360px){.atlas-preset-row{grid-template-columns:1fr}}

/* ---------- upi components ---------- */
.upi-plan-selector{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;width:100%}
.upi-plan-card{
  border:1.5px solid var(--line);
  background:var(--wash);
  border-radius:16px;
  padding:12px;
  text-align:left;
  cursor:pointer;
  position:relative;
  transition:all .15s;
  display:flex;
  flex-direction:column;
  gap:3px;
  touch-action:manipulation;
  min-width:0;
}
.upi-plan-card:hover{border-color:var(--ink)}
.upi-plan-card.active{border-color:var(--ink);background:var(--panel);box-shadow:var(--pop)}
.upi-plan-badge{position:absolute;top:-8px;right:10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:var(--h1);color:var(--h1i);white-space:nowrap}
.upi-plan-title{font-family:var(--head);font-size:13.5px;font-weight:700;color:var(--ink);overflow-wrap:break-word}
.upi-plan-cost{font-family:var(--head);font-size:20px;font-weight:800;color:var(--ink);line-height:1.1}
.upi-plan-sub{font-size:11.5px;color:var(--muted);line-height:1.2;overflow-wrap:break-word}
@media (max-width:380px){
  .upi-plan-selector{grid-template-columns:1fr;gap:8px}
  .upi-plan-card{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:8px;padding:10px 12px}
  .upi-plan-badge{position:static;margin-left:6px}
  .upi-plan-sub{flex-basis:100%}
}

.upi-price-tag{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.upi-price-tag b{font-family:var(--head);font-size:30px;line-height:1;font-weight:800;color:var(--ink)}
.upi-price-tag span{font-size:12.5px;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.05em}

/* ---------- locked lesson banner & state ---------- */
.locked-stage{
  background:var(--wash);
  border:1.5px dashed var(--line);
  border-radius:24px;
  padding:clamp(22px, 5vw, 36px) clamp(14px, 4vw, 20px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  position:relative;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}
.locked-icon-badge{width:52px;height:52px;border-radius:16px;background:var(--hb,var(--h0));color:var(--hi,var(--h0i));display:grid;place-items:center;margin-bottom:2px}
.locked-icon-badge .ico{width:26px;height:26px}
.locked-stage h3{font-family:var(--head);font-size:clamp(19px, 3.5vw, 22px);margin:0;font-weight:700;color:var(--ink);overflow-wrap:break-word}
.locked-stage p{color:var(--muted);font-size:14.5px;max-width:440px;line-height:1.45;overflow-wrap:break-word}
.locked-action-group{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px;width:100%}
.locked-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%, 180px),1fr));gap:8px;width:100%;max-width:540px;margin-top:8px;text-align:left}
.locked-perk{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}
.locked-perk b{color:var(--ink)}
@media (max-width:480px){
  .locked-action-group{flex-direction:column}
  .locked-action-group .atlas-btn{width:100%}
  .locked-perks{grid-template-columns:1fr}
}
.toc a.locked{opacity:.8}
.toc a.locked i{color:var(--warn)}
.toc a .lock-badge{margin-left:auto;font-size:11px;opacity:.7}
.chip-free{background:var(--h1);color:var(--h1i);font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle;white-space:nowrap}

/* ---------- auth nav & menu ---------- */
.auth-wrap{position:relative}
.auth-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(280px, calc(100vw - 32px));
  background:var(--panel);
  border:1.5px solid var(--ink);
  border-radius:18px;
  box-shadow:var(--pop),0 12px 30px rgba(0,0,0,.15);
  padding:14px;
  z-index:8000;
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:atlasFadeIn .15s ease-out;
  box-sizing:border-box;
}
.auth-menu-user{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.auth-menu-name{font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);overflow-wrap:break-word}
.auth-menu-email{font-size:12px;color:var(--muted);word-break:break-all}
.auth-menu-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--h1i);background:var(--h1);padding:3px 8px;border-radius:999px;margin-top:4px;align-self:flex-start}
.auth-menu-status.free{color:var(--num);background:var(--h4)}
/* ---------- auth: strength meter, 2FA, captcha ---------- */
.atlas-field > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.atlas-ok { background: var(--h1); color: var(--h1i); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }
.atlas-link { background: none; border: 0; padding: 4px 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; align-self: center; }
.atlas-link:hover { color: var(--ink); }
.atlas-captcha { min-height: 66px; }
.pw-meter { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-seg { height: 6px; border-radius: 3px; background: var(--line); transition: background .2s; }
.pw-seg.s0, .pw-seg.s1 { background: var(--warn); }
.pw-seg.s2 { background: var(--num); }
.pw-seg.s3, .pw-seg.s4 { background: var(--h1i); }
.pw-label { font-weight: 700; color: var(--ink); }
.pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); }
.pw-rule::before { content: '○ '; }
.pw-rule.ok { color: var(--h1i); }
.pw-rule.ok::before { content: '✓ '; }
.pw-advice { color: var(--muted); }
.mfa-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.mfa-secret { display: block; margin-top: 6px; font-family: var(--mono); font-size: 15px; letter-spacing: .06em; background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; word-break: break-all; user-select: all; }
.backup-codes { columns: 2; font-family: var(--mono); font-size: 15px; margin: 0; padding-left: 26px; }

/* ================= Renderer v4: parts · hotspot · signals · timeline · scale · classify ================= */

/* ---------- parts ---------- */
.part-head{display:flex;align-items:baseline;gap:12px;margin-top:20px;padding-top:16px;border-top:1.5px solid var(--line)}
.part-head span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;font-family:var(--mono)}
.part-head b{font-family:var(--head);font-size:clamp(19px,2.4vw,23px);font-weight:700;line-height:1.2}
.toc-part{display:flex;flex-direction:column;gap:4px}
.toc-part-h{border:0;background:none;font-family:inherit;text-align:left;width:100%;cursor:pointer;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--faint);padding:12px 12px 4px;display:flex;gap:8px;align-items:center}
.toc-part.closed>a{display:none}
.toc-part-h i{font-style:normal;font-family:var(--mono);font-size:11px}
.toc-part-h::after{content:'▾';margin-left:auto;transition:transform .2s}
.toc-part.closed .toc-part-h::after{transform:rotate(-90deg)}
.toc-part-h:hover{color:var(--ink)}
.toc-part-h:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (max-width:920px){
  .toc-part{display:contents}
  .toc-part-h{flex-shrink:0;width:auto;white-space:nowrap;padding:8px 6px 8px 12px;border-left:1.5px solid var(--line);margin-left:4px;pointer-events:none}
  .toc-part-h::after{content:none}
  .toc-part.closed>a{display:flex}
}

/* ---------- hotspot ---------- */
.hs{display:flex;flex-direction:column;gap:14px}
.hs-scene{background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:8px}
.hs-scene svg{display:block;width:100%;height:auto}
/* Wide drawings never shrink below 82% of their drawn size (labels stay about 10 px or more), on any screen:
   where there is not enough room they scroll sideways and a hint says so. */
.svg-scene svg,.hs-scene svg{min-width:var(--mw,0px)!important}
.swipe-hint{margin:6px 2px 0}
.hs-pin{cursor:pointer;outline:none}
.hs-b{transform-box:fill-box;transform-origin:center;transition:transform .2s}
.hs-dot{fill:var(--ink);stroke:var(--panel);stroke-width:3}
.hs-num{fill:var(--paper);font:700 13px var(--font);pointer-events:none}
.hs-pin:hover .hs-b,.hs-pin:focus-visible .hs-b{transform:scale(1.1)}
.hs-pin.on .hs-b{transform:scale(1.15);filter:drop-shadow(3px 3px 0 var(--ink))}
.hs-pin.on .hs-dot{fill:var(--hi);stroke:var(--ink);stroke-width:2}
.hs-pin.on .hs-num{fill:var(--panel)}
.hs-pin:focus-visible .hs-dot{stroke:var(--accent);stroke-width:4}
.hs-scene [data-spot]{transition:stroke .2s,stroke-width .2s}
.hs-scene [data-spot].lit{stroke:var(--hi)!important;stroke-width:4px!important}
.hs-legend{display:flex;flex-wrap:wrap;gap:8px}
.hs-chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid transparent;background:var(--hb);color:var(--ink);border-radius:999px;padding:5px 12px 5px 5px;font:600 13.5px var(--font);cursor:pointer;min-height:34px;touch-action:manipulation}
.hs-chip i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700}
.hs-chip.on{border-color:var(--ink);box-shadow:var(--pop)}
.hs-chip b{font-weight:600;transition:filter .3s,opacity .3s}
.hs.test .hs-chip:not(.seen) b{filter:blur(6px);opacity:.55}

/* ---------- signals ---------- */
.sig-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.sig-filter .pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,156px),1fr));gap:12px}
.sig{border:1.5px solid transparent;background:var(--hb);border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer;color:var(--ink);font:inherit;position:relative;transition:transform .2s;touch-action:manipulation}
.sig:hover{transform:translateY(-3px)}
.sig.on{border-color:var(--ink);box-shadow:var(--pop)}
.sig[hidden]{display:none}
.sig-pic{width:100%;max-width:120px;aspect-ratio:1;border-radius:14px;background:var(--panel);display:grid;place-items:center;overflow:hidden}
.sig-pic svg{width:100%;height:100%}
.sig-name{font-size:14px;line-height:1.25;transition:filter .3s,opacity .3s}
.sig-sub{font-size:12px;color:var(--muted);line-height:1.3;transition:filter .3s,opacity .3s}
.sig-grid.test .sig:not(.shown) .sig-name,.sig-grid.test .sig:not(.shown) .sig-sub{filter:blur(7px);opacity:.5}
.sig-grid.test .sig:not(.shown)::after{content:'tap to reveal';position:absolute;top:8px;right:10px;font-size:11px;font-weight:700;color:var(--hi)}

/* ---------- timeline ---------- */
.tl-wrap{padding:6px 4px 0}
.tl{position:relative;height:calc(104px + var(--lanes,1) * 66px);margin-inline:6px}
.tl-axis{position:absolute;left:0;right:0;top:36px;height:3px;border-radius:3px;background:var(--ink)}
.tl-tick{position:absolute;top:19px;left:calc(var(--p) * 1%);height:25px;border-left:1.5px solid var(--wire)}
/* the label sits above its tick line, so the line never runs through the numbers */
.tl-tick span{position:absolute;top:-19px;left:0;transform:translateX(calc(var(--p) * -1%));white-space:nowrap;font:700 12px var(--mono);color:var(--num);padding-inline:4px}
.tl-band{position:absolute;z-index:1;top:46px;height:30px;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);background:var(--hb);border:1.5px dashed var(--hi);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:default}
.tl-band span{font-size:12px;font-weight:700;color:var(--hi);white-space:nowrap;padding-inline:6px;display:flex;gap:6px;align-items:baseline}
.tl-band small{font:600 11px var(--mono);opacity:.85}
.tl-band.tl-tight small{display:none}
.tl-band.tl-tighter span{visibility:hidden}
.tl-dot{position:absolute;top:36px;left:calc(var(--p) * 1%);height:calc(46px + var(--lane) * 66px);border-left:2px dashed var(--hi);opacity:0;transition:opacity .4s calc(var(--lane) * 80ms)}
.tl-dot::before{content:'';position:absolute;top:-6px;left:-8px;width:14px;height:14px;border-radius:50%;background:var(--hi);border:2.5px solid var(--panel)}
.tl-mark{position:absolute;top:calc(82px + var(--lane) * 66px);left:calc(var(--p) * 1%);transform:translate(calc(var(--p) * -1%),10px);opacity:0;
  z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:max-content;max-width:min(220px,46%);text-align:left;padding:7px 12px;border-radius:14px;border:1.5px solid transparent;background:var(--hb);color:var(--ink);font:inherit;cursor:pointer;
  transition:opacity .45s calc(var(--i) * 90ms),transform .45s calc(var(--i) * 90ms),box-shadow .2s;touch-action:manipulation}
.tl-mark b{font-size:13.5px;line-height:1.25}
.tl-at{font:700 12px var(--mono);color:var(--num)}
.tl.in .tl-mark{opacity:1;transform:translate(calc(var(--p) * -1%),0)}
.tl.in .tl-dot{opacity:1}
.tl-mark:hover,.tl-mark:focus-visible{box-shadow:var(--pop)}
.tl-mark.on{border-color:var(--ink);box-shadow:var(--pop)}
@media (max-width:640px){
  /* Vertical on phones: an ordered rail instead of proportional placement, so text stays readable. */
  .tl{height:auto;display:flex;flex-direction:column;gap:10px;padding-left:26px;margin:0}
  .tl-axis{top:4px;bottom:4px;left:8px;right:auto;width:3px;height:auto}
  .tl-tick,.tl-dot{display:none}
  .tl-band,.tl-mark{position:relative;top:auto;left:auto;width:auto;max-width:100%;order:var(--o)}
  .tl-mark{transform:translateY(8px)}
  .tl.in .tl-mark{transform:none}
  .tl-mark::before,.tl-band::before{content:'';position:absolute;left:-24px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--hi);border:2.5px solid var(--panel)}
  .tl-band{height:auto;padding:8px 12px;justify-content:flex-start;overflow:visible}
}

/* ---------- scale ---------- */
.scale{display:flex;flex-direction:column;gap:8px}
.sc-row{display:grid;grid-template-columns:minmax(120px,34%) 1fr auto;align-items:center;gap:12px;padding:8px 12px;border-radius:14px;border:1.5px solid transparent;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.sc-row:hover{background:var(--wash)}
.sc-row.on{border-color:var(--ink);background:var(--panel);box-shadow:var(--pop)}
.sc-label{font-size:14px;font-weight:600;line-height:1.3;display:flex;flex-direction:column}
.sc-label small{font-size:12px;font-weight:500;color:var(--muted)}
.sc-track{height:16px;border-radius:999px;background:var(--wash);overflow:hidden}
.sc-bar{display:block;height:100%;width:0;border-radius:999px;background:var(--hi);transition:width .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms)}
.scale.grown .sc-bar{width:calc(var(--w) * 1%)}
.sc-v{font:700 14px var(--mono);color:var(--num);min-width:64px;text-align:right;transition:filter .3s,opacity .3s}
.scale.test .sc-row:not(.shown) .sc-v{filter:blur(7px);opacity:.5}
@media (max-width:520px){
  .sc-row{grid-template-columns:1fr auto;grid-template-areas:'l v' 't t'}
  .sc-label{grid-area:l}.sc-v{grid-area:v}.sc-track{grid-area:t}
}

/* ---------- classify ---------- */
.cls{display:flex;flex-direction:column;gap:14px}
.cls-pool{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;padding:12px;border:1.5px dashed var(--wire);border-radius:16px;background:var(--wash)}
.cls-pool:empty::before{content:'All sorted.';color:var(--muted);font-size:14px;align-self:center}
.cls-chip{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:8px 14px;font:600 14px var(--font);cursor:pointer;min-height:38px;touch-action:manipulation;transition:transform .15s}
.cls-chip:hover{transform:translateY(-2px)}
.cls-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:var(--pop)}
.cls-say{font-size:14.5px;color:var(--muted);min-height:22px}
.cls-say b{color:var(--ink)}
.cls-buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.cls-bucket{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:130px;padding:14px;border-radius:18px;border:1.5px solid transparent;background:var(--hb);color:var(--ink);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.cls-bucket:hover,.cls-bucket:focus-visible{border-color:var(--ink)}
.cls-bucket>b{font-family:var(--head);font-size:17px;color:var(--hi)}
.cls-bucket>span{font-size:12.5px;color:var(--muted)}
.cls-in{display:flex;flex-direction:column;gap:6px;width:100%}
.cls-done{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:var(--panel);border-radius:10px;padding:5px 9px}
.cls-done .ico{width:15px;height:15px;color:var(--h1i)}
.cls-bucket.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.cls-end{display:flex;align-items:center;gap:12px;flex-wrap:wrap}


/* ================= Study tracks: Core & Revision vs Exam-Ready ================= */
.track-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:16px;background:var(--wash);margin-bottom:10px}
.trk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 11px;border-radius:12px;border:1.5px solid transparent;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;transition:background .2s,border-color .2s,box-shadow .2s}
.trk b{font-size:13px;line-height:1.2}
.trk small{font-size:11px;color:var(--muted)}
.trk:hover{background:var(--panel)}
.trk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trk-core.on{background:var(--h1);border-color:var(--h1i)}
.trk-core.on b{color:var(--h1i)}
.trk-exam b{font-family:var(--head);font-weight:700}
.trk-exam.on{background:var(--exam-bg);border-color:var(--exam-gold);box-shadow:var(--pop)}
.trk-exam.on b{color:var(--exam-fg)}
.trk-exam.on small{color:var(--exam-dim)}

/* Exam-Ready sidebar: clean warm pastel card with gold accents, matching site layout. */
.toc.track-exam{background:var(--exam-bg);color:var(--exam-fg);border:1.5px solid var(--exam-line);border-radius:20px;padding:10px;animation:examIn .35s ease-out both}
.toc.track-exam .track-switch{background:var(--exam-panel);border:1px solid var(--exam-line)}
.toc.track-exam .trk-core{color:var(--exam-dim)}
.toc.track-exam .trk-core:hover{background:var(--exam-line)}
.toc.track-exam a{color:var(--exam-dim)}
.toc.track-exam a i{color:var(--exam-dim)}
.toc-t{flex:1;min-width:0}
.toc-x{font-style:normal;color:var(--exam-gold);font-size:9px;margin-left:5px;vertical-align:1px}
.toc.track-exam a:hover{background:var(--exam-panel);color:var(--exam-fg)}
.toc.track-exam a.on{background:var(--exam-panel);color:var(--exam-fg);border:1.5px solid var(--exam-gold);box-shadow:var(--pop)}
.toc.track-exam a.on i{color:var(--exam-gold)}
.toc.track-exam .toc-part-h{color:var(--exam-gold);font-weight:700}
.toc.track-exam .chip-free{background:var(--h1);color:var(--h1i)}
@keyframes examIn{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}

.toc-teaser{margin-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;border-radius:14px;border:1.5px dashed var(--exam-gold);background:var(--exam-bg);color:var(--exam-fg);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;transition:transform .2s}
.toc-teaser b{font-family:var(--head);color:var(--exam-fg);font-size:13px}
.toc-teaser span{font-size:12.5px;color:var(--exam-dim)}
.toc-teaser:hover{transform:translateY(-2px)}

.track-chip{margin-left:6px}
.track-chip-core{background:var(--h1);color:var(--h1i)}
.track-chip-exam{background:var(--exam-bg);color:var(--exam-fg);border:1px solid var(--exam-line);font-family:var(--head);font-weight:700}

/* Exam-Ready lessons in the page: a warm pastel ribbon and badge */
.exam-ribbon{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--head);text-transform:uppercase;letter-spacing:.08em;background:var(--exam-bg);color:var(--exam-fg);border:1px solid var(--exam-line);padding:3px 9px;border-radius:6px;margin-bottom:6px}
.lesson.exam .lh .badge{background:var(--exam-bg);color:var(--exam-fg);border:1.5px solid var(--exam-gold)}
.locked-stage.locked-exam{background:var(--exam-bg);color:var(--exam-fg);border:1.5px solid var(--exam-line)}
.locked-stage.locked-exam h3{color:var(--exam-fg)}
.locked-stage.locked-exam p{color:var(--exam-dim)}
.locked-stage.locked-exam .locked-icon-badge{background:var(--exam-panel);color:var(--exam-gold);border:1.5px solid var(--exam-line)}
.locked-lead{font-style:italic}
.atlas-btn-exam{background:var(--exam-gold);color:#1A1305;border-color:var(--ink);box-shadow:var(--pop)}
.atlas-btn-exam:hover{background:#DCA21D;transform:translate(-1px,-1px)}

/* Subscription picker in the payment modal */
.sub-tier-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.sub-tier{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;transition:all .15s}
.sub-tier-name{font-weight:700;font-size:14px}
.sub-tier-sub{font-size:12px;color:var(--muted);line-height:1.35}
.sub-core.active{border-color:var(--h1i);background:var(--h1);box-shadow:var(--pop)}
.sub-exam.active{border-color:var(--exam-gold);background:var(--exam-bg);color:var(--exam-fg);box-shadow:var(--pop)}
.sub-exam .sub-tier-name{font-family:var(--head);font-weight:700}
.sub-exam.active .sub-tier-name{color:var(--exam-fg)}
.sub-exam.active .sub-tier-sub{color:var(--exam-dim)}
@media (max-width:480px){.sub-tier-row{grid-template-columns:1fr}}

@media (max-width:920px){
  /* On phones the sidebar is a horizontal pill bar: the switch becomes its first two pills. */
  .track-switch{display:flex;flex-shrink:0;padding:3px;margin:0 6px 0 0;border-radius:999px}
  .trk{flex-direction:row;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;white-space:nowrap}
  .trk small{display:none}
  .trk-exam.on{box-shadow:none}
  .toc.track-exam{border-radius:999px;padding:8px 6px;background:var(--exam-bg)!important;border-color:var(--exam-line)}
  .toc-teaser{flex-direction:row;align-items:center;flex-shrink:0;margin:0 0 0 6px;padding:6px 12px;border-radius:999px;white-space:nowrap}
  .toc-teaser span{display:none}
}
.chip-exam{font:700 11px var(--head);letter-spacing:.02em;background:var(--exam-bg);color:var(--exam-fg);border:1px solid var(--exam-line);padding:3px 9px;border-radius:999px;white-space:nowrap}

/* Story animations inside lesson pictures (spec SVG uses these classes; reduced motion turns them off) */
.fx-flash{animation:fxFlash 1s steps(1,end) infinite}
.fx-seq{animation:fxSeq .5s linear infinite;animation-delay:calc(var(--d,0) * .016s)}
.fx-beacon{animation:fxFlash 2.4s steps(1,end) infinite}
.fx-pulse{animation:fxPulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.fx-drive{animation:fxDrive 4s ease-in-out infinite alternate}
@keyframes fxFlash{0%{opacity:1}50%{opacity:.15}}
@keyframes fxSeq{0%,18%{opacity:1}22%,100%{opacity:.18}}
@keyframes fxPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}
@keyframes fxDrive{from{transform:translateX(0)}to{transform:translateX(var(--dx,120px))}}
.fx-beacon.alt{animation-delay:-1.2s}

/* Consent tick box (sign-up and payment) and controls that became real buttons for keyboard users. */
.atlas-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink);cursor:pointer}
.atlas-consent a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.atlas-check{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.upi-plan-card{font:inherit;color:inherit}

/* Skip link, site footer and the static legal pages. */
.skip{position:absolute;left:12px;top:-60px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.site-foot{margin:48px auto 0;padding:22px 0 30px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.6;display:flex;flex-direction:column;gap:6px;max-width:1240px;width:100%}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600}
.site-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.site-foot a:hover{text-decoration-color:var(--ink)}
.site-foot p{margin:0}
body.legal{padding:0 16px}
.legal-top{max-width:760px;margin:0 auto;padding:22px 0 0}
.legal-home{font-weight:700;color:var(--ink);text-decoration:none}
.legal-home:hover{text-decoration:underline}
.legal-main{max-width:760px;margin:0 auto;padding:18px 0 0;line-height:1.65;font-size:16px}
.legal-main h1{font-family:var(--head);font-size:clamp(30px,6vw,44px);line-height:1.08;margin:6px 0 10px;text-wrap:balance}
.legal-main h2{font-family:var(--head);font-size:21px;margin:36px 0 8px;scroll-margin-top:20px}
.legal-kicker{color:var(--muted);font-size:13px;margin:0;font-weight:600;letter-spacing:.02em}
.legal-lede{color:var(--muted);font-size:18px;margin:0 0 18px}
.legal-main p,.legal-main li{max-width:68ch}
.legal-main ul{padding-left:22px}.legal-main li{margin:4px 0}
.legal-main a{color:var(--accent);text-underline-offset:2px}
.legal-toc{background:var(--wash);border:1px solid var(--line);border-radius:14px;padding:12px 18px}
.legal-toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:14px}
@media (max-width:560px){.legal-toc ol{columns:1}}
.legal-main .dt{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0;display:block;overflow-x:auto}
.legal-main .dt th,.legal-main .dt td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal-main .dt th{background:var(--wash)}
.legal-main code{font-family:var(--mono);font-size:13px;background:var(--wash);padding:1px 5px;border-radius:5px}
.legal-main .biz{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:8px 0}
.legal-main .biz dt{font-weight:700}.legal-main .biz dd{margin:0}
@media (max-width:480px){.legal-main .biz{grid-template-columns:1fr}.legal-main .biz dd{margin-bottom:8px}}
.legal-main mark.todo{background:var(--warn-bg);color:var(--warn);font-weight:700;padding:0 4px;border-radius:4px}
.legal-foot{max-width:760px}

/* ---------- explanation sheet: the meaning of what you tapped, on screen ---------- */
.sheet{position:fixed;z-index:60;left:50%;bottom:0;width:min(560px,100%);max-height:min(62vh,520px);overflow:auto;
  transform:translate(-50%,105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);will-change:transform;
  background:var(--panel);border:2px solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);
  padding:10px 18px calc(16px + env(safe-area-inset-bottom,0px))}
.sheet.open{transform:translate(-50%,0)}
@media (min-width:761px){.sheet{display:none}}
.sheet-grip{display:block;width:44px;height:5px;border-radius:5px;background:var(--wire);margin:0 auto 6px}
.sheet-x{position:absolute;top:8px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:var(--wash);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.sheet-body.detail{margin-top:6px;background:var(--hb,var(--wash));padding-right:40px}
.sheet-body.detail p{color:var(--ink);font-size:15.5px;line-height:1.55}
.sheet-hint{margin:10px 2px 0;font-size:12.5px;color:var(--faint)}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}

/* ---------- story: one idea per card ---------- */
.story{max-width:720px;margin:0 auto;outline:none}
.st-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.st-dots{display:flex;gap:6px;flex-wrap:wrap}
.st-dots i{width:22px;height:6px;border-radius:6px;background:var(--line)}
.st-dots i.seen{background:var(--wire)}.st-dots i.on{background:var(--ink)}
.st-card{display:flex;flex-direction:column;gap:14px;overflow-x:clip}
.st-face{background:var(--panel);border:1.5px solid var(--line);border-top:4px solid var(--hi);border-radius:18px;padding:18px 20px 22px;animation:pop .3s both;display:flex;flex-direction:column;gap:10px}
.st-pic{display:flex;align-items:center;justify-content:center;gap:12px;min-height:84px;background:var(--wash);border-radius:14px;padding:12px 10px;color:var(--hi)}
.st-pic svg{width:100%;max-width:440px;height:auto;display:block}
.st-big{font-family:var(--head);font-weight:800;font-size:clamp(30px,6vw,44px);color:var(--hi);letter-spacing:-.02em}
.st-kicker{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hi)}
.st-face h3{margin:0;font-family:var(--head);font-size:clamp(21px,3.4vw,26px);line-height:1.2;text-wrap:balance}
.st-face p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink)}
.st-box{border-radius:12px;padding:10px 14px;font-size:15px;line-height:1.5;background:var(--wash)}
.st-box b{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;color:var(--muted)}
.st-tip{background:var(--hb)}
.st-tip b{color:var(--hi)}
.st-face .qq{margin-top:4px}
.st-face .opt{background:var(--panel)}
.st-face .qq{font-weight:700}
.st-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.st-nav[hidden]{display:none}
.st-count{font:600 14px var(--mono);color:var(--muted)}
.st-nav .pill:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.st-next{background:var(--ink);color:var(--paper)}
.story.all .st-card{gap:18px}
.story.all .st-face{animation:none}
.st-face.from-r,.st-face.from-l{will-change:transform,opacity}
.st-face.from-r{animation:st-in-r .42s cubic-bezier(.22,.8,.28,1) both}
.st-face.from-l{animation:st-in-l .42s cubic-bezier(.22,.8,.28,1) both}

/* Opening a box adds content inside the diagram; without this the browser scrolls to "keep its place"
   and the box you just tapped jumps off screen. */
.stage{overflow-anchor:none}

/* ---------- explore: one subject, several small toys ---------- */
.xp{display:flex;flex-direction:column;gap:14px}
.xp-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;background:var(--wash);border-radius:16px;padding:4px}
.xp-tab{appearance:none;border:0;background:none;font:700 13.5px var(--font);color:var(--muted);border-radius:12px;padding:9px 6px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;min-height:44px;touch-action:manipulation}
.xp-tab svg{width:18px;height:18px;flex:none}
.xp-tab[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.xp-tab[aria-selected="true"] svg{color:var(--hi)}
@media (max-width:520px){.xp-tab{flex-direction:column;gap:3px;font-size:12px;padding:7px 2px}}
.xp-view{display:flex;flex-direction:column;gap:12px;animation:pop .3s both}
.xp-stage{background:var(--wash);border-radius:16px;padding:10px 8px}
.xp-svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;font-family:var(--font)}
.xp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.xp-row .xp-next{margin-left:auto}
.xp-chips{display:flex;flex-wrap:wrap;gap:8px}
.xp-chips:empty{display:none}
.xp-chip{appearance:none;font:inherit;text-align:left;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;padding:7px 11px;display:flex;flex-direction:column;gap:1px;cursor:pointer;min-height:44px;justify-content:center;touch-action:manipulation}
.xp-chip b{font-size:14px}
.xp-chip span{font-size:12.5px;color:var(--muted)}
.xp-chip.mark{border-color:var(--hi)}
.xp-chip.on{background:var(--hb);border-color:var(--hi)}

/* seats */
.xp-seat{fill:var(--wire);transform-box:fill-box;transform-origin:center}
.xp-svg.in .xp-seat{animation:xp-seat .45s var(--d) both}
@keyframes xp-seat{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.xp-svg[data-step="assembly"] .xp-seat{fill:var(--hi)}
.xp-base{stroke:var(--wire);stroke-width:2;stroke-linecap:round}
.xp-cap{font-size:14px;font-weight:800;fill:var(--ink)}
.xp-ring{fill:none;stroke:var(--num);stroke-width:2.2;opacity:0;transition:opacity .3s}
.xp-svg.show-cook .xp-ring{opacity:1;animation:xp-pulse 1.2s ease-in-out infinite}
.xp-svg.show-cook .xp-cook{fill:var(--num)}
@keyframes xp-pulse{50%{stroke-width:4}}
.xp-out circle{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:3 2.5}
.xp-cn{fill:var(--hi);opacity:0;transition:transform .9s cubic-bezier(.3,.7,.2,1) var(--d),opacity .3s var(--d)}
.xp-svg.has-council .xp-cn{opacity:1;transform:translate(var(--dx),var(--dy))}
.xp-svg.has-council .xp-seat{fill:var(--wire)}
.xp-layer{opacity:0;transition:opacity .4s}
.xp-ex{fill:var(--hi);transform:translate(var(--dx),-36px) scale(.3);transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.3,.7,.2,1) var(--d)}
.xp-svg.has-anc .xp-anc{opacity:1}
.xp-svg.has-anc .xp-ex{transform:none}
.xp-svg.has-secretariat .xp-sec{opacity:1}
.xp-roof{fill:var(--hb);stroke:var(--hi);stroke-width:1.5;stroke-linejoin:round}
.xp-house{fill:var(--panel);stroke:var(--hi);stroke-width:1.5}
.xp-door{fill:var(--hb);stroke:var(--hi);stroke-width:1.5;cursor:pointer}
.xp-door:hover{fill:var(--hi)}
.xp-steps{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.xp-steps::-webkit-scrollbar{display:none}
.xp-step{appearance:none;flex:none;font:700 13.5px var(--font);border:1.5px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:7px 12px 7px 7px;display:flex;align-items:center;gap:7px;cursor:pointer;min-height:40px;touch-action:manipulation}
.xp-step i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--wash);color:var(--muted);font-size:12px}
.xp-step.done{color:var(--ink)}.xp-step.done i{background:var(--hb);color:var(--hi)}
.xp-step.on{border-color:var(--ink);color:var(--ink)}.xp-step.on i{background:var(--ink);color:var(--paper)}

/* departures board: night-board materials, the same in both themes */
.xp-board{background:var(--m-night);border-radius:16px;padding:12px 10px 8px;display:flex;flex-direction:column;gap:4px}
.xb-head{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;padding:0 4px 6px;border-bottom:1px solid var(--m-nrwy)}
.xb-head b{grid-row:span 2;font:800 13px var(--mono);color:var(--m-night);background:var(--m-lyellow);border-radius:5px;padding:3px 7px;letter-spacing:.08em}
.xb-head span{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-ntext)}
.xb-head span + span{display:none}
.xb-row{appearance:none;border:0;background:none;text-align:left;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:3px;padding:8px 4px;border-radius:10px;touch-action:manipulation}
.xb-row + .xb-row{border-top:1px solid var(--m-nrwy)}
.xb-row:hover,.xb-row.on{background:var(--m-black)}
.xb-city{display:flex;gap:2px;flex-wrap:wrap}
.xb-city i{font:700 15px/1 var(--mono);font-style:normal;color:var(--m-light);background:var(--m-nrwy);border-radius:3px;min-width:15px;padding:5px 1px;text-align:center;position:relative}
.xb-city i::after{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--m-night)}
.xb-city i.flap{color:var(--m-ntext)}
.xb-reg{font-size:13px;color:var(--m-ntext);display:flex;gap:8px;align-items:center}
.xb-reg em{font:800 11px var(--mono);font-style:normal;letter-spacing:.08em;color:var(--m-night);background:var(--m-green);border-radius:4px;padding:2px 6px}
.xb-row.hq .xb-city i{color:var(--m-lyellow)}
@media (min-width:640px){.xb-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px}.xb-head{grid-template-columns:auto 1fr 1fr}.xb-head b{grid-row:auto}.xb-head span + span{display:block}}

/* rulebook shelf */
.xs-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:52px}
.xs-title b{font-family:var(--head);font-size:clamp(20px,4.6vw,24px);color:var(--ink)}
.xs-title em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hi);background:var(--hb);border-radius:999px;padding:2px 9px}
.xs-title span{flex-basis:100%;font-size:14.5px;color:var(--muted)}
.xs-shelf{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding:22px 14px 0 4px;border-bottom:3px solid var(--wire);min-height:118px}
.xs-book{appearance:none;flex:1 1 0;max-width:58px;height:calc(84px * var(--w));min-height:40px;border:1.5px solid var(--hi);border-radius:3px 6px 6px 3px;background:var(--panel);cursor:pointer;padding:10px 7px;display:flex;flex-direction:column;gap:5px;transition:transform .25s cubic-bezier(.3,.7,.2,1),background .2s;touch-action:manipulation}
.xs-book span{display:block;height:2px;border-radius:2px;background:var(--wire)}
.xs-book span:first-child{background:var(--hi);opacity:.6}
.xs-book.on{transform:translateY(-14px);background:var(--hb)}
.xs-range{width:100%;accent-color:var(--hi);margin:4px 0 0;height:28px}
.xs-ends{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:-6px}

/* wheel */
.xw-wheel{transform-box:view-box;transform-origin:150px 162px;transition:transform 2.4s cubic-bezier(.15,.75,.2,1)}
.xw-seg path{fill:var(--panel);stroke:var(--line);stroke-width:1.5;transition:fill .3s}
.xw-seg:nth-child(even) path{fill:var(--wash)}
.xw-seg.seen path{fill:var(--hb)}
.xw-seg.on path{fill:var(--hi)}
.xw-seg text{font:800 20px var(--head);fill:var(--muted)}
.xw-seg.seen text{fill:var(--hi)}
.xw-seg.on text{fill:var(--panel)}
.xw-seg{cursor:pointer}
.xw-l{transform-box:fill-box;transform-origin:center;transition:transform 2.4s cubic-bezier(.15,.75,.2,1)}
.xw-hub{fill:var(--ink);cursor:pointer}
.xw-hubt{font:800 13px var(--font);letter-spacing:.12em;fill:var(--paper);pointer-events:none}
.xw-pin{fill:var(--ink)}
.xw-prog{font:600 14px var(--mono);color:var(--muted)}
.xw-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.xw-list[hidden]{display:none}
.xw-list li{background:var(--wash);border-radius:12px;padding:8px 12px;font-size:14.5px}
.xw-list b{color:var(--hi);margin-right:4px}
@media (prefers-reduced-motion:reduce){.xp-cn,.xp-ex,.xw-wheel,.xw-l,.xs-book{transition:none}.xp-svg.in .xp-seat{animation:none}}

/* board without a second column (codes) */
.xb-head.solo span{display:none}
.xb-row .xb-city i{min-width:15px}

/* dial: a number line split into bands */
.xd-read{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:56px}
.xd-read b{font:800 clamp(24px,6vw,30px) var(--head);color:var(--ink);font-variant-numeric:tabular-nums}
.xd-read em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hi);background:var(--hb);border-radius:999px;padding:3px 10px}
.xd-read span{flex-basis:100%;font-size:14.5px;color:var(--muted)}
.xd-band rect{fill:var(--panel);stroke:var(--line);stroke-width:1.2;transition:fill .25s}
.xd-band.alt rect{fill:var(--wash)}
.xd-band.on rect{fill:var(--hb);stroke:var(--hi)}
.xd-tick{stroke:var(--muted);stroke-width:1.4}
.xd-tl{font:600 11.5px var(--mono);fill:var(--muted)}
.xd-nl{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.xd-nk{fill:var(--ink)}
.xd-needle{transition:transform .25s cubic-bezier(.3,.7,.2,1)}

/* clock: deadlines round a dial */
.xc-face{fill:var(--panel);stroke:var(--line);stroke-width:1.5}
.xc-tick{stroke:var(--wire);stroke-width:2;stroke-linecap:round}
.xc-arc{fill:none;stroke:var(--hi);stroke-width:5;stroke-linecap:round;opacity:.35}
.xc-mark{cursor:pointer}
.xc-mark circle{fill:var(--panel);stroke:var(--hi);stroke-width:2;transition:fill .3s}
.xc-mark.done circle{fill:var(--hb)}
.xc-mark.on circle{fill:var(--hi)}
.xc-mark text{font:700 11px var(--mono);fill:var(--muted)}
.xc-mark.on text{fill:var(--ink)}
.xc-hand{stroke:var(--ink);stroke-width:3;stroke-linecap:round;transform-box:view-box;transform-origin:150px 150px;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.xc-pin{fill:var(--ink)}
.xc-big{font:800 20px var(--head);fill:var(--ink)}
.xc-small{font:600 12px var(--font);fill:var(--muted)}
@media (prefers-reduced-motion:reduce){.xc-hand,.xd-needle{transition:none}}
.xb-city i.sep{background:none;min-width:9px}.xb-city i.sep::after{display:none}
.xp-svg.xc{max-width:340px}
/* ---------- stamp desk: case files and treaty stamps ---------- */
.sd{display:flex;flex-direction:column;gap:12px}
.sd-bar{display:flex;align-items:center;gap:5px}
.sd-bar i{flex:1;height:6px;border-radius:6px;background:var(--line)}
.sd-bar i.on{background:var(--ink)}.sd-bar i.done{background:var(--hi)}.sd-bar i.miss{background:var(--wire)}
.sd-bar span{font:600 13px var(--mono);color:var(--muted);margin-left:6px;white-space:nowrap}
.sd-file{position:relative;background:var(--panel);border:1.5px solid var(--line);border-radius:4px 16px 16px 16px;padding:26px 18px 18px;min-height:190px;box-shadow:var(--shadow)}
.sd-file.in{animation:sd-in .35s cubic-bezier(.3,.7,.2,1) both}
@keyframes sd-in{from{opacity:0;transform:translateY(14px) rotate(-1deg)}to{opacity:1;transform:none}}
.sd-tab{position:absolute;top:-13px;left:-1.5px;background:var(--hb);color:var(--hi);font:800 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:8px 8px 0 0;border:1.5px solid var(--line);border-bottom:0}
.sd-text{margin:0;font-size:17px;line-height:1.6;color:var(--ink);max-width:56ch}
.sd-ink{display:flex;justify-content:flex-end;min-height:64px;margin-top:8px}
.sd-mark{display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:7px 14px;border:3px double currentColor;border-radius:10px;transform:rotate(var(--r));font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;animation:sd-thud .32s cubic-bezier(.2,.9,.3,1.2) both;mix-blend-mode:multiply}
.sd-mark b{font-size:16px;font-weight:800}.sd-mark small{font-size:11px;font-weight:700}
.sd-mark.ok{color:var(--hi)}.sd-mark.no{color:var(--warn);opacity:.85}
:root[data-theme="dark"] .sd-mark{mix-blend-mode:normal}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sd-mark{mix-blend-mode:normal}}
@keyframes sd-thud{0%{opacity:0;transform:rotate(var(--r)) scale(1.7)}70%{opacity:1;transform:rotate(var(--r)) scale(.94)}100%{transform:rotate(var(--r)) scale(1)}}
.sd-row{display:flex;justify-content:flex-end;margin-top:6px}
.sd-score{margin:0 0 6px;font-size:16px;color:var(--muted)}.sd-score b{font:800 34px var(--head);color:var(--ink);margin-right:6px}
.sd-label{margin:2px 0 -4px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sd-tray{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.sd-tray{grid-template-columns:1fr 1fr}}
.sd-stamp{appearance:none;font:inherit;position:relative;background:var(--panel);border:1.5px solid var(--line);border-bottom:4px solid var(--hi);border-radius:12px;padding:16px 10px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink);transition:transform .12s;touch-action:manipulation;min-height:58px}
.sd-stamp b{font-size:14.5px;text-align:center}.sd-stamp small{font-size:11.5px;color:var(--muted);text-align:center}
.sd-handle{position:absolute;top:-1px;left:50%;width:30px;height:8px;margin-left:-15px;border-radius:0 0 8px 8px;background:var(--wire)}
.sd-stamp:active:not(:disabled){transform:translateY(3px)}
.sd-stamp:disabled{cursor:default}
.sd-stamp.used{opacity:.4;border-bottom-color:var(--warn)}
.sd-cheat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.sd-cheat[hidden]{display:none}
.sd-cheat > div{background:var(--wash);border-radius:14px;padding:12px 14px}
.sd-cheat b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sd-cheat ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:5px;font-size:14px;color:var(--muted)}
.sd-cheat li span{font-weight:700;color:var(--ink)}

/* ---------- memory-trick cards ---------- */
.sc{display:flex;flex-direction:column;gap:12px}
.sc-rail{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.sc-rail button{appearance:none;font:700 13px var(--mono);border:1.5px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;padding:6px 0;cursor:pointer;min-height:40px;touch-action:manipulation}
.sc-rail button.seen{background:var(--hb);color:var(--hi);border-color:transparent}
.sc-rail button.on{border-color:var(--ink);color:var(--ink)}
.sc-card{background:var(--panel);border:1.5px solid var(--line);border-radius:20px;padding:12px 12px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.sc-card.in{animation:sd-in .3s cubic-bezier(.3,.7,.2,1) both}
.sc-art{position:relative;background:var(--wash);border-radius:14px;padding:12px 8px 6px;overflow:hidden}
.sc-art svg{display:block;width:100%;max-width:460px;height:auto;margin:0 auto;font-family:var(--font)}
.sc-head{display:flex;align-items:center;justify-content:space-between;margin:2px 6px 0}
.sc-badge{display:flex;align-items:baseline;gap:8px;font:800 34px/1 var(--head);color:var(--hi);letter-spacing:-.02em}
.sc-badge small{font:800 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sc-ico{width:40px;height:40px;border-radius:12px;background:var(--hb);color:var(--hi);display:grid;place-items:center}
.sc-ico svg{width:22px;height:22px}
.sc-trick{margin:0 6px;font-size:18px;line-height:1.5;color:var(--ink);font-style:italic}
.sc-trick span{display:block;font:800 11.5px var(--font);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sc-trick.none{font-style:normal;color:var(--muted);font-size:15px}
.sc-reveal{display:flex;align-items:center;justify-content:flex-end;min-height:60px;margin:0 6px}
.sc-name{display:none;flex-direction:column;gap:4px;flex:1;background:var(--hb);border-radius:14px;padding:12px 16px}
.sc-name.on{display:flex;animation:sc-up .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes sc-up{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.sc-name b{font:800 20px/1.25 var(--head);color:var(--ink)}
.sc-name em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hi)}
.sc-show[hidden]{display:none}
.sc-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sc-prog{font:600 13.5px var(--mono);color:var(--muted)}
.sc-list{display:grid;gap:6px}
.sc-list[hidden]{display:none}
.sc-list div{display:flex;gap:12px;align-items:baseline;background:var(--wash);border-radius:12px;padding:8px 12px}
.sc-list b{font:800 16px var(--mono);color:var(--hi);min-width:24px}
.sc-list span{display:flex;flex-direction:column;font-weight:700;font-size:14.5px}
.sc-list small{font-weight:400;font-style:italic;color:var(--muted);font-size:13px}

/* Small motion vocabulary for drawn pictures (class names used inside lesson SVGs) */
.sc-art [class^="a-"],.sc-art [class*=" a-"]{transform-box:fill-box;transform-origin:center}
.a-bob{animation:a-bob 2.4s ease-in-out infinite}
@keyframes a-bob{50%{transform:translateY(-6px)}}
.a-pop{animation:a-pop .55s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes a-pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.a-blink{animation:a-blink 1.8s ease-in-out infinite}
@keyframes a-blink{50%{opacity:.15}}
.a-draw{animation:a-draw 1s ease both}
@keyframes a-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.sc-art .a-cross{transform-box:view-box;transform-origin:0 0;transform:translateX(160px);animation:a-cross 7s linear infinite}
@keyframes a-cross{from{transform:translateX(-50px)}to{transform:translateX(370px)}}
.a-fall{animation:a-fall 1.4s ease-in infinite}
@keyframes a-fall{from{opacity:1}to{opacity:0;transform:translateY(16px)}}
.a-dial{animation:a-dial 4s ease-in-out infinite alternate}
@keyframes a-dial{from{transform:rotate(-40deg)}to{transform:rotate(40deg)}}
.sc-art .a-climb{transform-box:view-box;transform-origin:0 0;transform:translate(200px,80px) rotate(-20deg);animation:a-climb 5s ease-in infinite}
@keyframes a-climb{0%{transform:translate(70px,128px);opacity:0}8%{opacity:1}35%{transform:translate(140px,124px) rotate(-4deg)}90%{opacity:1}100%{transform:translate(286px,34px) rotate(-26deg);opacity:0}}
.sc-art .a-flag{transform-origin:0 50%;animation:a-flag 1.6s ease-in-out infinite}
@keyframes a-flag{33%{transform:skewY(-5deg)}66%{transform:skewY(3deg)}}
.a-drift2{animation:a-drift2 5s ease-in-out infinite alternate}
@keyframes a-drift2{to{transform:translateX(-16px)}}
.a-rock{animation:a-rock 2.6s ease-in-out infinite alternate}
@keyframes a-rock{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.a-pulse{animation:a-pulse 1.6s ease-in-out infinite alternate}
@keyframes a-pulse{to{transform:scale(1.08)}}
.a-rise{animation:a-rise 2s ease-out infinite}
@keyframes a-rise{from{opacity:.9}to{opacity:0;transform:translateY(-14px)}}
.sc-art .a-tick9{transform-origin:50% 100%;animation:a-tick9 1.6s cubic-bezier(.3,.7,.2,1) .3s both}
@keyframes a-tick9{from{transform:rotate(0)}to{transform:rotate(-90deg)}}
.sc-art .a-tick9{transform:rotate(-90deg)}
.a-wave{animation:a-wave 1.8s ease-out infinite}
@keyframes a-wave{0%{opacity:0;transform:scale(.85)}30%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
.a-alt1{animation:a-alt 3.2s ease-in-out infinite}
.a-alt2{animation:a-alt 3.2s ease-in-out -1.6s infinite}
@keyframes a-alt{0%,45%{opacity:1;transform:none}50%,95%{opacity:0;transform:scale(.8)}}
.a-sea{animation:a-sea 2s ease-in-out infinite alternate}
@keyframes a-sea{to{transform:translateX(7px)}}
.sc-art .a-walk{transform-box:view-box;transform-origin:0 0;transform:translateX(150px);animation:a-walk 9s linear infinite}
@keyframes a-walk{from{transform:translateX(-40px)}to{transform:translateX(360px)}}
.a-swap1{animation:a-swap 3.2s ease-in-out infinite}
.a-swap2{animation:a-swap 3.2s ease-in-out -1.6s infinite}
@keyframes a-swap{0%,40%{opacity:1;transform:none}50%,90%{opacity:0;transform:translateY(-8px)}}
.a-puff{animation:a-puff 2s linear infinite}
@keyframes a-puff{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:translate(-90px,-6px) scale(1.5)}}
.sc-art .a-pin{transform-origin:0 50%;animation:a-pin 1.6s ease-in-out infinite alternate}
@keyframes a-pin{to{transform:rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.sc-art *{animation:none!important}.sc-art .a-swap1{opacity:0}.sc-art .a-alt2{opacity:.5}.sc-name.on{animation:none}}
@media (prefers-reduced-motion:reduce){.sd-file.in,.sc-card.in,.sd-mark{animation:none}.sc-foil{transition:none}}

/* ---------- touch screens: every link and toggle gets a finger-sized target ---------- */
@media (pointer:coarse){
  .bar a.bar-back,.legal-home{min-height:44px;padding-block:10px;display:inline-flex;align-items:center}
  .site-foot nav a{display:inline-flex;align-items:center;min-height:44px}
  .site-foot nav{gap:0 18px}
  .trk{min-height:40px}
}
.ix-none{color:var(--muted);font-size:15px;padding:24px 4px}
@media (max-width:400px){.sc-rail{grid-template-columns:repeat(7,1fr)}}
/* phones: story pictures run edge to edge in their card, so their labels stay readable */
@media (max-width:520px){.st-pic{margin-inline:-12px;padding:8px 4px;border-radius:12px}}
.st-pic svg text[font-size="9"]{font-size:11px}.st-pic svg text[font-size="11"]{font-size:12px}

/* ---------- pricing page ---------- */
.pricing .legal-main,.pricing .legal-top,.pricing .legal-foot{max-width:980px}
.pr-main .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr-free{background:var(--wash);border:1px solid var(--line);border-radius:18px;padding:16px 20px;margin:4px 0 22px}
.pr-free h2{margin:0 0 4px;font-size:19px}
.pr-free p{margin:0 0 12px}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pr-card{background:var(--panel);border:1.5px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pr-card h2{margin:0;font-size:22px}
.pr-exam{position:relative;background:linear-gradient(160deg,var(--exam-bg) 0%,var(--exam-panel) 55%);border:2.5px solid var(--exam-gold);box-shadow:0 0 0 5px color-mix(in srgb,var(--exam-gold) 16%,transparent),0 14px 34px color-mix(in srgb,var(--exam-gold) 22%,transparent);padding-top:30px}
.pr-ribbon{position:absolute;top:-15px;left:20px;margin:0;background:var(--exam-gold);color:#1E1606;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:999px;box-shadow:2px 2px 0 var(--exam-fg);white-space:nowrap}
.pr-exam .pr-price{background:var(--panel);border-color:var(--exam-line)}
.pr-exam .pr-price.best{position:relative;border:2px solid var(--exam-gold);background:var(--exam-tint)}
.pr-exam .pr-price b{color:var(--exam-fg)}
.legal-main .pr-exam a.pr-btn{background:var(--exam-gold);border-color:var(--exam-gold);color:#1E1606}
.legal-main .pr-exam a.pr-btn.soft{background:transparent;border-color:var(--exam-gold);color:var(--exam-fg)}
.pr-tag{position:absolute;top:-11px;right:10px;background:var(--exam-fg);color:var(--exam-bg);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.pr-value{margin:2px 0 0;padding:10px 12px;border-radius:12px;background:var(--exam-tint);border:1px dashed var(--exam-gold);color:var(--exam-fg);font-size:14.5px;line-height:1.45}
.pr-exam .pr-list li::marker{color:var(--exam-gold)}
.pr-exam .pr-list{color:var(--exam-fg)}
.pr-table .pr-col-exam{background:var(--exam-tint);color:var(--exam-fg)}
.pr-table th.pr-col-exam{border-bottom:2px solid var(--exam-gold)}
.pr-exam h2{color:var(--exam-fg)}
.pr-lede{margin:0;color:var(--muted);font-size:15px;line-height:1.45}
.pr-exam .pr-lede{color:var(--exam-dim)}
.pr-prices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pr-price{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--paper)}
.pr-price.best{border-color:var(--ink)}
.pr-dur{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.pr-price b{font-family:var(--head);font-size:30px;line-height:1.1;color:var(--ink)}
.pr-note{font-size:13px;color:var(--muted);margin-bottom:8px}
.legal-main a.pr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;font-size:14.5px;text-decoration:none;border:1.5px solid var(--ink);margin-top:auto}
.legal-main a.pr-btn.soft{background:transparent;color:var(--ink)}
.legal-main a.pr-btn:hover{opacity:.88}
.pr-free a.pr-btn{margin-top:0}
.pr-list{margin:4px 0 0;padding-left:20px;font-size:15px;line-height:1.5}
.pr-list li{margin:5px 0}
.pr-scroll{overflow-x:auto;margin:10px 0;position:relative}  /* contains the hidden screen-reader text, which otherwise widens the page on phones */
.legal-main .pr-table{display:table;margin:0}
.pr-table td.y,.pr-table td.n{text-align:center;font-weight:700;width:18%}
.pr-table td.y{color:var(--ink)}
.pr-table td.n{color:var(--muted)}
.pr-table thead th{text-align:center}
.pr-table thead th:first-child,.pr-up thead th{text-align:left}
.pr-calc{display:block;color:var(--muted);font-size:13px;white-space:nowrap}
@media (max-width:480px){.legal-main .pr-table{font-size:13px}.legal-main .pr-table th,.legal-main .pr-table td{padding:7px 6px}}
.pr-steps{padding-left:22px}
.pr-steps li{margin:6px 0}
@media (max-width:760px){.pr-grid{grid-template-columns:1fr;gap:28px}.pr-exam{order:-1}}
.pr-grid{margin-top:14px}
@media (max-width:380px){.pr-prices{grid-template-columns:1fr}}

/* ---------- account menu: plan and days left ---------- */
.auth-menu-plan{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:var(--wash);border:1px solid var(--line)}
.auth-menu-plan b{font-size:13.5px;color:var(--ink)}
.auth-menu-plan span{font-size:12.5px;color:var(--muted);line-height:1.35}
.auth-menu-plan .days{font-family:var(--head);font-size:20px;font-weight:800;color:var(--ink);line-height:1.15}
.auth-menu-plan.soon .days{color:var(--warn)}
.auth-menu-plan.exam{background:var(--exam-bg);border-color:var(--exam-line)}
.auth-menu-plan.exam b,.auth-menu-plan.exam .days{color:var(--exam-fg)}
.auth-menu-plan.exam span{color:var(--exam-dim)}
.auth-menu-link{font-size:13px;color:var(--muted);text-align:center;text-decoration:underline;text-underline-offset:2px;padding:4px 0}
.auth-menu-link:hover{color:var(--ink)}
.upi-plan-card[disabled]{opacity:.55;cursor:not-allowed}
.upi-plan-was{font-size:11.5px;color:var(--muted);text-decoration:line-through}
.upi-upgrade-note{background:var(--h1);color:var(--h1i);border-radius:12px;padding:8px 12px;font-size:13px;line-height:1.4;margin:0 0 10px}
.upi-compare{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* the menu's upgrade button keeps its colour (the soft style would wash it out) */
.auth-menu .atlas-btn-accent.atlas-btn-soft{background:var(--accent);color:#fff;border-color:var(--accent)}
.auth-menu .atlas-btn-accent.atlas-btn-soft:hover{box-shadow:2px 2px 0 var(--ink)}

/* public pricing link: in the top bar and under the home search */
a.pill{text-decoration:none}
.ix-plans{margin:12px 0 0;font-size:15px;color:var(--muted)}
.ix-plans a{color:var(--ink);font-weight:700;text-underline-offset:3px;white-space:nowrap}

/* ---------- flight animations (fly, hold) ---------- */
.fx-stage{background:var(--wash);border:1px solid var(--line);border-radius:18px;padding:8px;overflow:hidden}
.fx-svg{display:block;width:100%;height:auto;max-height:70vh;margin:auto;font-family:var(--font);touch-action:pan-y}
.fx-svg text{fill:var(--ink)}
.fx-svg [data-k]{transition:opacity .45s ease}
.fx-svg .fx-off{opacity:0}
.fx-svg .fx-hot{animation:fxHot 1.6s ease-out 1}
@keyframes fxHot{0%{opacity:.2}35%{opacity:1}100%{opacity:1}}
.fx-trail{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.fx-trail.dash{stroke-dasharray:8 7}
.fx-ghost{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.28;stroke-dasharray:5 6}
.fx-trail.h0,.fx-ghost.h0{stroke:var(--h0i)}.fx-trail.h1,.fx-ghost.h1{stroke:var(--h1i)}.fx-trail.h2,.fx-ghost.h2{stroke:var(--h2i)}
.fx-trail.h3,.fx-ghost.h3{stroke:var(--h3i)}.fx-trail.h4,.fx-ghost.h4{stroke:var(--h4i)}.fx-trail.h5,.fx-ghost.h5{stroke:var(--h5i)}
.fx-trail.hw,.fx-ghost.hw{stroke:var(--warn)}
.fx-plane-body{stroke:var(--paper);stroke-width:1.6;paint-order:stroke}
.fx-plane.h0 .fx-plane-body{fill:var(--h0i)}.fx-plane.h1 .fx-plane-body{fill:var(--h1i)}.fx-plane.h2 .fx-plane-body{fill:var(--h2i)}
.fx-plane.h3 .fx-plane-body{fill:var(--h3i)}.fx-plane.h4 .fx-plane-body{fill:var(--h4i)}.fx-plane.h5 .fx-plane-body{fill:var(--h5i)}
.fx-plane.hw .fx-plane-body{fill:var(--warn)}
.fx-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.fx-ctl .pill[disabled]{opacity:.4;cursor:default}
.fx-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.fx-step{width:100%;display:flex;gap:10px;align-items:flex-start;text-align:left;font:inherit;font-size:14px;line-height:1.35;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;cursor:pointer;min-height:44px}
.fx-step i{font-style:normal;font-weight:800;font-size:12px;flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--wash);color:var(--muted)}
.fx-step.done i{background:var(--h1);color:var(--h1i)}
.fx-step.on{border-color:var(--ink);box-shadow:var(--pop)}
.fx-step.on i{background:var(--ink);color:var(--paper)}
.fx-step.warn.on{border-color:var(--warn)}
.hold{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.hold{grid-template-columns:1fr}}
.hold-svg{max-height:none}
.hold-ring{fill:var(--panel);stroke:var(--line);stroke-width:2}
.hold-sec{opacity:.38;transition:opacity .3s;cursor:pointer}
.hold-sec.h1{fill:var(--h1)}.hold-sec.h2{fill:var(--h2)}.hold-sec.h3{fill:var(--h3)}
.hold-sec.on{opacity:1}
.quizzing .hold-sec{opacity:.12}.quizzing .hold-lab{opacity:0}
.hold-lab{pointer-events:none;transition:opacity .3s}

.hold-lab.h1 text{fill:var(--h1i)}.hold-lab.h2 text{fill:var(--h2i)}.hold-lab.h3 text{fill:var(--h3i)}
.hold-70{stroke:var(--ink);stroke-width:1.8;stroke-dasharray:7 6;opacity:.55}
.hold-axis{stroke:var(--ink);stroke-width:1.4;opacity:.25}
.hold-pat{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:7 7;opacity:.4}
.hold-fix{fill:var(--ink)}
.fx-svg .hold-txt.small{fill:var(--muted)}
.hold-arrow{cursor:grab;transition:opacity .3s}
.hold-arrow:active{cursor:grabbing}
.hold-panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.hold-lbl{font-size:15px;color:var(--muted)}
.hold-hdg{font-family:var(--head);font-size:26px;color:var(--ink);margin-left:4px}
.hold-range{width:100%;accent-color:var(--ink);min-height:32px}
.hold-sector{align-self:flex-start;font-weight:800;font-size:15px;padding:5px 12px;border-radius:999px;background:var(--wash)}
.hold-sector.h1{background:var(--h1);color:var(--h1i)}.hold-sector.h2{background:var(--h2);color:var(--h2i)}.hold-sector.h3{background:var(--h3);color:var(--h3i)}
.hold-flex{margin:0;font-size:13.5px;color:var(--num);background:var(--h4);border-radius:10px;padding:6px 10px}
.hold-presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip-btn{font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;min-height:38px;cursor:pointer}
.chip-btn:hover{border-color:var(--ink)}
.hold-title{margin:6px 0 0;font-family:var(--head);font-size:18px}
.hold-title.h1{color:var(--h1i)}.hold-title.h2{color:var(--h2i)}.hold-title.h3{color:var(--h3i)}
.hold-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.45}
.hold-steps li{color:var(--muted);transition:color .25s}
.hold-steps li.on{color:var(--ink);font-weight:700}
.hold-steps li.done{color:var(--ink)}
.hold-quiz{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:12px}
.hold-quiz p{margin:0 0 10px}
.hold-qbtns{display:flex;flex-wrap:wrap;gap:8px}
.hold-ok b{color:var(--h1i)}.hold-no b{color:var(--warn)}

/* the shelf view for things that are not books */
.xs-bars,.xs-steps{align-items:flex-end;gap:10px;min-height:150px;padding:14px 6px 0}
.xs-col{appearance:none;flex:1 1 0;min-width:0;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-height:150px;touch-action:manipulation;color:var(--ink)}
.xs-bar{display:block;width:min(100%,64px);height:calc(14px + 104px * var(--k));border-radius:10px 10px 3px 3px;background:var(--hb);border:1.5px solid color-mix(in srgb,var(--hi) 55%,transparent);transition:background .2s,transform .25s cubic-bezier(.3,.7,.2,1)}
.xs-cap{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--panel);border:1.5px solid var(--line);color:var(--hi)}
.xs-cap .ico{width:16px;height:16px}
.xs-val{font:800 13px var(--mono);color:var(--muted)}
.xs-col.on .xs-bar{background:var(--hi);border-color:var(--hi)}
.xs-col.on .xs-cap{background:var(--hi);color:var(--paper);border-color:var(--hi)}
.xs-col.on .xs-val{color:var(--ink)}
.xs-steps .xs-bar{border-radius:6px;width:100%}
.xs-lab{font:700 11.5px/1.2 var(--font);font-style:normal;color:var(--muted);text-align:center;hyphens:auto;-webkit-hyphens:auto;max-width:100%}
@media (max-width:520px){.xs-bars,.xs-steps{gap:5px;padding-inline:0}.xs-lab{font-size:10.5px}}
.xs-col.on .xs-lab{color:var(--ink)}
.xs-num{font:800 13px var(--mono);color:var(--muted);font-style:normal}
.xs-steps .xs-col.on .xs-num{color:var(--hi)}
.xs-tank{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;border:2.5px solid var(--wire);border-bottom-width:2.5px;border-radius:18px 18px 12px 12px;padding:8px;min-height:0;max-width:340px;margin:8px auto 4px;background:var(--wash)}
.xs-layer{appearance:none;border:0;border-radius:8px;background:color-mix(in srgb,var(--hi) calc(18% + 10% * var(--i,0)),var(--panel));padding:9px 12px;text-align:left;font:700 13.5px var(--font);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:background .2s,transform .2s}
.xs-layer.on{background:var(--hi);color:var(--paper);transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.xs-bar,.xs-layer{transition:none}}

/* ---------- journey: one aircraft, stop by stop, with the body in charge of each job ---------- */
.jy-cast-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.jy-cast{appearance:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:8px;align-items:center;text-align:left;padding:12px;border-radius:16px;border:1.5px solid color-mix(in srgb,var(--hi) 35%,var(--line));background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation;transition:background .25s,box-shadow .25s}
.jy-cast:hover{box-shadow:var(--shadow)}
.jy-cast.full{background:var(--hb);border-color:var(--hi)}
.jy-av{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--hb);color:var(--hi)}
.jy-cast.full .jy-av{background:var(--hi);color:var(--panel)}
.jy-av .ico{width:21px;height:21px}
.jy-who{display:flex;flex-direction:column;min-width:0}
.jy-who strong{font:800 15px/1.2 var(--head)}
.jy-who small{font:600 12px/1.3 var(--font);color:var(--hi);text-transform:uppercase;letter-spacing:.06em}
.jy-cnt{font:700 13px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.jy-dots{grid-column:1/-1;display:flex;gap:4px}
.jy-dots i{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background .3s}
.jy-dots i.on{background:var(--hi)}
.jy-scene{background:var(--wash);border:1px solid var(--line);border-radius:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.jy-svg{display:block;width:100%;min-width:760px;height:auto;font-family:var(--font)}
.jy-sky{fill:color-mix(in srgb,var(--h0) 55%,var(--panel))}
.jy-ground{fill:color-mix(in srgb,var(--h1) 70%,var(--panel))}
.jy-cloud{fill:color-mix(in srgb,var(--panel) 90%,var(--ink));opacity:.8}
.jy-road{fill:none;stroke:var(--wire);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
.jy-done{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000}
.jy-stop{cursor:pointer;outline:none}
.jy-ring{fill:var(--panel);stroke:var(--wire);stroke-width:2;transition:fill .25s,stroke .25s}
.jy-stop .ico{color:var(--muted)}
.jy-stop.past .jy-ring{stroke:var(--ink)}
.jy-stop.past .ico{color:var(--ink)}
.jy-stop.on .jy-ring{fill:var(--ink);stroke:var(--ink)}
.jy-stop.on .ico{color:var(--panel)}
.jy-stop.warn .jy-ring{stroke:var(--warn)}
.jy-stop.warn.on .jy-ring{fill:var(--warn)}
.jy-stop:focus-visible .jy-ring{stroke:var(--accent);stroke-width:3.5}
.jy-lab{font:700 13px var(--font);fill:var(--ink);text-anchor:middle}
.jy-stop:not(.on):not(.past) .jy-lab{fill:var(--muted)}
.jy-plane{color:var(--ink);pointer-events:none}
.jy-plane path{fill:var(--accent);stroke:var(--panel);stroke-width:1.2}
.jy-tag{font:700 10px var(--mono);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--panel);stroke-width:3px}
.jy-ctl{margin:12px 0 10px}
.jy-ctl .pill[disabled]{opacity:.4;cursor:default}
.jy-mode{display:inline-flex;margin-left:auto;padding:3px;border-radius:999px;background:var(--wash);border:1px solid var(--line)}
.jy-mode button{appearance:none;border:0;background:none;padding:7px 14px;border-radius:999px;font:700 13px var(--font);color:var(--muted);cursor:pointer;touch-action:manipulation}
.jy-mode button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.jy-score{font:700 13px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.jy-card{background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:12px;animation:jyIn .35s ease-out}
.jy-card.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.jy-kicker{margin:0;font:700 12px var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.jy-card h4{margin:2px 0 4px;font:800 22px/1.2 var(--head)}
.jy-story{margin:0 0 12px;color:var(--muted)}
.jy-jobs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jy-job{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--wash);border:1.5px solid transparent}
.jy-job.open{background:var(--hb);border-color:color-mix(in srgb,var(--hi) 30%,transparent)}
.jy-job.right{animation:jyIn .35s ease-out}
.jy-job > div{min-width:0;flex:1}
.jy-job strong{display:block;font:700 15px/1.3 var(--font)}
.jy-job p{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.jy-job p.jy-q{color:var(--muted)}
.jy-badge{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--hi);color:var(--panel);font:800 12px var(--font);white-space:nowrap}
.jy-badge .ico{width:14px;height:14px}
.jy-job.ask{flex-wrap:wrap;align-items:center;row-gap:10px}
.jy-job.ask > div{flex:1 1 240px}
.jy-pick{flex:0 1 auto;display:flex;gap:6px;flex-wrap:wrap}
.jy-opt{appearance:none;display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;border:1.5px solid var(--hi);background:var(--panel);color:var(--hi);font:700 13px var(--font);cursor:pointer;touch-action:manipulation}
.jy-opt .ico{width:15px;height:15px}
.jy-opt.wrong{border-color:var(--line);color:var(--faint);text-decoration:line-through;animation:jyNo .3s}
@keyframes jyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes jyNo{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (max-width:620px){
  .jy-cast-row{gap:6px}
  .jy-cast{grid-template-columns:minmax(0,1fr) auto;padding:9px;column-gap:6px;row-gap:6px}
  .jy-av{display:none}
  .jy-who strong{font-size:14px}
  .jy-who small{font-size:10px;letter-spacing:.03em}
  .jy-cnt{font-size:11.5px}
  .jy-dots{gap:2px}
  .jy-mode{margin-left:0}
  .jy-card{padding:14px}
  .jy-card h4{font-size:19px}
  .jy-job.ask > div{flex-basis:100%}
  .jy-pick{flex:1 1 100%}
  .jy-opt{flex:1 1 0;justify-content:center;gap:4px;padding:9px 4px;min-width:0;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.jy-card,.jy-job.right,.jy-opt.wrong{animation:none}.jy-cast,.jy-ring,.jy-dots i{transition:none}}

/* ================= Meteorology: real photographs and live models ================= */
/* subject switch on the home pages */
/* Subject switch: two words and a flight path. The current subject wears a hand-drawn highlighter stroke in its
   own colour; the paper plane sits by it and flies along the dotted arc towards the other subject on hover. */
.subjects{--sw-regs:#ff8a4c;--sw-met:#5aa2ff;display:inline-flex;align-items:center;gap:2px;align-self:flex-start;margin:0 0 10px -4px;position:relative}
.subj{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 6px;font:800 clamp(17px,2.2vw,20px)/1.1 var(--head);letter-spacing:-.01em;text-decoration:none;color:var(--muted);min-height:44px;isolation:isolate;transition:color .3s}
.subj .ico{display:none}
.subj small{font:800 9.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed currentColor;padding:2px 6px;border-radius:999px;opacity:.8}
.subj::before{content:"";position:absolute;left:0;right:0;bottom:9px;height:.62em;z-index:-1;border-radius:3px 9px 4px 10px;background:var(--sw);opacity:0;transform:scaleX(0) rotate(-1.5deg);transform-origin:left center;transition:transform .55s cubic-bezier(.2,.9,.2,1),opacity .3s}
.subj-k-regs{--sw:var(--sw-regs)}.subj-k-met{--sw:var(--sw-met)}
.subj.on{color:var(--ink)}
.subj.on::before{opacity:.55;transform:scaleX(1) rotate(-1.5deg)}
.subj:not(.on):hover{color:var(--ink)}
.subj:not(.on):hover::before{opacity:.22;transform:scaleX(1) rotate(-1.5deg)}
.subj:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
.subj-fly{position:relative;width:58px;height:30px;flex:none;color:var(--ink)}
.subj-fly svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.subj-fly path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-dasharray:2 5;stroke-linecap:round;opacity:.45;animation:swDash 1.6s linear infinite}
@keyframes swDash{to{stroke-dashoffset:-14}}
.subj-plane{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;offset-path:path('M4 24 C 18 2, 40 2, 54 24');offset-rotate:auto;offset-distance:var(--at,0%);transition:offset-distance .9s cubic-bezier(.5,0,.2,1)}
.subj-plane svg{width:16px;height:16px;display:block;overflow:visible}.subj-plane path{fill:var(--ink);stroke:var(--paper);stroke-width:2.2;stroke-linejoin:round;paint-order:stroke}
.subjects.at-met .subj-plane{--at:100%}
.subjects.at-regs:has(.subj-k-met:hover) .subj-plane{--at:100%}
.subjects.at-met:has(.subj-k-regs:hover) .subj-plane{--at:0%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .subjects{--sw-regs:#c2531d;--sw-met:#2f6fe4}:root:not([data-theme="light"]) .subj.on::before{opacity:.75}}
:root[data-theme="dark"] .subjects{--sw-regs:#c2531d;--sw-met:#2f6fe4}:root[data-theme="dark"] .subj.on::before{opacity:.75}
@media (prefers-reduced-motion:reduce){.subj-fly path{animation:none}.subj-plane,.subj::before{transition:none}}

/* photographs: the real thing, framed in the site's card style */
.ph{margin:0;position:relative;border-radius:16px;overflow:hidden;background:var(--m-night)}
.ph-img{position:relative;z-index:1;display:block;width:100%;height:auto;object-fit:contain}
.ph-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.75);transform:scale(1.15)}
.ph figcaption.ph-credit{z-index:2}
.ph-credit{font-size:11.5px;color:var(--faint);margin-top:6px;letter-spacing:.01em}
.ph figcaption.ph-credit{position:absolute;right:8px;bottom:6px;margin:0;color:rgba(255,255,255,.85);background:rgba(0,0,0,.45);padding:2px 8px;border-radius:999px;font-size:11px;backdrop-filter:blur(4px)}
.st-photo{margin:-18px -20px 2px;border-radius:16px 16px 0 0}
.st-photo .ph-img{max-height:min(56vh,440px)}
@media (max-width:520px){.st-photo{margin:-18px -20px 0}}
.ph-wrap{display:flex;flex-direction:column;gap:10px}
.ph-frame{position:relative;border-radius:18px;overflow:hidden;background:var(--m-night);box-shadow:var(--shadow)}
.ph-frame img{display:block;width:100%;height:auto;transform-origin:50% 60%}
.ph-pin{position:absolute;transform:translate(-50%,-50%) scale(.2);opacity:0;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:6px;min-width:44px;min-height:44px;justify-content:center;transition:transform .35s cubic-bezier(.2,.9,.3,1.3),opacity .3s;transition-delay:calc(var(--i) * 120ms + 300ms)}
.ph-frame.in .ph-pin{transform:translate(-50%,-50%) scale(1);opacity:1}
.ph-pin i{font:800 13px var(--font);font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--hb);color:var(--hi);border:2px solid #fff;box-shadow:0 0 0 0 rgba(255,255,255,.7),0 2px 8px rgba(0,0,0,.45);animation:pinpulse 2.4s ease-out infinite;animation-delay:calc(var(--i) * .4s)}
@keyframes pinpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6),0 2px 8px rgba(0,0,0,.45)}70%,100%{box-shadow:0 0 0 12px rgba(255,255,255,0),0 2px 8px rgba(0,0,0,.45)}}
.ph-tag{position:absolute;left:34px;white-space:nowrap;font:700 12.5px var(--font);color:#fff;background:rgba(10,14,22,.62);padding:3px 9px;border-radius:999px;backdrop-filter:blur(6px);pointer-events:none}
.ph-l .ph-tag{left:auto;right:34px}
.ph-pin.on i{background:#fff;color:var(--hi);transform:scale(1.15)}
.ph-pin.on .ph-tag{background:rgba(255,255,255,.92);color:var(--m-black)}
.ph-wrap.test .ph-tag,.ph-wrap.test .hs-chip b{visibility:hidden}
@media (max-width:640px){.ph-tag{display:none}.ph-pin.on .ph-tag{display:block}}

/* air: a box of molecules */
.air-stage{background:var(--wash);border-radius:18px;padding:10px}
.air-box{display:block;width:100%;height:auto;max-height:340px}
.air-wall{fill:var(--panel);stroke:var(--line);stroke-width:2}
.mol circle{fill:var(--hi);transition:opacity .3s}
.mol.vap circle{fill:var(--h1i);stroke:var(--panel);stroke-width:1}
.air-box.focus .mol circle{opacity:.14}
.air-box.focus .mol.on circle{opacity:1}
.air-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;margin:12px 0 6px;gap:2px}
.air-bar i{display:block;background:var(--hi);min-width:3px}
.air-chip{border-left:5px solid var(--hi)}

/* climb: an immersive sky that changes with altitude */
.cl-stage{position:relative;height:clamp(440px,72vh,640px);border-radius:22px;overflow:hidden;isolation:isolate;background:#0b1636;box-shadow:var(--shadow);color:#fff}
.cl-sky{position:absolute;inset:0;transition:background .2s linear}
.cl-stars{position:absolute;inset:0;opacity:0;pointer-events:none;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 33% 9%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 57% 26%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 72% 12%,#dfe8ff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 88% 31%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 41%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 46% 47%,#ffe9c8 50%,transparent 51%),radial-gradient(1.2px 1.2px at 66% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 5% 58%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 93% 63%,#fff 50%,transparent 51%);background-size:340px 260px}
.cl-earth{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cl-ground{fill:color-mix(in srgb,#6f8f6a calc((1 - var(--hi,0)) * 100%),#163a6c);filter:saturate(1.1)}
.cl-glow{fill:none;stroke:#8fc4ff;stroke-width:3;filter:blur(1px)}
.cl-glow2{fill:none;stroke:#3d7bea;stroke-width:16;filter:blur(8px)}
.cl-feats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cl-f{position:absolute;left:-10%;right:-10%;top:0;transition:opacity .25s}
.cl-cumulus{height:70px;background:radial-gradient(60px 26px at 8% 60%,#fff 40%,transparent 72%),radial-gradient(80px 34px at 22% 52%,#fff 38%,transparent 72%),radial-gradient(54px 24px at 40% 64%,#f4f7fb 40%,transparent 72%),
  radial-gradient(90px 36px at 58% 50%,#fff 38%,transparent 72%),radial-gradient(60px 26px at 76% 62%,#f2f6fa 40%,transparent 72%),radial-gradient(84px 32px at 93% 54%,#fff 38%,transparent 72%);animation:drift 40s linear infinite alternate;opacity:.95}
.cl-cirrus{height:40px;background:linear-gradient(100deg,transparent 0 10%,rgba(255,255,255,.55) 18%,transparent 30% 46%,rgba(255,255,255,.45) 55%,transparent 66% 74%,rgba(255,255,255,.5) 84%,transparent 95%);filter:blur(3px);animation:drift 60s linear infinite alternate-reverse}
.cl-ozone{height:110px;background:linear-gradient(to bottom,transparent,rgba(170,120,255,.22) 35%,rgba(170,120,255,.22) 65%,transparent);display:grid;place-items:center}
.cl-ozone span{font:700 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:rgba(230,215,255,.8)}
@media (max-width:640px){.cl-ozone span{display:none}}
.cl-nlc{height:26px;background:repeating-linear-gradient(170deg,rgba(150,210,255,.0) 0 12px,rgba(170,220,255,.55) 14px,rgba(150,210,255,0) 22px);filter:blur(1.2px);mask:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);-webkit-mask:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent)}
.cl-aurora{height:180px;background:linear-gradient(to top,rgba(60,255,150,.55),rgba(60,255,150,.22) 45%,rgba(255,60,90,.22) 75%,transparent);filter:blur(6px);
  mask:repeating-linear-gradient(90deg,#000 0 18px,rgba(0,0,0,.35) 30px,#000 46px);-webkit-mask:repeating-linear-gradient(90deg,#000 0 18px,rgba(0,0,0,.35) 30px,#000 46px);animation:aurora 6s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(4%)}}
@keyframes aurora{50%{filter:blur(8px) hue-rotate(-12deg)}}
.cl-f.cl-cumulus,.cl-f.cl-cirrus{animation:none}
.cl-hud{position:absolute;left:16px;top:14px;display:flex;flex-direction:column;gap:6px;text-shadow:0 1px 6px rgba(0,0,0,.55);max-width:58%}
.cl-alt b{display:block;font:800 clamp(30px,6vw,48px)/1 var(--head);letter-spacing:-.02em}
.cl-alt span{font:600 13px var(--mono);opacity:.85}
.cl-read{display:flex;flex-direction:column;font-size:12px}
.cl-read span{opacity:.75;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700}
.cl-read b{font:700 16px var(--font)}
.cl-layer{align-self:flex-start;font:800 12px var(--font);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:4px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.cl-side{position:absolute;right:10px;top:12px;bottom:12px;width:126px;display:flex;align-items:center;background:rgba(6,10,22,.35);border-radius:14px;backdrop-filter:blur(6px);padding:4px}
.cl-ruler{width:100%;height:100%}
.cl-band{opacity:.9}.cl-band.h0{fill:var(--h0)}.cl-band.h1{fill:var(--h1)}.cl-band.h2{fill:var(--h2)}.cl-band.h3{fill:var(--h3)}
.cl-tick{fill:rgba(255,255,255,.8);font:600 8.5px var(--mono)}
.cl-prof{fill:none;stroke:#ffd27a;stroke-width:1.6}
.cl-mark{stroke:#fff;stroke-width:1.2;stroke-dasharray:3 3}
.cl-dot{fill:#ffd27a;stroke:#fff;stroke-width:1.5}
.cl-card{position:absolute;left:16px;bottom:16px;width:min(300px,52%);background:rgba(8,12,24,.55);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:8px;backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:6px}
.cl-card.in{animation:clcard .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes clcard{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.cl-card b{font:700 14px var(--font);padding:0 4px 2px}
.cl-card .ph{border-radius:11px}
.cl-card .ph-img{max-height:150px}
.cl-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 8px}
.cl-range{flex:1 1 160px;accent-color:var(--ink);min-height:36px}
/* every stop on show: they wrap onto more lines instead of hiding off the edge */
.cl-stops{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 4px}
@media (max-width:640px){.cl-range{flex-basis:100%;order:-1}.cl-ctl .pill{flex:1 1 0;justify-content:center}.cl-stop{padding:5px 9px;font-size:12.5px}}
.cl-stop{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;font:600 13px var(--font);color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:6px 10px;cursor:pointer;min-height:44px}
.cl-stop i{font:600 11px var(--mono);font-style:normal;color:var(--faint)}
.cl-stop.done{border-color:var(--wire)}
.cl-stop.on{border-color:var(--ink);box-shadow:var(--pop)}
@media (max-width:640px){
  .cl-side{width:96px;top:auto;height:52%;bottom:10px}
  .cl-tick{font-size:11.5px}
  .cl-card{width:calc(100% - 132px);left:10px;bottom:10px}
  .cl-card .ph-img{max-height:110px}
  .cl-hud{max-width:70%}
}
@media (prefers-reduced-motion:reduce){.st-face.from-r,.st-face.from-l{animation:none}.cl-cumulus,.cl-cirrus,.cl-aurora,.ph-pin i{animation:none}.ph-pin{transition:none}}

/* isa: the standard atmosphere calculator */
.isa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:center}
@media (max-width:760px){.isa{grid-template-columns:1fr}}
.isa-in{display:flex;flex-direction:column;gap:8px}
.isa-row{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted)}
.isa-row b,.isa-row>span:last-child{color:var(--ink);font-weight:700}
.isa-dev{font:800 clamp(28px,5vw,40px)/1.1 var(--head);color:var(--hi);background:var(--hb);border-radius:16px;padding:10px 16px;align-self:flex-start;margin-top:6px}
.isa-say{font-size:14.5px;color:var(--muted)}
.isa-chart{display:block;width:100%;height:auto;background:var(--wash);border-radius:16px}
.isa-grid{stroke:var(--line);stroke-width:1}
.isa-ax{fill:var(--faint);font:600 10px var(--mono)}
.isa-line{fill:none;stroke:var(--ink);stroke-width:2.5}
.isa-lab{fill:var(--ink);font:800 12px var(--font)}
.isa-gap{stroke:var(--warn);stroke-width:2.5;stroke-dasharray:5 4}
.isa-you{fill:var(--h2i);stroke:var(--panel);stroke-width:2}
.isa-ref{fill:var(--panel);stroke:var(--ink);stroke-width:2}
.isa-gapt{fill:var(--warn);font:800 12px var(--font)}

/* parcel: push a bubble of air up and watch it rise, build a cloud, or sink back */
.pc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:12px;align-items:stretch}
@media (max-width:760px){.pc{grid-template-columns:1fr}}
.pc-scene{position:relative;align-self:start;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:#173a7a}
.pc-sky{display:block;width:100%;height:auto;transition:filter .6s}
.pc-scene.night .pc-sky{filter:brightness(.42) saturate(.7) hue-rotate(10deg)}
.pc-tick{fill:rgba(255,255,255,.75);font:600 9.5px var(--mono)}
.pc-trop path{stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-dasharray:6 5}
.pc-trop text{fill:#fff;font:700 10px var(--font);letter-spacing:.04em;paint-order:stroke;stroke:rgba(8,20,50,.6);stroke-width:3px}
.pc-base path{stroke:#fff;stroke-width:1;stroke-dasharray:2 4;opacity:.8}
.pc-base text{fill:#fff;font:700 10px var(--font);paint-order:stroke;stroke:rgba(10,30,20,.5);stroke-width:3px}
.pc-hill{fill:#5f8a57}
.pc-fog{fill:#eef2f6;opacity:.9;filter:blur(4px)}
.pc-lid rect{fill:#ff9a5c;opacity:.22}
.pc-lid text{fill:#fff;font:700 10px var(--font);paint-order:stroke;stroke:rgba(80,30,0,.5);stroke-width:3px}
.pc-ground{fill:#4c7445}
.pc-cloud{transition:opacity .3s}
.pc-shade ellipse{fill:#9fb0c6}.pc-lit ellipse{fill:#fff}.pc-flat{stroke:#8d9db3;stroke-width:5;stroke-linecap:round;opacity:.7}
.pc-cloud .pc-anvil{fill:#f3f6fb;opacity:.95}
.pc-trail{stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:1 6;stroke-linecap:round;fill:none}
.pc-ball{color:#e9eef6}
.pc-ball.warm{color:#ff7a3d}
.pc-ball.cold{color:#3d8bff}
.pc-ball circle{stroke:#fff;stroke-width:2;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.pc-ball text{fill:#10131a;font:800 12px var(--font)}
.pc-hud{position:absolute;left:10px;top:10px;display:grid;grid-template-columns:auto auto;gap:1px 10px;align-items:baseline;color:#fff;background:rgba(6,12,28,.42);backdrop-filter:blur(6px);border-radius:12px;padding:8px 10px;max-width:calc(100% - 24px)}
.pc-hud span{font:700 11px var(--font);text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.pc-hud b{font:700 13.5px var(--font)}
.pc-hud .pc-gap{grid-column:1/-1;margin-top:4px;font:800 13px var(--font);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.14);justify-self:start}
.pc-hud .pc-gap.up{background:#ff7a3d;color:#1b0d05}
.pc-hud .pc-gap.down{background:#3d8bff;color:#04112b}
.pc-side{display:flex;flex-direction:column;gap:8px}
.pc-chart{display:block;width:100%;height:auto;background:var(--wash);border-radius:16px}
.pc-grid{stroke:var(--line);stroke-width:1}.pc-grid.zero{stroke:var(--wire);stroke-dasharray:3 3}
.pc-ax{fill:var(--faint);font:600 10px var(--mono)}
.pc-layer{fill:var(--h3);opacity:.45}
.pc-env{fill:none;stroke:var(--ink);stroke-width:2.6}
.pc-ref{stroke:#ff7a3d;stroke-width:1;stroke-dasharray:3 4;opacity:.6}
.pc-dry{fill:none;stroke:#e8642a;stroke-width:3;stroke-linecap:round}
.pc-wet{fill:none;stroke:#2f7bf0;stroke-width:3;stroke-linecap:round}
.pc-warm{fill:#ff7a3d;opacity:.28}
.pc-cold{fill:#3d8bff;opacity:.22}
.pc-lcl path{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.pc-lcl text{fill:var(--muted);font:700 10px var(--font)}
.pc-dot{fill:#ff7a3d;stroke:var(--panel);stroke-width:2}
.pc-dote{fill:var(--panel);stroke:var(--ink);stroke-width:2}
.pc-key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.pc-key span{display:inline-flex;align-items:center;gap:6px}
.pc-key span::before{content:"";width:18px;height:3px;border-radius:2px;background:currentColor}
.pc-key .k-env::before{background:var(--ink)}.pc-key .k-dry::before{background:#e8642a}.pc-key .k-wet::before{background:#2f7bf0}
.pc-ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin:14px 0 6px;align-items:end}
@media (max-width:640px){.pc-ctl{grid-template-columns:1fr}}
.pc-out{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.pc-verdict{font:800 clamp(20px,3.6vw,28px)/1.15 var(--head);color:var(--hi);background:var(--hb);border-radius:14px;padding:8px 14px}
.pc-say{flex:1 1 260px;margin:0;font-size:14.5px;color:var(--muted)}
.pc-row{display:flex;flex-direction:column;gap:2px}
.pc-hint{color:var(--faint);font-size:12px}
.pc-go{grid-column:1/-1;justify-self:start}

/* thermo: one thermometer, three scales */
.th{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:640px){.th{grid-template-columns:1fr}}
.th-pic{background:var(--wash);border-radius:18px;padding:8px}
.th-svg{display:block;width:100%;height:auto;max-height:420px;--heat:.5}
.th-glass{fill:var(--panel);stroke:var(--line);stroke-width:2}
.th-liq{fill:color-mix(in srgb,#2f7bf0 calc((1 - var(--heat)) * 100%),#e8402a);transition:fill .3s}
.th-tk{stroke:var(--muted);stroke-width:1.3}
.th-n{fill:var(--muted);font:600 10px var(--mono)}
.th-u{fill:var(--ink);font:800 12px var(--font)}
.th-m path{stroke:var(--hi);stroke-width:2.5;stroke-dasharray:3 2}
.th-cur path{stroke:var(--ink);stroke-width:2}
.th-read{display:flex;flex-direction:column;gap:8px}
.th-row{display:flex;justify-content:space-between;align-items:baseline;border-radius:14px;padding:8px 14px;background:var(--wash)}
.th-row span{font:700 12px var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.th-row b{font:800 clamp(22px,4.5vw,32px)/1.1 var(--head);color:var(--ink)}
.th-row.c{background:var(--h0)}.th-row.f{background:var(--h2)}.th-row.k{background:var(--h1)}
.th-note{margin:0;font:600 13.5px var(--mono);color:var(--muted);min-height:1.4em}
.xp-chip small{display:block;font:600 11px var(--mono);color:var(--faint)}

/* diurnal: a day and a night */
.dy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:760px){.dy{grid-template-columns:1fr}}
.dy-stage{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.dy-scene{display:block;width:100%;height:auto}
.dy-stars circle{fill:#fff}
.dy-stars{transition:opacity .4s}
.dy-arc{fill:none;stroke:rgba(255,255,255,.18);stroke-dasharray:2 6}
.dy-sun circle:last-child{fill:#ffd36b}
.dy-glow{fill:#ffcf5a;opacity:.35}
.dy-moon{fill:#e8ecf5}
.dy-clouds g{transition:opacity .5s}
.dy-clouds ellipse,.dy-clouds circle{fill:#f4f6f9;opacity:.92}
.dy-clouds.night ellipse,.dy-clouds.night circle{fill:#5c667a}
.dy-ground rect{fill:#4c7445}.dy-hill{fill:#5f8a57}
.dy-ground.sea rect{fill:#1d5b8f}.dy-wave{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.5}
.dy-ground.desert rect{fill:#c9955a}.dy-dune{fill:#ddb173}
.dy-shim{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5;animation:shim 1.6s ease-in-out infinite}
@keyframes shim{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-6px);opacity:.8}}
.dy-pole{stroke:#e6e6e6;stroke-width:2}
.dy-flag path:last-child{fill:#ff6a2b}
.dy-hud{position:absolute;left:10px;top:10px;display:grid;grid-template-columns:auto auto;gap:1px 10px;align-items:baseline;color:#fff;background:rgba(6,12,28,.42);backdrop-filter:blur(6px);border-radius:12px;padding:8px 10px}
.dy-hud span{font:700 11px var(--font);text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.dy-hud b{font:700 13.5px var(--font)}
.dy-hud .dy-time{grid-column:1/-1;font:800 20px var(--head)}
.dy-chart{display:block;width:100%;height:auto;background:var(--wash);border-radius:16px}
.dy-night{fill:var(--ink);opacity:.07}
.dy-a{fill:none;stroke:#e8642a;stroke-width:3}
.dy-g{fill:none;stroke:#8a6d3b;stroke-width:2;stroke-dasharray:5 4}
.dy-now{stroke:var(--ink);stroke-width:1.2}
.dy-da{fill:#e8642a;stroke:var(--panel);stroke-width:2}.dy-dg{fill:#8a6d3b;stroke:var(--panel);stroke-width:2}
.dy-mk circle{fill:var(--ink)}.dy-mk text{fill:var(--ink);font:700 10.5px var(--font)}
.pc-key .k-air::before{background:#e8642a}.pc-key .k-grd::before{background:#8a6d3b}.pc-key .k-night::before{background:var(--ink);opacity:.2;height:10px}
.dy-range{font:800 clamp(18px,3.4vw,24px)/1.2 var(--head);color:var(--hi);background:var(--hb);border-radius:14px;padding:8px 14px}
.dy-group{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.dy-lab{font:700 11px var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
@media (prefers-reduced-motion:reduce){.dy-shim{animation:none}}

/* densalt: hot, high and humid */
.da{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:center}
@media (max-width:760px){.da{grid-template-columns:1fr}}
.da-stage{border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.da-scene{display:block;width:100%;height:auto}
.da-hills{fill:#7d8f9c;opacity:.75}.da-hills.snow{fill:#c9d3dc}
.da-haze{fill:#f3d9a8;transition:opacity .4s}
.da-grass{fill:#6c8a4e}.da-rwy{fill:#3b3f47}.da-cl{stroke:#f2f2f2;stroke-width:1.5}
.da-lift path{stroke:#2fd27c;stroke-width:2;stroke-dasharray:3 3}.da-lift text{fill:#fff;font:800 10px var(--font);paint-order:stroke;stroke:rgba(0,0,0,.5);stroke-width:3px}
.da-lift.over path{stroke:#ff4b3e}.da-lift.over text{fill:#ffd2cc}
.da-plane path{fill:#f7f8fa;stroke:#3b3f47;stroke-width:1}.da-plane .da-wing{fill:#d9dde3}
.da-trail{stroke:#2fd27c;stroke-width:2.5;opacity:.7}
.da-big{display:inline-block;font:800 clamp(20px,3.6vw,28px)/1.15 var(--head);color:var(--hi);background:var(--hb);border-radius:14px;padding:8px 14px}
.da-rows{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.da-rows small{font-weight:600;color:var(--faint);font-size:11.5px}
.da-hum{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);min-height:44px}
.da-hum input{width:20px;height:20px;accent-color:var(--ink)}

/* humid: air as a sponge */
.hu{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:700px){.hu{grid-template-columns:1fr}}
.hu-pic{background:var(--wash);border-radius:18px;padding:8px}
.hu-svg{display:block;width:100%;height:auto;max-height:420px}
.hu-cap{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:6 4;transition:y .2s,height .2s}
.hu-vap{fill:#4a86ff;opacity:.28}
.hu-dots circle{fill:#2f7bf0;transition:opacity .3s}
.hu-drops path{fill:#7fb2ff;stroke:#2f7bf0;stroke-width:1}
.hu-drops{transition:opacity .4s}
.hu-fog{fill:#dfe6ee;pointer-events:none;transition:opacity .5s;opacity:0}
.hu-base{stroke:var(--ink);stroke-width:3}
.hu-lab{fill:var(--ink);font:700 12px var(--font)}.hu-lab.in{fill:var(--h0i)}
.hu-out{display:flex;flex-direction:column;gap:6px}
.hu-state{align-self:flex-start;font:800 clamp(18px,3.2vw,24px)/1.2 var(--head);color:var(--hi);background:var(--hb);border-radius:14px;padding:8px 14px}
.hu-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* fogmaker: one night at an airfield */
.fm-stage{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.fm-scene{display:block;width:100%;height:auto;max-height:460px}
.fm-sun{fill:#ffd36b;transition:opacity .4s}
.fm-clouds ellipse,.fm-clouds circle{fill:#aab2bf}.fm-clouds.night ellipse,.fm-clouds.night circle{fill:#3c4352}.fm-clouds{transition:opacity .4s}
.fm-trees path{fill:#1f3a2a}.fm-tower path{fill:#3a3f4a}
.fm-grass{fill:#3f6a3d}.fm-rwy{fill:#30343c}
.fm-lights circle{fill:#ffe9a8;filter:drop-shadow(0 0 3px #ffd36b);transition:opacity .5s}
.fm-dew circle{fill:#dff3ff;transition:opacity .5s}
.fm-fog{fill:#e9eef3;transition:opacity .3s}
.fm-strat{fill:#c9d0d9;transition:opacity .3s}
.fm-code{grid-column:1/-1;margin-top:4px;font:800 12.5px var(--mono);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.14);justify-self:start}
.fm-code.br{background:#9fb3c8;color:#0b1220}.fm-code.fg{background:#fff;color:#0b1220}

/* slant: vertical versus slant visibility */
.sl{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:center}
@media (max-width:760px){.sl{grid-template-columns:1fr}}
.sl-stage{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.sl-svg{display:block;width:100%;height:auto}
.sl-sky{fill:#5d97d6}.sl-grd{fill:#4f7a48}.sl-rwy{fill:#2c3038}
.sl-fog{fill:#f4f6f8;opacity:.92}
.sl-glide{stroke:rgba(255,255,255,.7);stroke-dasharray:3 4;fill:none}
.sl-sight{stroke:#2fd27c;stroke-width:2}
.sl-in{stroke:#2fd27c;stroke-width:2;stroke-dasharray:4 3}.sl-in.lost{stroke:#ff4b3e}
.sl-plane path{fill:#fff;stroke:#2c3038;stroke-width:.8}
.sl-lab{fill:#fff;font:700 10px var(--font)}.sl-note{fill:rgba(255,255,255,.85);font:600 9px var(--font)}
.sl-v{display:inline-block;font:800 clamp(20px,3.6vw,26px)/1.2 var(--head);color:var(--hi);background:var(--hb);border-radius:14px;padding:8px 14px}

/* atlas: the ten cloud genera */
.at{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:start}
@media (max-width:760px){.at{grid-template-columns:1fr}}
.at-pic{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);position:sticky;top:70px}
@media (max-width:760px){.at-pic{position:static}}
.at-sky{display:block;width:100%;height:auto}
.at-ground{fill:#4f7a48}
.at-tk{stroke:rgba(255,255,255,.6)}.at-tkt{fill:rgba(255,255,255,.75);font:600 9px var(--mono)}
.at-band.h0{fill:#b8c9ff}.at-band.h1{fill:#9be3c3}.at-band.h2{fill:#ffc3a2}
.at-bandt{fill:rgba(255,255,255,.85);font:800 9px var(--font);letter-spacing:.12em;text-transform:uppercase}
.at-hit{cursor:pointer;outline:none}
.at-hit .at-code{fill:#fff;font:800 11px var(--font);paint-order:stroke;stroke:rgba(10,20,50,.55);stroke-width:3px}
.at-hit.on .at-code{fill:#ffd36b}
.at-hit.on .at-g{filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
.at-hit:focus-visible .at-code{fill:#ffd36b}
.at-g .wisp{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.9}
.at-g .veil{fill:rgba(255,255,255,.55)}.at-g .halo{fill:none;stroke:rgba(255,230,180,.9);stroke-width:1.5}
.at-g .puff{fill:#fff}.at-g .aslayer{fill:rgba(225,232,242,.9)}
.at-g .dark{fill:#5d6575}.at-g .grey{fill:#c9d0da}.at-g .rain{stroke:#9fc4ff;stroke-width:1.5}
.at-cb .puff{fill:#f2f5f9}.at-cb .anvil{fill:#e6ebf2}.at-cb .base{fill:#5d6575}
.at-card{display:flex;flex-direction:column;gap:8px}
.at-card.in{animation:clcard .4s cubic-bezier(.2,.9,.3,1.2) both}
.at-card h4{margin:4px 0 0;font:800 20px var(--head)}
.at-look{margin:0;color:var(--muted)}
.at-ph .ph-img{max-height:280px}
.at-draw{border:2px dashed var(--line);border-radius:14px;padding:14px;color:var(--muted);font-size:13.5px;display:flex;flex-direction:column;gap:4px}
.at-draw b{font:800 11px var(--font);text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.at-facts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media (max-width:520px){.at-facts{grid-template-columns:1fr}}
.at-f{background:var(--wash);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.at-f span{font:700 11px var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.at-f b{font:600 14px var(--font)}
.at-chips .xp-chip small{font-family:var(--font)}

/* octas: cloud amount */
.oc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:center}
@media (max-width:700px){.oc{grid-template-columns:1fr}}
.oc-pic{background:linear-gradient(#3f7cc8,#a9cdee);border-radius:20px;padding:12px 12px 4px}
.oc-pic .hint{color:#fff;margin:4px 0 0}
.oc-svg{display:block;width:100%;height:auto}
.oc-seg{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.5);stroke-width:1;cursor:pointer;transition:fill .25s}
.oc-seg.on{fill:#f2f4f7}
.oc-hz{stroke:#4f7a48;stroke-width:6}
.oc-out{display:flex;flex-direction:column;gap:6px}
.oc-code{font:800 clamp(26px,5vw,38px)/1.1 var(--mono);letter-spacing:.04em}
.oc-word{color:var(--muted);font-weight:700}
.oc-say{margin:0;font-size:14px;color:var(--faint);border-left:4px solid var(--line);padding-left:10px}
.oc-say.on{color:var(--ink);border-color:var(--warn)}

/* optics: rings and bows at their real sizes */
.op{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:10px}
@media (max-width:760px){.op{grid-template-columns:1fr}}
.op-stage{border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.op-svg{display:block;width:100%;height:auto}
.op-lab{fill:#fff;font:700 10.5px var(--font);paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:3px}
.op-lab.dark{fill:#1d2533;stroke:rgba(255,255,255,.6)}
.op-info{display:flex;flex-direction:column;gap:8px}
.op-info.in{animation:clcard .4s cubic-bezier(.2,.9,.3,1.2) both}
.op-info h4{margin:0;font:800 20px var(--head)}
.op-aur{animation:aurora 5s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.op-aur{animation:none}}

/* rainlab: growing drops and the rain shadow */
.rl-stage{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin:10px 0}
.rl-svg{display:block;width:100%;height:auto;max-height:480px}
.rl-sky{fill:#7aa7d8}.rl-ground{fill:#5f8a57}.rl-sea{fill:#1d5b8f}
.rl-cloud{fill:#f5f8fc;opacity:.9}.rl-cloud.dark{fill:#9aa5b5;opacity:1}
.rl-fz{stroke:#2f7bf0;stroke-width:1.5;stroke-dasharray:6 4}
.rl-lab{fill:#fff;font:700 11px var(--font);paint-order:stroke;stroke:rgba(0,30,60,.5);stroke-width:3px}.rl-lab.sm{font-size:9.5px;font-weight:600}
.rl-drop{fill:#2f7bf0}.rl-drop.sc{fill:#7fd0ff}.rl-drop.big{fill:#1e5bd6}.rl-drop.rain{fill:#2f7bf0}
.rl-ice{fill:#fff;stroke:#6aa7ff;stroke-width:.8}
.rl-salt{fill:#fff}
.rl-streak{stroke:rgba(40,90,200,.6);stroke-width:1.5;animation:rlfall 1.1s linear infinite}
@keyframes rlfall{from{stroke-dashoffset:0}to{stroke-dashoffset:-40}}
.rl-streak{stroke-dasharray:8 6}
.rl-flow{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:4 6}
.rl-air{fill:#2f7bf0;stroke:#fff;stroke-width:1}.rl-air.dry{fill:#e8a23a}
.rl-pin{fill:#ff4b3e;stroke:#fff;stroke-width:1.5}
@media (prefers-reduced-motion:reduce){.rl-streak{animation:none}}

/* icing: ice on the wing */
.ic{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:760px){.ic{grid-template-columns:1fr}}
.ic-stage{border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.ic-svg{display:block;width:100%;height:auto}
.ic-streaks path{stroke:rgba(255,255,255,.7);stroke-width:1.5;stroke-linecap:round;animation:icstreak .7s linear infinite}
.ic-streaks.clear path{stroke:rgba(255,255,255,.25)}
@keyframes icstreak{from{transform:translateX(0)}to{transform:translateX(-40px)}}
.ic-streaks path{transform-box:fill-box}
.ic-wing{stroke:#5d6575;stroke-width:1.5}
.ic-ice.rime{fill:#fbfdff;stroke:#c4d0de;stroke-width:1}
.ic-ice.clear{fill:rgba(190,225,255,.75);stroke:#7fb8ec;stroke-width:1.2}
.ic-ice.mixed{fill:rgba(225,238,250,.92);stroke:#9cc2e6;stroke-width:1}
.ic-hoar path{stroke:#fff;stroke-width:1.4;stroke-linecap:round}
.ic-tag{fill:#1d2533;font:700 11px var(--font)}
.ic-out{display:flex;flex-direction:column;gap:8px}
.ic-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ic-type{font:800 clamp(20px,3.6vw,26px)/1.2 var(--head)}
.ic-sev{font:800 14px var(--font);color:var(--hi);background:var(--hb);border-radius:999px;padding:5px 12px}
.ic-eff{display:flex;flex-direction:column;gap:5px}
.ic-m{display:grid;grid-template-columns:110px 1fr 46px;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.ic-m i{display:block;height:9px;border-radius:9px;background:var(--wash);overflow:hidden}
.ic-m i b{display:block;height:100%;background:var(--warn);border-radius:9px;transition:width .2s}
.ic-m i b.neg{background:var(--accent)}
.ic-m em{font-style:normal;font-weight:700;color:var(--ink);text-align:right}
@media (prefers-reduced-motion:reduce){.ic-streaks path{animation:none}}
/* carb: carburettor icing */
.cb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:700px){.cb{grid-template-columns:1fr}}
.cb-pic{background:var(--wash);border-radius:18px;padding:6px}
.cb-svg{display:block;width:100%;height:auto}
.cb-zone{fill:var(--warn);opacity:.15}.cb-zone.hi{opacity:.18}
.cb-lab{fill:var(--warn);font:800 11px var(--font)}
.cb-dot{fill:var(--ink);stroke:var(--panel);stroke-width:2}

/* leewave: mountain waves */
.lw{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:760px){.lw{grid-template-columns:1fr}}
.lw-stage{border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.lw-svg{display:block;width:100%;height:auto}
.lw-lines path{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.3}
.lw-mtn{fill:#5a7350;stroke:#3f5639;stroke-width:1}
.lw-dots circle{fill:#fff}
.lw-cap{fill:#f3f6fa;opacity:.95}
.lw-lens{fill:#f3f6fa;opacity:.95;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.lw-roll{fill:#dfe5ec;opacity:.9}.lw-spin{fill:none;stroke:#8d99ab;stroke-width:1.5;stroke-dasharray:3 2}
.lw-rotor .lw-spin{animation:lwspin 1.2s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes lwspin{to{transform:rotate(-360deg)}}
.lw-lab{fill:#fff;font:700 10.5px var(--font);paint-order:stroke;stroke:rgba(10,30,60,.55);stroke-width:3px}.lw-lab.warn{fill:#ffd2cc}
@media (prefers-reduced-motion:reduce){.lw-rotor .lw-spin{animation:none}}

/* circ: the three-cell model */
.gc-stage{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:10px}
.gc-svg{display:block;width:100%;height:auto}
.gc-bg{fill:#070d1f}
.gc-band{opacity:.0}.gc-band.hp{fill:#ffb35c;opacity:.16}.gc-band.lp{fill:#5cc8ff;opacity:.14}.gc-band.wind{fill:#fff;opacity:0}
.gc-band.on{opacity:.55;fill:#ffd36b}
.gc-a{fill:none;stroke-width:1.8;stroke-linecap:round}.gc-a.trade{stroke:#ffd36b}.gc-a.west{stroke:#9be3c3}.gc-a.polar{stroke:#b8c9ff}
.gc-itcz{stroke:#ff6a4a;stroke-width:3;stroke-dasharray:4 3}
.gc-lab{fill:#ff9c86;font:800 10px var(--font)}
.gc-p{font:800 12px var(--font)}.gc-p.H{fill:#ffb35c}.gc-p.L{fill:#5cc8ff}
.gc-ax{fill:rgba(255,255,255,.75);font:600 9.5px var(--font)}
.gc-ground{stroke:#5f8a57;stroke-width:4}
.gc-trop{fill:none;stroke:rgba(255,255,255,.5);stroke-dasharray:3 3}
.gc-loop{fill:none;stroke:#ffd36b;stroke-width:2;stroke-dasharray:6 4}
.gc-cl{fill:#fff;font:800 10px var(--font)}
.gc-hi{fill:rgba(255,211,107,.18)}

/* map: a story on a real map */
.mp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.mp{grid-template-columns:1fr}}
.mp-stage{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:#9cc3ea}
.mp-svg{display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:620px}
.mp-sea{fill:#8fbbe6}
.mp-in{fill:#f2dca4;stroke:#9a7b3c;stroke-width:calc(1.2px * var(--mk,1));stroke-linejoin:round}
.mp-nb{fill:#dfe2d8;stroke:#9aa093;stroke-width:calc(.8px * var(--mk,1))}
.mp-grid path{stroke:rgba(255,255,255,.45);stroke-width:calc(.8px * var(--mk,1));stroke-dasharray:4 6}.mp-grid .mp-tropic{stroke:#e8642a;stroke-dasharray:8 5;opacity:.6}
.mp-gl{fill:rgba(20,40,70,.55);font:600 11px var(--mono)}
.mp-zone{opacity:.42;stroke-width:calc(1.5px * var(--mk,1))}
.mp-zone.h0{fill:var(--h0);stroke:var(--h0i)}.mp-zone.h1{fill:var(--h1);stroke:var(--h1i)}.mp-zone.h2{fill:var(--h2);stroke:var(--h2i)}.mp-zone.h3{fill:var(--h3);stroke:var(--h3i)}.mp-zone.h4{fill:var(--h4);stroke:var(--h4i)}.mp-zone.h5{fill:var(--h5);stroke:var(--h5i)}
.mp-zl{font:800 15px var(--font);fill:#1d2533;paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:4px;pointer-events:none}
.mp-arrow{fill:none;stroke-width:calc(3.5px * var(--mk,1));stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:0}
.mp-arrow.h0{stroke:#2f7bf0}.mp-arrow.h1{stroke:#138a5e}.mp-arrow.h2{stroke:#e8642a}.mp-arrow.h3{stroke:#7a4fd6}.mp-arrow.h4{stroke:#c9302c}.mp-arrow.h5{stroke:#0e8fa3}
.mp-arrow.in{animation:mpdraw 1.4s ease-out both}
@keyframes mpdraw{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
.mp-al{font:800 13px var(--font);paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:4px}
.mp-al.h0{fill:#1d4fa8}.mp-al.h1{fill:#0d5c3f}.mp-al.h2{fill:#a3420f}.mp-al.h3{fill:#4b2c96}.mp-al.h4{fill:#8a1f1c}.mp-al.h5{fill:#08606e}
.mp-place{cursor:pointer;outline:none}
.mp-dot{fill:var(--hi);stroke:#fff;stroke-width:2}
.mp-ring{fill:none;stroke:var(--hi);stroke-width:2;opacity:0}
.mp-place.in .mp-ring{animation:mpping 1.6s ease-out 2}
@keyframes mpping{from{r:6;opacity:.9}to{r:26;opacity:0}}
.mp-pl{font:800 13px var(--font);fill:#1d2533;paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:4px}
.mp-place.lab .mp-pl{font-size:12px;font-weight:700;fill:#3a4252;font-style:italic}
.mp-place.in,.mp-zone.in,.mp-zl.in,.mp-al.in{animation:mpfade .6s ease-out both}
.mp-place.in{animation-name:mppop}
@keyframes mpfade{from{opacity:0}}
@keyframes mppop{from{opacity:0;transform-box:fill-box}}
.mp-side{display:flex;flex-direction:column;gap:10px}
.mp-cap h3{margin:4px 0}
.mp-cap.in{animation:clcard .4s cubic-bezier(.2,.9,.3,1.2) both}
@media (prefers-reduced-motion:reduce){.mp-arrow.in,.mp-place.in .mp-ring{animation:none}}

/* coverage: ISOL, OCNL, FRQ */
.cv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:700px){.cv{grid-template-columns:1fr}}
.cv-pic{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.cv-svg{display:block;width:100%;height:auto}
.cv-area{fill:#5d86b8}
.cv-cell{transition:opacity .25s}
.cv-cb{fill:#e9edf3;stroke:#8d99ab;stroke-width:1}
.cv-cell.tight .cv-cb{r:22px}
.cv-bolt{fill:#ffd36b}
.cv-word{font:800 clamp(26px,5vw,38px)/1.1 var(--mono);color:var(--hi);background:var(--hb);border-radius:14px;padding:6px 14px;align-self:flex-start}

/* wxradar: airborne weather radar */
.wr{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:760px){.wr{grid-template-columns:1fr}}
.wr-stage{border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.wr-svg{display:block;width:100%;height:auto}
.wr-bg{fill:#05080d}
.wr-rings path{fill:none;stroke:#2c6b3f;stroke-width:1}
.wr-rt{fill:#3fbf6a;font:600 9px var(--mono)}
.wr-hud{fill:#4fe08a;font:700 10.5px var(--mono)}
.wr-sweep{stroke:rgba(79,224,138,.55);stroke-width:2}
.wr-ac{fill:#e9eef6}
.wr-c{opacity:.92}.wr-c.g{fill:#22c55e}.wr-c.y{fill:#facc15}.wr-c.r{fill:#ef4444}.wr-c.m{fill:#d946ef}
.wr-clutter{fill:none;stroke:#22c55e;stroke-width:14;stroke-dasharray:3 5;opacity:.55}
.wr-warn{color:var(--warn);font-weight:700}
.wr-leg{display:flex;flex-direction:column;gap:6px}
.wr-key{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--panel);border-radius:12px;padding:6px 10px;cursor:pointer;font:600 13px var(--font);color:var(--ink);text-align:left;min-height:40px}
.wr-key i{width:16px;height:16px;border-radius:4px;flex:none}
.wr-key.g i{background:#22c55e}.wr-key.y i{background:#facc15}.wr-key.r i{background:#ef4444}.wr-key.m i{background:#d946ef}
/* orbits */
.or-stage{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:10px}
.or-svg{display:block;width:100%;height:auto}
.or-bg{fill:#050914}
.or-earth{fill:#2f6fb8}.or-mer{fill:none;stroke:rgba(255,255,255,.25)}.or-eq{stroke:#ffd36b;stroke-width:1.5}
.or-spin{transform-origin:180px 120px;transform-box:view-box}
.or-geo{fill:none;stroke:#ffd36b;stroke-dasharray:4 4;opacity:.8}.or-pol{fill:none;stroke:#7fd0ff;stroke-dasharray:4 4}
.or-sat rect{fill:#e9eef6}.or-panel{stroke:#7fb2ff;stroke-width:3}
.or-tie{stroke:rgba(255,211,107,.35);stroke-dasharray:2 3}
.or-lab{font:700 10.5px var(--font)}.or-lab.geo{fill:#ffd36b}.or-lab.pol{fill:#7fd0ff}.or-note{fill:rgba(255,255,255,.5);font:600 9px var(--font)}
.or-svg.geo .or-pol,.or-svg.geo .or-sat.pol,.or-svg.geo .or-lab.pol{opacity:.2}
.or-svg.pol .or-geo,.or-svg.pol .or-sat.geo,.or-svg.pol .or-lab.geo,.or-svg.pol .or-tie{opacity:.2}

/* stationmodel: synoptic station plot */
.sm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:8px}
@media (max-width:700px){.sm{grid-template-columns:1fr}}
.sm-pic{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.sm-svg{display:block;width:100%;height:auto;max-height:440px}
.sm-bg{fill:#fbfaf3}
.sm-g,.sm-wind{cursor:pointer;outline:none}
.sm-hit{fill:transparent;stroke:none}
.code.pad button{overflow-wrap:anywhere;line-height:1.2}
.sm-g:hover .sm-t,.sm-g:focus .sm-t{fill:#b8341d}
.sm-t{font:700 13px var(--mono);fill:#1d2533}
.sm-sym{font:700 15px var(--font);fill:#1d4fa8}
.sm-ww .ln,.sm-cl .ln{fill:none;stroke:#1d4fa8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sm-ww circle{fill:#1d4fa8}
.sm-n .ring{fill:#fff;stroke:#1d2533;stroke-width:1.8}.sm-n .fill{fill:#1d2533}.sm-n .ln{stroke:#1d2533;stroke-width:1.8}.sm-n .ln.inv{stroke:#fff}
.sm-wind .ln{stroke:#1d2533;stroke-width:2;stroke-linecap:round}.sm-wind .pen{fill:#1d2533}.sm-wind .calm{fill:none;stroke:#1d2533;stroke-width:1.5}
.sm-list{margin-top:6px}.sm-list[hidden]{display:none}

/* taf: a TAF, group by group, on a timeline */
.tf-code{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.tf-tok{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1.5px solid var(--line);background:var(--panel);border-radius:10px;padding:5px 9px;cursor:pointer;min-height:44px;text-align:left;color:var(--ink)}
.tf-tok code{font:800 14px var(--mono)}
.tf-tok small{font:600 11px var(--font);color:var(--muted);max-width:150px}
.tf-code.test .tf-tok small{visibility:hidden}
.tf-tok.on{border-color:var(--ink);box-shadow:var(--pop)}
.tf-tok.id{background:var(--h4)}.tf-tok.time{background:var(--h0)}.tf-tok.chg{background:var(--h2)}.tf-tok.wind{background:var(--h1)}.tf-tok.vis{background:var(--h3)}.tf-tok.wx{background:var(--h5)}.tf-tok.cloud{background:var(--wash)}
.tf-time{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.tf-time{grid-template-columns:1fr}}
.tf-gpic{background:var(--wash);border-radius:16px;padding:6px}
.tf-gantt{display:block;width:100%;height:auto}
.tf-grid{stroke:var(--line)}.tf-ax{fill:var(--faint);font:600 11px var(--mono)}.tf-lab{fill:var(--muted);font:700 11px var(--font)}
.tf-bar.base{fill:var(--h1i);opacity:.75}.tf-bar.becmg{fill:var(--h0i)}.tf-bar.fm{fill:var(--h4i)}.tf-bar.tempo{fill:var(--h2i)}.tf-bar.prob{fill:var(--h3i);opacity:.7}
.tf-cursor path{stroke:var(--warn);stroke-width:2}
.tf-side{display:flex;flex-direction:column;gap:6px}
.tf-now{display:flex;flex-direction:column;gap:6px}
.tf-clock{font:800 18px var(--head)}
.tf-base{margin:0;font:700 14.5px var(--mono);color:var(--ink);background:var(--wash);border-radius:12px;padding:8px 10px}
.tf-tempo{margin:0;font:600 13.5px var(--mono);border-left:4px solid var(--h2i);padding:4px 10px;color:var(--ink)}
.tf-tempo.prob{border-color:var(--h3i)}.tf-tempo.becmg{border-color:var(--h0i)}
.tf-tempo i{font:800 11px var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-style:normal}

.rp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
@media (max-width:760px){.rp{grid-template-columns:1fr}}
.rp-stage{max-width:380px;width:100%;margin:0 auto}
.rp-svg{display:block;width:100%;height:auto}
.rp-bg{fill:#0d1f17}.rp-ring{fill:none;stroke:#2f6b4f;stroke-width:1}.rp-rt{fill:#6fbf95;font:600 9px var(--mono)}.rp-card{fill:#9fe0bd;font:800 11px var(--font)}
.rp-beam{stroke:#7dffb8;stroke-width:2;opacity:.7}
.rp-echo.area{fill:#e9c43a;fill-opacity:.55;stroke:#ffd84a;stroke-width:2}
.rp-echo.line{fill:none;stroke:#ff6a3d;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.rp-echo.broken{stroke-dasharray:10 7}
.rp-echo.incg{animation:rp-pulse 2.4s ease-in-out infinite}
@keyframes rp-pulse{50%{fill-opacity:.8;opacity:1}}
@media (prefers-reduced-motion:reduce){.rp-echo.incg{animation:none}}
.rp-pt{fill:#fff;stroke:#0d1f17;stroke-width:1.5}.rp-pt.on{fill:#ff3d7f;r:7}
.rp-mv{stroke:#8fd3ff;stroke-width:3}.rp-mvh{fill:#8fd3ff}
.rp-top path{fill:#c9a0ff}.rp-top text{fill:#e6d6ff;font:700 10px var(--mono)}.rp-top.on path{fill:#ff3d7f}
.rp-stn{fill:#fff}
.rp-side{display:flex;flex-direction:column;gap:6px}
.bf{border:2px solid var(--line);border-radius:18px;background:var(--wash);padding:12px;margin:10px 0}
.bf-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
.bf-head b{font:800 16px var(--head)}.bf-head span:not(.bf-tab){color:var(--muted);font-size:13px}
.bf-tab{display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:var(--panel);border-radius:8px;padding:3px 9px;font:800 11px var(--font);text-transform:uppercase;letter-spacing:.06em}
.bf-tab svg{width:14px;height:14px}
.bf-folder,.bf-rest{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.bf-doc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:1.5px solid var(--line);border-radius:12px;padding:9px 10px;min-height:64px;cursor:pointer;color:var(--ink);background:var(--panel)}
.bf-doc svg{width:18px;height:18px}.bf-doc b{font:800 13.5px var(--font)}.bf-doc small{font:600 11.5px var(--font);color:var(--muted)}
.bf-doc.in{background:var(--hb);border-color:var(--hi);animation:bf-in .45s ease-out both}
.bf-doc.out{opacity:.5;border-style:dashed;background:transparent}
.bf-lab{grid-column:1/-1;margin:4px 0 0;font:800 11px var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
@keyframes bf-in{from{opacity:0;transform:translateY(10px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.bf-doc.in{animation:none}}
.xs2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.xs2{grid-template-columns:1fr}}
.xs2-svg{display:block;width:100%;height:auto}
.xs2-sky{fill:var(--sky,#dcecf8)}.xs2-grid{stroke:var(--line);stroke-dasharray:3 4}.xs2-ax{fill:var(--muted);font:700 9.5px var(--mono)}
.xs2-gnd{stroke:#7a5a3a;stroke-width:4}.xs2-st{fill:var(--ink);font:800 11px var(--mono)}
.xs2-cl{fill:#ffffff;stroke:#9fb3c4;stroke-width:1}.xs2-cl.cb{fill:#cfd6de;stroke:#6f7f8f}.xs2-cl.layer{fill:#eef2f6}
.xs2-ci{fill:none;stroke:#9fb3c4;stroke-width:1.6;stroke-linecap:round}
.xs2-rain{stroke:#5d8fc9;stroke-width:1.2;opacity:.7}
.xs2-ct{fill:#2a3a4a;font:800 9.5px var(--font)}
.xs2-zero{fill:none;stroke:#2a7fff;stroke-width:2;stroke-dasharray:6 4}.xs2-zt{fill:#2a7fff;font:800 10px var(--font)}
.xs2-pl{color:var(--warn);width:24px;height:24px}
.xs2-side{display:flex;flex-direction:column;gap:6px}
.xs2-out{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.xs2-big{font:800 16px var(--head)}
.xs2-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:4px 0;font-size:14px}.xs2-row span{color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .xs2-sky{fill:#1a2a3a}}
:root[data-theme="dark"] .xs2-sky{fill:#1a2a3a}
.rw-a{stroke:#2c5d8a;stroke-width:calc(1.4px * var(--mk,1));opacity:.55;fill:none}.rw-a.hd{fill:#2c5d8a;stroke:none}
.rw-big{stroke:#e8642a;stroke-width:calc(3.4px * var(--mk,1));fill:none}.rw-big.hd{fill:#e8642a;stroke:none}
.rw-line{stroke:#c9302c;stroke-width:calc(3px * var(--mk,1));stroke-dasharray:calc(8px * var(--mk,1)) calc(5px * var(--mk,1));fill:none}
.rw-city circle{fill:#fff;stroke:#c9302c;stroke-width:2}.rw-city text{font:800 12px var(--font);fill:#1d2a36;paint-order:stroke;stroke:#fff;stroke-width:3px}
.rw-side{display:flex;flex-direction:column;gap:6px}
.rw-out{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.rw-out .pc-say,.xs2-out .pc-say,.rw-q .pc-say{flex:none}
.rw-qs{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.rw-qq{margin:4px 0 0;font:700 15px var(--font)}
.xp-chip.ok{border-color:#138a5e;background:var(--h1)}.xp-chip.bad{border-color:#c9302c;background:var(--warn-bg)}
.al{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.al{grid-template-columns:1fr}}
.al-pics{display:grid;grid-template-columns:1fr;gap:12px;max-width:340px;width:100%;margin:0 auto}
@media (max-width:760px){.al-pics{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);max-width:none;align-items:center}}
@media (max-width:520px){.al-pics{grid-template-columns:1fr}.al-dial{max-width:220px;margin:0 auto}}
.al-dial,.al-side{display:block;width:100%;height:auto}
.al-rim{fill:#2b2f36}.al-face{fill:#111418}.al-tick{stroke:#cfd6de;stroke-width:1.2}.al-tick.big{stroke:#fff;stroke-width:2.4}
.al-num{fill:#fff;font:800 17px var(--font)}.al-lab{fill:#9aa4ae;font:800 10.5px var(--font);letter-spacing:.12em}.al-lab.sm{font-size:9.5px}
.al-win{fill:#000;stroke:#666}.al-wint{fill:#ffd166;font:800 14px var(--mono)}
.al-n1{fill:#fff}.al-n2{fill:#fff;opacity:.9}.al-n3{fill:#ffd166}.al-hub{fill:#444}
.al-n1,.al-n2,.al-n3{transition:transform .5s ease}
@media (prefers-reduced-motion:reduce){.al-n1,.al-n2,.al-n3{transition:none}}
.al-sky{fill:#cfe3f6}.al-sea{fill:#6aa5d8}.al-gnd{fill:#8a6d47}.al-st{fill:#1d2a36;font:800 11px var(--font)}.al-st.w{fill:#fff}
.al-real path{fill:#c9302c}.al-real text{fill:#c9302c;font:800 9px var(--font)}
.al-ghost path{fill:none;stroke:#1d2a36;stroke-width:1.2;stroke-dasharray:2 2}.al-ghost text{fill:#1d2a36;font:700 9px var(--font)}
.al-gap{stroke:#e8642a;stroke-width:2;stroke-dasharray:3 3}
.al-ctl{display:flex;flex-direction:column;gap:6px}
.mt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.mt{grid-template-columns:1fr}}
.mt-svg{display:block;width:100%;height:auto;border-radius:16px;overflow:hidden}
.mt-sky{fill:#8fc1ec}.mt-sky.dark{fill:#6d7f92}.mt-grid{stroke:rgba(255,255,255,.35);stroke-dasharray:3 5}.mt-ax{fill:rgba(255,255,255,.85);font:700 10.5px var(--mono)}
.mt-cloud{fill:#f6f8fb;stroke:#c9d3dd;stroke-width:.8}.mt-cb{fill:#e3e7ec;stroke:#7d8b99;stroke-width:1}.mt-cl{fill:#1d2a36;font:800 11px var(--mono);paint-order:stroke;stroke:#fff;stroke-width:2.5px}
.mt-fog{fill:#eef1f4;opacity:.85}.mt-haze{fill:#eef1f4}.mt-haze.dust{fill:#d9b98a}
.mt-rain{stroke:#2f6fb5;stroke-width:1.2;opacity:.65}.mt-rain.hv{stroke-width:2}
.mt-bolt{fill:#ffd166;stroke:#a87700;stroke-width:1}
.mt-gnd{fill:#5c7a4a}.mt-rwy{fill:#3a3f45}.mt-rn{fill:#fff;font:800 13px var(--mono)}
.mt-wind path{stroke:#fff;stroke-width:3}.mt-ah{fill:#fff}.mt-wind text{fill:#fff;font:800 10px var(--mono)}
.mt-ft{fill:#fff;font:800 10.5px var(--mono)}.mt-vis{fill:#1d2a36;font:800 10.5px var(--font);paint-order:stroke;stroke:#fff;stroke-width:3px}
.ts-svg{display:block;width:100%;height:auto;border-radius:16px;overflow:hidden}
.ts-sky{fill:#9cc8ee}.ts-sky.dark{fill:#5f7387}.ts-trop{stroke:#fff;stroke-width:1.2;stroke-dasharray:6 4;opacity:.8}.ts-zero{stroke:#2a7fff;stroke-width:1.4;stroke-dasharray:5 4}
.ts-lab{fill:#fff;font:800 9.5px var(--font);paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:2px}.ts-lab.z{fill:#cfe3ff}
.ts-cloud{fill:#eef1f5;stroke:#9aa7b4;stroke-width:1}.ts-rain{stroke:#2f6fb5;stroke-width:1.4;opacity:.8}.ts-bolt{fill:#ffd166;stroke:#a87700}
.ts-arr{stroke-width:2.4;fill:none}.ts-arr.up{stroke:#e8642a}.ts-arr.dn{stroke:#2f7bf0}.ts-arr.out{stroke:#fff;stroke-width:2}
.ts-ah.up{fill:#e8642a}.ts-ah.dn{fill:#2f7bf0}.ts-ah.out{fill:#fff}
.ts-gust{fill:#c7cfd8;stroke:#7d8b99}.ts-gnd{fill:#5c7a4a}.ts-sum{margin:0;font-size:14px;color:var(--ink)}
.mb-flow{fill:none;stroke:#cfe3ff;stroke-width:1.6;opacity:.7}.mb-gs{stroke:#ffd166;stroke-width:1.4;stroke-dasharray:6 4}.mb-track{fill:none;stroke:#ff6a3d;stroke-width:2}.mb-ac path{fill:#fff}
.wl-svg{display:block;width:100%;height:auto;border-radius:16px;overflow:hidden}
.wl-bg{fill:#eef4fa}.wl-iso{fill:none;stroke:#7d8b99;stroke-width:1.4}.wl-il{fill:#5b6b7a;font:700 9px var(--mono)}
.wl-lh{font:900 14px var(--font)}.wl-lh.l{fill:#c9302c}.wl-lh.h{fill:#2f7bf0}
.wl-v{stroke-width:3;fill:none}.wl-h{stroke:none}.wl-t{font:800 11px var(--font)}
.wl-v.wind{stroke:#1d2a36;stroke-width:4}.wl-h.wind,.wl-t.wind{fill:#1d2a36}
.wl-v.pgf{stroke:#c9302c}.wl-h.pgf,.wl-t.pgf{fill:#c9302c}.wl-v.cor{stroke:#2f7bf0}.wl-h.cor,.wl-t.cor{fill:#2f7bf0}
.wl-v.fri{stroke:#8a6d47}.wl-h.fri,.wl-t.fri{fill:#8a6d47}.wl-v.cen{stroke:#7a4fd6}.wl-h.cen,.wl-t.cen{fill:#7a4fd6}.wl-p{fill:#ffd166;stroke:#1d2a36}
.wl-leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font:600 12px var(--font);color:var(--muted)}.wl-k i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:5px;vertical-align:middle}
.wl-k.pgf i{background:#c9302c}.wl-k.cor i{background:#2f7bf0}.wl-k.fri i{background:#8a6d47}.wl-k.cen i{background:#7a4fd6}.wl-k.wind i{background:var(--ink)}
.br-sky{fill:#9cc8ee}.br-sky.night{fill:#1f2f4a}.br-sun{fill:#ffd166}.br-moon{fill:#f2f4f8}.br-sea{fill:#3f7fc1}.br-land{fill:#8a6d47}
.br-t{fill:#fff;font:800 10px var(--font)}.br-hl{fill:#fff;font:900 15px var(--font)}.br-hl.s{opacity:.75;font-size:12px}
.br-flow{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:5 5;opacity:.8}.br-dot{fill:#ffd166}.br-cu{fill:#f4f6f9;stroke:#9aa7b4}.br-fog{fill:#e8edf2;opacity:.8}
.fp-svg{display:block;width:100%;height:auto;border-radius:16px;overflow:hidden}
.fp-sky{fill:#cfe3f6}.fp-warm{fill:#ffd9c7;opacity:.85}.fp-cold{fill:#a9c9ef}.fp-cool{fill:#c9def4}
.fp-am{font:900 11px var(--font);letter-spacing:.06em}.fp-am.w{fill:#c0472a}.fp-am.c{fill:#1f5fae}.fp-lab{fill:#1d2a36;font:700 10px var(--font)}
.fp-cl{fill:#f4f6f9;stroke:#9aa7b4}.fp-cl.ci{fill:#fff;opacity:.85}.fp-cl.cb{fill:#e3e7ec;stroke:#6f7f8f}.fp-cl-t{fill:#1d2a36;font:800 9px var(--font)}
.fp-stn path{stroke:#1d2a36;stroke-width:2}.fp-stn .fl{fill:#c9302c;stroke:none}.fp-stn text{fill:#fff;font:800 9px var(--font)}
.cy-svg{display:block;width:100%;height:auto;border-radius:16px;overflow:hidden}
.cy-sea{fill:#2b5d8f}.cy-z{fill:none;stroke:rgba(255,255,255,.35);stroke-dasharray:4 4}.cy-z.z1{fill:rgba(255,255,255,.18);stroke:#fff}.cy-z.z2{fill:rgba(255,255,255,.1)}
.cy-band{fill:none;stroke:#eef3f8;stroke-width:9;stroke-linecap:round;opacity:.55}.cy-eye{fill:#2b5d8f;stroke:#fff}
.cy-worst{fill:#c9302c;opacity:.22}.cy-wl{fill:#ffd4cf;font:800 9.5px var(--font)}
.cy-mv{stroke:#ffd166;stroke-width:3}.cy-mvh{fill:#ffd166}.cy-ac path{fill:#ffd166;stroke:#1d2a36;stroke-width:.8}
.cy-wind{stroke:#7ee0a1;stroke-width:2.6}.cy-wh{fill:#7ee0a1}
.jx-svg{display:block;width:100%;height:auto;border-radius:16px;overflow:hidden}
.jx-bg{fill:#eef4fa}.jx-cold{fill:#dbe7ff}.jx-warm{fill:#ffe9dc}.jx-ax{fill:#5b6b7a;font:700 10px var(--mono)}
.jx-trop{stroke:#7a4fd6;stroke-width:2;stroke-dasharray:6 4;fill:none}.jx-lab{fill:#1d2a36;font:700 10.5px var(--font)}.jx-lab.b{font-weight:900}
.jx-cat{fill:#c9302c}.jx-iso{fill:none;stroke:#1f5fae;stroke-width:1.3}.jx-il{fill:#1f5fae;font:800 10px var(--mono)}
.jx-core{fill:#1f5fae}.jx-cl{fill:#5b6b7a;font:800 10px var(--font);font-style:italic}.jx-ac{fill:#ffd166;stroke:#1d2a36;stroke-width:1.5}
/* ---------- step panel shared by figure and scene3d ---------- */
.sp{margin-top:12px}
.sp-dots{display:flex;flex-wrap:wrap}
.sp-dots{gap:2px;margin-bottom:4px}
.sp-dots button{width:30px;height:28px;border:0;padding:0;background:none;cursor:pointer;position:relative}
.sp-dots button::before{content:"";position:absolute;left:2px;right:2px;top:10px;height:8px;border-radius:99px;background:var(--line)}
.sp-dots button.seen::before{background:var(--wire)}
.sp-dots button.on{width:42px}.sp-dots button.on::before{background:var(--hi,var(--accent))}
.sp-card{background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;min-height:120px}
.sp-card h3{margin:2px 0 6px;font-family:var(--head);font-size:clamp(18px,4.6vw,21px);line-height:1.25}
.sp-card p{margin:0 0 8px;color:var(--ink);font-size:15.5px}
.sp-card p:last-child{margin-bottom:0}
.sp .st-nav{margin-top:10px}

/* ---------- figure: vector board build-ups ---------- */
.fg{--fg-skyh:#eef6fd;--fg-groundh:#a4bd84;--fg-seah:#5d9bd3;--fg-cloudb:#a9b5c4;--fg-lbline:#16181d1f;--fg-sub:#4b5260;--fg-halo:#ffffff;--fg-sky1:#7fb4e6;--fg-sky2:#dcecfa;--fg-ground:#7c9a5c;--fg-ground2:#5f7d46;--fg-sea:#2f74b5;--fg-sea2:#1d5a91;--fg-cloud:#ffffff;--fg-cloud2:#c9d3df;
  --fg-ink:#16181d;--fg-label:#ffffffee;--fg-warm:#ff7a45;--fg-cold:#3d8bff;--fg-moist:#1fae6a;--fg-dry:#c98a2b;--fg-jet:#e8a400;--fg-air:#ffffff;--fg-grid:#16181d22;--fg-panel:#f6f8fb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fg{--fg-skyh:#6d8fb3;--fg-groundh:#6a8550;--fg-seah:#2d6aa3;--fg-cloudb:#7b889a;--fg-lbline:#ffffff24;--fg-sub:#b9bfca;--fg-halo:#0b1220;--fg-sky1:#1f3d63;--fg-sky2:#4f7299;--fg-ground:#4c6439;--fg-ground2:#3a4f2b;--fg-sea:#1d4e7d;--fg-sea2:#143a5f;--fg-cloud:#eef2f7;--fg-cloud2:#9aa7b8;--fg-ink:#ecedf0;--fg-label:#1a1d24ee;--fg-grid:#ffffff22;--fg-panel:#1f232b}}
:root[data-theme="dark"] .fg{--fg-skyh:#6d8fb3;--fg-groundh:#6a8550;--fg-seah:#2d6aa3;--fg-cloudb:#7b889a;--fg-lbline:#ffffff24;--fg-sub:#b9bfca;--fg-halo:#0b1220;--fg-sky1:#1f3d63;--fg-sky2:#4f7299;--fg-ground:#4c6439;--fg-ground2:#3a4f2b;--fg-sea:#1d4e7d;--fg-sea2:#143a5f;--fg-cloud:#eef2f7;--fg-cloud2:#9aa7b8;--fg-ink:#ecedf0;--fg-label:#1a1d24ee;--fg-grid:#ffffff22;--fg-panel:#1f232b}
.fg-frame{border-radius:20px;overflow:hidden;border:1.5px solid var(--line);background:var(--fg-panel);box-shadow:var(--shadow)}
.fg-frame.bare{border:0;background:none;box-shadow:none}
.fg-svg{display:block;width:100%;height:auto;max-height:78vh;font-family:var(--font)}
.fg-svg text{fill:var(--fg-ink);text-rendering:geometricPrecision;letter-spacing:.01em}
.fg-svg [data-k]{transition:opacity .45s ease}
.fg-svg .fg-off{opacity:0;pointer-events:none;animation:none!important}
.fg-svg .fg-dim{opacity:.28}
.fg-svg .fg-new{animation:fgIn .7s ease both}
@keyframes fgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fg-svg .flow{stroke-dasharray:7 9;animation:fgFlow 1.1s linear infinite}
.fg-svg .flow.slow{animation-duration:2.4s}
.fg-svg .flow.rev{animation-direction:reverse}
@keyframes fgFlow{to{stroke-dashoffset:-32}}
.fg-svg .drift{animation:fgDrift 9s ease-in-out infinite alternate}
@keyframes fgDrift{to{transform:translateX(14px)}}
.fg-svg .bob{animation:fgBob 3.2s ease-in-out infinite alternate}
@keyframes fgBob{to{transform:translateY(-6px)}}
.fg-svg .rise{animation:fgRise 3s linear infinite}
@keyframes fgRise{from{transform:translateY(18px);opacity:0}25%{opacity:1}to{transform:translateY(-30px);opacity:0}}
.fg-svg .sink{animation:fgSink 3s linear infinite}
@keyframes fgSink{from{transform:translateY(-18px);opacity:0}25%{opacity:1}to{transform:translateY(30px);opacity:0}}
.fg-svg .pulse{animation:fgPulse 1.6s ease-in-out infinite}
@keyframes fgPulse{50%{opacity:.35}}
.fg-svg .spin{transform-box:fill-box;transform-origin:center;animation:fgSpin 14s linear infinite}
.fg-svg .spin.ccw{animation-direction:reverse}
@keyframes fgSpin{to{transform:rotate(360deg)}}
.fg-svg .ride{transform-box:view-box;offset-anchor:0 0;animation:fgRide var(--dur,6s) linear infinite}
@keyframes fgRide{from{offset-distance:0%}to{offset-distance:100%}}
.fg-svg .swing{transform-box:view-box;animation:fgSwing var(--dur,2.4s) ease-in-out infinite alternate}
@keyframes fgSwing{from{transform:rotate(var(--a0,-20deg))}to{transform:rotate(var(--a1,20deg))}}
.fg-svg .fg-tap{cursor:pointer}
.fg-svg .fg-tap:focus{outline:none}
.fg-svg .fg-tap.on{filter:drop-shadow(0 0 4px var(--hi,#3d5bd9))}
.fg-svg .lab{font-size:13px;font-weight:700}
.fg-svg .lab-s{font-size:11.5px;font-weight:600}
.fg-svg .lab-xs{font-size:10.5px;font-weight:600}
.fg-svg .lab-bg{fill:var(--fg-label);stroke:none}
.fg-svg .num{font-family:var(--mono);font-weight:700}
@media (prefers-reduced-motion:reduce){.fg-svg *{animation:none!important}}

/* ---------- scene3d ---------- */
.s3-view{position:relative;width:100%;aspect-ratio:var(--ar,4/3);max-height:76vh;border-radius:20px;overflow:hidden;background:#0b1220;border:1.5px solid var(--line);box-shadow:var(--shadow);isolation:isolate}
@media (max-width:640px){.s3-view{aspect-ratio:1/1}.s3-view.s3-space{aspect-ratio:1/1}}
.s3-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab}
.s3-canvas:active{cursor:grabbing}
.s3-labels{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.s3-lab{position:absolute;left:0;top:0;transform:translate(-999px,-999px);margin:-14px 0 0 8px;padding:3px 9px 4px;border-radius:10px;background:rgba(14,17,24,.78);color:#fff;font-size:12.5px;line-height:1.25;white-space:nowrap;transition:opacity .3s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.18)}
.s3-lab b{font-weight:700}
.s3-lab span{display:block;font-size:11px;opacity:.82;font-weight:500}
.s3-lab.warm{background:rgba(160,52,10,.82)}.s3-lab.cold{background:rgba(20,62,150,.82)}.s3-lab.gold{background:rgba(120,82,0,.85)}.s3-lab.green{background:rgba(10,98,60,.85)}
.s3-tools{position:absolute;right:10px;top:10px;z-index:3;display:flex;gap:8px}
.s3-btn{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(14,17,24,.6);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.s3-btn .ico{width:18px;height:18px}
.s3-hint{position:absolute;left:12px;bottom:10px;z-index:3;margin:0;font-size:12px;color:#fff;opacity:.85;background:rgba(14,17,24,.5);padding:3px 9px;border-radius:99px;pointer-events:none;transition:opacity .6s}
.s3-hint.off{opacity:0}
.s3-load{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;color:#e4ecf7;z-index:4;border-radius:inherit}
.s3-load::before,.s3-load::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .9s ease .2s}
.s3-load::before{background:radial-gradient(130% 95% at 50% 38%,#2b4c7e 0%,#142746 52%,#09111f 100%)}
.s3-load::after{background:radial-gradient(120% 80% at 50% 120%,rgba(160,190,230,.18),transparent 60%)}
.s3-load-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .9s cubic-bezier(.5,0,.2,1),opacity .6s}
.s3-ok{width:clamp(124px,36%,176px);height:auto;overflow:visible;filter:drop-shadow(0 6px 22px rgba(0,0,0,.35))}
.s3-ok-bez{transform-origin:0 0;animation:s3Bez 26s linear infinite}
.s3-ok-bez line{stroke:rgba(214,228,248,.38);stroke-width:.8}.s3-ok-bez line.big{stroke:rgba(236,244,255,.85);stroke-width:1.3}
.s3-ok-bez text{fill:rgba(236,244,255,.85);font:700 7.5px var(--mono);text-anchor:middle}
.s3-ok-ring{fill:rgba(9,17,31,.55);stroke:#eaf2ff;stroke-width:1.6}
.s3-ok-w{fill:#f4f8ff;opacity:0;transform:scale(.6);transform-origin:0 0;transition:opacity .45s ease,transform .55s cubic-bezier(.3,1.6,.5,1)}
.s3-ok-w.on{opacity:.96;transform:none}
.s3-load-m{font:600 12px/1 var(--mono);letter-spacing:.14em;color:#bfe0ff;white-space:pre;padding:5px 10px;border:1px solid rgba(191,224,255,.28);border-radius:6px;background:rgba(6,14,28,.45)}
.s3-load-t{font-size:13px;font-weight:600;opacity:.9;text-align:center}
.s3-load-vap{position:absolute;inset:0;z-index:1;pointer-events:none}
.s3-load-vap i{position:absolute;bottom:-8px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.6) 40%,rgba(255,255,255,0) 72%);animation:s3Vap 3s ease-in infinite}
@keyframes s3Vap{0%{transform:translateY(0) scale(.4);opacity:0}25%{opacity:.75}70%{opacity:.5}100%{transform:translateY(-62cqh) scale(3.4);opacity:0;filter:blur(1.5px)}}
@supports not (height:1cqh){@keyframes s3Vap{0%{transform:translateY(0) scale(.4);opacity:0}25%{opacity:.75}100%{transform:translateY(-240px) scale(3.4);opacity:0}}}
.s3-load{container-type:size}
.s3-bank{position:absolute;top:-12%;bottom:-12%;width:58%;z-index:3;pointer-events:none;transition:transform 1.15s cubic-bezier(.6,0,.2,1);filter:blur(5px);
  background:radial-gradient(30% 17% at 62% 10%,rgba(236,243,253,.9),rgba(236,243,253,0) 100%),radial-gradient(34% 19% at 74% 30%,rgba(222,232,247,.85),rgba(222,232,247,0) 100%),
  radial-gradient(30% 16% at 58% 50%,rgba(240,246,255,.9),rgba(240,246,255,0) 100%),radial-gradient(36% 20% at 72% 70%,rgba(214,226,244,.85),rgba(214,226,244,0) 100%),
  radial-gradient(30% 17% at 60% 92%,rgba(236,243,253,.9),rgba(236,243,253,0) 100%),linear-gradient(90deg,rgba(214,226,244,.9) 0,rgba(214,226,244,.55) 45%,rgba(214,226,244,0) 78%)}
.s3-bank.l{left:-38%;animation:s3BankL 7s ease-in-out infinite}.s3-bank.r{right:-38%;transform:scaleX(-1);animation:s3BankR 7s ease-in-out infinite}
@keyframes s3BankL{50%{translate:4% 0}}@keyframes s3BankR{50%{translate:-4% 0}}
@keyframes s3Bez{to{transform:rotate(360deg)}}
.s3-load.done{transition:opacity .45s ease 1.05s;opacity:0;pointer-events:none}
.s3-load.done::before,.s3-load.done::after{opacity:0}
.s3-load.done .s3-load-in{transform:translateY(-38%) scale(.82);opacity:0}
.s3-load.done .s3-load-vap{opacity:0;transition:opacity .4s}
.s3-load.done .s3-bank.l{transform:translateX(-120%);animation:none}.s3-load.done .s3-bank.r{transform:scaleX(-1) translateX(-120%);animation:none}
@media (prefers-reduced-motion:reduce){.s3-ok-bez,.s3-load-vap i,.s3-bank{animation:none!important}.s3-load-vap{display:none}}
.s3-credit{font-size:12px;color:var(--muted);margin:8px 2px 0}
.s3.s3-full{position:fixed;inset:0;z-index:1000;background:var(--paper);padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:auto}
.s3.s3-full .s3-view{flex:1 0 auto;aspect-ratio:auto;height:62vh;max-height:none}
.s3.s3-full .sp{flex:none}
html.s3-lock,html.s3-lock body{overflow:hidden}

/* chapter cover picture (real photo, or a Codex picture once it exists) and picture cards on the Meteorology home */
.ch-cover{position:relative;margin:0 0 4px;border-radius:24px;overflow:hidden;aspect-ratio:16/7;background:var(--wash)}
.ch-cover img{display:block;width:100%;height:100%;object-fit:cover}
.ch-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45));pointer-events:none}
.ch-cover figcaption{position:absolute;left:12px;right:12px;bottom:8px;text-align:right;z-index:1;color:#fff;font-size:11px;opacity:.85;text-shadow:0 1px 3px rgba(0,0,0,.6)}
@media (max-width:760px){.ch-cover{aspect-ratio:16/9;border-radius:18px}}
.card.has-pic{padding-top:0;overflow:hidden;isolation:isolate}
.card .card-pic{display:block;width:calc(100% + 36px);max-width:none;margin:0 -18px -38px;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--wash);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);transform-origin:50% 30%}
.card.has-pic:hover .card-pic{transform:scale(1.04)}
.card.has-pic .top{position:relative;z-index:1}
.card.has-pic .no{text-shadow:0 1px 12px var(--panel),0 0 3px var(--panel)}
.card.has-pic .ic{box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
.card.has-pic .card-foot{margin-top:auto}

.ix-globe{width:100%;max-width:340px;aspect-ratio:1/1;justify-self:center;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 50%,#0b1330 0,#05070d 70%)}
@media (max-width:760px){.ix-hero .ix-globe{max-width:260px;margin:4px auto 0}}
/* ---------- depth: photos lean toward the mouse with a soft sheen, or drift against the scroll on touch screens ---------- */
.dp{transform:perspective(1100px) rotateX(calc(var(--dy,0) * -5deg)) rotateY(calc(var(--dx,0) * 7deg));transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s}
.dp.dp-on{transition-duration:.15s,.4s;box-shadow:0 28px 60px -24px rgba(0,0,0,.55)}
.dp-drift .ph-img,.ch-cover.dp-drift img{transform:translate3d(calc(var(--dx,0) * -10px),calc(var(--dy,0) * -8px + var(--sy,0) * 16px),0) scale(1.06);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.dp-on .ph-img{transition-duration:.15s}
.ch-cover.dp{transform:none}
.ch-cover.dp-drift img{transform:translate3d(0,calc(var(--sy,0) * 22px),0) scale(1.08);transition:none}
.dp-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle at calc(50% + var(--dx,0) * 120%) calc(50% + var(--dy,0) * 120%),rgba(255,255,255,.26),rgba(255,255,255,0) 52%)}
.dp-on .dp-sheen{opacity:1}

/* ---------- story cards turn like a deck, with the next cards showing behind ---------- */
.st-text{display:flex;flex-direction:column;gap:10px;min-width:0}
.story:not(.all) .st-card{position:relative;isolation:isolate;overflow:visible}
.story:not(.all) .st-card::before,.story:not(.all) .st-card::after{content:"";position:absolute;left:14px;right:14px;bottom:-7px;height:40px;border-radius:0 0 18px 18px;background:var(--panel);border:1.5px solid var(--line);border-top:0;z-index:-1}
.story:not(.all) .st-card::after{left:30px;right:30px;bottom:-13px;opacity:.7;z-index:-2}
.story:not(.all) .st-face{backface-visibility:hidden}
@keyframes st-in-r{from{transform:perspective(1400px) translate3d(70px,0,-60px) rotateY(-16deg);opacity:0}to{transform:none;opacity:1}}
@keyframes st-in-l{from{transform:perspective(1400px) translate3d(-70px,0,-60px) rotateY(16deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- photo lessons: picture, then its legend and explanation ---------- */
.ph-pic{min-width:0}
.ph-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.ph-side .tools{margin:0}

/* ---------- real world: the lesson card turns over to show the thing itself ---------- */
.lh.lh-rw{grid-template-columns:auto 1fr auto;max-width:none}
.rw-chip{align-self:center;display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);font:inherit;text-align:left;transition:transform .2s,background .2s,color .2s;min-height:48px;touch-action:manipulation}
.rw-chip img{width:56px;height:38px;border-radius:999px;object-fit:cover;flex:none}
.rw-chip b{display:block;font-size:13.5px;line-height:1.2}
.rw-chip small{display:block;font-size:11.5px;color:var(--muted);line-height:1.2}
.rw-chip:hover{transform:translateY(-1px)}
.rw-chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.rw-chip[aria-pressed="true"] small{color:inherit;opacity:.75}
@media (max-width:640px){.lh.lh-rw{grid-template-columns:auto 1fr}.rw-chip{grid-column:1/-1;justify-self:start}}
.stage.rw{perspective:1800px;overflow:visible}
.rw-flip{display:grid;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,.7,.15,1)}
.rw-front,.rw-back{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rw-back{transform:rotateY(180deg);position:relative;border-radius:18px;overflow:hidden;background:#0b1220;color:#fff;display:flex;min-height:100%}
.stage.rw-on .rw-flip{transform:rotateY(180deg)}
.rw-amb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(30px) brightness(.5) saturate(1.25);transform:scale(1.25)}
.rw-in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;padding:14px;width:100%;box-sizing:border-box}
.rw-shot{min-width:0}
.rw-shot .ph{border-radius:14px;box-shadow:0 24px 50px -20px rgba(0,0,0,.75)}
.rw-shot .ph-img{max-height:min(60vh,520px)}
.rw-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.rw-kick{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffd27a}
.rw-kick .ico{width:15px;height:15px}
.rw-cap b{display:block;font-family:var(--head);font-size:clamp(18px,2.2vw,22px);line-height:1.25;margin-top:6px}
.rw-cap p{margin:6px 0 0;color:rgba(255,255,255,.88);font-size:15.5px;line-height:1.55}
.rw-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.rw-thumbs button{width:72px;height:46px;padding:0;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.25);background:none;cursor:pointer;opacity:.75;transition:opacity .2s,border-color .2s}
.rw-thumbs button.on{border-color:#fff;opacity:1}
.rw-thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.rw-back-btn{align-self:flex-start;background:#fff;color:#111;border-color:#fff}

/* ---------- Meteorology on desktop: one lesson, one screen, every card the same height ---------- */
@media (min-width:1100px) and (min-height:600px){
  .subj-met .lesson{--sh:clamp(360px,calc(100vh - 300px),660px)}
  /* figures: upright drawings with the steps beside them; wide ones with the steps in a strip underneath */
  .subj-met .fg .fg-frame{height:var(--sh);display:flex;align-items:center;justify-content:center;min-width:0;box-sizing:border-box}
  .subj-met .fg .fg-svg{width:100%;height:100%;max-height:none}
  .subj-met .fg.dsk.fg-tall{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,34%,360px);gap:20px}
  .subj-met .fg-side{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
  .subj-met .fg.dsk.fg-tall .fg-side{height:var(--sh)}
  .subj-met .fg.dsk.fg-wide{display:flex;flex-direction:column;gap:12px;height:var(--sh)}
  .subj-met .fg.dsk.fg-wide .fg-frame{height:auto;flex:1 1 0;min-height:0}
  .subj-met .fg.dsk.fg-wide .fg-side{flex:none;height:196px;flex-direction:row}
  .subj-met .fg.dsk.fg-wide .fg-side > *{flex:1 1 0;min-width:0}
  .subj-met .fg-side .sp,.subj-met .s3-side .sp{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;margin:0}
  .subj-met .fg-side .sp-card,.subj-met .s3-side .sp-card{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .subj-met .fg-side .detail{flex:0 1 auto;max-height:46%;overflow-y:auto}
  .subj-met .fg.dsk.fg-wide .fg-side .detail{max-height:none}
  .subj-met .fg-wide .sp-card{min-height:0}
  /* 3D: the model on the left, its steps on the right */
  .subj-met .s3 .s3-view{height:var(--sh);aspect-ratio:auto;max-height:none}
  .subj-met .s3.dsk{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,32%,350px);gap:20px}
  .subj-met .s3.dsk .s3-side{display:flex;flex-direction:column;gap:8px;height:var(--sh);min-height:0;min-width:0}
  .subj-met .s3-side .s3-credit{flex:none;margin:0}
  .subj-met .s3.dsk.s3-full{display:grid;padding:12px}
  .subj-met .s3.dsk.s3-full .s3-view,.subj-met .s3.dsk.s3-full .s3-side{height:calc(100vh - 24px)}
  /* stories: one fixed-size card, picture left and words right */
  .subj-met .story{max-width:none}
  .subj-met .story:not(.all) .st-face{min-height:min(calc(var(--sh) - 116px),520px);box-sizing:border-box}
  .subj-met .story:not(.all) .st-face.st-plain{min-height:0}
  .subj-met .story:not(.all) .st-face.st-has-photo,.subj-met .story:not(.all) .st-face.st-has-pic{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 26px;padding:0 0 0 0}
  .subj-met .story:not(.all) .st-has-photo .st-photo{margin:0;border-radius:15px 0 0 15px;height:100%}
  .subj-met .story:not(.all) .st-has-photo .st-photo .ph-img{height:100%;max-height:none;object-fit:contain}
  .subj-met .story:not(.all) .st-has-pic .st-pic{margin:0;border-radius:15px 0 0 15px;height:100%;box-sizing:border-box;padding:18px;min-height:0}
  .subj-met .story:not(.all) .st-has-pic .st-pic svg{max-height:100%;max-width:100%}
  .subj-met .story:not(.all) .st-has-pic .st-text,.subj-met .story:not(.all) .st-has-photo .st-text{min-height:0;padding:26px 28px 26px 0;justify-content:center}
  /* photo lessons: the whole photo at the card height, legend and explanation beside it */
  .subj-met .ph-wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,32%,340px);gap:20px;align-items:start}
  .subj-met .ph-pic{display:flex;flex-direction:column;align-items:center;height:var(--sh);justify-content:center}
  .subj-met .ph-pic .ph-frame{width:fit-content;max-width:100%}
  .subj-met .ph-pic .ph-frame img{width:auto;max-width:100%;height:auto;max-height:calc(var(--sh) - 26px)}
  .subj-met .ph-side{max-height:var(--sh);overflow-y:auto}
  /* labs: the drawing shrinks to leave room for its controls on the same screen */
  .subj-met :is(.cl-earth,.cl-ruler,.al-dial,.al-side,.dy-chart,.dy-scene,.da-scene,.fm-scene,.at-sky,.pc-chart,.pc-sky,.rl-svg,.ic-svg,.lw-svg,.gc-svg,.wr-svg,.or-svg,.rp-svg,.tf-gantt){max-height:calc(var(--sh) - 210px)}
  /* decoders: a long coded message reads as one line of text, not a wall of giant tiles */
  .subj-met .code.wordy{gap:6px;margin-bottom:14px}
  .subj-met .code.wordy button{font-size:16.5px;line-height:1.35;padding:5px 10px;border-radius:10px}
  .subj-met .dec-wordy{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
  .subj-met .dec-wordy .code{justify-content:flex-start;align-content:flex-start;margin:0}
  .subj-met .dec-wordy .keys{grid-template-columns:1fr;max-height:var(--sh);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
  .subj-met .cl-stage{height:calc(var(--sh) - 150px);min-height:340px}
  /* maps and real-world backs keep to the card height too */
  .subj-met .mp-svg{max-height:var(--sh)}
  .subj-met .rw-in{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(250px,1fr);align-items:center;gap:26px;padding:20px}
  .subj-met .rw-shot .ph-img{max-height:calc(var(--sh) - 44px)}
}
@media (prefers-reduced-motion:reduce){.dp,.dp .ph-img,.rw-flip{transform:none!important}.stage.rw-on .rw-front{visibility:hidden}.stage:not(.rw-on) .rw-back{visibility:hidden}.rw-back{transform:none}}

.mp-hit{fill:transparent;stroke:none}
/* ---------- one size per deck: every card (and every step) shares one spot; only the current one shows ---------- */
.story:not(.all) .st-card{display:grid}
.story:not(.all) .st-card > .st-face{grid-area:1/1;min-width:0}
.st-face.st-off{visibility:hidden;animation:none}
.subj-met .st-face.st-off{display:none}
.story:not(.all) .st-face > .st-photo,.story:not(.all) .st-face > .st-pic{flex:1 1 auto}
.st-pic-soft{position:relative;overflow:hidden;isolation:isolate}
.st-pic-soft > svg.st-pic-bg{position:absolute;inset:-8%;width:116%!important;height:116%!important;max-width:none!important;max-height:none!important;z-index:-1;filter:blur(16px) saturate(1.15);opacity:.55;pointer-events:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st-pic-soft > svg.st-pic-bg{opacity:.4}}:root[data-theme="dark"] .st-pic-soft > svg.st-pic-bg{opacity:.4}
.st-pic-soft > svg:not(.st-pic-bg){position:relative;border-radius:10px;box-shadow:0 8px 22px -8px rgba(11,18,32,.35),0 0 0 1px rgba(255,255,255,.35)}
.story:not(.all) .st-face > .st-photo{min-height:min(52vw,300px);display:block}
.story:not(.all) .st-face > .st-photo .ph-img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
.sp-card{display:grid}
.sp-card > .sp-step{grid-area:1/1;min-width:0}
.sp-step.off,.mp-step.off{visibility:hidden}
.subj-met :is(.sp-step,.mp-step).off{display:none}
.sp-step.in{animation:fgIn .35s ease both}
.mp-cap{display:grid}
.mp-cap > .mp-step{grid-area:1/1;min-width:0}
/* the vector scene on a card without a picture */
.st-art{padding:0!important;overflow:hidden;min-height:min(40vw,200px);position:relative;align-items:stretch!important}
.st-art svg{position:absolute;inset:0;width:100%;height:100%;max-width:none!important;display:block}
.st-art{--art1:#bcd9f5;--art2:#e9f3fd;--artl:#9cc28a;--artl2:#7fa96d;--arti:#ffffff;background:linear-gradient(180deg,var(--art1),var(--art2))}
.st-art .art-bg{fill:transparent}
.st-art .art-puff{fill:#fff;opacity:.55}
.st-art .art-land{fill:var(--artl)}.st-art .art-land2{fill:var(--artl2)}
.st-art .art-halo{fill:#fff;opacity:.22}
.st-art .art-ico{fill:none;stroke:var(--arti);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.28))}
.st-art .art-ico path[fill="currentColor"]{fill:var(--arti);stroke:none}
.st-art .drift{animation:fgDrift 9s ease-in-out infinite alternate}.st-art .drift.slow{animation-duration:13s}
.art-storm{--art1:#3b4660;--art2:#7b7f99;--artl:#4e5d47;--artl2:#3c4a37;--arti:#ffe27a}
.art-sea{--art1:#2f6fa8;--art2:#8fc2e8;--artl:#2a5d8f;--artl2:#21507c}
.art-rain{--art1:#6f8399;--art2:#b9c6d3;--artl:#6f9a5d;--artl2:#5b8650}
.art-fog{--art1:#b8bcc2;--art2:#e4e5e7;--artl:#a9b0a3;--artl2:#979f92;--arti:#5e6670}
.art-ice{--art1:#9fc6e6;--art2:#eef6fc;--artl:#e6eef5;--artl2:#cfdbe6;--arti:#2f6fa8}
.art-high{--art1:#2c5ea8;--art2:#8db8ea;--artl:#d9e6f5;--artl2:#bfd2ea}
.art-hill{--art1:#8ab8e6;--art2:#e3eefa;--artl:#7d8f86;--artl2:#5f7068}
.art-sun{--art1:#f5b45f;--art2:#fde6b8;--artl:#b99a5a;--artl2:#9c8148}
.art-night{--art1:#0f1b33;--art2:#2b3f66;--artl:#1d2b45;--artl2:#16223a;--arti:#9fd0ff}
.art-paper{--art1:#e7e1d3;--art2:#f7f3ea;--artl:#d8d0bd;--artl2:#cbc2ad;--arti:#3a3f4a}
.art-paper .art-puff{opacity:.25}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st-art{filter:brightness(.88) saturate(.95)}:root:not([data-theme="light"]) .st-art.art-sky{--art1:#1c3352;--art2:#4a6d93;--artl:#4f7050;--artl2:#36523c;filter:none}}
:root[data-theme="dark"] .st-art{filter:brightness(.88) saturate(.95)}:root[data-theme="dark"] .st-art.art-sky{--art1:#1c3352;--art2:#4a6d93;--artl:#4f7050;--artl2:#36523c;filter:none}
/* photo credits at the foot of a chapter */
.credits{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.credits summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:36px;display:flex;align-items:center}
.credits ul{margin:8px 0 0;padding-left:18px;display:grid;gap:3px}


/* ================= Front door: both subjects on one horizon ================= */
.ld-page .bar{margin-bottom:6px}
.ld-hero{max-width:860px;padding:clamp(18px,4vw,42px) 0 clamp(18px,3vw,30px);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ld-kicker{font:700 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ld-hero h1{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(46px,8.4vw,104px);line-height:.92;letter-spacing:-.045em;text-wrap:balance}
.ld-sky{position:relative;display:inline-block;color:var(--met-sky);font-style:italic;padding-right:.06em}
.ld-sky::after{content:'';position:absolute;left:2%;right:4%;bottom:.04em;height:.12em;border-radius:99px;background:linear-gradient(90deg,var(--exam-gold),var(--met-glow));opacity:.85}
.ld-lede{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:44ch;line-height:1.5;text-wrap:pretty}
.ld-continue{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:9px 16px 9px 12px;border-radius:999px;background:var(--panel);border:1.5px solid var(--ink);box-shadow:var(--pop);text-decoration:none;font-size:14px;max-width:100%;transition:transform .2s}
.ld-continue span{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--exam-bg);color:var(--exam-fg)}
.ld-continue.ld-c-met span{background:var(--met-bg);color:var(--met-fg)}
.ld-continue b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-continue i{font-style:normal}
.ld-continue:hover{transform:translate(-1px,-2px)}

/* The stage: one edge-to-edge horizon. Paper and ink on the left, sky on the right, a diagonal seam between. */
@property --split{syntax:'<percentage>';inherits:true;initial-value:50%}
.ld-stage{--split:50%;position:relative;margin-inline:calc(50% - 50vw);height:clamp(520px,68vh,660px);overflow:hidden;
  border-block:1.5px solid var(--ink);background:var(--paper);transition:--split .7s cubic-bezier(.3,.7,.2,1);isolation:isolate}
.ld-stage[data-lean="regs"]{--split:60%}
.ld-stage[data-lean="met"]{--split:40%}
.ld-side{position:absolute;inset:0;display:flex;text-decoration:none;color:var(--ink);outline:none}
.ld-regs{z-index:1;background:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:22px 22px;
  clip-path:polygon(0 0,calc(var(--split) + 6%) 0,calc(var(--split) - 6%) 100%,0 100%)}
.ld-met{z-index:0;background:linear-gradient(170deg,var(--ld-sky1) 0%,var(--ld-sky2) 70%);justify-content:flex-end}
.ld-met::before{content:'';position:absolute;inset:0;background:
  radial-gradient(120px 46px at 62% 22%,rgba(255,255,255,.85),transparent 70%),radial-gradient(180px 60px at 78% 34%,rgba(255,255,255,.7),transparent 70%),
  radial-gradient(140px 50px at 88% 16%,rgba(255,255,255,.6),transparent 70%);opacity:.9;animation:ldDrift 40s linear infinite alternate}
:root[data-theme="dark"] .ld-met::before{opacity:.12}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ld-met::before{opacity:.12}}
@keyframes ldDrift{to{transform:translateX(-60px)}}
.ld-seam{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--ink) calc(50% - 1px),var(--ink) calc(50% + 1px),transparent calc(50% + 1px));
  clip-path:polygon(calc(var(--split) + 6% - 1px) 0,calc(var(--split) + 6% + 1px) 0,calc(var(--split) - 6% + 1px) 100%,calc(var(--split) - 6% - 1px) 100%);background:var(--ink)}
.ld-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:min(470px,40vw);
  padding:clamp(28px,5vw,64px) clamp(24px,5vw,72px);margin-top:auto;margin-bottom:auto}
.ld-met .ld-copy{align-items:flex-end;text-align:right}
.ld-no{font:700 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ld-met .ld-no{color:var(--met-dim)}
.ld-copy h2{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(38px,5.4vw,72px);line-height:.95;letter-spacing:-.04em}
.ld-met .ld-copy h2{color:var(--met-fg)}
.ld-line{font-size:clamp(15.5px,1.5vw,18px);line-height:1.5;color:var(--muted);max-width:36ch}
.ld-met .ld-line{color:var(--met-dim)}
.ld-facts{display:flex;flex-wrap:wrap;gap:6px}
.ld-met .ld-facts{justify-content:flex-end}
.ld-facts span{font:600 12.5px var(--font);padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.ld-met .ld-facts span{background:color-mix(in srgb,var(--met-panel) 80%,transparent);border-color:var(--met-line);color:var(--met-fg)}
.ld-go{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:12px 14px 12px 20px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:15.5px;box-shadow:4px 4px 0 var(--exam-gold);transition:transform .25s,box-shadow .25s}
.ld-go i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);transition:transform .25s}
.ld-met .ld-go{background:var(--met-fg);color:var(--met-panel);box-shadow:4px 4px 0 var(--met-glow)}
.ld-met .ld-go i{background:var(--met-panel);color:var(--met-fg)}
.ld-side:hover .ld-go,.ld-side:focus-visible .ld-go{transform:translate(-2px,-3px);box-shadow:7px 7px 0 var(--exam-gold)}
.ld-met:hover .ld-go,.ld-met:focus-visible .ld-go{box-shadow:7px 7px 0 var(--met-glow)}
.ld-side:hover .ld-go i,.ld-side:focus-visible .ld-go i{transform:translateX(3px)}
.ld-side:focus-visible .ld-go{outline:3px solid var(--accent);outline-offset:4px}
.ld-free{font-size:13px;color:var(--muted)}
.ld-met .ld-free{color:var(--met-dim)}
/* stickers: the logo's sticker language, floating gently in each world */
.ld-stickers{position:absolute;inset:0;pointer-events:none}
.ld-sticker{position:absolute;font:700 clamp(12px,1.2vw,15px) var(--mono);padding:5px 11px;border-radius:12px;border:2px solid var(--ink);background:var(--panel);box-shadow:3px 3px 0 var(--ink);white-space:nowrap;animation:ldBob 6s ease-in-out infinite}
.ld-regs .ld-sticker{background:var(--exam-bg);color:var(--exam-fg)}
.ld-regs .s0{left:5%;top:6%;rotate:-6deg}.ld-regs .s1{left:21%;top:4%;rotate:4deg;animation-delay:-1s}.ld-regs .s2{left:39%;top:36%;rotate:-3deg;animation-delay:-2.5s;background:var(--h1);color:var(--h1i)}
.ld-regs .s3{left:37%;bottom:22%;rotate:5deg;animation-delay:-3s;background:var(--h2);color:var(--h2i)}.ld-regs .s4{left:33%;top:13%;rotate:-5deg;animation-delay:-4s;background:var(--h3);color:var(--h3i)}.ld-regs .s5{display:none}
.ld-met .ld-sticker{border-color:var(--met-fg);box-shadow:3px 3px 0 var(--met-fg);background:var(--met-panel);color:var(--met-fg)}
.ld-met .s0{right:5%;top:6%;rotate:5deg}.ld-met .s1{right:22%;top:4%;rotate:-4deg;animation-delay:-1.4s}.ld-met .s2{right:40%;top:30%;rotate:-6deg;animation-delay:-2.2s}
.ld-met .s3{right:43%;bottom:18%;rotate:4deg;animation-delay:-3.3s}.ld-met .s4{right:36%;bottom:6%;rotate:-3deg;animation-delay:-.6s}.ld-met .s5{display:none}
@keyframes ldBob{50%{translate:0 -7px}}
/* the turning Earth rises behind the sky side */
.ld-earth{position:absolute;z-index:0;right:-210px;bottom:-410px;width:600px;height:600px;pointer-events:none;opacity:.92;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 71%)}
.ld-earth .ix-globe{width:100%;height:100%;max-width:none;margin:0;border:0;box-shadow:0 0 120px var(--met-glow)}
/* one flight path across both worlds */
.ld-path{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.ld-trail{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-dasharray:2 9;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.ld-plane{color:var(--ink)}
.ld-plane path,.ld-plane *{vector-effect:non-scaling-stroke}

/* one search over both subjects */
.ld-find{max-width:760px;margin:clamp(26px,4vw,44px) auto 0;display:flex;flex-direction:column;gap:10px}
.ld-search{width:100%;font:500 17px var(--font);padding:16px 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--panel);color:var(--ink);box-shadow:var(--pop);outline:none}
.ld-search:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ld-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ld-results:empty{display:none}
.ld-hit{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;text-decoration:none;background:var(--panel);border:1px solid var(--line);transition:transform .15s}
.ld-hit:hover{transform:translateX(3px);border-color:var(--ink)}
.ld-hit b{flex:1;min-width:0;font-weight:600}
.ld-hit i{font-style:normal;color:var(--muted)}
.ld-tag{flex:none;font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--exam-bg);color:var(--exam-fg)}
.ld-hit-met .ld-tag{background:var(--met-bg);color:var(--met-fg)}
.ld-none{color:var(--muted);font-size:14px;padding:6px 4px}
/* the prices, in one quiet line */
.ld-prices{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;margin:clamp(26px,4vw,40px) auto 0;padding:14px 18px;max-width:900px}
.ld-prices a{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;font-size:14px;color:var(--muted);border-bottom:1.5px dotted var(--wire);padding-bottom:2px}
.ld-prices a b{color:var(--ink);font-weight:700}
.ld-prices a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.ld-prices .ld-both b{background:linear-gradient(90deg,var(--exam-gold),var(--met-sky));-webkit-background-clip:text;background-clip:text;color:transparent}

/* phones: the seam turns horizontal, regs above, the sky below */
@media (max-width:760px){
  .ld-stage{height:auto;display:flex;flex-direction:column}
  .ld-side{position:relative;inset:auto;min-height:360px}
  .ld-regs{clip-path:polygon(0 0,100% 0,100% 88%,0 100%);padding-bottom:30px}
  .ld-met{margin-top:-46px;padding-top:40px;justify-content:flex-start}
  .ld-met .ld-copy{align-items:flex-start;text-align:left}
  .ld-met .ld-facts{justify-content:flex-start}
  .ld-copy{max-width:none;padding:34px 22px 30px;margin-top:auto;margin-bottom:0}
  .ld-seam{display:none}
  .ld-regs .s0{left:auto;right:8%;top:8%}.ld-regs .s1{left:auto;right:30%;top:4%}.ld-regs .s2,.ld-regs .s3,.ld-regs .s4,.ld-regs .s5{display:none}
  .ld-met .s0{right:6%;top:14%}.ld-met .s1{right:30%;top:9%}.ld-met .s2,.ld-met .s3,.ld-met .s4,.ld-met .s5{display:none}
  .ld-earth{right:-150px;top:30px;bottom:auto;width:330px;height:330px;opacity:.55}
  .ld-path{display:none}
  .ld-prices{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (prefers-reduced-motion:reduce){.ld-sticker,.ld-met::before{animation:none}.ld-stage{transition:none}}


/* ================= Pricing: one price board ================= */
.pricing .legal-main{max-width:1000px}
.pb-kicker{font:700 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:8px 0 6px}
.pb-title{font-family:var(--head);font-weight:800;font-size:clamp(34px,5.4vw,58px);line-height:.98;letter-spacing:-.04em;margin:0 0 12px;text-wrap:balance}
.pb-title span{color:var(--muted)}
.pb-scroll{overflow-x:auto;margin:22px -4px 0;padding:4px}
.pb-board{width:100%;border-collapse:separate;border-spacing:0 10px;min-width:560px}
.pb-board thead th{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 14px 2px}
.pb-board thead th:first-child{width:44%}
.pb-row th,.pb-row td{background:var(--panel);border-block:1.5px solid var(--line);padding:0;vertical-align:middle}
.pb-row th{border-left:1.5px solid var(--line);border-radius:18px 0 0 18px;padding:16px 18px;text-align:left;position:relative}
.pb-row td:last-child{border-right:1.5px solid var(--line);border-radius:0 18px 18px 0}
.pb-dot{position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--h1i)}
.pb-name{display:block;font-family:var(--head);font-weight:800;font-size:19px;line-height:1.2;letter-spacing:-.01em}
.pb-name em{font-style:normal}
.pb-sub{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.pb-buy{display:flex;flex-direction:column;gap:1px;padding:14px 16px;margin:6px;border-radius:14px;text-decoration:none;color:var(--ink);border:1.5px solid transparent;transition:background .2s,border-color .2s,transform .2s}
.pb-buy b{font-family:var(--head);font-weight:800;font-size:28px;line-height:1.05;letter-spacing:-.02em}
.pb-buy span{font-size:12.5px;color:var(--muted)}
.pb-buy i{font-style:normal;font-size:12.5px;font-weight:700;margin-top:6px;opacity:.0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.pb-buy:hover,.pb-buy:focus-visible{background:var(--wash);border-color:var(--ink)}
.pb-buy:hover i,.pb-buy:focus-visible i{opacity:1;transform:none}
@media (hover:none){.pb-buy i{opacity:1;transform:none}}
.pb-exam .pb-dot{background:var(--exam-gold)}
.pb-exam .pb-name em{color:var(--exam-fg)}
.pb-exam th,.pb-exam td{background:var(--exam-bg);border-color:var(--exam-line)}
.pb-exam th{border-left-color:var(--exam-line)}.pb-exam td:last-child{border-right-color:var(--exam-line)}
.pb-met .pb-dot{background:var(--met-sky)}
.pb-met .pb-name em{color:var(--met-fg)}
.pb-met th,.pb-met td{background:var(--met-bg);border-color:var(--met-line)}
.pb-met th{border-left-color:var(--met-line)}.pb-met td:last-child{border-right-color:var(--met-line)}
.pb-met .pb-sub,.pb-met .pb-buy span{color:var(--met-dim)}
.pb-both th,.pb-both td{border-color:var(--ink);border-width:2px}
.pb-both th{border-left-width:2px}.pb-both td:last-child{border-right-width:2px}
.pb-both .pb-dot{width:6px;background:linear-gradient(var(--exam-gold),var(--met-sky))}
.pb-both .pb-name em{background:linear-gradient(90deg,var(--exam-gold),var(--met-sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-both{filter:drop-shadow(4px 4px 0 var(--ink))}
.pb-save{display:inline-block;margin-top:8px;font:700 11.5px var(--mono);letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:var(--ink);color:var(--paper)}
.pb-foot{font-size:13.5px;color:var(--muted);margin:2px 4px 0}
.pb-guide{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.pb-guide li{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;border:1.5px dashed var(--wire)}
.pb-guide span{font-size:14.5px;line-height:1.4;color:var(--muted)}
.pb-guide b{font-size:15px}
.pb-guide .pg-met b{color:var(--met-sky)}.pb-guide .pg-regs b{color:var(--ink)}
.pb-guide .pg-both b{background:linear-gradient(90deg,var(--exam-gold),var(--met-sky));-webkit-background-clip:text;background-clip:text;color:transparent}
/* pricing: subject → level → duration */
.pp-steps{list-style:none;padding:0;margin:22px 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.pp-steps li{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);font-size:14px;font-weight:600}
.pp-steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 12.5px var(--mono)}
.pp-subj{margin:22px 0 0;padding:20px;border-radius:22px;border:1.5px solid var(--line);background:var(--panel)}
.pp-head h2{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.02em}
.pp-why{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--muted);max-width:62ch}
.pp-why b{color:var(--ink)}
.pp-levels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.pp-level,.pp-one{display:flex;flex-direction:column;border-radius:18px;padding:16px 18px;border:1.5px solid var(--line);background:var(--paper)}
.pp-one{margin-top:16px}
.pp-tag{margin:0;font:700 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pp-level h3{margin:4px 0 0;font-family:var(--head);font-weight:800;font-size:24px;letter-spacing:-.02em}
.pp-for{margin:8px 0 0;font-size:14.5px;line-height:1.45}
.pp-level ul,.pp-one ul{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:1.5;flex:1}
.pp-level li,.pp-one li{margin:3px 0}
.pp-prices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pp-buy{display:flex;flex-direction:column;gap:1px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--ink);background:var(--panel);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.pp-buy:hover,.pp-buy:focus-visible{box-shadow:var(--pop);transform:translate(-2px,-2px)}
.pp-buy-dur{font:700 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pp-buy b{font-family:var(--head);font-weight:800;font-size:28px;line-height:1.1;letter-spacing:-.02em}
.pp-buy-note{font-size:12.5px;color:var(--muted)}
.pp-buy i{font-style:normal;font-size:13px;font-weight:700;margin-top:6px}
.legal-main a.pp-buy,.legal-main a.pp-buy:visited{color:var(--ink);text-decoration:none}
.pp-exam{background:var(--exam-bg);border-color:var(--exam-line)}
.pp-exam .pp-tag,.pp-exam h3{color:var(--exam-fg)}
.pp-exam .pp-tag{color:var(--exam-dim)}
.pp-exam .pp-buy{background:var(--exam-panel)}
.pp-met{background:linear-gradient(170deg,var(--met-bg),var(--met-panel));border-color:var(--met-line)}
.pp-met .pp-head h2,.pp-met .pp-why b{color:var(--met-fg)}
.pp-met .pp-why{color:var(--met-dim)}
.pp-met .pp-one{background:var(--met-panel);border-color:var(--met-line);color:var(--met-fg)}
.pp-met li::marker{color:var(--met-sky)}
.legal-main .pp-met a.pp-buy{color:var(--met-fg);border-color:var(--met-sky);background:var(--met-bg)}
.pp-met .pp-buy-dur,.pp-met .pp-buy-note{color:var(--met-dim)}
.pp-both{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.pp-both .pp-head h2{background:linear-gradient(90deg,var(--exam-gold),var(--met-sky));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.pp-both .pp-one{border:0;padding:0;background:none}
.pb-guide .pg-exam b{color:var(--exam-gold)}
@media (max-width:720px){.pp-levels{grid-template-columns:1fr}.pp-subj{padding:16px}}
@media (max-width:360px){.pp-prices{grid-template-columns:1fr}}
.pb-inside{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.pb-in{border-radius:20px;padding:18px 20px;border:1.5px solid var(--line);background:var(--panel)}
.pb-in h3{margin:0;font-family:var(--head);font-size:22px}
.pb-in h4{margin:14px 0 4px;font-size:15px}
.pb-in .pb-ex{color:var(--exam-fg)}
.pb-in ul{margin:0;padding-left:20px;font-size:14.5px;line-height:1.5}
.pb-in li{margin:4px 0}
.pb-in-sub{color:var(--muted);font-size:13.5px;margin-top:2px}
.pb-in-met{background:linear-gradient(170deg,var(--met-bg),var(--met-panel));border-color:var(--met-line)}
.pb-in-met h3{color:var(--met-fg)}.pb-in-met ul{color:var(--met-fg)}.pb-in-met li::marker{color:var(--met-sky)}.pb-in-met .pb-in-sub{color:var(--met-dim)}
.pr-table .pr-col-met{background:var(--met-bg);color:var(--met-fg)}
.pr-table th.pr-col-met{border-bottom:2px solid var(--met-sky)}
.pr-table th.pr-col-both{border-bottom:2px solid var(--ink)}
.pb-compare{min-width:640px}
.pb-compare td.y,.pb-compare td.n{width:12%}
.legal-main a.pb-buy,.legal-main a.pb-buy:visited{color:var(--ink);text-decoration:none}
.legal-main .pb-met a.pb-buy{color:var(--met-fg)}
.legal-main .pb-exam a.pb-buy{color:var(--exam-fg)}
@media (max-width:640px){
  .pb-board{min-width:0}
  .pb-board thead th:first-child{width:auto}
  .pb-row th{display:block;border-radius:18px 18px 0 0;border-right:1.5px solid var(--line);padding:14px 16px 6px}
  .pb-exam th{border-right-color:var(--exam-line)}.pb-met th{border-right-color:var(--met-line)}.pb-both th{border-right:2px solid var(--ink)}
  .pb-board,.pb-board tbody,.pb-row{display:block}
  .pb-board thead{display:none}
  .pb-row{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}
  .pb-row th{grid-column:1/-1;border-bottom:0}
  .pb-row td{border-top:0;border-radius:0 0 0 18px;border-left:1.5px solid var(--line)}
  .pb-row td:last-child{border-radius:0 0 18px 0}
  .pb-exam td{border-left-color:var(--exam-line)}.pb-met td{border-left-color:var(--met-line)}.pb-both td{border-left:2px solid var(--ink)}
  .pb-row td:last-child{border-left:0}
  .pb-buy b{font-size:24px}
  .pb-buy span{font-size:11.5px}
  .pb-inside{grid-template-columns:1fr}
}

/* ================= Chapter sidebar: a premium rail ================= */
.toc-head{display:none}
.lock-badge .ico{width:13px;height:13px}
@media (min-width:921px){
  .toc{gap:2px;padding:14px 12px 16px;border-radius:22px;background:var(--panel);border:1.5px solid var(--line);box-shadow:var(--shadow);scrollbar-width:thin}
  .toc-head{display:flex;flex-direction:column;gap:3px;padding:6px 8px 14px;margin-bottom:6px;border-bottom:1px dashed var(--line)}
  .toc-subj{font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
  .toc-ch{font:800 26px/1 var(--head);letter-spacing:-.03em;color:var(--ink);margin-top:4px}
  .toc-title{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--muted);text-wrap:balance}
  .toc-prog{display:flex;flex-direction:column;gap:5px;margin-top:10px}
  .toc-prog-bar{height:5px;border-radius:99px;background:var(--wash);overflow:hidden}
  .toc-prog-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--h1i),var(--accent));transition:width .5s cubic-bezier(.3,.7,.2,1)}
  .toc-prog span{font:600 11px var(--mono);color:var(--faint)}
  /* lessons hang on a thin rail; each has a dot that fills as you read past it */
  .toc-part{position:relative;gap:1px;padding-bottom:4px}
  .toc-part>a{position:relative;padding-left:32px;border-radius:12px;font-size:13.5px}
  .toc-part>a::before{content:'';position:absolute;left:14px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--panel);border:2px solid var(--wire);transition:background .25s,border-color .25s,box-shadow .25s,transform .25s;z-index:1}
  .toc-part>a::after{content:'';position:absolute;left:18px;top:-2px;bottom:-2px;width:1.5px;background:var(--line)}
  .toc-part>a:nth-child(2)::after{top:50%}
  .toc-part>a:last-child::after{bottom:50%}
  .toc-part>a:nth-child(2):last-child::after{display:none}
  .toc-part>a i{font-size:10.5px;min-width:16px}
  .toc-part>a:hover{background:var(--wash);color:var(--ink)}
  .toc-part>a:hover::before{transform:scale(1.2)}
  .toc-part>a.done{color:var(--ink)}
  .toc-part>a.done::before{background:var(--h1i);border-color:var(--h1i)}
  .toc .toc-part>a.on{background:var(--ink);color:var(--paper);box-shadow:var(--pop)}
  .toc .toc-part>a.on::before{background:var(--paper);border-color:var(--paper);box-shadow:0 0 0 4px color-mix(in srgb,var(--paper) 25%,transparent)}
  .toc .toc-part>a.on i{color:inherit;opacity:.75}
  .toc-part>a.locked{color:var(--faint)}
  .toc-part>a.locked::before{border-style:dashed}
  .toc a .lock-badge{margin-left:auto;opacity:.6;display:inline-flex}
  .toc a .chip-free{margin-left:auto;font-size:10px;padding:1px 7px}
  .toc-part-h{padding:14px 8px 6px;font-size:11px;letter-spacing:.08em;color:var(--muted);gap:9px}
  .toc-part-h i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:7px;background:var(--wash);color:var(--ink);font:700 10.5px var(--mono);flex:none}
  .toc-part-name{flex:1;min-width:0;line-height:1.3}
  .toc-part-n{font:600 10.5px var(--mono);color:var(--faint);letter-spacing:0}
  .toc-part-h::after{margin-left:2px}
  .toc>a[href="#minute"]{border-radius:12px;font-weight:600;color:var(--ink);margin-bottom:2px}
  .toc>a[href="#minute"] i{color:var(--exam-gold)}

  /* Exam-Ready keeps its gold; Meteorology gets the sky */
  .toc.track-exam .toc-head{border-bottom-color:var(--exam-line)}
  .toc.track-exam .toc-subj{color:var(--exam-dim)}
  .toc.track-exam .toc-ch{color:var(--exam-fg)}
  .toc.track-exam .toc-prog-bar{background:var(--exam-panel)}
  .toc.track-exam .toc-prog-bar i{background:linear-gradient(90deg,var(--exam-gold),var(--exam-fg))}
  .toc.track-exam .toc-part>a::after{background:var(--exam-line)}
  .toc.track-exam .toc-part>a.done::before{background:var(--exam-gold);border-color:var(--exam-gold)}
  .toc.track-exam .toc-part-h i{background:var(--exam-panel);color:var(--exam-fg)}
  .toc.track-exam .toc-part>a.on{background:var(--exam-fg);color:var(--exam-panel);box-shadow:3px 3px 0 var(--exam-gold)}
  .toc.track-exam .toc-part>a.on::before{background:var(--exam-gold);border-color:var(--exam-panel)}
  .subj-met .toc{background:linear-gradient(175deg,var(--met-bg) 0%,var(--met-panel) 60%);border-color:var(--met-line);color:var(--met-fg)}
  .subj-met .toc-head{border-bottom-color:var(--met-line)}
  .subj-met .toc-subj{color:var(--met-sky)}
  .subj-met .toc-ch{color:var(--met-fg)}
  .subj-met .toc-title,.subj-met .toc a,.subj-met .toc-part-h{color:var(--met-dim)}
  .subj-met .toc-prog-bar{background:color-mix(in srgb,var(--met-line) 60%,transparent)}
  .subj-met .toc-prog-bar i{background:linear-gradient(90deg,var(--met-sky),var(--met-glow))}
  .subj-met .toc-prog span{color:var(--met-dim)}
  .subj-met .toc-part>a::after{background:var(--met-line)}
  .subj-met .toc-part>a::before{background:var(--met-panel);border-color:var(--met-line)}
  .subj-met .toc-part>a.done{color:var(--met-fg)}
  .subj-met .toc-part>a.done::before{background:var(--met-sky);border-color:var(--met-sky)}
  .subj-met .toc-part>a:hover{background:color-mix(in srgb,var(--met-panel) 70%,transparent);color:var(--met-fg)}
  .subj-met .toc .toc-part>a.on{background:var(--met-fg);color:var(--met-panel);box-shadow:3px 3px 0 var(--met-glow)}
  .subj-met .toc .toc-part>a.on i{color:var(--met-panel)}
  .subj-met .toc .toc-part>a.on::before{background:var(--met-glow);border-color:var(--met-panel)}
  .subj-met .toc-part-h i{background:var(--met-panel);color:var(--met-fg);border:1px solid var(--met-line)}
  .subj-met .toc>a[href="#minute"]{color:var(--met-fg)}
  .subj-met .toc>a[href="#minute"] i{color:var(--met-sky)}
  .subj-met .toc a i{color:var(--met-dim)}
}
@media (max-width:920px){
  .subj-met .toc{background:color-mix(in srgb,var(--met-bg) 94%,transparent);border-color:var(--met-line)}
  .subj-met .toc a{border-color:var(--met-line);background:var(--met-panel);color:var(--met-fg)}
  .subj-met .toc a.on{background:var(--met-fg);border-color:var(--met-fg);color:var(--met-panel)}
  .toc a.done:not(.on){border-color:var(--h1i)}
  .subj-met .toc a.done:not(.on){border-color:var(--met-sky)}
  .toc-part-n{display:none}
}
/* the Meteorology hero chip, locked card and buttons in sky blue */
.subj-met .hero .chip{background:var(--met-bg);color:var(--met-fg);border:1px solid var(--met-line)}
.locked-met{background:linear-gradient(170deg,var(--met-bg),var(--met-panel));border:1.5px solid var(--met-line);color:var(--met-fg)}
.locked-met h3{color:var(--met-fg)}
.locked-met .locked-icon-badge{background:var(--met-panel);color:var(--met-sky);border-color:var(--met-line)}
.atlas-btn-met{background:var(--met-fg);color:var(--met-panel);border:1.5px solid var(--met-fg);box-shadow:3px 3px 0 var(--met-glow)}
.atlas-btn-met:hover{transform:translate(-1px,-1px)}

/* payment window: four plans in a 2 x 2 grid */

.sub-tier-from{font:700 11.5px var(--mono);color:var(--muted)}
.sub-step{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font-weight:700;font-size:14.5px}
.sub-step b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 12px var(--mono);flex:none}
.sub-subjects{grid-template-columns:repeat(3,1fr)}
.sub-regs.active{border-color:var(--ink);background:var(--wash);box-shadow:var(--pop)}
.sub-level-box[hidden],.sub-note[hidden]{display:none}
.sub-level-why{margin:-4px 0 8px;font-size:13px;color:var(--muted);line-height:1.4}
.sub-note{margin:2px 0 4px;padding:10px 12px;border-radius:12px;background:var(--wash);font-size:13px;line-height:1.45;color:var(--muted)}
.sub-tier[disabled]{opacity:.5;cursor:not-allowed}
@media (max-width:520px){.sub-subjects{grid-template-columns:1fr}.sub-subjects .sub-tier{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}.sub-subjects .sub-tier-sub{flex-basis:100%}}
.sub-met.active{border-color:var(--met-sky);background:var(--met-bg);color:var(--met-fg);box-shadow:3px 3px 0 var(--met-glow)}
.sub-met.active .sub-tier-sub,.sub-met.active .sub-tier-from{color:var(--met-dim)}
.sub-both{position:relative}
.sub-both .sub-tier-name{background:linear-gradient(90deg,var(--exam-gold),var(--met-sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub-both.active{border-color:var(--ink);background:linear-gradient(135deg,var(--exam-bg),var(--met-bg));box-shadow:var(--pop)}
@media (max-width:480px){.sub-levels{grid-template-columns:1fr}.sub-tier{padding:10px 12px}}

/* account menu: one line per pass */
.auth-menu-plans{display:flex;flex-direction:column;gap:8px}
.auth-menu-plan .pl-subj{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.auth-menu-plan.plan-exam{background:var(--exam-bg);color:var(--exam-fg);border-color:var(--exam-line)}
.auth-menu-plan.plan-met{background:var(--met-bg);color:var(--met-fg);border-color:var(--met-line)}
.auth-menu-plan.plan-both{background:linear-gradient(135deg,var(--exam-bg),var(--met-bg));border-color:var(--ink)}

/* ---------- a card without a picture: a calm text card, sized to its words ---------- */
.subj-met .st-face.st-plain{background:linear-gradient(160deg,color-mix(in srgb,var(--hb) 55%,var(--panel)) 0%,var(--panel) 46%);padding:26px 28px 28px;position:relative;overflow:hidden}
.subj-met .st-plain .st-text{max-width:640px;gap:12px}
.subj-met .st-plain h3{font-size:clamp(22px,3vw,30px);letter-spacing:-.01em}
.subj-met .st-plain p{font-size:17px;line-height:1.65}
.subj-met .st-num{font:700 12px var(--mono);letter-spacing:.14em;color:var(--hi);display:inline-flex;align-items:center;gap:10px}
.subj-met .st-num::after{content:"";width:34px;height:2px;border-radius:2px;background:currentColor;opacity:.45}
.subj-met .st-plain .st-num + .st-kicker{margin-top:-4px}
@media (max-width:520px){.subj-met .st-face.st-plain{padding:20px 18px 22px}.subj-met .st-plain p{font-size:16px}}
/* figure and 3D step panels: the buttons sit right under the words, not at the foot of an empty column */
@media (min-width:1100px) and (min-height:600px){
  .subj-met .fg-side .sp-card,.subj-met .s3-side .sp-card{flex:0 1 auto}
  .subj-met .fg-side .sp,.subj-met .s3-side .sp{flex:0 1 auto;justify-content:flex-start}
}
/* ---------- 3D: labels you can visit (a glowing dot), and the card that tells you about the one you picked ---------- */
.s3-lab.s3-node{pointer-events:auto;cursor:pointer;font:inherit;font-size:12.5px;text-align:left;display:block;padding-left:22px;position:absolute;color:#fff;touch-action:manipulation}
.s3-lab.s3-node:hover{background:rgba(14,17,24,.92)}
.s3-dot{position:absolute;left:7px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#7cc4ff;box-shadow:0 0 0 0 rgba(124,196,255,.7);animation:s3pulse 1.8s ease-out infinite}
.s3-lab.s3-picked{background:#0e3a66;border-color:#7cc4ff}
.s3-lab.s3-picked .s3-dot{background:#fff;animation:none}
@keyframes s3pulse{0%{box-shadow:0 0 0 0 rgba(124,196,255,.75)}70%{box-shadow:0 0 0 10px rgba(124,196,255,0)}100%{box-shadow:0 0 0 0 rgba(124,196,255,0)}}
.s3-used .s3-dot{animation-iteration-count:2}
.s3-info{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;max-width:360px;background:rgba(10,20,34,.88);color:#fff;border:1px solid rgba(124,196,255,.45);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pop .25s both}
.s3-info[hidden]{display:none}
.s3-info b{font-size:15px}.s3-info span{font-size:12.5px;opacity:.85}.s3-info p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.s3-back{align-self:flex-start;margin-top:6px;background:#fff;color:#0e1a2b;border:0;border-radius:99px;padding:6px 12px;font:700 12.5px var(--font);cursor:pointer;min-height:32px}
.s3-has-nodes .s3-hint{background:rgba(14,58,102,.82);opacity:1}
@media (prefers-reduced-motion:reduce){.s3-dot{animation:none}}
/* a wide 3D scene (a whole sky): the model across the card, its steps underneath */
@media (min-width:1100px) and (min-height:600px){
  .subj-met .s3.dsk.s3-wide{grid-template-columns:minmax(0,1fr);gap:14px}
  .subj-met .s3.dsk.s3-wide .s3-view{height:min(var(--sh),62vh)}
  .subj-met .s3.dsk.s3-wide .s3-side{height:auto}
  .subj-met .s3.dsk.s3-wide .s3-side .sp{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:10px 20px;align-items:start}
  .subj-met .s3.dsk.s3-wide .s3-side .sp-dots{grid-column:1/-1}
  .subj-met .s3.dsk.s3-wide .s3-side .st-nav{margin:0;align-self:center;flex-direction:column;gap:8px}
}
@media (max-width:600px){
  .s3-lab{font-size:11px;padding:2px 7px 3px}
  .s3-lab span{display:none}
  .s3-lab.s3-node{font-size:11.5px;padding-left:19px}
  .s3-dot{left:6px;width:8px;height:8px;margin-top:-4px}
  .s3-info{left:8px;right:8px;bottom:8px;padding:10px 12px}
}
@media (max-width:600px){
  .s3-info{gap:2px;padding:9px 11px}
  .s3-info b{font-size:14px}.s3-info p{font-size:12.5px;line-height:1.45;margin-top:2px}
  .s3-back{margin-top:4px;min-height:30px;padding:5px 11px}
}
/* ---------- cues: what to touch, shown once when a lesson comes into view ---------- */
.cue{position:absolute;left:0;top:0;z-index:8;pointer-events:none;width:0;height:0;animation:cueIn .35s ease both}
.cue.cue-out{animation:cueOut .3s ease both}
.cue-ring{position:absolute;left:-23px;top:-23px;width:46px;height:46px;border-radius:50%;border:2.5px solid var(--cue,#2470CC);box-shadow:0 0 0 0 color-mix(in srgb,var(--cue,#2470CC) 45%,transparent);animation:cueRing 1.5s cubic-bezier(.2,.7,.3,1) infinite}
.cue-chip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:7px 13px 7px 10px;border-radius:999px;background:var(--cue-bg,#0E3A66);color:#fff;font:700 13px/1.1 var(--font);letter-spacing:.01em;box-shadow:0 8px 22px rgba(14,58,102,.28),0 0 0 3px color-mix(in srgb,#fff 70%,transparent)}
.cue-chip .ico{width:17px;height:17px;flex:none;animation:cueTap 1.5s ease-in-out infinite;transform-origin:50% 80%}
.cue-target{position:relative;z-index:1;animation:cueGlow 1.5s ease-in-out infinite}
:root{--cue:#2470CC;--cue-bg:#0E3A66}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cue:#7DB8FF;--cue-bg:#1E5A96}}
:root[data-theme="dark"]{--cue:#7DB8FF;--cue-bg:#1E5A96}
@keyframes cueRing{0%{transform:scale(.55);opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--cue) 45%,transparent)}80%{transform:scale(1.15);opacity:0;box-shadow:0 0 0 14px transparent}100%{opacity:0}}
@keyframes cueTap{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(2px) scale(.9)}55%{transform:translateY(0) scale(1)}}
@keyframes cueGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cue) 0%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--cue) 30%,transparent)}}
@keyframes cueIn{from{opacity:0;transform:translateY(6px)}}
@keyframes cueOut{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.cue-ring,.cue-chip .ico,.cue-target{animation:none}}
/* the Play button on step-by-step drawings */
.st-mid{display:flex;align-items:center;gap:10px}
.st-play{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1.5px solid var(--line);color:var(--ink);font-weight:700}
.st-play .ico{width:15px;height:15px}
.subj-met .st-play{border-color:var(--met-line);color:var(--met-fg);background:var(--met-panel)}
.st-play.on{background:var(--met-fg);color:var(--met-panel);border-color:var(--met-fg)}
@media (max-width:420px){.st-play span{display:none}.st-play{padding-inline:11px}}
@media (min-width:1100px) and (min-height:600px){.subj-met :is(.fg-side,.s3-side) .st-mid .st-count{display:none}}
/* coded reports (METAR, TAF, RAREP): one calm surface for every group, the kind shown only by a thin edge */
.subj-met .tf-tok{background:var(--met-panel);border-color:var(--met-line);color:var(--met-fg);border-left-width:3px}
.subj-met .tf-tok small{color:var(--met-dim)}
.subj-met .tf-tok.id,.subj-met .tf-tok.time{border-left-color:#8A9BB0}
.subj-met .tf-tok.wind{border-left-color:var(--met-sky)}
.subj-met .tf-tok.vis,.subj-met .tf-tok.wx{border-left-color:#5FA8A0}
.subj-met .tf-tok.cloud{border-left-color:#9AA8BC}
.subj-met .tf-tok.chg{border-left-color:#D9A441}
.subj-met .tf-tok.on{background:var(--met-fg);color:var(--met-panel);border-color:var(--met-fg);box-shadow:3px 3px 0 var(--met-glow)}
.subj-met .tf-tok.on small{color:inherit;opacity:.8}
.subj-met .toc>a.on,.subj-met .toc>a[href="#minute"].on{background:var(--met-fg);color:var(--met-panel)}
.subj-met .toc>a.on i{color:var(--met-glow)}

/* ---------- side-by-side table: Exam-Ready and Meteorology stand out, Both subjects wins ---------- */
.pb-compare{border-collapse:separate;border-spacing:0}
.pb-compare thead th{vertical-align:bottom;padding:14px 12px 12px;line-height:1.25}
.pb-compare .cmp-name{display:block;font:800 15px/1.2 var(--head);margin-bottom:6px}
.pb-compare .cmp-price{display:block;font:600 12.5px var(--font)}.pb-compare .cmp-price b{font:800 22px/1 var(--head)}
.pb-compare .cmp-month{display:block;font:600 11.5px var(--font);opacity:.7;margin-top:2px}
.pb-compare .cmp-tag{display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:999px;font:800 10.5px var(--font);letter-spacing:.04em;white-space:nowrap}
.pb-compare .pr-col-free,.pb-compare .pr-col-core{color:var(--muted)}
.pb-compare thead .pr-col-free .cmp-price b,.pb-compare thead .pr-col-core .cmp-price b{font-size:18px}
.pb-compare td.y i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:12px;font-style:normal;font-size:13px;font-weight:900;background:var(--wash);color:var(--ink)}
.pb-compare td.pr-col-free.y i,.pb-compare td.pr-col-core.y i{background:none;color:var(--muted)}
.pb-compare .pr-col-exam .cmp-tag{background:var(--exam-gold);color:#fff}
.pb-compare td.pr-col-exam.y i{background:var(--exam-gold);color:#fff}
.pb-compare .pr-col-met .cmp-tag{background:var(--met-sky);color:#fff}
.pb-compare td.pr-col-met.y i{background:var(--met-sky);color:#fff}
.pb-compare th.pr-col-both{background:#16181D!important;color:#FFFFFF;border:2.5px solid var(--ink);border-bottom:0;border-radius:16px 16px 0 0;position:relative}
.pb-compare th.pr-col-both .cmp-tag{background:#FFE07A;color:#16181D}
.pb-compare th.pr-col-both .cmp-price b{font-size:26px;color:#FFE07A}
.pb-compare td.pr-col-both{background:color-mix(in srgb,#FFE07A 22%,var(--panel));border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
.pb-compare td.pr-col-both.y i{background:#16181D;color:#FFE07A;box-shadow:0 0 0 1.5px #FFE07A;width:26px;height:26px;border-radius:13px}
.pb-compare tr.cmp-cta td.pr-col-both{border-bottom:2.5px solid var(--ink);border-radius:0 0 16px 16px;box-shadow:4px 4px 0 var(--ink)}
.pb-compare tr.cmp-cta th,.pb-compare tr.cmp-cta td{padding-top:14px;padding-bottom:14px;text-align:center}
.pb-compare tr.cmp-cta th{text-align:left}
.pb-compare .cmp-go{display:inline-block;padding:8px 12px;border-radius:12px;font:800 13px var(--head);text-decoration:none;white-space:nowrap;border:1.5px solid var(--line);color:var(--muted)}
.pb-compare .pr-col-exam .cmp-go{border:2px solid var(--exam-gold);color:var(--exam-fg);background:var(--exam-tint)}
.pb-compare .pr-col-met .cmp-go{border:2px solid var(--met-sky);color:var(--met-fg);background:var(--met-bg)}
.pb-compare .pr-col-both .cmp-go{background:#FFE07A;color:#16181D;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:10px 14px;font-size:14px}
.pb-compare .cmp-go:hover{transform:translate(-1px,-1px)}
.cmp-note{font-size:13.5px;color:var(--muted);margin-top:10px}
/* phones: the three plans worth comparing fit without sideways scrolling; Free and Core are in the cards above */
@media (max-width:640px){
  .pb-compare .pr-col-free,.pb-compare .pr-col-core{display:none}
  .legal-main .pb-compare th,.legal-main .pb-compare td{padding:9px 6px}
  .pb-compare thead th{padding:10px 6px}
  .legal-main .pb-compare,.pb-compare{table-layout:fixed;width:100%;min-width:0}
  .pb-compare thead th:first-child,.pb-compare tbody th{width:28%}
  .pb-compare td.y,.pb-compare td.n,.pb-compare thead th:not(:first-child){width:24%}
  .pb-compare th,.pb-compare td{white-space:normal!important;overflow-wrap:break-word;hyphens:manual}
  .pb-compare .cmp-name{font-size:11.5px;letter-spacing:-.02em}
  .pb-compare thead th:not(:first-child){padding-left:5px;padding-right:5px}
  .pb-compare tbody th{font-size:12px;line-height:1.3}
  .pb-compare .cmp-name{font-size:13px}.pb-compare .cmp-price{font-size:10.5px}.pb-compare .cmp-price b{font-size:17px}
  .pb-compare th.pr-col-both .cmp-price b{font-size:19px}
  .pb-compare .cmp-month{font-size:10px}
  .pb-compare .cmp-tag{white-space:normal;font-size:9.5px;padding:2px 6px;margin-bottom:6px}
  .pb-compare .cmp-go{padding:7px 8px;font-size:12px;white-space:normal}
  .pb-compare .pr-col-both .cmp-go{padding:8px;font-size:12.5px}
  .pb-compare tr.cmp-cta th{font-size:12px}
}

/* ---------- static text inside #app (build.py / tools/prerender.py) ----------
   For search engines and readers without JavaScript. atlas.js replaces it as it draws, so on a normal load it is
   never seen; it fades in only if the page has not drawn after a few seconds (slow network, scripts blocked). */
.prerender{max-width:760px;margin:0 auto;overflow-wrap:anywhere;padding:32px 16px 64px;line-height:1.6;color:var(--ink);opacity:0;animation:prerender-in .3s ease 3s forwards}
.prerender h1{font-size:2rem;line-height:1.15;margin:.4em 0}
.prerender h2{font-size:1.25rem;margin:1.6em 0 .4em}
.prerender a{color:inherit}
.prerender table{border-collapse:collapse;width:100%;font-size:.95em}
.prerender th,.prerender td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.prerender nav{margin:1em 0;color:var(--muted)}
@keyframes prerender-in{to{opacity:1}}

/* ================= Study log on the site: lesson ticks, icon-only theme button ================= */
.pill.pill-icon{width:38px;padding:0;justify-content:center}
.toc-tick{display:none;margin-left:auto;color:var(--h1i);font-weight:800}
.toc a.logged .toc-tick{display:inline}
.toc a.on .toc-tick{color:var(--paper)}
.toc a.logged .chip-free{display:none}
@media (min-width:921px){.toc-part>a.logged::before{background:var(--h1i);border-color:var(--h1i)}}
@media (max-width:440px){.pill.pill-icon{width:36px}}

/* subject index: your progress on each chapter card, a lock sticker that opens checkout */
.card-wrap{position:relative;display:grid;min-width:0}
.card-stk{position:absolute;top:-10px;right:-8px;z-index:2;width:32px;height:32px;padding:0;border-radius:11px;display:grid;place-items:center;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);transform:rotate(8deg);transition:transform .2s}
.card-stk .ico{width:16px;height:16px;stroke-width:2.4}
.card-stk.lock{background:var(--h4);color:var(--h4i);cursor:pointer;touch-action:manipulation}
.card-stk.done{background:var(--h1);color:var(--h1i);pointer-events:none}
.card-wrap:hover .card-stk{transform:translate(-2px,-3px) rotate(8deg)}
.card-wrap .card-stk.lock:hover,.card-wrap .card-stk.lock:focus-visible{transform:translate(-2px,-3px) rotate(-8deg) scale(1.12)}
.cf-go{position:relative}
.cf-go svg{position:absolute;inset:0;width:100%;height:100%}
.cf-ring{fill:none;stroke:var(--h1i);stroke-width:3;stroke-linecap:round}
.cf-go b{position:relative;font-weight:700}
.cf-go.done{background:var(--h1);color:var(--h1i)}
.card:hover .cf-go.done{background:var(--h1);color:var(--h1i);transform:none}
.cf-prog{display:inline-flex;align-items:center;gap:6px;color:var(--h1i);white-space:nowrap}
.cf-prog::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--h1i)}

/* chapter page: a lesson you have read wears a check */
.chip-done{display:none;align-items:center;gap:3px;background:var(--h1);color:var(--h1i);font:700 11px var(--font);padding:2px 8px 2px 6px;border-radius:999px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.chip-done .ico{width:12px;height:12px;stroke-width:3}
.lesson.logged .chip-done{display:inline-flex}
.lesson.logged .lh h2 .chip-free{display:none}
.lesson.logged .lh .badge{position:relative}
.lesson.logged .lh .badge::after{content:'✓';position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;border-radius:50%;background:var(--h1i);color:var(--panel);font:800 12px/20px var(--font);text-align:center;border:2px solid var(--paper)}
.lesson.just .chip-done,.lesson.just .lh .badge::after{animation:logpop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes logpop{0%{transform:scale(0)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.lesson.just .chip-done,.lesson.just .lh .badge::after{animation:none}}

/* ================= The study plan: the logo's 70 in glass, filled by your own study ================= */
.p70{display:block;width:min(100%,440px);height:auto;overflow:visible}
.p70-pop{fill:var(--ink)}
.p70-glass{fill:var(--panel);fill-opacity:.94}
.p70-line{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linejoin:round}
.p70-liq{opacity:.95}
.d0 .p70-liq{fill:var(--h2i)}.d1 .p70-liq{fill:var(--h0i)}
.p70-shine{opacity:.55}
.p70-mark{stroke:var(--ink);stroke-width:3.2;stroke-dasharray:8 7;stroke-linecap:round}
.p70.mini .p70-line{stroke-width:11}
.p70.mini .p70-pop{display:none}

.pl-page .site-foot{margin-top:64px}
.pl{max-width:600px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.pl-kicker{font:700 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.pl-stage{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:4px}
.pl-legend{display:flex;gap:clamp(24px,8vw,64px);justify-content:center;flex-wrap:wrap}
.pl-dl{display:flex;align-items:baseline;gap:7px;text-decoration:none;color:var(--muted);font-size:13.5px;font-weight:600}
.pl-dl b{font:800 24px var(--head);letter-spacing:-.02em}
.pl-dl.d0 b{color:var(--h2i)}.pl-dl.d1 b{color:var(--h0i)}
.pl-dl:hover span{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pl-key{display:flex;align-items:center;gap:8px;font:600 11.5px var(--mono);color:var(--faint)}
.pl-key i{width:24px;border-top:2.5px dashed var(--ink)}
.pl-verdict{font:800 clamp(28px,5.4vw,44px)/1.1 var(--head);letter-spacing:-.025em;margin:18px 0 0;text-wrap:balance}
.pl-verdict b{background:linear-gradient(transparent 60%,var(--h4) 60%,var(--h4) 92%,transparent 92%);padding:0 2px}
.pl-when{font-size:14.5px;color:var(--muted)}
.pl-link{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--wire);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.pl-today{width:100%;text-align:left;margin-top:22px;padding:18px 18px 16px;border-radius:26px;border:1.5px solid var(--ink);box-shadow:var(--pop);background:var(--panel);background:color-mix(in srgb,var(--panel) 74%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.pl-today-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 6px}
.pl-today-h span{font:700 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.pl-today-h b{font:800 20px var(--head)}
.pl-today ol{list-style:none;margin:0;padding:0}
.pl-sit{margin:2px 0 6px}
.pl-sit-bar{display:flex;gap:3px;height:12px;padding:0 4px}
.pl-sit-bar button{min-width:0;border:1.5px solid var(--ink);border-radius:6px;background:transparent;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.pl-sit-bar button:hover{background:var(--line)}
.pl-sit-bar.dense{gap:1px}.pl-sit-bar.dense button{border-width:1px;border-radius:2px}
.pl-sit-bar button.on{background:var(--h2);transform:scaleY(1.25)}
.pl-sit-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0 2px}
.pl-sit-nav b{display:flex;flex-direction:column;align-items:center;font:800 15px var(--head);outline:0}
.pl-sit-nav b span{font:500 12px var(--mono);color:var(--muted)}
.pl-sit-arr{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--panel);color:var(--ink);font:700 18px/1 var(--head);cursor:pointer}
.pl-sit-arr:disabled{opacity:.3;cursor:default}
.pl-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px dashed var(--line);text-decoration:none;color:var(--ink);min-height:56px}
.pl-row>i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--mono);font-style:normal;background:var(--h2);color:var(--h2i)}
.pl-row.d1>i{background:var(--h0);color:var(--h0i)}
.pl-row-t{flex:1;min-width:0;font-weight:700;line-height:1.3;display:flex;flex-direction:column}
.pl-row-t small{font-weight:500;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-row em{font:600 12.5px var(--mono);font-style:normal;color:var(--muted);white-space:nowrap}
.pl-row>.ico{color:var(--warn)}
.pl-row:hover .pl-row-t{text-decoration:underline;text-underline-offset:3px}
.pl-start{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px;min-height:52px;border-radius:16px;background:var(--ink);color:var(--paper);font:800 17px var(--head);text-decoration:none;transition:transform .15s}
.pl-start:hover{transform:translateY(-1px)}
.pl-go{display:flex;gap:10px;margin-top:12px}.pl-go .pl-start{flex:1;margin-top:0}
.pl-next{flex:none;display:flex;align-items:center;gap:6px;min-height:52px;padding:0 20px;border-radius:16px;border:1.5px solid var(--ink);background:var(--panel);color:var(--ink);font:800 16px var(--head);cursor:pointer}
.pl-next i{font-style:normal}
.pl-today ol{touch-action:pan-y}
.pl-pitch{width:100%;display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 18px;text-align:left;border-radius:22px;border:1.5px solid var(--ink);box-shadow:var(--pop);background:var(--h1);color:var(--h1i);font:500 15px/1.45 var(--font);cursor:pointer;transition:transform .15s}
.pl-pitch:hover{transform:translateY(-1px)}
.pl-pitch .ico{flex:none;width:22px;height:22px}
.pl-pitch span{flex:1;min-width:0}
.pl-pitch em{display:block;margin-top:6px;font:800 14px var(--head);font-style:normal;text-decoration:underline;text-underline-offset:3px}
.pl-pitch>i{font-style:normal;font-weight:800;font-size:18px}
.pl-unlock{margin:12px auto 0;font-size:13.5px;display:flex}
.pl-quiet{color:var(--muted);padding:8px 4px}
.pl-notes{list-style:none;margin:6px 0 0;padding:0;width:100%;text-align:left}
.pl-notes li{display:flex;gap:12px;align-items:center;padding:11px 6px;font-size:14.5px;color:var(--muted);border-bottom:1px dashed var(--line)}
.pl-notes li:last-child{border-bottom:0}
.pl-notes .ico{color:var(--ink);width:18px;height:18px}
.pl-notes a{color:inherit;text-decoration:none}.pl-notes a:hover{color:var(--ink)}
.pl-notes b{color:var(--ink)}
.pl-dates{width:100%;text-align:left;margin-top:16px}
.pl-dates summary{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;list-style:none;border:1.5px solid var(--ink);border-radius:20px;background:var(--panel);box-shadow:var(--pop);transition:transform .15s}
.pl-dates summary:hover{transform:translateY(-1px)}
.pl-dates summary::-webkit-details-marker{display:none}
.pl-dates summary>.ico{flex:none;width:24px;height:24px}
.pl-dates-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pl-dates-t b{font:800 16px var(--head)}
.pl-dates-t small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-dates-btn{flex:none;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--paper);font:800 14px var(--head);font-style:normal}
.pl-dates-btn i{width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.pl-dates[open] .pl-dates-btn i{transform:translateY(2px) rotate(-135deg)}
.pl-dates-hint{margin:12px 6px 0;font-size:13px;color:var(--muted)}
.pl-date{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:10px 6px}
.pl-date b{grid-column:1/-1;font-size:14px}
.pl-date select,.pl-date input{font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;min-height:42px;min-width:0;width:100%}
@media (max-width:420px){.pl-date{grid-template-columns:1fr}}
.pl-own{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:10px}
.pl-own .ico{width:16px;height:16px}

/* the co-pilot: a glass tile with your next step that follows you round the site */
.pilot{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:2px;padding:6px;max-width:calc(100vw - 32px);border-radius:22px;border:1.5px solid var(--ink);box-shadow:var(--pop);background:var(--panel);background:color-mix(in srgb,var(--panel) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.pilot-70{flex:none;display:grid;place-items:center;width:50px;height:44px;border-radius:16px;text-decoration:none;transition:background .2s}
.pilot-70:hover{background:var(--wash)}
.pilot-70 .p70{width:46px}
.pilot-go{display:flex;flex-direction:column;min-width:0;max-width:270px;padding:1px 12px 1px 6px;text-decoration:none;color:var(--ink);line-height:1.25;overflow:hidden;transition:max-width .35s cubic-bezier(.3,.7,.2,1),opacity .25s,padding .35s}
.pilot-k{display:flex;align-items:center;gap:4px;font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pilot-k .ico{width:12px;height:12px;stroke-width:3}
.pilot-go b{display:flex;align-items:center;gap:5px;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pilot-go b .ico{width:13px;height:13px;color:var(--warn);flex:none}
.pilot-m{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pilot-go.logged .pilot-k{color:var(--h1i)}
.pilot.mini .pilot-go{max-width:0;opacity:0;padding:0}
.pilot.pop{animation:pilotpop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes pilotpop{0%{transform:scale(.85)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pilot.pop{animation:none}.pilot-go{transition:none}}
@media print{.pilot{display:none}}

/* ================= What's new: the weekly release tour ================= */
.wn-new{display:inline-flex;align-items:center;font:800 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--h4);color:var(--h4i);border:1.5px solid var(--ink);transform:rotate(-4deg)}
.auth-menu-plan-link{justify-content:flex-start;gap:8px}.auth-menu-plan-link .wn-new{margin-left:auto}
.foot-news{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--h4i)}
.atlas-modal.wn{max-width:440px;text-align:center;padding-top:22px}
.wn-kicker{display:flex;justify-content:center;align-items:center;gap:8px;font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.wn-stage{height:210px;border-radius:20px;border:1.5px solid var(--line);background:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:16px 16px;display:grid;place-items:center;overflow:hidden;padding:14px;animation:wnIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes wnIn{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.wn-stage>.p70{width:min(100%,250px)}
.wn-stage img{max-width:100%;max-height:100%;border-radius:12px}
.wn-dots{display:flex;justify-content:center;gap:6px;margin:14px 0 4px}
.wn-dots i{width:7px;height:7px;border-radius:99px;background:var(--line);transition:width .25s,background .25s}
.wn-dots i.was{background:var(--wire)}.wn-dots i.on{width:22px;background:var(--ink)}
.atlas-modal.wn h3{font:800 23px/1.15 var(--head);letter-spacing:-.02em;margin:10px 0 6px;text-wrap:balance}
.wn-text{color:var(--muted);font-size:15px;line-height:1.5;max-width:340px;margin:0 auto;text-wrap:pretty;min-height:4.5em}
.wn-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.wn-actions .atlas-btn{flex:1}
.wn-actions .wn-next{flex:1.6}
/* visual: a lesson being read, then ticked */
.wn-lesson{width:100%;max-width:330px;text-align:left;display:flex;flex-direction:column;gap:10px}
.wn-lh{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--panel);border:1.5px solid var(--line)}
.wn-lh .badge{position:relative;width:42px;height:42px}
.wn-lh b{font:800 15px/1.25 var(--head);display:block;margin-bottom:4px}
.wn-lh .chip-done{display:inline-flex;margin:0;opacity:0;animation:wnPop .5s 1.9s cubic-bezier(.3,1.6,.5,1) forwards}
.wn-tick{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;border-radius:50%;background:var(--h1i);color:var(--panel);font:800 12px/20px var(--font);font-style:normal;text-align:center;border:2px solid var(--paper);transform:scale(0);animation:wnPop .5s 1.8s cubic-bezier(.3,1.6,.5,1) forwards}
.wn-read{height:6px;border-radius:9px;background:var(--wash);overflow:hidden}
.wn-read i{display:block;height:100%;width:0;background:var(--h1i);border-radius:9px;animation:wnFill 1.7s .1s cubic-bezier(.4,.1,.3,1) forwards}
.wn-cap{font:600 11px var(--mono);color:var(--faint);text-align:center;animation:wnCap 2s forwards}
@keyframes wnFill{to{width:100%}}
@keyframes wnPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes wnCap{0%,85%{opacity:1}100%{opacity:0}}
/* visual: the co-pilot tile, folding and opening */
.wn-pilotbox{position:relative;width:100%;height:100%;display:grid;place-items:center}
.pilot.wn-pilot{position:static;max-width:100%}
.wn-pilot .pilot-go{animation:wnFold 4s 1.2s infinite}
@keyframes wnFold{0%,35%{max-width:270px;opacity:1}45%,75%{max-width:0;opacity:0;padding:0}85%,100%{max-width:270px;opacity:1}}
/* visual: today's plan */
.wn-plan{width:100%;max-width:330px;text-align:left;padding:10px 12px;border-radius:18px;background:var(--panel);border:1.5px solid var(--ink);box-shadow:var(--pop)}
.wn-plan .pl-row{min-height:0;padding:7px 2px}
.wn-plan .pl-row>i{width:22px;height:22px;font-size:11px}
.wn-plan .pl-row-t{font-size:13.5px}
.wn-exam{display:flex;align-items:center;gap:5px;justify-content:center;font-size:12.5px;color:var(--muted);padding-top:6px;border-top:1px dashed var(--line)}
.wn-exam .ico{width:14px;height:14px}.wn-exam b{color:var(--ink)}
/* visual: the menu under your name */
.wn-menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:100%;max-width:260px}
.wn-who{pointer-events:none}
.wn-drop{width:100%;display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:16px;background:var(--panel);border:1.5px solid var(--ink);box-shadow:var(--pop);text-align:left}
.wn-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);background:var(--wash)}
.wn-item.on{background:var(--h4);color:var(--ink);outline:2px solid var(--ink);animation:wnPulse 1.6s .4s infinite}
.wn-item .wn-new{margin-left:auto}
@keyframes wnPulse{0%,100%{transform:none}50%{transform:scale(1.03)}}
/* visual: the same plan on laptop and phone */
.wn-devs{display:flex;align-items:center;gap:14px}
.wn-dev{display:grid;place-items:center;background:var(--panel);border:2px solid var(--ink);box-shadow:var(--pop)}
.wn-dev.laptop{width:150px;height:96px;border-radius:10px 10px 4px 4px}
.wn-dev.phone{width:62px;height:112px;border-radius:14px}
.wn-dev .p70{width:70%}
.wn-dev.phone .p70{width:80%}
.wn-sync{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--h1);color:var(--h1i);animation:wnSpin 3s linear infinite}
@keyframes wnSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wn-stage,.wn-pilot .pilot-go,.wn-item.on,.wn-sync{animation:none}.wn-lh .chip-done,.wn-tick{animation:none;opacity:1;transform:none}.wn-read i{animation:none;width:100%}.wn-cap{display:none}}