/* shaurya.io
   Layout: narrow sticky bio on the left, a feed of identical frames on the right.
   One hairline thread runs down the gutter, crosses each frame and draws its figure as you scroll. */

/* self-hosted static Geist: Latin subsets that keep ttfautohint hinting for Windows ClearType */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/Geist-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/Geist-Medium.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/GeistMono-Medium.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  --bg: #fbfbfc;
  --tile: #f2f3f5;
  --ink: #0d0e10;
  --grey: #686c74;
  --faint: #9ea2aa;
  --ghost: #dfe2e6;
  --thread: #a3a8b0;
  --node-bg: #ffffff;
  --node-line: #d6d9de;
  --icon: #3a3e45;
  --glow: rgba(13, 14, 16, .16);
  --line: rgba(13, 14, 16, .08);
  --accent: #2d4beb;
  --accent-soft: rgba(45, 75, 235, .14);
  --pill-bg: var(--node-bg);
  --pill-ink: var(--ink);
  --tint-k: 8%;

  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease-house: cubic-bezier(.33, .02, .2, .99);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.35, .5, 1);
  /* the 290px floor keeps the intro near a readable line length on narrow desktop windows */
  --bioW: clamp(290px, 25vw, 350px);
  --gap: clamp(56px, 5.6vw, 88px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0d0f; --tile: #15171a; --ink: #eceef1; --grey: #8e929a; --faint: #62666e; --ghost: #2a2e33; --thread: #6c727b; --node-bg: #1b1e22; --node-line: #343941; --icon: #c9ccd2; --glow: rgba(0, 0, 0, .7);
    --line: rgba(255, 255, 255, .08); --accent: #8e9fff; --accent-soft: rgba(142, 159, 255, .16); --tint-k: 20%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0d0f; --tile: #15171a; --ink: #eceef1; --grey: #8e929a; --faint: #62666e; --ghost: #2a2e33; --thread: #6c727b; --node-bg: #1b1e22; --node-line: #343941; --icon: #c9ccd2; --glow: rgba(0, 0, 0, .7);
  --line: rgba(255, 255, 255, .08); --accent: #8e9fff; --accent-soft: rgba(142, 159, 255, .16); --tint-k: 20%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* 100% rather than none, so pinch zoom still works on iOS */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 14px/1.55 var(--f-sans); letter-spacing: -.01em; font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--f-mono); letter-spacing: 0; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }

/* ---------- page grid ---------- */
.home {
  position: relative; max-width: 1500px; margin: 0 auto;
  padding: max(80px, calc((100vh - clamp(480px, 44vw, 640px)) / 2)) 48px 24px 32px;
  display: grid; grid-template-columns: var(--bioW) minmax(0, 1fr); column-gap: var(--gap); align-items: start;
}

/* ---------- bio ---------- */
.bio { position: sticky; top: var(--bio-top, 80px); display: grid; gap: 22px; min-width: 0; }
.name { font-size: 16px; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; }
.role { color: var(--grey); margin-top: 4px; }
#intro { color: var(--ink); text-wrap: pretty; }
.reach { color: var(--grey); }
.reach a { color: var(--ink); text-decoration: none; }
.reach a:hover { text-decoration: underline; text-underline-offset: 3px; }
.email { color: var(--ink); user-select: all; }
/* in prose the address itself copies on click, so no pill breaks the sentence */
.mail-btn {
  position: relative; font: inherit; letter-spacing: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; user-select: text;
  text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.mail-btn:hover { text-decoration-color: var(--ink); }
.mail-btn::after {
  content: "copied"; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translate(-50%, 4px);
  font: 500 11px/1 var(--f-mono); letter-spacing: 0; color: var(--grey); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .2s, transform .35s var(--ease-out);
}
.mail-btn.did::after { opacity: 1; transform: translate(-50%, 0); }
.copy {
  font: 500 11px/1 var(--f-mono); color: var(--grey); background: transparent; cursor: pointer;
  border: 1px solid var(--node-line); border-radius: 999px; padding: 3px 8px; margin-left: 4px; vertical-align: 1px;
  transition: color .2s, border-color .2s;
}
.copy:hover { color: var(--ink); border-color: var(--faint); }
/* section labels match the role line's size and colour */
.lab { font-size: inherit; color: var(--grey); margin-bottom: 8px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
/* the current-section dot hangs in the margin, so entry text lines up with the copy above */
.it {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; column-gap: 4px; margin-left: -16px;
  padding: 2px 0; text-decoration: none; color: var(--ink);
}
.it .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(.3); transition: opacity .3s, transform .45s var(--spring); }
.it.cur .dot { opacity: 1; transform: none; }
.it .t { white-space: nowrap; transition: color .35s var(--ease-house); }
/* the degree is longer than a company name: when it wraps, the break falls before "at" */
.bio-study .it .t { white-space: normal; }
.bio-study .it .t span { display: inline-block; }
.bio-study .it .dot { align-self: start; margin-top: 8px; }
.it .d { font: 400 12px/1 var(--f-mono); color: var(--faint); }
html.thread-on .it:not(.cur) .t { color: var(--grey); }
.it:hover .t { color: var(--ink) !important; }
.scr { display: inline-block; white-space: nowrap; }
.ar { width: 10px; height: 10px; margin-left: 5px; vertical-align: 1px; color: var(--grey); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--ink); }
.plain span { color: var(--grey); }

/* intro: word by word blur reveal (index.html splits the words once Geist has loaded) */
html.font-wait .bio { visibility: hidden; }
/* backwards, not both: both holds blur(0px) after the reveal, which keeps each word on its own compositing layer and spaces the words unevenly after a resize */
html.words #intro .w { display: inline-block; animation: wordin .57s var(--ease-out) backwards; animation-delay: calc(var(--i) * 68ms + 120ms); }
@keyframes wordin { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } }

/* ---------- feed + frames ---------- */
.feed { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-bottom: max(64px, calc(50vh - 144px)); }
.frame {
  position: relative; height: clamp(480px, 44vw, 640px); background: var(--tile);
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; scroll-margin-top: 80px;
}
.frame .top { position: absolute; inset: 20px 24px auto 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ttl { font-size: 14px; font-weight: 500; }
.ttl > span:not(.scr) { color: var(--grey); font-weight: 400; }
/* dates use the description's type: 13px Geist in grey */
.when { font-size: 13px; line-height: 1; color: var(--grey); white-space: nowrap; }
/* frames with a longer description raise the figure's bottom edge with --fig-b */
.frame .fig { position: absolute; inset: 64px 24px var(--fig-b, 84px) 24px; }
.frame .bot { position: absolute; inset: auto 24px 20px 24px; display: flex; justify-content: space-between; align-items: end; align-items: last baseline; gap: 24px; }
.desc { color: var(--grey); font-size: 13px; max-width: 72ch; }
.desc p + p { margin-top: 8px; }
/* room for each description, with the same 40px gap above it as a one-line description */
#f-alpheya { --fig-b: 110px; }
.figcap { font: 400 11px/1.3 var(--f-mono); color: var(--faint); white-space: nowrap; }

/* figures: hairline diagrams with rounded-square icon nodes */
.figsvg { display: block; width: 100%; height: 100%; overflow: hidden; }
.figsvg .g { fill: none; stroke: var(--ghost); stroke-width: calc(var(--u, 1) * 1px); }
.figsvg .dash { stroke-dasharray: 3 4; }
.figsvg .street { opacity: .55; }
.figsvg .gdot { fill: var(--ghost); }
.figsvg .cap { fill: var(--faint); font: 400 calc(var(--fs, 12) * 1px) var(--f-sans); }
.figsvg .branch-ink { fill: none; stroke: var(--thread); stroke-width: calc(var(--u, 1) * 1px); }
.figsvg .spine-ink { fill: none; stroke: var(--thread); stroke-width: calc(var(--u, 1) * 1px); display: none; }
.node .bx { fill: var(--node-bg); stroke: var(--node-line); stroke-width: calc(var(--u, 1) * 1px); transition: stroke .55s var(--ease-house); }
.node .ic { fill: none; stroke: var(--icon); stroke-width: calc(var(--u, 1) * 1.1px); stroke-linecap: round; stroke-linejoin: round; transition: stroke .55s var(--ease-house); }
.node .ic.fat { stroke-width: calc(var(--u, 1) * 2.2px); }
.node text { fill: var(--grey); font: 400 calc(var(--fs, 12) * 1px) var(--f-sans); letter-spacing: -.01em; text-anchor: middle; transition: fill .55s var(--ease-house); }
.node text.l { text-anchor: end; }
.node text.r { text-anchor: start; }
html.thread-on .node:not(.on) .bx { stroke: var(--ghost); }
html.thread-on .node:not(.on) .ic { stroke: var(--ghost); }
/* a solid colour rather than opacity, so Windows keeps ClearType on the dimmed labels */
html.thread-on .node:not(.on) text { fill: var(--faint); }
html.thread-on .branch-ink {
  stroke-dasharray: var(--bl) var(--bl); stroke-dashoffset: var(--bl); transition: stroke-dashoffset .9s var(--ease-house);
}
html.thread-on .branch-ink.on { stroke-dashoffset: 0; }
/* reveal marks: guides and dots with data-th ink when the line reaches them. .lead is a dotted leader, .late delays a node */
.figsvg .mk { stroke: var(--thread); transition: stroke .55s var(--ease-house), fill .55s var(--ease-house); }
.figsvg .gdot.mk { stroke: none; fill: var(--faint); }
.figsvg .mk.lead { stroke: color-mix(in srgb, var(--thread) 50%, var(--ghost)); stroke-dasharray: 2 5; }
html.thread-on .figsvg .mk:not(.on) { stroke: var(--ghost); }
html.thread-on .figsvg .gdot.mk:not(.on) { stroke: none; fill: var(--ghost); }
.node.late .bx, .node.late .ic, .node.late text { transition-delay: .45s; }

/* link buttons sit at the right of each frame's bottom row and are always visible */
.pills { display: flex; gap: 8px; flex: none; margin-left: auto; }
/* pills and the paper button share one shape, in the figure nodes' material */
.pill, .doc-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 14px; border-radius: 999px;
  background: var(--pill-bg); color: var(--pill-ink); text-decoration: none; font: 500 13px/1 var(--f-sans);
  box-shadow: 0 0 0 1px var(--node-line), 0 1px 2px -1px var(--glow);
}
.pill .ar { margin: 0; }
/* each destination site's own palette, used on hover: at rest these only set variables */
.pill, .doc-btn { --brand: var(--node-bg); --brand-line: var(--faint); --brand-ink: var(--ink); }
.pill[data-brand="appliedai"] { --brand: #0426cd; --brand-line: light-dark(#0426cd, #9ec1f7); --brand-ink: light-dark(#0426cd, #9ec1f7); }
.pill[data-brand="alpheya"] { --brand: #08d2ae; --brand-line: #08d2ae; --brand-ink: light-dark(#057564, #08d2ae); }
.pill[data-brand="noon"] { --brand: #d22d29; --brand-line: light-dark(#d22d29, #f0716e); --brand-ink: light-dark(#bf2420, #f0716e); }
.pill[data-brand="nyu"] { --brand: #57068c; --brand-line: light-dark(#57068c, #ab83c6); --brand-ink: light-dark(#57068c, #ab83c6); }

/* capstone paper: a document-style link button */
.doc-btn { flex: none; padding-left: 10px; white-space: nowrap; }
.doc-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.doc-btn > span:not(.scr) { font: 500 10px/1 var(--f-mono); letter-spacing: .04em; color: var(--grey); padding: 3px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--node-line); }

/* hover and press only where there is a pointer and two columns */
@media (hover: hover) and (min-width: 1080px) {
  .pill, .doc-btn { transition: box-shadow .2s var(--ease-house), background-color .2s var(--ease-house), color .2s var(--ease-house), transform .15s var(--ease-out); }
  .pill .ar { transition: transform .25s var(--ease-out), color .2s; }
  .pill:hover, .doc-btn:hover {
    --pill-bg: color-mix(in srgb, var(--brand) var(--tint-k), var(--node-bg));
    --pill-ink: var(--brand-ink);
    box-shadow: 0 0 0 1px var(--brand-line), 0 1px 2px -1px var(--glow);
  }
  .pill:hover .ar { color: var(--pill-ink); transform: translate(1px, -1px); }
  .pill:active, .doc-btn:active { transform: scale(.97); }
}

/* stage (pinned on desktop) */
.stage-box { position: relative; scroll-margin-top: 80px; }
.stage { position: relative; }
.stage.pin { position: sticky; top: var(--stick, 80px); }
.frame-stage { height: min(clamp(480px, 44vw, 640px), calc(100vh - 110px)); }
.rows { position: absolute; inset: 60px 24px 22px 24px; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; }
.row { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; min-height: 0; }
.row .rfig { min-height: 0; }
.rcap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.rcap .t { font-weight: 500; font-size: 14px; }
.rcap .g2 { color: var(--grey); }
.rcap .k { font: 400 11px/1 var(--f-mono); color: var(--faint); margin-left: auto; }

/* contact */
.contact { height: auto; overflow: visible; padding: 22px 24px 24px; display: grid; gap: 22px; min-height: 240px; align-content: space-between; }
.contact::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 24px 70px -30px var(--glow);
  opacity: var(--aura, 0); transition: opacity .3s;
}
html:not(.thread-on) .contact::after { opacity: 1; }
.c-h { font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.c-p { color: var(--grey); margin-top: 8px; }
.c-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.c-mail { font-size: 16px; letter-spacing: -.015em; }
.c-row a { text-decoration: none; }
.c-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--faint); font: 400 12px/1 var(--f-mono); }

/* ---------- thread ---------- */
.thread-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; }
.th { fill: none; stroke: var(--thread); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.tip { transition: opacity .25s; }
.tip .ring { fill: var(--bg); stroke: var(--thread); stroke-width: 1; }
.tip .dot { fill: var(--accent); }
.origin { fill: var(--bg); stroke: var(--thread); stroke-width: 1; }
html:not(.thread-on):not(.static) .thread-svg { display: none; }

/* ---------- viewport edge blur ---------- */
.edge { position: fixed; left: 0; right: 0; height: 60px; pointer-events: none; z-index: 10; }
.edge.top { top: 0; transform: rotate(180deg); }
.edge.bot { bottom: 0; }
.edge i { position: absolute; inset: 0; }
.edge i:nth-child(1) { -webkit-backdrop-filter: blur(.19px); backdrop-filter: blur(.19px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
.edge i:nth-child(2) { -webkit-backdrop-filter: blur(.38px); backdrop-filter: blur(.38px); -webkit-mask-image: linear-gradient(to bottom, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image: linear-gradient(to bottom, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.edge i:nth-child(3) { -webkit-backdrop-filter: blur(.75px); backdrop-filter: blur(.75px); -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image: linear-gradient(to bottom, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.edge i:nth-child(4) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image: linear-gradient(to bottom, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.edge i:nth-child(5) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image: linear-gradient(to bottom, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.edge i:nth-child(6) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
.edge i:nth-child(7) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, transparent 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(to bottom, transparent 75%, #000 87.5%, #000 100%); }
.edge i:nth-child(8) { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); -webkit-mask-image: linear-gradient(to bottom, transparent 87.5%, #000 100%); mask-image: linear-gradient(to bottom, transparent 87.5%, #000 100%); }

/* ---------- theme toggle ---------- */
.theme {
  position: fixed; top: calc(20px + env(safe-area-inset-top, 0px)); z-index: 30;
  /* flush with the feed's right edge (48px page padding, or the 1500px container's margin beyond it) */
  right: max(48px, calc((100vw - 1500px) / 2 + 48px));
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--node-line); background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--grey);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; transition: color .2s, border-color .2s, transform .45s var(--spring);
}
.theme:hover { color: var(--ink); border-color: var(--faint); }
.theme:active { transform: scale(.92); }
.theme svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s, transform .5s var(--spring); }
.theme .sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
html.is-dark .theme .sun { opacity: 1; transform: none; }
html.is-dark .theme .moon { opacity: 0; transform: rotate(90deg) scale(.6); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ---------- narrow screens: one column, no page thread ---------- */
@media (max-width: 1079px) {
  .home { grid-template-columns: minmax(0, 1fr); padding: calc(64px + env(safe-area-inset-top, 0px)) 16px 48px; row-gap: 48px; }
  .feed { padding-bottom: 0; }
  /* the toggle's centre sits on the name's line (64px top padding plus half the 17.6px line, minus half the 34px button) */
  .theme { top: calc(56px + env(safe-area-inset-top, 0px)); right: 16px; }
  .bio { position: static; }
  .frame { height: auto; padding: 18px 16px 18px; display: grid; gap: 14px; }
  .frame .top, .frame .fig, .frame .bot { position: static; }
  .frame .top { flex-wrap: wrap; }
  .frame .fig { aspect-ratio: 880 / 400; max-width: 100%; }
  .frame .bot { flex-direction: column; align-items: start; gap: 8px; }
  .frame-stage { height: auto; }
  /* rows size from their width: 1fr tracks plus aspect-ratio would derive width from a stretched height and overflow the tile */
  .rows { position: static; grid-template-rows: none; grid-auto-rows: auto; gap: 22px; }
  .row { grid-template-rows: auto auto; }
  .row .rfig { width: 100%; aspect-ratio: 880 / 130; }
  /* no page thread here, so each figure shows its own spine, fully drawn */
  .figsvg .spine-ink { display: inline; }
  .pills { align-self: center; justify-content: center; flex-wrap: wrap; margin: 6px 0 0; }
  /* invisible ::after boxes stretch each tap area to 44px or more without changing the look */
  .pill, .doc-btn, .copy, .c-row a { position: relative; }
  .pill::after, .doc-btn::after { content: ""; position: absolute; inset: -6px 0; }
  .copy::after { content: ""; position: absolute; inset: -14px -8px; }
  .c-row a::after { content: ""; position: absolute; inset: -12px -11px; }
  .theme::after { content: ""; position: absolute; inset: -7px; }
  .thread-svg { display: none !important; }
  /* no motion on narrow screens apart from the intro's word reveal, which is a CSS animation */
  *, *::before, *::after { transition: none !important; }
  .theme:active { transform: none; }
}
@media (max-width: 640px) {
  .node text, .figsvg .cap { display: none; }
  .node .nz { transform: scale(1.7); }
  .node .nz .bx { stroke-width: calc(var(--u, 1) * .6px); }
  .node .nz .ic { stroke-width: calc(var(--u, 1) * .7px); }
  .node .nz .ic.fat { stroke-width: calc(var(--u, 1) * 1.4px); }
  .rcap .k { margin-left: 0; }
  .frame .top { flex-direction: column; align-items: start; gap: 6px; }
}

/* reduced motion and static mode */
html.static .node circle, html.static .node rect { fill: var(--ink); stroke: var(--ink); }
html.static .node text { fill: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .figsvg .spine-ink { stroke-dashoffset: 0 !important; }
}