:root {
      color-scheme: dark;
      --bg: #07080b;
      --surface: rgba(11, 13, 17, 0.88);
      --surface-strong: rgba(14, 16, 21, 0.94);
      --ink: #e8e7e3;
      --muted: #8b887d;
      --faint: #5a584f;
      --line: rgba(232, 231, 227, 0.12);
      --core: #72e68d;
      --workspaces: #d6a84a;
      --decisions: #a77cf0;
      --sessions: #6fd6df;
      --skills: #e177ad;
      --stale: #8b8d91;
      --missing: #e87155;
      --panel-radius: 24px;
      --ease: cubic-bezier(.22,.61,.36,1);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      min-height: 100%;
      overflow: hidden;
      background:
        radial-gradient(circle at 51% 44%, rgba(90, 126, 116, 0.10), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(111, 214, 223, 0.10), transparent 30%),
        radial-gradient(circle at 19% 71%, rgba(214, 168, 74, 0.09), transparent 28%),
        var(--bg);
      color: var(--ink);
      font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    a { color: inherit; }
    button { font: inherit; }

    .shell {
      position: relative;
      isolation: isolate;
      min-height: 100vh;
      width: 100vw;
      overflow: hidden;
    }

    .star-raster,
    .vignette {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .star-raster {
      opacity: 0.58;
      background-image:
        radial-gradient(circle, rgba(232, 231, 227, 0.34) 0 0.8px, transparent 1px),
        radial-gradient(circle, rgba(111, 214, 223, 0.20) 0 0.7px, transparent 1px);
      background-size: 74px 74px, 128px 128px;
      background-position: 12px 19px, 56px 31px;
      -webkit-mask-image: radial-gradient(ellipse at center, black 0%, black 44%, transparent 80%);
      mask-image: radial-gradient(ellipse at center, black 0%, black 44%, transparent 80%);
    }

    .vignette {
      z-index: 4;
      background:
        linear-gradient(90deg, rgba(7, 8, 11, 0.94), transparent 22%, transparent 76%, rgba(7, 8, 11, 0.96)),
        linear-gradient(180deg, rgba(7, 8, 11, 0.82), transparent 18%, transparent 78%, rgba(7, 8, 11, 0.90));
    }

    header {
      position: absolute;
      z-index: 30;
      top: clamp(22px, 5vw, 44px);
      left: clamp(20px, 5vw, 44px);
      right: clamp(20px, 5vw, 44px);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      pointer-events: none;
    }

    .header-copy { max-width: min(620px, 58vw); }

    .eyebrow,
    .caption,
    .mono {
      font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .eyebrow {
      margin: 0 0 10px;
      color: var(--sessions);
      font-size: 12px;
      opacity: .86;
    }

    h1 {
      margin: 0;
      max-width: 560px;
      font-size: clamp(36px, 4.6vw, 58px);
      line-height: .94;
      letter-spacing: -0.04em;
      font-weight: 500;
      text-wrap: balance;
    }

    .subline {
      margin: 14px 0 0;
      max-width: 480px;
      color: rgba(232, 231, 227, 0.68);
      font-size: clamp(14px, 1.4vw, 16px);
      line-height: 1.45;
      text-wrap: pretty;
    }

    .map-wrap {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    svg#memoryMap {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    #world,
    .node {
      transform-box: fill-box;
      transform-origin: center;
      will-change: transform;
    }

    .edge-path {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: .16;
      transition: opacity .2s var(--ease);
    }

    #highlightEdges {
      fill: none;
      stroke: rgba(232, 231, 227, 0.92);
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      pointer-events: none;
      transition: opacity .16s var(--ease);
    }

    .node { cursor: pointer; }
    .node .halo { opacity: .35; }
    .node .orb { opacity: .92; }
    .node .core { opacity: .9; }
    .node.is-muted { opacity: .18; }
    .node.is-active .halo { opacity: .88; }
    .node.is-neighbor .halo { opacity: .62; }
    .node:focus { outline: none; }

    .panel {
      position: absolute;
      z-index: 12;
      border: 1px solid rgba(232, 231, 227, 0.10);
      background: var(--surface);
      backdrop-filter: blur(22px);
      border-radius: var(--panel-radius);
      box-shadow: 0 28px 120px rgba(0, 0, 0, .38);
    }

    .legend {
      left: clamp(18px, 4vw, 44px);
      bottom: clamp(78px, 12vh, 120px);
      width: 232px;
      padding: 18px;
      border-color: rgba(232, 231, 227, 0.07);
      background: rgba(11, 13, 17, 0.48);
      box-shadow: 0 24px 95px rgba(0, 0, 0, .24);
    }

    .signals {
      right: clamp(18px, 4vw, 44px);
      top: min(33vh, 314px);
      width: 304px;
      padding: 18px;
      border-color: rgba(232, 231, 227, 0.07);
      background: rgba(11, 13, 17, 0.48);
      box-shadow: 0 24px 95px rgba(0, 0, 0, .24);
    }

    .caption {
      margin: 0 0 14px;
      color: rgba(232, 231, 227, 0.56);
      font-size: 11px;
    }

    .legend-list,
    .signal-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 8px;
    }

    .legend-item,
    .signal-item {
      display: grid;
      grid-template-columns: 12px 1fr auto;
      align-items: center;
      gap: 10px;
      min-height: 34px;
      border-radius: 14px;
      padding: 7px 8px;
      color: rgba(232, 231, 227, 0.72);
      transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
    }

    .legend-item { cursor: default; }
    .legend-item:hover,
    .legend-item:focus-visible,
    .legend-item.is-active {
      background: rgba(232, 231, 227, 0.055);
      color: var(--ink);
      transform: translateX(2px);
      outline: none;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 99px;
      box-shadow: 0 0 18px currentColor;
      background: currentColor;
    }

    .legend-name { font-size: 14px; }
    .legend-count { color: var(--faint); font-size: 12px; }

    .signal-item {
      grid-template-columns: 10px 1fr;
      align-items: start;
      min-height: 48px;
      padding: 8px;
      text-decoration: none;
    }

    .signal-item:hover,
    .signal-item:focus-visible {
      background: rgba(232, 231, 227, 0.055);
      outline: none;
    }

    .signal-path {
      display: block;
      color: rgba(232, 231, 227, 0.78);
      font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      line-height: 1.25;
      word-break: break-word;
    }

    .signal-time {
      display: block;
      margin-top: 4px;
      color: var(--faint);
      font-size: 12px;
    }

    footer {
      position: absolute;
      z-index: 25;
      left: clamp(18px, 4vw, 44px);
      right: clamp(18px, 4vw, 44px);
      bottom: clamp(18px, 3vw, 40px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      color: rgba(232, 231, 227, 0.58);
      font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      letter-spacing: .02em;
      pointer-events: none;
    }

    .live {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .live::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 99px;
      background: var(--core);
      box-shadow: 0 0 18px var(--core);
    }

    .tooltip {
      position: absolute;
      z-index: 40;
      min-width: 250px;
      max-width: 310px;
      padding: 14px 15px;
      border: 1px solid rgba(232, 231, 227, 0.14);
      border-radius: 18px;
      background: var(--surface-strong);
      backdrop-filter: blur(20px);
      box-shadow: 0 24px 90px rgba(0, 0, 0, .48);
      pointer-events: none;
      opacity: 0;
      transform: translate3d(-999px, -999px, 0) scale(.98);
      transition: opacity .14s var(--ease), transform .14s var(--ease);
    }

    .tooltip.is-visible { opacity: 1; }
    .tooltip .type {
      margin-bottom: 8px;
      color: var(--muted);
      font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .tooltip .name {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.2;
      font-weight: 500;
    }
    .tooltip .meta,
    .tooltip .path {
      margin: 0;
      color: rgba(232, 231, 227, 0.62);
      font-size: 12px;
      line-height: 1.45;
    }
    .tooltip .path {
      margin-top: 8px;
      color: rgba(232, 231, 227, 0.46);
      font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      word-break: break-word;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 1000px) {
      .signals { width: 270px; }
      .legend { width: 210px; }
      h1 { max-width: 430px; }
      .subline { max-width: 410px; }
    }

    @media (max-height: 640px) and (min-width: 821px) {
      header { top: 24px; }
      h1 { font-size: clamp(30px, 3.5vw, 44px); }
      .subline { display: none; }
      .legend {
        bottom: clamp(76px, 12vh, 90px);
        padding: 14px;
      }
      .legend-list { gap: 4px; }
      .legend-item {
        min-height: 26px;
        padding: 4px 7px;
      }
      .caption { margin-bottom: 8px; }
    }

    @media (max-width: 820px) {
      body { overflow: hidden; }
      header { display: block; }
      .legend,
      .signals { display: none; }
      .vignette {
        background:
          linear-gradient(180deg, rgba(7, 8, 11, 0.92), transparent 32%, transparent 72%, rgba(7, 8, 11, 0.94)),
          radial-gradient(ellipse at center, transparent 26%, rgba(7, 8, 11, 0.72) 100%);
      }
      footer {
        display: grid;
        align-items: start;
        justify-content: start;
        gap: 8px;
        font-size: 11px;
      }
      .tooltip { max-width: min(310px, calc(100vw - 32px)); }
    }

    @media (max-width: 480px) {
      .subline { display: none; }
      h1 { font-size: clamp(40px, 16vw, 66px); }
      .open-map { min-height: 42px; padding: 0 15px; }
      .star-raster { opacity: .35; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
      }
    }