/* The board story: a reading page in the Bites house style (~/bites/DESIGN.md). */
:root{
  color-scheme: light dark;
  --ink:#1c1c1a; --ink-hover:#000; --on-ink:#fff;
  --body:#62625f; --muted:#70706c;
  --page:#fcfcfc; --surface:#fff; --soft:#f7f7f5; --sunken:#f0f0ee; --hair:#e6e6e3;
  --accent:#2456f5; --on-accent:#fff; --live:#2f8f4e;
  --kind-prose:#b8751a; --kind-config:#3b72c4; --kind-script:#2f8f5b;
  --ann:oklch(0.62 0.005 30);
  --shadow:0 0 0;
  --ring:0 0 0 1px rgb(var(--shadow)/.08);
  --raised:0 0 0 1px rgb(var(--shadow)/.05),0 1px 3px rgb(var(--shadow)/.05),0 4px 10px -4px rgb(var(--shadow)/.05);
  --pop:0 0 0 1px rgb(var(--shadow)/.08),0 12px 32px -8px rgb(var(--shadow)/.18);
  --hairw:1px;
  --sans:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"Berkeley Mono","JetBrains Mono","Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --hand:"Shantell Sans",cursive;
  --measure:55ch; --bleed:32px;
  --ease:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme:dark){:root{
  --ink:#ededea; --ink-hover:#fff; --on-ink:#121212;
  --body:#a8a8a3; --muted:#8f8f8a;
  --page:#121212; --surface:#1c1c1b; --soft:#181817; --sunken:#222220; --hair:#2e2e2b;
  --accent:#7c9dff; --on-accent:#121212; --live:#57b874;
  --kind-prose:#d39a4a; --kind-config:#7ea3e0; --kind-script:#6cb890;
  --shadow:255 255 255;
}}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){:root{--hairw:.5px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--page);color:var(--body);font:400 16px/1.6 var(--sans);font-feature-settings:"cv11" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;text-rendering:optimizeLegibility}
::selection{background:color-mix(in oklch,var(--accent) 18%,transparent)}
a{color:inherit;text-decoration:underline;text-decoration-thickness:from-font;text-underline-position:from-font;text-underline-offset:2px;transition:color 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--ink)}}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
figure{margin:0}
code,kbd,.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- page ---------- */
main{padding:92px 16px 64px}
@media (max-width:1023px){main{padding-top:48px}}
.col{max-width:var(--measure);margin:0 auto;position:relative}
h1,h2,h3{color:var(--ink);font-weight:500;text-wrap:balance;margin:0}
h1{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin:0 0 16px}
/* a section heading: 64px above it and 24px below, 8px when text follows. Padding, not margin, so the space adds
   to the gap of what comes before and after it (the course gets the same sums from an inline-block link) */
h2{font-size:20px;line-height:1.25;margin:0;padding:64px 0 24px}
h2:has(+ p),h2:has(+ ul){padding-bottom:8px}
h3{font-size:17px;line-height:1.25;margin:32px 0 0}
p{margin:12px 0;text-wrap:pretty}
p strong,li strong{color:var(--ink);font-weight:500}
.lede{font-size:16px;color:var(--body)}
ul.plain,ol.plain{margin:12px 0;padding-left:20px}
ul.plain li,ol.plain li{margin:4px 0}
.byline{font-size:13px;color:var(--muted);margin:0 0 32px}
:not(pre) > code{background:var(--sunken);color:var(--ink);border-radius:4px;padding:1px 5px;font-size:.84em}
.turn{color:var(--ink)}
.nw{white-space:nowrap}
hr.rule{border:0;border-top:var(--hairw) solid var(--hair);margin:48px 0}

/* components sit 24px from the text around them, prompt cards 16px (as in course-design); at 1024px+ they break out 32px each side */
.blk{margin:24px 0}
.blk:has(> .prompt){margin:16px 0}
@media (min-width:1024px){.blk.out{margin-left:calc(-1 * var(--bleed));margin-right:calc(-1 * var(--bleed))}}
.wide{position:relative;width:min(1144px,calc(100vw - 48px));left:50%;transform:translateX(-50%);margin:24px 0}
@media (max-width:639px){.wide{width:calc(100vw - 16px)}}

/* ---------- browser frame + appshot ---------- */
.frame{background:var(--surface);border-radius:12px;box-shadow:var(--ring);overflow:hidden;position:relative}
.frame-bar{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 14px;background:var(--soft);border-bottom:1px solid var(--sunken)}
.dots{display:flex;gap:8px;flex:none}
.dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.url{flex:1;min-width:0;height:28px;display:flex;align-items:center;padding:0 12px;background:var(--surface);border:1px solid var(--sunken);border-radius:7px;
  font:400 13px/1 var(--mono);color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.url span{overflow:hidden;text-overflow:ellipsis}
.fbtn{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:7px;color:var(--muted);position:relative;transition:background-color 150ms var(--ease),color 150ms var(--ease),transform 150ms var(--ease)}
.fbtn::after{content:"";position:absolute;inset:-8px}
.fbtn svg{width:16px;height:16px}
.fbtn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.fbtn:hover{background:var(--sunken);color:var(--ink)}}
.frame-view{position:relative;overflow:hidden;background:var(--surface)}
.frame-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.frame-stage iframe{display:block;border:0;background:var(--surface)}
.frame.still iframe{pointer-events:none}
.frame.still .shot-reset{display:none}
.frame.phone{max-width:360px;margin-left:auto;margin-right:auto}
.frame.phone .dots{display:none}
.frame-cover{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px;background:var(--surface);transition:opacity 220ms var(--ease)}
.frame-cover.gone{opacity:0;pointer-events:none}
.shot-pin{position:absolute;pointer-events:none;border-radius:10px;box-shadow:0 0 0 2px var(--accent),0 0 0 6px color-mix(in oklch,var(--accent) 16%,transparent);transition:opacity 220ms var(--ease)}
.frame.touched .shot-pin{opacity:0}
.tour{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.tour button{height:32px;padding:0 14px;border-radius:9999px;background:var(--surface);box-shadow:var(--raised);color:var(--ink);font-size:13px;font-weight:500;transition:box-shadow 150ms var(--ease),transform 150ms var(--ease)}
.tour button:active{transform:scale(.96)}
.tour button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);box-shadow:none}
@media (hover:hover) and (pointer:fine){.tour button:not([aria-pressed="true"]):hover{box-shadow:0 0 0 1px rgb(var(--shadow)/.08),0 1px 3px rgb(var(--shadow)/.07),0 4px 10px -4px rgb(var(--shadow)/.08)}}

/* ---------- prompt / reply / file cards ---------- */
.prompt{position:relative;background:var(--soft);border-radius:12px;padding:12px 52px 12px 16px;font:400 13px/24px var(--mono);color:var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
@media (min-width:1024px){.blk.out .prompt,.blk.out .reply{padding-left:var(--bleed)}.blk.out .file-head,.blk.out .file pre,.blk.out .file .md,.blk.out details.long > summary,.blk.out details.long pre{padding-left:var(--bleed)}}
.prompt .who{display:block;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);margin-bottom:2px;letter-spacing:.01em}
.copy{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:6px;display:grid;place-items:center;color:var(--muted);transition:background-color 150ms var(--ease),color 150ms var(--ease),transform 150ms var(--ease)}
.copy::after{content:"";position:absolute;inset:-6px}
.copy:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.copy:hover{background:var(--sunken);color:var(--ink)}}
.copy svg{width:16px;height:16px}
.copy .ck{display:none}.copy.done .cp{display:none}.copy.done .ck{display:block}
.reply{position:relative;margin-top:-8px;background:var(--surface);border-radius:12px;box-shadow:var(--ring);padding:12px 16px;font-size:13px;line-height:1.55;color:var(--body)}
.reply .who{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:2px}
.pair{position:relative}
.pair .prompt{z-index:1}
.file{background:var(--surface);border-radius:12px;box-shadow:var(--ring);overflow:hidden}
.file-head{display:flex;align-items:center;gap:8px;padding:7px 16px;background:var(--soft);border-bottom:1px solid var(--sunken);font:400 12px/20px var(--mono);color:var(--muted)}
.file-head svg{width:14px;height:14px;flex:none}
.file-head .k-prose{color:var(--kind-prose)}.file-head .k-config{color:var(--kind-config)}.file-head .k-script{color:var(--kind-script)}
.file pre{margin:0;padding:12px 16px;font:400 12px/20px var(--mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.file pre .dim{color:var(--muted)}
.file pre .tag{color:var(--ink);background:color-mix(in oklch,var(--ann) 16%,transparent);border-radius:3px;box-shadow:-.15em 0 0 color-mix(in oklch,var(--ann) 16%,transparent),.15em 0 0 color-mix(in oklch,var(--ann) 16%,transparent)}
.file pre b{font-weight:500;color:var(--ink)}
.file .md{padding:12px 16px;font-size:13px;line-height:1.55;color:var(--body)}
.file .md p{margin:0 0 8px}.file .md ol,.file .md ul{margin:0 0 8px;padding-left:18px}.file .md li{margin:3px 0}
.file .md strong{color:var(--ink);font-weight:500}

/* a long piece (a brief an agent wrote) sits closed */
details.long{background:var(--surface);border-radius:12px;box-shadow:var(--ring);overflow:hidden}
details.long > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--soft);font:400 12px/20px var(--mono);color:var(--muted)}
details.long > summary::-webkit-details-marker{display:none}
details.long > summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform 150ms var(--ease);margin-right:4px}
details.long[open] > summary::before{transform:rotate(45deg)}
details.long > summary .grow{flex:1}
details.long .long-tbl{padding:4px 16px 12px;border-top:1px solid var(--sunken);overflow-x:auto}
details.long .long-tbl .tbl td.mono{font-size:12px;line-height:1.45}
details.long .long-tbl .tbl .n{width:28px;color:var(--muted)}
@media (min-width:1024px){.blk.out details.long .long-tbl{padding-left:var(--bleed)}}
details.long .doc-body{padding:14px 16px 18px;border-top:1px solid var(--sunken);font-size:14px;line-height:1.6;color:var(--body);max-height:560px;overflow:auto}
@media (min-width:1024px){.blk.out details.long .doc-body{padding-left:var(--bleed);padding-right:var(--bleed)}}
details.long .doc-body h4{font-size:15px;font-weight:500;color:var(--ink);margin:0 0 8px}
details.long .doc-body h5{font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--muted);margin:18px 0 6px}
details.long .doc-body p{margin:6px 0}
details.long .doc-body ol,details.long .doc-body ul{margin:6px 0;padding-left:20px}
details.long .doc-body li{margin:6px 0}
details.long .doc-body code{font-size:12px}
details.long pre{margin:0;padding:12px 16px 16px;font:400 12px/20px var(--mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;border-top:1px solid var(--sunken);max-height:520px;overflow:auto}

/* ---------- numbers ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin:24px 0 8px;padding:0;list-style:none}
@media (min-width:640px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats li{margin:0}
.stats b{display:block;font:500 32px/1 var(--sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--muted)}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums}
.tbl th{color:var(--ink);font-weight:500;text-align:left;padding:5px 10px 5px 0;border-bottom:1px solid var(--hair)}
.tbl td{padding:5px 10px 5px 0;border-bottom:1px solid var(--sunken);color:var(--body);vertical-align:top}
.tbl td.r,.tbl th.r{text-align:right;padding-right:0;white-space:nowrap}
.tbl .mono{font-size:12px}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:1280px){.scrollx{overflow:visible}}

/* ---------- node canvas: hand-drawn, ink on paper ----------
   One look for every diagram. Paper is the DESIGN.md surface (white, or #1c1c1b in dark), never beige; a light
   grain sits on top. Boxes and arrows are drawn as wobbly ink strokes (post.js), labels are in handwriting. The
   accent marks what is moving or what the text you point at is about. */
.cv{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  position:relative;background:var(--surface);border-radius:12px;box-shadow:var(--ring);overflow:hidden}
@media (prefers-color-scheme:dark){.cv{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}}
.cv-table{position:relative;touch-action:pan-y}
.cv-grain{position:absolute;inset:0;z-index:4;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:.07;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.cv-grain{opacity:.05;mix-blend-mode:screen}}
.cv-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cv-edges path{fill:none;stroke:var(--ink);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:.78;transition:opacity 220ms var(--ease)}
.cv-edges path.dash{stroke-dasharray:1 5.5;stroke-width:1.6}
.cv-edges path.hot{opacity:1;stroke-width:1.7}
.cv-edges .lbl{font:400 13.5px var(--hand);fill:var(--muted);paint-order:stroke;stroke:var(--surface);stroke-width:7px;stroke-linejoin:round}
/* a line the text points at: drawn again in the accent, like ink going down */
.cv-edges path.trace{stroke:var(--accent);stroke-width:2.2;opacity:1}
.cv-edges path.trace.anim{stroke-dasharray:var(--len,800);stroke-dashoffset:var(--len,800);animation:cv-ink 760ms var(--ease) forwards}
.cv-edges path.trace.head.anim{stroke-dasharray:none;stroke-dashoffset:0;opacity:0;animation:cv-fade 140ms 620ms var(--ease) forwards}
@keyframes cv-ink{to{stroke-dashoffset:0}}
@keyframes cv-fade{to{opacity:1}}
.cv-card{position:absolute;left:0;top:0;width:var(--w);min-height:var(--h);transform:translate(var(--x),var(--y)) rotate(var(--r,0deg));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:9px 12px;text-align:center;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;border-radius:10px;
  transition:opacity 260ms var(--ease),scale 260ms var(--ease)}
.cv-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.cv-ink .fill{fill:var(--surface)}
.cv-ink .line{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.88;transition:stroke 150ms var(--ease),opacity 150ms var(--ease)}
.cv-card.hub .cv-ink .line{stroke-width:1.45;opacity:1}
.cv-card.lit .cv-ink .line,.cv-card.term .cv-ink .line{stroke:var(--accent);opacity:1}
.cv-card .t,.cv-card .s{position:relative}
.cv-card .t{font:400 16px/1.15 var(--hand);color:var(--ink)}
.cv-card .s{font:400 12.5px/1.25 var(--hand);color:var(--muted)}
.cv-card.settle{transition:transform 280ms var(--ease-drawer),opacity 260ms var(--ease)}
.cv-card.drag{cursor:grabbing;z-index:5;transition:none}
.cv-card.drag .cv-ink{filter:drop-shadow(0 10px 14px rgb(var(--shadow)/.14))}
.cv-card.ping{animation:cvping 520ms var(--ease)}
@keyframes cvping{30%{scale:1.06}}
.cv-card.off{opacity:0;scale:.96;pointer-events:none}
.cv-card.dim{opacity:.3}
.cv-edges path.dim,.cv-edges text.dim{opacity:.22}
.cv-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cv-dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in oklch,var(--accent) 18%,transparent);pointer-events:none;z-index:6}
.cv-tag{position:absolute;left:0;top:0;transform:translate(-50%,-150%);padding:2px 7px;border-radius:6px;background:var(--ink);color:var(--on-ink);font:400 11px/16px var(--mono);white-space:nowrap;pointer-events:none;z-index:7}
.cv-foot{display:flex;flex-direction:column;gap:10px;padding:12px 12px 12px 16px;border-top:1px solid var(--sunken);background:var(--surface)}
.cv-note{margin:0;font:400 15px/1.35 var(--hand);color:var(--body);min-height:40px;text-wrap:pretty}
.cv-note.idle{color:var(--muted)}
.cv-btns{display:flex;gap:6px;align-items:center;justify-content:space-between}
.cv-btns:has(.cv-flows:empty){justify-content:flex-end}
.cv-play{height:32px;padding:0 12px;border-radius:9999px;background:var(--ink);color:var(--on-ink);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:transform 150ms var(--ease),background-color 150ms var(--ease)}
.cv-play svg{width:12px;height:12px}
.cv-play:active{transform:scale(.96)}
.cv-play[disabled]{opacity:.5;cursor:default}
@media (hover:hover) and (pointer:fine){.cv-play:not([disabled]):hover{background:var(--ink-hover)}}
.cv-reset{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;color:var(--muted);transition:background-color 150ms var(--ease),color 150ms var(--ease)}
.cv-reset svg{width:16px;height:16px}
.cv-reset[disabled]{opacity:.35;cursor:default}
@media (hover:hover) and (pointer:fine){.cv-reset:not([disabled]):hover{background:var(--sunken);color:var(--ink)}}
.cv-flows{display:flex;flex-wrap:wrap;gap:6px}
/* a term in the text that has lines in a diagram: its highlight takes the accent while you point at it */
@media (hover:hover) and (pointer:fine){.ann[data-cv]:hover{--ann-mark:color-mix(in oklch,var(--accent) 16%,transparent)}}
.ann[data-cv].cv-on{--ann-mark:color-mix(in oklch,var(--accent) 16%,transparent)}

/* ---------- credits: how this was made ---------- */
.credits .cr-h{font:500 12px/16px var(--sans);letter-spacing:.01em;color:var(--muted);margin:28px 0 6px}
.credits ul.cr{list-style:none;margin:0;padding:0}
.credits ul.cr li{position:relative;margin:0;padding:3px 0 3px 16px;font-size:14px;line-height:1.55;color:var(--body)}
.credits ul.cr li::before{content:"•";position:absolute;left:3px;color:var(--muted)}
.credits ul.cr li b{font-weight:500;color:var(--ink)}
.credits ul.cr code{font-size:12px}

/* pill switch: flick between versions of one thing (16px below it) */
.pills{display:flex;justify-content:center;margin-top:16px}
.pills .track{display:inline-flex;flex-wrap:wrap;justify-content:center;padding:3px;border-radius:9999px;background:var(--soft);box-shadow:0 0 0 1px rgb(var(--shadow)/.05),0 2px 8px -2px rgb(var(--shadow)/.08)}
.pills button{height:26px;padding:1px 14px;border-radius:9999px;font-size:13px;line-height:24px;color:var(--body);transition:color 150ms var(--ease),background-color 150ms var(--ease)}
.pills button[aria-pressed="true"]{background:var(--ink);color:var(--page)}
@media (hover:hover) and (pointer:fine){.pills button:not([aria-pressed="true"]):hover{color:var(--ink)}}
.pills button{position:relative}.pills button::after{content:"";position:absolute;inset:-9px -2px}

/* ---------- tool mark ---------- */
.tool{color:var(--ink);font-weight:500;white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--hair);border-radius:0;transition:background-color 150ms var(--ease),border-color 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){a.tool:hover{background:var(--sunken);border-color:transparent;border-radius:6px}}

/* ---------- timeline ---------- */
.day{list-style:none;margin:0;padding:0;font-size:14px}
.day li{display:grid;grid-template-columns:52px 64px minmax(0,1fr);gap:0 12px;padding:7px 0;border-bottom:1px solid var(--sunken);line-height:1.45}
.day li:last-child{border-bottom:0}
.day time{font:400 12px/21px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.day .who{font-size:12px;line-height:21px;font-weight:500;color:var(--ink)}
.day .what{color:var(--body)}
.day li.d{grid-template-columns:1fr;padding:16px 0 4px;border-bottom:1px solid var(--hair);color:var(--ink);font-weight:500;font-size:13px}
@media (max-width:479px){.day li{grid-template-columns:44px minmax(0,1fr)}.day .who{grid-column:2}.day .what{grid-column:2}}

/* ---------- extras (site only) ---------- */
details.extra{margin:24px 0;border-top:var(--hairw) solid var(--hair);border-bottom:var(--hairw) solid var(--hair)}
details.extra > summary{list-style:none;cursor:pointer;padding:16px 0;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:10px}
details.extra > summary::-webkit-details-marker{display:none}
details.extra > summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform 150ms var(--ease)}
details.extra[open] > summary::before{transform:rotate(45deg)}
details.extra > div{padding:0 0 16px}

/* ---------- margin notes (neat-annotations) ---------- */
.ann{--ann-font:var(--hand)}
/* margin notes in colour, as on the course pages: blue, amber and green in turn */
.ann-blue{--ann-color:#3b72c4;--ann-mark:color-mix(in oklch,#3b72c4 12%,transparent)}
.ann-amber{--ann-color:#b8751a;--ann-mark:color-mix(in oklch,#ffb000 16%,transparent)}
.ann-green{--ann-color:#2f8f5b;--ann-mark:color-mix(in oklch,#2f8f5b 12%,transparent)}
@media (prefers-color-scheme:dark){
  .ann-blue{--ann-color:#7ea3e0;--ann-mark:color-mix(in oklch,#7ea3e0 20%,transparent)}
  .ann-amber{--ann-color:#d39a4a;--ann-mark:color-mix(in oklch,#ffb000 20%,transparent)}
  .ann-green{--ann-color:#6cb890;--ann-mark:color-mix(in oklch,#6cb890 20%,transparent)}
}
.tbl .ann,.day .ann{line-height:inherit}
.ann::after{font-size:15px;line-height:1.3}
@media (min-width:1280px){.ann-e,.ann-w{--ann-label-max-width:200px}}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:reduce){.cv-edges path.trace.anim{stroke-dasharray:none;stroke-dashoffset:0}.cv-edges path.trace.head.anim{opacity:1}}

/* a diagram card's note: beside the diagram from 1280px, a small note card under the card below that */
.cv-holder{position:relative}
.cv-mnote{position:absolute!important;display:none;pointer-events:none;z-index:8;background:none!important;box-shadow:none!important}
.cv-mnote::after{font-size:15px;line-height:1.3}
.cv-pop{position:absolute;z-index:8;padding:9px 13px 10px;border-radius:12px;background:var(--surface);box-shadow:var(--pop);font:400 15px/1.3 var(--hand);color:#3b72c4;pointer-events:none}
@media (prefers-color-scheme:dark){.cv-pop{color:#7ea3e0}}
.cv-pop::before{content:"";position:absolute;top:-5px;left:var(--arrow,50%);margin-left:-5px;width:10px;height:10px;background:var(--surface);transform:rotate(45deg);box-shadow:-1px -1px 0 0 rgb(var(--shadow)/.08)}

/* subscribe: fixed at the top right, the one ink button on the page */
.subscribe{position:fixed;top:16px;right:16px;z-index:50;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:9999px;
  background:var(--ink);color:var(--on-ink);font:500 14px/1 var(--sans);text-decoration:none;box-shadow:0 0 0 1px rgb(var(--shadow)/.06),0 4px 12px -4px rgb(var(--shadow)/.18);
  transition:background-color 150ms var(--ease),transform 150ms var(--ease)}
.subscribe::after{content:"";position:absolute;inset:-6px}
.subscribe:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.subscribe:hover{background:var(--ink-hover);color:var(--on-ink)}}
@media (max-width:639px){.subscribe{top:12px;right:12px}}

/* wordmark: fixed at the top left, links home */
.wordmark{position:fixed;top:20px;left:20px;z-index:50;display:block;line-height:0;border-radius:4px}
.wordmark img{height:24px;width:auto;display:block}
.wordmark::after{content:"";position:absolute;inset:-10px}
@media (max-width:639px){.wordmark{top:16px;left:16px}.wordmark img{height:20px}}