/* Latin Modern Roman and Sans, the LaTeX typefaces (GUST Font License) */
@font-face{font-family:"Latin Modern Sans";src:url("/assets/fonts/lmsans10-regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Latin Modern Sans";src:url("/assets/fonts/lmsans10-oblique.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Latin Modern Sans";src:url("/assets/fonts/lmsans10-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Latin Modern Sans";src:url("/assets/fonts/lmsans10-boldoblique.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Latin Modern Roman";src:url("/assets/fonts/lmroman10-regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Latin Modern Roman";src:url("/assets/fonts/lmroman10-italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Latin Modern Roman";src:url("/assets/fonts/lmroman10-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Latin Modern Roman";src:url("/assets/fonts/lmroman10-bolditalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
/* BetterMath site — one stylesheet for every page. Edit here, then run build.py.
   Sleek and minimal: a pale page, every section a card, two colours only: cobalt, and
   scarlet for the ">" and for corrections. Dark mode swaps the tokens at the end. */
:root{
  --cobalt:#1A47B8; --cobalt-d:#133A99; --cobalt-solid:#1A47B8; --scarlet:#C44545; --on-solid:#fff;
  --scarlet-strong:#C8322F;
  --wash:linear-gradient(180deg,#E4ECFC 0%,#EFF4FE 45%,#E8F0FB 100%);   /* the pastel blue behind the cards */
  --ink:#111317; --ink-2:#2B2F36; --ink-3:#555B66; --ink-4:#7A808B;
  --page:#F5F6F8; --card:#fff; --line:#D3D7DF; --line-2:#EEF0F3; --tint:#EEF2FB; --tint-2:#F7F9FD;
  --line-hover:#C9D3EE; --line-dash:#D5DAE3; --line-input:#C4CAD4; --scarlet-tint:#FBEFEF; --code:#111317;
  color-scheme:light;
  --serif:"Latin Modern Roman","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Latin Modern Sans","Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wide:1120px; --text:680px; --r:16px; --r-s:10px; --btn-r:4px;
  --lift:0 1px 2px rgba(17,19,23,.04),0 10px 28px -16px rgba(17,19,23,.18);
  --lattice:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%231A47B8' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M0 0L56 97M56 0L0 97M0 48.5H56'/%3E%3Cpath d='M28 0L56 48.5L28 97L0 48.5Z'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--lattice) 0 0/56px 97px,var(--wash);background-color:var(--page);background-attachment:scroll,fixed;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--cobalt);text-underline-offset:3px} a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
p{margin:0 0 16px}
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:-.012em;line-height:1.15}
h2{font-size:clamp(26px,3vw,34px);margin:0 0 12px}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--cobalt-solid);color:var(--on-solid);padding:8px 14px;border-radius:8px;font-weight:700}
.skip:focus{left:12px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ── header ── */
.bar{position:sticky;top:0;z-index:40;background:var(--cobalt-solid);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.bar .wrap{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.01em}
.logo svg{width:28px;height:28px;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{color:rgba(255,255,255,.78);text-decoration:none;font-weight:600;font-size:15px;padding:7px 12px;border-radius:var(--btn-r);transition:color .15s,background .15s}
.nav a:hover{color:#fff}
.bar .logo{color:#fff}
.nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.16)}
/* menu button (narrow screens): a translucent white button on the cobalt bar, "Menu" with two lines that turn into an x as it opens */
.menu{display:none;margin-left:auto;align-items:center;gap:10px;height:40px;padding:0 15px 0 17px;border:0;border-radius:var(--btn-r);background:rgba(255,255,255,.14);color:#fff;font:inherit;font-weight:600;font-size:15px;letter-spacing:.01em;cursor:pointer;transition:background .2s,color .2s}
.menu:hover{background:rgba(255,255,255,.24)}
.bar.open .menu{background:#fff;color:var(--cobalt-solid)}
.menu .lbl .c,.bar.open .menu .lbl .o{display:none}
.bar.open .menu .lbl .c{display:inline}
.menu .burger{position:relative;width:18px;height:12px}
.menu .burger i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:top .22s ease,transform .22s ease}
.menu .burger i:first-child{top:1px}
.menu .burger i:last-child{top:9px;left:6px}
.bar.open .menu .burger i:first-child{top:5px;transform:rotate(45deg)}
.bar.open .menu .burger i:last-child{top:5px;left:0;transform:rotate(-45deg)}
@keyframes menuin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:820px){
  .menu{display:inline-flex}
  .nav{display:none;position:absolute;left:12px;right:12px;top:70px;background:var(--cobalt-solid);flex-direction:column;align-items:stretch;gap:0;padding:8px;border:1px solid rgba(255,255,255,.18);border-radius:8px;box-shadow:0 24px 48px -20px rgba(13,31,82,.55)}
  .bar.open .nav{display:flex;animation:menuin .22s ease}
  .nav a{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-family:var(--serif);font-size:23px;font-weight:700;color:#fff;border-radius:var(--btn-r)}
  .nav a::after{content:">";font-family:var(--mono);font-size:18px;color:#FFB0B0;transition:transform .2s}
  .nav a:hover::after{transform:translateX(3px)}
  .nav a[aria-current=page]{background:rgba(255,255,255,.14);color:#fff}
  .nav a:hover{background:rgba(255,255,255,.08)}
}

/* ── buttons, chips, small type ── */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:15.5px;text-decoration:none;border-radius:var(--btn-r);padding:11px 20px;cursor:pointer;border:0;transition:background .15s,color .15s,box-shadow .15s;line-height:1.2;white-space:nowrap}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn.primary{background:var(--cobalt-solid);color:var(--on-solid)}
.btn.primary:hover{background:var(--cobalt-d);color:var(--on-solid)}
.btn.ghost{background:var(--card);color:var(--cobalt);font-weight:700;box-shadow:inset 0 0 0 1px var(--line-input)}
.btn.ghost:hover{background:var(--cobalt-solid);color:var(--on-solid);box-shadow:inset 0 0 0 1px var(--cobalt-solid)}
.btn:active,.chap a.dl:active,.menu:active{transform:translateY(1px)}
.btn.small{font-size:14px;padding:8px 14px}
.btn.coffee{background:var(--card);color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--line)}
.btn.coffee:hover{box-shadow:inset 0 0 0 1px var(--cobalt)}
.btn[disabled]{opacity:.6;cursor:default}
.chip{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--btn-r);line-height:1.5;background:var(--page);color:var(--ink-3)}
.chip.free{background:var(--tint);color:var(--cobalt)}
.chip.form{background:var(--tint);color:var(--cobalt)}
.chip.teacher{background:var(--tint);color:var(--cobalt)}
.chip.soon{background:var(--scarlet-tint);color:var(--scarlet)}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0 0 10px}
.eyebrow.accent{color:var(--cobalt)} .eyebrow.scarlet{color:var(--scarlet)}
.lede{font-family:var(--sans);font-size:20px;line-height:1.5;color:var(--ink);max-width:40ch}
.intro{font-size:17px;color:var(--ink-3);max-width:60ch;margin-bottom:26px}
.fine{font-size:13.5px;color:var(--ink-4);margin:12px 0 0}
.arrow{display:inline-block;font-family:var(--mono);font-weight:700;transition:transform .2s}
a:hover .arrow{transform:translateX(3px)}
.motto{display:flex;align-items:center;margin:26px 0 0}
.motto span{font-family:var(--mono);font-size:15.5px;letter-spacing:.05em;color:var(--cobalt)}
.motto b{color:var(--scarlet);font-weight:700}

/* ── cards: every section is one ── */
main{padding:20px 0 0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:44px 48px;margin:0 0 24px;scroll-margin-top:84px}
.panel.flush{padding:0;overflow:hidden}
.panel > h2:first-child,.panel > .eyebrow:first-child{margin-top:0}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head-row h2{margin:0}
.head-row .intro{margin:8px 0 0}
.more{font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
@media (max-width:700px){.panel{padding:28px 22px;border-radius:14px}}

/* ── home hero ── */
.panel.hero{position:relative;overflow:hidden}
.panel.hero::before{content:"";position:absolute;inset:0;background-image:var(--lattice);background-size:56px 97px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 100%)}
.panel.hero > *{position:relative}
.hero{padding:0}
.hero .in{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding:60px 56px 44px}
.hero h1{font-size:clamp(44px,6.2vw,74px);line-height:1;margin:0;letter-spacing:-.015em}
.hero h1 .main{display:inline-block}
.hero h1 .sub{display:block;width:fit-content;color:var(--cobalt);font-size:.52em;line-height:1.15;margin-top:10px;white-space:nowrap;letter-spacing:0}   /* site.js sizes it to the width of the line above */
.hero .lede{margin:22px 0 26px}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.meta{font-size:14px;color:var(--ink-4);margin:14px 0 0}
.coverbox{display:block;justify-self:center;position:relative;width:min(300px,100%)}
.coverbox img{border-radius:3px 6px 6px 3px;box-shadow:0 1px 2px rgba(0,0,0,.1),0 24px 48px -22px rgba(13,31,82,.45);transition:transform .2s}
a.coverbox:hover img{transform:translateY(-3px)}
.banner{margin:0;padding:22px 24px;border-top:1px solid var(--line);text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,26px);line-height:1.3;color:var(--ink-2)}
@media (max-width:860px){
  .hero h1{font-size:clamp(40px,12vw,56px)}
  .hero .in{grid-template-columns:1fr;gap:30px;padding:36px 22px 30px}
  .coverbox{width:min(200px,56%);justify-self:start}
}

/* teacher pack: the class worksheets, one folding row per chapter */
.ws-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden;margin:0 0 18px}
.ws-ch{border-top:1px solid var(--line-2)}
.ws-ch:first-child{border-top:0}
.ws-ch summary{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;list-style:none;font-weight:600;font-size:15px}
.ws-ch summary::-webkit-details-marker{display:none}
.ws-ch summary .n{width:24px;font-family:var(--serif);font-weight:700;color:var(--cobalt)}
.ws-ch summary .count{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-4)}
.ws-ch summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);transform:rotate(45deg);margin:-3px 2px 0 4px;transition:transform .2s}
.ws-ch[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.ws-ch ul{list-style:none;margin:0;padding:0 0 8px}
.ws-ch li a{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:baseline;padding:7px 14px 7px 50px;text-decoration:none;color:var(--ink-2);font-size:14.5px}
.ws-ch li a:hover{background:var(--tint-2);color:var(--cobalt)}
.ws-ch .sec{font-family:var(--mono);font-size:12px;color:var(--ink-4)}
.ws-ch small{font-size:12px;color:var(--ink-4);white-space:nowrap}
@media (max-width:560px){.ws-ch li a{grid-template-columns:40px 1fr;padding-left:20px}.ws-ch small{grid-column:2}}

/* the triangle from the cover, in the hero; the cover itself beside Notes & resources */
.hero-tri{display:block;justify-self:end;align-self:start;max-width:100%}
.cover-tri{max-width:100%;height:auto;display:block;overflow:visible}
.cover-tri path{stroke:none;transition:transform .25s,fill .25s;transform-box:fill-box;transform-origin:center}
.cover-tri .odd path{fill:color-mix(in srgb,var(--cobalt) 17%,transparent)}
.cover-tri .even path{fill:color-mix(in srgb,var(--cobalt) 4%,transparent)}
.cover-tri text{font-family:var(--sans);font-size:8.5px;font-weight:600;text-anchor:middle;fill:var(--ink-2)}
.cover-tri .even text{fill:var(--ink-4);opacity:.6}
.cover-tri .cap{font-family:var(--serif);font-style:italic;font-weight:400;font-size:14px;text-anchor:end;fill:var(--ink-3)}
.cover-tri g{animation:tri-in .5s ease both;animation-delay:calc(var(--r) * 90ms)}
@keyframes tri-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cover-tri g[data-n]{cursor:pointer;outline:none}
.cover-tri g.on path{fill:color-mix(in srgb,var(--scarlet) 55%,transparent)}
.cover-tri g.on text{fill:#fff}
.cover-tri g.par path{fill:color-mix(in srgb,#9D8FE3 55%,transparent)}
.cover-tri g.par text{fill:var(--ink)}
.cover-tri g:focus-visible path{stroke:var(--cobalt);stroke-width:2}
.tri-say{margin:8px auto 0;max-width:100%;height:76px;overflow:hidden;line-height:1.45;text-align:center;font-family:var(--sans);font-size:16px;color:var(--ink-3)}
.tri-say b{color:var(--ink);font-weight:700}
.tri-say .fact{display:block;margin-top:4px;font-size:14.5px;font-style:italic;color:var(--ink-4)}
.res-top{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;margin-bottom:22px}
.res-top .head-row{margin-bottom:10px}
.res-meta{margin:0;font-size:14px;color:var(--ink-4)}
.coverbox.small{width:150px}
.phead.with-cover{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
@media (max-width:700px){.res-top{grid-template-columns:1fr}.res-top .coverbox.small,.phead.with-cover .coverbox.small{width:120px;justify-self:start}.phead.with-cover{grid-template-columns:1fr}}

/* ── notes: topic groups, search, start here ── */
.tgroup{margin-top:30px}
.tgroup h3{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:16px;letter-spacing:0;margin:0;padding-bottom:9px;border-bottom:2px solid var(--m)}
.tgroup .dot{width:10px;height:10px;border-radius:50%;background:var(--m);flex:0 0 auto}
.tgroup .count{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-4)}
.start-badge{display:inline-block;margin-left:9px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--scarlet);padding:2px 7px;border-radius:3px;vertical-align:2px}
.chap-search{margin:26px 0 0}
.chap-search input{display:block;width:100%;font:inherit;font-size:16px;color:var(--ink);padding:13px 16px 13px 44px;border:1px solid var(--line-input);border-radius:8px;
  background:var(--card) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A808B' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 15px center/18px}
.chap-search input:focus{outline:0;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(26,71,184,.14)}
.no-match{margin:22px 0 0;padding:20px 22px;border:1px dashed var(--line-dash);border-radius:var(--r-s);color:var(--ink-3)}
.no-match b{color:var(--ink)}

/* ── notes & resources: folding topic groups ── */
details.tgroup{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-s);padding:0 18px;background:var(--card)}
details.tgroup > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:15px 0;font-weight:700;font-size:16px}
details.tgroup > summary::-webkit-details-marker{display:none}
details.tgroup > summary::after{content:"";width:8px;height:8px;border:solid var(--ink-4);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 4px 0 6px;transition:transform .2s}
details.tgroup[open] > summary::after{transform:rotate(-135deg);margin-top:4px}
details.tgroup > summary .count{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-4)}
details.tgroup > .chapters{border-top:2px solid var(--m);padding-bottom:6px}
/* teacher items, tagged */
.tag-t{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);background:var(--tint);padding:3px 8px;border-radius:3px;white-space:nowrap}
.tlist{list-style:none;margin:18px 0 0;padding:0}
.tlist li{display:grid;grid-template-columns:auto 1fr auto;gap:2px 14px;align-items:center;padding:13px 0;border-top:1px solid var(--line-2)}
.tlist li .tag-t{grid-row:span 2}
.tlist li b{font-size:16px}
.tlist li span:not(.tag-t){grid-column:2;font-size:14.5px;color:var(--ink-3)}
.tlist li em{grid-row:1 / span 2;grid-column:3;font-style:normal;font-size:13px;font-weight:600;color:var(--ink-4)}
/* home: compact chapter list with chips */
.mini-h{display:flex;align-items:baseline;gap:12px;font-family:var(--sans);font-size:15px;letter-spacing:0;margin:28px 0 8px}
.mini-h span{font-size:13px;font-weight:600;color:var(--ink-4)}
.chlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.chlist li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:15px}
.chlist .n{font-family:var(--serif);font-weight:700;color:var(--cobalt);padding-left:12px}
.chlist .t a{color:var(--ink);text-decoration:none;font-weight:600}
.chlist .t a:hover{color:var(--cobalt)}
.chlist li.off .t{color:var(--ink-4)}
.chlist li.off .n{color:var(--ink-4)}
.chlist .cs{display:flex;gap:5px}
.chlist .t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.syl{display:inline-block;font-family:var(--mono);font-style:normal;font-size:10px!important;font-weight:500;line-height:1.45;letter-spacing:0;color:var(--ink-3);background:var(--line-2);padding:0 6px;border-radius:999px;white-space:nowrap}
.chip-r{font-size:12.5px;font-weight:700;text-decoration:none;color:var(--cobalt);border:1px solid var(--line-input);border-radius:var(--btn-r);padding:3px 9px}
.chip-r:hover{background:var(--cobalt-solid);border-color:var(--cobalt-solid);color:var(--on-solid)}
.chip-soon{font-size:12px;font-weight:600;color:var(--ink-4)}
@media (max-width:760px){.chlist{grid-template-columns:1fr}}
.tstrip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:24px;padding:16px 18px;border:1px dashed var(--line-dash);border-radius:var(--r-s)}
.tstrip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;flex:1;font-size:14.5px;color:var(--ink-2)}
.tstrip .next{margin:0}
.ch-more{margin:12px 0 0;font-size:14.5px;color:var(--ink-4)}
.ch-more a{font-weight:700;text-decoration:none}
.ch-more .arrow{color:var(--scarlet)}
.try-teaser{margin:18px 0 0;font-size:15px;color:var(--ink-4)}
.try-teaser a{font-weight:600;text-decoration:none}
/* home: a short note, like a letter */
.panel.hello{border:1px solid #B5C5EE;background:radial-gradient(70% 90% at 15% 0%,#F1F5FE 0%,transparent 70%),#E6EDFC}   /* pastel cobalt, a lighter shade at the top left */
.hello-in{max-width:var(--text);margin:0 auto}
.hello-in p{font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--ink)}
.hello .sig{font-family:"Caveat",var(--serif);font-size:38px;line-height:1;color:var(--cobalt);margin:18px 0 6px}
.hello .motto{margin:0 0 18px}
.hello-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-family:var(--sans)!important;font-size:15.5px!important}
.hello-links a:not(.next){color:var(--ink-3);font-weight:600;text-decoration:none}

/* ── answers: free pages read on the site ── */
.ans-dl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:22px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card)}
.ans-dl h2{font-family:var(--sans);font-size:17px;letter-spacing:0;margin:0;color:var(--ink)}
.ans-dl span{font-size:13.5px;color:var(--ink-4)}
.ans-dl .btn{font-size:14.5px;padding:9px 16px}
.jump-ch{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.jump-ch a{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-2);border:1px solid var(--line-input);border-radius:var(--btn-r);padding:6px 12px;background:var(--card)}
.jump-ch a:hover{border-color:var(--cobalt);color:var(--cobalt)}
.answers-pages{display:grid;gap:26px;justify-items:center;background:var(--tint)}
.apage{margin:0;width:min(100%,820px);scroll-margin-top:84px}
.apage img{width:100%;height:auto;background:#fff;border-radius:3px;box-shadow:0 0 0 1px var(--line),0 18px 40px -24px rgba(13,31,82,.45)}
.apage figcaption{font-size:13px;color:var(--ink-4);text-align:center;margin-top:8px}

/* ── chapter pages ── */
.ch-meta{font-size:14.5px;color:var(--ink-3);margin:16px 0 0}
.ch-meta i{font-style:normal;font-family:var(--mono);font-size:13px}
.ch-dl{margin-top:20px;gap:16px}
.ch-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0}
.ch-nav a{font-weight:600;text-decoration:none}
.ch-nav .arrow{color:var(--scarlet)}

/* ── home: three doors ── */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 24px}
.door{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--cobalt-solid);border-radius:var(--r-s);padding:24px 24px 20px;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
.door:hover{border-color:var(--cobalt-solid);box-shadow:var(--lift)}
.door .who{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.door h2{font-size:26px;margin:8px 0 8px}
.door p{color:var(--ink-3);font-size:15.5px;margin:0 0 16px;flex:1}
.door .go{font-weight:700;font-size:15px;color:var(--cobalt)}
.door .go .arrow,.next .arrow{color:var(--scarlet)}
@media (max-width:820px){.doors{grid-template-columns:1fr}}
.next{display:inline-block;font-weight:700;font-size:15.5px;text-decoration:none;color:var(--cobalt);margin-top:6px}
.next:hover .arrow{transform:translateX(3px)}

/* ── home: try this (the series) ── */
.try{background:var(--cobalt-solid);border-color:var(--cobalt-solid);color:#fff}
.panel.try h2.start,.panel.try p.start-sub{color:#fff}
.try .sum-line{font-family:var(--serif);font-size:clamp(18px,2.4vw,24px);margin:18px 0 12px;min-height:1.5em;overflow-wrap:anywhere}
.try .bar{display:flex;height:46px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.try .bar .seg{height:100%;background:#fff;box-shadow:inset -2px 0 0 var(--cobalt-solid);transition:width .25s ease}
.try .bar .seg:nth-child(even){background:#D7E0F8}
.try .bar .gap{height:100%;background:repeating-linear-gradient(135deg,#FFB0B0 0 3px,transparent 3px 7px)}
.try .controls{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.try .controls label{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.try .controls input{flex:1;max-width:420px;accent-color:#fff}
.try .controls output{font-family:var(--mono);font-size:22px;font-weight:700;min-width:2ch}
.try .readout{display:flex;flex-wrap:wrap;gap:12px 48px;margin:10px 0 18px}
.try .readout dt{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.try .readout dd{margin:2px 0 0;font-family:var(--mono);font-size:19px}
.try .note{max-width:62ch;color:rgba(255,255,255,.88);margin:0 0 10px}
.try .next{color:#fff}
.try .next .arrow{color:#FFB0B0}

/* ── home: Pascal's triangle ── */
.tri-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;cursor:pointer;margin:0 0 8px}
.switch input{width:18px;height:18px;accent-color:var(--cobalt-solid)}
.tri-body{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:center;margin-top:18px}
.pascal{width:100%;height:auto;display:block}
.pascal .pc{cursor:pointer;outline:none}
.pascal circle{fill:var(--tint);stroke:var(--line-hover);stroke-width:1;transition:fill .2s}
.pascal text{font-family:var(--sans);font-size:11px;font-weight:600;text-anchor:middle;fill:var(--ink-2);pointer-events:none}
.pascal .pc:hover circle,.pascal .pc:focus-visible circle{stroke:var(--cobalt);stroke-width:2}
.pascal .pc.on circle{fill:var(--scarlet);stroke:var(--scarlet)}
.pascal .pc.on text{fill:#fff}
.pascal.odd-only .pc text{display:none}
.pascal.odd-only .pc circle{fill:transparent;stroke:var(--line)}
.pascal.odd-only .pc.odd circle{fill:var(--cobalt-solid);stroke:var(--cobalt-solid)}
.tri-read .pick{font-size:18px;margin:0 0 6px}
.tri-read .pick b{font-family:var(--mono);color:var(--cobalt)}
.tri-read .formula{color:var(--ink-3);min-height:3em}
@media (max-width:820px){.tri-body{grid-template-columns:1fr}}

/* ── home: the course in five topics (colour is only a marker) ── */
.topics{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:22px}
.topic h3{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;letter-spacing:0;margin:0 0 10px;padding-bottom:10px;border-bottom:2px solid var(--m)}
.topic .dot{width:10px;height:10px;border-radius:50%;background:var(--m);flex:0 0 auto}
.topic ul{list-style:none;margin:0;padding:0}
.topic li a{display:flex;gap:10px;padding:7px 0;text-decoration:none;color:var(--ink-2);font-size:15px;line-height:1.35}
.topic li a:hover{color:var(--cobalt)}
.topic .n{font-family:var(--serif);font-weight:700;color:var(--m);min-width:1.4em}
.t1{--m:#1A47B8} .t2{--m:#C44545} .t3{--m:#287C78} .t4{--m:#A8741A} .t5{--m:#6B4FA0}
@media (max-width:1000px){.topics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.topics{grid-template-columns:1fr}}

/* ── home: what readers say ── */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.quote{margin:0;background:var(--tint);border-radius:var(--r-s);padding:26px 28px 22px;position:relative}
.quote::before{content:"\201C";position:absolute;top:4px;left:18px;font-family:var(--serif);font-size:70px;line-height:1;color:var(--scarlet)}
.quote blockquote{margin:22px 0 14px;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.45;color:var(--ink)}
.quote figcaption{font-size:14px;color:var(--ink-3)}
.quote figcaption b{color:var(--ink);font-weight:700}
.quote.soon{background:transparent;border:1px dashed var(--line-dash)}
.quote.soon::before{color:var(--line-dash)}
.quote.soon blockquote,.quote.soon figcaption{color:var(--ink-4)}
.quotes .quote:first-child:nth-last-child(odd){grid-column:1 / -1}
.quotes .quote:first-child:nth-last-child(odd) blockquote{font-size:clamp(22px,2.6vw,28px)}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}

/* ── home: a note from Hasan ── */
.hasan{display:grid;grid-template-columns:150px 1fr;gap:36px;align-items:start}
.hasan .mini-cover{border-radius:2px 5px 5px 2px;box-shadow:0 1px 2px rgba(0,0,0,.1),0 18px 36px -18px rgba(13,31,82,.45)}
.hasan .letter{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--ink);max-width:62ch}
.hasan .hfacts{display:flex;flex-wrap:wrap;gap:4px 20px;margin:4px 0 16px;font-size:14px;line-height:1.6;color:var(--ink-4)}
.hasan .hfacts b{font-weight:700;color:var(--ink-2);margin-right:4px}
.hasan .hfacts span{color:var(--ink-4)}
@media (max-width:700px){.hasan{grid-template-columns:1fr}.hasan .mini-cover{width:110px}}

/* ── start here: one line of links ── */
.quick{display:flex;flex-wrap:wrap;gap:10px 30px;margin:0}
.quick a{font-weight:600;font-size:17px;text-decoration:none;color:var(--ink)}
.quick a:hover{color:var(--cobalt)}
.quick .arrow{color:var(--scarlet);margin-left:3px}

/* ── home: the notes (tick list) ── */
.ticks{list-style:none;padding:0;margin:0 0 26px}
.ticks li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line-2);font-size:16px;color:var(--ink-2)}
.ticks li:last-child{border-bottom:1px solid var(--line-2)}
.ticks svg{flex:0 0 18px;width:18px;height:18px;margin-top:4px;color:var(--cobalt)}

/* ── teachers ── */
.teach{display:grid;grid-template-columns:1.4fr .6fr;gap:28px;align-items:center}
.teach p{color:var(--ink-3);margin:0;max-width:58ch}
.teach .side{display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-self:end}
@media (max-width:820px){.teach{grid-template-columns:1fr}.teach .side{justify-self:start;flex-direction:row;flex-wrap:wrap}}

/* ── article cards ── */
/* the blog as a list: one row per article, a pastel dot, the title and its question, the date on the right */
.posts{display:flex;flex-direction:column;background:var(--card);border-radius:14px;padding:4px 0;box-shadow:0 1px 2px rgba(60,40,110,.05),0 12px 28px -20px rgba(60,40,110,.3)}
.post{position:relative;display:grid;grid-template-columns:1fr auto 20px;gap:6px 24px;align-items:center;padding:20px 24px 20px 46px;text-decoration:none;color:inherit;border-top:1px solid var(--line-2);transition:background .15s}
.post:first-child{border-top:0}
.post[hidden]{display:none}
.post::before{content:"";position:absolute;left:22px;top:29px;width:9px;height:9px;border-radius:50%;background:#E58BA3}
.post:hover{background:var(--tint-2)}
.post .body{display:flex;flex-direction:column;gap:3px;min-width:0}
.post .tag{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;color:var(--scarlet)}
.post .title{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.25;color:var(--ink)}
.post:hover .title{color:var(--cobalt)}
.post .hook{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.4;color:var(--ink-3)}
.post .when{font-size:13px;line-height:1.5;color:var(--ink-4);text-align:right;white-space:nowrap}
.post .go{font-weight:700;color:var(--scarlet);transition:transform .2s}
.post:hover .go{transform:translateX(3px)}
@media (max-width:640px){.post{grid-template-columns:1fr 14px;padding:18px 18px 18px 40px}.post::before{left:18px}.post .when{grid-column:1;grid-row:2;text-align:left}.post .when br{display:none}.post .go{grid-row:1 / span 2;grid-column:2}}
/* the blog in pastel: a soft rose-lavender-mint wash, white cards with a pastel edge each */
/* the blog: one scarlet → blue gradient on every blog surface (the Blog page, each article, the homepage Blog section) */
:root{--sb-wash:linear-gradient(135deg,#FCE9EB 0%,#F2ECFA 50%,#E6EDFD 100%);--sb-edge:linear-gradient(135deg,#E9979C,#B3AEEB 50%,#8EA6EE);--sb-strong:linear-gradient(135deg,#C44545 0%,#1A47B8 100%)}
/* blog pages: the heading panel only carries two soft pastel patches at its top (rose at the left, blue at the right); every other panel is plain white */
.s-blog .phead{background:
  radial-gradient(60% 220px at 8% 0%,rgba(236,140,150,.20),transparent 70%),
  radial-gradient(55% 220px at 92% 0%,rgba(110,140,235,.18),transparent 70%),
  var(--card)}
.s-blog .panel.try{background:var(--sb-strong);border-color:transparent}
.blog-tint .post::before{background:var(--sb-strong)}
.blog-tint .post .tag{color:var(--scarlet)}
.empty{border:1px dashed var(--line-dash);border-radius:var(--r-s);padding:24px;color:var(--ink-3)}

/* ── support ── */
.support{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.support .cup{width:44px;height:44px;border-radius:50%;background:var(--tint);display:grid;place-items:center;color:var(--cobalt);flex:0 0 auto}
.support .cup svg{width:22px;height:22px}
.support div{flex:1 1 280px}
.support b{font-family:var(--serif);font-size:19px;display:block}
.support p{margin:0;color:var(--ink-3);font-size:15px}

/* ── inner page head ── */
.phead{padding:52px 48px 44px}
.phead h1{font-size:clamp(36px,4.8vw,54px);margin:0 0 10px}
.phead .lede{margin:0;max-width:50ch}
.phead .lede + .cta{margin-top:24px}
.crumbs{font-size:13.5px;margin:0 0 14px;color:var(--ink-4)}
.crumbs a{text-decoration:none;font-weight:600;color:var(--ink-3)}
.crumbs a:hover{color:var(--cobalt)}
@media (max-width:700px){.phead{padding:32px 22px 28px}}

/* ── notes page ── */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
@media (max-width:1000px){.feat{grid-template-columns:repeat(2,1fr)}}
.feat h3{margin:0 0 6px;font-size:17px;font-family:var(--sans);letter-spacing:0}
.feat p{font-size:15px;color:var(--ink-3);margin:0}
@media (max-width:820px){.feat{grid-template-columns:1fr;gap:22px}}
.chapters{display:grid;grid-template-columns:1fr;gap:0}
.chap{display:grid;grid-template-columns:60px 1fr auto;gap:2px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2)}
.chap .n{grid-row:span 3;font-family:var(--serif);font-weight:700;font-size:24px;color:var(--cobalt);line-height:1;padding-left:14px}
.chap .t{font-weight:600;font-size:16.5px;line-height:1.3}
.chap .s{grid-column:2;font-size:13px;color:var(--ink-4)}
.chap .s i{font-style:normal;font-family:var(--mono);font-size:12px}
.chap .acts{grid-row:1 / span 3;grid-column:3;display:flex;gap:6px}
.chap .c{grid-column:2;font-size:14.5px;line-height:1.5;color:var(--ink-3);margin:2px 0}
.chap a.dl{font-size:13.5px;font-weight:700;text-decoration:none;color:var(--cobalt);background:var(--card);border:1px solid var(--line-input);padding:5px 12px;border-radius:var(--btn-r);white-space:nowrap;display:inline-flex;gap:6px;align-items:center;transition:all .15s}
.chap a.dl svg{display:none}
.chap .soon-tag{color:var(--ink-4);border:0;background:none;padding:6px 2px;font-weight:600;cursor:default}
.chap.book.main .soon-tag{background:none;border:0;padding:0;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.75)}
.chap a.dl:hover{background:var(--cobalt-solid);color:var(--on-solid);border-color:var(--cobalt-solid)}
@media (max-width:980px){.chapters{grid-template-columns:1fr}}
.bookrows{display:grid;gap:8px;margin:0 0 22px}
.bookrows.after-ch{margin:22px 0 0}
.chap.book{grid-template-columns:44px 1fr auto;gap:1px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 16px;transition:border-color .15s,box-shadow .15s}
.chap.book:hover{border-color:var(--line-hover);box-shadow:0 6px 18px -12px rgba(26,71,184,.35)}
.chap.book .n{width:44px;height:44px;padding:0;border-radius:10px;background:var(--tint);color:var(--cobalt);display:grid;place-items:center}
.chap.book .n svg{width:21px;height:21px}
.chap.book .t{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.005em}
.chap.book .s{font-size:13.5px;color:var(--ink-4)}
.chap.book.main{background:linear-gradient(100deg,#2A55C8 0%,#4F78DE 38%,#AFC4F3 66%,#EEF3FD 86%,#FFFFFF 100%) padding-box;border:1px solid var(--line);padding:18px 20px;color:var(--on-solid)}
.chap.book.main:hover{box-shadow:0 10px 26px -14px rgba(26,71,184,.7)}
.chap.book.main .n{background:rgba(255,255,255,.14);color:var(--on-solid)}
.chap.book.main .t{font-family:var(--serif);font-size:clamp(21px,2.4vw,25px);color:var(--on-solid)}
.chap.book.main .s{color:rgba(255,255,255,.72)}
.chap.book.main .soon-tag{background:none;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85)}
@media (max-width:520px){.chap{grid-template-columns:36px 1fr}.chap .acts{grid-row:auto;grid-column:2;margin-top:6px}}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.pills button{font:inherit;font-size:13.5px;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink-3);padding:6px 13px;border-radius:var(--btn-r);cursor:pointer;transition:all .15s}
.pills button:hover{color:var(--ink);border-color:var(--ink-4)}
.pills button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)}

/* ── resources page ── */
.items{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
@media (max-width:1000px){.items{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.items{grid-template-columns:1fr}}
.item-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-s);padding:18px;background:var(--card);text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
a.item-card:hover{border-color:var(--line-hover);box-shadow:var(--lift);transform:translateY(-2px)}
.item-card .row{display:flex;gap:8px;align-items:center}
.item-card .kind{margin-left:auto;font-size:12.5px;color:var(--ink-4);font-weight:600}
.item-card h3{font-size:20px;margin:14px 0 6px}
.item-card p{font-size:14.5px;color:var(--ink-3);margin:0 0 12px;flex:1}
.item-card .go{font-weight:700;font-size:15px;color:var(--cobalt)}
.item-card .go .arrow{color:var(--scarlet)}
/* coming soon: a compact grouped list */
.soon-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 40px;margin-top:6px}
@media (max-width:900px){.soon-groups{grid-template-columns:1fr}}
.soon-group{scroll-margin-top:84px}
.soon-group h3{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin:0 0 6px}
.soon-group ul{list-style:none;margin:0;padding:0}
.soon-group li{padding:11px 0;border-top:1px solid var(--line-2)}
.soon-group li b{display:block;font-size:16px;color:var(--ink)}
.soon-group li span{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}

/* gated downloads */
.gatewrap{display:grid;grid-template-columns:.9fr 1.1fr}
.gatewrap .what{background:var(--tint-2);border-right:1px solid var(--line);padding:40px 36px}
.gatewrap .what h2{font-size:26px}
.gatewrap .what p{color:var(--ink-3);font-size:15.5px}
.gatewrap .what ul{list-style:none;padding:0;margin:8px 0 0}
.gatewrap .what li{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;font-weight:600}
.gatewrap .what li svg{flex:0 0 16px;width:16px;height:16px;margin-top:4px;color:var(--cobalt)}
.gatewrap .what li small{display:block;color:var(--ink-4);font-size:13px;font-weight:400}
.gatewrap .form{padding:40px 36px}
.gatewrap .form h3{font-size:22px;margin:0 0 4px}
@media (max-width:900px){.gatewrap{grid-template-columns:1fr}.gatewrap .what{border-right:0;border-bottom:1px solid var(--line)}.gatewrap .what,.gatewrap .form{padding:28px 22px}}

.pw{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.pw .err{flex-basis:100%;margin:0}
.pw label{flex:1 1 220px;margin:0}
.pw input{margin-top:0}

/* forms */
form label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin:0 0 14px}
form label .opt{font-weight:400;color:var(--ink-4)}
form input[type=text],form input[type=email],form select,form textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line-input);border-radius:10px;padding:10px 12px;transition:border-color .15s,box-shadow .15s}
form input:focus,form select:focus,form textarea:focus{outline:0;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(26,71,184,.14)}
form textarea{min-height:120px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
@media (max-width:620px){.row2,.row3{grid-template-columns:1fr}}
.check{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;color:var(--ink-3)!important;font-size:14.5px!important}
.check input{margin-top:4px;width:16px;height:16px;accent-color:var(--cobalt);flex:0 0 auto}
.err{color:var(--scarlet);font-size:14.5px;font-weight:600;margin:0 0 10px}
.hint{display:block;font-weight:400;font-size:12.5px;color:var(--ink-4);margin-top:2px}
.hp{position:absolute;left:-9999px}
.unlocked h3{font-size:22px;margin:0 0 4px}
.unlocked .grp{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin:20px 0 4px}
.unlocked ul{list-style:none;margin:0;padding:0}
.unlocked li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.unlocked li .m{flex:1;min-width:0}
.unlocked li b{display:block;font-size:15px;font-weight:600}
.unlocked li small{color:var(--ink-4);font-size:13px}
.unlocked .again{font-size:13.5px;color:var(--ink-4);margin-top:16px}
.report{margin-top:6px}
/* feedback form: one-tap topic toggles, soft borderless fields, placeholders instead of labels */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;border:0}
.seg label{display:inline-block;margin:0;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;padding:8px 15px;border:1px solid var(--line-input);border-radius:var(--btn-r);font-size:14.5px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:all .15s}
.seg span:hover{color:var(--ink);border-color:var(--ink-4)}
.seg input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--card)}
.seg input:focus-visible + span{outline:2px solid var(--cobalt);outline-offset:2px}
.report .fields{display:grid;gap:10px}
.report .row2{gap:10px}
.report label{margin:0}
.report input[type=text],.report input[type=email],.report textarea{margin:0;background:var(--page);border-color:transparent;border-radius:6px;padding:13px 15px}
.report input[type=text]:focus,.report input[type=email]:focus,.report textarea:focus{background:var(--card);border-color:var(--cobalt)}
.report textarea{min-height:150px}
.report ::placeholder{color:var(--ink-4)}
.report .send{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:16px}
.report .send .arrow{color:inherit}
.sent{border-left:2px solid var(--cobalt);padding:4px 0 4px 16px;font-size:17px;color:var(--ink)}
.use{font-family:var(--sans);font-size:17px;color:var(--ink);margin:0}
.narrow{max-width:var(--text)}

/* ── syllabus map ── */
.syll .topic{font-size:22px;margin:40px 0 12px}
.syll .topic:first-of-type{margin-top:26px}
.syll table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 8px}
.syll th{text-align:left;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--ink-4);padding:8px 10px}
.syll td{padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.syll tr:hover td{background:var(--tint-2)}
.syll td.code{font-family:var(--mono);font-size:13.5px;white-space:nowrap;color:var(--ink-3);width:100px}
.syll td.ch,.syll td.dl{white-space:nowrap;text-align:right;width:90px}
.syll td.ch a,.syll td.dl a{font-weight:600;text-decoration:none}
.syll td.codes{font-family:var(--mono);font-size:13.5px}
.syll .cn{display:inline-block;width:28px;font-family:var(--serif);font-weight:700;color:var(--cobalt)}
.syll .hl{display:inline-block;margin-left:6px;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.1em;background:var(--cobalt-solid);color:var(--on-solid);padding:1px 5px;border-radius:2px;vertical-align:2px}
.syll .note{font-size:14px;color:var(--ink-4);margin-top:24px}
.table-scroll{overflow-x:auto}

/* ── articles ── */
.article-head .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.article-head h1{max-width:22ch}
.byline{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink-4);margin-top:18px}
.byline .mono{width:38px;height:38px;font-size:14px}
.byline b{color:var(--ink);display:block;font-size:15px;font-weight:600}
.prose{max-width:var(--text);margin:0 auto;font-family:var(--sans);font-size:18px;line-height:1.7;color:var(--ink)}
.prose h2{font-size:27px;margin:44px 0 12px}
.prose h3{font-size:22px;margin:32px 0 10px}
.prose p,.prose ul,.prose ol{margin:0 0 20px}
.prose li{margin:0 0 8px}
.prose blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:2px solid var(--scarlet);color:var(--ink-3)}
.prose code{font-family:var(--mono);font-size:.84em;background:var(--page);padding:2px 5px;border-radius:4px}
.prose pre{background:var(--code);color:#E6ECFA;padding:18px 20px;border-radius:10px;overflow:auto;font-size:15px}
.prose pre code{background:none;padding:0;color:inherit}
.prose img{margin:28px auto;border-radius:8px}
.prose table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:16px;margin:0 0 24px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.prose hr{border:0;height:1px;background:var(--line);margin:40px 0}
.prose .katex-display{margin:22px 0;overflow-x:auto;overflow-y:hidden;padding:4px 0}
.prose > p:first-of-type{font-size:21px;color:var(--ink)}
.pager{max-width:var(--text);margin:36px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pager a{border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;text-decoration:none;color:inherit}
.pager a:hover{border-color:var(--ink-4)}
.pager small{display:block;color:var(--ink-4);font-size:12.5px}
.pager b{font-family:var(--serif);font-size:17px}
.pager .next{text-align:right;grid-column:2}

/* ── about ── */
.mono{width:72px;height:72px;border-radius:50%;background:var(--cobalt-solid);color:var(--on-solid);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:25px;letter-spacing:.02em}
.facts{display:flex;flex-wrap:wrap;gap:4px 20px;margin:20px 0 0;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink-4)}
.facts b{font-weight:700;color:var(--ink-2);margin-right:4px}
.facts span{color:var(--ink-4)}

/* ── about: a letter ── */
.letter-page{max-width:var(--text);margin:0 auto}
.letter-page p{font-family:var(--sans);font-size:18px;line-height:1.7;color:var(--ink)}
.letter-page .salute{font-style:italic;color:var(--ink);margin-bottom:18px}
.letter-page .sign{font-style:italic;font-size:26px;color:var(--ink);margin:30px 0 0;line-height:1.2}
.letter-page .sign span{display:block;font-family:var(--sans);font-style:normal;font-size:14px;color:var(--ink-4);margin-top:6px}
.letter-page .motto{margin:14px 0 0}

/* ── footer: one line, then the legal line ── */
footer{margin-top:40px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-3)}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;padding:30px 0 20px}
.foot .logo{font-size:19px}
.foot .logo svg{width:24px;height:24px}
.foot .motto{margin:0}
.foot-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--ink-2);text-decoration:none}
.foot-links a:hover{color:var(--cobalt)}
.legal{border-top:1px solid var(--line);padding:18px 0 30px;display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:space-between;font-size:13px;color:var(--ink-4)}
@media (max-width:820px){.foot-links{margin-left:0;width:100%}}

/* ── section headlines: the big cobalt label with a scarlet ">", then a bold subheading ──
   Declared last, and scoped to .panel, so they win over .head-row, .teach and .gatewrap. */
.panel h2.start{font-size:clamp(30px,3.4vw,40px);line-height:1.1;color:var(--cobalt);letter-spacing:-.02em;margin:0 0 14px}
.panel h2.start .arrow{display:inline;color:var(--scarlet);font-size:.78em;margin-left:.08em}
.panel p.start-sub{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.25;color:var(--ink);margin:0 0 8px;max-width:none}
.gatewrap .what h2.start{font-size:clamp(28px,3vw,34px)}

/* ── dark mode: follows the reader's system setting ──
   Text cobalt is lightened so it stays readable; solid cobalt fills (buttons) keep white text. */
/* homepage: the two contents pages of the book, side by side, as one link */
.toc-peek{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 22px;padding:20px 20px 56px;border:1px solid var(--line);border-radius:12px;background:var(--tint-2);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.toc-peek.four{grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:640px){.toc-peek.four{grid-template-columns:1fr 1fr}}
.toc-peek img{width:100%;height:auto;display:block;border-radius:4px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 24px -14px rgba(13,31,82,.35);transition:transform .2s}
.toc-peek:hover{border-color:var(--line-hover);box-shadow:0 8px 22px -14px rgba(26,71,184,.4)}
.toc-peek:hover img{transform:translateY(-2px)}
.toc-cap{position:absolute;left:20px;bottom:16px;font-weight:700;font-size:15px;color:var(--cobalt)}
/* the door band: "Every problem is …", a door drawing, the door of the week */
.door-band{position:relative;overflow:hidden;border:1px solid #B5C5EE;background:radial-gradient(70% 90% at 15% 0%,#F1F5FE 0%,transparent 70%),#E6EDFC;color:var(--ink);--pink:#FFC2C2}
.door-band::before{content:"";position:absolute;inset:0;background:var(--lattice) 0 0/56px 97px;pointer-events:none}
.door-band > *{position:relative}
.door-top{display:flex;align-items:center;gap:36px;margin:0 0 34px}
.door-line{margin:0;color:#2B2A6B;font-size:clamp(32px,4.6vw,54px);line-height:1.12;letter-spacing:-.015em}
.door-l2{display:block;margin-top:.14em;white-space:nowrap}
.hero-title{margin:0 0 16px;font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.6vw,30px);line-height:1.2;letter-spacing:-.01em;color:var(--cobalt)}
.hero-title span{display:block;color:var(--ink)}
.hl-badge{display:inline-block;vertical-align:.3em;margin-left:8px;padding:3px 9px 2px;border-radius:3px;background:var(--line-2);color:var(--ink-3);font-family:var(--sans);font-style:normal;font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;white-space:nowrap}
.hero-title .hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}   /* both badges on one row under the title */
.hero-badges .hl-badge{margin-left:0;vertical-align:baseline}
.rev-badge{background:var(--scarlet);color:#fff}   /* solid scarlet, no gradient */
@media (prefers-color-scheme:dark){.rev-badge{color:#1A0E10}}   /* dark text on the lighter dark-mode scarlet */
/* hero actions: one cobalt button, one quiet link; both nudge on hover */
.hero-body .cta{gap:14px 22px}
.hero-body .btn.primary{transition:background .15s,transform .15s,box-shadow .15s}
.hero-body .btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(26,71,184,.6)}
.hero-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--cobalt);text-decoration:none;padding:10px 2px}
.hero-link svg{width:17px;height:17px}
.hero-link .arrow{color:var(--scarlet)}
.hero-link:hover{color:var(--cobalt-d)}
/* the hero: text on the left, the cover's triangle on the right; the headline sits under the motto */
.hero .in{display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:center;padding:52px 48px 46px}
.hero-tri{justify-self:end;align-self:center;margin:0}
.hero-body .lede{margin:0 0 24px;max-width:40ch}
.hero-body .motto{margin-bottom:0}
.hero-rule{grid-column:1 / -1;width:100%;height:0;border:0;border-top:1px solid var(--line-hover);margin:18px 0 0}
.hero h1.hero-line{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:.26em;align-items:baseline;isolation:isolate;font-size:clamp(30px,3.6vw,44px);line-height:1.15;margin:0}
.hero h1.hero-line .l{text-align:right}
.hero h1.hero-line .door-l2{text-align:left}
.hero .door-l2{display:inline;margin:0;white-space:nowrap}
@media (max-width:720px){.hero h1.hero-line{grid-template-columns:1fr}.hero h1.hero-line .l,.hero h1.hero-line .door-l2{display:block;text-align:center}}
@media (max-width:860px){.hero .in{grid-template-columns:1fr;padding:34px 22px 32px}.hero-tri{justify-self:center;order:-1;margin-bottom:18px}}
.door-sub{margin:10px 0 0;font-family:var(--sans);font-size:18px;line-height:1.5;color:var(--ink)}
.door-word{position:relative;display:inline-block;white-space:nowrap}
.door-txt{color:var(--scarlet);padding-bottom:.06em}
.door-txt{white-space:pre}
.door-art{flex:0 0 auto;width:118px;height:auto;overflow:visible}
.door-art .frame{fill:none;stroke:var(--cobalt);stroke-width:3}
.door-art .light{fill:url(#door-glow)}
.door-art .g1{stop-color:#F6A9C5}
.door-art .g2{stop-color:#C5B4FA}
.door-art .g3{stop-color:#9EDFCA}
@keyframes glow1{0%,100%{stop-color:#F6A9C5}33%{stop-color:#C5B4FA}66%{stop-color:#9EDFCA}}
@keyframes glow2{0%,100%{stop-color:#C5B4FA}33%{stop-color:#9EDFCA}66%{stop-color:#F6A9C5}}
@keyframes glow3{0%,100%{stop-color:#9EDFCA}33%{stop-color:#F6A9C5}66%{stop-color:#C5B4FA}}
@keyframes swing{0%,100%{transform:scaleX(.66) skewY(-4deg)}50%{transform:scaleX(.3) skewY(-8deg)}}
@keyframes rays{0%,100%{opacity:.35}50%{opacity:.85}}
.door-art .leaf path:first-child{fill:#fff;stroke:var(--cobalt);stroke-width:3;stroke-linejoin:round}
.door-art .leaf circle{fill:var(--cobalt)}
.door-art .panel-line{fill:none;stroke:color-mix(in srgb,var(--cobalt) 40%,transparent);stroke-width:2}
.door-art .floor{stroke:var(--cobalt);stroke-width:3;stroke-linecap:round}
.door-art .ray{stroke:#A895EE;stroke-width:2;stroke-linecap:round;opacity:.7}
.door-art .leaf{transform-origin:44px 130px;transform:scaleX(.3) skewY(-7deg)}

.door-card{background:rgba(255,255,255,.88);color:var(--ink);border-radius:14px;padding:28px 30px;max-width:760px;box-shadow:0 1px 2px rgba(60,40,110,.05),0 12px 28px -20px rgba(60,40,110,.35)}
.door-eyebrow{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--scarlet)}
.door-ref{margin:0 0 6px;font-size:14px;color:var(--ink-3)}
.door-text{margin:0 0 18px;font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ink)}
.door-steps{margin:0 0 4px}
.door-hint,.door-ans{margin:14px 0 0;padding:12px 16px;border-left:3px solid var(--cobalt);background:var(--tint-2);font-size:17px}
.door-ans{border-left-color:var(--scarlet)}
.door-link{margin:18px 0 0;font-size:15.5px}
.door-link span{color:var(--ink-3)}
.closing{margin:8px 0 32px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.8vw,30px);color:var(--ink-2)}
.closing a{color:var(--cobalt);font-weight:700;text-decoration:none}
.closing a:hover{text-decoration:underline}
@media (max-width:720px){.door-top{flex-direction:column;align-items:flex-start;gap:18px}.door-art{width:84px}.door-card{padding:22px 20px}}

@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --wash:linear-gradient(180deg,#121722 0%,#0F1115 50%,#111620 100%);
    --cobalt:#8FA8F5; --cobalt-d:#2A52C4; --cobalt-solid:#3159CF; --scarlet:#EC7B7B;
    --ink:#ECEEF2; --ink-2:#C9CDD5; --ink-3:#A2A8B3; --ink-4:#80868F;
    --page:#0F1115; --card:#171A20; --line:#363B45; --line-2:#22262D; --tint:#1D2436; --tint-2:#1A1E27;
    --line-hover:#3B4A70; --line-dash:#343944; --line-input:#394050; --scarlet-tint:#3A1F22; --code:#0B0D10;
    --lift:0 1px 2px rgba(0,0,0,.3),0 10px 28px -16px rgba(0,0,0,.6);
    --lattice:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%238FA8F5' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M0 0L56 97M56 0L0 97M0 48.5H56'/%3E%3Cpath d='M28 0L56 48.5L28 97L0 48.5Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  .prose pre{box-shadow:0 0 0 1px var(--line)}
  .prose img{background:#fff;padding:14px}   /* figures are drawn in dark ink on a transparent ground */
  .coverbox img{filter:brightness(.92)}
  .door-band{border-color:#2A3B6E;background:radial-gradient(70% 90% at 15% 0%,#1E2A4D 0%,transparent 70%),#172036}
  .panel.hello{border-color:#2A3B6E;background:radial-gradient(70% 90% at 15% 0%,#1E2A4D 0%,transparent 70%),#172036}
  .blog-tint h2.start{color:#C3B9FA}
  :root:not([data-theme=light]){--sb-wash:linear-gradient(135deg,#2A1D22 0%,#211F33 50%,#18213A 100%);--sb-edge:linear-gradient(135deg,#8A3F48,#4E4A8F 50%,#2F4C9E)}
  .door-line{color:#D6D2FA}
  .door-card{background:rgba(23,26,32,.85)}
  .door-art .leaf path:first-child{fill:var(--card)}
}

/* ── article widgets and roles: sleek, three colours (cobalt, scarlet, ink), vertical rules, thin boxes, chevrons ── */
.prose{--a1:var(--cobalt);--a2:var(--scarlet);--rule:var(--line)}
.k1,.k2,.k3,.k4{font-family:var(--sans);font-size:.8em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.k1::before,.k2::before,.k3::before,.k4::before{content:"›";margin-right:4px;font-weight:700}
.k1,.k3{color:var(--a1)} .k2{color:var(--ink-3)} .k4{color:var(--a2)}
.prose .legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 16px}
.prose .step{margin:14px 0;padding:2px 0 2px 18px;border-left:2px solid var(--a1)}
.prose .step.s2{border-color:var(--line-hover)} .prose .step.s4{border-color:var(--a2)}
.prose .step > :first-child{margin-top:0} .prose .step > :last-child{margin-bottom:0}
.prose .tldr{margin:0 0 26px;padding:16px 20px;border:1px solid var(--rule);border-left:3px solid var(--a1);border-radius:6px;background:var(--card)}
.prose .tldr h3{margin:0 0 8px;font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--a1)}
.prose .tldr ol{margin:0;padding-left:20px} .prose .tldr li{margin:3px 0}
.prose .story,.prose .exam,.prose .challenge{margin:22px 0;padding:2px 0 2px 18px;border-left:2px solid var(--rule)}
.prose .exam{border-color:var(--a1)} .prose .challenge{border-color:var(--a2)}
.prose .story > :first-child,.prose .exam > :first-child,.prose .challenge > :first-child{margin-top:0}
.prose .story > :last-child,.prose .exam > :last-child,.prose .challenge > :last-child{margin-bottom:0}
.prose .box-h{display:block;margin-bottom:6px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.prose .box-h::before{content:"›";margin-right:6px;color:var(--a2)}
.prose .exam .box-h{color:var(--a1)}
.prose details.myth,.prose details.quiz,.prose details.flaw{margin:8px 0;border:1px solid var(--rule);border-radius:6px;background:var(--card)}
.prose details > summary{cursor:pointer;list-style:none;padding:12px 16px;font-family:var(--sans);font-weight:600;display:flex;gap:10px;align-items:baseline}
.prose details > summary::-webkit-details-marker{display:none}
.prose details > summary::before{content:"›";flex:0 0 auto;font-weight:700;color:var(--a1);transition:transform .2s;display:inline-block}
.prose details[open] > summary::before{transform:rotate(90deg)}
.prose details.flaw > summary::before{color:var(--a2)}
.prose details.myth > summary .tag-m{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);flex:0 0 auto}
.prose details.myth > summary q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.05em;color:var(--ink)}
.prose details > .in{margin:0 16px 14px 33px;padding-left:14px;border-left:2px solid var(--rule)}
.prose details.flaw > .in{border-color:var(--a2)}
.prose details > .in > :first-child{margin-top:0} .prose details > .in > :last-child{margin-bottom:0}
.prose .proofbox{margin:14px 0;padding:14px 18px;border:1px solid var(--rule);border-radius:6px;background:var(--card)}
.prose .proofbox > :first-child{margin-top:0} .prose .proofbox > :last-child{margin-bottom:0}
/* widgets */
.w{margin:20px 0;padding:16px 18px;border:1px solid var(--line);border-radius:6px;background:var(--card);font-family:var(--sans)}
.w .w-h{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.w .w-h::before{content:"›";margin-right:6px;color:var(--a2,var(--scarlet))}
.w .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.w button{font:inherit;font-weight:700;font-size:14px;border-radius:4px;padding:7px 13px;cursor:pointer;border:1px solid var(--line-input);background:var(--card);color:var(--cobalt)}
.w button.go{background:var(--cobalt-solid);border-color:var(--cobalt-solid);color:#fff}
.w input[type=number]{font:inherit;font-size:16px;width:86px;padding:6px 10px;border:1px solid var(--line-input);border-radius:4px;background:var(--card);color:var(--ink)}
.w .say{margin:12px 0 0;min-height:1.5em;font-size:15px;color:var(--ink-2)}
.w .say b{color:var(--ink)}
.w-circles .figs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 14px}
.w-circles figure{margin:0;text-align:center}
.w-circles svg{width:100%;height:auto;max-width:110px}
.w-circles figcaption{font-size:13px;color:var(--ink-3)} .w-circles figcaption b{color:var(--ink);font-size:15px}
.w-circles .ans b{color:var(--scarlet)}
@media (max-width:560px){.w-circles .figs{grid-template-columns:repeat(3,1fr)}}
.w-prime .cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(28px,1fr));gap:3px;margin:12px 0 0}
.w-prime .cells span{display:grid;place-items:center;height:26px;border-radius:3px;font-size:11.5px;font-weight:700;cursor:pointer;border:1px solid var(--line);color:var(--ink-3)}
.w-prime .cells span.no{border-color:var(--scarlet);color:var(--scarlet)}
.w-prime .cells span.sel{background:var(--cobalt-solid);border-color:var(--cobalt-solid);color:#fff}
.w-prime .cells span.no.sel{background:var(--scarlet);border-color:var(--scarlet)}
.w-dom .line{display:flex;align-items:flex-end;gap:18px;height:90px;padding:0 4px 0 6px;margin:6px 0 10px;border-bottom:1px solid var(--ink-3);overflow:hidden}
.w-dom .d{flex:0 0 12px;height:64px;border-radius:2px;background:var(--card);border:1.5px solid var(--ink-3);transform-origin:100% 100%;transition:transform .32s cubic-bezier(.5,0,.75,0)}
.w-dom .d.first{border-color:var(--cobalt)}
.w-dom .d.down{transform:rotate(62deg);border-color:var(--cobalt)}
.w-dom .d.wobble{animation:wob .5s ease 2}
@keyframes wob{25%{transform:rotate(6deg)}75%{transform:rotate(-2deg)}}
.w-dom .more{align-self:center;color:var(--ink-4);font-weight:700}
.w-dom label.sw{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;cursor:pointer;color:var(--ink-2)}
.w-dom label.sw input{width:16px;height:16px;accent-color:var(--cobalt)}
@media (prefers-reduced-motion:reduce){.w-dom .d{transition:none}}
/* article heading: tighter title, less air around it */
.phead.article-head{padding:36px 48px 30px}
.phead.article-head h1{font-size:clamp(32px,4vw,46px);line-height:1.08;letter-spacing:-.02em;margin:6px 0 4px;max-width:30ch}
.phead.article-head .byline{margin-top:14px}
@media (max-width:700px){.phead.article-head{padding:28px 22px 24px}}

/* the triangle column has a fixed width, so a longer explanation never resizes the hero */
.hero .hero-tri{width:380px;max-width:100%}
/* outlined button: the same size as .btn.primary, no fill, just a boundary */
.btn.line{background:transparent;color:var(--cobalt);box-shadow:inset 0 0 0 1.5px var(--cobalt);transition:background .15s,transform .15s}
.btn.line:hover{background:var(--tint);color:var(--cobalt-d);transform:translateY(-1px)}
/* the two hero buttons share one width */
.hero-body .cta .btn{width:140px;justify-content:center}
/* Notes & resources chapter rows read as a list: number, title with its syllabus chip and pages, one line of contents */
.chapters .chap{grid-template-columns:44px 1fr auto;gap:2px 16px;padding:12px 0}
.chapters .chap .n{grid-row:span 2;font-size:20px;padding-left:10px;align-self:start;margin-top:2px}
.chapters .chap .t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.chapters .chap .tm{display:inline-flex;align-items:center;gap:6px;font-weight:400;font-size:13px;color:var(--ink-4)}
.chapters .chap .c{font-size:14px;margin:0}
.chapters .chap .acts{grid-row:1 / span 2;align-self:center}
.ans-anchor{display:block;height:0;scroll-margin-top:84px}
/* Answers page: a tight row of chapter numbers */
.jump-ch.nums{gap:4px;align-items:center;margin-top:16px}
.jump-ch.nums .jl{margin-right:6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.jump-ch.nums a{min-width:30px;height:30px;padding:0 6px;display:inline-grid;place-items:center;font-size:13.5px;font-weight:700;color:var(--cobalt);border:1px solid var(--line);border-radius:4px;background:var(--card)}
.jump-ch.nums a:hover{background:var(--cobalt-solid);border-color:var(--cobalt-solid);color:#fff}
/* Notes & resources: each topic's chapters as a sleek table (number | chapter | Open) */
.tgroup .chapters{margin-top:10px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
.tgroup .chapters .chap{grid-template-columns:52px 1fr 92px;gap:0;padding:0;border-bottom:1px solid var(--line)}
.tgroup .chapters .chap:last-child{border-bottom:0}
.tgroup .chapters .chap .n{grid-row:1 / span 2;align-self:stretch;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border-right:1px solid var(--line)}
.tgroup .chapters .chap .t{grid-column:2;padding:11px 16px 0}
.tgroup .chapters .chap .c{grid-column:2;padding:2px 16px 12px}
.tgroup .chapters .chap .acts{grid-column:3;grid-row:1 / span 2;align-self:stretch;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line)}
.tgroup .chapters .chap:hover{background:var(--tint-2)}
@media (max-width:520px){.tgroup .chapters .chap{grid-template-columns:40px 1fr}.tgroup .chapters .chap .acts{grid-column:2;grid-row:auto;border-left:0;justify-content:flex-start;padding:0 16px 12px}}
/* the feedback form, sleek: thin outlined fields, small segmented choices with a cobalt selection */
.seg{gap:4px}
.seg span{padding:6px 12px;font-size:13.5px;border-color:var(--line);border-radius:999px}
.seg input:checked + span{background:var(--tint);border-color:var(--cobalt);color:var(--cobalt)}
.report input[type=text],.report input[type=email],.report textarea{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:10px 12px;font-size:15.5px}
.report input[type=text]:focus,.report input[type=email]:focus,.report textarea:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--tint)}
.report textarea{min-height:120px}
.report .check{font-size:14px;color:var(--ink-3)}
/* topic headings on Notes & resources: a small square marker, no rule underneath */
.tgroup h3{border-bottom:0;padding-bottom:0}
.tgroup .dot{border-radius:2px}
/* chapter and page: a small, muted line under the message */
.report .where{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-4)}
.report .where input[type=text]{width:86px;padding:5px 9px;font-size:13.5px;font-weight:400;color:var(--ink-3);border-color:var(--line-2)}
.report ::placeholder{font-weight:400}
/* Notes page: the chapter list sits in its own tinted area, set apart from the cards above */
.chap-area{margin:28px 0 22px;padding:22px 22px 24px;border-radius:12px;background:var(--tint-2);border:1px solid var(--line)}
.chap-area-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 14px}
.chap-area-h h3{margin:0;font-size:24px;color:var(--cobalt)}
.chap-area-h span{font-size:14px;color:var(--ink-3)}
.chap-area .chap-search{margin-top:0}
.chap-area .tgroup:first-child{margin-top:18px}
@media (max-width:700px){.chap-area{padding:16px 12px 18px;margin-left:-6px;margin-right:-6px}}
/* the blog's own colour: light cobalt (replaces the scarlet → blue gradient) */
:root{--gold:#6F8FE0;--gold-d:#1A47B8;--gold-t:#EEF3FD}
.s-blog .panel.try{background:var(--gold-d);border-color:transparent}
.s-blog .try .bar .seg{box-shadow:inset -2px 0 0 var(--gold-d)}
.s-blog .try .bar .seg:nth-child(even){background:#F3E3C2}
.s-blog .try .bar .gap{background:repeating-linear-gradient(135deg,#F2CF7E 0 3px,transparent 3px 7px)}
.s-blog .try .next .arrow{color:#F2CF7E}
.blog-tint .post::before{background:var(--gold)}
.s-blog .phead{background:radial-gradient(60% 220px at 8% 0%,rgba(110,145,230,.16),transparent 70%),radial-gradient(55% 220px at 92% 0%,rgba(110,145,230,.10),transparent 70%),var(--card)}
/* "Try this" in light cobalt: pale blue ground, dark text, soft blue details */
.s-blog .panel.try{background:linear-gradient(var(--gold-t),var(--gold-t));border:1px solid #C9D6F7;color:var(--ink)}
.s-blog .panel.try h2.start{color:var(--gold-d)} .s-blog .panel.try p.start-sub{color:var(--ink)}
.s-blog .try .bar{background:#fff;box-shadow:inset 0 0 0 1px #C3D2F5}
.s-blog .try .bar .seg{background:#B9CCF5;box-shadow:inset -2px 0 0 #fff}
.s-blog .try .bar .seg:nth-child(even){background:#DDE7FC}
.s-blog .try .bar .gap{background:repeating-linear-gradient(135deg,#B9CCF5 0 3px,transparent 3px 7px)}
.s-blog .try .controls label,.s-blog .try .readout dt{color:var(--ink-3)}
.s-blog .try .controls input{accent-color:var(--gold)}
.s-blog .try .note{color:var(--ink-2)}
.s-blog .try .next{color:var(--gold-d)} .s-blog .try .next .arrow{color:var(--gold)}
/* the blog rows use the chevron from the logo, in cobalt */
.post .go{color:var(--cobalt);display:grid;place-items:center}
.post .go .chev{width:11px;height:14px;display:block}
/* every topic marker is a cobalt square */
.tgroup .dot{background:var(--cobalt)}
/* homepage: the chapter list folds away under its heading */
.chfold{margin:0 0 6px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.chfold > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;margin:0;padding:12px 16px}
.chfold > summary::-webkit-details-marker{display:none}
.chfold > summary::after{content:"›";margin-left:auto;font-size:20px;line-height:1;color:var(--cobalt);transition:transform .2s}
.chfold[open] > summary::after{transform:rotate(90deg)}
.chfold .chlist{padding:0 16px 8px}
/* the folding chapter list stands out: light cobalt card, icon, title, logo chevron */
.chfold{border-color:#C9D6F7;background:#EEF3FD;border-radius:12px;margin:0 0 8px}
.chfold > summary{align-items:center;gap:16px;padding:14px 16px}
.chfold > summary::after{content:none}
.chfold .cf-ic{width:44px;height:44px;border-radius:10px;background:#fff;color:var(--cobalt);display:grid;place-items:center;flex:0 0 auto}
.chfold .cf-ic svg{width:21px;height:21px}
.chfold .cf-t{display:flex;flex-direction:column;gap:1px}
.chfold .cf-t b{font-size:17px;color:var(--cobalt)}
.chfold .cf-t small{font-size:13.5px;color:var(--ink-3)}
.chfold .cf-go{margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--cobalt-solid);color:#fff;display:grid;place-items:center;transition:transform .2s}
.chfold .cf-go .chev{width:10px;height:13px}
.chfold[open] .cf-go{transform:rotate(90deg)}
.chfold[open]{background:var(--card)}
.chfold .chlist{padding:0 16px 10px}
/* swap: the Chapters heading takes the serif title, Complete notes takes the plain sans of the other rows */
.chfold .cf-t b{font-family:var(--serif);font-weight:700;font-size:clamp(21px,2.4vw,25px);line-height:1.2}
.chap.book.main .t{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.005em}
/* the Chapters fold wears the same cobalt-to-white gradient as Complete notes */
.chfold{background:var(--card);border:1px solid var(--line);overflow:hidden}
.chfold > summary{background:linear-gradient(100deg,#2A55C8 0%,#4F78DE 38%,#AFC4F3 66%,#EEF3FD 86%,#FFFFFF 100%)}
.chfold .cf-ic{background:rgba(255,255,255,.14);color:#fff}
.chfold .cf-t b{color:#fff}
.chfold .cf-t small{color:rgba(255,255,255,.75)}
.chfold .cf-go{background:var(--card);color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--line-input)}
.chfold[open]{background:var(--card)}
.chfold[open] .chlist{padding-top:6px}
/* Start here, as the first row inside the Chapters list */
.chlist li.start .n{display:grid;place-items:center;color:var(--cobalt)}
.chlist li.start .n svg{width:16px;height:16px}
.chlist li.start .st-s{font-size:12.5px;color:var(--ink-4)}
/* Notes page: Start here as the first row of the Chapters area */
.chap-area .start-row{margin:0 0 14px}
.chap-area .start-row .chapters{margin-top:0}
.chap-area .start-row .chap .n{color:var(--cobalt)}
.chap-area .start-row .chap .n svg{width:18px;height:18px}
/* Coming later: titles only, as a sleek row of outlined pills under each small heading */
.soon-groups{display:grid;gap:18px;margin-top:22px}
.soon-group h3{margin:0 0 8px;padding:0;border:0}
.soon-group ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.soon-group li{margin:0;padding:6px 13px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink-2);background:var(--card)}
/* Coming later: a short note and one plain list */
.soon-note{margin:6px 0 14px;font-family:var(--sans);font-size:16px;color:var(--ink-3)}
.soon-list{list-style:none;margin:0;padding:0;max-width:520px;border-top:1px solid var(--line)}
.soon-list li{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
.soon-list li::before{content:"";flex:0 0 auto;width:10px;height:10px;border:1.5px solid var(--cobalt);border-radius:2px}
/* How each chapter works: one sleek list, term then a short line */
.how-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.how-list li{display:grid;grid-template-columns:14px 230px 1fr;gap:12px;align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--line)}
.how-list li::before{content:"";width:10px;height:10px;border:1.5px solid var(--cobalt);border-radius:2px;align-self:center}
.how-list b{font-size:16px;color:var(--ink)}
.how-list span{font-size:15px;color:var(--ink-3)}
@media (max-width:640px){.how-list li{grid-template-columns:14px 1fr}.how-list span{grid-column:2}}
/* features that exist: a ticked box (Coming later keeps empty boxes) */
.how-list li::before{width:14px;height:14px;border:0;border-radius:0;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='.75' y='.75' width='12.5' height='12.5' rx='2' fill='none' stroke='%231A47B8' stroke-width='1.5'/%3E%3Cpath d='M3.6 7.2l2.3 2.3 4.6-5' fill='none' stroke='%231A47B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.how-list li{grid-template-columns:16px 230px 1fr}
/* page headings carry the same faint lattice as the hero */
.phead{position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;background-image:var(--lattice);background-size:56px 97px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 100%)}
.phead > *{position:relative}
/* Complete notes: a plain row like the others (no gradient) */
.chap.book.main{background:var(--card);color:var(--ink);padding:14px 16px;border:1px solid var(--line)}
.chap.book.main .n{background:var(--tint);color:var(--cobalt)}
.chap.book.main .t{color:var(--ink)}
.chap.book.main .s{color:var(--ink-4)}
.chap.book.main:hover{box-shadow:0 6px 18px -12px rgba(26,71,184,.35)}
/* the door section on a plain white card: no wash, no lattice */
.door-band{background:var(--card);border:1px solid var(--line)}
.door-band::before{content:none}
.door-card{background:var(--card);border:1px solid var(--line);box-shadow:none}
@media (prefers-color-scheme:dark){.door-band{background:var(--card);border-color:var(--line)}}
/* blog list: a distinct light-cobalt frame, with a cobalt edge on the row you point at */
.posts{border:1.5px solid #B9CBF3;box-shadow:0 10px 26px -20px rgba(26,71,184,.45)}
.post{border-left:3px solid transparent}
.post:hover{border-left-color:var(--cobalt)}
@media (prefers-color-scheme:dark){.posts{border-color:#2F437A}}
/* the question of the week reads in the sans */
.door-text{font-family:var(--sans);font-size:19px}
/* the door section back on cobalt: white type and a white-line door, the question on a white card */
.door-band{background:var(--cobalt-solid);border:1px solid transparent;color:#fff}
.door-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M0 0L56 97M56 0L0 97M0 48.5H56'/%3E%3Cpath d='M28 0L56 48.5L28 97L0 48.5Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/56px 97px}
.door-line{color:#fff} .door-sub{color:rgba(255,255,255,.85)}
.door-art .frame{stroke:#fff} .door-art .floor{stroke:#fff}
.door-art .leaf path:first-child{fill:var(--cobalt-d);stroke:#fff}
.door-art .leaf circle{fill:#fff}
.door-art .panel-line{stroke:rgba(255,255,255,.55)}
.door-art .ray{stroke:#FFC2C2}
.door-card{background:var(--card);border:0;box-shadow:0 12px 28px -18px rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){.door-band{background:#1E3A8F}}
/* feedback topics: square-cornered, joined into one sleek segmented bar */
.seg{gap:0;display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg label + label span{border-left:1px solid var(--line)}
.seg span{border:0;border-radius:0;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3);background:var(--card)}
.seg span:hover{color:var(--ink);background:var(--tint-2)}
.seg input:checked + span{background:var(--cobalt-solid);color:#fff}
.letter-page .sign .cred{margin-top:2px}
/* back to top: a round cobalt button with the logo's chevron turned upward */
.to-top{position:fixed;right:20px;bottom:22px;z-index:30;width:44px;height:44px;border-radius:50%;background:var(--cobalt-solid);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(13,31,82,.55);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s,background .15s}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--cobalt-d)}
.to-top svg{width:12px;height:15px;transform:rotate(-90deg)}
@media print{.to-top{display:none}}
/* the note: a narrow reading column (about 60–70 characters a line) with clear paragraph spacing */
.hello-in{max-width:62ch;margin:0 auto 0 0}
.hello-in p{margin:0 0 16px}
.hello .hello-links{gap:24px}
/* About: Background as a quiet list; "Using BetterMath" set apart as a muted notice */
#background .facts{margin:6px 0 16px}
.bg-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bg-list li{padding:10px 2px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.panel.using-note{background:var(--tint-2);border-style:dashed}
.panel.using-note h2.start{font-size:22px;color:var(--ink-2)}
.panel.using-note .use{font-size:15.5px;color:var(--ink-3)}
.bg-text p{margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--ink)}
#background .facts{margin:18px 0 0}
.form-h{margin:20px 0 12px;font-family:var(--sans);font-size:17px;color:var(--ink)}
#corrections .also{margin:18px 0 0;font-size:15px;color:var(--ink-3)}
.panel.using-note .use{margin:0 0 10px}
.panel.explore .btn{margin-top:4px}
/* "Every problem is …" as a quiet tagline under the buttons: small, left-aligned, no rule above it */
.hero h1.hero-line{display:block;grid-column:auto;margin:20px 0 0;font-size:clamp(19px,1.9vw,22px);line-height:1.3;font-weight:700;text-align:left;white-space:normal;color:var(--ink-2)}
.hero h1.hero-line .l,.hero h1.hero-line .door-l2{display:inline;text-align:left}
.hero-body .motto{margin-top:12px}
/* the triangle's explanation: small and muted */
.tri-say{font-size:13.5px;color:var(--ink-4);height:62px}
.tri-say b{color:var(--ink-3);font-weight:700}
.tri-say .fact{font-size:12.5px;color:var(--ink-4)}
/* the note heading may run wider than the 62ch text column, so it stays on one line */
.hello-in h2.start{max-width:none;width:max-content;max-width:calc(100vw - 80px)}
/* Practice worksheets: one row per chapter (cobalt when out, gray "Later" otherwise); each opens to its sheets */
.pr-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 14px}
.pr-head h2{margin:0}
.pr-head span{font-size:14px;color:var(--ink-3)}
.pr-table{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
.pr-ch{border-top:1px solid var(--line)}
.pr-ch:first-child{border-top:0}
.pr-ch > summary,.pr-ch .sum{display:grid;grid-template-columns:44px 1fr auto 18px;align-items:center;gap:10px;padding:11px 14px;list-style:none;cursor:pointer;font-size:15.5px}
.pr-ch .sum{grid-template-columns:44px 1fr auto;cursor:default}
.pr-ch > summary::-webkit-details-marker{display:none}
.pr-ch > summary::after{content:"›";font-size:20px;line-height:1;color:var(--cobalt);transition:transform .2s;justify-self:end}
.pr-ch[open] > summary::after{transform:rotate(90deg)}
.pr-ch .n{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--cobalt);text-align:center}
.pr-ch .t{font-weight:700;color:var(--ink)}
.pr-ch .cnt{font-size:13px;font-weight:600;color:var(--cobalt)}
.pr-ch.off .n,.pr-ch.off .t,.pr-ch.off .cnt{color:var(--ink-4)}
.pr-ch.off > summary::after{color:var(--ink-4)}
.pr-list{list-style:none;margin:0;padding:0 0 8px}
.pr-list li a,.pr-list li.off{display:grid;grid-template-columns:44px 1fr auto auto;gap:12px;align-items:baseline;padding:7px 14px 7px 58px;font-size:14.5px;text-decoration:none;color:var(--ink-2)}
.pr-list li a:hover{background:var(--tint-2)}
.pr-list .sec{font-family:var(--mono);font-size:12px;color:var(--ink-4)}
.pr-list small{font-size:12.5px;color:var(--ink-4);white-space:nowrap}
.pr-list .pdf{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--cobalt)}
.pr-list .pdf svg{width:13px;height:13px}
.pr-list li.off{color:var(--ink-4)}
.pr-list li.off .pdf{color:var(--ink-4);font-weight:600}
@media (max-width:560px){.pr-list li a,.pr-list li.off{grid-template-columns:36px 1fr auto;padding-left:18px}.pr-list small{display:none}}
/* chapter pages: the chapter's sheets under the download buttons */
.ch-practice{margin:22px 0 0;max-width:640px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
.ch-practice h3{margin:0;padding:10px 14px;font-family:var(--sans);font-size:15px;border-bottom:1px solid var(--line)}
.ch-practice h3 em{font-style:normal;font-weight:600;font-size:12.5px;color:var(--ink-4);margin-left:6px}
.ch-practice .pr-list{padding:4px 0 6px}
.ch-practice .pr-list li a,.ch-practice .pr-list li.off{padding-left:14px}
/* homepage announcement: one slim line above the hero */
.announce{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 14px;padding:9px 16px;border:1px solid #C9D6F7;border-radius:8px;background:var(--card);font-size:14.5px}
.announce .ann-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--cobalt-solid);padding:2px 8px;border-radius:3px}
.announce a{color:var(--ink);font-weight:600;text-decoration:none}
.announce a:hover{color:var(--cobalt)}
.announce a .arrow{color:var(--cobalt)}
.announce .ann-sep{color:var(--ink-4)}
@media (max-width:640px){.announce .ann-sep{display:none}.announce a{flex:1 1 100%;padding-left:0}.announce .ann-tag{margin-bottom:2px}}
/* the fixed triangle column must never be wider than a phone screen */
.hero .hero-tri{width:min(380px,100%)}
.hero .hero-tri svg{max-width:100%;height:auto}
/* announcement: a thin scarlet strip attached to the top of every page */
.annbar{position:relative;background:var(--scarlet);color:#fff;font-size:14px}
.annbar .ab-in{max-width:var(--wide);margin:0 auto;padding:8px 48px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;text-align:center}
.annbar .ab-tag{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:var(--scarlet);padding:2px 7px;border-radius:3px}
.annbar a{color:#fff;font-weight:600;text-decoration:none}
.annbar a:hover{text-decoration:underline;text-underline-offset:3px}
.annbar a .arrow{color:#fff}
.annbar .ab-sep{opacity:.7}
.annbar .ab-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;opacity:.85}
.annbar .ab-x:hover{background:rgba(255,255,255,.18);opacity:1}
@media (max-width:640px){.annbar .ab-in{padding:8px 44px 8px 16px;justify-content:flex-start;text-align:left}.annbar .ab-sep{display:none}.annbar a{flex:1 1 100%}}
/* announcement strip: slimmer, and a deeper, calmer scarlet */
.annbar{background:#B23A3A;font-size:13px}
.annbar .ab-in{padding:5px 44px;gap:2px 10px}
.annbar .ab-tag{font-size:9.5px;padding:1px 6px;background:rgba(255,255,255,.2);color:#fff}
.annbar a{font-weight:600;color:#FFF5F3}
.annbar .ab-x{width:24px;height:24px;font-size:17px}
@media (max-width:640px){.annbar .ab-in{padding:6px 40px 6px 16px}}
/* worksheet rows: the section number is the link (cobalt when out, gray otherwise); chapter rows open with a chevron on the left */
.pr-list li{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:baseline;padding:7px 14px 7px 58px;font-size:14.5px;color:var(--ink-2)}
.pr-list li .sec{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink-4);text-decoration:none}
.pr-list li a.sec{color:var(--cobalt);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--cobalt) 35%,transparent);text-underline-offset:3px}
.pr-list li a.sec:hover{text-decoration-color:var(--cobalt)}
.pr-list li.off{color:var(--ink-4)}
.pr-ch > summary{grid-template-columns:18px 36px 1fr auto}
.pr-ch .sum{grid-template-columns:18px 36px 1fr auto}
.pr-ch > summary::after{content:none}
.pr-ch > summary::before{content:"›";font-size:20px;line-height:1;color:var(--cobalt);transition:transform .2s;justify-self:center}
.pr-ch.off > summary::before{color:var(--ink-4)}
.pr-ch[open] > summary::before{transform:rotate(90deg)}
.pr-ch .sum::before{content:""}
.ch-practice .pr-list li{padding-left:14px}
@media (max-width:560px){.pr-list li{grid-template-columns:44px 1fr;padding-left:18px}.pr-list small{display:none}}
.pr-list li .t{font-weight:400;color:inherit}
.pr-list li.off .t{color:var(--ink-4)}
/* the Chapters card folds; it starts open */
details.chap-area > summary{list-style:none;cursor:pointer;margin:0}
details.chap-area > summary::-webkit-details-marker{display:none}
details.chap-area > summary::before{content:"›";font-size:24px;line-height:1;color:var(--cobalt);margin-right:4px;transition:transform .2s;display:inline-block;align-self:center}
details.chap-area[open] > summary::before{transform:rotate(90deg)}
details.chap-area[open] > summary{margin-bottom:14px}
/* folding rows: a clear, bold chevron (the logo's stroke) instead of the text "›" */
:root{--chev:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 7 14 18'%3E%3Cpath d='M13 9.5 L20 16 L13 22.5' fill='none' stroke='%231A47B8' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev-gray:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 7 14 18'%3E%3Cpath d='M13 9.5 L20 16 L13 22.5' fill='none' stroke='%239AA0AA' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
details.chap-area > summary::before,.pr-ch > summary::before{content:"";width:10px;height:13px;background:var(--chev) center/contain no-repeat;font-size:0}
.pr-ch.off > summary::before{background-image:var(--chev-gray)}
details.chap-area > summary::before{width:11px;height:15px;margin-right:8px}
/* worksheet list: sleek rows aligned under the chapter title, hairline dividers */
.pr-ch[open] > summary{border-bottom:1px solid var(--line)}
.pr-list{padding:0;background:var(--tint-2,#F6F8FC)}
.pr-list li{grid-template-columns:36px 1fr auto;gap:10px;align-items:baseline;padding:8px 14px 8px 42px;font-size:14.5px;line-height:1.4;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.pr-list li:first-child{border-top:0}
.pr-list li .sec{font-size:12.5px;text-align:left}
.pr-list li a.sec{text-decoration:none}
.pr-list li:has(a.sec):hover{background:color-mix(in srgb,var(--cobalt) 6%,transparent)}
.pr-list li:has(a.sec):hover a.sec{text-decoration:underline;text-underline-offset:3px}
.pr-list li .t{color:var(--ink)}
.pr-list li small{font-size:12px;color:var(--ink-4)}
.ch-practice .pr-list{background:none}
.ch-practice .pr-list li{padding-left:14px}
@media (max-width:560px){.pr-list li{grid-template-columns:36px 1fr;padding-left:18px}}
.pr-list li a.sec,.pr-list li span.sec{display:inline;padding:0;font-size:12.5px;white-space:nowrap}
.pr-list li a.sec:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:2px}
.pr-list li{grid-template-columns:40px 1fr auto;padding-top:7px;padding-bottom:7px}
@media (max-width:560px){.pr-list li{grid-template-columns:40px 1fr}}
.pr-list li small{display:inline;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){.pr-list li{grid-template-columns:40px 1fr}.pr-list li small{display:block;grid-column:2;margin-top:1px}}
@media (max-width:560px){.pr-list li{row-gap:0}.pr-list li small{line-height:1.3;margin-top:0}}
/* maths-symbol icons on the book cards (§ ∫ ∴ x = ?), set in the serif */
svg.gl{font-family:var(--serif);overflow:visible}
.chap .n svg.gl,.cf-ic svg.gl{width:28px;height:28px}
/* lean blog list: no dot, sans titles, one-line meta, hairline frame */
.posts{border:1px solid var(--line);box-shadow:none;border-radius:10px;padding:0}
.post,.blog-tint .post{grid-template-columns:1fr auto 14px;gap:4px 20px;padding:14px 18px}
.post::before,.blog-tint .post::before{content:none}
.post .title{font-family:var(--sans);font-size:16.5px;font-weight:700;line-height:1.3}
.post .hook{font-family:var(--sans);font-style:normal;font-size:14px;line-height:1.45;color:var(--ink-3)}
.post .when{font-size:12.5px}
.post .when br{display:none}
.post .when .sep{margin:0 5px}
@media (max-width:640px){.post,.blog-tint .post{grid-template-columns:1fr 14px;padding:13px 16px}.post .when{grid-column:1;grid-row:2;text-align:left}}
@media (prefers-color-scheme:dark){.posts{border-color:var(--line)}}
.post,.blog-tint .post{grid-template-columns:1fr 14px;row-gap:2px}
.post .when{grid-column:1;grid-row:2;text-align:left;margin-top:2px}
.post .go{grid-column:2;grid-row:1/span 2}
/* degrees after the name */
.hello .sig-deg{font-size:13.5px;color:var(--ink-3);margin:0 0 14px;letter-spacing:.01em}
.letter-page .sign span.deg{color:var(--ink-3);margin-top:8px}
.letter-page .sign span.deg + span{margin-top:2px}
/* resource cards as one link: no buttons, a logo chevron on the right */
a.card-link{text-decoration:none;color:inherit;cursor:pointer}
a.card-link:hover{border-color:var(--cobalt);background:color-mix(in srgb,var(--cobalt) 3%,var(--card))}
a.card-link:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
a.card-link .acts.go{display:grid;place-items:center;width:22px;color:var(--cobalt);transition:transform .2s}
a.card-link .acts.go .chev{width:11px;height:15px;display:block}
a.card-link:hover .acts.go{transform:translateX(3px)}
@media (max-width:520px){a.card-link.chap{grid-template-columns:44px 1fr 22px}a.card-link .acts.go{grid-column:3;grid-row:1/span 2;margin-top:0}}
/* lean resource cards: no icon square, slimmer rows */
a.card-link.chap.book,a.card-link.chap.book.main{grid-template-columns:1fr 22px;gap:1px 14px;padding:11px 16px}
a.card-link .t{grid-column:1;font-size:15.5px}
a.card-link .s{grid-column:1;font-size:13px}
a.card-link .acts.go{grid-column:2;grid-row:1/span 2}
@media (max-width:520px){a.card-link.chap{grid-template-columns:1fr 22px}}
/* chapter table: smaller, lighter Open/Read buttons; no flag on Start here */
.tgroup .chapters .chap{grid-template-columns:52px 1fr 76px}
.tgroup .chapters .chap .acts a.dl{font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:6px}
@media (max-width:520px){.tgroup .chapters .chap{grid-template-columns:40px 1fr}}
a.card-link.chap.book .t{grid-column:1;font-size:15.5px}
a.card-link.chap.book .s{grid-column:1;font-size:13px}
a.card-link.chap.book .acts.go{grid-column:2;grid-row:1/span 2}
/* lean cards keep their icon: a smaller square beside slimmer text */
a.card-link.chap.book,a.card-link.chap.book.main{grid-template-columns:36px 1fr 22px;gap:1px 14px;padding:10px 16px}
a.card-link.chap.book .n{grid-column:1;grid-row:1/span 2;width:36px;height:36px;border-radius:9px}
a.card-link.chap.book .n svg{width:20px;height:20px}
a.card-link.chap.book .n svg.gl{width:24px;height:24px}
a.card-link.chap.book .t,a.card-link.chap.book .s{grid-column:2}
a.card-link.chap.book .acts.go{grid-column:3;grid-row:1/span 2}
@media (max-width:520px){a.card-link.chap.book{grid-template-columns:36px 1fr 22px}}
/* Chapters card: plain white, set apart by a cobalt border instead of the gradient */
.chfold{background:var(--card);border:1.5px solid var(--cobalt);border-radius:12px}
.chfold > summary{background:none}
.chfold .cf-ic{background:var(--tint);color:var(--cobalt)}
.chfold .cf-t b{color:var(--cobalt)}
.chfold .cf-t small{color:var(--ink-4)}
.chfold .cf-go{background:var(--cobalt-solid);color:#fff;box-shadow:none}
.chfold > summary:hover{background:color-mix(in srgb,var(--cobalt) 3%,transparent)}
.chfold[open] > summary{border-bottom:1px solid var(--line)}
/* Chapters card: the same bare cobalt chevron as the cards below (turns down when open) */
.chfold .cf-go{width:22px;height:22px;border-radius:0;background:none;color:var(--cobalt);box-shadow:none}
.chfold .cf-go .chev{width:11px;height:15px}