:root {
  /* Page roles, all taken from the house brand tokens in brand-tokens.css (gold web palette). */
  --void: var(--md-sys-color-background);
  --field: var(--md-sys-color-surface-container-low);
  --surface: var(--md-sys-color-surface-container-high);
  --bone: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --rule: var(--md-sys-color-outline-variant);
  --actual: var(--md-sys-color-primary);      /* the committed figure's "actual" sectors */
  --possible: var(--md-sys-color-secondary);  /* the committed figure's "possible" sectors */
  --poison: var(--md-sys-color-error);
  --evidence: var(--md-sys-color-tertiary);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--void); color:var(--bone); font:var(--m3-type-body-large); }
code { font-family:var(--font-mono); font-size:.88em; overflow-wrap:anywhere; }
.nav-head { padding:28px 24px 8px; max-width:1480px; margin:0 auto; }
.nav-eyebrow { margin:0; color:var(--muted); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.nav-head h1 { margin:.2em 0 .1em; font:var(--m3-type-headline-large); }
.nav-lede { margin:.2em 0; color:var(--muted); max-width:62ch; }
.nav-counts { margin:.6em 0 0; font-size:.875rem; color:var(--muted); }
.nav-grid { display:grid; gap:20px; padding:12px 24px 24px; max-width:1480px; margin:0 auto;
  grid-template-columns:minmax(300px,1.05fr) minmax(320px,1.15fr) minmax(280px,.9fr); align-items:start; }
@media (max-width:1100px) { .nav-grid { grid-template-columns:1fr 1fr; } .nav-detail { grid-column:1 / -1; } }
@media (max-width:720px) { .nav-grid { grid-template-columns:1fr; padding:8px 16px 20px; } .nav-head { padding:20px 16px 4px; } }
.nav-grid > section, .nav-grid > aside { background:var(--field); border:1px solid var(--rule); border-radius:14px; padding:16px; min-width:0; }
.nav-h2 { margin:0 0 10px; font:var(--m3-type-label-large); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.nav-outline { max-height:78vh; overflow:auto; }
#sphere { width:100%; height:auto; display:block; }
.sph-plane-outline { fill:none; stroke:var(--rule); stroke-width:1.5; }
.sph-plane-axis, .sph-axis-guide { stroke:var(--rule); stroke-width:1; stroke-dasharray:4 5; }
.sph-axis { stroke:var(--muted); stroke-width:2; }
.sph-path { fill:none; stroke:var(--possible); stroke-width:1.5; opacity:.55; }
.sph-path--back { opacity:.18; stroke-dasharray:3 5; }
.sph-level { cursor:pointer; outline:none; }
.sph-level text { fill:var(--bone); font:600 15px var(--font-sans); pointer-events:none; }
.sph-level .sph-sub { fill:var(--muted); font:500 13px var(--font-sans); }
.sph-sector path { stroke:var(--rule); stroke-width:1.2; transition:fill-opacity .15s; }
.sph-sector--possible path { fill:var(--possible); fill-opacity:.12; }
.sph-sector--actual path { fill:var(--actual); fill-opacity:.14; }
.sph-titan circle { fill:var(--field); stroke:var(--bone); stroke-width:2; }
.sph-titan > text:first-of-type { font:400 34px Georgia,serif; }
.sph-titan-label { font:600 14px var(--font-sans) !important; }
.sph-level:hover path, .sph-level:focus-visible path { fill-opacity:.3; }
.sph-level:hover circle, .sph-level:focus-visible circle { stroke:var(--possible); stroke-width:3; }
.sph-level:focus-visible { outline:none; }
.sph-level:focus-visible path, .sph-level:focus-visible circle { stroke:var(--possible); stroke-width:3; }
.sph-level[data-selected="true"] path { fill-opacity:.42; stroke:var(--bone); stroke-width:2; }
.sph-level[data-selected="true"] circle { fill:var(--md-sys-color-primary-container); stroke:var(--actual); stroke-width:3.5; }
.sph-fence { fill:var(--muted); font:500 12px var(--font-mono); letter-spacing:.02em; }
.nav-note, .nav-muted { color:var(--muted); font-size:.85rem; margin:.6em 0 0; }
.apu-outline-embed__search input { width:100%; padding:9px 12px; margin:0 0 10px; border:1px solid var(--md-sys-color-outline); border-radius:10px;
  background:var(--void); color:var(--bone); font:inherit; }
.apu-outline-embed__search input:focus-visible { outline:var(--focus-ring-outline); outline-offset:var(--focus-ring-offset); }
.apu-outline-embed__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.apu-outline-embed__empty { color:var(--muted); font-size:.875rem; }
#detail h3 { margin:.1em 0 .4em; font:var(--m3-type-title-large); }
#detail blockquote { margin:.6em 0; padding:.2em 0 .2em .9em; border-left:3px solid var(--possible); }
#detail dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:.875rem; margin:.8em 0; }
#detail dt { color:var(--muted); } #detail dd { margin:0; overflow-wrap:anywhere; }
#detail a { color:var(--possible); }
.tag { display:inline-block; font-size:.75rem; padding:1px 8px; border-radius:999px; border:1px solid var(--rule); color:var(--muted); margin-right:6px; }
.tag--poison { color:var(--poison); border-color:var(--poison); } .tag--survivor { color:var(--evidence); border-color:var(--evidence); }
.tag--open { border-color:var(--possible); color:var(--possible); }
.nav-foot { max-width:1480px; margin:0 auto; padding:0 24px 32px; color:var(--muted); font-size:.85rem; }
@media (prefers-reduced-motion: reduce) { .sph-sector path { transition:none; } }
.sph-short { display:none; }
@media (max-width:720px) {
  .sph-sub, .sph-long, .sph-fence { display:none; }
  .sph-level .sph-short { display:inline; font:600 36px var(--font-sans); fill:var(--bone); }
  .sph-sector text { font-size:32px; }
  .sph-titan > text:first-of-type { font-size:46px; }
}
.tag--v1 { border-color:var(--actual); color:var(--actual); }