/* makautnotes · website theme. Clean, minimal, light + dark. */
:root{
  /* makautnotes.com palette */
  --bg:#faf9f6; --surface:#ffffff; --surface-2:#f1efe8; --surface-3:#e9e6dd;
  --text:#14181f; --muted:#4a5260; --faint:#8b909a; --border:#e4e1d8; --border-2:#dad7cf;
  --accent:#3347c9; --accent-2:#5b6be0; --accent-soft:#e8ebfb; --accent-line:rgba(51,71,201,.35);
  --hl:#ffe98a; --on-hl:#14181f; --wash-a:#fff1c7; --wash-b:#e2e6ff; --deep:#1f2a5c;
  --star:#c98f00; --link:#3347c9;
  --shadow:0 1px 2px rgba(20,24,31,.04); --shadow-lg:0 12px 32px -14px rgba(20,24,31,.20);
  --code-bg:#f1efe8; --hr-c:rgba(74,82,96,.36); --hr:linear-gradient(90deg,transparent,var(--hr-c) 8%,var(--hr-c) 92%,transparent);
  --c-question:176,124,0; --c-summary:51,71,201; --c-tip:30,123,79; --c-example:110,80,200;
  --c-note:51,71,201; --c-warning:194,59,46; --c-info:51,71,201;
  --radius:12px; --radius-lg:14px; --radius-sm:9px; --maxw:720px; --top:58px;
  --font:"Albert Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --serif:"Source Serif 4",ui-serif,Georgia,Cambria,"Times New Roman",serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0f1218; --surface:#171b23; --surface-2:#141820; --surface-3:#222734;
  --text:#f2f0ea; --muted:#a9b0bd; --faint:#6e7584; --border:#262b36; --border-2:#2f3542;
  --accent:#8a9bff; --accent-2:#aab6ff; --accent-soft:#232a4d; --accent-line:rgba(138,155,255,.40);
  --hl:#ffe98a; --on-hl:#14181f; --wash-a:#1e2130; --wash-b:#262e55; --deep:#1b2142;
  --star:#f2c14e; --link:#9aa9ff;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 14px 34px -14px rgba(0,0,0,.65);
  --code-bg:#222734; --hr-c:rgba(169,176,189,.26);
  --c-question:240,196,90; --c-summary:138,155,255; --c-tip:80,200,140; --c-example:170,140,255;
  --c-note:138,155,255; --c-warning:240,120,100; --c-info:138,155,255;
  color-scheme:dark;
}
/* Paper: warm cream notebook, brown-black ink, deep blue links. A light-family theme (light rules apply, then these). */
[data-theme="paper"]{
  --bg:#f5ecd7; --surface:#fdf8ec; --surface-2:#f3e8cf; --surface-3:#e9dcbd;
  --text:#2a2318; --muted:#5e5444; --faint:#998d76; --border:#e3d6b6; --border-2:#d7c8a3;
  --accent:#2f4aa8; --accent-2:#4b63c0; --accent-soft:#e4e0ea; --accent-line:rgba(47,74,168,.35);
  --hl:#ffdf6e; --on-hl:#2a2318; --wash-a:#fbe7b6; --wash-b:#e2e0ee; --deep:#2a2f55;
  --star:#a87400; --link:#2f4aa8;
  --shadow:0 1px 2px rgba(60,44,20,.06); --shadow-lg:0 12px 32px -14px rgba(60,44,20,.24);
  --code-bg:#f1e5c9; --hr-c:rgba(94,84,68,.34);
  --c-question:160,110,0; --c-summary:47,74,168; --c-tip:38,115,72; --c-example:104,74,184;
  --c-note:47,74,168; --c-warning:182,56,40; --c-info:47,74,168;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-goal) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font:18px/1.75 var(--font);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .2s,color .2s}
a{color:var(--link);text-decoration:none}
article a:not(.anchor){text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
article a:not(.anchor):hover{text-decoration-color:currentColor}
::selection{background:var(--accent-soft)}

/* ---------- top bar ---------- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:70}
.topbar{position:sticky;top:0;z-index:60;height:var(--top);display:flex;align-items:center;gap:.5rem;padding:0 1rem;
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.5) blur(12px);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:600;color:var(--text);font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.brand .logo{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;border:1px solid var(--border-2);background:var(--surface);color:var(--text)}
.brand .logo svg{width:17px;height:17px}
.brand mark{background:var(--hl);color:var(--on-hl);padding:0 .12em;border-radius:3px}
.ctx{display:flex;align-items:center;gap:.5rem;font-size:.92rem;min-width:0}
.ctx .slash{color:var(--border-2);font-size:1.1rem}
.ctx a{color:var(--muted);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx a:hover{color:var(--text)}
.spacer{flex:1}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;height:36px;padding:0 .8rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);font:500 .85rem var(--font);transition:color .15s,border-color .15s,background .15s}
.iconbtn.sq{width:36px;padding:0}
.iconbtn:hover{color:var(--text);border-color:var(--border-2)}
.iconbtn svg{width:17px;height:17px}
#tocBtn,#navBtn{display:none}
.theme-dark-icon,.theme-paper-icon{display:none}
[data-theme="dark"] .theme-dark-icon,[data-theme="paper"] .theme-paper-icon{display:inline}
[data-theme="dark"] .theme-light-icon,[data-theme="paper"] .theme-light-icon{display:none}

/* ---------- layout: sidebar · article · contents ---------- */
.layout{display:grid;grid-template-columns:var(--pw) minmax(0,1fr) var(--pw);column-gap:32px;width:min(calc(var(--col) + 2 * 268px + 64px),calc(100% - 48px));margin:0 auto;padding:72px 0 0;
  --pw:clamp(240px,calc((100% - var(--col) - 64px) / 2),268px)}   /* side panels hug the text 32px away; they slim to 240px, then the text narrows */
.layout.no-side.no-toc,.layout.home{grid-template-columns:minmax(0,1fr)}
@media (min-width:1241px){                       /* both side columns stay reserved: pinning / hiding a panel never moves the text */
  .layout:not(.home):not(.no-side.no-toc) > .sidenav{grid-column:1}
  .layout:not(.home):not(.no-side.no-toc) > article{grid-column:2}
  .layout:not(.home):not(.no-side.no-toc) > aside.toc{grid-column:3}
}
article[class^="kind-"]{min-width:0;width:100%;max-width:var(--maxw);margin:0 auto;padding:2.4rem 0 4rem}
.layout.home article{max-width:1040px}

/* sidebar */
.sidenav{position:sticky;top:12px;align-self:start;height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;
  padding:16px .6rem 3rem 0;font-size:.875rem;line-height:1.4;scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
.sn-head{padding:0 .5rem .9rem}
.sidenav a.sn-subject{display:block;color:var(--text);padding:.15rem 0;font-family:var(--serif);font-size:1.1rem;font-weight:650;font-size:.98rem;letter-spacing:-.01em;line-height:1.3}
.sn-subject small{display:block;margin-top:.2rem;color:var(--faint);font:500 .78rem var(--font);letter-spacing:.03em}
.sn-pages{display:flex;flex-direction:column;gap:1px;padding-bottom:1rem;margin-bottom:.8rem;border-bottom:1px solid var(--border)}
.sidenav a{color:var(--muted);border-radius:7px;display:block}
.sidenav a:hover{color:var(--text);background:var(--surface-2)}
.sidenav a.active{color:var(--accent);background:var(--accent-soft);font-weight:600}
.sn-page{padding:.36rem .55rem}
.sn-label{padding:.1rem .55rem .35rem;color:var(--muted);font:700 1.2rem/1.2 var(--hand)}
.sn-unit summary{display:grid;grid-template-columns:14px auto 1fr auto;align-items:center;gap:.45rem;padding:.42rem .55rem;border-radius:7px;
  cursor:pointer;list-style:none;color:var(--text);user-select:none}
.sn-unit summary::-webkit-details-marker{display:none}
.sn-unit summary:hover{background:var(--surface-2)}
.sn-unit summary .chev{width:14px;height:14px;color:var(--faint);transition:transform .18s}
.sn-unit[open] summary .chev{transform:rotate(90deg)}
.sn-unit .un{font-weight:600;white-space:nowrap;color:var(--accent)}
.sn-unit .uname{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-unit .ucount{color:var(--faint);font:500 .78rem var(--font);font-variant-numeric:tabular-nums}
.sn-topics{margin:.1rem 0 .5rem 1.05rem;padding-left:.6rem;border-left:1px solid var(--border)}
.sn-topic{display:flex !important;gap:.5rem;padding:.3rem .5rem}
.sn-topic .tid{flex:none;min-width:2.1em;color:var(--faint);font:500 .8rem/1.6 var(--font)}
.sn-topic.active .tid{color:inherit}
.sn-topic.off{color:var(--faint);opacity:.6;cursor:default}
.sn-overview{color:var(--muted);font-style:italic}

/* contents */
aside.toc{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:auto;padding:16px 0 2rem;font-size:.82rem}
aside.toc h4{margin:0 0 .5rem;font:700 1.25rem/1.2 var(--hand);color:var(--muted)}
aside.toc a{display:block;color:var(--muted);padding:.3rem 0 .3rem .8rem;border-left:1px solid var(--border);line-height:1.35}
aside.toc a.l3{padding-left:1.6rem}
aside.toc a:hover{color:var(--text)}
aside.toc a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}

/* ---------- headings + text ---------- */
.crumbs{font-size:.82rem;color:var(--faint);display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:.9rem}
.crumbs a{color:var(--muted);text-decoration:none !important}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{color:var(--border-2)}
h1{font-family:var(--serif);font-size:2.35rem;line-height:1.15;margin:0 0 .9rem;letter-spacing:-.015em;font-weight:600}
h1 .stars{color:var(--star);font-size:.55em;vertical-align:.3em;margin-left:.45rem;letter-spacing:.06em;white-space:nowrap;display:inline-block}
.meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.6rem}
h2{font-family:var(--serif);font-size:1.6rem;line-height:1.25;margin:2.2rem 0 .8rem;letter-spacing:-.01em;font-weight:600;position:relative}
h2 .anchor,h3 .anchor{position:absolute;left:-1.1em;color:var(--faint);opacity:0;font-weight:400}
h2:hover .anchor,h3:hover .anchor{opacity:1}
h3{font-family:var(--serif);font-size:1.22rem;margin:1.7rem 0 .5rem;font-weight:600;position:relative}
p{margin:.65rem 0}
ul,ol{padding-left:1.35rem;margin:.5rem 0}
li{margin:.25rem 0}
li::marker{color:var(--accent)}
ol>li::marker{color:var(--muted);font-weight:600}
/* K49 numbering: 1 → a → i by nesting level */
ol ol{list-style-type:lower-alpha}
ol ol ol{list-style-type:lower-roman}
strong{font-weight:650}
mark.term{color:inherit;background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%);padding:0 .1em;border-radius:2px}
[data-theme="dark"] mark.term{background:linear-gradient(transparent 55%,rgba(255,233,138,.30) 55%,rgba(255,233,138,.30) 92%,transparent 92%)}
mark{background:var(--hl);color:var(--on-hl);padding:0 .15em;border-radius:3px}
hr{border:0;height:1px;background:var(--hr);margin:2.2rem 0}

/* tags + code */
code{font:.85em/1.4 var(--mono);background:var(--code-bg);padding:.12em .4em;border-radius:5px}
.tag{display:inline-block;font:550 .72rem/1.55 var(--font);padding:.06rem .55rem;border-radius:999px;vertical-align:.1em;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border);white-space:nowrap;margin:0 .08rem}
.tag-marks{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.tag-must{background:rgba(217,154,0,.13);color:#9a6d00;border-color:transparent}
[data-theme="dark"] .tag-must{color:var(--star)}
.tag-imp{background:rgba(var(--c-note),.11);color:rgb(var(--c-note));border-color:transparent}
.tag-corrected{background:rgba(var(--c-warning),.12);color:rgb(var(--c-warning));border-color:transparent}
.tag-pyq{background:rgba(var(--c-tip),.12);color:rgb(var(--c-tip));border-color:transparent}
.tag.tag-recent{background:#eaf6ee;color:#2f5a3c;border-color:#c3e3cc}
/* section tags: PYQ 5M (recent paper → yellow) · PYQ 2M · other (other MAKAUT papers → grey) */
h2 .tag-sec{font:600 .7rem/1.6 var(--font);letter-spacing:.01em;margin-left:.45rem;vertical-align:.3em;padding:.05rem .55rem;
  background:var(--hl);color:#4a3b00;border-color:#e9cf5c}
h2 .tag-sec.other{background:var(--surface-2);color:var(--muted);border-color:var(--border-2)}
[data-theme="dark"] h2 .tag-sec{background:rgba(255,233,138,.16);color:#f5dc7a;border-color:rgba(255,233,138,.30)}
[data-theme="dark"] h2 .tag-sec.other{background:var(--surface-3);color:var(--muted);border-color:var(--border-2)}
aside.toc a.pyq{position:relative}
aside.toc a.pyq::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:.45rem;vertical-align:.12em;background:#e3b81f}
aside.toc a.pyq.other::after{background:var(--faint);opacity:.7}
[data-theme="dark"] .tag.tag-recent{background:#1d3126;color:#bfe3c9;border-color:#2c5038}

/* tables */
.table-wrap{overflow-x:auto;margin:1.1rem 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.92rem;line-height:1.5}
th,td{padding:.6rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
th{background:var(--surface-2);font-weight:620;font-size:.82rem;color:var(--muted);white-space:nowrap}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:550}

/* callouts */
.callout{--c:var(--c-note);margin:1.2rem 0;border-radius:var(--radius);border:1px solid rgba(var(--c),.22);background:rgba(var(--c),.06);overflow:hidden}
.callout[data-callout="question"]{background:var(--wash-a);border-color:rgba(var(--c),.28)}
[data-theme="dark"] .callout[data-callout="question"]{background:rgba(255,233,138,.06)}
.callout[data-callout="summary"]{background:var(--accent-soft);border-color:transparent}
.callout[data-callout="question"]{--c:var(--c-question)} .callout[data-callout="summary"]{--c:var(--c-summary)}
.callout[data-callout="tip"]{--c:var(--c-tip)} .callout[data-callout="example"]{--c:var(--c-example)}
.callout[data-callout="note"]{--c:var(--c-note)} .callout[data-callout="warning"]{--c:var(--c-warning)}
.callout-title{display:flex;align-items:center;gap:.55rem;padding:.6rem 1.05rem;color:rgb(var(--c));list-style:none;cursor:default}
.callout-title>span:not(.count){font:700 1.38rem/1.2 var(--hand);letter-spacing:.01em}
details.callout>summary{cursor:pointer;user-select:none}
details.callout>summary:hover{background:rgba(var(--c),.05)}
details.callout>summary::-webkit-details-marker{display:none}
.callout-title svg{width:17px;height:17px;flex:none}
.callout-title .chev{margin-left:auto;transition:transform .2s;opacity:.7}
details.callout[open]>summary .chev{transform:rotate(90deg)}
.callout-title .count{font-weight:600;font-size:.72rem;padding:.02rem .5rem;border-radius:999px;background:rgba(var(--c),.14)}
.callout-body{padding:.1rem 1.1rem .85rem}
.callout-body>:first-child{margin-top:.2rem}
.callout[data-callout="question"] .callout-body li{padding:.4rem 0;margin:0;border-bottom:1px dashed rgba(var(--c),.22)}
.callout[data-callout="question"] .callout-body li:last-child{border-bottom:0}
.callout[data-callout="question"] .callout-body ul{list-style:none;padding-left:0}
.callout[data-callout="question"] .callout-body strong{color:rgb(var(--c-tip))}

/* math + diagrams */
.katex-display{overflow-x:auto;overflow-y:hidden;padding:.35rem 0;margin:.8rem 0}
.katex{font-size:1.05em}
td .katex{white-space:nowrap}   /* in text, formulas may wrap at = + − (KaTeX's own break points) so phones never scroll sideways */
.diagram{margin:1.3rem 0;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow-x:auto;text-align:center}
.diagram pre.mermaid{margin:0;background:none;font-size:0;min-height:40px}
.diagram pre.mermaid[data-processed]{font-size:inherit}
.diagram svg{max-width:100%;height:auto}
.diagram .node rect,.diagram .node polygon{rx:8px;ry:8px}
.stars-inline{color:var(--star);letter-spacing:.04em;font-size:.88em;white-space:nowrap}
.wikilink.unresolved{color:var(--muted);border-bottom:1px dashed var(--faint);cursor:help}

/* ---------- topic lists (index, unit index, priority) ---------- */
ul.topic-list{list-style:none;padding:.3rem 0;margin:.8rem 0 1.4rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
ul.topic-list li{position:relative;display:grid;grid-template-columns:2.8em minmax(0,1fr) auto;align-items:baseline;gap:.6rem;margin:0 1.1rem;
  padding:.62rem 0;border-bottom:1px solid var(--border);line-height:1.45;transition:background .12s}
ul.topic-list li:last-child{border-bottom:0}
ul.topic-list li:hover .tt{color:var(--accent)}
ul.topic-list .tid{color:var(--accent);font:600 .9rem var(--font)}
ul.topic-list .tt{color:var(--text);font-weight:450;text-decoration:none !important}
ul.topic-list a.tt::after{content:"";position:absolute;inset:0}
ul.topic-list li:hover a.tt{color:var(--accent)}
ul.topic-list .end{display:flex;gap:.35rem;align-items:baseline;justify-content:flex-end;white-space:nowrap}
ul.topic-list .end .tag{position:relative;z-index:1}
ul.topic-list li.off .tt{color:var(--faint);font-weight:450}
ul.topic-list li.off .stars-inline{opacity:.55}
h3>a.wikilink{color:var(--text)}
h3>a.wikilink:hover{color:var(--accent)}

/* ---------- pager + footer ---------- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:3.2rem}
.pager a{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  color:var(--text);text-decoration:none !important;font-weight:550;line-height:1.35;transition:border-color .15s,box-shadow .15s}
.pager a:hover{border-color:var(--accent-line);box-shadow:var(--shadow-lg)}
.pager small{color:var(--accent);font:700 1.15rem/1.1 var(--hand)}
.pager span{font-family:var(--serif);font-weight:600;font-size:1.05rem}
.pager .next{text-align:right;grid-column:2}
footer{color:var(--faint);font-size:.8rem;text-align:center;padding:2rem 1rem 3rem;border-top:1px solid var(--border)}
footer a{color:var(--muted)}
#toTop{position:fixed;right:1rem;bottom:1rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;box-shadow:var(--shadow-lg)}
#toTop.show{opacity:1;pointer-events:auto}
.scrim{display:none}

/* ---------- home (makautnotes.com style) ---------- */
.layout.home article{max-width:1080px;padding-top:1.6rem}
.hero{border-radius:var(--radius-lg);padding:4rem 3.2rem;background:linear-gradient(135deg,var(--wash-a) 0%,var(--surface-2) 55%,var(--wash-b) 100%)}
.pill{display:inline-block;padding:.3rem .9rem;border-radius:999px;background:var(--accent-soft);color:var(--text);font-weight:600;font-size:.92rem}
.hero h1{font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.08;margin:1.1rem 0 1rem}
@media (max-width:600px){.hero br.wide{display:none}}
.lede{max-width:520px;margin:0;color:var(--muted);font-size:1.2rem;line-height:1.6}
.sem{margin-top:2.4rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.sem-head{padding:1.5rem 1.6rem 1.1rem;border-bottom:1px solid var(--border)}
.sem-head h2{margin:0;font-size:1.9rem}
.sem-head p{margin:.2rem 0 0;color:var(--muted);font-size:.92rem}
ol.subjects{list-style:none;margin:0;padding:.3rem 1.6rem .6rem}
ol.subjects li{margin:0;border-bottom:1px solid var(--border)}
ol.subjects li:last-child{border-bottom:0}
ol.subjects a{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:1rem 0;color:var(--text);text-decoration:none !important}
ol.subjects .no{color:var(--accent);font-weight:600}
ol.subjects .nm{font-size:1.12rem;line-height:1.3}
ol.subjects .nm small{display:block;color:var(--faint);font-size:.78rem;margin-top:.15rem}
ol.subjects a:hover .nm{color:var(--accent)}
ol.subjects .mt{display:grid;justify-items:end;gap:.35rem;color:var(--muted);font-size:.86rem;white-space:nowrap}
ol.subjects .mt small{color:var(--faint);font-size:.76rem}
ol.subjects .bar{display:block;width:120px;height:4px;border-radius:99px;background:var(--surface-3);overflow:hidden}
ol.subjects .bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.kicker{font:700 1.7rem/1.2 var(--hand);color:var(--muted);margin:3rem 0 1rem}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;counter-reset:s}
.steps li{margin:0;padding:1.2rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);color:var(--accent);font-weight:600;font-size:.95rem}
.steps h3{margin:.4rem 0 .3rem;font-size:1.3rem}
.steps p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .layout{grid-template-columns:260px minmax(0,1fr);gap:2.5rem}
  .layout.no-side{grid-template-columns:minmax(0,1fr)}
  #tocBtn{display:inline-flex}
  aside.toc{position:fixed;top:calc(var(--top) + 8px);right:.75rem;width:min(290px,88vw);max-height:70vh;z-index:65;padding:.9rem 1rem;
    border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);display:none}
  aside.toc.open{display:block}
}
@media (max-width:960px){
  .layout,.layout.no-toc,.layout.no-side{grid-template-columns:minmax(0,1fr);width:auto;padding:68px 1.1rem 0}
  #navBtn{display:inline-flex}
  .sidenav{position:fixed;top:0;left:0;bottom:0;height:100vh;width:min(300px,86vw);z-index:80;padding:1.2rem .7rem 3rem;
    background:var(--surface);border-right:1px solid var(--border);transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow-lg)}
  .sidenav.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;z-index:75;background:rgba(10,10,14,.35);opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.show{opacity:1;pointer-events:auto}
  article{padding-top:1.6rem}
}
@media (max-width:600px){
  body{font-size:17px}
  h1{font-size:1.85rem} h2{font-size:1.4rem}
  .topbar{padding:0 .7rem}
  .brand .name{display:none}
  .kind-home .brand .name{display:inline}
  .hero{padding-top:1rem}
  .ctx .slash{display:none}
  #tocBtn span{display:none}
  #tocBtn{width:34px;padding:0}
  th,td{padding:.5rem .6rem}
  .katex-display{font-size:.9em}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1}
  .hero{padding:2.2rem 1.3rem}
  ol.subjects{padding:.2rem 1.1rem .4rem}
  ol.subjects a{grid-template-columns:2rem minmax(0,1fr)}
  ol.subjects .mt{grid-column:2;justify-items:start}
  .sem-head{padding:1.2rem 1.1rem .9rem}
}
/* print / PDF */
@media print{
  :root,[data-theme="dark"],[data-theme="paper"]{--bg:#fff;--surface:#fff;--text:#000;--muted:#333;--border:#ccc;--shadow:none}
  .topbar,#progress,aside.toc,.sidenav,.pager,#toTop,footer,.scrim{display:none!important}
  .layout{display:block;padding:0;max-width:none}
  article{padding:0;max-width:none}
  .callout,.diagram,.table-wrap,tr{break-inside:avoid}
  h2{break-after:avoid}
  a{color:inherit}
}

/* ---------- topics done: tick, counts, progress bars (Phase 3) ---------- */
:root{--ok:rgb(30,123,79);--ok-soft:rgba(30,123,79,.08);--ok-line:rgba(30,123,79,.38)}
[data-theme="dark"]{--ok:rgb(80,200,140);--ok-soft:rgba(80,200,140,.08);--ok-line:rgba(80,200,140,.38)}
.pbar{display:block;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.pbar i,ol.subjects .bar i{display:block;height:100%;width:var(--pct,0%);background:var(--accent);border-radius:99px;transition:width .35s ease}
.complete .pbar i,ol.subjects .complete .bar i{background:var(--ok)}

/* end of a topic */
.done-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:2.6rem 0 0;padding:.95rem 1.15rem;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color .2s,background .2s}
.done-card.is-done{border-color:var(--ok-line);background:var(--ok-soft)}
.done-toggle{display:flex;align-items:center;gap:.8rem;cursor:pointer;user-select:none;-webkit-user-select:none;min-width:0}
.done-toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.done-toggle .box{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--border-2);border-radius:7px;
  background:var(--surface);transition:background .18s,border-color .18s,box-shadow .18s}
.done-toggle:hover .box{border-color:var(--ok-line)}
.done-toggle .box svg{width:15px;height:15px;stroke:var(--surface);opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s}
.done-toggle input:checked+.box{background:var(--ok);border-color:var(--ok)}
.done-toggle input:checked+.box svg{opacity:1;transform:none}
.done-toggle input:focus-visible+.box{box-shadow:0 0 0 3px var(--accent-line)}
.done-toggle .txt{display:grid;line-height:1.3}
.done-toggle .txt b{font-weight:600;font-size:1rem;color:var(--text)}
.done-toggle .txt small{color:var(--muted);font-size:.8rem}
.done-card .t-on{display:none}
.done-card.is-done .t-on{display:block}
.done-card.is-done .t-off{display:none}
.done-card.is-done .txt b{color:var(--ok)}
.done-side{flex:none;display:grid;justify-items:end;gap:.4rem;color:var(--faint);font-size:.78rem;font-variant-numeric:tabular-nums}
.done-side b{font-weight:600;color:var(--muted)}
.done-side .pbar{width:112px;height:5px}

/* index and unit pages */
.prog-card{margin:0 0 1.8rem;padding:.95rem 1.15rem 1.05rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.pc-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.pc-label{font:700 1.2rem/1 var(--hand);color:var(--accent)}
.complete .pc-label{color:var(--ok)}
.pc-num{color:var(--muted);font-size:.86rem;font-variant-numeric:tabular-nums}
.pc-num b{color:var(--text);font-weight:600}

/* ticks wherever a topic is listed */
ul.topic-list li.is-done .tid{color:var(--ok)}
ul.topic-list li.is-done .end::before,.sn-topic.is-done::after{content:"";flex:none;width:15px;height:15px;background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
ul.topic-list li.is-done .end::before{align-self:center}
.sn-topic.is-done::after{margin:.32rem 0 0 auto}
.sn-topic.is-done .tid{color:var(--ok)}
.sn-unit .ucount.complete{color:var(--ok);font-weight:600}
ol.subjects .mt small b{font-weight:600;color:var(--muted)}

/* progress page */
.pfilter{display:inline-flex;gap:.25rem;padding:.25rem;margin:.2rem 0 1.4rem;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.pfilter button{border:0;background:none;color:var(--muted);font:500 .85rem var(--font);padding:.35rem .9rem;border-radius:999px;cursor:pointer}
.pfilter button:hover{color:var(--text)}
.pfilter button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.punit h3{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.h-count{font:500 .85rem var(--font);color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.punit.complete .h-count{color:var(--ok);font-weight:600}
.plist[data-show="todo"] li.is-done,.plist[data-show="done"] li:not(.is-done){display:none}
.pempty{display:none;margin:.4rem 0 1.4rem;color:var(--faint);font-size:.9rem}
.pempty span{display:none}
.plist[data-show="todo"] .punit.complete .pempty,.plist[data-show="done"] .punit:not(.started) .pempty{display:block}
.plist[data-show="todo"] .punit.complete .e-todo,.plist[data-show="done"] .punit:not(.started) .e-done{display:inline}
.plist[data-show="todo"] .punit.complete ul.topic-list,.plist[data-show="done"] .punit:not(.started) ul.topic-list{display:none}
.pfoot{margin-top:2rem;color:var(--muted);font-size:.9rem}
.linkbtn{border:0;background:none;padding:0;color:var(--faint);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:#c23b2e}
@media (max-width:600px){
  .done-card{flex-direction:column;align-items:stretch}
  .done-side{justify-items:start}
  .done-side .pbar{width:100%}
}
@media print{.done-card,.prog-card,.pfilter,.pfoot{display:none}}

/* subject switcher (top of the sidebar) */
.sn-switch{margin:0 .2rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.sn-switch summary{list-style:none;display:flex;align-items:center;gap:.6rem;padding:.62rem .75rem;cursor:pointer;border-radius:11px;transition:background .15s}
.sn-switch summary::-webkit-details-marker{display:none}
.sn-switch summary:hover{background:var(--surface-2)}
.sn-switch summary:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.sn-switch[open] summary{border-bottom:1px solid var(--border);border-radius:11px 11px 0 0}
.sw-cur{flex:1;min-width:0;display:grid}
.sw-cur span{font:650 .98rem/1.3 var(--serif);letter-spacing:-.01em;color:var(--text)}
.sw-cur small{margin-top:.15rem;color:var(--faint);font:500 .74rem var(--font);letter-spacing:.03em}
.sw-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--faint)}
.sw-ic svg{width:16px;height:16px;stroke:currentColor}
.sn-switch summary:hover .sw-ic,.sn-switch[open] .sw-ic{color:var(--accent);background:var(--accent-soft)}
.sw-menu{padding:.3rem .35rem .35rem}
.sw-label{padding:.45rem .5rem .2rem;color:var(--faint);font:600 .68rem var(--font);letter-spacing:.08em;text-transform:uppercase}
.sidenav a.sw-item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.48rem .5rem;font-size:.9rem;line-height:1.3}
.sw-item .ucount{flex:none;color:var(--faint);font:500 .76rem var(--font);font-variant-numeric:tabular-nums}
.sw-item .ucount.complete{color:var(--ok);font-weight:600}
.sidenav a.sw-home{margin-top:.3rem;padding:.5rem .5rem .3rem;border-top:1px solid var(--border);border-radius:0;font-size:.84rem;color:var(--faint)}
.sidenav a.sw-home:hover{background:none;color:var(--accent)}

/* ---------- search ---------- */
#searchBtn{color:var(--faint);padding:0 .45rem 0 .75rem;gap:.5rem;min-width:180px;justify-content:flex-start}
#searchBtn span{flex:1;text-align:left}
#searchBtn:hover{color:var(--muted)}
kbd{display:inline-grid;place-items:center;min-width:1.45em;height:1.45em;padding:0 .3em;border:1px solid var(--border-2);border-bottom-width:2px;
  border-radius:5px;background:var(--surface-2);color:var(--muted);font:600 .72rem/1 var(--font)}
html.sx-open{overflow:hidden}
.sx{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;align-items:flex-start;padding:12vh 1rem 1rem;
  background:rgba(15,18,24,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sx[hidden]{display:none}
.sx-box{width:min(640px,100%);max-height:72vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-lg);animation:sxIn .14s ease-out}
@keyframes sxIn{from{opacity:0;transform:translateY(-6px) scale(.99)}to{opacity:1;transform:none}}
.sx-bar{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;border-bottom:1px solid var(--border)}
.sx-bar svg{flex:none;width:19px;height:19px;color:var(--faint)}
.sx-bar input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);font:400 1.06rem var(--font)}
.sx-bar input::placeholder{color:var(--faint)}
.sx-bar input::-webkit-search-cancel-button{display:none}
.sx-x{flex:none;border:1px solid var(--border-2);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);color:var(--muted);
  font:600 .72rem var(--font);padding:.2rem .45rem;cursor:pointer}
.sx-res{overflow-y:auto;overscroll-behavior:contain;padding:.4rem}
.sx-label{padding:.55rem .65rem .25rem;color:var(--faint);font:600 .68rem var(--font);letter-spacing:.08em;text-transform:uppercase}
.sx-item{display:flex;align-items:center;gap:.8rem;padding:.6rem .65rem;border-radius:10px;color:var(--text);text-decoration:none !important}
.sx-item.on{background:var(--accent-soft)}
.sx-id{flex:none;display:grid;place-items:center;min-width:2.6em;height:2em;padding:0 .35em;border-radius:7px;background:var(--surface-2);
  color:var(--muted);font:600 .78rem var(--font);font-variant-numeric:tabular-nums}
.sx-id svg{width:15px;height:15px}
.sx-item.on .sx-id{background:var(--surface);color:var(--accent)}
.sx-main{flex:1;min-width:0;display:grid;gap:.1rem}
.sx-t{font-size:.97rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-t b,.sx-sub b{font-weight:700;color:var(--accent)}
.sx-sub{color:var(--faint);font-size:.78rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-in-h{color:var(--muted)}
.sx-enter{flex:none;color:var(--faint);font-size:.9rem;opacity:0}
.sx-item.on .sx-enter{opacity:1;color:var(--accent)}
.sx-note{margin:0;padding:1.4rem 1rem;color:var(--faint);font-size:.92rem;text-align:center}
.sx-foot{display:flex;gap:1.1rem;flex-wrap:wrap;padding:.55rem 1rem;border-top:1px solid var(--border);color:var(--faint);font-size:.74rem}
.sx-foot span{display:inline-flex;align-items:center;gap:.25rem}
.sx-foot kbd{font-size:.66rem}
@media (max-width:760px){
  #searchBtn{min-width:0;width:36px;padding:0;justify-content:center}
  #searchBtn span,#searchBtn kbd{display:none}
  .sx{padding:.6rem .6rem 1rem}
  .sx-box{max-height:82vh}
  .sx-foot{display:none}
}

/* ---------- home: continue + quick links ---------- */
.resume{margin:1.6rem 0 0;padding:1.1rem 1.6rem .6rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow)}
.resume[hidden]{display:none}
.rs-head{font:700 1.35rem/1 var(--hand);color:var(--accent);margin-bottom:.4rem}
.rs-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid var(--border)}
.rs-head+.rs-row{border-top:0}
.rs-info{min-width:0;display:grid;gap:.15rem}
.rs-subj{font:600 1.02rem/1.3 var(--serif);color:var(--text)}
.rs-last{color:var(--faint);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-last a{color:var(--muted)}
.rs-go{flex:none;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.7rem;max-width:56%;padding:.55rem .9rem;
  border-radius:12px;background:var(--accent-soft);color:var(--accent);text-decoration:none !important;transition:filter .15s}
.rs-go:hover{filter:brightness(.97)}
[data-theme="dark"] .rs-go:hover{filter:brightness(1.15)}
.rs-go small{grid-column:1;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.rs-go span{grid-column:1;font-weight:600;font-size:.92rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-go i{grid-column:2;grid-row:1/3;font-style:normal;font-size:1.1rem}
.rs-go.done{background:var(--ok-soft);color:var(--ok)}
ol.subjects li{position:relative}
ol.subjects a.row{padding-bottom:1.55rem}
ol.subjects .ql{position:absolute;left:3.4rem;bottom:.85rem;display:flex;gap:.9rem;font-size:.8rem}
ol.subjects .ql a{display:inline;padding:0;color:var(--faint);text-decoration:none}
ol.subjects .ql a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){
  .resume{padding:1rem 1.1rem .5rem}
  .rs-row{flex-direction:column;align-items:stretch;gap:.55rem}
  .rs-go{max-width:none}
  ol.subjects .ql{left:2.8rem}
  ol.subjects a.row{padding-bottom:1.9rem}
}

/* ---------- unit index: start / continue ---------- */
.pc-go-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--border)}
.pc-next{min-width:0;color:var(--muted);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-next-l{color:var(--faint)}
.pc-next-t{color:var(--text);font-weight:500}
.pc-go{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.48rem 1rem;border-radius:999px;background:var(--accent);
  color:var(--surface) !important;font-weight:600;font-size:.88rem;text-decoration:none !important;transition:filter .15s}
.pc-go:hover{filter:brightness(1.08)}
.complete .pc-go{background:var(--ok)}
@media print{#searchBtn,.resume,.ql,.pc-go-row{display:none!important}}

.kind-simple h2{font-size:1.3rem;margin-top:2rem}
ul.topic-list li.wide a.tt{grid-column:1/3}
button.pc-go{font:600 .9rem var(--font);border:0;cursor:pointer}

/* ---------- text size (Aa): 3 steps (Small 0.9 · Normal 1 · Large 1.15). Laptops read at 20px (phones 18px): --lz.
   The note area zooms as one piece; the column grows with the text (720px at 18px, 800px at 20px), then stops at 800px
   and only the letters grow. The top bar, sidebar and contents stay put. ---------- */
:root{--ts:1;--lz:1;--z:calc(var(--ts) * var(--lz));--col:min(800px,calc(var(--maxw) * var(--z)))}
@media (min-width:961px){ :root{--lz:1.1112} }
article[class^="kind-"]{zoom:var(--z);max-width:calc(var(--col) / var(--z))}
/* home is a menu, not reading: it grows half as much */
.layout.home article[class^="kind-"]{--hz:calc(1 + (var(--ts) - 1) * .5);zoom:var(--hz);max-width:calc(1080px / var(--hz))}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.ts-wrap{position:relative;display:inline-flex}
.ts-wrap[hidden]{display:none}
.aa{font:600 15px/1 var(--serif);letter-spacing:-.02em}
.aa span{font-size:12px}
#sizeBtn.is-set{color:var(--accent);border-color:var(--accent-line)}
.ts-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:90;width:232px;padding:.75rem .8rem .7rem;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-lg);font-family:var(--font)}
.ts-panel[hidden]{display:none}
.ts-head{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .55rem}
.ts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ts-btn{height:58px;border-radius:12px;border:1px solid var(--border-2);background:var(--bg);color:var(--text);cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:500 .72rem var(--font);transition:border-color .15s,color .15s,background .15s}
.ts-btn b{font-family:var(--serif);font-weight:600;line-height:1}
.ts-btn[data-i="0"] b{font-size:.95rem} .ts-btn[data-i="1"] b{font-size:1.2rem} .ts-btn[data-i="2"] b{font-size:1.5rem}
.ts-btn:hover{border-color:var(--accent-line);color:var(--accent)}
.ts-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ts-btn:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px}
@media (max-width:600px){ .topbar{gap:.4rem} .ts-panel{right:-44px} }
@media (max-width:360px){ .topbar{gap:.3rem;padding:0 .5rem} .iconbtn.sq,#tocBtn{width:33px} .iconbtn{height:33px} #searchBtn{padding:0 .55rem} }
@media print{ article[class^="kind-"]{zoom:1!important;max-width:none!important} .ts-wrap{display:none!important} }
/* phones, any text size: long code scrolls inside its own box; long words wrap; headings grow less than body text */
article pre:not(.mermaid){overflow-x:auto;max-width:100%}
article{overflow-wrap:break-word}
@media (max-width:600px){
  article h1{font-size:calc(1.85rem * (1 + (var(--ts) - 1) * .4) / var(--ts))}
  article h2{font-size:calc(1.4rem * (1 + (var(--ts) - 1) * .5) / var(--ts))}
  .hero h1{font-size:calc(clamp(2.4rem,6vw,3.6rem) / var(--hz,1))}
}
/* diagrams: drawn at their measured size (no zoom, so labels never clip), then scaled up as a picture with the text size */
article .diagram pre.mermaid{zoom:calc(1 / var(--z))}
.diagram svg[style*="--w"]{max-width:min(100%, calc(var(--w) * var(--z)))!important}

/* ---------- laptops: sidebar pinned, or fully hidden and floated out from the left edge (like Zen compact mode) ---------- */
.pane-foot,.mn-tip,.ribbon,.rings{display:none}
/* sidebar header: the subject switcher stays at the top while the topic list scrolls under it */
.sidenav{padding-top:0}
.sn-top{position:sticky;top:0;z-index:2;margin:0 0 .3rem;padding:calc(1.6rem - 10px) 0 .7rem;background:var(--bg)}
.sn-top::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(var(--bg),transparent);pointer-events:none}
.sn-top .sn-switch{flex:1;min-width:0;margin:0 .2rem}
@media (max-width:960px){ .sn-top{padding-top:1.2rem;background:var(--surface)} .sn-top::after{background:linear-gradient(var(--surface),transparent)} }
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}

@media (min-width:961px){
  /* quiet footer of each panel: "Keep open" / "Auto-hide" */
  .pane-foot{display:block;position:sticky;bottom:0;z-index:2;margin-top:.8rem;padding:.5rem 0 .65rem;background:var(--bg);border-top:1px solid var(--border)}
  .pane-pin{display:inline-flex;align-items:center;gap:.5rem;padding:.32rem .55rem;border:0;border-radius:8px;background:none;color:var(--faint);
    font:500 .78rem/1.2 var(--font);letter-spacing:.01em;cursor:pointer;transition:color .15s,background .15s}
  .pane-pin svg{width:15px;height:15px;flex:none}
  .pane-pin .fill{fill:currentColor;stroke:none;opacity:0;transition:opacity .15s}
  .pane-pin:hover{color:var(--accent);background:var(--accent-soft)}
  .pane-pin:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px}
  html[data-side="pin"] #sideBtn .fill,html[data-toc="pin"] #tocPin .fill{opacity:.45}
  .sidenav{padding-bottom:0}
  html[data-side="auto"] .sidenav .pane-foot,html[data-toc="auto"] aside.toc .pane-foot{background:var(--surface)}
  @media (hover:hover){
    html[data-side="pin"] .sidenav .pane-foot,html[data-toc="pin"] aside.toc .pane-foot{opacity:0;transition:opacity .2s}
    html[data-side="pin"] .sidenav:hover .pane-foot,html[data-side="pin"] .sidenav:has(:focus-visible) .pane-foot,
    html[data-toc="pin"] aside.toc:hover .pane-foot,html[data-toc="pin"] aside.toc:has(:focus-visible) .pane-foot{opacity:1}
  }
  #tocBtn{display:none}
  html[data-side="auto"] .sn-top{padding-top:1.2rem;background:var(--surface)}
  html[data-side="auto"] .sn-top::after{background:linear-gradient(var(--surface),transparent)}
  /* the floating panel mirrors "On this page": centred below the bar, beside its handle (as that one sits beside the rings) */
  html[data-side="auto"] .sidenav{position:fixed;top:calc(50% + var(--top) / 2);translate:0 -50%;left:max(46px,calc(50% - var(--col) / 2 - 300px));bottom:auto;height:auto;
    max-height:calc(100vh - var(--top) - 24px);align-self:start;width:268px;z-index:58;
    padding:0 .7rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
    transform:translateX(calc(-100% - 24px));opacity:0;visibility:hidden;
    transition:transform .24s cubic-bezier(.3,.7,.2,1),opacity .18s ease,visibility 0s linear .24s}
  html[data-side="auto"].peek .sidenav{transform:none;opacity:1;visibility:visible;transition:transform .24s cubic-bezier(.3,.7,.2,1),opacity .14s ease}
  /* the page slides aside (no re-wrap) just enough to clear the panel, then slides back */
  .layout > article{transition:transform .24s cubic-bezier(.3,.7,.2,1)}
  html.peek .layout > article,html.peek-r .layout > article{transform:translateX(calc(var(--push,0px) / var(--z,1)))}
  html.peek .layout,html.peek-r .layout{overflow-x:clip}
  .layout > article{transition:transform .24s cubic-bezier(.3,.7,.2,1),opacity .2s ease}
  html.peek-dim .layout > article,html.peek-dim .layout > aside.toc{opacity:.22}
  /* right side, auto-hide: "On this page" floats out beside the section rings */
  html[data-toc="auto"] aside.toc{display:block;position:fixed;z-index:58;left:auto;right:max(46px,calc(50% - var(--col) / 2 - 300px));top:calc(50% + var(--top) / 2);translate:0 -50%;
    width:268px;max-height:calc(100vh - var(--top) - 24px);overflow:auto;overscroll-behavior:contain;padding:1rem .9rem 0 1rem;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
    transform:translateX(calc(100% + 24px));opacity:0;visibility:hidden;      /* the same slide and timing as the topics panel, mirrored */
    transition:transform .24s cubic-bezier(.3,.7,.2,1),opacity .18s ease,visibility 0s linear .24s}
  html[data-toc="auto"].peek-r aside.toc{transform:none;opacity:1;visibility:visible;transition:transform .24s cubic-bezier(.3,.7,.2,1),opacity .14s ease}
  html[data-toc="auto"] aside.toc h4{margin-bottom:.45rem}
  aside.toc a.hl{color:var(--text);background:var(--surface-2);border-radius:0 6px 6px 0}
  /* the rings: one per section, filling as you read; click to jump */
  html[data-toc="auto"] .rings{display:flex;flex-direction:column;align-items:center;gap:var(--rg-gap,12px);position:fixed;z-index:59;right:max(8px,calc(50% - var(--col) / 2 - 334px));
    top:calc(50% + var(--top) / 2);transform:translateY(-50%);padding:11px 7px;border-radius:999px;opacity:.72;
    transition:opacity .2s,background .2s,box-shadow .2s}
  html[data-toc="auto"].near-r .rings,html[data-toc="auto"].peek-r .rings,html[data-toc="auto"] .rings:hover{opacity:1;background:var(--surface);box-shadow:0 0 0 1px var(--border),var(--shadow)}
  .rg{--rc:var(--accent);--rt:var(--accent-line);position:relative;display:block;flex:none;width:var(--rg,12px);height:var(--rg,12px);border-radius:50%;transition:transform .2s}
  .rg::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--rc) var(--pct,0%),var(--border-2) 0);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
  .rg::after{content:"";position:absolute;inset:-5px -7px}
  .rg.done::before{background:var(--rc);opacity:.5}
  .rg.cur{transform:scale(1.3)}
  .rg.cur::before{background:conic-gradient(var(--rc) var(--pct,0%),var(--rt) 0)}
  .rg:hover{transform:scale(1.35)}
  .rg:hover::before{background:var(--rc);opacity:1}
  .rg.pyq{--rc:#e3b81f;--rt:#f0dc8c}
  [data-theme="dark"] .rg.pyq{--rc:#f5dc7a;--rt:rgba(255,233,138,.32)}
  .rg.pyq.other{--rc:var(--muted);--rt:var(--border-2)}
  [data-theme="dark"] .rg.pyq.other{--rc:var(--muted);--rt:var(--border-2)}
  .rings.dense .rg::before{-webkit-mask:none;mask:none;background:var(--border-2)}
  .rings.dense .rg.done::before,.rings.dense .rg.cur::before,.rings.dense .rg:hover::before{background:var(--rc)}
  .rings.dense .rg.done::before{opacity:.5}
  .rings.dense .rg::after{inset:-2px -9px}
  html[data-side="auto"][data-toc="pin"] .layout > aside.toc{transition:opacity .18s}   /* pinned only: the floating one keeps its slide */
  html[data-side="auto"].peek.push-toc .layout > aside.toc{opacity:0;pointer-events:none}
  html.peek.push-toc .rings{opacity:0!important;pointer-events:none}
  /* the handle: three soft dots that mirror the ring column (same capsule, place and faintness); hover or click opens the
     topics panel beside it, and the screen edge still works too */
  html[data-side="auto"] .ribbon{display:grid;place-items:center;position:fixed;z-index:59;left:max(8px,calc(50% - var(--col) / 2 - 334px));top:calc(50% + var(--top) / 2);
    transform:translateY(-50%);width:26px;height:58px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);opacity:.72;cursor:pointer;
    transition:opacity .2s,background .2s,box-shadow .2s,color .2s}
  html[data-side="auto"] .ribbon::before{content:"";position:absolute;inset:-14px -10px}
  .ribbon svg{width:12px;height:40px;fill:currentColor;stroke:none}
  html[data-side="auto"].near .ribbon,html[data-side="auto"].peek .ribbon,html[data-side="auto"] .ribbon:hover,html[data-side="auto"] .ribbon:focus-visible{
    opacity:1;color:var(--text);background:var(--surface);box-shadow:0 0 0 1px var(--border),var(--shadow)}
  html.peek-r.push-toc .ribbon{opacity:0!important;pointer-events:none}
  /* first-visit hint */
  /* first-visit hint: one small quiet pill, bottom centre */
  .mn-tip{display:flex;align-items:center;gap:.5rem;position:fixed;left:50%;bottom:22px;z-index:70;white-space:nowrap;
    padding:.4rem .45rem .4rem 1rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);
    font:500 .82rem/1.2 var(--font);box-shadow:var(--shadow);opacity:0;transform:translate(-50%,8px);transition:opacity .25s,transform .25s;pointer-events:none}
  .mn-tip.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .mn-tip i{font-style:normal;color:var(--faint);margin:0 .15rem}
  .mn-tip button{flex:none;width:22px;height:22px;border:0;border-radius:50%;background:none;color:var(--faint);font:400 1rem/1 var(--font);cursor:pointer}
  .mn-tip button:hover{color:var(--text);background:var(--surface-2)}
}
@keyframes mnNudge{50%{transform:translateX(-4px)}}
@media (prefers-reduced-motion:reduce){ .mn-tip-ar{animation:none} html[data-side="auto"] .sidenav,.layout > article,.ribbon,aside.toc,.rings,.rg{transition:none!important} }
@media (min-width:961px) and (max-width:1240px){ html[data-side="auto"] .layout:not(.no-side){grid-template-columns:minmax(0,1fr)} aside.toc .pane-foot{display:none} }
.mn-wide{position:relative;z-index:1}
@media print{ .mn-tip,.ribbon,.rings,.pane-foot{display:none!important} .mn-wide{width:auto!important;margin-left:0!important;margin-right:0!important} }

/* ---------- top bar: one floating glass bar, the same width on every page: 75% of the screen, never under 1024px or
   over 1536px (like takeuforward.org), and Home's content uses exactly that width too. The reader's side panels keep
   their own places outside it. Phones: across the screen. Logo left · the subject's pages in the middle · search, text size, theme right. It slides away as you read
   down; a faint ribbon at the top shows where it went. Reader (every page of a subject) never brings it back on a scroll
   up; Home does. Nothing else moves when it comes or goes. ---------- */
:root{--bar-goal:var(--top);--frame:min(clamp(1024px,75%,1536px),calc(100% - 48px))}
html[data-bar]{--bar-goal:0px}
.topbar{position:fixed;top:12px;left:calc((100% - var(--frame)) / 2);right:calc((100% - var(--frame)) / 2);height:48px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.75rem;padding:0 .5rem 0 .55rem;
  border:1px solid color-mix(in srgb,var(--border) 85%,transparent);border-radius:14px;container-type:inline-size;
  background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(20,22,40,.05),0 6px 18px -8px rgba(20,22,40,.14);
  transition:translate .26s cubic-bezier(.3,.7,.2,1),opacity .2s ease}
[data-theme="paper"] .topbar{box-shadow:inset 0 1px 0 rgba(255,250,236,.6),0 1px 2px rgba(60,44,20,.06),0 6px 18px -8px rgba(60,44,20,.18)}
[data-theme="dark"] .topbar{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.3),0 8px 22px -8px rgba(0,0,0,.55)}
.bar-l{grid-column:1;display:flex;align-items:center;gap:.5rem;min-width:0;justify-self:start}
.bar-r{grid-column:3;display:flex;align-items:center;gap:.4rem;justify-self:end}
.topbar .brand .logo{width:30px;height:30px;border-radius:9px}
#searchBtn{min-width:0;width:36px;padding:0;justify-content:center;color:var(--muted)}
#searchBtn:hover{color:var(--text)}
.barnav{grid-column:2;display:flex;align-items:center;gap:.15rem;justify-self:center}
.barnav a{padding:.34rem .8rem;border-radius:999px;color:var(--muted);font-size:.88rem;font-weight:550;white-space:nowrap;transition:color .15s,background .15s}
.barnav a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.barnav a[aria-current]{color:var(--text);background:color-mix(in srgb,var(--accent) 11%,transparent)}
@container (max-width:760px){.barnav{display:none}}            /* phones and narrow windows: the pages are in the menu */
html[data-bar="hide"] .topbar{translate:0 calc(-100% - 18px);opacity:0;pointer-events:none}
article[class^="kind-"]{padding-top:calc(16px / var(--z,1))}
.layout.home article[class^="kind-"]{padding-top:calc(16px / var(--hz,1));max-width:100%}   /* % widths are not zoomed */
@media (min-width:961px){ .layout.home{width:var(--frame)} }      /* Home's content lines up with the bar's edges */
@media (max-width:960px){
  .topbar{top:8px;left:8px;right:8px;padding:0 .4rem 0 .45rem}
  article[class^="kind-"],.layout.home article[class^="kind-"]{padding-top:calc(12px / var(--z,1))}
}
/* the ribbon: a short tab hanging from the top, centred on the bar's place */
.topribbon{display:none}
html[data-bar="hide"] .topribbon{display:grid;place-items:center;position:fixed;z-index:61;top:0;left:50%;translate:-50% 0;
  width:46px;height:5px;padding:0;border:0;border-radius:0 0 7px 7px;background:var(--border-2);opacity:.75;cursor:pointer;
  transition:height .2s ease,background .2s,opacity .2s,box-shadow .2s;animation:rb-in .3s ease}
html[data-bar="hide"] .topribbon::before{content:"";position:absolute;left:-22px;right:-22px;top:0;height:30px}   /* easy to hit, even by thumb */
.topribbon svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;color:var(--accent);opacity:0;transition:opacity .15s}
html[data-bar="hide"].near-t .topribbon,html[data-bar="hide"] .topribbon:hover,html[data-bar="hide"] .topribbon:focus-visible{height:15px;opacity:1;background:var(--accent-soft);
  box-shadow:inset 0 -1px 0 var(--accent-line),0 0 0 1px var(--accent-line)}
html[data-bar="hide"].near-t .topribbon svg,html[data-bar="hide"] .topribbon:hover svg,html[data-bar="hide"] .topribbon:focus-visible svg{opacity:1}
@keyframes rb-in{from{opacity:0}}
@media (max-width:960px){html[data-bar="hide"] .topribbon{width:40px;height:4px;opacity:.9}}
#progress{opacity:0;transition:opacity .2s}               /* the reading line lives in the bar (below); this top hairline only */
@media (max-width:960px){html[data-bar="hide"].bar-line #progress{opacity:1}}   /* phones, while the bar is away */
@media (prefers-reduced-motion:reduce){.topbar,.topribbon,#progress{transition:none;animation:none}}
@media print{.topribbon{display:none!important}}

/* ---------- full screen: the button shows only where the browser allows it (html.fs-ok, set in <head>) and on Reader
   pages; on Home only while full screen is on, so it can be switched off there too. ---------- */
#fsBtn{display:none;color:var(--muted)}
#fsBtn:hover{color:var(--text)}
html.fs-ok body:not(.kind-home):not(.kind-simple) #fsBtn,html.fs-ok.fs #fsBtn{display:inline-flex}
#fsBtn .fs-exit-icon,html.fs #fsBtn .fs-enter-icon{display:none}
html.fs #fsBtn .fs-exit-icon{display:inline}
article h1[tabindex="-1"]:focus{outline:none}            /* focus lands here after a page is swapped in */
/* "Back to full screen": after a reload or another tab ended it */
.fs-pill{position:fixed;left:50%;bottom:22px;z-index:70;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--border) 85%,transparent);background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 2px rgba(20,22,40,.06),0 10px 26px -10px rgba(20,22,40,.25);
  opacity:0;transform:translate(-50%,10px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.fs-pill.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.fs-pill button{font:inherit;color:var(--text);background:none;border:0;cursor:pointer;border-radius:999px}
.fs-pill .fs-go{display:flex;align-items:center;gap:.5rem;padding:.45rem .9rem .45rem .75rem;font-size:.88rem;font-weight:600}
.fs-pill .fs-go svg{width:16px;height:16px;color:var(--accent)}
.fs-pill .fs-x{width:30px;height:30px;font-size:1.1rem;line-height:1;color:var(--muted)}
.fs-pill button:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
[data-theme="dark"] .fs-pill{box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 28px -10px rgba(0,0,0,.6)}
@media print{.fs-pill{display:none}}

/* ---------- laptops: the top bar is locked in place (phones keep auto-hide), so pinned panels stick just below it
   instead of at the very top; their content still starts on the same line as the text. ---------- */
@media (min-width:961px) and (hover:hover) and (pointer:fine){
  .sidenav{top:calc(var(--top) + 14px);height:calc(100vh - var(--top) - 26px)}
  aside.toc{top:calc(var(--top) + 14px);max-height:calc(100vh - var(--top) - 26px)}
}

/* ---------- reading line: along the top edge of the floating bar, clipped by its rounded corners (pages read top to
   bottom only). Drawn as a background so nothing that drops down from the bar (Aa panel) gets clipped. ---------- */
html.bar-line .topbar::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat left top / calc(var(--read,0) * 100%) 2px}
@media print{html.bar-line .topbar::after{display:none}}

/* ---------- veil: page colour in the gap above the floating bar, fading out behind it and just below it, so text that
   scrolls up never shows above the bar and fades in gently under it. Leaves with the bar on phones. ---------- */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(12px + 48px + 16px);z-index:55;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 12px,color-mix(in srgb,var(--bg) 62%,transparent) 36px,
    color-mix(in srgb,var(--bg) 18%,transparent) 60px,transparent 100%);transition:opacity .2s ease}
html[data-bar="hide"] body::before{opacity:0}
@media (max-width:960px){
  body::before{height:calc(8px + 48px + 14px);
    background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 8px,color-mix(in srgb,var(--bg) 62%,transparent) 32px,
      color-mix(in srgb,var(--bg) 18%,transparent) 56px,transparent 100%)}
}
@media print{body::before{display:none}}

/* ---------- home v2 (2026-10-26): the subjects are a 2×2 grid of cards (one column on phones), "How to study" is a
   numbered list; the semester heading sits on the page, not in a box. Home's width = the top bar's. ---------- */
.sem{margin-top:2.2rem;border:0;border-radius:0;background:none;overflow:visible}
.sem-head{padding:0 .15rem 1rem;border-bottom:0}
ol.subjects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0}
ol.subjects li,ol.subjects li:last-child{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  padding:0 1.25rem 1rem;transition:border-color .15s,box-shadow .15s}
ol.subjects li:hover{border-color:var(--accent-line);box-shadow:var(--shadow)}
ol.subjects a.row{grid-template-columns:minmax(0,1fr);gap:.5rem;align-items:start;padding:1.15rem 0 .7rem}
ol.subjects .no{font-size:.85rem}
ol.subjects .nm{font-size:1.18rem}
ol.subjects .mt{grid-column:auto;justify-items:start;white-space:normal}
ol.subjects .bar{width:100%}
ol.subjects .ql{position:static;display:flex;gap:1.1rem;margin-top:auto;padding-top:.7rem;border-top:1px dashed var(--border);font-size:.82rem}
@media (max-width:720px){ ol.subjects{grid-template-columns:minmax(0,1fr);gap:12px} ol.subjects li,ol.subjects li:last-child{padding:0 1.05rem .9rem} }
.steps{grid-template-columns:minmax(0,1fr);gap:0}
.steps li{display:grid;grid-template-columns:2.7rem minmax(0,1fr);column-gap:.5rem;padding:1.1rem .15rem;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none}
.steps li:last-child{border-bottom:0}
.steps li::before{grid-row:1 / 3;padding-top:.2rem}
.steps h3{margin:0 0 .25rem;font-size:1.2rem}

/* ---------- notebook, round 1 (2026-10-26) ----------
   Laptops, pages inside a subject: the note is a paper sheet on a slightly darker desk, with a faint graphite margin
   line and a small handwritten page header. Everywhere: defined terms look marked with a real highlighter; Mark as
   done draws an ink tick; the next / previous topic turns in like a page. Phones: highlighter, tick and page turn only. */
@property --sheet-m{syntax:"<length>";inherits:true;initial-value:0px}
:root{--desk:#f1efe7;--paper:#fffefa;--rule:rgba(92,96,108,.17)}
[data-theme="paper"]{--desk:#efe5cd;--paper:#fcf5e3;--rule:rgba(92,88,80,.2)}
.pg-head{display:none}
[data-theme="dark"]{--desk:#0b0e13;--paper:#141820;--rule:rgba(200,206,218,.16)}
@media (min-width:961px){
  /* paper margin beside the text: up to 150px, less on narrow windows; a thin border when a panel is kept open */
  html:has(body:not(.kind-home)){--sheet-m:clamp(0px,min(calc((100vw - var(--col)) / 2 - 40px),calc((min(max(1024px,75vw),1536px,100vw - 48px) - var(--col)) / 2)),150px)}   /* never wider than the bar */
  html[data-side="pin"]:has(.layout > .sidenav),html[data-toc="pin"]:has(.layout > aside.toc){--sheet-m:20px}
  body:not(.kind-home){--bg:var(--desk);background:var(--desk)}
  body:not(.kind-home) .layout > article{--bg:var(--paper);position:relative;isolation:isolate;padding-top:calc(46px / var(--z,1));margin-bottom:48px}
  body:not(.kind-home) .layout > article::before{content:"";position:absolute;z-index:-1;inset:0 calc(-1 * var(--sheet-m) / var(--z,1));
    background:var(--paper);border-radius:calc(14px / var(--z,1));
    box-shadow:0 0 0 1px rgba(70,60,30,.06),0 1px 2px rgba(70,60,30,.05),0 22px 44px -26px rgba(70,60,30,.30)}
  [data-theme="dark"] body:not(.kind-home) .layout > article::before{box-shadow:0 0 0 1px rgba(255,255,255,.05),0 22px 44px -22px rgba(0,0,0,.75)}
  /* the margin line: graphite, like a soft pencil rule (not when a panel is kept open: there is no margin then) */
  body:not(.kind-home) .layout > article::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(-28px / var(--z,1));width:calc(1.5px / var(--z,1));background:var(--rule)}
  html[data-side="pin"] body:not(.kind-home) .layout:has(> .sidenav) > article::after,
  html[data-toc="pin"] body:not(.kind-home) .layout:has(> aside.toc) > article::after{display:none}
  /* handwritten page header in the sheet's top corner */
  .pg-head{display:block;position:absolute;top:calc(18px / var(--z,1));   /* level with the menu switcher and "On this page" */right:calc((26px - var(--sheet-m)) / var(--z,1));
    font:600 1.3rem/1 var(--hand);color:var(--faint);transform:rotate(-2deg);pointer-events:none;user-select:none;-webkit-user-select:none}
}
/* highlighter: a slightly uneven marker stroke, darker at its ends */
mark.term{background:linear-gradient(104deg,rgba(255,226,110,0) .9%,rgba(255,224,102,.95) 2.4%,rgba(255,233,138,.72) 5.8%,rgba(255,233,138,.45) 93%,rgba(255,226,110,.8) 96%,rgba(255,233,138,0) 98%),
  linear-gradient(183deg,rgba(255,233,138,0) 0%,rgba(255,233,138,.32) 7.9%,rgba(255,233,138,0) 15%);
  padding:.06em .3em;margin:0 -.14em;border-radius:.7em .25em .8em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-theme="paper"] mark.term{background:linear-gradient(104deg,rgba(250,206,64,0) .9%,rgba(250,204,60,.95) 2.4%,rgba(252,212,84,.72) 5.8%,rgba(252,212,84,.5) 93%,rgba(250,206,64,.82) 96%,rgba(252,212,84,0) 98%),
  linear-gradient(183deg,rgba(252,212,84,0) 0%,rgba(252,212,84,.32) 7.9%,rgba(252,212,84,0) 15%)}
[data-theme="dark"] mark.term{background:linear-gradient(104deg,rgba(255,226,110,0) .9%,rgba(255,224,102,.42) 2.4%,rgba(255,233,138,.30) 5.8%,rgba(255,233,138,.20) 93%,rgba(255,226,110,.36) 96%,rgba(255,233,138,0) 98%)}
/* Mark as done: a hand-drawn box; ticking it draws a green ink tick and a small "done!" */
.done-toggle .box{position:relative;width:30px;height:30px;border:0;border-radius:0;background:none}
.done-toggle .box::before{content:"";position:absolute;inset:3px;border:1.6px solid var(--border-2);border-radius:7px;transform:rotate(-2deg);transition:border-color .15s}
.done-toggle:hover .box::before{border-color:var(--ok-line)}
.done-toggle input:checked+.box{background:none;border-color:transparent}
.done-toggle input:checked+.box::before{border-color:var(--ok-line)}
.done-toggle input:focus-visible+.box{box-shadow:none}
.done-toggle input:focus-visible+.box::before{box-shadow:0 0 0 3px var(--accent-line)}
.done-toggle .box svg{position:absolute;inset:-7px -5px -5px -3px;width:auto;height:auto;stroke:var(--ok);stroke-width:2.4;overflow:visible;
  opacity:1;transform:none;transition:none}
.done-toggle .box svg path{stroke-dasharray:1;stroke-dashoffset:1}
.done-toggle input:not(:checked)+.box svg path{visibility:hidden}   /* the round pen cap would leave a dot */
.done-toggle input:checked+.box svg path{stroke-dashoffset:0}
.done-card.ink-anim .done-toggle input:checked+.box svg path{animation:mnInk .42s cubic-bezier(.5,0,.3,1)}
@keyframes mnInk{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ink-done{display:none;font:600 1.45rem/1 var(--hand);color:var(--ok);transform:rotate(-4deg);margin-left:.1rem;white-space:nowrap}
.done-card.is-done .ink-done{display:inline-block}
.done-card.ink-anim.is-done .ink-done{animation:mnInkWord .35s ease-out .3s both}
@keyframes mnInkWord{from{opacity:0;transform:rotate(-4deg) translateY(3px)}to{opacity:1;transform:rotate(-4deg)}}
/* page turn: the next topic slides in over this one from the right (previous: from the left); the bar and the side cues
   stay still. Same-site only, and only between neighbouring topics; Firefox simply opens the page. */
@view-transition{navigation:auto}
.topbar{view-transition-name:mn-bar}
.ribbon{view-transition-name:mn-dots}
.rings{view-transition-name:mn-rings}
/* page turn v2 (soft slide): the desk, bar, panels, dots and rings stay still; a still paper band sits where the sheet is
   (--vt-l / --vt-r / --vt-w / --vt-t, measured on the new page); only the writing drifts out and the new writing settles in */
.layout > .sidenav{view-transition-name:mn-side}
.layout > aside.toc{view-transition-name:mn-toc}
html.turn-next::view-transition,html.turn-prev::view-transition{background:var(--bg)}
html.turn-next::view-transition-group(root),html.turn-prev::view-transition-group(root){animation:none}
html.turn-next::view-transition-old(root),html.turn-prev::view-transition-old(root){animation:.22s cubic-bezier(.4,0,1,1) both mnTurnOutL;mix-blend-mode:normal;
  clip-path:inset(0 calc(var(--vt-r,0px) + 3px) 0 calc(var(--vt-l,0px) + 3px))}
html.turn-next::view-transition-new(root),html.turn-prev::view-transition-new(root){animation:.46s cubic-bezier(.2,.75,.25,1) .22s both mnTurnInR;mix-blend-mode:normal;
  clip-path:inset(0 calc(var(--vt-r,0px) + 3px) 0 calc(var(--vt-l,0px) + 3px))}
html.turn-prev::view-transition-old(root){animation-name:mnTurnOutR}
html.turn-prev::view-transition-new(root){animation-name:mnTurnInL}
/* things that stay: no morphing between pages, the new one is simply there */
html.turn-next::view-transition-group(mn-rings),html.turn-prev::view-transition-group(mn-rings),
html.turn-next::view-transition-group(mn-toc),html.turn-prev::view-transition-group(mn-toc),
html.turn-next::view-transition-group(mn-side),html.turn-prev::view-transition-group(mn-side),
html.turn-next::view-transition-group(mn-dots),html.turn-prev::view-transition-group(mn-dots){animation:none}
html.turn-next::view-transition-old(mn-rings),html.turn-prev::view-transition-old(mn-rings),
html.turn-next::view-transition-old(mn-toc),html.turn-prev::view-transition-old(mn-toc),
html.turn-next::view-transition-old(mn-side),html.turn-prev::view-transition-old(mn-side),
html.turn-next::view-transition-old(mn-dots),html.turn-prev::view-transition-old(mn-dots){display:none}
html.turn-next::view-transition-new(mn-rings),html.turn-prev::view-transition-new(mn-rings),
html.turn-next::view-transition-new(mn-toc),html.turn-prev::view-transition-new(mn-toc),
html.turn-next::view-transition-new(mn-side),html.turn-prev::view-transition-new(mn-side),
html.turn-next::view-transition-new(mn-dots),html.turn-prev::view-transition-new(mn-dots){animation:none}
@media (min-width:961px){
  html.turn-next:has(body:not(.kind-home))::view-transition,html.turn-prev:has(body:not(.kind-home))::view-transition{
    background:linear-gradient(var(--paper),var(--paper)) var(--vt-l,0px) var(--vt-t,0px) / var(--vt-w,0px) 100% no-repeat,var(--desk)}
}
@keyframes mnTurnInR{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes mnTurnInL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes mnTurnOutL{to{opacity:0;transform:translateX(-30px)}}
@keyframes mnTurnOutR{to{opacity:0;transform:translateX(30px)}}
@media (min-width:961px) and (max-width:1240px){   /* reader is pushed right by the pinned menu here: keep some desk at the edge */
  html[data-side="pin"]:has(.layout > .sidenav){--sheet-m:12px}
}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} .done-card.ink-anim .done-toggle input:checked+.box svg path,.done-card.ink-anim.is-done .ink-done{animation:none} }
@media print{ .pg-head,.ink-done{display:none!important} body:not(.kind-home) .layout > article::before,body:not(.kind-home) .layout > article::after{display:none} }

/* ---------- shapes: one family of rounded squares (2026-10-26) ----------
   14px: bar, floating panels, paper sheet, Home cards (--radius-lg) · 12px: boxes and cards in the notes (--radius)
   9px: buttons and the logo (--radius-sm) · 6px: tags, counts, small pills · thin progress bars 3px · rings and dots stay round (progress marks) */
.topbar,html[data-side="auto"] .sidenav,html[data-toc="auto"] aside.toc,.sx-box,.ts-panel{border-radius:var(--radius-lg)}
.iconbtn,.brand .logo,.topbar .brand .logo,.rs-go,.ts-btn,.pc-go,.sx-item,.pane-pin,.sw-ic,.sn-switch,.sn-switch summary{border-radius:var(--radius-sm)}
.sn-switch[open] summary{border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.tag,.pill,.callout-title .count,.pfilter button,.sx-x,.sx-id,.sidenav a,.sn-unit summary,.mn-tip button,.fs-pill button{border-radius:6px}
.pfilter,.fs-pill,.mn-tip{border-radius:10px}
html[data-toc="auto"] .rings{border-radius:12px}
.pbar,.pbar i,ol.subjects .bar,ol.subjects .bar i{border-radius:3px}
html[data-bar="hide"] .topribbon{border-radius:0 0 6px 6px}
html[data-side="auto"] .ribbon{border-radius:8px}
.pager a,ul.topic-list{border-radius:var(--radius)}   /* boxes inside the note: 12px */

/* ---------- come back where you were (round 2, 2026-10-26) ---------- */
body.kind-topic .layout > article{position:relative}
.mn-here{position:absolute;left:0;right:0;height:0;pointer-events:none;z-index:2;animation:mnHere 9s ease both}
.mn-here::before{content:"";position:absolute;left:-12px;top:-.15em;width:3px;height:1.5em;border-radius:2px;background:var(--accent);opacity:.55}
.mn-here span{display:none}
@media (min-width:961px){
  body:not(.kind-home) .mn-here::before{left:-29px}
  .mn-here.roomy span{display:block;position:absolute;right:calc(100% + 40px);top:-.5em;font-family:var(--hand);font-size:1.15rem;line-height:1;
    color:var(--muted);white-space:nowrap;transform:rotate(-3deg)}
}
@keyframes mnHere{0%{opacity:0}5%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mn-here{animation:mnHereR 9s step-end both}@keyframes mnHereR{0%{opacity:1}100%{opacity:0}}}
@media print{.mn-here{display:none}}

/* ---------- your highlights + notes (round 3, 2026-10-26): one soft green marker; notes in the right margin ---------- */
:root{--mk:rgba(92,190,128,.34);--mk-hot:rgba(92,190,128,.55);--mk-ink:#2f6b4c;
  --mk-p:rgba(240,128,170,.30);--mk-p-hot:rgba(240,128,170,.50);--mk-p-ink:#9a3462;
  --mk-l:rgba(150,128,232,.28);--mk-l-hot:rgba(150,128,232,.48);--mk-l-ink:#5a47a8}
[data-theme="paper"]{--mk:rgba(80,170,110,.32);--mk-hot:rgba(80,170,110,.52);--mk-ink:#2b6345;
  --mk-p:rgba(226,112,156,.28);--mk-p-hot:rgba(226,112,156,.48);--mk-p-ink:#93305b;
  --mk-l:rgba(136,116,220,.26);--mk-l-hot:rgba(136,116,220,.46);--mk-l-ink:#5242a0}
[data-theme="dark"]{--mk:rgba(96,206,146,.24);--mk-hot:rgba(96,206,146,.42);--mk-ink:#93d3b0;
  --mk-p:rgba(246,138,178,.24);--mk-p-hot:rgba(246,138,178,.42);--mk-p-ink:#f2a9c6;
  --mk-l:rgba(172,152,255,.26);--mk-l-hot:rgba(172,152,255,.44);--mk-l-ink:#c4b8ff}
/* the three colours: green = Important, pink = Doubt, lavender = Formula / revise */
[data-c="p"]{--mk:var(--mk-p);--mk-hot:var(--mk-p-hot);--mk-ink:var(--mk-p-ink)}
[data-c="l"]{--mk:var(--mk-l);--mk-hot:var(--mk-l-hot);--mk-ink:var(--mk-l-ink)}
mark.mn-hl{color:inherit;background:var(--mk);padding:.04em 0;border-radius:0;-webkit-box-decoration-break:slice;box-decoration-break:slice;cursor:pointer;transition:background .15s}
mark.mn-hl.s{border-top-left-radius:.45em .5em;border-bottom-left-radius:.3em .4em;padding-left:.1em;margin-left:-.1em}
mark.mn-hl.e{border-top-right-radius:.3em .4em;border-bottom-right-radius:.5em .5em;padding-right:.1em;margin-right:-.1em}
mark.mn-hl.hot,mark.mn-hl:hover{background:var(--mk-hot)}
mark.term mark.mn-hl{padding-top:0;padding-bottom:0}
.mn-note{position:absolute;z-index:2;font-family:var(--hand);font-size:1.12rem;line-height:1.18;color:var(--mk-ink);white-space:pre-wrap;overflow-wrap:anywhere;
  padding-left:8px;border-left:2px solid var(--mk);max-height:9.6em;overflow:hidden;cursor:pointer;transform:rotate(-.6deg);transform-origin:top left;
}
.mn-note.long{-webkit-mask-image:linear-gradient(#000 calc(100% - 1.4em),transparent);mask-image:linear-gradient(#000 calc(100% - 1.4em),transparent)}
.mn-note:hover{border-left-color:var(--mk-hot)}
.mn-nicon{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin:0 .1em 0 .15em;padding:0;vertical-align:.1em;border:0;border-radius:6px;
  background:var(--mk);color:var(--mk-ink);cursor:pointer}
.mn-nicon svg{width:.8em;height:.8em}
.mn-tb{position:fixed;z-index:90;display:flex;gap:2px;padding:4px;border:1px solid var(--border-2);border-radius:10px;background:var(--surface);
  box-shadow:0 8px 24px -10px rgba(20,24,31,.35),0 1px 2px rgba(20,24,31,.08)}
.mn-tb[hidden],.mn-ed[hidden]{display:none}
.mn-tb button{border:0;background:none;color:var(--text);font:550 .84rem var(--font);padding:.42rem .72rem;border-radius:7px;cursor:pointer;white-space:nowrap}
.mn-tb button:hover,.mn-tb button:focus-visible{background:var(--surface-2)}
.mn-tb button.dot{width:34px;padding:0;display:grid;place-items:center}
.mn-tb button.dot::before{content:"";width:16px;height:16px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.mn-tb button.dot.c-g{--c:rgba(92,190,128,.75)} .mn-tb button.dot.c-p{--c:rgba(240,128,170,.75)} .mn-tb button.dot.c-l{--c:rgba(150,128,232,.75)}
.mn-tb button.dot[aria-pressed="true"]::before{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--c)}
.mn-tb button.nt{border-left:1px solid var(--border);border-radius:0 7px 7px 0;margin-left:2px}
.mn-tb button.rm{color:var(--muted)}
.mn-ed{position:fixed;z-index:91;width:min(360px,calc(100vw - 20px));padding:12px;border:1px solid var(--border-2);border-radius:var(--radius-lg);background:var(--surface);
  box-shadow:0 18px 40px -16px rgba(20,24,31,.4),0 1px 2px rgba(20,24,31,.08)}
.mn-ed-q{font-size:.82rem;color:var(--muted);margin:0 2px 8px;line-height:1.4;overflow-wrap:anywhere}
.mn-ed textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;min-height:84px;padding:.55rem .65rem;border:1px solid var(--border-2);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);font:400 .95rem/1.45 var(--font)}
.mn-ed textarea:focus{outline:2px solid var(--accent-line);outline-offset:0;border-color:var(--accent-line)}
.mn-ed-row{display:flex;align-items:center;gap:6px;margin-top:10px}
.mn-ed-row span{flex:1}
.mn-ed-row button{border:1px solid var(--border-2);background:var(--surface);color:var(--text);font:550 .84rem var(--font);padding:.42rem .8rem;border-radius:var(--radius-sm);cursor:pointer}
.mn-ed-row .mn-ed-ok{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme="dark"] .mn-ed-row .mn-ed-ok{color:#0f1218}
.mn-ed-row .mn-ed-del{border-color:transparent;color:var(--muted);padding-left:.3rem;padding-right:.3rem}
.mn-ed-row .mn-ed-del[hidden]{display:none}
@media print{.mn-tb,.mn-ed,.mn-nicon{display:none}.mn-note{color:#333}}

/* ---------- focus (round 3, 2026-10-26): bar behind the ribbon on laptops, soft paragraphs, faint dots + rings ---------- */
html.focus.reader article .fx-u{transition:opacity .3s ease}
html.focus.reader article .fx-u:not(.fx-on){opacity:.28}
html.focus.reader article :is(h1,h2,h3,h4).fx-u:not(.fx-on){opacity:.5}
html.focus.reader article .mn-note{opacity:.45;transition:opacity .3s}
html.focus.reader article .mn-note:hover{opacity:1}
html.focus.reader .ribbon:not(:hover):not(:focus-visible),html.focus.reader .rings:not(:hover){opacity:.12;transition:opacity .3s}
html.focus.reader[data-bar="hide"].bar-line #progress{opacity:1}
.fx-exit{display:none}
@media (min-width:961px){html.focus.reader .fx-exit{display:inline-flex;width:auto;padding:0 .75rem;font:550 .82rem var(--font);color:var(--text);border-radius:var(--radius-sm)}}
.ts-fx{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.ts-fx div{flex:1;display:grid;gap:2px}
.ts-fx b{font:600 .88rem var(--font);color:var(--text)}
.ts-fx span{font-size:.76rem;color:var(--muted);line-height:1.35}
.ts-fx kbd{font-size:.7rem;padding:0 .3em}
.fx-sw{flex:none;position:relative;width:40px;height:24px;padding:0;border:1px solid var(--border-2);border-radius:8px;background:var(--surface-2);cursor:pointer;transition:background .2s,border-color .2s}
.fx-sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:5px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:translate .2s cubic-bezier(.3,.7,.2,1)}
.fx-sw[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.fx-sw[aria-checked="true"] i{translate:16px 0}
@media (prefers-reduced-motion:reduce){html.focus.reader article .fx-u,.fx-sw,.fx-sw i{transition:none}}
@media print{html.focus.reader article .fx-u{opacity:1!important}}
html.focus.reader article > hr{opacity:.4}

/* ---------- PYQ stamps: the section tags move into the paper's left margin on roomy laptops (html.stamps-m, set by the
   script when the margin is 100px+), like a teacher's mark beside the heading. Yellow = asked in a recent paper, grey = only in
   other MAKAUT papers (same as the rings). Hover / focus / tap shows the marks + the years asked. Narrow screens and pinned
   panels keep them beside the heading. Left margin = the site's marks; right margin = your notes. ---------- */
article.kind-topic h2{position:relative}
h2 .tag-sec{cursor:help;outline:0}
h2 .tag-sec:focus-visible{box-shadow:0 0 0 2px var(--accent-line)}
h2 .tag-sec .st-k,h2 .tag-sec .st-m{font:inherit}
h2 .tag-sec::before{content:attr(data-tip);box-sizing:border-box;position:absolute;z-index:6;left:0;top:calc(100% + 4px);width:max-content;max-width:min(300px,100%);
  white-space:pre-line;text-align:left;font:500 .78rem/1.55 var(--font);letter-spacing:0;text-transform:none;color:var(--text);background:var(--surface);
  border:1px solid var(--border-2);border-radius:10px;padding:.5rem .7rem;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;translate:0 -3px;transition:opacity .15s,translate .15s,visibility 0s .15s;pointer-events:none}
h2 .tag-sec:hover::before,h2 .tag-sec:focus::before{opacity:1;visibility:visible;translate:0 0;transition:opacity .15s .12s,translate .15s .12s,visibility 0s .12s}
html.stamps-m article.kind-topic h2 .tag-sec{position:absolute;right:calc(100% + 40px / var(--z,1));top:calc(.1em + 2px / var(--z,1));margin:0;
  display:flex;flex-direction:column;align-items:center;gap:0;width:calc(56px / var(--z,1));padding:calc(5px / var(--z,1)) 0 calc(4px / var(--z,1));
  border-radius:calc(6px / var(--z,1));border:calc(1.5px / var(--z,1)) solid rgba(227,184,31,.7);background:rgba(227,184,31,.10);color:#8d6300;
  font:600 calc(9.5px / var(--z,1))/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;vertical-align:0}
html.stamps-m article.kind-topic h2 .tag-sec .st-m{font:700 calc(17px / var(--z,1))/1.1 var(--serif);letter-spacing:0;text-transform:none}
html.stamps-m article.kind-topic h2 .tag-sec .st-o{font-size:0}
html.stamps-m article.kind-topic h2 .tag-sec .st-o::after{content:"other";font-size:calc(9.5px / var(--z,1));letter-spacing:.06em}
html.stamps-m article.kind-topic h2 .tag-sec .st-r::after{content:"recent"}
html.stamps-m article.kind-topic h2 .tag-sec.other{border-color:var(--border-2);background:transparent;color:var(--muted)}
html.stamps-m article.kind-topic h2 .tag-sec::before{left:0;top:calc(100% + 6px / var(--z,1));max-width:none;width:max-content;font-size:calc(12.5px / var(--z,1));
  padding:calc(8px / var(--z,1)) calc(11px / var(--z,1));border-radius:calc(10px / var(--z,1))}
[data-theme="dark"].stamps-m article.kind-topic h2 .tag-sec:not(.other){border-color:rgba(245,220,122,.55);background:rgba(245,220,122,.08);color:#f5dc7a}
[data-theme="paper"].stamps-m article.kind-topic h2 .tag-sec:not(.other){border-color:rgba(196,150,20,.7);background:rgba(227,184,31,.12);color:#7d5600}
@media print{h2 .tag-sec::before{display:none}}

/* ---------- preview cards (cross-references) + the "← Back to 2.17" chip ---------- */
.xc{position:fixed;z-index:80;box-sizing:border-box;padding:.8rem .95rem .75rem;background:var(--surface);color:var(--text);border:1px solid var(--border-2);
  border-radius:12px;box-shadow:var(--shadow-lg);font:400 .9rem/1.5 var(--font);opacity:0;translate:0 4px;pointer-events:none;transition:opacity .16s,translate .16s}
.xc.up{translate:0 -4px}
.xc.on{opacity:1;translate:0 0;pointer-events:auto}
.xc-k{font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xc-h{font:600 1.08rem/1.3 var(--serif);margin:.2rem 0 .3rem;color:var(--text)}
.xc-t{margin:0;color:var(--muted);font-size:.86rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.xc-f{display:flex;align-items:center;gap:.45rem;margin-top:.6rem}
.xc-tag{font:600 .68rem/1.6 var(--font);padding:.02rem .5rem;border-radius:6px;background:rgba(227,184,31,.14);color:#8d6300;border:1px solid rgba(227,184,31,.45)}
.xc-tag.other{background:var(--surface-2);color:var(--muted);border-color:var(--border-2)}
[data-theme="dark"] .xc-tag:not(.other){color:#f5dc7a;background:rgba(245,220,122,.1);border-color:rgba(245,220,122,.35)}
.xc-done{font-size:.74rem;font-weight:600;color:rgb(var(--c-tip))}
.xc-go{margin-left:auto;font-size:.8rem;font-weight:600;color:var(--link);text-decoration:none;padding:.2rem .55rem;border-radius:9px}
.xc-go:hover{background:var(--accent-soft)}
.back-chip{position:fixed;z-index:70;left:50%;bottom:22px;translate:-50% 8px;opacity:0;display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .9rem;border-radius:10px;border:1px solid var(--border-2);background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);font:500 .84rem/1.2 var(--font);box-shadow:var(--shadow-lg);cursor:pointer;
  transition:opacity .25s,translate .25s}
.back-chip b{font-weight:700}
.back-chip.on{opacity:1;translate:-50% 0}
.back-chip.gone{opacity:0;translate:-50% 6px}
.back-chip:hover{border-color:var(--accent-line)}
@media (prefers-reduced-motion:reduce){.xc,.back-chip{transition:none}}
@media print{.xc,.back-chip{display:none}}