/* PYQ explained posts. Uses the site's own tokens from site.css; adds a highlighter, answer ink and plot shade. */
:root{--hl:#E9F65E;--hl-ink:#16213A;--ans-ink:#1B2A6B;--plot-shade:#FFCB45}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hl:#5A6612;--hl-ink:#F6FFC8;--ans-ink:#B9CCFF;--plot-shade:#C99A1E}}
:root[data-theme="dark"]{--hl:#5A6612;--hl-ink:#F6FFC8;--ans-ink:#B9CCFF;--plot-shade:#C99A1E}

.article.pyq{max-width:none;gap:0}
.pyq > *{min-width:0}
.pyq p,.pyq li{max-width:72ch}
.pyq h1{font-family:var(--display);font-size:var(--t-xl);font-weight:800;line-height:1.12;letter-spacing:-.015em;color:var(--ink);text-wrap:balance;margin:0}
.pyq h2{font-size:1.45rem;text-wrap:balance}
.pyq .pyq-by{font-size:var(--t-s);color:var(--ink-2)}
.pyq .post-meta{flex-wrap:wrap}
.pyq .lead{font-size:var(--t-m);color:var(--ink-2)}
.pyq section{display:flex;flex-direction:column;gap:14px;padding-block:26px;border-top:1px solid var(--line-2)}
.pyq header.pyq-head{display:flex;flex-direction:column;gap:14px;padding-bottom:26px}
.pyq .eyebrow{font:600 var(--t-xs)/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pyq .qcard{background:var(--card);border:1px solid var(--line-2);border-left:5px solid var(--sun);border-radius:var(--r-in);padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.pyq .qcard .src{font-size:var(--t-xs);color:var(--ink-2);font-weight:600}
.pyq .quick{background:var(--pen-wash);border-radius:var(--r-in);padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.pyq .quick b.lbl{font:700 var(--t-xs) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--pen)}
.pyq .num{font:800 1.12em var(--display);color:var(--ink);background:linear-gradient(transparent 58%,var(--sun) 58%);padding:0 .1em}
.pyq ul.clean{padding-left:1.2em;list-style:disc;display:flex;flex-direction:column;gap:8px}
.pyq blockquote.syl{margin:0;padding:8px 16px;border-left:3px solid var(--pen);color:var(--ink-2);font-style:italic}
.pyq .kw{background:var(--hl);color:var(--hl-ink);padding:0 .2em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* keyword tree */
.pyq .tree{display:flex;flex-direction:column;align-items:center}
.pyq .troot{background:var(--night);color:var(--sun);font:700 1rem/1.3 var(--display);padding:10px 16px;border-radius:10px;text-align:center;max-width:440px}
.pyq .tstem{width:2px;height:20px;background:var(--pen)}
.pyq .tbranches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;position:relative;padding-top:20px}
.pyq .tbranches::before{content:"";position:absolute;top:0;left:16.66%;right:16.66%;border-top:2px solid var(--pen)}
.pyq .tbranch{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.pyq .tbranch::before{content:"";position:absolute;top:-20px;left:50%;height:20px;border-left:2px solid var(--pen)}
.pyq .thead{align-self:center;background:var(--sun);color:var(--on-sun);font:800 .95rem var(--display);padding:6px 14px;border-radius:8px}
.pyq .tsub{border-left:2px solid var(--pen);margin-left:10px;padding-left:12px;display:flex;flex-direction:column;gap:4px}
.pyq .tsub h3{font-size:.95rem;margin:0;position:relative}
.pyq .tsub h3::before{content:"";position:absolute;left:-14px;top:.6em;width:10px;border-top:2px solid var(--pen)}
.pyq .tsub ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.pyq .tsub li{font-size:.9rem;line-height:1.45;padding-left:14px;position:relative}
.pyq .tsub li::before{content:"";position:absolute;left:0;top:.65em;width:8px;border-top:1px solid var(--ink-2)}
@media (max-width:640px){
  .pyq .tbranches{grid-template-columns:1fr;padding-top:0;gap:18px}
  .pyq .tbranches::before,.pyq .tbranch::before{display:none}
  .pyq .thead{align-self:flex-start}
}

/* figures */
.pyq figure{margin:0;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-in);padding:14px;display:flex;flex-direction:column;gap:10px}
.pyq figcaption{font-size:var(--t-s);color:var(--ink-2)}
.pyq .fig3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media (max-width:560px){.pyq .fig3{grid-template-columns:1fr}}
.pyq .figscroll{overflow-x:auto}
.pyq svg{display:block;width:100%;height:auto}
.pyq svg .box-in{fill:var(--pen-wash)}
.pyq svg .wall{stroke:var(--ink);stroke-width:3}
.pyq svg .axis{stroke:var(--ink-2);stroke-width:1}
.pyq svg .shade{fill:var(--plot-shade);opacity:.75}
.pyq svg .cut{stroke:var(--margin);stroke-width:1.3;stroke-dasharray:4 3}
.pyq svg .curve{fill:none;stroke:var(--pen);stroke-width:2.2}
.pyq svg .lab{fill:var(--ink-2);font:11px var(--body)}
.pyq svg .tag{fill:var(--ink);font:700 12px var(--body)}
.pyq svg .pval{fill:var(--ink);font:700 12.5px var(--body)}
.pyq svg .grid{stroke:var(--line-2);stroke-width:1}
.pyq svg .env{fill:none;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 4}
.pyq svg .classical{stroke:var(--margin);stroke-width:1.6;stroke-dasharray:7 4}
.pyq svg .clabel{fill:var(--margin);font:600 11.5px var(--body)}
.pyq svg .join{fill:none;stroke:var(--line-2);stroke-width:1.5}
.pyq svg .dot{fill:var(--pen)}
.pyq svg .dot.hi{fill:var(--plot-shade);stroke:var(--pen);stroke-width:2}
.pyq svg .bwall{stroke:var(--ans-ink);stroke-width:2.2;fill:none;stroke-linecap:round}
.pyq svg .hatch{stroke:var(--ans-ink);stroke-width:1.2}
.pyq svg .dash{stroke:var(--ans-ink);stroke-width:1.2;stroke-dasharray:4 4}
.pyq svg .hand{fill:var(--ans-ink);font:22px var(--hand)}
.pyq svg .hand.sm{font-size:18px}

/* notebook answer pages */
.pyq .pages{display:flex;flex-direction:column;gap:22px}
.pyq .page{background:var(--sheet);border:1px solid var(--line-2);border-radius:4px 12px 12px 4px;box-shadow:var(--shadow-s);position:relative;padding-left:30px;
  background-image:radial-gradient(circle at 13px 50%,var(--sky) 5px,var(--line) 5.5px,var(--line) 7px,transparent 7.5px);background-size:30px 30px;background-repeat:repeat-y}
.pyq .pgtop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:10px 16px 6px 12px;font:600 var(--t-xs) var(--body);color:var(--ink-2);border-bottom:1px solid var(--rule)}
.pyq .pgtop b{color:var(--ink)}
.pyq .sheet{font-family:var(--hand);color:var(--ans-ink);font-size:1.08rem;line-height:32px;padding:6px 18px 24px 62px;position:relative;
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px);background-position:0 6px}
@media (max-width:520px){.pyq .sheet{padding-left:44px;font-size:1rem}}
.pyq .sheet p,.pyq .sheet li{max-width:none}
.pyq .mnote{position:absolute;left:10px;font:700 1rem var(--hand);color:var(--ans-ink);text-decoration:underline}
@media (max-width:520px){.pyq .mnote{left:4px;font-size:.85rem}}
.pyq .sheet .q{font-weight:700}
.pyq .sheet .src{float:right;font-size:.95rem}
.pyq .sheet ol.roman{list-style:none;padding:0;margin:0;display:block}
.pyq .sheet ol.roman li{padding-left:2em;text-indent:-2em}
.pyq .withfig{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:10px;align-items:start}
@media (max-width:600px){.pyq .withfig{grid-template-columns:1fr}.pyq .withfig svg{max-width:240px}}
.pyq .eq{display:flex;align-items:center;justify-content:space-between;gap:10px;overflow-x:auto;padding-block:2px}
.pyq .eq .tagn{flex:none;font-size:1rem}
.pyq .eqc{display:flex;justify-content:center;overflow-x:auto;padding-block:2px}
.pyq .sheet math{color:var(--ans-ink);font-size:1.08em}
.pyq .boxed{display:inline-block;border:2px solid var(--ans-ink);padding:0 10px;margin-block:4px}
.pyq .dbl{border-bottom:4px double var(--ans-ink);padding-bottom:1px}
.pyq .sheet table{border-collapse:collapse;color:var(--ans-ink);font-family:var(--hand);margin-block:6px;font-variant-numeric:tabular-nums}
.pyq .sheet td,.pyq .sheet th{border:1.5px solid var(--ans-ink);padding:0 12px;line-height:30px;text-align:center}
.pyq .sheet .sketch{border:1px dashed var(--ans-ink);border-radius:6px;padding:6px;margin-block:8px;background:var(--sheet)}
.pyq .ind{padding-left:1.4em}

.pyq .variant{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-in);padding:16px;display:flex;flex-direction:column;gap:10px}
.pyq .faq{display:flex;flex-direction:column;gap:10px}
.pyq .faq details{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-in);padding:12px 16px}
.pyq .faq summary{font-weight:700;cursor:pointer;color:var(--ink)}
.pyq .faq details p{margin-top:8px}
.pyq .cta{display:flex;flex-wrap:wrap;gap:10px}