/* nixivt.com/mind/: the spider (assets/js/spider.js). Her whole mind graph on a dark stage, and the spider walking the
   nodes one decision of hers associates to. The stage is always dark (her graph's own palette); the cards round it
   follow the site's theme (theme.js: light, dark, or the system's). Every class is sp-*, so nothing meets site.css. */

.sp, .sp-learn {
  --sp-text: var(--navy); --sp-soft: #4E5680; --sp-faint: #6E7398; --sp-panel: rgba(255, 255, 255, .74);
  --sp-panel-solid: #FFFFFF; --sp-edge: rgba(36, 48, 88, .16); --sp-silk: #C55E92; --sp-on-silk: #FFFFFF;
  --sp-ok: #1E8F82; --sp-warn: #A8660A; --sp-bad: #C02A44; --sp-nether: #E8C3CC;
  --sp-t-perception: #C55E92; --sp-t-item: #6A58CC; --sp-t-place: #1E8F82; --sp-t-goal: #A8660A; --sp-t-rule: #2F6FB0;
  --sp-t-vague: #6E7398; --sp-health: #C55E92; --sp-track: rgba(36, 48, 88, .12);
  /* the stage: light here, dark in the dark theme (spider.js draws with the matching palette) */
  --sp-night: #F3F0FB; --sp-stage-glow: #FFFFFF; --sp-stage-edge: rgba(36, 48, 88, .14); --sp-stage-panel: #FFFFFF;
  --sp-stage-text: #1C2040; --sp-stage-faint: #6E7398;
  color: var(--sp-text); font: 400 15px/1.45 var(--font-body);
}
.sp {
  display: grid; gap: 12px; padding: 12px var(--gutter) 16px; max-width: 1760px; margin: 0 auto; box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "head head" "stage card" "time time" "about about";
  height: calc(100vh - 72px); height: calc(100svh - 72px); min-height: 560px;
}
.sp *, .sp *::before, .sp *::after, .sp-learn *, .sp-learn *::before, .sp-learn *::after { box-sizing: border-box; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp, :root:not([data-theme="light"]) .sp-learn {
    --sp-text: #ECE8FA; --sp-soft: #B9B2D8; --sp-faint: #8A85B4; --sp-panel: rgba(26, 21, 56, .82);
    --sp-panel-solid: #1D1840; --sp-edge: rgba(255, 255, 255, .13); --sp-silk: #F7B4D2; --sp-on-silk: #120F26;
    --sp-ok: #4FD8C6; --sp-warn: #F4B860; --sp-bad: #F06A84; --sp-nether: #5A1E2A;
    --sp-t-perception: #F3A6CB; --sp-t-item: #A99BFF; --sp-t-place: #4FD1C1; --sp-t-goal: #F4B860; --sp-t-rule: #8FC8FF;
    --sp-t-vague: #9E98BE; --sp-health: #F3A6CB; --sp-track: rgba(255, 255, 255, .1);
    --sp-night: #120F26; --sp-stage-glow: #1E1840; --sp-stage-edge: rgba(255, 255, 255, .12); --sp-stage-panel: #1D1840;
    --sp-stage-text: #ECE8FA; --sp-stage-faint: #8A85B4;
  }
}
:root[data-theme="dark"] .sp, :root[data-theme="dark"] .sp-learn {
  --sp-text: #ECE8FA; --sp-soft: #B9B2D8; --sp-faint: #8A85B4; --sp-panel: rgba(26, 21, 56, .82);
  --sp-panel-solid: #1D1840; --sp-edge: rgba(255, 255, 255, .13); --sp-silk: #F7B4D2; --sp-on-silk: #120F26;
  --sp-ok: #4FD8C6; --sp-warn: #F4B860; --sp-bad: #F06A84; --sp-nether: #5A1E2A;
  --sp-t-perception: #F3A6CB; --sp-t-item: #A99BFF; --sp-t-place: #4FD1C1; --sp-t-goal: #F4B860; --sp-t-rule: #8FC8FF;
  --sp-t-vague: #9E98BE; --sp-health: #F3A6CB; --sp-track: rgba(255, 255, 255, .1);
  --sp-night: #120F26; --sp-stage-glow: #1E1840; --sp-stage-edge: rgba(255, 255, 255, .12); --sp-stage-panel: #1D1840;
  --sp-stage-text: #ECE8FA; --sp-stage-faint: #8A85B4;
}
.sp button { font: inherit; color: inherit; }
.sp :focus-visible { outline: 2px solid var(--sp-silk); outline-offset: 2px; }
.sp[hidden], .sp [hidden] { display: none !important; }

.sp.sp--player { grid-template-columns: minmax(0, 1fr) minmax(340px, 500px) 400px;
  grid-template-areas: "head head head" "stage player card" "time time time" "about about about"; }
.sp-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sp-stage { grid-area: stage; position: relative; min-height: 0; border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, var(--sp-stage-glow) 0%, var(--sp-night) 70%); border: 1px solid var(--sp-stage-edge);
  box-shadow: 0 18px 40px -26px rgba(18, 15, 38, .7); }
.sp-card { grid-area: card; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.sp-player { grid-area: player; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.sp-timeline { grid-area: time; }
.sp-about { grid-area: about; }
@media (max-width: 1099px) {
  .sp, .sp.sp--player { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "head" "player" "stage" "card" "time" "about"; }
  .sp-stage { height: min(68vh, 640px); }
  .sp-card { overflow: visible; }
}

.sp-logo { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px solid var(--sp-silk); }
.sp-brand { font: 700 clamp(22px, 2.1vw, 32px)/1 var(--font-display); letter-spacing: .02em; margin: 0; color: var(--sp-text); }
.sp-brand span { color: var(--sp-silk); }
.sp-mode { font: 12px/1 var(--font-label); letter-spacing: .08em; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--sp-edge); color: var(--sp-soft); display: inline-flex; gap: 8px; align-items: center; background: var(--sp-panel); }
.sp-mode.sp-live { color: var(--sp-ok); border-color: var(--sp-ok); }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sp-mode.sp-live .sp-dot { animation: sp-pulse 1.6s ease-in-out infinite; }
@keyframes sp-pulse { 50% { opacity: .25; } }
.sp-stamp { color: var(--sp-soft); }
.sp-stamp b { color: var(--sp-text); font-weight: 600; }
.sp-tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sp-btn { border: 1px solid var(--sp-edge); background: var(--sp-panel); border-radius: 999px; padding: 6px 13px; cursor: pointer;
  font-weight: 600; font-size: 13.5px; color: var(--sp-text); text-decoration: none; display: inline-flex; align-items: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: hover) { .sp-btn:hover { border-color: var(--sp-silk); } }
.sp-btn[aria-pressed="true"] { background: var(--sp-silk); color: var(--sp-on-silk); border-color: var(--sp-silk); }

/* ---- the stage ---- */
.sp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.sp-canvas.sp-dragging { cursor: grabbing; }
.sp-over { position: absolute; pointer-events: none; font: 11px/1.7 var(--font-label); letter-spacing: .06em; color: var(--sp-stage-faint); }
.sp-keys { left: 14px; top: 10px; }
.sp-keys i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.sp-src { right: 14px; bottom: 10px; left: 14px; text-align: right; }
.sp-load { left: 0; right: 0; top: 45%; text-align: center; font-size: 13px; color: var(--sp-stage-text); }
.sp-tip { position: absolute; pointer-events: none; padding: 5px 9px; border-radius: 9px; background: var(--sp-stage-panel);
  color: var(--sp-stage-text); border: 1px solid var(--sp-stage-edge); font-size: 13px; max-width: 320px; transform: translate(12px, -50%); }
.sp-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sp-zoom button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--sp-stage-edge); background: var(--sp-stage-panel);
  color: var(--sp-stage-text); font: 600 18px/1 var(--font-body); cursor: pointer; touch-action: manipulation; }

/* ---- the card ---- */
.sp-panel { background: var(--sp-panel); border: 1px solid var(--sp-edge); border-radius: 16px; padding: 12px 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sp-eyebrow { font: 11px/1.2 var(--font-label); letter-spacing: .12em; color: var(--sp-faint); text-transform: uppercase; margin: 0 0 7px; }
.sp-act { font: 700 clamp(22px, 1.8vw, 28px)/1.12 var(--font-display); margin: 0; overflow-wrap: anywhere; color: var(--sp-text); }
.sp-by { margin-top: 6px; color: var(--sp-soft); font-size: 14px; }
.sp-by b { color: var(--sp-text); font-weight: 600; }
.sp-verdict { margin-top: 8px; font: 700 17px var(--font-display); }
.sp-v-ok { color: var(--sp-ok); } .sp-v-warn { color: var(--sp-warn); } .sp-v-bad { color: var(--sp-bad); }
.sp-calls { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--sp-soft); }
.sp-calls b { color: var(--sp-text); font-weight: 600; }
.sp-reasonhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sp-dial { width: 92px; height: 58px; flex: none; }
.sp-dial-track { fill: none; stroke: var(--sp-track); stroke-width: 8; stroke-linecap: round; }
.sp-dial-fill { fill: none; stroke: var(--sp-ok); stroke-width: 8; stroke-linecap: round; }
.sp-dial-num { font: 700 21px var(--font-display); fill: var(--sp-text); }
.sp-line { font-size: 19px; line-height: 1.75; margin: 0; }
.sp-k { font: 10px var(--font-label); color: var(--sp-faint); letter-spacing: .1em; margin-right: 8px; vertical-align: middle; }
.sp-w { position: relative; border-radius: 5px; padding: 0 1px; }
.sp-w.sp-tag { color: var(--tc); border-bottom: 2px solid var(--tc); }
.sp-tc-perception { --tc: var(--sp-t-perception); } .sp-tc-item { --tc: var(--sp-t-item); } .sp-tc-place { --tc: var(--sp-t-place); }
.sp-tc-goal { --tc: var(--sp-t-goal); } .sp-tc-rule { --tc: var(--sp-t-rule); } .sp-tc-vague { --tc: var(--sp-t-vague); }
.sp-w.sp-tc-vague { border-bottom-style: dotted; }
.sp-w.sp-unres { text-decoration: underline wavy var(--sp-bad) 1.5px; text-underline-offset: 6px; border-bottom-color: transparent; }
.sp-w.sp-unres::after { content: "?"; position: absolute; top: -.5em; right: -.45em; font: 700 .55em var(--font-body); color: #fff;
  background: var(--sp-bad); border-radius: 50%; width: 1.25em; height: 1.25em; display: grid; place-items: center; }
.sp-w.sp-plain { color: var(--sp-soft); }
.sp-flags { font-size: 13px; color: var(--sp-soft); margin-top: 4px; }
.sp-flags b { color: var(--sp-bad); }
.sp-tagkey { display: flex; flex-wrap: wrap; gap: 2px 12px; font: 10px var(--font-label); letter-spacing: .06em; color: var(--sp-faint); margin-top: 6px; }
.sp-tagkey span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--tc); margin-right: 5px; vertical-align: -1px; }
.sp-pink { color: var(--sp-silk); }
ol.sp-walk { margin: 0; padding-left: 22px; font-size: 13.5px; display: grid; gap: 2px; }
ol.sp-walk li::marker { color: var(--sp-faint); font-size: 12px; }
.sp-r { font: 10px var(--font-label); letter-spacing: .05em; color: var(--rc, var(--sp-faint)); margin-right: 6px; }
.sp-r-perception { --rc: var(--sp-t-perception); } .sp-r-memory { --rc: var(--sp-t-place); } .sp-r-drive { --rc: var(--sp-t-goal); }
.sp-r-option { --rc: var(--sp-t-item); } .sp-r-action { --rc: var(--sp-silk); }
.sp-via { color: var(--sp-faint); font-size: 12px; }
.sp-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13.5px; margin: 0; }
.sp-kv dt { color: var(--sp-faint); } .sp-kv dd { margin: 0; overflow-wrap: anywhere; }
.sp-kv dd.sp-cited { color: var(--sp-silk); font-weight: 600; }
.sp-kv dd .sp-j { color: var(--sp-t-rule); margin-left: 6px; font-size: 11px; font-weight: 400; }
.sp-miss { color: var(--sp-faint); font-style: italic; }
.sp-opts { display: grid; gap: 5px; font-size: 13.5px; }
.sp-opt { display: grid; grid-template-columns: 92px 1fr 64px; gap: 8px; align-items: center; }
.sp-bar { height: 7px; border-radius: 4px; background: var(--sp-track); overflow: hidden; }
.sp-bar i { display: block; height: 100%; background: var(--sp-faint); }
.sp-opt.sp-chosen { color: var(--sp-silk); font-weight: 600; } .sp-opt.sp-chosen .sp-bar i { background: var(--sp-silk); }
.sp-p { color: var(--sp-soft); font-size: 12px; text-align: right; }
.sp-cutrow { color: var(--sp-bad); font-size: 12.5px; opacity: .85; }
.sp-ints { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13.5px; }
.sp-ints li { border-left: 3px solid var(--sp-bad); padding: 1px 0 1px 9px; }
.sp-s { color: var(--sp-faint); font-size: 11.5px; }
.sp-none { color: var(--sp-faint); font-style: italic; font-size: 13.5px; border: 0 !important; padding: 0 !important; }
.sp details summary { cursor: pointer; font: 11px var(--font-label); letter-spacing: .12em; color: var(--sp-faint); text-transform: uppercase; }
.sp details[open] summary { margin-bottom: 7px; }
.sp-about p { margin: 0 0 6px; font-size: 14px; color: var(--sp-soft); max-width: 72ch; }
.sp-about p:last-child { margin-bottom: 0; }
.sp-about a { color: var(--sp-silk); font-weight: 600; }

.sp-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--sp-edge); background: #000; }
.sp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-note { font-size: 13px; color: var(--sp-warn); margin: 0; }

.sp-timeline { padding: 8px 14px 10px; }
.sp-tl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--sp-soft); flex-wrap: wrap; }
.sp-tl-keys { display: flex; gap: 12px; flex-wrap: wrap; font: 10px var(--font-label); color: var(--sp-faint); letter-spacing: .05em; }
.sp-tl-keys i { display: inline-block; width: 11px; height: 7px; margin-right: 5px; border-radius: 2px; }
.sp-tk-nether { background: var(--sp-nether); } .sp-tk-health { background: var(--sp-health); }
.sp-tk-bad { background: var(--sp-bad); } .sp-tk-jev { background: var(--sp-t-goal); }
.sp-tl-row { display: flex; align-items: center; gap: 8px; }
.sp-tl-wrap { position: relative; height: 56px; margin-top: 4px; flex: 1; }
.sp-tl { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-scrub { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sp-scrub:focus-visible + .sp-tl-focus { outline: 2px solid var(--sp-silk); }
.sp-tl-focus { position: absolute; inset: -3px; border-radius: 8px; pointer-events: none; }
.sp-ticker { margin-top: 6px; font-size: 12.5px; color: var(--sp-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-ticker b { font: 10px var(--font-label); color: var(--sp-silk); letter-spacing: .08em; margin-right: 8px; }
.sp-nav { display: none; }
.sp-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .sp-mode.sp-live .sp-dot { animation: none; } }

.sp-fold > .sp-eyebrow { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.sp-fold > .sp-eyebrow::after { content: "▾"; color: var(--sp-faint); transition: transform .2s; }
.sp-fold.sp-shut > .sp-eyebrow { margin: 0; }
.sp-fold.sp-shut > .sp-eyebrow::after { transform: rotate(-90deg); }
.sp-fold.sp-shut > :not(.sp-eyebrow) { display: none; }

/* ---- learning: what's happening (the card), word meanings, how she decides, what Skyblock is ---- */
.sp-explain { border-left: 4px solid var(--sp-t-place); }
.sp-ex-title { font: 700 19px/1.25 var(--font-display); margin: 0 0 6px; color: var(--sp-text); }
.sp-ex-plan { margin: 0 0 8px; font-size: 14.5px; color: var(--sp-soft); }
.sp-ex-plan b { color: var(--sp-text); font-weight: 600; }
.sp-ex-lines, .sp-classic { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 15px; line-height: 1.45; }
.sp-ex-lines li::marker, .sp-classic li::marker { color: var(--sp-t-place); }
.sp-src-a { font-size: 12.5px; color: var(--sp-t-place); font-weight: 600; white-space: nowrap; text-decoration: underline;
  text-underline-offset: 2px; margin-left: 4px; }
.sp-ex-note { margin: 8px 0 0; font-size: 12.5px; color: var(--sp-faint); }
.sp-ex-fallback { color: var(--sp-soft); font-size: 14px; margin: 0 0 4px; }
.sp-w.sp-tag { cursor: help; }
.sp-w.sp-tag:focus-visible { outline: 2px solid var(--tc); outline-offset: 1px; }
.sp-w.sp-tag.sp-picked { background: color-mix(in srgb, var(--tc) 16%, transparent); }
.sp-gloss { margin: 6px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--sp-track); font-size: 14px;
  color: var(--sp-soft); min-height: 2.2em; }
.sp-gloss b { color: var(--sp-text); }
.sp-gloss .sp-gtag { font: 10px var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--tc); margin: 0 6px; }

.sp-learn { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
  padding: 4px var(--gutter) 24px; max-width: 1760px; margin: 0 auto; scroll-margin-top: 80px; }
.sp-learn-h { font: 700 20px/1.2 var(--font-display); margin: 0; color: var(--sp-text); }
.sp-learn-sub { font-size: 13.5px; color: var(--sp-faint); margin-left: 6px; }
.sp-primer > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.sp-primer > summary::-webkit-details-marker { display: none; }
.sp-primer > summary::before { content: "▸"; color: var(--sp-faint); margin-right: 6px; transition: transform .2s; display: inline-block; }
.sp-primer[open] > summary::before { transform: rotate(90deg); }
.sp-steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 8px; }
.sp-steps li { counter-increment: st; position: relative; padding: 8px 10px 8px 40px; border-radius: 12px;
  border: 1px solid var(--sp-edge); font-size: 14.5px; line-height: 1.45; color: var(--sp-soft); }
.sp-steps li b { color: var(--sp-text); }
.sp-steps li::before { content: counter(st); position: absolute; left: 10px; top: 8px; width: 22px; height: 22px;
  border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-body); background: var(--sp-track); color: var(--sp-text); }
.sp-steps li.sp-on { border-color: var(--sp-silk); background: color-mix(in srgb, var(--sp-silk) 9%, transparent); }
.sp-steps li.sp-on::before { background: var(--sp-silk); color: var(--sp-on-silk); }
.sp-stepnow { display: block; margin-top: 3px; font-size: 13.5px; color: var(--sp-silk); font-weight: 600; overflow-wrap: anywhere; }
.sp-stepnow:empty { display: none; }
.sp-classic { margin: 10px 0 8px; }
.sp-goal { margin: 0 0 10px; font-size: 14.5px; color: var(--sp-soft); }
.sp-goal b { color: var(--sp-text); }
.sp-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sp-check li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 8px; padding: 5px 8px; border-radius: 10px; font-size: 14.5px; }
.sp-check .sp-mark { grid-row: span 2; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--sp-edge);
  display: grid; place-items: center; font: 700 13px/1 var(--font-body); color: var(--sp-on-silk); margin-top: 1px; }
.sp-check li.sp-done .sp-mark { background: var(--sp-ok); border-color: var(--sp-ok); color: #fff; }
.sp-check li.sp-cur { background: color-mix(in srgb, var(--sp-silk) 12%, transparent); }
.sp-check li.sp-cur .sp-mark { border-color: var(--sp-silk); }
.sp-check .sp-lab { font-weight: 600; color: var(--sp-text); }
.sp-check .sp-now-tag { font: 10px var(--font-label); letter-spacing: .08em; color: var(--sp-silk); margin-left: 6px; }
.sp-check .sp-plan { font-size: 13px; color: var(--sp-faint); line-height: 1.35; }
.sp-skynums { margin: 10px 0 0; font-size: 14px; color: var(--sp-soft); }
.sp-skynums b { color: var(--sp-text); }
@media (max-width: 1099px) { .sp-learn { grid-template-columns: minmax(0, 1fr); } }

/* ---- the decision trail strip (the card) ---- */
.sp-trailh { margin: 10px 0 5px; }
.sp-trail { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.sp-tstep { border: 1px solid var(--sp-edge); background: transparent; border-radius: 999px; padding: 3px 10px 3px 4px; cursor: pointer;
  font: 500 13px/1.3 var(--font-body); color: var(--sp-soft); display: inline-flex; gap: 6px; align-items: center; max-width: 100%;
  text-align: left; overflow-wrap: anywhere; touch-action: manipulation; }
.sp-tstep b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--sp-track);
  color: var(--sp-text); font: 700 11.5px var(--font-body); flex: none; }
.sp-trail li.sp-on .sp-tstep { color: var(--sp-text); border-color: var(--rc, var(--sp-silk)); }
.sp-trail li.sp-on .sp-tstep b { background: var(--rc, var(--sp-silk)); color: var(--sp-on-silk); }
.sp-trail li.sp-now .sp-tstep { box-shadow: 0 0 0 2px var(--rc, var(--sp-silk)); font-weight: 700; }
@media (hover: hover) { .sp-tstep:hover { border-color: var(--sp-silk); } }

/* ---- 3D (spider3d.js) ---- */
.sp-3dlab.sp-3dlab-big { font-size: 13.5px; font-weight: 700; border-width: 2px; z-index: 2; }
.sp-3dlab.sp-off { display: none; }
.sp-3dlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sp-3dlines line { stroke-width: 1.3; opacity: .75; }
.sp-3d { position: absolute; inset: 0; }
.sp-canvas3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.sp-3dlabels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sp-3dlab { position: absolute; left: 0; top: 0; padding: 2px 8px; border-radius: 11px; background: var(--sp-stage-panel);
  color: var(--sp-stage-text); border: 1px solid var(--sp-silk); font: 600 12.5px/1.4 var(--font-body); white-space: nowrap; will-change: transform; }
.sp-3dlab-act { color: var(--sp-silk); }

/* ---- learning over time ---- */
.sp-growth { grid-column: 1 / -1; }
.sp-growhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sp-growhead .sp-learn-h { margin-right: auto; }
.sp-growt { font-weight: 600; color: var(--sp-silk); min-width: 9ch; }
.sp-growsub { margin: 8px 0; font-size: 14.5px; color: var(--sp-soft); max-width: 90ch; }
.sp-growtl { position: relative; height: 34px; }
.sp-growsvg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 24px; }
.sp-growrange { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; margin: 0; accent-color: var(--sp-silk); }
.sp-gk { white-space: nowrap; margin-left: 8px; }
.sp-gk i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.sp-gk-run { background: var(--sp-t-place); } .sp-gk-split { background: var(--sp-t-goal); } .sp-gk-death { background: var(--sp-bad); }
.sp-latelyhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.sp-latelyhead .sp-eyebrow { margin: 0; }
.sp-seg { display: inline-flex; gap: 4px; }
.sp-seg .sp-btn { padding: 3px 10px; min-height: 0; font-size: 12.5px; }
.sp-lately { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 3px; font-size: 14px; color: var(--sp-soft); }
.sp-lately b { color: var(--sp-text); font-weight: 600; }
.sp-lately .sp-lt-up::marker { color: var(--sp-ok); } .sp-lately .sp-lt-down::marker { color: var(--sp-bad); }

/* ---- inference levels ---- */
.sp-levels { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sp-lv { border-left: 3px solid var(--lc, var(--sp-edge)); padding: 4px 0 4px 10px; font-size: 13.5px; line-height: 1.4; }
.sp-lv-win { --lc: var(--sp-silk); } .sp-lv-fire { --lc: var(--sp-bad); } .sp-lv-warn { --lc: var(--sp-warn); }
.sp-lv-in { --lc: var(--sp-t-perception); } .sp-lv-pass { --lc: var(--sp-t-vague); } .sp-lv-off, .sp-lv-none { --lc: var(--sp-track); }
.sp-lv-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sp-lv-name { font-weight: 600; color: var(--sp-text); }
.sp-lv-v { font: 10px var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--lc, var(--sp-faint)); }
.sp-lv-off .sp-lv-v, .sp-lv-none .sp-lv-v { color: var(--sp-faint); }
.sp-lv-row, .sp-lv-rest { color: var(--sp-soft); overflow-wrap: anywhere; margin-top: 2px; }
.sp-lv-k { font: 10px var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--sp-faint); margin-right: 6px; }
.sp-lv-rest ul { margin: 2px 0 0; padding-left: 16px; }
.sp-lv-rest b { color: var(--sp-warn); }
.sp-lv-off .sp-lv-row { font-style: italic; }

/* ---- phones: the graph and the choice on one screen, the timeline under the thumb ---- */
@media (max-width: 640px) {
  .sp { padding: 8px 10px 0; gap: 8px; }
  .sp-head { gap: 4px 8px; }
  .sp-logo { width: 28px; height: 28px; }
  .sp-brand { font-size: 20px; }
  .sp-mode { font-size: 10px; padding: 4px 8px; }
  .sp-stamp { order: 5; flex-basis: 100%; font-size: 13px; line-height: 1.35; }
  .sp-tools { order: 6; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 2px 10px; }
  .sp-tools::-webkit-scrollbar { display: none; }
  .sp-btn { min-height: 38px; padding: 6px 14px; white-space: nowrap; }
  .sp-stage { height: 56vh; height: 56svh; border-radius: 14px; }
  .sp-canvas { touch-action: pan-y; }
  .sp-hint { display: block; left: 10px; right: 10px; bottom: 8px; text-align: center; font-size: 10px; transition: opacity .6s; }
  .sp-src, .sp-keys { display: none; }
  .sp-tip { transform: translate(-50%, -130%); max-width: 80vw; }
  .sp-act { font-size: 20px; }
  .sp-line { font-size: 17px; line-height: 1.7; }
  .sp-opt { grid-template-columns: 78px 1fr 52px; }
  .sp-timeline { position: sticky; bottom: 0; z-index: 5; margin: 0 -10px; border-radius: 16px 16px 0 0;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--sp-panel-solid); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
  .sp-tl-keys { display: none; }
  .sp-tl-top { font-size: 11.5px; }
  .sp-tl-wrap { height: 44px; margin: 0; }
  .sp-nav { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px;
    border: 1px solid var(--sp-edge); background: var(--sp-panel); font-size: 20px; cursor: pointer; color: var(--sp-text); }
  .sp-ticker { font-size: 11.5px; }
  .sp-about { margin: 0 0 12px; }
  .sp-learn { padding: 0 10px 16px; gap: 8px; }
  .sp-ex-lines, .sp-classic { font-size: 15px; }
  .sp-steps li { font-size: 14.5px; }
}

/* ---- stream mode (?stream=1): the OBS overlay "Nixi Spider", 1920×1080 scaled to 1440p; the game's hotbar keeps
   the bottom band free; one title line; ?transparent=1 lets the game show round the panel ---- */
.sp-streamtitle, .sp-streamtrail { display: none; }
.sp-stream, .sp-stream body { background: #120F26 !important; overflow: hidden; }
.sp-stream.sp-transparent, .sp-stream.sp-transparent body { background: transparent !important; }
.sp-stream .site-header, .sp-stream .site-footer, .sp-stream .world-still, .sp-stream .skip-link, .sp-stream .sp-learn,
.sp-stream .sp-head, .sp-stream .sp-card, .sp-stream .sp-timeline, .sp-stream .sp-about, .sp-stream .sp-player,
.sp-stream .sp-zoom, .sp-stream .sp-hint, .sp-stream .sp-keys, .sp-stream .sp-src, .sp-stream .toast,
.sp-stream .sp-load { display: none !important; }
.sp-stream main { padding: 0 !important; margin: 0 !important; }
.sp-stream .sp { position: fixed; inset: 0; display: block; height: 100vh; padding: 0; max-width: none; }
.sp-stream .sp-stage { position: absolute; left: 2.5vw; right: 2.5vw; top: 8.5vh; bottom: 13vh; height: auto; border-radius: 2.2vh;
  background: rgba(18, 15, 38, .84); border: 1px solid rgba(247, 180, 210, .35); box-shadow: 0 1vh 4vh rgba(0, 0, 0, .45); }
.sp-stream .sp-streamtitle { display: block; position: fixed; left: 2.5vw; top: 2.2vh; margin: 0; font: 700 3.6vh/1 var(--font-display);
  color: #F7B4D2; text-shadow: 0 .3vh 1.2vh rgba(0, 0, 0, .7); letter-spacing: .02em; }
.sp-stream .sp-streamtitle span { color: #ECE8FA; font-weight: 500; font-size: .7em; }
.sp-stream .sp-streamtrail { display: flex; position: absolute; left: 1.4vw; top: 1.6vh; right: 1.4vw; z-index: 3; gap: .6vh; pointer-events: none; }
.sp-stream .sp-streamtrail .sp-tstep { font-size: 2.1vh; padding: .35vh 1.1vh .35vh .45vh; background: rgba(18, 15, 38, .9); color: #B9B2D8;
  border-color: rgba(255, 255, 255, .18); }
.sp-stream .sp-streamtrail .sp-tstep b { min-width: 2.6vh; height: 2.6vh; font-size: 1.5vh; }
.sp-stream .sp-streamtrail li.sp-on .sp-tstep { color: #ECE8FA; }
.sp-stream .sp-3dlab { font-size: 2vh; padding: .3vh 1vh; }
.sp-stream .sp-3dlab.sp-3dlab-big { font-size: 2.4vh; }

/* ---- mini mode (?mini=1): the round window where the compass minimap was (~400×400 OBS source); navy glass, a
   faint rim, transparent round it ---- */
.sp-mini, .sp-mini body { background: transparent !important; overflow: hidden; }
.sp-mini .site-header, .sp-mini .site-footer, .sp-mini .world-still, .sp-mini .skip-link, .sp-mini .sp-learn,
.sp-mini .sp-head, .sp-mini .sp-card, .sp-mini .sp-timeline, .sp-mini .sp-about, .sp-mini .sp-player,
.sp-mini .sp-zoom, .sp-mini .sp-hint, .sp-mini .sp-keys, .sp-mini .sp-src, .sp-mini .toast, .sp-mini .sp-load,
.sp-mini .sp-streamtitle, .sp-mini .sp-streamtrail, .sp-mini .sp-3d { display: none !important; }
.sp-mini main { padding: 0 !important; margin: 0 !important; }
.sp-mini .sp { position: fixed; inset: 0; display: block; height: 100vh; padding: 0; max-width: none; }
.sp-mini .sp-stage { position: absolute; inset: 3px; height: auto; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(36, 30, 78, .86) 0%, rgba(18, 15, 38, .84) 70%);
  border: 2px solid rgba(186, 196, 235, .38); box-shadow: inset 0 0 18px rgba(0, 0, 0, .45); }

/* ---- navigation (spider-nav.js): hover card, highlight, search, filters, breadcrumb, fullscreen, floating player ---- */
.sp-hcard { position: absolute; left: 0; top: 0; z-index: 12; width: min(320px, calc(100% - 16px)); padding: 10px 12px; border-radius: 14px;
  background: var(--sp-panel); color: var(--sp-text); border: 1px solid var(--sp-edge); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 13.5px; line-height: 1.4; pointer-events: auto; }
.sp-hc-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.sp-hc-head i { width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; }
.sp-hc-head b { font: 700 15px var(--font-body); overflow-wrap: anywhere; }
.sp-hc-kind { font: 10px var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--sp-faint); margin-left: auto; }
.sp-hc-desc { margin: 6px 0 4px; color: var(--sp-soft); }
.sp-hc-desc a { color: var(--sp-t-place); font-weight: 600; }
.sp-hc-stats, .sp-hc-dec { margin: 4px 0; color: var(--sp-soft); font-size: 12.5px; }
.sp-hcard .sp-eyebrow { margin: 6px 0 2px; }
.sp-hc-top { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.sp-hc-top li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.sp-hc-top b { color: var(--sp-silk); }
.sp-hc-hint { margin: 6px 0 0; font-size: 12px; color: var(--sp-silk); font-weight: 600; }
.sp-crumb { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--sp-panel); border: 1px solid var(--sp-edge); font-size: 13px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); max-width: calc(100% - 120px); white-space: nowrap; overflow: hidden; }
.sp-crumb .sp-btn { padding: 3px 10px; }
.sp-search { position: relative; }
.sp-search input { border: 1px solid var(--sp-edge); background: var(--sp-panel); color: var(--sp-text); border-radius: 999px; padding: 6px 13px;
  font: 500 13.5px var(--font-body); width: 190px; }
.sp-search input:focus-visible { outline: 2px solid var(--sp-silk); }
.sp-results { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 260px; margin: 0; padding: 4px; list-style: none;
  background: var(--sp-panel-solid); border: 1px solid var(--sp-edge); border-radius: 12px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); }
.sp-results li { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.sp-results li i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sp-results li[aria-selected="true"] { background: var(--sp-track); }
.sp-filters { position: absolute; left: 10px; bottom: 30px; z-index: 6; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 70px); }
.sp-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--sp-stage-edge); background: var(--sp-stage-panel);
  color: var(--sp-stage-text); border-radius: 999px; padding: 2px 9px; font: 500 12px var(--font-body); cursor: pointer; opacity: .9; }
.sp-chip i { width: 8px; height: 8px; border-radius: 50%; }
.sp-chip[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.sp-3dreg { position: absolute; left: 0; top: 0; pointer-events: auto; border: 1px solid var(--sp-stage-edge); background: var(--sp-stage-panel);
  color: var(--sp-stage-text); border-radius: 999px; padding: 2px 10px; font: 600 12.5px var(--font-body); opacity: .75; cursor: pointer; white-space: nowrap; }
.sp-3dreg.sp-off { display: none; }
.sp-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-keys { display: none; }
.sp.sp--player { grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "head head" "stage card" "time time" "about about"; }
.sp-pseudofs { position: fixed !important; inset: 0; z-index: 1000; height: 100vh !important; height: 100dvh !important; border-radius: 0 !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.sp-noscroll, .sp-noscroll body { overflow: hidden; }
.sp-stage:fullscreen { border-radius: 0; }
.sp-exitfs { position: absolute; right: 56px; top: 10px; z-index: 13; }
.sp-fshint { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 9; margin: 0; padding: 6px 12px; border-radius: 10px;
  background: var(--sp-panel-solid); color: var(--sp-text); font-size: 13px; }
.sp-float { position: absolute; left: 0; top: 0; z-index: 10; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--sp-edge);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6); touch-action: none; }
.sp-float.sp-anim { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.sp-float-bar { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; background: var(--sp-panel-solid); color: var(--sp-text); cursor: grab; user-select: none; }
.sp-float-title { font: 10px var(--font-label); letter-spacing: .08em; color: var(--sp-bad); margin-right: auto; }
.sp-float-b { width: 26px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--sp-text); cursor: pointer; font: 600 14px var(--font-body); }
@media (hover: hover) { .sp-float-b:hover { background: var(--sp-track); } }
.sp-float-body .sp-frame { border: 0; border-radius: 0; }
.sp-float-grip { position: absolute; left: 0; bottom: 0; width: 18px; height: 18px; cursor: nesw-resize;
  background: linear-gradient(45deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 5px, rgba(255, 255, 255, .55) 5px 7px, transparent 7px); }
.sp-float-tab { position: absolute; right: 0; bottom: 70px; z-index: 10; border: 1px solid var(--sp-edge); border-right: 0; border-radius: 10px 0 0 10px;
  background: var(--sp-panel-solid); color: var(--sp-bad); font: 10px var(--font-label); letter-spacing: .08em; padding: 8px 8px; cursor: pointer; }
.sp-float-tab.sp-left { right: auto; left: 0; border-radius: 0 10px 10px 0; border: 1px solid var(--sp-edge); border-left: 0; }
@media (max-width: 640px) { .sp-search input { width: 150px; } .sp-filters { bottom: 26px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: calc(100% - 20px); } .sp-hcard { width: min(280px, calc(100% - 16px)); } }

/* ---- the decision advisor (shadow) ---- */
.sp-adv-p { margin: 0 0 6px; font-size: 13.5px; color: var(--sp-soft); }
.sp-adv-p b { font: 700 18px var(--font-display); color: var(--sp-text); margin-right: 4px; }
.sp-adv-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.sp-adv-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 1px 8px; font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--sp-edge); }
.sp-adv-when { color: var(--sp-faint); grid-row: span 2; font-size: 11.5px; }
.sp-adv-sit { color: var(--sp-soft); overflow-wrap: anywhere; }
.sp-adv-act { color: var(--sp-text); grid-column: 2; overflow-wrap: anywhere; }
.sp-adv-out { grid-row: 1 / span 2; grid-column: 3; align-self: center; font-size: 12px; }
.sp-adv-success .sp-adv-out, .sp-adv-progress .sp-adv-out { color: var(--sp-ok); }
.sp-adv-fail .sp-adv-out, .sp-adv-death .sp-adv-out { color: var(--sp-bad); }
.sp-adv-rest .sp-adv-out { color: var(--sp-faint); }
.sp-advcurve { margin-top: 10px; }
.sp-advsvg { width: 100%; height: 90px; display: block; }
.sp-adv-acc { stroke: var(--sp-silk); stroke-width: 2; }
.sp-adv-base { stroke: var(--sp-faint); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sp-adv-grid { stroke: var(--sp-edge); stroke-width: 1; }
.sp-gk-acc { background: var(--sp-silk); } .sp-gk-base { background: var(--sp-faint); }

/* ---- the prominent full-screen button, and full mode (?full=1, /mind/full): the graph alone in the window ---- */
.sp-fsicon { position: absolute; right: 54px; top: 10px; z-index: 9; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--sp-stage-edge);
  background: var(--sp-stage-panel); color: var(--sp-stage-text); font: 600 18px/1 var(--font-body); cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .sp-fsicon:hover { border-color: var(--sp-silk); color: var(--sp-silk); } }
.sp-fullmode .site-header, .sp-fullmode .site-footer, .sp-fullmode .world-still, .sp-fullmode .skip-link, .sp-fullmode .sp-learn,
.sp-fullmode .sp-card, .sp-fullmode .sp-timeline, .sp-fullmode .sp-about, .sp-fullmode .sp-player, .sp-fullmode .toast { display: none !important; }
.sp-fullmode, .sp-fullmode body { overflow: hidden; background: var(--sp-night, #120F26); }
.sp-fullmode main { padding: 0 !important; margin: 0 !important; }
.sp-fullmode .sp { position: fixed; inset: 0; display: block; height: 100vh; height: 100dvh; padding: 0; max-width: none; }
.sp-fullmode .sp-stage { position: absolute; inset: 0; height: auto; border-radius: 0; border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.sp-fullmode .sp-head { position: fixed; z-index: 30; top: 10px; left: 10px; right: 10px; padding: 8px 12px; border-radius: 16px;
  background: var(--sp-panel); border: 1px solid var(--sp-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: none; }
.sp-fullmode.sp-idle .sp-head { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .4s, transform .4s; }
.sp-fullmode .sp-zoom, .sp-fullmode .sp-fsicon { top: 86px; }
.sp-fullmode.sp-idle .sp-zoom, .sp-fullmode.sp-idle .sp-fsicon, .sp-fullmode.sp-idle .sp-filters { opacity: .25; }
.sp-fullmode .sp-crumb { top: 86px; }
@media (max-width: 640px) { .sp-fullmode .sp-zoom, .sp-fullmode .sp-fsicon, .sp-fullmode .sp-crumb { top: 130px; } .sp-fsicon { top: 10px; right: 52px; } }

/* ---- her senses (the input layer, 2026-10-11): boxed labels on what she reads, pink flags, section names (3D) */
.sp-3dlab.sp-inlab { font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; border-radius: 3px; padding: 2px 6px;
  border-color: #F3A6CB; opacity: .9; }
.sp-3dlab.sp-flag { background: rgba(64, 18, 40, .92); color: #FFC2D6; border-color: #F06A84; }
.sp-seclab { position: absolute; left: 0; top: 0; width: 170px; text-align: center; pointer-events: none; line-height: 1.25; }
.sp-seclab b { display: block; font: 400 13px/1.2 Silkscreen, ui-monospace, monospace; opacity: .85; }
.sp-seclab span { display: block; font: 500 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #B9B2D8; opacity: .8; }
.sp-seclab.sp-off { display: none; }
.sp-stream .sp-3dlab.sp-inlab { font-size: 1.6vh; }

/* ---- the HUD strip (stream and full mode): five small dark monospace panels under the graph */
.sp-hud { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 6; display: grid; gap: 8px; pointer-events: none;
  grid-template-columns: 1.5fr 1.1fr .9fr 1.2fr .8fr; height: 150px;
  font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #D8D2F0; }
.sp-hudp { background: rgba(12, 10, 26, .84); border: 1px solid rgba(169, 155, 255, .22); border-radius: 8px; padding: 6px 8px;
  overflow: hidden; min-width: 0; }
.sp-hudp h4 { margin: 0 0 4px; font: 600 9.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em;
  text-transform: uppercase; color: #8F88B8; }
.sp-hudlog { list-style: none; margin: 0; padding: 0; }
.sp-hudlog li { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92em; line-height: 1.22; }
.sp-hudlog time { color: #6F6996; flex: none; }
.sp-hudlog span { overflow: hidden; text-overflow: ellipsis; }
.sp-hudlog .sp-hok span { color: #7FE0D2; } .sp-hudlog .sp-hbad span { color: #FF9DB8; }
.sp-hudlog .sp-hrun span { color: #F4D08A; } .sp-hudlog .sp-hmid span { color: #B9B2D8; }
.sp-hudbars { display: grid; gap: 5px; margin-top: 2px; }
.sp-hudbar { display: grid; grid-template-columns: 5.6em 1fr 2em; align-items: center; gap: 6px; }
.sp-hudbar i { display: block; height: 7px; background: rgba(255, 255, 255, .07); border-radius: 4px; overflow: hidden; }
.sp-hudbar b { display: block; height: 100%; width: 0; border-radius: 4px; opacity: .85; transition: width .9s ease; }
.sp-hudbar em { font-style: normal; text-align: right; color: #8F88B8; }
.sp-hudradar, .sp-hudgauge { display: block; width: 100%; height: calc(100% - 14px); }
.sp-hudradar text { font: 7px ui-monospace, monospace; fill: #8F88B8; }
.sp-hudgrid { fill: none; stroke: rgba(169, 155, 255, .18); stroke-width: .6; }
.sp-hudpoly { fill: rgba(247, 180, 210, .22); stroke: #F7B4D2; stroke-width: 1; transition: all .9s ease; }
.sp-hudheat { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.sp-hudheat span { --a: 0; text-align: center; padding: 3px 0; border-radius: 3px; font-size: .82em; color: #8F88B8; overflow: hidden;
  background: rgba(243, 166, 203, calc(.05 + .75 * var(--a))); transition: background .9s ease, color .9s ease; }
.sp-hudheat span.sp-hon { color: #120F26; }
.sp-hudgauge { height: calc(100% - 34px); }
.sp-hudarc, .sp-hudarcon { fill: none; stroke-width: 7; stroke-linecap: round; }
.sp-hudarc { stroke: rgba(255, 255, 255, .08); }
.sp-hudarcon { stroke: #7FE0D2; transition: stroke-dasharray .9s ease; }
.sp-hudnum { font: 700 16px ui-monospace, monospace; fill: #ECE8FA; }
.sp-hudsub { margin: 0; text-align: center; color: #8F88B8; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-stream .sp-hud { left: 1.2vw; right: 1.2vw; bottom: 1.2vh; height: 19vh; gap: .6vw; font-size: 1.45vh; }
.sp-stream .sp-hudp { padding: .7vh .7vw; border-radius: 1vh; }
.sp-stream .sp-hudp h4 { font-size: 1.2vh; margin-bottom: .5vh; }
.sp-stream .sp-hudbar i { height: .8vh; }
.sp-stream .sp-hudnum { font-size: 15px; }
@media (max-width: 760px) { .sp-fullmode .sp-hud { grid-template-columns: 1.4fr 1fr 1fr; height: 132px; }
  .sp-fullmode .sp-hud .sp-hudp:nth-child(3), .sp-fullmode .sp-hud .sp-hudp:nth-child(5) { display: none; } }
.sp-hashud.sp-stream .sp-canvas, .sp-hashud.sp-stream .sp-3d { height: auto; bottom: calc(19vh + 1.8vh); }
.sp-hashud.sp-fullmode .sp-canvas, .sp-hashud.sp-fullmode .sp-3d { height: auto; bottom: 168px; }
@media (max-width: 760px) { .sp-hashud.sp-fullmode .sp-canvas, .sp-hashud.sp-fullmode .sp-3d { bottom: 150px; } }

/* ==== the rework (2026-10-11): the graph is the hero, one compact toolbar, the HUD language on the right ==== */
:root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp, :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp.sp--player { grid-template-columns: minmax(0, 1fr) 372px; grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "head head" "stage card" "time card" "about about"; height: calc(100vh - 72px); height: calc(100svh - 72px);
  min-height: 640px; gap: 10px; }
.sp-card { gap: 8px; padding-right: 2px; scrollbar-width: thin; }
.sp-stage { border-radius: 16px; }
/* the toolbar: Follow her, the view switch, search as an icon, one overflow menu */
.sp-head { gap: 6px 12px; }
.sp-tools { gap: 6px; align-items: center; flex-wrap: nowrap; }
.sp-btn { padding: 6px 12px; font-size: 13px; }
.sp-btn.sp-primary[aria-pressed="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-silk) 25%, transparent); }
.sp-segc { display: inline-flex; border: 1px solid var(--sp-edge); border-radius: 999px; background: var(--sp-panel); padding: 2px; }
.sp-segc .sp-btn { border: 0; background: transparent; padding: 4px 11px; font-size: 12.5px; }
.sp-segc .sp-btn[aria-pressed="true"] { background: var(--sp-silk); color: var(--sp-on-silk); }
.sp-iconbtn { width: 34px; height: 32px; padding: 0; justify-content: center; font-size: 17px; line-height: 1; }
.sp-search { display: inline-flex; align-items: center; }
.sp-search input { width: 0; padding: 6px 0; border-width: 0; opacity: 0; transition: width .25s ease, opacity .2s, padding .25s; }
.sp-search.sp-open input { width: 190px; padding: 6px 13px; border-width: 1px; opacity: 1; margin-left: 4px; }
.sp-search.sp-open .sp-searchicon { display: none; }
.sp-search .sp-results { left: auto; right: 0; }
.sp-menu { position: relative; }
.sp-menu > summary { list-style: none; cursor: pointer; }
.sp-menu > summary::-webkit-details-marker { display: none; }
.sp-menu[open] > summary { border-color: var(--sp-silk); }
.sp-menulist { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; padding: 6px; display: grid; gap: 2px;
  background: var(--sp-panel-solid); border: 1px solid var(--sp-edge); border-radius: 12px; box-shadow: 0 14px 30px -18px rgba(18, 15, 38, .6); }
.sp-mi { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--sp-text); text-decoration: none; font: 600 13.5px var(--font-body); }
@media (hover: hover) { .sp-mi:hover { background: var(--sp-track); } }
.sp-mi[aria-pressed="true"] { color: var(--sp-text); }
/* the stage's own chrome, quieter */
.sp-filters { bottom: 10px; gap: 3px; opacity: .8; }
.sp-chip { font-size: 11px; padding: 2px 7px; }
.sp-src { display: none; }
.sp-float { box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .7); }
/* Now: her action, what she reads (bars), how it went */
.sp-now .sp-eyebrow:first-child { display: flex; justify-content: space-between; align-items: center; }
.sp-nowok { font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: none; padding: 3px 7px; border-radius: 999px; }
.sp-nowok:empty { display: none; }
.sp-nowok.sp-ok { color: var(--sp-ok); border: 1px solid var(--sp-ok); } .sp-nowok.sp-bad { color: var(--sp-bad); border: 1px solid var(--sp-bad); }
.sp-nowok.sp-run { color: var(--sp-warn); border: 1px solid var(--sp-warn); }
.sp-now .sp-act { font-size: clamp(20px, 1.6vw, 25px); }
.sp-nowinh { margin-top: 10px; }
.sp-nowin { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; font: 500 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sp-nowin li { display: grid; grid-template-columns: minmax(0, 8.5em) 1fr 2.6em; gap: 8px; align-items: center; }
.sp-nowin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sp-soft); }
.sp-nowin i { height: 6px; border-radius: 3px; background: var(--sp-track); overflow: hidden; }
.sp-nowin b { display: block; height: 100%; background: var(--sp-t-perception); border-radius: 3px; transition: width .9s ease; }
.sp-nowin em { font-style: normal; text-align: right; color: var(--sp-faint); }
.sp-now .sp-trailh { margin-top: 10px; }
/* the HUD panels in the column: the same five, in the site's theme */
.sp-hud.sp-hud--side { position: static; display: grid; grid-template-columns: 1fr 1fr; height: auto; gap: 8px; color: var(--sp-text); }
.sp-hud--side .sp-hudp { background: var(--sp-panel); border-color: var(--sp-edge); border-radius: 14px; padding: 9px 11px; }
.sp-hud--side .sp-hudp:nth-child(1), .sp-hud--side .sp-hudp:nth-child(2), .sp-hud--side .sp-hudp:nth-child(4) { grid-column: 1 / -1; }
.sp-hud--side .sp-hudp h4 { color: var(--sp-faint); }
.sp-hud--side .sp-hudlog time, .sp-hud--side .sp-hudbar em, .sp-hud--side .sp-hudsub, .sp-hud--side .sp-hudradar text { color: var(--sp-faint); fill: var(--sp-faint); }
.sp-hud--side .sp-hudlog .sp-hok span { color: var(--sp-ok); } .sp-hud--side .sp-hudlog .sp-hbad span { color: var(--sp-bad); }
.sp-hud--side .sp-hudlog .sp-hrun span { color: var(--sp-warn); } .sp-hud--side .sp-hudlog .sp-hmid span { color: var(--sp-soft); }
.sp-hud--side .sp-hudbar i { background: var(--sp-track); }
.sp-hud--side .sp-hudradar, .sp-hud--side .sp-hudgauge { height: 110px; }
.sp-hud--side .sp-hudgrid { stroke: var(--sp-edge); }
.sp-hud--side .sp-hudheat span { color: var(--sp-faint); }
.sp-hud--side .sp-hudnum { fill: var(--sp-text); }
.sp-hud--side .sp-hudarc { stroke: var(--sp-track); }
/* the deep detail, folded */
.sp-deep > summary { cursor: pointer; font: 600 14px var(--font-body); color: var(--sp-text); }
.sp-deep .sp-sub { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sp-edge); }
.sp-deep .sp-line { font-size: 16px; }
/* the timeline: an event strip over two sparklines, the learned ticker one quiet line */
.sp-timeline { padding: 7px 12px 8px; }
.sp-tl-wrap { height: 44px; }
.sp-tk-hurt { background: var(--sp-warn); } .sp-tk-quest { background: var(--sp-t-place); } .sp-tk-ok { background: var(--sp-ok); }
.sp-ticker { margin-top: 4px; font-size: 12px; }
.sp-tickrun { color: var(--sp-soft); }
/* the explainer: two lines and a disclosure */
.sp-about { padding: 10px 14px; }
.sp-intro { font-size: 14px; }
.sp-howto summary { cursor: pointer; font-weight: 600; color: var(--sp-silk); font-size: 14px; }
.sp-howto ul { margin: 8px 0 2px; padding-left: 18px; color: var(--sp-soft); font-size: 14px; max-width: 80ch; display: grid; gap: 4px; }
.sp-howto a { color: var(--sp-silk); font-weight: 600; }
@media (max-width: 1099px) {
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp, :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp.sp--player { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "head" "stage" "card" "time" "about"; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp-stage { height: min(72vh, 680px); }
}
@media (max-width: 640px) {
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp { padding-left: 10px; padding-right: 10px; }
  .sp-head { gap: 6px 8px; }
  .sp-stamp { flex-basis: 100%; order: 3; font-size: 13px; }
  .sp-tools { margin-left: 0; flex-basis: 100%; order: 4; justify-content: space-between; }
  .sp-search.sp-open input { width: 140px; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp-stage { height: 62vh; }
  .sp-hud.sp-hud--side { grid-template-columns: 1fr; }
  .sp-hud--side .sp-hudp { grid-column: 1 / -1; }
  .sp-tl-keys { display: none; }
  .sp-filters { display: none; }
}
/* the kind filters: a quiet row at the top left of the graph, full only on hover */
:root:not(.sp-stream):not(.sp-mini) .sp-filters { top: 10px; bottom: auto; left: 10px; max-width: calc(100% - 150px); opacity: .5; transition: opacity .2s; }
:root:not(.sp-stream):not(.sp-mini) .sp-stage:hover .sp-filters, :root:not(.sp-stream):not(.sp-mini) .sp-filters:focus-within { opacity: 1; }
.sp-about .sp-howto > summary { font: 600 14px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--sp-silk); }
.sp-keys { display: none; }
/* tablets, small laptops, short panes (600–1100 px, and phones): the graph keeps a sane height, the timeline follows it
   in normal flow (never sticky over the graph), then the column */
@media (max-width: 1099px) {
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp, :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp.sp--player {
    grid-template-areas: "head" "stage" "time" "card" "about"; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp-stage { height: max(60vh, 380px); max-height: 760px; min-height: 380px; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp-timeline { position: static; margin: 0; border-radius: 16px; box-shadow: none; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp-hud.sp-hud--side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp-stage { height: max(58vh, 340px); min-height: 340px; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-fullmode) .sp-hud.sp-hud--side { grid-template-columns: 1fr; }
}
/* ---- her hotbar and bag (the HUD's sixth panel), and the tool chain in the Now card (2026-10-11) */
.sp-hud.sp-hud6:not(.sp-hud--side) { grid-template-columns: 1.35fr 1fr .8fr 1.05fr .7fr 1.25fr; }
.sp-hud--side .sp-hudp:nth-child(6) { grid-column: 1 / -1; }
.sp-hudinv { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; margin-bottom: 3px; }
.sp-hudinv span { min-height: 1.6em; padding: 2px 0; border-radius: 3px; text-align: center; font-size: .78em; overflow: hidden; white-space: nowrap;
  background: rgba(169, 155, 255, .1); color: #D8D2F0; }
.sp-hudinv span:empty { background: rgba(255, 255, 255, .04); }
.sp-hudhb span { background: rgba(169, 155, 255, .18); }
.sp-hudinv span.sp-hsel { outline: 1.5px solid #F7B4D2; color: #F7B4D2; }
.sp-hudinv span.sp-hjunk { opacity: .45; }
.sp-hud--side .sp-hudinv span { color: var(--sp-text); background: var(--sp-track); }
.sp-hud--side .sp-hudinv span.sp-hsel { outline-color: var(--sp-silk); color: var(--sp-silk); }
.sp-nowtool { margin: 6px 0 0; font: 600 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sp-soft); }
.sp-tc-tool { color: #C7701A; } .sp-tc-skill { color: var(--sp-t-item); } .sp-tc-target { color: var(--sp-t-rule); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp-tc-tool { color: #FFB86B; } }
:root[data-theme="dark"] .sp-tc-tool { color: #FFB86B; }
.sp-stream .sp-hudinv span { font-size: .72em; padding: 0; min-height: 1.35em; }
.sp-3dhb { position: absolute; left: 0; top: 0; display: flex; gap: 2px; pointer-events: none; }
.sp-3dhb span { width: 34px; height: 22px; border-radius: 4px; background: rgba(18, 15, 38, .86); border: 1px solid rgba(169, 155, 255, .35);
  font: 600 8.5px/20px ui-monospace, Menlo, monospace; color: #D8D2F0; text-align: center; overflow: hidden; white-space: nowrap; }
.sp-3dhb span.sp-hsel { border: 2px solid #F7B4D2; color: #F7B4D2; }
.sp-3dhb.sp-off { display: none; }
/* a <canvas> is a replaced element: height:auto takes its pixel size, not top+bottom — give it the height outright */
.sp-hashud.sp-stream .sp-canvas { bottom: auto; height: calc(100% - 19vh - 1.8vh); }
.sp-hashud.sp-fullmode .sp-canvas { bottom: auto; height: calc(100% - 168px); }
@media (max-width: 760px) { .sp-hashud.sp-fullmode .sp-canvas { height: calc(100% - 150px); } }
/* ---- why this? (env and senses → her choice; leave-one-out on her learned model) */
.sp-why { margin-top: 10px; }
.sp-whyrule { text-transform: none; letter-spacing: 0; font: 600 11px ui-monospace, Menlo, monospace; color: var(--sp-warn); margin-left: 6px; }
.sp-whybars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 500 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sp-whybars li { display: grid; grid-template-columns: minmax(0, 8.5em) 1fr 3.2em; gap: 8px; align-items: center; }
.sp-whybars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sp-soft); }
.sp-whybars .sp-wk-env { color: var(--sp-t-place); }
.sp-whybars i { position: relative; height: 7px; border-radius: 3px; background: var(--sp-track); }
.sp-whybars i::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--sp-edge); }
.sp-whybars b { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: width .6s ease; }
.sp-wpos b { background: var(--sp-silk); } .sp-wneg b { background: var(--sp-t-rule); }
.sp-whybars em { font-style: normal; text-align: right; color: var(--sp-faint); }
.sp-whysimh { margin-top: 8px; }
.sp-whysim { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sp-simb { width: 100%; text-align: left; border: 1px solid var(--sp-edge); background: transparent; border-radius: 8px; padding: 4px 7px;
  font: 500 12px/1.35 var(--font-body); color: var(--sp-text); cursor: pointer; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-simb:disabled { cursor: default; opacity: .75; }
.sp-simb time { color: var(--sp-faint); font: 11px ui-monospace, Menlo, monospace; }
.sp-simb .sp-k-success, .sp-simb .sp-k-progress { color: var(--sp-ok); } .sp-simb .sp-k-fail, .sp-simb .sp-k-death { color: var(--sp-bad); }
/* nothing in the column may widen the page (a phone): long lines ellipsize instead */
.sp-card > *, .sp-now > *, .sp-why, .sp-whysim, .sp-whysim li, .sp-hudslot, .sp-hud--side .sp-hudp { min-width: 0; max-width: 100%; }
.sp-whysim { grid-template-columns: minmax(0, 1fr); }
.sp-simb { max-width: 100%; }
/* ---- icons (vanilla textures, tools/icons.py): pixel-crisp everywhere */
.sp-hudinv span.sp-hicon, .sp-hlogicon, .sp-3dring .sp-rs { image-rendering: pixelated; background-repeat: no-repeat; }
.sp-hudinv span.sp-hicon { background-size: auto; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; text-align: right; font-weight: 700;
  width: 100%; min-height: 20px; background-origin: content-box; }
.sp-hlogicon { display: inline-block; width: 12px; height: 12px; flex: none; margin-top: 1px; font-style: normal; font-size: 10px; line-height: 12px; }
.sp-3dring { position: absolute; left: 0; top: 0; pointer-events: none; }
.sp-3dring.sp-off { display: none; }
.sp-3dring .sp-rs { position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: 5px; background-color: rgba(18, 15, 38, .88);
  border: 1px solid rgba(169, 155, 255, .4); font: 700 8px/1 ui-monospace, Menlo, monospace; color: #fff; display: flex; align-items: flex-end;
  justify-content: flex-end; padding: 1px; text-shadow: 0 0 2px #000; background-origin: border-box; }
.sp-3dring .sp-rs.sp-hsel { border: 2px solid #F7B4D2; box-shadow: 0 0 10px rgba(247, 180, 210, .7); }
.sp-3dring .sp-rs.sp-arm { opacity: .85; }
.sp-bagchip { position: absolute; left: 0; top: 0; z-index: 7; border: 1px solid var(--sp-stage-edge); background: var(--sp-stage-panel); color: var(--sp-stage-text);
  border-radius: 999px; font: 600 10.5px/1 ui-monospace, Menlo, monospace; padding: 4px 8px; cursor: pointer; opacity: .75; }
.sp-bagchip[aria-pressed="true"] { border-color: #F7B4D2; color: #F7B4D2; opacity: 1; }
.sp-credit { margin: 8px 0 0; font-size: 11.5px; color: var(--sp-faint); }
/* Twitch only autoplays an embed of at least 400×300: the floating tile lays the player out at 534×300 and scales it
   down to the tile (--sp-fscale, set by spider-nav.js), so a small tile still plays (it was black at 260 px). */
.sp-float-body .sp-frame iframe { inset: auto; left: 0; top: 0; width: 534px; height: 300px; transform: scale(var(--sp-fscale, 1)); transform-origin: 0 0; }
.sp-slottip { position: absolute; left: 0; top: 0; z-index: 12; pointer-events: none; min-width: 180px; max-width: 240px; padding: 7px 9px; border-radius: 10px;
  background: var(--sp-stage-panel); color: var(--sp-stage-text); border: 1px solid var(--sp-stage-edge); font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); }
.sp-slottip b { display: block; font-family: var(--font-body); font-size: 13px; margin-bottom: 3px; }
.sp-slotst { margin-top: 4px; color: var(--sp-stage-faint); font-size: 11px; }
/* ---- who decides (the router's shadow): rules / teacher / student shares; the routes' colours */
.sp-who { margin-top: 10px; }
.sp-whomode { text-transform: none; letter-spacing: 0; font: 600 11px ui-monospace, Menlo, monospace; color: var(--sp-warn); margin-left: 6px; }
.sp-whobar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--sp-track); }
.sp-whobar i { display: block; height: 100%; width: 0; transition: width .8s ease; }
.sp-whobar .sp-wr { background: #F7B4D2; } .sp-whobar .sp-wt { background: #F4D060; } .sp-whobar .sp-ws { background: #7FE0D2; }
.sp-whotxt, .sp-whoroutes { margin: 5px 0 0; font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sp-soft); }
.sp-whobar[hidden] { display: none; }
.sp-hudwho { height: 5px; margin-top: 4px; }
.sp-stream .sp-hudwho { height: .6vh; }
/* ---- in hand: the held item, what it opens up now (p), what is missing, and who chose what */
.sp-inhand { margin-top: 10px; }
.sp-ihhead { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; }
.sp-ihicon { width: 24px; height: 24px; flex: none; image-rendering: pixelated; background-repeat: no-repeat; border-radius: 4px; background-color: var(--sp-track); }
.sp-ihposs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 500 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sp-ihposs li { display: grid; grid-template-columns: minmax(0, 10em) 1fr 2.6em; gap: 8px; align-items: center; min-width: 0; }
.sp-ihposs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sp-soft); }
.sp-ihposs i { height: 6px; border-radius: 3px; background: var(--sp-track); overflow: hidden; }
.sp-ihposs b { display: block; height: 100%; border-radius: 3px; transition: width .8s ease; }
.sp-ihposs em { font-style: normal; text-align: right; color: var(--sp-faint); }
.sp-ihposs li.sp-ihmiss { display: block; color: var(--sp-faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ihchose { margin: 6px 0 0; font: 500 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sp-soft); }
.sp-slotok { margin-top: 4px; color: #7FE0D2; font-size: 11.5px; }
.sp-3dinv { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
/* ---- the three node roles: a legend in the graph's corner (and on the stream) */
.sp-rolekey { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: flex; gap: 10px; padding: 4px 10px; border-radius: 999px;
  background: var(--sp-stage-panel); border: 1px solid var(--sp-stage-edge); color: var(--sp-stage-text); font: 600 11px/1.4 ui-monospace, Menlo, monospace;
  pointer-events: none; opacity: .85; }
.sp-rolekey span { display: inline-flex; align-items: center; gap: 4px; }
.sp-rolekey svg { width: 12px; height: 12px; }
.sp-rk-in { fill: none; stroke: #78DCF0; stroke-width: 1.6; } .sp-rk-kn { fill: #4FD1C1; } .sp-rk-ac { fill: #F7B4D2; }
.sp-hashud.sp-stream .sp-rolekey { bottom: calc(19vh + 2.6vh); right: 1.2vw; font-size: 1.4vh; }
.sp-mini .sp-rolekey { display: none; }
:root:not(.sp-stream) .sp--player .sp-rolekey { right: 10px; }
.sp-rolechip i { width: 9px; height: 9px; border-radius: 0; background: none !important; }
.sp-sh-in { border: 1.5px solid #78DCF0; border-radius: 50% !important; box-sizing: border-box; }
.sp-sh-kn { background: #4FD1C1 !important; border-radius: 50% !important; }
.sp-sh-ac { background: #F7B4D2 !important; transform: rotate(45deg) scale(.8); }
:root:not(.sp-stream) .sp-rolekey { left: 10px; right: auto; }
/* ---- calm phone mode (≤ 600 px, unless "Details"): a "?" for the legend, smaller chrome, the teacher as a chip */
.sp-rolehelp { display: none; }
.sp-tchip { position: absolute; left: 10px; bottom: 44px; z-index: 6; max-width: calc(100% - 20px); border: 1.5px solid #FFC83D; background: rgba(40, 24, 0, .85);
  color: #FFC83D; border-radius: 999px; padding: 3px 10px; font: 700 11px/1.3 ui-monospace, Menlo, monospace; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tchip.sp-open { white-space: normal; border-radius: 10px; }
@media (max-width: 600px) {
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-rolekey { display: none; left: 10px; bottom: 44px; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-rolekey.sp-open { display: flex; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-rolehelp { display: block; position: absolute; left: 10px; bottom: 10px; z-index: 6;
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--sp-stage-edge); background: var(--sp-stage-panel); color: var(--sp-stage-text);
    font: 700 13px/1 var(--font-body); padding: 0; opacity: .8; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-rolehelp ~ .sp-tchip { left: 42px; bottom: 10px; max-width: calc(100% - 100px); }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-zoom button, :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-fsicon { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-zoom { gap: 4px; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-fsicon { right: 46px; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-float-tab { font-size: 11px; padding: 3px 7px; bottom: 44px; }
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-hint { display: none; }
}
@media (max-width: 600px) {
  :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-3dreg, :root:not(.sp-stream):not(.sp-mini):not(.sp-details) .sp-seclab { display: none !important; }
}
.sp .sp-tchip { color: #FFC83D; }