/* learn.css · diastra.app/learn (2026-10-04). One column of text at reading width, the contents list beside it on a
   laptop, a card for the reader's own bands.
   ⚑ THE GUIDES READ BLACK ON WHITE (owner, 2026-10-04: "for the articles and stuff, let's just make it white. Let's
   respect the user's dark mode ... but the default is white"). The light look is the welcome email's morning light:
   a white page under a cyan and violet wash, ink #0A0E15, body #2F4351. A reader whose device is set to dark gets the
   site's black look. The home page stays black. Two pieces stay dark in both: the bands card and the trial block,
   because they are the app's own screens on the page (like the app pictures in the email). */
:root{color-scheme:light dark;
  --bg:#FFFFFF;--surface:#F4F9FC;--surface-2:#EAF3F8;--border:#D3E6F0;--hair:#E0ECF2;--text:#22313D;--bright:#0A0E15;
  --dim:#2F4351;--mute:#4A5D6B;--slate:#B8C9D4;--glow:#08789A;--violet:#6E5CD0;--easy:#1F6F80;--thr:#0B6E8C;--vo2:#157A99;
  --gray:#B26A12;--font:-apple-system,"SF Pro Text","SF Pro","Helvetica Neue",Inter,system-ui,sans-serif;--g:24px;--nav-h:64px;
  --link-line:#4E9CB6;--page-wash:radial-gradient(110% 85% at 8% 0%,#9FE0F1 0%,rgba(159,224,241,0) 58%),radial-gradient(90% 75% at 96% 0%,#CBC3F4 0%,rgba(203,195,244,0) 58%),linear-gradient(180deg,#EAF7FC,#FFFFFF);
  --nav-bg:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.80));--nav-line:rgba(160,190,206,.45);
  --plate:linear-gradient(180deg,#F7FCFE,#FFFFFF);--plate-shadow:0 22px 44px -32px rgba(20,60,90,.35);
  --card:linear-gradient(180deg,#FFFFFF,#F5FAFD);--btn-shadow:0 12px 26px -14px rgba(60,40,160,.5);--title-ink:#0A0E15}
@media(prefers-color-scheme:dark){:root{
  --bg:#000;--surface:#0A0E15;--surface-2:#0E141C;--border:#1C2733;--hair:#243140;--text:#E4EDF4;--bright:#F5FAFE;
  --dim:#BFD0DB;--mute:#93A5B3;--slate:#3A4653;--glow:#5BD7F4;--easy:#3F93A6;--thr:#2FBEE2;--vo2:#7CE4F7;--gray:#D99441;
  --page-wash:none;--link-line:#3A4653;--nav-bg:linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.78));--nav-line:rgba(36,49,64,.6);
  --plate:linear-gradient(180deg,#101822,#0A0E15 60%);--plate-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -40px rgba(0,0,0,.9);
  --card:linear-gradient(180deg,#0E151E,#080B10);--btn-shadow:0 12px 28px -14px rgba(0,0,0,.7);--title-ink:#F5FAFE}}
/* the app's own screens on the page keep the black look in both */
.bw,.ask{color-scheme:dark;--bg:#000;--surface:#0A0E15;--surface-2:#0E141C;--border:#1C2733;--hair:#243140;--text:#E4EDF4;--bright:#F5FAFE;
  --dim:#BFD0DB;--mute:#93A5B3;--slate:#3A4653;--glow:#5BD7F4;--easy:#3F93A6;--thr:#2FBEE2;--vo2:#7CE4F7;--gray:#D99441;
  --btn-shadow:0 12px 28px -14px rgba(0,0,0,.7);color:var(--text)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:88px}
body{margin:0;background-color:var(--bg);background-image:var(--page-wash);background-repeat:no-repeat;background-size:100% 640px;color:var(--text);font:18px/1.62 var(--font);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:var(--bright);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--link-line)}
a:hover{text-decoration-color:var(--glow)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--bright);color:#000;padding:8px 12px;border-radius:8px;z-index:60}
.skip:focus{left:8px}

/* the bar along the top */
.ln-nav{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(16px,3vw,44px);background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--nav-line)}
.ln-nav .wm{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--bright);text-decoration:none}
.ln-nav .wm img{width:28px;height:28px;border-radius:7px}
.ln-nav .wm span.sub{color:var(--mute);font-weight:500}
.ln-nav .r{display:flex;align-items:center;gap:18px}
.ln-nav .r a.t{color:var(--dim);text-decoration:none;font-size:15px}
.ln-nav .r a.t:hover{color:var(--bright)}
.btn{--accent:var(--violet);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:14px;
  font:600 17px/1 var(--font);color:#fff;text-decoration:none;letter-spacing:-.005em;border:0;cursor:pointer;box-shadow:var(--btn-shadow)}
.btn.sm{height:40px;padding:0 16px;font-size:15px;border-radius:11px}
.btn{white-space:nowrap}
.btn:hover{filter:brightness(1.06)}
@media(max-width:620px){.ln-nav .r a.t{display:none}.ln-nav .wm span.sub{display:none}.btn.sm{padding:0 14px}}

/* the page */
.ln-wrap{max-width:1180px;margin:0 auto;padding:28px var(--g) 40px}
.crumbs{font-size:14px;color:var(--mute);margin:0 0 22px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--slate)}
.crumbs a{color:var(--mute);text-decoration:none}
.crumbs a:hover{color:var(--bright)}
@media(max-width:640px){.crumbs li[aria-current]{display:none}}
.ln-grid{display:grid;grid-template-columns:minmax(0,720px) 260px;gap:64px;justify-content:center}
@media(max-width:1060px){.ln-grid{grid-template-columns:minmax(0,720px);gap:0}}
.ln-main{min-width:0}
.eyebrow{margin:0 0 12px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--glow)}
.eyebrow a{color:var(--glow);text-decoration:none}
h1.ln-h1{margin:0 0 20px;font-weight:700;letter-spacing:-.028em;line-height:1.04;font-size:clamp(36px,5vw,58px);text-wrap:balance;color:var(--bright)}
h1.ln-h1 .d-text{padding-bottom:.08em;--ink:var(--title-ink)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 26px;font-size:15px;color:var(--mute)}
.byline b{color:var(--dim);font-weight:600}
.byline a{color:var(--dim)}
.byline .dot{color:var(--mute)}

/* the plain answer, a lit plate */
.answer{position:relative;margin:0 0 34px;padding:22px 24px 22px 26px;border-radius:18px;background:var(--plate);
  border:1px solid var(--border);box-shadow:var(--plate-shadow)}
.answer::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--glow)}
.answer .lbl{display:block;margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--glow)}
.answer p{margin:0;font-size:clamp(19px,1.6vw,21px);line-height:1.5;color:var(--bright)}

/* the article body */
.prose h2{margin:56px 0 14px;font-size:clamp(26px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em;font-weight:700;color:var(--bright);scroll-margin-top:84px;text-wrap:balance}
.prose h3{margin:34px 0 10px;font-size:21px;line-height:1.25;letter-spacing:-.01em;font-weight:650;color:var(--bright);scroll-margin-top:84px}
.prose p{margin:0 0 18px;color:var(--text);text-wrap:pretty}
.prose ul,.prose ol{margin:0 0 20px;padding-left:1.25em}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--glow)}
.prose strong{color:var(--bright);font-weight:650}
.prose blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--easy);background:var(--surface);border-radius:0 12px 12px 0;color:var(--bright)}
.prose blockquote p{margin:0}
.prose sup.ref{font-size:.62em;line-height:0;margin-left:1px}
.prose sup.ref a{color:var(--glow);text-decoration:none;font-weight:600}
.tbl{margin:8px 0 26px;overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border);min-width:7em}
.tbl.num th,.tbl.num td{white-space:nowrap;min-width:0}
.tbl sup.ref{font-size:12px}
.tbl-cap{margin:-18px 2px 26px;color:var(--mute);font-size:13.5px}
@media(max-width:640px){.tbl:not(.num){overflow:visible;border:0;background:none}.tbl:not(.num) table,.tbl:not(.num) tbody,.tbl:not(.num) tr,.tbl:not(.num) td{display:block;width:auto}.tbl:not(.num) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tbl:not(.num) tr{margin:0 0 12px;padding:6px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.tbl:not(.num) td{border:0;padding:8px 14px;min-width:0}.tbl:not(.num) td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--mute);margin:0 0 2px}}
.tbl th{color:var(--mute);font-weight:600;font-size:13.5px;letter-spacing:.02em;background:var(--surface-2);position:sticky;top:0}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--bright);font-weight:600}
.tbl caption{caption-side:bottom;text-align:left;padding:10px 14px;color:var(--mute);font-size:13.5px}
.tbl .easy{color:var(--easy)}.tbl .thr{color:var(--thr)}.tbl .vo2{color:var(--vo2)}

/* the contents list beside the text */
.ln-aside{position:relative}
.toc{position:sticky;top:88px;font-size:14.5px;line-height:1.4}
.toc .h{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair)}
.toc li{margin:0}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--mute);text-decoration:none}
.toc a:hover{color:var(--bright)}
.toc a.on{color:var(--bright);border-left-color:var(--glow)}
.toc-m{display:none;margin:0 0 30px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.toc-m summary{cursor:pointer;padding:14px 18px;font-weight:600;color:var(--bright);list-style:none}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"+";float:right;color:var(--mute)}
.toc-m[open] summary::after{content:"−"}
.toc-m ol{margin:0;padding:0 18px 14px 36px}
.toc-m li{margin:0 0 6px}
.toc-m a{color:var(--dim);text-decoration:none}
@media(max-width:1060px){.ln-aside{display:none}.toc-m{display:block}}

/* the reader's own bands */
.bw{margin:30px 0 36px;padding:22px;border-radius:20px;background:linear-gradient(180deg,#0E151E,#070A0F);border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -50px rgba(0,0,0,.95)}
.bw.tool{margin-top:6px;padding:26px}
.bw h2.bw-h,.bw .bw-h{margin:0 0 4px;line-height:1.25;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--bright)}
.bw .bw-sub{margin:0 0 18px;color:var(--mute);font-size:15px}
.bw form{display:grid;grid-template-columns:auto 110px 150px;gap:14px 18px;align-items:end;margin:0 0 20px}
@media(max-width:640px){.bw form{grid-template-columns:1fr 1fr}.bw .seg-f{grid-column:1/-1}}
.bw label,.bw .lab{display:block;margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--mute)}
.bw .seg{display:inline-flex;padding:3px;border-radius:12px;background:#121A24;border:1px solid #56677A}
.bw .seg button{appearance:none;-webkit-appearance:none;margin:0;border:0;background:none;font:600 15px var(--font);cursor:pointer;min-height:44px;padding:0 13px;border-radius:9px;color:var(--dim);white-space:nowrap}
.bw .seg button:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.bw .seg button[aria-pressed="true"]{background:linear-gradient(180deg,#2A3A4A,#1C2733);color:var(--bright);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.bw input{width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid #56677A;background:#0B1118;color:var(--bright);font:600 18px var(--font);font-variant-numeric:tabular-nums}
.bw input::placeholder{color:#738291;font-weight:500}
.bw .err{min-height:20px;margin:-8px 0 8px;font-size:14px;color:var(--gray)}
.bw .work{margin:0 0 16px;font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums}
.bw .work b{color:var(--bright)}
.bw .rows{display:grid;gap:12px}
.bw .row{display:grid;grid-template-columns:118px 1fr 112px;gap:14px;align-items:center}
@media(max-width:640px){.bw .row{grid-template-columns:1fr auto;grid-template-areas:"nm rng" "track track";gap:6px 10px}.bw .row .nm{grid-area:nm}.bw .row .rng{grid-area:rng}.bw .row .track{grid-area:track}}
.bw .hero{margin:0 0 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.bw .hero .k{flex-basis:100%;font-size:13.5px;font-weight:600;color:var(--easy);letter-spacing:.02em}
.bw .hero b{font-size:clamp(40px,7vw,56px);line-height:1;font-weight:700;color:var(--bright);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bw .hero .u{font-size:15px;color:var(--mute)}
.bw.stale .hero,.bw.stale .rows,.bw.stale .gap{opacity:.45;transition:opacity .2s}
.bw .nm{font-weight:650;color:var(--bright);font-size:16px}
.bw .nm small{display:block;font-weight:500;color:var(--mute);font-size:12.5px}
.bw .track{position:relative;height:26px;border-radius:8px;background:#0B1118;border:1px solid #16212C;overflow:hidden}
.bw .track .d-bar{position:absolute;top:3px;bottom:3px;border-radius:5px;transition:left .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1)}
.bw .rng{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--bright);font-size:16px}
.bw .rng small{display:block;font-weight:500;color:var(--mute);font-size:12.5px}
.bw .row.gray .nm,.bw .row.gray .rng{color:var(--mute)}
.bw .row.chart{margin-top:6px;padding-top:14px;border-top:1px dashed var(--hair)}
.bw .row.chart .nm{color:var(--dim);font-weight:600;font-size:14px}
.bw .row.chart .track .d-bar{background:none;border:1.5px dashed var(--mute)}
.bw .gap{margin:16px 0 0;font-size:16px;color:var(--bright)}
.bw .gap b{color:var(--easy)}
.bw .note{margin:12px 0 0;font-size:13.5px;color:var(--mute)}
.bw .cta-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--border)}
.bw .cta-in p{margin:0;flex:1 1 260px;color:var(--dim);font-size:15.5px}

/* sources and questions */
.srcs{margin:56px 0 0;padding:26px 0 0;border-top:1px solid var(--hair)}
.srcs h2{margin:0 0 14px;font-size:22px;color:var(--bright)}
.srcs ol{margin:0;padding-left:1.4em;font-size:15px;line-height:1.5;color:var(--mute)}
.srcs li{margin:0 0 12px;scroll-margin-top:84px}
.srcs li:target{color:var(--bright)}
.srcs a{color:var(--dim);overflow-wrap:anywhere}
.srcs .n{display:block;color:var(--dim)}
.faq{margin:56px 0 0}
.faq h2{margin:0 0 12px;font-size:clamp(24px,2.4vw,30px);color:var(--bright);letter-spacing:-.02em}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-weight:650;font-size:19px;color:var(--bright)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mute);font-weight:400;font-size:26px;line-height:1}
.faq details[open] summary::after{content:"−";color:var(--glow)}
.faq details p{margin:0 0 18px;color:var(--dim)}

/* the author, the series, the next page */
.who{display:flex;gap:16px;align-items:flex-start;margin:48px 0 0;padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.who img{width:48px;height:48px;border-radius:12px;flex:none}
.who p{margin:0;font-size:15px;color:var(--mute)}
.who p b{color:var(--bright)}
.series{margin:40px 0 0;padding:22px;border-radius:16px;border:1px solid var(--border);background:var(--surface)}
.series .h{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--glow)}
.series ol{margin:0;padding-left:1.4em}
.series li{margin:0 0 6px;color:var(--mute)}
.series li a{color:var(--dim);text-decoration:none}
.series li a:hover{color:var(--bright)}
.series li.here{color:var(--bright);font-weight:600}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0}
.pn a{display:block;padding:16px 18px;border-radius:14px;border:1px solid var(--border);background:var(--card);text-decoration:none;color:var(--bright)}
.pn a:hover{border-color:var(--hair)}
.pn small{display:block;color:var(--mute);font-size:13px;margin:0 0 4px}
.pn .nx{text-align:right;grid-column:2}
@media(max-width:640px){.pn{grid-template-columns:1fr}.pn .nx{grid-column:1}}

/* the one ask, after the answer */
.ask{margin:56px 0 0;padding:28px;border-radius:22px;background:radial-gradient(120% 140% at 0% 0%,#14202C 0%,#070A0F 55%);border:1px solid var(--border);
  display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;overflow:hidden}
.ask h2{margin:0 0 10px;font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--bright)}
.ask p{margin:0 0 18px;color:var(--dim);font-size:16.5px}
.ask .fit{margin:12px 0 0;font-size:14px;color:var(--mute)}
.ask img{width:100%;height:auto;border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
@media(max-width:760px){.ask{grid-template-columns:1fr;padding:22px}}

/* hub and index pages */
.hub-intro{max-width:720px;margin:0 0 34px;font-size:19px;color:var(--dim)}
.hub-intro p{margin:0 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:0 0 48px}
.card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--border);text-decoration:none;color:var(--text);min-height:170px}
.card:hover{border-color:var(--hair)}
.card .k{font-size:13px;font-weight:600;color:var(--glow)}
.card .t{font-size:20px;line-height:1.25;font-weight:700;color:var(--bright);letter-spacing:-.01em}
.card .d{font-size:15px;color:var(--mute)}
.sec-h{margin:48px 0 16px;font-size:clamp(24px,2.4vw,30px);color:var(--bright);letter-spacing:-.02em}
.sec-h a{text-decoration:none;color:var(--bright)}

/* the learn links above the site footer */
.ln-links{max-width:1180px;margin:40px auto 0;padding:34px var(--g) 10px;border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
.ln-links .h{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ln-links ul{list-style:none;margin:0;padding:0}
.ln-links li{margin:0 0 7px;font-size:15px}
.ln-links a{color:var(--dim);text-decoration:none}
.ln-links a:hover{color:var(--bright)}
@media(prefers-reduced-motion:reduce){.bw .track .d-bar{transition:none}}
@media(forced-colors:active){.d-text{background:none!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}}