/* ============================================================
   ROOTACCESS.TO — mycelial design system
   Topology is data · geometry is deterministic SVG · motion is CSS
   ============================================================ */

/* ---- forest-floor token system ------------------------------------- */
:root[data-theme="dark"]{
  /* nocturnal / underground: spore-print black, foxfire glow */
  --bg:        oklch(16% 0.012 150);
  --substrate: oklch(18% 0.014 145);
  --surface:   oklch(22% 0.020 135);
  --surface-2: oklch(26% 0.024 135);
  --fg:        oklch(92% 0.020 100);
  --muted:     oklch(67% 0.030 120);
  --faint:     oklch(61% 0.026 120);
  --border:    oklch(30% 0.018 130);
  --hyphae:    oklch(82% 0.026 116);
  --node:      oklch(66% 0.090 140);
  --node-deep: oklch(46% 0.075 140);
  --glow:      oklch(88% 0.160 158);
  --decay:     oklch(58% 0.090 60);
  --spore:     oklch(86% 0.022 98);
  --soil-shade:oklch(10% 0.012 150);
  --cast:      oklch(9% 0.010 145);

  --thread-op: .12;       /* substrate stroke opacity             */
  --grain-op:  .04;
}
:root[data-theme="light"]{
  /* daylight spore-print / aged paper (cool, undergrowth-tinted) */
  --bg:        oklch(94% 0.018 118);
  --substrate: oklch(91% 0.024 118);
  --surface:   oklch(97% 0.012 112);
  --surface-2: oklch(92% 0.025 115);
  --fg:        oklch(22% 0.020 122);
  --muted:     oklch(43% 0.032 125);
  --faint:     oklch(46% 0.025 120);
  --border:    oklch(84% 0.030 118);
  --hyphae:    oklch(48% 0.038 120);
  --node:      oklch(39% 0.085 140);
  --node-deep: oklch(31% 0.075 140);
  --glow:      oklch(42% 0.130 158);
  --decay:     oklch(44% 0.095 62);
  --spore:     oklch(29% 0.018 110);
  --soil-shade:oklch(78% 0.030 115);
  --cast:      oklch(62% 0.032 118);

  --thread-op: .16;
  --grain-op:  .05;
}

:root{
  --font-read: 'Spectral', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
  --font-sys:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --grow: cubic-bezier(.16,.84,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-read); font-weight:400;
  font-size:clamp(16px,1rem + .1vw,18px); line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; min-height:100svh;
  transition:background .5s var(--ease), color .5s var(--ease);
}
::selection{background:color-mix(in oklab, var(--glow) 40%, transparent); color:var(--fg)}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-weight:500; letter-spacing:-.015em; line-height:1.06; text-wrap:balance; margin:0}
p{text-wrap:pretty}

/* mono "systems register" -------------------------------------------- */
.sys{font-family:var(--font-sys); font-weight:500; letter-spacing:.02em}
.kicker{
  font-family:var(--font-sys); font-size:.68rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em; color:var(--muted);
}
.mono-sm{font-family:var(--font-sys); font-size:.72rem; letter-spacing:.04em; color:var(--muted)}

/* ---- spore-grain + substrate stage (always present) ---------------- */
.stage{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; contain:paint}
.grain{
  position:absolute; inset:-20%;
  opacity:var(--grain-op); mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#substrate{position:absolute; inset:0; width:100%; height:100%}
#substrate path{fill:none; stroke:var(--hyphae); vector-effect:non-scaling-stroke}
#sub-base{stroke-width:.9; opacity:var(--thread-op)}
#sub-deep{stroke-width:.7; opacity:calc(var(--thread-op) * .8)}
/* soil vignette so content floats above the loam */
.loam{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent 40%, color-mix(in oklab,var(--bg) 70%, var(--soil-shade)) 100%),
    linear-gradient(to bottom, transparent 60%, color-mix(in oklab,var(--bg) 55%, var(--soil-shade)) 100%);
}

@keyframes grow-in{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
#sub-base path{stroke-dasharray:1; pathLength:1; animation:grow-in 2.8s var(--grow) both}
/* deep layer ramifies as the reader descends (scroll-driven where supported) */
#sub-deep path{stroke-dasharray:1; pathLength:1; stroke-dashoffset:1}
@supports (animation-timeline: scroll()){
  #sub-deep path{animation:grow-in linear both; animation-timeline:scroll(root block); animation-range:0 70svh}
}
@supports not (animation-timeline: scroll()){
  #sub-deep path{animation:grow-in 3.4s .6s var(--grow) both}
}

/* ---- shell --------------------------------------------------------- */
.wrap{position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px)}

header.top{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(9px) saturate(1.1);
  background:color-mix(in oklab, var(--bg) 74%, transparent);
  border-bottom:1px solid var(--border);
}
.top .wrap{display:flex; align-items:center; gap:22px; height:64px}
.brand{
  display:flex; align-items:center; gap:11px; min-height:44px;
  cursor:pointer; background:none; border:0; padding:0; color:inherit; font:inherit;
}
.brand .mk{width:26px; height:26px; flex:none; overflow:visible}
.brand .mk .ln{stroke:var(--node); stroke-width:1.4; fill:none; stroke-linecap:round}
.brand .mk .cx{fill:var(--glow); filter:drop-shadow(0 0 5px color-mix(in oklab,var(--glow) 70%, transparent))}
.brand .wm{font-family:var(--font-sys); font-weight:700; font-size:.94rem; letter-spacing:-.01em}
.brand .wm .to{color:var(--muted); font-weight:400}
nav.links{margin-left:auto; display:flex; align-items:center; gap:4px}
nav.links [data-go]{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-sys); font-size:.76rem; letter-spacing:.03em; color:var(--muted);
  padding:8px 12px; border-radius:6px; cursor:pointer; transition:color .2s, background .2s;
  background:none; border:0;
}
nav.links [data-go]:hover{color:var(--fg); background:var(--surface)}
nav.links [data-go][aria-current="true"]{color:var(--glow)}
/* visible keyboard focus — one ring, foxfire, everywhere */
:where(a, button, [tabindex]):focus-visible{outline:2px solid var(--glow); outline-offset:2px; border-radius:5px}
.tglt{
  width:44px; height:44px; display:grid; place-items:center; margin-left:6px;
  border:1px solid var(--border); border-radius:8px; background:transparent; cursor:pointer; color:var(--muted);
  transition:border-color .2s, color .2s;
}
.tglt:hover{color:var(--fg); border-color:var(--node)}
.tglt svg{width:17px; height:17px}

/* ---- view routing -------------------------------------------------- */
.view{display:none}
.view.is-active{display:block; animation:fade .5s var(--ease) both}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ==== NETWORK OVERVIEW ============================================== */
.hero{padding:clamp(46px,8vw,96px) 0 clamp(20px,4vw,40px); max-width:34ch}
.hero .kicker{display:inline-flex; align-items:center; gap:9px; margin-bottom:22px}
.hero .kicker::before{content:""; width:20px; height:1px; background:var(--node)}
.hero h1{font-size:clamp(2.4rem,6.4vw,4.3rem); font-weight:400; letter-spacing:-.03em}
.hero h1 em{font-style:italic; color:var(--muted)}
.hero .lede{margin-top:22px; color:var(--muted); font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:40ch}
.hero .lede b{color:var(--fg); font-weight:500}

/* the living node graph */
.field{position:relative; margin:clamp(20px,4vw,44px) 0 clamp(40px,7vw,90px)}
.field-hd{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; border-top:1px solid var(--border); padding-top:14px}
.field-hd .mono-sm b{color:var(--fg); font-weight:500}
.legend{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sys); font-size:.66rem; color:var(--muted); letter-spacing:.04em}
.legend .dot{width:9px; height:9px; border-radius:50%}
.legend .d-node{background:var(--node)}
.legend .d-glow{background:var(--glow); box-shadow:0 0 7px var(--glow)}
.legend .d-thread{width:16px; height:0; border-top:1.5px solid var(--hyphae); opacity:.6}

.netcanvas{
  position:relative; width:100%;
  height:clamp(430px,54vw,600px);
  border:1px solid var(--border); border-radius:14px;
  background:
    radial-gradient(130% 100% at 50% 0%, color-mix(in oklab,var(--surface) 60%, transparent), transparent 70%),
    color-mix(in oklab, var(--substrate) 55%, transparent);
  overflow:hidden; contain:layout paint;
}
#edges,.edges{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
#edges path,.edges path{fill:none; stroke:color-mix(in oklab, var(--hyphae) 62%, var(--node)); stroke-width:1.3; opacity:.55;
  vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 3px color-mix(in oklab,var(--node) 40%, transparent));
  stroke-dasharray:1; animation:grow-in 1.9s var(--grow) both}
#edges path.hot,.edges path.hot{stroke:var(--glow); opacity:1; stroke-width:1.5; filter:drop-shadow(0 0 5px var(--glow))}

.node{
  position:absolute; transform:translate(-50%,-50%);
  width:min(230px,42vw); cursor:pointer; padding:2px;
  --prox:0;
}
.node .card{
  position:relative; background:color-mix(in oklab,var(--surface) 92%, transparent);
  border:1px solid var(--border); border-radius:11px; padding:14px 15px 15px;
  transition:border-color .3s var(--ease), transform .4s var(--grow), box-shadow .4s var(--ease);
  transform:translateY(calc(var(--prox) * -3px));
}
.node .tip{
  position:absolute; top:-5px; left:-5px; width:12px; height:12px; border-radius:50%;
  background:var(--node);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--node) 22%, transparent);
  transition:background .3s, box-shadow .3s, transform .18s linear;
}
.node:hover .card, .node:focus-visible .card{border-color:var(--node); transform:translateY(-4px); box-shadow:0 14px 40px -18px var(--cast)}
.node:hover .tip, .node:focus-visible .tip{background:var(--glow); box-shadow:0 0 14px 2px var(--glow), 0 0 0 5px color-mix(in oklab,var(--glow) 26%, transparent)}
.node[style*="--prox"] .tip{}
.node:focus-visible{outline:2px solid var(--glow); outline-offset:4px; border-radius:14px}
.node .k{font-family:var(--font-sys); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--node)}
.node .t{font-size:1.05rem; font-weight:500; margin:6px 0 0; letter-spacing:-.01em; line-height:1.16}
.node .tags{margin-top:9px; display:flex; flex-wrap:wrap; gap:5px}
.node .tags i{font-style:normal; font-family:var(--font-sys); font-size:.58rem; letter-spacing:.05em; color:var(--muted); border:1px solid var(--border); border-radius:20px; padding:2px 7px}

/* field notes — a linear traversal of the same nodes */
.notes{margin:0 0 clamp(50px,8vw,100px)}
.notes-hd{border-top:1px solid var(--border); padding-top:14px; margin-bottom:6px; display:flex; justify-content:space-between; align-items:baseline}
.note{
  display:grid; grid-template-columns:132px 1fr auto; gap:22px; align-items:baseline;
  padding:18px 6px; border-bottom:1px solid var(--border); cursor:pointer;
  width:100%; color:inherit; font:inherit; text-align:left; background:none; border-top:0; border-inline:0;
  transition:background .25s;
}
.note:hover{background:color-mix(in oklab,var(--surface) 60%, transparent)}
.note .date{font-family:var(--font-sys); font-size:.72rem; color:var(--faint); letter-spacing:.02em; white-space:nowrap}
.note .title{font-size:1.28rem; font-weight:400; letter-spacing:-.015em; transition:transform .25s var(--grow), color .25s}
.note:hover .title{color:var(--glow); transform:translateX(8px)}
.note .title small{display:block; font-family:var(--font-read); font-size:.9rem; color:var(--muted); margin-top:3px; letter-spacing:0}
.note .arrow{font-family:var(--font-sys); color:var(--muted); font-size:.9rem; transition:transform .25s, color .25s}
.note:hover .arrow{transform:translateX(4px); color:var(--glow)}

/* ==== READING (single node) ======================================== */
.reader{max-width:70ch; margin-inline:auto; padding:clamp(40px,7vw,86px) 0 clamp(40px,7vw,80px)}
.reader .back{
  display:inline-flex; align-items:center; min-height:44px; gap:8px;
  font-family:var(--font-sys); font-size:.72rem; color:var(--muted); letter-spacing:.04em;
  cursor:pointer; margin-bottom:24px; background:none; border:0; padding:0;
}
.reader .back:hover{color:var(--glow)}
.reader .back svg{width:14px; height:14px}
.art-hd .kicker{display:block; margin-bottom:16px}
.art-hd h1{font-size:clamp(2rem,5vw,3.1rem); font-weight:400; letter-spacing:-.025em}
.art-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px; padding-bottom:26px; border-bottom:1px solid var(--border)}
.art-meta span{font-family:var(--font-sys); font-size:.7rem; color:var(--muted); letter-spacing:.03em}
.art-meta span b{color:var(--fg); font-weight:500}
.prose{margin-top:30px; font-size:1.09rem; line-height:1.72}
.prose > p{margin:0 0 1.25em}
.prose .lead{font-size:1.24rem; line-height:1.6; color:var(--fg)}
.prose h3{font-size:1.02rem; font-family:var(--font-sys); font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin:2.2em 0 .7em}
.prose em{color:var(--muted)}
.prose code{font-family:var(--font-sys); font-size:.86em; background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:.08em .38em; color:var(--glow)}
.prose blockquote{
  margin:1.6em 0; padding:18px 20px;
  border:1px solid color-mix(in oklab,var(--node) 44%, var(--border));
  border-radius:10px;
  background:color-mix(in oklab,var(--node) 9%, transparent);
  color:var(--fg); font-style:italic; font-size:1.14rem;
}
/* thread divider instead of a hard rule */
.thread{display:block; width:100%; height:26px; margin:2.4em 0; color:var(--hyphae); opacity:.5}
.thread svg{width:100%; height:100%; display:block}

.roots{margin-top:56px; padding-top:26px; border-top:1px solid var(--border)}
.roots .kicker{display:block; margin-bottom:18px}
.roots-empty{margin:0; color:var(--muted); font-size:1.02rem; max-width:52ch}
.roots-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.rootlink{
  position:relative; display:block; width:100%; text-align:left; font:inherit; color:inherit;
  padding:15px 16px 16px; border:1px solid var(--border); border-radius:10px;
  background:color-mix(in oklab,var(--surface) 70%, transparent); cursor:pointer; overflow:hidden;
  transition:border-color .3s, transform .3s var(--grow);
}
.rootlink:hover{border-color:var(--node); transform:translateY(-3px)}
.rootlink .sprout{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity .4s}
.rootlink:hover .sprout{opacity:.5}
.rootlink .sprout path{fill:none; stroke:var(--glow); stroke-width:1; stroke-dasharray:1; pathLength:1; stroke-dashoffset:1; vector-effect:non-scaling-stroke}
.rootlink:hover .sprout path{animation:grow-in 1s var(--grow) both}
.rootlink .k{display:block; font-family:var(--font-sys); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--node)}
.rootlink .t{display:block; font-size:1.02rem; font-weight:500; margin-top:6px; letter-spacing:-.01em}
.rootlink:hover .t{color:var(--glow)}

/* ==== COLOPHON (the design system, as real content) ================ */
.colo{padding:clamp(40px,7vw,84px) 0 clamp(50px,8vw,100px)}
.colo .lead-hd{max-width:60ch; margin-bottom:clamp(34px,6vw,60px)}
.colo .lead-hd h1{font-size:clamp(2rem,5vw,3rem); font-weight:400; letter-spacing:-.025em}
.colo .lead-hd p{color:var(--muted); margin-top:16px; font-size:1.12rem}
.block{border-top:1px solid var(--border); padding-top:20px; margin-bottom:clamp(44px,7vw,74px)}
.block > .kicker{display:block; margin-bottom:24px}
.block-grid{display:grid; grid-template-columns:180px 1fr; gap:clamp(18px,4vw,48px)}
.block-grid > h2{font-size:1.5rem; font-weight:400; letter-spacing:-.02em; align-self:start; position:sticky; top:80px}

.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px}
.sw{border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface)}
.sw .chip{height:74px; border-bottom:1px solid var(--border)}
.sw .meta{padding:10px 12px 12px}
.sw .role{font-family:var(--font-sys); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.sw .name{font-size:.92rem; margin-top:3px}
.sw .hex{font-family:var(--font-sys); font-size:.68rem; color:var(--faint); margin-top:5px}

.spec-list{display:grid; gap:16px}
.spec-list .row{display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start}
.spec-list .n{font-family:var(--font-sys); font-size:.72rem; color:var(--node); padding-top:3px}
.spec-list .row p{margin:0; color:var(--muted)}
.spec-list .row p b{color:var(--fg); font-weight:500}
.spec-list .row p code{font-family:var(--font-sys); font-size:.82em; color:var(--glow)}

.specimen{display:grid; gap:20px}
.specimen .row{border:1px solid var(--border); border-radius:10px; padding:18px 20px; background:color-mix(in oklab,var(--surface) 55%, transparent)}
.specimen .lbl{font-family:var(--font-sys); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.specimen .big-serif{font-size:2.1rem; font-weight:400; letter-spacing:-.02em}
.specimen .big-mono{font-family:var(--font-sys); font-size:1.3rem; font-weight:500}
.specimen p.body-spec{margin:0; font-size:1.02rem}

pre.tokens{
  font-family:var(--font-sys); font-size:.78rem; line-height:1.7; color:var(--fg);
  background:var(--surface); border:1px solid var(--border); border-radius:11px;
  padding:20px 22px; overflow-x:auto; margin:0;
}
pre.tokens .cm{color:var(--faint)}
pre.tokens .pr{color:var(--node)}
pre.tokens .vl{color:var(--glow)}

footer.foot{position:relative; z-index:2; border-top:1px solid var(--border); margin-top:20px}
footer.foot .wrap{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; padding-block:26px}
footer.foot .mono-sm b{color:var(--fg); font-weight:500}
footer.foot .sig{margin-left:auto; display:inline-flex; align-items:center; gap:9px}
footer.foot .sig .d{width:8px; height:8px; border-radius:50%; background:var(--glow); box-shadow:0 0 8px var(--glow); animation:pulse 3.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.45; transform:scale(.85)} 50%{opacity:1; transform:scale(1)}}

/* ---- ambient life: foxfire bloom + rising spore drift -------------- */
/* the single light source: the faint glow of fungi in the dark */
.bloom{
  position:absolute; left:-6%; bottom:-12%; width:62vw; height:62vw;
  max-width:840px; max-height:840px; pointer-events:none; filter:blur(28px);
  background:radial-gradient(circle at 32% 68%, color-mix(in oklab,var(--glow) 24%, transparent), transparent 60%);
  animation:bloom-breathe 12s var(--ease) infinite;
  will-change:transform, opacity;
}
:root[data-theme="light"] .bloom{opacity:.35; filter:blur(38px)}
@keyframes bloom-breathe{0%,100%{opacity:.42; transform:scale(1)} 50%{opacity:.66; transform:scale(1.05)}}
.spores{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.spores i{
  position:absolute; width:3px; height:3px; border-radius:50%; background:var(--glow); opacity:0;
  box-shadow:0 0 6px 1px color-mix(in oklab,var(--glow) 55%, transparent);
  animation:spore-drift var(--dur,26s) linear var(--del,0s) infinite;
}
@keyframes spore-drift{
  0%{opacity:0; transform:translate(0,0)}
  10%{opacity:.5} 55%{opacity:.68} 90%{opacity:.35}
  100%{opacity:0; transform:translate(var(--dx,12px), -46vh)}
}
/* node tips breathe at rest — the network settling, never frantic */
.node .tip{animation:tip-breathe 5.5s var(--ease) infinite; animation-delay:var(--tdelay,0s)}
@keyframes tip-breathe{
  0%,100%{box-shadow:0 0 0 4px color-mix(in oklab,var(--node) 16%, transparent)}
  50%{box-shadow:0 0 9px 1px color-mix(in oklab,var(--node) 34%, transparent), 0 0 0 5px color-mix(in oklab,var(--node) 20%, transparent)}
}
.node:hover .tip, .node:focus-visible .tip{animation:none} /* hover glow must win */
/* hero entrance — a composed cascade, not a flat fade */
.hero .kicker{animation:rise .7s var(--grow) both}
.hero h1{animation:rise .85s .09s var(--grow) both}
.hero .lede{animation:rise .85s .2s var(--grow) both}
@keyframes rise{from{opacity:0; transform:translateY(15px)} to{opacity:1; transform:none}}

/* ---- responsive: graph collapses to a rooted list ------------------ */
@media (max-width:820px){
  .note{grid-template-columns:1fr auto; gap:6px 16px}
  .note .date{grid-column:1 / -1; order:-1}
  .block-grid{grid-template-columns:1fr}
  .block-grid > h2{position:static; margin-bottom:8px}
}
@media (max-width:760px){
  #edges,.edges{display:none}
  .netcanvas{
    height:auto; border:none; border-radius:0; background:none; overflow:visible;
    display:flex; flex-direction:column; gap:12px; contain:none;
  }
  .node{position:static; transform:none; width:100%; --prox:0 !important}
  .node .card{transform:none !important}
  .node .tip{top:12px; left:-2px}
  .legend .d-thread{display:none}
}
@media (max-width:520px){
  nav.links [data-nav]{display:none}
  nav.links [data-nav].keep{display:inline-flex}
  .hero{padding-top:38px}
  .field-hd{display:grid; grid-template-columns:1fr; align-items:start; gap:10px}
  .legend{gap:9px 14px; width:100%}
  .legend span{min-height:24px}
  .bloom{filter:blur(22px)}
  :root[data-theme="light"] .bloom{filter:blur(26px)}
  footer.foot .wrap{display:grid; gap:8px; align-items:start}
  footer.foot .sig{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  #sub-base path,#sub-deep path{stroke-dashoffset:0}
  #edges path,.edges path{stroke-dashoffset:0}
}