:root{
  --bg:#f5f1e8; --ink:#242d29; --muted:#5e655f; --rule:#bdc2b6; --accent:#6e3e29; --accent2:#6e3e29;
  --card:#e8e5da; --note:#eef1ea; --link:#3d5a4c;

  --s1:hsl(210 60% 82%); --s2:hsl(130 40% 82%); --s3:hsl(45 70% 80%); --s4:hsl(18 65% 82%); --s5:hsl(280 40% 84%);
  --s6:hsl(172 45% 80%); --s7:hsl(330 45% 85%); --s8:hsl(70 45% 78%); --s9:hsl(28 80% 78%);
  --r1:hsl(210 60% 78%); --r2:hsl(28 80% 74%); --r3:hsl(130 40% 76%); --r4:hsl(45 70% 76%); --r5:hsl(280 40% 80%);
  --r6:hsl(172 45% 76%); --r7:hsl(330 45% 80%); --r8:hsl(18 65% 78%); --r9:hsl(70 45% 74%); --r10:hsl(0 0% 80%); --r11:hsl(240 20% 82%);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#171e1b;--ink:#eeeae0;--muted:#b6bfb6;--rule:#536158;--accent:#e0b398;--accent2:#e0b398;--card:#28332e;--note:#1c2420;--link:#8fc4b0;

  --s1:hsl(210 35% 30%);--s2:hsl(130 25% 28%);--s3:hsl(45 40% 30%);--s4:hsl(18 40% 32%);--s5:hsl(280 25% 32%);--s6:hsl(172 30% 28%);--s7:hsl(330 28% 32%);--s8:hsl(70 28% 28%);--s9:hsl(28 50% 34%);
  --r1:hsl(210 35% 32%);--r2:hsl(28 50% 36%);--r3:hsl(130 25% 30%);--r4:hsl(45 40% 32%);--r5:hsl(280 25% 34%);--r6:hsl(172 30% 30%);--r7:hsl(330 28% 34%);--r8:hsl(18 40% 34%);--r9:hsl(70 28% 30%);--r10:hsl(0 0% 34%);--r11:hsl(240 15% 34%);}
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:1.125rem/1.7 var(--serif)}
a{color:var(--link);text-underline-offset:.15em}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--bg);padding:.4rem .7rem;z-index:10}
header.site{max-width:44rem;margin:0 auto;padding:1.2rem 1.25rem 0;font:.9rem var(--sans);display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;color:var(--muted)}
header.site a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
main{max-width:44rem;margin:0 auto;padding:1rem 1.25rem 4rem}
.kicker{font:600 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:2.2rem 0 .4rem}
h1{font-size:clamp(2.1rem,6vw,3.2rem);line-height:1.1;margin:.1em 0 .25em;font-weight:600;letter-spacing:-.01em}
.sub{font-size:1.3rem;line-height:1.4;color:var(--muted);margin:0 0 1rem;font-style:italic}
.by{font:.9rem var(--sans);color:var(--muted);margin:0 0 2rem}
.toc{font:.9rem var(--sans);display:flex;gap:.4rem .9rem;flex-wrap:wrap;padding:.8rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 0 2rem}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{text-decoration:underline}
.lede{font-size:1.28rem;line-height:1.6}
h2{font-size:1.6rem;line-height:1.25;margin:3rem 0 .6rem;font-weight:600}
h3{font:600 1.05rem/1.4 var(--sans);letter-spacing:.01em;margin:2rem 0 .4rem;color:var(--accent)}
p{margin:0 0 1.1rem}
ul.plain{padding-left:1.2rem}ul.plain li{margin:.45rem 0}
ol.missed{padding-left:1.4rem}ol.missed li{margin:.9rem 0}
.note{background:var(--note);border-left:4px solid var(--accent);padding:.4rem 1.2rem .1rem;margin:1.8rem 0;border-radius:0 6px 6px 0}
.note h2{font-size:1.15rem;margin:.8rem 0 .4rem}
.voices section{border-top:1px solid var(--rule);padding-top:.1rem}
.voices h3{color:var(--ink);margin-top:1.1rem}
.small{font-size:.95rem;line-height:1.6}.sources li{margin:.5rem 0}
.credit{color:var(--muted);margin-top:2rem}
footer{max-width:44rem;margin:0 auto;padding:1.5rem 1.25rem 3rem;font:.85rem var(--sans);color:var(--muted);border-top:1px solid var(--rule)}

/* ---- viewer ---- */
.viewer{margin:2rem -0.5rem;padding:1rem .9rem 1.1rem;background:var(--card);border:1px solid var(--rule);border-radius:10px;font-family:var(--sans)}
@media (min-width:60rem){.viewer{margin-left:-4rem;margin-right:-4rem;padding:1.2rem 1.4rem}}
.viewer h3{margin:.1rem 0 .6rem;color:var(--ink);font-size:1rem}
.tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 .8rem}
.tabs button,.chips button,.ctl button{font:500 .85rem var(--sans);padding:.4rem .7rem;border-radius:999px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.chips{display:flex;gap:.3rem;flex-wrap:wrap;margin:.2rem 0 .7rem;align-items:center}
.chips .lab{font-size:.8rem;color:var(--muted);margin-right:.2rem}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips button{padding:.25rem .6rem;font-size:.8rem}
.ctl{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .7rem}
.ctl button{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.ctl button.ghost{background:var(--bg);color:var(--ink);border-color:var(--rule)}
.pane[hidden]{display:none}
.gridwrap{display:grid;grid-template-columns:auto 1fr;gap:0 .5rem;align-items:stretch;max-width:46rem}
.slabels{display:grid;grid-template-rows:repeat(11,1fr);font-size:.7rem;color:var(--muted);text-align:right;padding-right:.1rem}
.slabels span{display:flex;align-items:center;justify-content:flex-end}
@media (max-width:40rem){.slabels{display:none}.gridwrap{grid-template-columns:1fr}}
.cells{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(11,minmax(2.35rem,1fr));gap:3px}
.cell{font:500 clamp(.58rem,2.3vw,.85rem)/1.15 var(--sans);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:6px;padding:.15rem .1rem;background:var(--c,var(--card));color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;overflow-wrap:anywhere;transition:opacity .2s}
.cell.dim{opacity:.28}
.cell.center{outline:3px solid #c0152f;outline-offset:-1px}
.cell.neutral{--c:color-mix(in srgb,var(--card) 70%,var(--bg))}
.cell.pair9{box-shadow:inset 0 0 0 2px var(--accent2)}
.rotlayer{position:absolute;inset:0;pointer-events:none;transition:transform 2.6s cubic-bezier(.6,0,.3,1);transform-origin:50% 50%}
.rotlayer.turned{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.rotlayer{transition:none}}
.rotbox{position:absolute;border:2px solid hsl(210 70% 45%);background:color-mix(in srgb,hsl(210 70% 60%) 28%,transparent);border-radius:6px}
.info{min-height:3.2rem;margin:.7rem 0 .2rem;font-size:.92rem;line-height:1.45}
.info b{font-weight:600}
.cap{font-size:.88rem;color:var(--muted);line-height:1.5;margin:.5rem 0 0}
.legend{display:flex;flex-wrap:wrap;gap:.3rem .8rem;font-size:.75rem;color:var(--muted);margin:.4rem 0}
.legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;margin-right:.3rem;vertical-align:-.1rem;background:var(--c);border:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.stairscroll{overflow-x:auto;padding-bottom:.4rem}
.stair{display:grid;grid-template-columns:repeat(9,minmax(5.2rem,1fr));gap:4px;min-width:50rem}
.stair .col{display:flex;flex-direction:column;gap:3px}
.stair .col h4{font:600 .75rem var(--sans);margin:0 0 .2rem;text-align:center;color:var(--muted)}
.stair .cell{min-height:1.9rem;font-size:.72rem}
.artfig{margin:0;display:grid;gap:.6rem;justify-items:center}
.artfig img{max-width:100%;height:auto;max-height:78vh;border-radius:6px;border:1px solid var(--rule);background:#fff}
.artfig figcaption{font-size:.88rem;color:var(--muted);max-width:36rem;line-height:1.5}

/* series home */
.cards{display:grid;gap:1rem;margin:1.5rem 0}
.card{display:block;padding:1.1rem 1.2rem;border:1px solid var(--rule);border-radius:10px;background:var(--card);text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--accent)}
.card .k{font:600 .75rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card h2{margin:.2rem 0;font-size:1.35rem}.card p{margin:0;color:var(--muted);font-size:1rem}

/* ---- skill patches ---- */
.patch{margin:1.2rem -0.5rem;font-family:var(--sans)}
@media (min-width:60rem){.patch{margin-left:-3rem;margin-right:-3rem}}
.patch figcaption{font-size:.8rem;color:var(--muted);margin:0 0 .35rem;line-height:1.5}
.patch code,.skillfull code{font:.85em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.patch pre.diff,.skillfull pre{margin:0;padding:.7rem .2rem;overflow-x:auto;border:1px solid var(--rule);border-radius:8px;background:var(--card);font:.78rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.patch pre.diff span{display:block;padding:0 .7rem;border-left:4px solid transparent;min-height:1.5em}
.patch .add{background:color-mix(in srgb,#2e9e5b 20%,transparent);border-left-color:#2e9e5b}
.patch .del{background:color-mix(in srgb,#c0392b 20%,transparent);border-left-color:#c0392b}
.patch .hunk{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.patch .meta{color:var(--muted);font-weight:600}
.patch .ctx{color:var(--muted)}
.skillfull{margin:.4rem 0 1.4rem;font-family:var(--sans)}
.skillfull summary{cursor:pointer;font-size:.88rem;color:var(--link);margin:.3rem 0}
.skillfull pre{padding:.7rem}