@layer reset, base, shell, components, views, ported, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
  button, input, select { font: inherit; }
  button { color: inherit; }
  img, svg { display: block; max-width: 100%; }
}

@layer base {
  :root {
    --ink: #f4efe6;
    --muted: #a5adbd;
    --faint: #626b7e;
    --paper: #0c0e15;
    --panel: #131722;
    --panel-2: #1a2030;
    --line: rgba(182, 191, 218, .14);
    --line-strong: rgba(182, 191, 218, .3);
    --accent: #ffb454;
    --signal: #7899ff;
    --accent-ink: #1a1208;
    --mint: #82f5b2;
    --cyan: #6ee7e7;
    --amber: #f6c96b;
    --coral: #ff8e73;
    --violet: #bda7ff;
    --radius: 18px;
    --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --view-accent: #7899ff;
    --view-surface: #090e18;
    --view-panel: #0c1321;
    --view-border: rgba(120,153,255,.28);
    --view-soft: rgba(120,153,255,.07);
    --scroll-accent: var(--view-accent);
    --scroll-track: #070b13;
  }

  :root:is([data-view="museum"],[data-view="signals"]) { --view-accent:#7899ff; --view-surface:#090e18; --view-panel:#0c1321; --view-border:rgba(120,153,255,.28); --view-soft:rgba(120,153,255,.07); --scroll-track:#070b13; }
  :root[data-view="library"] { --view-accent:#f6c96b; --view-surface:#17150e; --view-panel:#201d14; --view-border:rgba(246,201,107,.28); --view-soft:rgba(246,201,107,.07); --scroll-track:#100e09; }
  :root[data-view="constellation"] { --view-accent:#82f5b2; --view-surface:#061510; --view-panel:#0a1d16; --view-border:rgba(130,245,178,.28); --view-soft:rgba(130,245,178,.065); --scroll-track:#010705; }
  :root[data-view="terminal"] { --view-accent:#39ff6e; --view-surface:#030904; --view-panel:#071209; --view-border:rgba(57,255,110,.25); --view-soft:rgba(57,255,110,.055); --scroll-track:#010402; }
  :root[data-view="evidence"] { --view-accent:#d49a53; --view-surface:#1b120a; --view-panel:#26190e; --view-border:rgba(212,154,83,.3); --view-soft:rgba(212,154,83,.07); --scroll-track:#120b06; }
  :root[data-view="favourites"] { --view-accent:#ffb454; --view-surface:#10111b; --view-panel:#171927; --view-border:rgba(255,180,84,.27); --view-soft:rgba(255,180,84,.065); --scroll-track:#0b0c13; }

  html, * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--scroll-accent) 48%,#485063) var(--scroll-track); }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: var(--scroll-track); }
  *::-webkit-scrollbar-thumb { background: color-mix(in srgb,var(--scroll-accent) 48%,#485063); border: 2px solid var(--scroll-track); border-radius: 999px; }
  *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb,var(--scroll-accent) 70%,#657086); }
  *::-webkit-scrollbar-corner { background: var(--scroll-track); }

  body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--ink);
    background:
      radial-gradient(circle at 82% -15%, rgba(88, 112, 218, .16), transparent 42rem),
      radial-gradient(circle at 18% 110%, rgba(186, 89, 34, .09), transparent 36rem),
      var(--paper);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
  }

  /* Native modal dialogs do not consistently stop scroll chaining in iOS
     browsers. app.js records the current page offset before applying this
     class, so the page beneath a reader stays visually and physically still. */
  body.document-dialog-open {
    position: fixed;
    top: var(--dialog-scroll-offset, 0);
    right: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  dialog { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  body::before {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    content: "";
    opacity: .065;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }

  a { color: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--view-accent,var(--accent));
    outline-offset: 3px;
  }

  .eyebrow {
    color: var(--accent);
    font: 700 .68rem/1.2 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    padding: .7rem 1rem;
    color: var(--accent-ink);
    background: var(--accent);
    border-radius: 2px;
    transform: translateY(-180%);
  }
  .skip-link:focus { transform: none; }
}

@layer shell {
  .boot-screen {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-content: center;
    justify-items: center;
    background: #090b11;
    transition: opacity .5s ease, visibility .5s ease;
  }
  .boot-screen.done { opacity: 0; visibility: hidden; }
  .boot-screen h1 { margin: .65rem 0 .5rem; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.055em; }
  .boot-screen > p:last-child { color: var(--muted); }
  .boot-mark { display: flex; gap: 7px; height: 42px; align-items: end; margin-bottom: 2rem; }
  .boot-mark span { width: 8px; height: 40%; background: var(--accent); animation: boot 1s ease-in-out infinite alternate; }
  .boot-mark span:nth-child(2) { height: 100%; animation-delay: -.35s; }
  .boot-mark span:nth-child(3) { height: 65%; background: var(--signal); animation-delay: -.65s; }
  @keyframes boot { to { height: 100%; filter: drop-shadow(0 0 8px rgba(255,180,84,.45)); } }

  .app-shell { min-height: 100vh; min-height: 100svh; }
  .app-shell:not([hidden]) { display: grid; grid-template-columns: 252px minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    width: 252px;
    flex-direction: column;
    padding: 28px 22px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(90deg, transparent 0 21px, rgba(120,153,255,.045) 21px 22px, transparent 22px),
      #090b12;
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 70px rgba(0,0,0,.16);
  }
  .brand { display: flex; align-items: center; gap: 13px; margin: 0 0 10px; text-decoration: none; }
  .brand-mark { width: 48px; height: 48px; flex: 0 0 auto; filter: drop-shadow(0 7px 18px rgba(120,153,255,.14)); }
  .brand-copy strong, .brand-copy b, .brand-copy em { display: block; }
  .brand-copy strong { color: #f7f0e4; font: 780 .78rem/1 var(--sans); letter-spacing: .1em; }
  .brand-copy b { margin-top: 3px; color: var(--accent); font: 780 .76rem/1 var(--sans); letter-spacing: .18em; }
  .brand-copy em { margin-top: 5px; color: #80899d; font: 600 .48rem/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
  .brand-edition { display: flex; align-items: center; justify-content: space-between; margin: 0 0 42px 61px; color: #535d71; font: 600 .44rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .brand-edition span { color: var(--accent); }
  .sidebar-project-links { display: none; }
  .nav-label { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0 5px 12px 12px; color: #5e687c; border-bottom: 1px solid var(--line); font: 700 .52rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
  .nav-label b { color: var(--signal); font-weight: 700; }
  .concept-nav { display: grid; }
  .nav-item {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) 14px;
    align-items: center;
    width: 100%;
    min-height: 61px;
    padding: 10px 5px 10px 12px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s;
  }
  .nav-item:hover { color: var(--ink); background: linear-gradient(90deg, rgba(120,153,255,.08), transparent 82%); border-left-color: rgba(120,153,255,.35); }
  .nav-item.active { color: var(--ink); background: linear-gradient(90deg, rgba(120,153,255,.16), rgba(120,153,255,.025) 72%, transparent); border-left-color: var(--signal); }
  .nav-index { color: #596379; font: 650 .54rem var(--mono); letter-spacing: .06em; }
  .nav-item.active .nav-index { color: var(--accent); }
  .nav-copy strong, .nav-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-copy strong { color: inherit; font-size: .76rem; font-weight: 680; }
  .nav-copy em { margin-top: 4px; color: #737e94; font: 500 .55rem var(--mono); font-style: normal; letter-spacing: .025em; }
  .nav-copy em b { color: var(--accent); font-weight: 800; }
  .nav-arrow { color: var(--accent); font-size: .65rem; opacity: 0; transform: translate(-4px,4px); transition: opacity .18s, transform .18s; }
  .nav-item:hover .nav-arrow, .nav-item.active .nav-arrow { opacity: 1; transform: none; }
  .sidebar-foot { margin-top: auto; padding: 16px 10px 4px; border-top: 1px solid var(--line); }
  .sidebar-foot p { margin-top: 8px; color: var(--faint); font: .64rem var(--mono); }
  .sidebar-foot strong { color: var(--muted); }
  .reading-meter { margin-bottom: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
  .reading-meter > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--faint); font: .54rem var(--mono); text-transform: uppercase; }
  .reading-meter > div strong { color: var(--accent); font-size: .58rem; }
  .reading-meter > i { display: block; height: 2px; margin: 8px 0 10px; overflow: hidden; background: rgba(120,153,255,.09); }
  .reading-meter > i b { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--signal),var(--accent)); transition: width .3s ease; }
  .reading-meter > button { padding: 0; color: #8996b2; background: none; border: 0; font: .53rem/1.4 var(--mono); text-align: left; cursor: pointer; }
  .reading-meter > button:hover { color: var(--accent); }
  .reading-meter > button:disabled { color: var(--faint); cursor: default; }
  .collection-pulse { color: var(--muted); font: .62rem var(--mono); }
  .collection-pulse span { display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--signal); box-shadow: 0 0 0 3px rgba(120,153,255,.1); transform: rotate(45deg); }

  .workspace { grid-column: 2; min-width: 0; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    min-height: 75px;
    align-items: center;
    gap: 18px;
    padding: 13px clamp(22px, 4vw, 64px);
    background: rgba(12, 14, 21, .86);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(22px);
  }
  .global-search {
    display: flex;
    width: min(580px, 55vw);
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: var(--faint);
    background: rgba(20, 24, 36, .82);
    border: 1px solid var(--line);
    border-radius: 3px;
  }
  .global-search > span { color: var(--view-accent); }
  .global-search:focus-within { border-color: color-mix(in srgb,var(--view-accent) 62%,transparent); box-shadow: 0 0 0 3px var(--view-soft); }
  .global-search input { width: 100%; padding: 10px 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: .82rem; }
  .global-search input::placeholder { color: var(--faint); }
  kbd { padding: 3px 6px; color: var(--faint); background: #07100e; border: 1px solid var(--line); border-radius: 5px; font: .6rem var(--mono); }
  .project-links { display: flex; align-items: center; gap: 5px; margin-left: auto; }
  .project-links a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 3px;
    font: 650 .57rem var(--mono);
    text-decoration: none;
    white-space: nowrap;
  }
  .project-links a:hover { color: var(--ink); background: rgba(120,153,255,.07); border-color: var(--line); }
  .project-links a span { display: grid; width: 24px; height: 24px; place-items: center; color: var(--accent); background: rgba(255,180,84,.08); border: 1px solid rgba(255,180,84,.18); font-size: .51rem; letter-spacing: .03em; }
  .project-links a:nth-child(2) span { color: var(--mint); background: rgba(130,245,178,.07); border-color: rgba(130,245,178,.16); }
  .project-links a:nth-child(3) span { color: var(--signal); background: rgba(120,153,255,.08); border-color: rgba(120,153,255,.18); }
  .project-links a.sponsor-link { color: var(--coral); }
  .project-links a.sponsor-link span { color: var(--coral); background: rgba(255,142,115,.09); border-color: rgba(255,142,115,.22); }
  .project-links a.sponsor-link:hover { color: var(--ink); background: rgba(255,142,115,.09); border-color: rgba(255,142,115,.28); }
  .top-actions { display: flex; align-items: center; gap: 8px; }
  .quiet-button, .sound-button, .mobile-menu {
    padding: 10px 13px;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 3px;
    font: 650 .62rem var(--mono);
    letter-spacing: .02em;
    cursor: pointer;
  }
  .quiet-button:hover, .sound-button:hover { color: var(--ink); border-color: var(--line-strong); }
  .site-fullscreen[hidden] { display: none; }
  .site-fullscreen[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  .sound-button { width: 38px; color: var(--accent); font-weight: 900; }
  .sound-button[aria-pressed="true"] { color: var(--faint); text-decoration: line-through; }
  .mobile-menu { display: none; }
  .mobile-menu-backdrop { display: none; }

  main { padding: clamp(24px, 3vw, 42px) clamp(22px, 4vw, 64px) 76px; }
  .site-footer { display: grid; grid-template-columns: minmax(100px, .25fr) minmax(0, 1fr); gap: 22px; margin: 0 clamp(22px,4vw,64px); padding: 24px 0 max(30px,env(safe-area-inset-bottom)); color: var(--faint); border-top: 1px solid var(--line); }
  .credit-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 28px; font: .64rem/1.55 var(--mono); }
  .credit-list a { color: var(--muted); text-underline-offset: 3px; }
  .credit-list a:hover { color: var(--accent); }
  .support-block { display: grid; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .support-copy { max-width: 74ch; color: var(--muted); font: .68rem/1.65 var(--mono); }
  .support-copy strong { color: var(--ink); font-weight: 650; }
  .support-actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); gap: 8px; }
  .support-action {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr);
    align-items: center;
    gap: 2px 11px;
    padding: 11px 13px;
    color: var(--muted);
    background: rgba(20,24,36,.42);
    border: 1px solid var(--line);
    border-radius: 3px;
    text-decoration: none;
  }
  .support-action span { grid-row: span 2; display: grid; width: 26px; height: 26px; place-items: center; color: var(--faint); background: rgba(182,191,218,.05); border: 1px solid var(--line); font-size: .7rem; }
  .support-action b { color: var(--ink); font: 650 .63rem var(--mono); letter-spacing: .01em; }
  .support-action em { color: var(--faint); font: .58rem/1.4 var(--mono); font-style: normal; }
  .support-action:hover { border-color: var(--line-strong); }
  .support-action.is-star:hover { border-color: rgba(255,180,84,.4); }
  .support-action.is-star span { color: var(--accent); background: rgba(255,180,84,.08); border-color: rgba(255,180,84,.2); }
  .support-action.is-sponsor:hover { border-color: rgba(255,142,115,.42); }
  .support-action.is-sponsor span { color: var(--coral); background: rgba(255,142,115,.09); border-color: rgba(255,142,115,.22); }
  .view-intro { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; padding-top: 17px; border-top: 1px solid var(--line); }
  .view-intro::before { position: absolute; top: -3px; left: 0; width: 38px; height: 5px; content: ""; background: linear-gradient(90deg,var(--accent) 0 45%,transparent 45% 55%,var(--signal) 55%); }
  /* The site names itself once, in the masthead h1. The heading here names the
     room being read, and stays small: the records are what the page is for. */
  .view-intro .view-mode { display: flex; align-items: center; gap: 10px; margin: 10px 0 11px; color: var(--signal); font: 500 clamp(.95rem, 1.6vw, 1.28rem)/1.25 var(--mono); letter-spacing: -.01em; }
  .view-intro .view-mode::before { flex: 0 0 auto; width: 22px; height: 1px; content: ""; background: currentColor; opacity: .55; }
  .view-intro > div:first-child > p:last-child { max-width: 680px; color: var(--muted); font-size: clamp(.82rem, 1.2vw, .98rem); line-height: 1.65; }
  .view-intro-tools { display: grid; flex: 0 0 auto; justify-items: stretch; gap: 12px; }
  .view-metric { min-width: 150px; padding-left: 20px; border-left: 1px solid var(--line-strong); }
  .view-metric span { display: block; color: var(--signal); font: 300 clamp(1.8rem, 3vw, 3rem) var(--mono); letter-spacing: -.07em; }
  .view-metric small { color: var(--faint); font: .61rem/1.45 var(--mono); text-transform: uppercase; }
  .view-fullscreen { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; color: var(--muted); background: rgba(20,24,36,.76); border: 1px solid var(--line); border-radius: 3px; font: 650 .58rem var(--mono); cursor: pointer; }
  .view-fullscreen:hover { color: var(--ink); border-color: var(--line-strong); }
  .view-fullscreen[hidden] { display: none; }
  .view-root { min-height: 600px; }

  main:fullscreen {
    width: 100%;
    height: 100dvh;
    overflow: auto;
    padding: clamp(18px,3vw,38px);
    background: var(--paper);
  }
  main:fullscreen .view-intro { margin-bottom: 18px; padding-top: 13px; }
  main:fullscreen .view-root { min-height: 0; }
  main:fullscreen .constellation-frame { height: calc(100dvh - 178px); min-height: 480px; }
  main:fullscreen .hacker-terminal { height: calc(100dvh - 178px); grid-template-rows: auto minmax(0,1fr) auto auto; }
  main:fullscreen .signal-observatory, main:fullscreen .investigation-shell { min-height: calc(100dvh - 178px); }
  /* The reading views simply take the whole viewport and scroll inside it. */
  main:fullscreen .museum-map, main:fullscreen .library-hall { min-height: 0; }
  main:fullscreen .favourites-view { min-height: calc(100dvh - 178px); }
  body.view-fullscreen-fallback-open { overflow: hidden; }
  main.view-fullscreen-fallback {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100%;
    height: 100dvh;
    overflow: auto;
    padding: clamp(18px,3vw,38px);
    background: var(--paper);
  }
  main.view-fullscreen-fallback .view-intro { margin-bottom: 18px; padding-top: 13px; }
  main.view-fullscreen-fallback .view-root, main.view-fullscreen-fallback .museum-map, main.view-fullscreen-fallback .library-hall { min-height: 0; }
  main.view-fullscreen-fallback .constellation-frame { height: calc(100dvh - 178px); min-height: 480px; }
  main.view-fullscreen-fallback .hacker-terminal { height: calc(100dvh - 178px); grid-template-rows: auto minmax(0,1fr) auto auto; }
  main.view-fullscreen-fallback .signal-observatory, main.view-fullscreen-fallback .investigation-shell, main.view-fullscreen-fallback .favourites-view { min-height: calc(100dvh - 178px); }
}

@layer components {
  .section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 34px 0 16px; }
  .section-head h2 { font-size: clamp(1rem, 2vw, 1.4rem); letter-spacing: -.025em; }
  .section-head p { color: var(--faint); font: .65rem var(--mono); }
  .control-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
  .year-pill, .filter-pill, .text-button {
    padding: 7px 11px;
    color: var(--muted);
    background: rgba(20, 24, 36, .78);
    border: 1px solid var(--line);
    border-radius: 3px;
    font: 650 .66rem var(--mono);
    cursor: pointer;
    transition: .18s ease;
  }
  .year-pill:hover, .filter-pill:hover, .text-button:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
  .year-pill.active, .filter-pill.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  .year-pill.preliminary { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(255,180,84,.45); }
  .year-pill.preliminary small { padding: 2px 4px; color: var(--accent); background: rgba(255,180,84,.1); border: 1px solid rgba(255,180,84,.25); border-radius: 2px; font-size: .42rem; letter-spacing: .08em; }
  .year-pill.preliminary.active small { color: var(--accent-ink); background: rgba(26,18,8,.12); border-color: rgba(26,18,8,.22); }
  .preliminary-notice { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 12px 15px; color: #d9deec; background: linear-gradient(90deg,rgba(255,180,84,.12),rgba(120,153,255,.08)); border: 1px solid rgba(255,180,84,.26); border-left: 3px solid var(--accent); font: .62rem/1.5 var(--mono); }
  .preliminary-notice b { flex: 0 0 auto; color: var(--accent); font-size: .57rem; letter-spacing: .08em; }
  .preliminary-notice + .room-marquee .room-number { font-size: clamp(3.2rem, 10vw, 8rem); }
  .preliminary-token { color: var(--accent); font-size: .5rem; letter-spacing: .06em; }
  .select-control {
    padding: 8px 34px 8px 11px;
    color: var(--ink);
    background: var(--panel) no-repeat right 10px center;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: .68rem var(--mono);
  }
  .artifact-card {
    position: relative;
    display: flex;
    min-height: 176px;
    flex-direction: column;
    overflow: hidden;
    padding: 18px;
    background: linear-gradient(145deg, rgba(17, 38, 32, .92), rgba(8, 20, 17, .92));
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .artifact-card::before { position: absolute; inset: 0 0 auto; height: 2px; content: ""; background: var(--card-color, var(--mint)); opacity: .45; }
  .artifact-card::after { position: absolute; right: -34px; bottom: -40px; width: 100px; height: 100px; content: ""; background: var(--card-color, var(--mint)); border-radius: 50%; opacity: .04; filter: blur(8px); }
  .artifact-card:hover { z-index: 2; border-color: color-mix(in srgb, var(--card-color, var(--mint)) 40%, transparent); transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0, 0, 0, .27); }
  .artifact-card.is-read { background: linear-gradient(145deg, rgba(17, 38, 32, .72), rgba(8, 20, 17, .76)); }
  .artifact-card.is-read::before { opacity: .18; }
  .card-read { position: absolute; right: 12px; bottom: 11px; z-index: 2; padding: 4px 6px; color: var(--accent-ink); background: var(--accent); border-radius: 2px; font: 800 .48rem var(--mono); text-transform: uppercase; }
  .card-favourite { position: absolute; right: 12px; bottom: 11px; z-index: 2; color: var(--accent); font-size: .95rem; text-shadow: 0 0 14px rgba(255,180,84,.5); }
  .artifact-card.is-read .card-favourite { bottom: 41px; }
  .artifact-card.is-read .card-foot { padding-right: 48px; }
  .artifact-card.is-favourite { border-color: rgba(255,180,84,.34); box-shadow: inset 0 0 0 1px rgba(255,180,84,.05); }
  .artifact-card .card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--faint); font: .6rem var(--mono); text-transform: uppercase; }
  .artifact-card h3 { margin: 19px 0 12px; font-size: .92rem; line-height: 1.28; letter-spacing: -.02em; }
  .artifact-card .card-summary { display: -webkit-box; overflow: hidden; margin: 0 0 16px; color: #91a0b8; font-size: .69rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
  .artifact-card .card-foot { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; color: var(--muted); font: .59rem var(--mono); }
  /* Status and the talk marker are ONE flex child, so the foot keeps the two-up
     layout it had before the marker existed. */
  .artifact-card .card-foot-meta { display: inline-flex; align-items: center; gap: 7px; }
  /* THE RECORDING MARK, one badge in every room the archive has. It was a bare
     ▶ set at half a rem in the room's own ink, which on a book spine read as a
     speck of dust and beside a card's status line as nothing at all: the fact
     was published in seven views and legible in none of them. It is a PLAY
     BADGE now — filled where the archive is certain the talk is this research,
     an outline where its best match is still a guess. That is the same
     distinction the record dialog draws in words, kept at a contrast a reader
     can actually see, so learning it once still reads anywhere. Each room sets
     `--record-color`, its size and, on a light surface, the ink the glyph is
     punched out in; none of them redefines what it means. */
  .record-video {
    --record-color: var(--cyan);
    --record-ink: #04191b;
    display: inline-flex;
    flex: 0 0 auto;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 1.72em;
    height: 1.72em;
    /* A triangle's optical centre is left of its bounding box. */
    padding-left: .1em;
    color: var(--record-ink);
    background: var(--record-color);
    border: 1px solid var(--record-color);
    border-radius: 50%;
    font-style: normal;
    line-height: 1;
  }
  .record-video.is-potential { color: var(--record-color); background: color-mix(in srgb, var(--record-color) 15%, transparent); border-style: dashed; }
  .artifact-card .card-video { font-size: .72rem; }
  .rank-token { color: var(--amber); }
  .status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; background: var(--mint); border-radius: 50%; }
  .status-dot.partial { background: var(--amber); }
  .status-dot.missing { background: var(--coral); }
  .topic-XSS { --card-color: #ff8e73; }
  .topic-HTTP { --card-color: #6ee7e7; }
  .topic-Identity { --card-color: #bda7ff; }
  .topic-Injection { --card-color: #f6c96b; }
  .topic-Browser { --card-color: #82f5b2; }
  .topic-Supply { --card-color: #ffb4d1; }
  .topic-Server { --card-color: #80adff; }
  .topic-Crypto { --card-color: #c7ee83; }
  .topic-AI { --card-color: #ff9f7a; }
  .topic-Other { --card-color: #93aaa2; }
  .empty-state { padding: 70px 20px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; }

  /* The record dialog and the report that opens on top of it share one palette.
     The report used to arrive in the contribution form's mint whatever room the
     reader was standing in, so a green form landed over an amber record and
     read as a different site's dialog. It takes the same tokens, and the same
     per-room values below. */
  :is(.artifact-dialog, .report-dialog) {
    --dialog-theme: #7899ff;
    --dialog-surface: #090e18;
    --dialog-panel: #0c1321;
    --dialog-border: rgba(120,153,255,.28);
    --dialog-soft: rgba(120,153,255,.065);
    --dialog-context-ink: #c0cae0;
    --dialog-muted: #9eacc5;
    --dialog-action: #7899ff;
    --dialog-action-ink: #07101d;
    --dialog-close-surface: rgba(6,11,21,.74);
    --scroll-accent: var(--dialog-theme);
    --scroll-track: var(--dialog-surface);
    width: min(820px, calc(100vw - 28px));
    max-height: min(820px, calc(100vh - 28px));
    overflow: auto;
    padding: 0;
    color: var(--ink);
    background: radial-gradient(circle at 5% 0,color-mix(in srgb,var(--dialog-theme) 15%,transparent),transparent 34%),var(--dialog-surface);
    border: 1px solid var(--dialog-border);
    border-radius: 20px;
    box-shadow: 0 40px 120px rgba(0,0,0,.72),0 0 50px color-mix(in srgb,var(--dialog-theme) 7%,transparent);
  }
  :is(.artifact-dialog, .report-dialog)::backdrop { background: rgba(3,7,14,.84); backdrop-filter: blur(8px); }
  :is(.artifact-dialog, .report-dialog):is([data-view="museum"],[data-view="signals"]) {
    --dialog-theme: #7899ff;
    --dialog-surface: #090e18;
    --dialog-panel: #0c1321;
    --dialog-border: rgba(120,153,255,.28);
    --dialog-soft: rgba(120,153,255,.065);
    --dialog-context-ink: #c0cae0;
    --dialog-muted: #9eacc5;
    --dialog-action: #7899ff;
    --dialog-action-ink: #07101d;
    --dialog-close-surface: rgba(6,11,21,.74);
  }
  :is(.artifact-dialog, .report-dialog)[data-view="library"] {
    --dialog-theme: #f6c96b;
    --dialog-surface: #17150e;
    --dialog-panel: #201d14;
    --dialog-border: rgba(246,201,107,.28);
    --dialog-soft: rgba(246,201,107,.06);
    --dialog-context-ink: #d4c9ad;
    --dialog-muted: #b4aa91;
    --dialog-action: #f6c96b;
    --dialog-action-ink: #241805;
    --dialog-close-surface: rgba(16,14,9,.76);
  }
  :is(.artifact-dialog, .report-dialog)[data-view="constellation"] {
    --dialog-theme: #82f5b2;
    --dialog-surface: #061510;
    --dialog-panel: #0a1d16;
    --dialog-border: rgba(130,245,178,.28);
    --dialog-soft: rgba(130,245,178,.055);
    --dialog-context-ink: #b5c8c0;
    --dialog-muted: #92aa9f;
    --dialog-action: #82f5b2;
    --dialog-action-ink: #041a10;
    --dialog-close-surface: rgba(4,12,10,.7);
  }
  :is(.artifact-dialog, .report-dialog)[data-view="terminal"] {
    --dialog-theme: #39ff6e;
    --dialog-surface: #030904;
    --dialog-panel: #071209;
    --dialog-border: rgba(57,255,110,.25);
    --dialog-soft: rgba(57,255,110,.045);
    --dialog-context-ink: #a8cdb2;
    --dialog-muted: #74a981;
    --dialog-action: #76ff9e;
    --dialog-action-ink: #031007;
    --dialog-close-surface: rgba(1,9,3,.78);
  }
  :is(.artifact-dialog, .report-dialog)[data-view="evidence"] {
    --dialog-theme: #d49a53;
    --dialog-surface: #1b120a;
    --dialog-panel: #26190e;
    --dialog-border: rgba(212,154,83,.3);
    --dialog-soft: rgba(212,154,83,.06);
    --dialog-context-ink: #d5c3a7;
    --dialog-muted: #ad9879;
    --dialog-action: #d9ac6e;
    --dialog-action-ink: #251506;
    --dialog-close-surface: rgba(18,10,5,.76);
  }
  :is(.artifact-dialog, .report-dialog)[data-view="favourites"] {
    --dialog-theme: #ffb454;
    --dialog-surface: #10111b;
    --dialog-panel: #171927;
    --dialog-border: rgba(255,180,84,.27);
    --dialog-soft: rgba(255,180,84,.055);
    --dialog-context-ink: #c9c4b9;
    --dialog-muted: #aaa7a0;
    --dialog-action: #ffb454;
    --dialog-action-ink: #211405;
    --dialog-close-surface: rgba(11,11,18,.76);
  }
  :is(.artifact-dialog, .report-dialog):is([data-view="library"],[data-view="evidence"])::backdrop { background: rgba(9,6,3,.84); }
  :is(.artifact-dialog, .report-dialog):is([data-view="constellation"],[data-view="terminal"])::backdrop { background: rgba(1,6,4,.84); }
  /* Long record and contribution dialogs scroll. Keep the close action within
     reach after the first screen, especially on touch devices without Escape. */
  .artifact-dialog > form:first-child, .contribute-dialog > form:first-child { position: sticky; top: 0; z-index: 5; height: 0; }
  .dialog-close { position: absolute; top: 17px; right: 17px; z-index: 2; width: 42px; height: 42px; color: var(--dialog-muted,var(--muted)); background: var(--dialog-close-surface,rgba(4,12,10,.6)); border: 1px solid var(--dialog-border,var(--line)); border-radius: 50%; font-size: 1.05rem; cursor: pointer; }
  .artifact-glow { height: 9px; background: linear-gradient(90deg, var(--dialog-color, var(--mint)), transparent 70%); }
  .dialog-body { position: relative; padding: clamp(30px, 5vw, 52px); }
  .dialog-body h2 { max-width: 680px; margin: 14px 0 20px; font-size: clamp(1.85rem, 4vw, 3.2rem); line-height: 1.04; letter-spacing: -.05em; }
  .artifact-badges { display: flex; flex-wrap: wrap; gap: 7px; }
  .artifact-badges span { padding: 6px 9px; color: var(--dialog-muted,var(--muted)); background: var(--dialog-soft,rgba(255,255,255,.03)); border: 1px solid var(--dialog-border,var(--line)); border-radius: 5px; font: .64rem var(--mono); }
  .artifact-context { margin: 26px 0; padding: 15px 18px; color: var(--dialog-context-ink,#b5c8c0); background: var(--dialog-soft,rgba(130,245,178,.045)); border-left: 2px solid var(--dialog-color, var(--mint)); font-size: .78rem; line-height: 1.65; }
  .artifact-digest { margin: 30px 0 24px; }
  .artifact-digest h3 { margin: 0 0 11px; color: var(--dialog-color, var(--mint)); font: 700 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .artifact-digest .artifact-summary { margin: 0 0 17px; color: var(--ink); font-size: .98rem; line-height: 1.68; }
  .digest-toggle { display: none; margin: -2px 0 14px; padding: 7px 9px; color: var(--dialog-color, var(--mint)); background: transparent; border: 1px solid color-mix(in srgb,var(--dialog-color, var(--mint)) 35%,transparent); border-radius: 3px; font: 650 .56rem var(--mono); cursor: pointer; }
  .artifact-digest .tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .artifact-digest .tag { display: inline-flex; min-height: 34px; align-items: center; gap: 3px; padding: 6px 11px; color: var(--dialog-muted,var(--faint)); font: .63rem var(--mono); background: var(--dialog-panel,var(--panel)); border: 1px solid var(--dialog-border,var(--line)); border-radius: 999px; cursor: pointer; touch-action: manipulation; transition: color .16s ease,background-color .16s ease,border-color .16s ease; }
  .artifact-digest .tag span { color: var(--dialog-color,var(--dialog-theme)); }
  .artifact-digest .tag:hover, .artifact-digest .tag:focus-visible { color: var(--dialog-color, var(--mint)); background: var(--dialog-soft); border-color: var(--dialog-color, var(--mint)); }
  .artifact-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 28px; background: var(--dialog-border,var(--line)); border: 1px solid var(--dialog-border,var(--line)); border-radius: 10px; }
  .artifact-facts div { min-width: 0; padding: 14px; background: var(--dialog-panel,var(--panel)); }
  /* The author is a fifth fact and only appears where the archive knows one, so
     it lands alone on a second row of four and leaves three cells of dead
     panel. Widening just that trailing cell keeps the grid flush either way. */
  .artifact-facts div:nth-child(5):last-child { grid-column: 1 / -1; }
  .artifact-facts dt { margin-bottom: 6px; color: var(--dialog-muted,var(--faint)); font: .6rem var(--mono); text-transform: uppercase; }
  .artifact-facts dd { overflow: hidden; color: var(--ink); font: .74rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
  .artifact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .artifact-actions a, .artifact-actions button { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 12px 15px; color: var(--dialog-action-ink,var(--accent-ink)); background: var(--dialog-action,var(--accent)); border: 1px solid var(--dialog-action,var(--accent)); border-radius: 4px; font: 750 .7rem var(--mono); text-decoration: none; cursor: pointer; }
  .artifact-actions .secondary { color: var(--ink); background: transparent; border-color: var(--dialog-border,var(--line-strong)); }
  .artifact-actions .secondary:hover { background: var(--dialog-soft,transparent); border-color: var(--dialog-theme,var(--line-strong)); }
  .artifact-actions .read-toggle[aria-pressed="true"] { color: var(--dialog-action-ink,var(--accent-ink)); background: var(--dialog-action,var(--accent)); border-color: var(--dialog-action,var(--accent)); }
  .artifact-actions .favourite-toggle[aria-pressed="true"] { color: #2b1b05; background: #ffb454; border-color: #ffb454; }
  .artifact-actions span.disabled { padding: 11px 14px; color: var(--faint); background: rgba(255,255,255,.025); border: 1px dashed var(--line); border-radius: 8px; font: .66rem var(--mono); }
  /* The talk leaves the site, so it reads as its own kind of action rather than
     another archive control: a tinted edge, never the accent fill that marks the
     preserved copy the reader can open here. */
  .artifact-actions .video-action { border-color: color-mix(in srgb,var(--cyan) 45%,var(--dialog-border,var(--line-strong))); }
  .artifact-actions .video-action:hover { background: color-mix(in srgb,var(--cyan) 12%,transparent); border-color: var(--cyan); }
  /* THE TALK, as one of the dialog's blocks. Same shape as the digest above it -
     an eyebrow over its content, on the same 30/24 rhythm - so it reads as part
     of the record rather than a bar wedged between the tags and the buttons.
     A compact card, not a 16:9 poster: the dialog is height-capped, and a full
     player box pushed every action below the fold. It becomes the player only
     once the reader presses play, which they asked for. */
  .artifact-talk { margin: 30px 0 24px; }
  .artifact-talk h3 { margin: 0 0 11px; color: var(--dialog-color, var(--mint)); font: 700 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .talk-card { display: flex; align-items: stretch; background: var(--dialog-panel,var(--panel)); border: 1px solid var(--dialog-border,var(--line)); border-radius: 12px; overflow: hidden; transition: border-color .16s ease; }
  .talk-card:hover { border-color: color-mix(in srgb,var(--dialog-color,var(--mint)) 45%,transparent); }
  .talk-play-action { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 13px 16px; color: var(--ink); background: transparent; border: 0; cursor: pointer; text-align: left; }
  .talk-play-action:hover { background: var(--dialog-soft,transparent); }
  .talk-play-action:focus-visible { outline: 2px solid var(--dialog-color,var(--mint)); outline-offset: -3px; }
  .talk-play { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding-left: 3px; color: var(--paper); background: var(--dialog-color, var(--mint)); border-radius: 50%; font-size: .88rem; transition: transform .16s ease; }
  .talk-play-action:hover .talk-play { transform: scale(1.07); }
  .talk-copy { display: grid; gap: 3px; min-width: 0; }
  .talk-copy b { font: 650 .9rem var(--sans); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .talk-copy small { color: var(--dialog-muted,var(--muted)); font: .66rem var(--mono); letter-spacing: .03em; }
  /* The new-tab route, attached to the thing it opens instead of repeated as a
     second button underneath it. */
  .talk-open { flex: none; display: grid; place-items: center; width: 48px; color: var(--dialog-muted,var(--faint)); background: transparent; border-left: 1px solid var(--dialog-border,var(--line)); text-decoration: none; font-size: .82rem; }
  .talk-open:hover, .talk-open:focus-visible { color: var(--dialog-color,var(--mint)); background: var(--dialog-soft,transparent); }
  .talk-note { margin: 9px 2px 0; color: var(--dialog-muted,var(--faint)); font: .62rem var(--mono); line-height: 1.5; opacity: .85; }
  .artifact-talk.is-playing .talk-card { background: #000; border-color: var(--dialog-border,var(--line)); }
  .artifact-talk iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

  /* A match the archive is not certain of. It keeps the play glyph but loses
     the confident edge and sits back in the row, so the eye reaches the real
     talk first. */
  .artifact-actions .video-action.is-potential { color: var(--muted); border-color: var(--dialog-border,var(--line)); border-style: dashed; }
  .artifact-actions .video-action.is-potential:hover { color: var(--ink); background: var(--dialog-soft,transparent); border-color: var(--line-strong); }
  .rights-note { margin-top: 27px; color: var(--dialog-muted,var(--faint)); font: .62rem/1.65 var(--mono); }
  .toast { position: fixed; right: 22px; bottom: 22px; z-index: 70; padding: 11px 14px; color: var(--accent-ink); background: var(--accent); border-radius: 3px; font: 700 .66rem var(--mono); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .22s ease; }
  .toast.show { opacity: 1; transform: none; }

  /* Submitting research reads as the archive's own action, so it takes the
     mint the site uses for its live, working parts rather than the amber of a
     link out. */
  /* The same action wears three shapes - a toolbar button, a menu tile and a
     footer card - so the launcher class carries only the colour, and each host
     keeps its own layout. */
  .quiet-button.contribute-launch { display: inline-flex; align-items: center; gap: 7px; color: var(--mint); border-color: rgba(130,245,178,.3); }
  .quiet-button.contribute-launch:hover { color: #041a10; background: var(--mint); border-color: var(--mint); }
  .quiet-button.contribute-launch b { font-weight: 650; }
  .support-action.is-contribute { text-align: left; font: inherit; background: transparent; cursor: pointer; }
  .support-action.is-contribute span { color: var(--mint); background: rgba(130,245,178,.08); border-color: rgba(130,245,178,.22); }
  .support-action.is-contribute:hover { border-color: rgba(130,245,178,.42); }

  .contribute-dialog {
    width: min(720px, calc(100vw - 28px));
    max-height: min(820px, calc(100vh - 28px));
    overflow: auto;
    padding: 0;
    color: var(--ink);
    background: #0b1815;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    box-shadow: 0 40px 120px rgba(0,0,0,.72);
  }
  .contribute-dialog::backdrop { background: rgba(1,6,5,.82); backdrop-filter: blur(8px); }
  .contribute-dialog .artifact-glow { background: linear-gradient(90deg, var(--mint), transparent 70%); }
  .contribute-dialog .dialog-body { padding: clamp(24px, 5vw, 44px); }
  .contribute-dialog h2 { margin: 10px 0 16px; font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
  .contribute-dialog .artifact-context { margin: 20px 0 24px; }
  .contribute-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
  .contribute-field { display: grid; gap: 6px; grid-column: 1 / -1; }
  .contribute-field.is-half { grid-column: auto; }
  .contribute-field > span { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 650 .58rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .contribute-field > span b { color: var(--mint); font: 650 .52rem var(--mono); letter-spacing: .08em; }
  .contribute-field small { color: var(--faint); font: .58rem/1.5 var(--mono); }
  .contribute-field input, .contribute-field select, .contribute-field textarea {
    width: 100%;
    padding: 10px 12px;
    color: var(--ink);
    background: rgba(20,24,36,.82);
    border: 1px solid var(--line);
    border-radius: 3px;
    font: .72rem/1.5 var(--mono);
  }
  .contribute-field textarea { resize: vertical; min-height: 68px; }
  .contribute-field input::placeholder, .contribute-field textarea::placeholder { color: var(--faint); }
  .contribute-field input:focus, .contribute-field select:focus, .contribute-field textarea:focus { border-color: rgba(130,245,178,.5); outline: 0; box-shadow: 0 0 0 3px rgba(130,245,178,.08); }

  /* The answer only this page can give: whether the source is already recorded.
     Each state carries its own colour so the verdict is readable before the
     sentence is. */
  .contribute-check { display: grid; gap: 8px; margin: 18px 0 22px; padding: 14px 16px; border: 1px solid var(--line); border-left-width: 2px; border-radius: 3px; }
  .contribute-check p { margin: 0; color: var(--muted); font: .66rem/1.6 var(--mono); }
  .contribute-check p b { color: var(--ink); font-weight: 650; }
  .contribute-check code { padding: 1px 4px; background: rgba(255,255,255,.05); border-radius: 3px; font-size: .95em; }
  .contribute-check small { color: var(--faint); }
  .contribute-check.is-loading { border-left-color: var(--line-strong); }
  .contribute-check.is-clear { background: rgba(130,245,178,.05); border-left-color: var(--mint); }
  .contribute-check.is-near { background: rgba(120,153,255,.05); border-left-color: var(--signal); }
  .contribute-check.is-match { background: rgba(255,180,84,.06); border-left-color: var(--accent); }
  .contribute-check.is-warning { background: rgba(255,142,115,.06); border-left-color: var(--coral); }
  .contribute-check button {
    display: grid;
    grid-template-columns: 62px minmax(0,1fr);
    gap: 2px 12px;
    width: 100%;
    padding: 9px 11px;
    color: var(--ink);
    background: rgba(4,12,10,.5);
    border: 1px solid var(--line);
    border-radius: 3px;
    text-align: left;
    cursor: pointer;
  }
  .contribute-check button:hover { border-color: var(--line-strong); }
  .contribute-check button span { grid-row: span 2; align-self: center; color: var(--faint); font: 700 .62rem var(--mono); }
  .contribute-check button b { overflow: hidden; font: 650 .68rem/1.4 var(--mono); text-overflow: ellipsis; }
  .contribute-check button em { color: var(--faint); font: .58rem var(--mono); font-style: normal; }
  .contribute-dialog .artifact-actions a, .contribute-dialog .artifact-actions button { color: #041a10; background: var(--mint); border-color: var(--mint); }
  .contribute-dialog .artifact-actions .secondary { color: var(--ink); background: transparent; border-color: var(--line-strong); }
  .contribute-note { margin: 18px 0 0; color: var(--faint); font: .6rem/1.7 var(--mono); }
  .contribute-routes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); font: .6rem var(--mono); }
  .contribute-routes b { color: var(--muted); font-weight: 650; }
  .contribute-routes a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
  .contribute-routes a:hover { color: var(--mint); }

  /* Reporting an inaccuracy borrows the contribution form's LAYOUT and none of
     its colour. Every rule below undoes a place .contribute-dialog names mint
     outright, replacing it with the room tokens declared at the top of this
     file - so the report reads as part of the record it opened from. */
  .report-dialog {
    background: radial-gradient(circle at 5% 0,color-mix(in srgb,var(--dialog-theme) 15%,transparent),transparent 34%),var(--dialog-surface);
    border: 1px solid var(--dialog-border);
    box-shadow: 0 40px 120px rgba(0,0,0,.72),0 0 50px color-mix(in srgb,var(--dialog-theme) 7%,transparent);
  }
  .report-dialog .artifact-glow { background: linear-gradient(90deg, var(--dialog-color, var(--dialog-theme)), transparent 70%); }
  .report-dialog .eyebrow { color: var(--dialog-color, var(--dialog-theme)); }
  .report-dialog .contribute-field > span { color: var(--dialog-muted); }
  .report-dialog .contribute-field > span b { color: var(--dialog-color, var(--dialog-theme)); }
  .report-dialog .contribute-field small { color: var(--dialog-muted); opacity: .8; }
  .report-dialog .contribute-field :is(input, select, textarea) { background: var(--dialog-panel); border-color: var(--dialog-border); }
  .report-dialog .contribute-field :is(input, select, textarea):focus {
    border-color: color-mix(in srgb,var(--dialog-theme) 55%,transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--dialog-theme) 12%,transparent);
  }
  .report-dialog .contribute-field input[readonly] { color: var(--dialog-context-ink); background: var(--dialog-soft); }
  .report-dialog .artifact-actions a, .report-dialog .artifact-actions button { color: var(--dialog-action-ink); background: var(--dialog-action); border-color: var(--dialog-action); }
  .report-dialog .artifact-actions .secondary { color: var(--ink); background: transparent; border-color: var(--dialog-border); }
  .report-dialog .artifact-actions .secondary:hover { border-color: var(--dialog-color, var(--dialog-theme)); }
  .report-dialog .contribute-note { color: var(--dialog-muted); opacity: .85; }

  :where(.reader-dialog, .pdf-dialog) {
    --document-accent: var(--view-accent, var(--signal));
    --document-surface: color-mix(in srgb,var(--document-accent) 5%,#070b13);
    --document-panel: color-mix(in srgb,var(--document-accent) 8%,#090d16);
    --document-line: color-mix(in srgb,var(--document-accent) 24%,transparent);
  }
  .reader-dialog {
    --scroll-accent: var(--document-accent);
    --scroll-track: var(--document-surface);
    width: min(1180px, calc(100vw - 24px));
    height: min(900px, calc(100vh - 24px));
    max-width: none;
    max-height: none;
    overflow: hidden;
    padding: 0;
    color: var(--ink);
    background: var(--document-surface);
    border: 1px solid var(--document-line);
    border-radius: 18px;
    box-shadow: 0 45px 140px rgba(0,0,0,.78);
    color-scheme: dark;
  }
  .reader-dialog[open] { display: grid; grid-template-rows: auto 2px minmax(0,1fr); }
  .reader-dialog::backdrop { background: rgba(2,4,10,.88); backdrop-filter: blur(9px); }
  .reader-bar { display: flex; min-height: 72px; align-items: center; gap: 18px; padding: 12px 17px 12px 22px; background: color-mix(in srgb,var(--document-accent) 7%,#070b13); border-bottom: 1px solid var(--document-line); }
  .reader-bar > div:first-child { min-width: 0; margin-right: auto; }
  .reader-bar strong { display: block; max-width: 520px; overflow: hidden; margin-top: 5px; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
  .reader-actions { display: flex; align-items: center; gap: 7px; }
  .reader-actions a, .reader-actions button { padding: 8px 10px; color: var(--muted); background: transparent; border: 1px solid var(--document-line); border-radius: 7px; font: 650 .58rem var(--mono); text-decoration: none; cursor: pointer; }
  .reader-actions a:hover, .reader-actions button:hover { color: #07101d; background: var(--document-accent); border-color: var(--document-accent); }
  .reader-actions button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  .reader-actions .reading-theme-toggle.is-light { color: #17201c; background: #f1e9dc; border-color: #fffaf1; }
  .reader-close { display: grid; width: 36px; height: 36px; place-items: center; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 50%; font-size: 1.1rem; cursor: pointer; }
  .reader-progress { height: 2px; background: rgba(120,153,255,.08); }
  .reader-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--document-accent),var(--accent)); transition: width .1s linear; }
  .reader-layout { display: grid; min-height: 0; grid-template-columns: 225px minmax(0,1fr); }
  .reader-sidebar { overflow: auto; padding: 30px 22px; background: var(--document-panel); border-right: 1px solid var(--document-line); }
  .reader-sidebar nav { display: grid; gap: 3px; margin-top: 15px; }
  .reader-sidebar nav button { padding: 6px 8px; color: var(--faint); background: transparent; border: 0; border-left: 1px solid var(--line); font: .58rem/1.35 var(--mono); text-align: left; transition: .15s; cursor: pointer; }
  .reader-sidebar nav button:hover { color: var(--document-accent); border-color: var(--document-accent); }
  .reader-sidebar nav button.sub { padding-left: 18px; }
  .reader-safety { margin-top: 28px; padding-top: 16px; color: var(--faint); border-top: 1px solid var(--line); font: .54rem/1.6 var(--mono); }
  .reader-scroll { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-color: color-mix(in srgb,var(--scroll-accent) 52%,#657086) var(--scroll-track); }
  .markdown-body { width: min(100%, 870px); min-width: 0; margin: 0 auto; padding: clamp(34px,6vw,72px) clamp(24px,6vw,76px) 100px; overflow-wrap: anywhere; color: #c7cfdf; font-size: .88rem; line-height: 1.78; }
  .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { scroll-margin-top: 25px; color: var(--ink); line-height: 1.15; letter-spacing: -.035em; }
  .markdown-body h1 { margin: 0 0 28px; font-size: clamp(2rem,5vw,4rem); letter-spacing: -.06em; }
  .markdown-body h2 { margin: 56px 0 18px; padding-bottom: 11px; border-bottom: 1px solid var(--line); font-size: 1.65rem; }
  .markdown-body h3 { margin: 38px 0 13px; font-size: 1.15rem; }
  .markdown-body h4 { margin: 28px 0 10px; font-size: .92rem; }
  .markdown-body p { margin: 0 0 18px; }
  .markdown-body a { color: var(--document-accent); overflow-wrap: anywhere; word-break: break-word; text-decoration-color: color-mix(in srgb,var(--document-accent) 42%,transparent); text-underline-offset: 3px; }
  .markdown-body strong { color: #f0faf4; }
  .markdown-body code { padding: .13em .34em; overflow-wrap: anywhere; color: color-mix(in srgb,var(--document-accent) 58%,#fff); background: color-mix(in srgb,var(--document-accent) 9%,transparent); border: 1px solid color-mix(in srgb,var(--document-accent) 14%,transparent); border-radius: 4px; font: .82em/1.5 var(--mono); }
  .markdown-body pre { max-width: 100%; overflow: auto; margin: 22px 0 28px; padding: 20px; color: #d7dced; background: #090b11; border: 1px solid var(--line); border-radius: 3px; box-shadow: inset 3px 0 var(--document-accent); tab-size: 2; }
  .markdown-body pre code { padding: 0; overflow-wrap: normal; color: inherit; background: none; border: 0; font-size: .72rem; word-break: normal; }
  /* Token colours for the built-in highlighter. One palette serves both reading
     themes because the light theme keeps `pre` on a dark ground. */
  .markdown-body pre code .tok-com { color: #78849a; font-style: italic; }
  .markdown-body pre code .tok-str { color: #f0b982; }
  .markdown-body pre code .tok-num { color: #8fd6e8; }
  .markdown-body pre code .tok-kw { color: #9db2ff; font-weight: 600; }
  .markdown-body blockquote { margin: 24px 0; padding: 16px 20px; color: #a8bbb2; background: rgba(246,201,107,.04); border-left: 3px solid var(--amber); }
  .markdown-body blockquote p:last-child { margin-bottom: 0; }
  .markdown-body ul, .markdown-body ol { margin: 0 0 22px; padding-left: 24px; }
  .markdown-body li { margin: 7px 0; padding-left: 3px; }
  .markdown-body hr { margin: 45px 0; border: 0; border-top: 1px solid var(--line); }
  .markdown-body table { display: block; width: 100%; overflow-x: auto; margin: 25px 0; border-collapse: collapse; font-size: .72rem; }
  .markdown-body th, .markdown-body td { min-width: 120px; padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
  .markdown-body th { color: var(--ink); background: color-mix(in srgb,var(--document-accent) 7%,transparent); font: 700 .64rem var(--mono); }
  .markdown-body img { max-height: 620px; margin: 26px auto; object-fit: contain; background: #070a10; border: 1px solid var(--line); border-radius: 9px; }
  .markdown-body .external-image-reference { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 18px 0; padding: 12px 14px; color: var(--muted); background: color-mix(in srgb,var(--document-accent) 5%,transparent); border: 1px dashed var(--line-strong); border-radius: 9px; font-size: .74rem; }
  .markdown-body .external-image-reference > span { color: var(--ink); }
  .markdown-body .external-image-reference a { flex: 0 0 auto; font: 650 .6rem var(--mono); }
  .markdown-body .archive-warning { margin: 0 0 34px; padding: 14px 17px; color: #dbc48c; background: rgba(246,201,107,.055); border: 1px solid rgba(246,201,107,.18); border-radius: 8px; font: .62rem/1.55 var(--mono); }
  .reader-loading { display: grid; min-height: 430px; place-content: center; justify-items: center; gap: 17px; color: var(--muted); font: .66rem var(--mono); }
  .reader-loading i { width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: reader-spin .8s linear infinite; }
  @keyframes reader-spin { to { transform: rotate(360deg); } }

  .reader-dialog[data-reading-theme="light"] {
    --scroll-accent: var(--document-accent);
    --scroll-track: #e9e3d7;
    --ink: #202822;
    --muted: #53625a;
    --faint: #697870;
    --line: rgba(32,40,34,.16);
    --line-strong: rgba(32,40,34,.3);
    color: var(--ink);
    background: #f8f4eb;
    border-color: rgba(32,40,34,.24);
    color-scheme: light;
  }
  .reader-dialog[data-reading-theme="light"]::backdrop { background: rgba(20,22,20,.62); }
  .reader-dialog[data-reading-theme="light"] .reader-bar { background: #eee8dc; }
  .reader-dialog[data-reading-theme="light"] .reader-sidebar { background: color-mix(in srgb,var(--document-accent) 5%,#e9e3d7); }
  .reader-dialog[data-reading-theme="light"] .reader-scroll { background: #fbf8f1; }
  .reader-dialog[data-reading-theme="light"] .markdown-body { color: #334139; }
  .reader-dialog[data-reading-theme="light"] .markdown-body strong { color: #17201c; }
  .reader-dialog[data-reading-theme="light"] .markdown-body code { color: color-mix(in srgb,var(--document-accent) 70%,#16213a); background: color-mix(in srgb,var(--document-accent) 8%,transparent); border-color: color-mix(in srgb,var(--document-accent) 17%,transparent); }
  .reader-dialog[data-reading-theme="light"] .markdown-body pre { color: #edf4ef; background: #17201c; border-color: #34423a; }
  .reader-dialog[data-reading-theme="light"] .markdown-body pre code { color: inherit; background: none; border: 0; }
  .reader-dialog[data-reading-theme="light"] .markdown-body blockquote { color: #53625a; background: rgba(170,109,22,.07); }
  .reader-dialog[data-reading-theme="light"] .markdown-body th { background: color-mix(in srgb,var(--document-accent) 8%,transparent); }
  .reader-dialog[data-reading-theme="light"] .markdown-body img { background: #eee9df; }
  .reader-dialog[data-reading-theme="light"] .markdown-body .archive-warning { color: #714f17; background: rgba(181,119,26,.08); border-color: rgba(151,96,16,.22); }

  .pdf-dialog {
    --scroll-accent: var(--document-accent);
    --scroll-track: var(--document-surface);
    width: min(1320px, calc(100vw - 22px));
    height: min(940px, calc(100vh - 22px));
    max-width: none;
    max-height: none;
    overflow: hidden;
    padding: 0;
    color: var(--ink);
    background: var(--document-surface);
    border: 1px solid var(--document-line);
    border-radius: 18px;
    box-shadow: 0 45px 150px rgba(0,0,0,.82), 0 0 60px color-mix(in srgb,var(--document-accent) 6%,transparent);
    color-scheme: dark;
  }
  .pdf-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
  .pdf-dialog::backdrop { background: rgba(2,4,10,.9); backdrop-filter: blur(10px); }
  .pdf-bar { display: flex; min-height: 72px; align-items: center; gap: 16px; padding: 11px 16px 11px 21px; background: linear-gradient(90deg,color-mix(in srgb,var(--document-accent) 8%,#070b13),color-mix(in srgb,var(--document-accent) 4%,#070b13)); border-bottom: 1px solid var(--document-line); }
  .pdf-bar > div:first-child { min-width: 0; margin-right: auto; }
  .pdf-bar strong { display: block; max-width: 470px; overflow: hidden; margin-top: 5px; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
  .pdf-actions { display: flex; align-items: center; gap: 6px; }
  .pdf-actions a, .pdf-actions button { padding: 8px 9px; color: #aab5ca; background: transparent; border: 1px solid var(--document-line); border-radius: 7px; font: 650 .55rem var(--mono); text-decoration: none; white-space: nowrap; cursor: pointer; }
  .pdf-actions a:hover, .pdf-actions button:hover, .pdf-actions button.active { color: #07101d; background: var(--document-accent); border-color: var(--document-accent); }
  .pdf-actions button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  .pdf-actions .reading-theme-toggle.is-light { color: #17201c; background: #f1e9dc; border-color: #fffaf1; }
  .pdf-close { display: grid; width: 36px; height: 36px; place-items: center; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 50%; font-size: 1.1rem; cursor: pointer; }
  .pdf-stage { position: relative; min-width: 0; min-height: 0; max-width: 100%; overflow: hidden; contain: layout paint; background: #171b24; background-image: linear-gradient(color-mix(in srgb,var(--document-accent) 3%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--document-accent) 3%,transparent) 1px,transparent 1px); background-size: 28px 28px; }
  .pdf-stage::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--document-accent) 7%,transparent),transparent 48%); }
  .pdf-stage iframe { position: absolute; inset: 0; display: block; width: 100%; max-width: 100%; height: 100%; background: #252830; border: 0; }
  .pdf-stage iframe[hidden] { display: none; }
  .pdf-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 17px; color: var(--muted); background: color-mix(in srgb,var(--document-accent) 5%,rgba(7,11,19,.9)); font: .64rem var(--mono); }
  .pdf-loading[hidden] { display: none; }
  .pdf-loading i { position: relative; width: 48px; height: 58px; background: color-mix(in srgb,var(--document-accent) 8%,transparent); border: 1px solid color-mix(in srgb,var(--document-accent) 34%,transparent); border-radius: 4px; box-shadow: 0 0 24px color-mix(in srgb,var(--document-accent) 10%,transparent); }
  .pdf-loading i::before { position: absolute; top: -1px; right: -1px; width: 15px; height: 15px; content: ""; background: var(--document-surface); border-bottom: 1px solid color-mix(in srgb,var(--document-accent) 34%,transparent); border-left: 1px solid color-mix(in srgb,var(--document-accent) 34%,transparent); }
  .pdf-loading i::after { position: absolute; right: 8px; bottom: 11px; left: 8px; height: 2px; content: ""; background: var(--document-accent); box-shadow: 0 -8px color-mix(in srgb,var(--document-accent) 38%,transparent),0 -16px color-mix(in srgb,var(--document-accent) 20%,transparent); animation: pdf-scan 1.15s ease-in-out infinite alternate; }
  @keyframes pdf-scan { to { transform: translateY(-16px); } }
  .pdf-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
  .pdf-fallback[hidden] { display: none; }
  .pdf-fallback > span { display: grid; width: 74px; height: 90px; place-items: center; color: #0d1420; background: var(--document-accent); clip-path: polygon(0 0,72% 0,100% 22%,100% 100%,0 100%); font: 900 .72rem var(--mono); }
  .pdf-fallback h2 { margin: 22px 0 8px; font-size: 1.25rem; }
  .pdf-fallback p { max-width: 480px; color: var(--muted); font-size: .72rem; line-height: 1.6; }
  .pdf-fallback > a { display: inline-flex; min-height: 42px; align-items: center; margin-top: 20px; padding: 10px 15px; color: #07101d; background: var(--document-accent); border: 1px solid var(--document-accent); border-radius: 5px; font: 750 .62rem var(--mono); text-decoration: none; }
  .pdf-viewer-note { min-height: 34px; padding: 9px 20px; color: #748096; background: var(--document-surface); border-top: 1px solid var(--document-line); font: .51rem var(--mono); }
  .pdf-viewer-note span { margin-right: 8px; color: var(--document-accent); text-transform: uppercase; }

  /* The link list. A PDF's own links are handled by the browser's viewer, which
     opens them in place; this is the route that opens one in a new tab. */
  .pdf-links-backdrop { position: absolute; inset: 0; z-index: 2; padding: 0; background: rgba(2,4,10,.62); border: 0; cursor: pointer; touch-action: none; }
  .pdf-links-backdrop[hidden] { display: none; }
  .pdf-links { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: flex; width: min(390px, 82vw); flex-direction: column; background: color-mix(in srgb,var(--document-accent) 7%,rgba(7,11,19,.98)); border-left: 1px solid var(--document-line); box-shadow: -18px 0 50px rgba(0,0,0,.45); }
  .pdf-links[hidden] { display: none; }
  .pdf-links header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
  .pdf-links header strong { color: var(--document-accent); font: 650 .62rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
  .pdf-links header button { width: 26px; height: 26px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
  .pdf-links-note { margin: 0; padding: 11px 16px; color: var(--faint); font: .53rem/1.55 var(--mono); border-bottom: 1px solid var(--line); }
  #pdf-links-list { overflow-y: auto; padding: 8px 10px 16px; }
  #pdf-links-list a { display: block; padding: 8px 9px; margin-bottom: 4px; color: var(--ink); border: 1px solid transparent; border-radius: 7px; font-size: .68rem; text-decoration: none; }
  #pdf-links-list a:hover { border-color: var(--line-strong); background: color-mix(in srgb,var(--document-accent) 8%,transparent); }
  #pdf-links-list a small { display: block; overflow: hidden; margin-top: 3px; color: var(--faint); font: .5rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
  #pdf-links-list p { padding: 10px 9px; color: var(--muted); font-size: .68rem; }

  .pdf-dialog[data-reading-theme="light"] {
    --scroll-accent: var(--document-accent);
    --scroll-track: #e7e1d6;
    --ink: #202822;
    --muted: #53625a;
    --faint: #697870;
    --line: rgba(32,40,34,.17);
    --line-strong: rgba(32,40,34,.3);
    color: var(--ink);
    background: #eee9df;
    border-color: color-mix(in srgb,var(--document-accent) 35%,transparent);
    color-scheme: light;
  }
  .pdf-dialog[data-reading-theme="light"]::backdrop { background: rgba(20,22,20,.62); }
  .pdf-dialog[data-reading-theme="light"] .pdf-bar { background: linear-gradient(90deg,#eee8dc,#f7f2e8); }
  .pdf-dialog[data-reading-theme="light"] .pdf-actions a,
  .pdf-dialog[data-reading-theme="light"] .pdf-actions button { color: #40534a; }
  .pdf-dialog[data-reading-theme="light"] .pdf-actions a:hover,
  .pdf-dialog[data-reading-theme="light"] .pdf-actions button:hover,
  .pdf-dialog[data-reading-theme="light"] .pdf-actions button.active { color: #f8ffff; background: var(--document-accent); border-color: var(--document-accent); }
  .pdf-dialog[data-reading-theme="light"] .pdf-actions .reading-theme-toggle.is-light { color: #17201c; background: #fffaf1; border-color: #a89f90; }
  .pdf-dialog[data-reading-theme="light"] .pdf-stage { background: #d7d3cb; background-image: linear-gradient(rgba(31,52,45,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(31,52,45,.035) 1px,transparent 1px); background-size: 28px 28px; }
  .pdf-dialog[data-reading-theme="light"] .pdf-loading { color: #53625a; background: rgba(238,233,223,.9); }
  .pdf-dialog[data-reading-theme="light"] .pdf-loading i::before { background: #eee9df; }
  .pdf-dialog[data-reading-theme="light"] .pdf-viewer-note { color: #607068; background: #e7e1d6; }
  .pdf-dialog[data-reading-theme="light"] .pdf-links-backdrop { background: rgba(31,35,32,.38); }
  .pdf-dialog[data-reading-theme="light"] .pdf-links { background: rgba(238,233,223,.98); }
  .pdf-dialog[data-reading-theme="light"] #pdf-links-list a:hover { background: color-mix(in srgb,var(--document-accent) 9%,transparent); }
}

@layer views {
  /* Museum — wearing the Signal Observatory theme, so the exhibition rooms read
     as the same instrument as view 03, tuned to a single year. Palette, grid,
     scanlines and the travelling sweep line all come from .signal-observatory;
     the room/plinth/wall layout is unchanged. */
  .museum-map {
    --signal-color: var(--signal);
    position: relative;
    padding: 20px;
    overflow: hidden;
    color: #eaf0ff;
    background-color: #070c15;
    background-image: linear-gradient(rgba(120,153,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(120,153,255,.055) 1px, transparent 1px);
    background-size: 28px 28px;
    border: 1px solid rgba(120,153,255,.18);
    border-radius: 16px;
    box-shadow: 0 30px 90px rgba(0,0,0,.28);
  }
  .museum-map::before { position: absolute; inset: 0; z-index: 0; content: ""; opacity: .12; pointer-events: none; background-image: repeating-linear-gradient(0deg,transparent 0 3px,rgba(210,225,255,.08) 3px 4px); mix-blend-mode: screen; }
  .museum-map > * { position: relative; z-index: 1; }
  .museum-years { display: flex; overflow-x: auto; gap: 7px; padding: 3px 2px 14px; scrollbar-color: color-mix(in srgb,var(--signal-color) 45%,transparent) rgba(120,153,255,.06); scrollbar-width: thin; }
  .room-marquee { position: relative; display: grid; min-height: 235px; place-items: center; overflow: hidden; margin: 5px 0 20px; padding: 40px; background: radial-gradient(circle at 10% 0,color-mix(in srgb,var(--signal-color) 16%,transparent),transparent 34%),radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--signal-color) 12%,transparent),transparent 55%),linear-gradient(115deg,#0d1423,#070b13 68%); border: 1px solid rgba(120,153,255,.17); border-radius: 12px; text-align: center; }
  .room-marquee::before { position: absolute; top: 16px; bottom: 16px; left: -3%; width: 1px; content: ""; pointer-events: none; background: linear-gradient(transparent,var(--signal-color),transparent); box-shadow: 0 0 16px var(--signal-color); opacity: .28; animation: signal-sweep 8s linear infinite; }
  .room-marquee::after { position: absolute; top: 0; left: 50%; width: 40%; height: 65%; content: ""; background: linear-gradient(color-mix(in srgb,var(--signal-color) 9%,transparent), transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); transform: translateX(-50%); }
  .room-marquee > * { position: relative; z-index: 1; }
  .room-number { color: var(--signal-color); font: 300 clamp(4rem, 12vw, 9rem)/.8 var(--mono); letter-spacing: -.09em; text-shadow: 0 0 40px color-mix(in srgb,var(--signal-color) 32%,transparent); }
  .room-marquee p:last-child { margin-top: 24px; color: #8e9aaf; font: .65rem var(--mono); }
  .museum-map .section-head h2 { color: #f3f6ff; }
  .museum-map .section-head p { color: #566379; }
  /* Every card carries a topic colour on its top edge; without this key that
     colour is decoration. Only the topics the room actually holds are listed. */
  /* The colour key is the room's filter, so every chip is a real button. An
     unpressed chip keeps the quiet legend look it had before there was anything
     to press; a pressed one fills with its own topic colour, which is the only
     state that needs to read across a wall of cards in the same palette. */
  .topic-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 20px; padding: 11px 14px; background: rgba(9,15,26,.72); border: 1px solid rgba(120,153,255,.15); border-radius: 10px; }
  .topic-key.is-filtering { background: rgba(9,15,26,.92); border-color: color-mix(in srgb, var(--signal) 34%, transparent); }
  .topic-key > p { flex: 0 0 auto; color: var(--faint); font: .56rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .topic-key > p b { display: block; color: color-mix(in srgb, var(--faint) 62%, transparent); font-weight: 400; letter-spacing: .07em; }
  .topic-key ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .topic-key li { display: flex; }
  .topic-key li button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    color: #c8d2e6;
    background: color-mix(in srgb, var(--topic-color) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--topic-color) 26%, transparent);
    border-radius: 20px;
    font: .56rem var(--mono);
    cursor: pointer;
    touch-action: manipulation;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  }
  .topic-key li button:hover { color: #fff; background: color-mix(in srgb, var(--topic-color) 16%, transparent); border-color: color-mix(in srgb, var(--topic-color) 52%, transparent); }
  .topic-key li button[aria-pressed="true"] { color: #060a12; background: var(--topic-color); border-color: var(--topic-color); font-weight: 700; box-shadow: 0 0 14px color-mix(in srgb, var(--topic-color) 34%, transparent); }
  .topic-key li i { width: 7px; height: 7px; background: var(--topic-color); border-radius: 50%; box-shadow: 0 0 8px color-mix(in srgb, var(--topic-color) 55%, transparent); }
  .topic-key li b { color: var(--topic-color); font-weight: 700; }
  .topic-key li button[aria-pressed="true"] :is(i, b) { color: #060a12; background: #060a12; box-shadow: none; }
  .topic-key li button[aria-pressed="true"] b { background: none; }
  /* A recording is not a tenth topic, so the chip is not a colour: it carries
     the play glyph the cards and the record dialog already use, and sits after
     a rule that separates the two axes. */
  .topic-key li.key-recorded { margin-left: 4px; padding-left: 10px; border-left: 1px solid rgba(120,153,255,.22); --topic-color: var(--signal); }
  .topic-key li.key-recorded i { width: auto; height: auto; background: none; box-shadow: none; color: var(--signal); font-size: .62rem; }
  .topic-key li.key-recorded button[aria-pressed="true"] i { color: #060a12; background: none; }
  /* The count and the control that clears it stay together at the end of the
     strip, so what is hidden and how to get it back read as one statement.
     Selector matches `.topic-key > p` so these win over the label rule above
     rather than depending on which of the two happens to be more specific. */
  .topic-key > p.topic-key-state { color: var(--faint); letter-spacing: .08em; }
  .topic-key.is-filtering > p.topic-key-state { color: var(--signal); }
  .topic-key-reset { flex: 0 0 auto; padding: 5px 11px; color: var(--ink); background: transparent; border: 1px dashed var(--line-strong); border-radius: 20px; font: 650 .56rem var(--mono); cursor: pointer; touch-action: manipulation; }
  .topic-key-reset:hover { color: #060a12; background: var(--signal); border-color: var(--signal); border-style: solid; }
  /* The two base re-skins use :where() so they stay at single-class specificity
     and the shared preliminary and favourite border cues still win; the state
     rules below are deliberately specific enough to beat their shared originals. */
  .museum-map :where(.year-pill) { background: rgba(7,12,21,.86); border-color: rgba(120,153,255,.15); }
  .museum-map :where(.artifact-card) { background: linear-gradient(145deg, rgba(13,20,35,.92), rgba(7,11,19,.92)); border-color: rgba(120,153,255,.15); }
  .museum-map .year-pill:hover { border-color: color-mix(in srgb,var(--signal-color) 45%,transparent); }
  .museum-map .year-pill.active { color: #07101d; background: var(--signal-color); border-color: var(--signal-color); }
  .museum-map .year-pill.preliminary.active small { color: #07101d; background: rgba(7,16,29,.14); border-color: rgba(7,16,29,.24); }
  .winner-plinths { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 10px; }
  .museum-map .artifact-card.is-read { background: linear-gradient(145deg, rgba(13,20,35,.72), rgba(7,11,19,.76)); }
  .winner-plinths .artifact-card:first-child { grid-column: span 2; min-height: 230px; border-color: rgba(255,180,84,.3); background: radial-gradient(circle at 20% 120%, rgba(255,180,84,.13), transparent 60%), rgba(7,12,21,.94); }
  .nominee-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 9px; }
  .nominee-wall .artifact-card { min-height: 150px; }

  /* Library — a panelled reading room: damask walls, veneered cases, tooled bindings.
     Every pattern layer that crosses a spine is capped at low alpha so the title,
     which is near-black on a bright topic colour, keeps its contrast. */
  .library-hall {
    position: relative;
    padding: 30px 26px 96px;
    overflow: hidden;
    background:
      radial-gradient(125% 52% at 50% -14%, rgba(246,201,107,.11), transparent 62%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23f6c96b' stroke-opacity='.08' stroke-width='1.1'%3E%3Cpath d='M36 6c8.5 9.5 8.5 20.5 0 30-8.5-9.5-8.5-20.5 0-30Z'/%3E%3Cpath d='M36 36c8.5 9.5 8.5 20.5 0 30-8.5-9.5-8.5-20.5 0-30Z'/%3E%3Cpath d='M6 36c9.5-8.5 20.5-8.5 30 0-9.5 8.5-20.5 8.5-30 0Z'/%3E%3Cpath d='M66 36c-9.5-8.5-20.5-8.5-30 0 9.5 8.5 20.5 8.5 30 0Z'/%3E%3Ccircle cx='36' cy='36' r='2.6'/%3E%3C/g%3E%3C/svg%3E"),
      repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 2px, transparent 2px 12.5%),
      linear-gradient(180deg, #14130c, #0b1512 46%, #080d0b);
    background-size: auto, 72px 72px, auto, auto;
    border: 1px solid rgba(246,201,107,.18);
    border-radius: 20px;
    box-shadow: inset 0 0 90px rgba(0,0,0,.6);
  }
  .library-hall::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 3px, rgba(246,201,107,.06) 3px 4px, transparent 4px 9px) left / 14px 100% no-repeat,
      repeating-linear-gradient(90deg, transparent 0 5px, rgba(246,201,107,.06) 5px 6px, rgba(0,0,0,.55) 6px 9px) right / 14px 100% no-repeat,
      radial-gradient(145% 105% at 50% 18%, transparent 52%, rgba(0,0,0,.55));
    pointer-events: none;
  }
  .library-hall::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30px;
    content: "";
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 1px, transparent 1px 27px),
      linear-gradient(180deg, transparent, rgba(52,34,14,.55));
    pointer-events: none;
  }
  .shelf-section { position: relative; margin-top: 42px; }
  .shelf-section::before {
    position: absolute;
    inset: 25px 0 0;
    content: "";
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(90deg, rgba(246,201,107,.04) 0 1px, transparent 1px 25px),
      linear-gradient(180deg, rgba(30,22,13,.9), rgba(11,17,14,.5));
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 14px 24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(246,201,107,.06);
    pointer-events: none;
  }
  .shelf-label { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--amber); font: .63rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .shelf-label > span:first-child { padding: 2px 9px; background: linear-gradient(180deg, rgba(246,201,107,.16), rgba(246,201,107,.03)); border: 1px solid rgba(246,201,107,.26); border-radius: 2px; box-shadow: inset 0 1px rgba(255,240,205,.22); }
  .book-shelf {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 178px;
    align-items: end;
    gap: 4px;
    overflow-x: auto;
    padding: 12px 14px 16px;
    border-bottom: 13px solid transparent;
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 8px) bottom / 100% 13px no-repeat,
      repeating-linear-gradient(90deg, rgba(255,220,150,.05) 0 2px, transparent 2px 29px) bottom / 100% 13px no-repeat,
      linear-gradient(180deg, rgba(255,240,200,.5) 0 1px, rgba(246,201,107,.2) 1px 2px, #55452b 2px, #33291a 55%, #191308) bottom / 100% 13px no-repeat;
    background-origin: border-box;
    box-shadow: 0 13px 0 #100e09, 0 19px 30px rgba(0,0,0,.55);
    scrollbar-color: rgba(246,201,107,.35) rgba(0,0,0,.35);
    scrollbar-width: thin;
  }
  .book {
    --gilt-hi: rgba(255,248,226,.55);
    --gilt-lo: rgba(84,56,12,.4);
    --grain: repeating-linear-gradient(90deg, rgba(0,0,0,.055) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0 1px, transparent 1px 3px);
    --hubs: linear-gradient(180deg, transparent 0 31%, rgba(0,0,0,.1) 31% 32%, rgba(255,255,255,.15) 32% 37%, rgba(0,0,0,.11) 37% 38%, transparent 38% 62%, rgba(0,0,0,.1) 62% 63%, rgba(255,255,255,.15) 63% 68%, rgba(0,0,0,.11) 68% 69%, transparent 69%);
    position: relative;
    width: 40px;
    min-width: 34px;
    height: var(--book-height, 150px);
    padding: 16px 9px 17px;
    overflow: hidden;
    color: #07100d;
    background:
      linear-gradient(var(--gilt-hi) 0 0) 5px 5px / calc(100% - 10px) 1px no-repeat,
      linear-gradient(var(--gilt-hi) 0 0) 5px calc(100% - 5px) / calc(100% - 10px) 1px no-repeat,
      linear-gradient(var(--gilt-hi) 0 0) 5px 5px / 1px calc(100% - 10px) no-repeat,
      linear-gradient(var(--gilt-hi) 0 0) calc(100% - 5px) 5px / 1px calc(100% - 10px) no-repeat,
      linear-gradient(180deg, transparent 0 8px, var(--gilt-lo) 8px 9px, transparent 9px calc(100% - 9px), var(--gilt-lo) calc(100% - 9px) calc(100% - 8px), transparent calc(100% - 8px)),
      var(--hubs),
      var(--grain),
      linear-gradient(90deg, rgba(255,255,255,.3) 0 1px, rgba(255,255,255,.11) 1px 16%, rgba(255,255,255,0) 44%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.2)),
      var(--book-color, #82f5b2);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 3px 6px 6px 3px;
    box-shadow: inset -5px 0 10px rgba(0,0,0,.18), 3px 0 7px rgba(0,0,0,.35);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font: 800 .58rem/1.05 var(--mono);
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
    text-overflow: ellipsis;
    cursor: pointer;
    transition: transform .22s, filter .22s, box-shadow .22s;
  }
  .book:nth-child(3n) { width: 48px; }
  .book:nth-child(4n+2) { --grain: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, rgba(255,255,255,.06) 1px 2px, transparent 2px 5px); }
  .book:nth-child(4n+3) { --grain: radial-gradient(circle at 50% 50%, rgba(0,0,0,.09) 0 .8px, transparent 1.4px) 0 0 / 5px 5px, radial-gradient(circle at 50% 50%, rgba(255,255,255,.11) 0 .8px, transparent 1.4px) 2.5px 2.5px / 5px 5px; }
  .book:nth-child(4n) { --grain: repeating-linear-gradient(122deg, rgba(0,0,0,.055) 0 2px, transparent 2px 7px); }
  .book:nth-child(7n) { --hubs: linear-gradient(180deg, transparent 0 24%, rgba(0,0,0,.1) 24% 25%, rgba(255,255,255,.15) 25% 29%, rgba(0,0,0,.11) 29% 30%, transparent 30% 47%, rgba(0,0,0,.1) 47% 48%, rgba(255,255,255,.15) 48% 52%, rgba(0,0,0,.11) 52% 53%, transparent 53% 70%, rgba(0,0,0,.1) 70% 71%, rgba(255,255,255,.15) 71% 75%, rgba(0,0,0,.11) 75% 76%, transparent 76%); }
  .book:nth-child(6n+1) { background-color: color-mix(in srgb, var(--book-color, #82f5b2) 91%, #4a3413); }
  .book:nth-child(6n+4) { background-color: color-mix(in srgb, var(--book-color, #82f5b2) 94%, #fff6e2); }
  .book:nth-child(5n) { transform: rotate(-2deg); transform-origin: bottom; }
  .book:hover, .book:focus-visible { z-index: 3; outline: none; filter: brightness(1.12); transform: translateY(-14px) rotate(0); box-shadow: inset -5px 0 10px rgba(0,0,0,.18), 0 0 0 1px rgba(255,220,150,.6), 0 16px 24px rgba(0,0,0,.5); }
  .book b { position: absolute; right: 2px; bottom: 4px; left: 2px; color: rgba(52,34,7,.8); font-size: .46rem; letter-spacing: -.02em; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.35); writing-mode: horizontal-tb; }
  /* The spine is vertical type, so the mark is set back to horizontal and
     pinned opposite the read tick rather than joining the title's flow. */
  .book .book-video { position: absolute; top: 3px; right: 3px; --record-color: rgba(26,17,3,.9); --record-ink: #f8eed9; font-size: .55rem; writing-mode: horizontal-tb; }
  .book .book-video.is-potential { --record-color: rgba(41,27,5,.72); opacity: 1; }
  .book.is-read { filter: saturate(.35) brightness(.72); }
  .book.is-read::after { position: absolute; top: 4px; left: 4px; display: grid; width: 12px; height: 11px; place-items: center; content: "✓"; color: #10190f; background: rgba(255,255,255,.42); border: 1px solid rgba(52,34,7,.3); border-radius: 1px; font: 900 .55rem var(--mono); writing-mode: horizontal-tb; }
  .shelf-plate {
    position: absolute;
    top: 100%;
    left: var(--plate-x, 0);
    z-index: 6;
    width: min(360px, 100%);
    margin-top: 17px;
    padding: 9px 13px 10px;
    background: linear-gradient(180deg, rgba(255,243,214,.12), transparent 55%), linear-gradient(180deg, #2b2214, #191309);
    border: 1px solid rgba(246,201,107,.42);
    border-radius: 3px;
    box-shadow: 0 16px 30px rgba(0,0,0,.62), inset 0 1px rgba(255,240,205,.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity .16s, transform .16s, left .2s;
  }
  .shelf-plate.is-open { opacity: 1; visibility: visible; transform: none; }
  .shelf-plate-notch { position: absolute; top: -5px; left: var(--notch-x, 20px); width: 8px; height: 8px; background: #2b2214; border-top: 1px solid rgba(246,201,107,.42); border-left: 1px solid rgba(246,201,107,.42); transform: translateX(-50%) rotate(45deg); }
  .shelf-plate-title { display: -webkit-box; overflow: hidden; color: #fdf6e6; font: 650 .78rem/1.35 var(--sans); -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
  .shelf-plate-summary { display: -webkit-box; overflow: hidden; margin-top: 6px; color: #c8bfae; font: .62rem/1.45 var(--sans); -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
  .shelf-plate-summary[hidden] { display: none; }
  .shelf-plate-meta { display: block; margin-top: 4px; overflow: hidden; color: var(--amber); font: .57rem var(--mono); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
  .book.is-favourite { outline: 2px solid #ffb454; outline-offset: 2px; }
  .book.is-favourite::before { position: absolute; top: 4px; right: 4px; display: grid; width: 12px; height: 11px; place-items: center; content: "★"; color: #432704; background: rgba(255,214,140,.55); border: 1px solid rgba(52,34,7,.32); border-radius: 1px; font: 900 .58rem var(--mono); writing-mode: horizontal-tb; }
  .library-desk { display: grid; grid-template-columns: 1.4fr .8fr; gap: 12px; margin-bottom: 20px; }
  .librarian-note, .checkout-card { padding: 22px; background: #151e18; border: 1px solid rgba(246,201,107,.14); border-radius: 12px; }
  .librarian-note h2 { margin: 5px 0 8px; font-family: Georgia, serif; font-size: 1.4rem; }
  .librarian-note p:last-child, .checkout-card p { color: var(--muted); font-size: .74rem; line-height: 1.6; }
  .checkout-card { background: #d9d0b2; color: #253129; transform: rotate(.8deg); }
  .checkout-card .eyebrow { color: #4e4832; }
  .checkout-card p { color: #465149; }

  /* Favourites */
  .favourites-view { min-height: 560px; }
  .favourites-summary { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 20px; padding: clamp(22px,4vw,42px); overflow: hidden; background: radial-gradient(circle at 90% 50%,rgba(255,180,84,.15),transparent 30%),linear-gradient(135deg,rgba(120,153,255,.08),rgba(9,19,17,.9)); border: 1px solid rgba(255,180,84,.22); border-radius: var(--radius); }
  .favourites-summary h2 { margin: 8px 0 10px; font-family: "Iowan Old Style",Georgia,serif; font-size: clamp(1.45rem,3vw,2.7rem); }
  .favourites-summary p:last-child { max-width: 720px; color: var(--muted); font-size: .75rem; line-height: 1.65; }
  .favourites-summary code { color: var(--accent); font: .68rem var(--mono); }
  .favourites-summary > span { flex: 0 0 auto; color: var(--accent); font-size: clamp(4rem,10vw,8rem); line-height: 1; opacity: .82; text-shadow: 0 0 45px rgba(255,180,84,.24); transform: rotate(8deg); }
  .saved-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .saved-modes button { padding: 9px 14px; color: var(--muted); background: rgba(20,24,36,.78); border: 1px solid var(--line); border-radius: 3px; font: 650 .62rem var(--mono); cursor: pointer; }
  .saved-modes button:hover { color: var(--ink); border-color: var(--line-strong); }
  .saved-modes button.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  .saved-modes button b { margin-left: 5px; font-weight: 800; }
  .favourite-filters { display: grid; gap: 8px; margin-bottom: 20px; }
  .favourite-filters > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .favourite-filters > div > span { width: 48px; color: var(--faint); font: .55rem var(--mono); text-transform: uppercase; }
  .favourite-filters button { padding: 6px 9px; color: var(--muted); background: rgba(20,24,36,.78); border: 1px solid var(--line); border-radius: 3px; font: .58rem var(--mono); cursor: pointer; }
  .favourite-filters button:hover { color: var(--ink); border-color: var(--topic-color,var(--line-strong)); }
  .favourite-filters button.active { color: #211605; background: var(--topic-color,var(--accent)); border-color: var(--topic-color,var(--accent)); }
  .favourite-filters button b { margin-left: 3px; font-weight: 800; }
  .favourite-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(225px,1fr)); gap: 12px; }
  .favourite-grid > .empty-state { grid-column: 1/-1; }
  .favourite-entry { position: relative; }
  .saved-filter-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; padding-left: 48px; color: var(--faint); font: .58rem var(--mono); }
  .saved-filter-note b { color: var(--ink); font-weight: 800; }
  .saved-filter-note .saved-clear { padding: 5px 8px; color: var(--signal); background: transparent; border: 1px solid var(--line); border-radius: 3px; font: .55rem var(--mono); cursor: pointer; }
  .saved-filter-note .saved-clear:hover { color: var(--ink); border-color: var(--line-strong); }
  .favourite-entry .artifact-card { height: 100%; min-height: 190px; padding-bottom: 50px; }
  .favourite-entry .saved-actions { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
  .favourite-entry .saved-flags { margin-right: auto; color: var(--accent); font-size: .8rem; letter-spacing: .12em; }
  .favourite-entry .remove-favourite { padding: 6px 8px; color: var(--accent); background: rgba(7,15,13,.9); border: 1px solid rgba(255,180,84,.35); border-radius: 3px; font: .52rem var(--mono); cursor: pointer; }
  .favourite-entry .remove-favourite:hover { color: #241604; background: var(--accent); }
  .favourite-entry .card-favourite, .favourite-entry .card-read { display: none; }

  /* Constellation */
  .sky-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .constellation-frame {
    position: relative;
    min-height: clamp(620px, 67vw, 780px);
    overflow: hidden;
    background: radial-gradient(circle at 52% 42%, #062019 0, #020d0a 50%, #010504 100%);
    border: 1px solid rgba(130,245,178,.2);
    border-radius: 18px;
    box-shadow: inset 0 0 80px rgba(0,0,0,.66), 0 30px 90px rgba(0,0,0,.28);
    outline: none;
    isolation: isolate;
  }
  .constellation-frame::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    pointer-events: none;
    opacity: .1;
    background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(101,255,179,.03) 5px 6px);
    mix-blend-mode: screen;
  }
  .constellation-frame::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 48%, rgba(0,4,3,.16) 78%, rgba(0,3,2,.68) 120%);
  }
  .constellation-frame:focus-visible { border-color: rgba(130,245,178,.55); box-shadow: 0 0 0 3px rgba(130,245,178,.1), inset 0 0 80px rgba(0,0,0,.66); }
  .constellation-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: grab; touch-action: none; }
  .constellation-frame.is-navigating .constellation-canvas, .constellation-frame.is-star-tugging .constellation-canvas { cursor: grabbing; }
  .constellation-frame.has-star-hover:not(.is-navigating):not(.is-star-tugging) .constellation-canvas { cursor: grab; }
  .space-reticle { position: absolute; top: 50%; left: 50%; z-index: 3; width: 32px; height: 32px; opacity: .16; pointer-events: none; transform: translate(-50%,-50%); }
  .space-reticle i { position: absolute; display: block; background: #b7ffcf; box-shadow: 0 0 8px rgba(130,245,178,.6); }
  .space-reticle i:first-child { top: 15px; left: 0; width: 32px; height: 1px; }
  .space-reticle i:last-child { top: 0; left: 15px; width: 1px; height: 32px; }
  .space-coordinates {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 4;
    display: grid;
    gap: 5px;
    padding: 11px 13px;
    color: rgba(181,218,200,.48);
    background: rgba(2,9,7,.55);
    border-left: 1px solid rgba(130,245,178,.32);
    font: 600 .52rem var(--mono);
    letter-spacing: .08em;
    pointer-events: none;
    backdrop-filter: blur(8px);
  }
  .space-coordinates b { color: #c9ffe0; font-weight: 700; }
  .space-coordinates .space-winner-key { margin-top: 3px; color: rgba(246,201,107,.62); }
  .space-coordinates .space-winner-key b { margin-right: 3px; color: var(--amber); text-shadow: 0 0 9px rgba(246,201,107,.8); }
  .space-coordinates .space-preliminary-key { margin-top: 3px; color: rgba(255,180,84,.78); }
  .space-coordinates .space-preliminary-key b { margin-right: 3px; color: var(--accent); }
  .space-toolbar { position: absolute; top: 18px; right: 18px; z-index: 5; display: flex; gap: 5px; }
  .space-toolbar button, .space-selection button, .space-zoom button {
    color: #bfdbce;
    background: rgba(3,12,9,.78);
    border: 1px solid rgba(166,225,192,.18);
    border-radius: 5px;
    font: 650 .54rem var(--mono);
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .space-toolbar button { padding: 8px 10px; }
  .space-toolbar button:hover, .space-selection button:hover, .space-zoom button:hover { color: #edfff4; border-color: rgba(130,245,178,.5); }
  .space-toolbar button:active, .space-selection button:active, .space-zoom button:active { transform: translateY(1px); }
  .space-toolbar button:focus-visible, .space-selection button:focus-visible, .space-zoom button:focus-visible, .space-zoom-track:focus-visible { outline: 2px solid rgba(184,255,212,.9); outline-offset: 2px; }
  .space-toolbar button[aria-pressed="true"] { color: #06100d; background: var(--mint); border-color: var(--mint); }
  .space-toolbar button:disabled { opacity: .36; cursor: not-allowed; }
  .space-toolbar kbd { margin-left: 4px; color: currentColor; background: transparent; border: 0; }
  .space-zoom {
    position: absolute;
    top: 50%;
    right: 18px;
    z-index: 5;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 8px 6px;
    background: rgba(2,9,7,.58);
    border: 1px solid rgba(166,225,192,.12);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    transform: translateY(-50%);
  }
  .space-zoom::before { content: "ZOOM"; color: rgba(181,218,200,.38); font: 600 .43rem var(--mono); letter-spacing: .13em; writing-mode: vertical-rl; }
  .space-zoom button { width: 28px; height: 28px; padding: 0; color: var(--mint); font-size: .9rem; }
  .space-zoom-track { position: relative; width: 28px; height: 130px; cursor: ns-resize; touch-action: none; }
  .space-zoom-track::before { position: absolute; top: 3px; bottom: 3px; left: 12px; width: 4px; content: ""; background: linear-gradient(var(--mint) 0 var(--zoom-position, 70%), rgba(173,222,194,.15) var(--zoom-position, 70%) 100%); border: 1px solid rgba(208,255,226,.16); border-radius: 10px; box-shadow: inset 0 0 4px #000; }
  .space-zoom-track i { position: absolute; top: var(--zoom-position, 70%); left: 50%; width: 16px; height: 8px; pointer-events: none; background: #b7ffd3; border: 1px solid #effff5; border-radius: 4px; box-shadow: 0 0 12px rgba(130,245,178,.72); transform: translate(-50%,-50%); }
  .space-zoom-track:hover i, .space-zoom-track.is-active i, .space-zoom-track:focus-visible i { width: 20px; background: #fff; }
  .space-navigator {
    position: absolute;
    bottom: 58px;
    left: 18px;
    z-index: 6;
    display: grid;
    width: 184px;
    justify-items: center;
    color: rgba(188,231,207,.62);
    font-family: var(--mono);
    user-select: none;
  }
  .space-nav-title { margin-bottom: 6px; color: rgba(198,255,221,.62); font: 700 .48rem var(--mono); letter-spacing: .2em; text-shadow: 0 0 12px rgba(130,245,178,.4); }
  .space-nav-dial {
    position: relative;
    width: 166px;
    height: 166px;
    background:
      radial-gradient(circle, rgba(8,31,23,.92) 0 25%, transparent 26%),
      repeating-conic-gradient(from 22.5deg, rgba(130,245,178,.11) 0 1deg, transparent 1deg 45deg),
      radial-gradient(circle, rgba(3,14,10,.88) 0 57%, rgba(39,105,76,.26) 58% 59%, rgba(2,9,7,.8) 60%);
    border: 1px solid rgba(130,245,178,.3);
    border-radius: 50%;
    box-shadow: inset 0 0 28px rgba(0,0,0,.75), 0 12px 35px rgba(0,0,0,.45), 0 0 22px rgba(72,196,127,.08);
    backdrop-filter: blur(8px);
  }
  .space-nav-dial::before, .space-nav-dial::after { position: absolute; inset: 9px; content: ""; pointer-events: none; border: 1px dashed rgba(130,245,178,.13); border-radius: 50%; }
  .space-nav-dial::after { inset: 24px; border-style: solid; border-color: rgba(130,245,178,.08); }
  .space-nav-dial > button, .nav-thrust button {
    position: absolute;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: #aeeac6;
    background: linear-gradient(145deg, rgba(13,40,30,.95), rgba(2,11,8,.96));
    border: 1px solid rgba(130,245,178,.24);
    border-radius: 9px;
    box-shadow: inset 0 0 12px rgba(130,245,178,.035), 0 4px 10px rgba(0,0,0,.36);
    font: 700 .77rem var(--mono);
    cursor: pointer;
    touch-action: none;
  }
  .space-nav-dial > button:hover, .space-nav-dial > button.is-active, .nav-thrust button:hover, .nav-thrust button.is-active { color: #04100c; background: var(--mint); border-color: #d8ffe7; box-shadow: 0 0 20px rgba(130,245,178,.42); }
  .space-nav-dial button small { display: block; margin-top: -8px; font: 600 .33rem var(--mono); letter-spacing: .08em; }
  .space-nav-dial .nav-up { top: 8px; left: 66px; }
  .space-nav-dial .nav-down { bottom: 8px; left: 66px; }
  .space-nav-dial .nav-left { top: 66px; left: 8px; }
  .space-nav-dial .nav-right { top: 66px; right: 8px; }
  .space-nav-dial .nav-turn-left, .space-nav-dial .nav-turn-right { top: 27px; width: 28px; height: 28px; color: var(--cyan); border-radius: 50%; font-size: .72rem; }
  .space-nav-dial .nav-turn-left { left: 27px; }
  .space-nav-dial .nav-turn-right { right: 27px; }
  .nav-thrust { position: absolute; top: 52px; left: 54px; z-index: 4; width: 58px; height: 62px; padding: 3px; background: rgba(1,8,6,.82); border: 1px solid rgba(130,245,178,.2); border-radius: 16px; box-shadow: 0 0 16px rgba(130,245,178,.08); }
  .nav-thrust span { position: absolute; inset: 50% 0 auto; color: rgba(196,255,220,.58); font: 700 .37rem var(--mono); letter-spacing: .14em; text-align: center; transform: translateY(-50%); }
  .nav-thrust button { left: 17px; width: 23px; height: 23px; border: 0; border-radius: 7px; font-size: .52rem; }
  .nav-thrust button:first-child { top: 3px; }
  .nav-thrust button:last-child { top: auto; bottom: 3px; }
  .nav-sweep { position: absolute; inset: 16px; z-index: 1; pointer-events: none; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 86%, rgba(130,245,178,.14) 94%, transparent); animation: nav-scan 9s linear infinite; }
  .space-nav-hint { margin-top: 6px; color: rgba(181,218,200,.33); font: .4rem var(--mono); letter-spacing: .14em; }
  @keyframes nav-scan { to { transform: rotate(1turn); } }
  .space-selection {
    position: absolute;
    bottom: 258px;
    left: 18px;
    z-index: 6;
    width: min(365px, calc(100% - 110px));
    padding: 16px;
    background: linear-gradient(135deg, rgba(5,18,14,.95), rgba(2,8,6,.82));
    border: 1px solid rgba(130,245,178,.28);
    border-radius: 9px;
    box-shadow: 0 15px 45px rgba(0,0,0,.5);
    backdrop-filter: blur(13px);
  }
  .space-selection[hidden] { display: none; }
  .space-selection::before { position: absolute; top: -1px; left: 16px; width: 44px; height: 1px; content: ""; background: var(--mint); box-shadow: 0 0 13px var(--mint); }
  .space-selection h3 { margin: 7px 0 5px; color: #edfff4; font-size: .78rem; line-height: 1.35; }
  .space-selection > p:not(.eyebrow) { color: #88a298; font: .57rem/1.45 var(--mono); }
  .space-selection > div { display: flex; gap: 6px; margin-top: 13px; }
  .space-selection button { padding: 8px 10px; }
  .space-selection button:first-child { color: #06100d; background: var(--mint); border-color: var(--mint); }
  .space-selection button[aria-pressed="true"] { color: #261704; background: var(--accent); border-color: var(--accent); }
  .sky-legend { position: absolute; right: 64px; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; max-width: 470px; justify-content: end; gap: 5px; }
  .sky-legend button { padding: 5px 7px; color: var(--topic-color); background: rgba(2,8,6,.78); border: 1px solid color-mix(in srgb, var(--topic-color) 25%, transparent); border-radius: 4px; font: .52rem var(--mono); cursor: pointer; backdrop-filter: blur(8px); }
  .sky-legend button:hover, .sky-legend button.active { color: #04100c; background: var(--topic-color); border-color: var(--topic-color); box-shadow: 0 0 14px color-mix(in srgb, var(--topic-color) 28%, transparent); }
  .star-rank-filter { position: absolute; right: 64px; bottom: 62px; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 5px; background: rgba(2,8,6,.86); border: 1px solid rgba(246,201,107,.2); border-radius: 7px; box-shadow: 0 9px 30px rgba(0,0,0,.36); backdrop-filter: blur(10px); }
  .star-rank-filter > span:first-child { padding: 0 5px; color: rgba(181,218,200,.46); font: 700 .45rem var(--mono); letter-spacing: .12em; }
  .star-rank-filter button { padding: 6px 8px; color: #9ab5a7; background: transparent; border: 1px solid transparent; border-radius: 4px; font: 700 .5rem var(--mono); cursor: pointer; }
  .star-rank-filter button b { margin-left: 3px; color: currentColor; font-size: .46rem; }
  .star-rank-filter button:not(:disabled):hover, .star-rank-filter button.active { color: #edfff4; background: rgba(130,245,178,.08); border-color: rgba(130,245,178,.22); }
  .star-rank-filter button:disabled { opacity: .32; cursor: not-allowed; }
  .star-rank-filter .top-ten { color: #f6d884; }
  .star-rank-filter .top-ten i { color: #fff4bf; font-style: normal; text-shadow: 0 0 8px #f6c96b, 0 0 18px rgba(246,201,107,.75); }
  .star-rank-filter .top-ten:not(:disabled):hover, .star-rank-filter .top-ten.active { color: #1b1304; background: #ffe39a; border-color: #fff3c5; box-shadow: 0 0 14px rgba(246,201,107,.55); }
  /* A THIRD AXIS, NOT A FOURTH STANDING. It takes the cyan of the recording
     mark rather than the field's amber, and a hairline sets it off the Show
     group, so it cannot be read as one more value of "Show". */
  .star-rank-filter .star-recorded-filter { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-left: 9px; padding: 6px 8px; color: #8fbaba; background: transparent; border: 1px solid rgba(110,231,231,.22); border-radius: 4px; font: 700 .5rem var(--mono); cursor: pointer; transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
  .star-rank-filter .star-recorded-filter::before { position: absolute; top: 4px; bottom: 4px; left: -5px; width: 1px; background: rgba(246,201,107,.2); content: ""; }
  .star-rank-filter .star-recorded-filter i { color: var(--cyan); font-size: .55rem; font-style: normal; }
  .star-rank-filter button.star-recorded-filter:not(:disabled):hover { color: #eafeff; background: rgba(110,231,231,.1); border-color: rgba(110,231,231,.5); }
  .star-rank-filter button.star-recorded-filter.active { color: #04191b; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 13px rgba(110,231,231,.45); }
  .star-rank-filter .star-recorded-filter.active :is(i, b) { color: inherit; }
  .star-rank-filter.preliminary-filter { border-color: rgba(255,180,84,.35); }
  .star-rank-filter.preliminary-filter > span:first-child { color: var(--accent); }
  .star-rank-filter.preliminary-filter button.active { color: var(--accent-ink); background: var(--accent); border-color: #ffd49d; }
  .short-label { display: none; }
  .space-help { position: absolute; bottom: 108px; left: 218px; z-index: 4; display: flex; flex-wrap: wrap; gap: 7px 10px; max-width: 430px; color: rgba(181,218,200,.38); font: .48rem var(--mono); pointer-events: none; }
  .space-help span { white-space: nowrap; }
  .space-help kbd { margin-right: 3px; color: rgba(210,255,228,.72); background: rgba(2,8,6,.65); border-color: rgba(130,245,178,.14); }

  /* Castle */
  .castle-shell {
    position: relative;
    min-height: clamp(560px, 66vw, 760px);
    overflow: hidden;
    background: #050302;
    border: 1px solid rgba(246, 201, 107, .35);
    border-radius: 18px;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .46), inset 0 0 0 5px #17100a, inset 0 0 0 6px rgba(246, 201, 107, .15);
    isolation: isolate;
  }
  .castle-shell::before {
    position: absolute;
    inset: 0;
    z-index: 3;
    content: "";
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.06) 3px 4px);
    mix-blend-mode: multiply;
  }
  .castle-viewport { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
  .castle-vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(2, 1, 0, .2) 72%, rgba(2, 1, 0, .72) 115%);
  }
  .castle-vignette::after {
    position: absolute;
    inset: 9px;
    content: "";
    border: 1px solid rgba(246, 201, 107, .09);
    border-radius: 11px;
  }
  .castle-hud {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 8;
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 26px 28px;
    pointer-events: none;
    background: linear-gradient(rgba(2,1,0,.6), transparent);
  }
  .castle-room p, .castle-progress small { color: rgba(235,219,181,.55); font: 600 .54rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
  .castle-room strong { display: block; margin-top: 6px; color: #fff2cf; font-family: Georgia, "Times New Roman", serif; font-size: clamp(.9rem, 1.5vw, 1.18rem); font-weight: 500; letter-spacing: .02em; text-shadow: 0 2px 10px #000; }
  .castle-progress { padding-left: 22px; border-left: 1px solid rgba(246,201,107,.3); text-align: right; }
  .castle-progress span { display: block; color: #f6c96b; font: 1rem var(--mono); text-shadow: 0 0 12px rgba(255,160,50,.7); }
  .castle-progress b { font-size: 1.4rem; }
  .castle-level-tools { display: flex; align-items: center; gap: 7px; margin-inline: auto 24px; pointer-events: auto; }
  .castle-level-tools label { display: flex; align-items: center; gap: 7px; padding: 5px 6px 5px 10px; color: rgba(235,219,181,.56); background: rgba(9,5,2,.68); border: 1px solid rgba(246,201,107,.19); border-radius: 6px; font: 700 .5rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .castle-level-tools select { padding: 5px 22px 5px 7px; color: #2a1705; background: var(--amber); border: 0; border-radius: 4px; font: 800 .58rem var(--mono); cursor: pointer; }
  .castle-level-tools button { padding: 9px 10px; color: #d8c9a9; background: rgba(9,5,2,.68); border: 1px solid rgba(246,201,107,.19); border-radius: 6px; font: 650 .54rem var(--mono); cursor: pointer; }
  .castle-level-tools button:hover { color: #fff0c8; border-color: rgba(246,201,107,.42); }
  .castle-level-tools kbd { margin-left: 4px; color: var(--amber); background: transparent; }
  .castle-level-tools small { position: absolute; top: 67px; color: rgba(235,219,181,.38); font: .48rem var(--mono); }
  .castle-crosshair { position: absolute; top: 50%; left: 50%; z-index: 7; width: 18px; height: 18px; pointer-events: none; transform: translate(-50%,-50%); filter: drop-shadow(0 1px 2px #000); }
  .castle-crosshair i { position: absolute; display: block; background: rgba(255,244,212,.72); }
  .castle-crosshair i:first-child { top: 8px; left: 1px; width: 16px; height: 1px; }
  .castle-crosshair i:last-child { top: 1px; left: 8px; width: 1px; height: 16px; }
  .castle-prompt {
    position: absolute;
    bottom: 82px;
    left: 50%;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px 9px 9px;
    color: #fff4d6;
    background: rgba(12,7,3,.82);
    border: 1px solid rgba(246,201,107,.3);
    border-radius: 7px;
    font: .62rem var(--mono);
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
  }
  .castle-prompt[hidden] { display: none; }
  .castle-objective {
    position: absolute;
    right: 18px;
    bottom: 58px;
    z-index: 9;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    width: min(235px,calc(100% - 36px));
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: #d8ccb1;
    background: linear-gradient(135deg,rgba(17,10,5,.88),rgba(5,3,2,.72));
    border: 1px solid color-mix(in srgb,var(--objective-color,#f6c96b) 32%,transparent);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.42),inset 0 0 18px rgba(246,201,107,.025);
    text-align: left;
    cursor: pointer;
    backdrop-filter: blur(8px);
  }
  .castle-objective:hover { border-color: color-mix(in srgb,var(--objective-color,#f6c96b) 62%,transparent); transform: translateY(-1px); }
  .castle-objective > i { display: grid; width: 38px; height: 38px; place-items: center; color: var(--objective-color,#f6c96b); background: rgba(0,0,0,.25); border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 14px color-mix(in srgb,var(--objective-color,#f6c96b) 28%,transparent); font: normal 1rem var(--mono); transition: transform .16s linear; }
  .castle-objective span { min-width: 0; }
  .castle-objective small, .castle-objective em { display: block; color: rgba(235,219,181,.45); font: 600 .44rem/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .castle-objective strong { display: block; overflow: hidden; margin: 3px 0; color: #fff0c8; font: 700 .62rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
  .castle-objective em { overflow: hidden; font-size: .41rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
  .castle-objective.complete { --objective-color: #82f5b2; }
  .castle-directory {
    position: absolute;
    inset: 78px max(28px,8%) 62px;
    z-index: 13;
    overflow: auto;
    padding: clamp(20px,4vw,38px);
    color: #eadfc8;
    background: radial-gradient(circle at 50% 0, rgba(246,201,107,.09), transparent 44%), rgba(8,5,3,.96);
    border: 1px solid rgba(246,201,107,.38);
    border-radius: 12px;
    box-shadow: 0 30px 90px rgba(0,0,0,.72), inset 0 0 0 5px rgba(246,201,107,.025);
    backdrop-filter: blur(12px);
  }
  .castle-directory[hidden] { display: none; }
  .castle-directory > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
  .castle-directory h2 { margin-top: 6px; color: #fff0c8; font-family: Georgia,serif; font-size: clamp(1.8rem,4vw,3.2rem); font-weight: 500; letter-spacing: -.045em; }
  .castle-directory > header button { width: 36px; height: 36px; color: #c9b993; background: transparent; border: 1px solid rgba(246,201,107,.2); border-radius: 50%; font-size: 1.1rem; cursor: pointer; }
  .castle-directory > p { max-width: 690px; margin: 12px 0 22px; color: #988d76; font-size: .68rem; line-height: 1.6; }
  .directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .directory-grid button { position: relative; min-height: 92px; overflow: hidden; padding: 16px; color: #e9ddc3; background: linear-gradient(135deg, color-mix(in srgb,var(--room-color) 10%,#100b07),#0b0704); border: 1px solid color-mix(in srgb,var(--room-color) 30%,transparent); border-radius: 7px; text-align: left; cursor: pointer; transition: .2s; }
  .directory-grid button:hover { z-index: 1; border-color: var(--room-color); transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0,0,0,.35); }
  .directory-grid i { position: absolute; top: 0; right: 0; width: 55px; height: 55px; background: var(--room-color); opacity: .08; clip-path: polygon(100% 0,0 0,100% 100%); }
  .directory-grid span { display: block; margin-bottom: 11px; color: color-mix(in srgb,var(--room-color) 75%,#fff); font-family: Georgia,serif; font-size: 1rem; }
  .directory-grid small { color: #776d5b; font: .5rem var(--mono); }
  .castle-directory footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 16px; color: #746a58; border-top: 1px solid rgba(246,201,107,.12); font: .52rem var(--mono); }
  .castle-directory footer button { padding: 7px 9px; color: #d99e8e; background: transparent; border: 1px solid rgba(255,142,115,.24); border-radius: 5px; font: .5rem var(--mono); cursor: pointer; }
  .castle-prompt kbd { color: #2a1705; background: var(--amber); border: 0; box-shadow: 0 0 12px rgba(246,201,107,.3); }
  .castle-controls {
    position: absolute;
    right: 20px;
    bottom: 19px;
    z-index: 8;
    display: flex;
    gap: 13px;
    color: rgba(235,219,181,.55);
    font: .52rem var(--mono);
    pointer-events: none;
  }
  .castle-controls kbd { margin-right: 3px; color: #d8c18a; background: rgba(5,3,2,.62); border-color: rgba(246,201,107,.2); }
  .castle-minimap {
    position: absolute;
    bottom: 18px;
    left: 18px;
    z-index: 8;
    width: 154px;
    height: 154px;
    padding: 5px;
    background: rgba(7,4,2,.72);
    border: 1px solid rgba(246,201,107,.28);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    backdrop-filter: blur(8px);
    transition: opacity .2s, transform .2s;
  }
  .castle-minimap.map-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
  .castle-start {
    position: absolute;
    inset: 0;
    z-index: 14;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px;
    background:
      linear-gradient(90deg, rgba(0,0,0,.88), rgba(4,2,1,.36) 48%, rgba(0,0,0,.88)),
      radial-gradient(circle at 50% 38%, rgba(255,135,35,.18), transparent 34%),
      rgba(5,3,2,.63);
    text-align: center;
    backdrop-filter: blur(2px);
    transition: opacity .55s ease, visibility .55s ease;
  }
  .castle-start::before, .castle-start::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22%;
    content: "";
    opacity: .46;
    background: repeating-linear-gradient(90deg, #18100a 0 18px, #24160c 18px 20px, #0c0805 20px 22px);
    border-inline: 1px solid rgba(246,201,107,.14);
  }
  .castle-start::before { left: 0; }
  .castle-start::after { right: 0; }
  .castle-start.entered { opacity: 0; visibility: hidden; }
  .castle-start > * { position: relative; z-index: 2; }
  .castle-start h2 { margin: 11px 0 18px; color: #fff0c8; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 7vw, 6.7rem); font-weight: 500; line-height: .77; letter-spacing: -.065em; text-shadow: 0 5px 0 #2f1707, 0 12px 45px rgba(255,104,18,.35); }
  .castle-start > p:not(.eyebrow) { max-width: 590px; color: #c8baa0; font-size: clamp(.72rem, 1.2vw, .88rem); line-height: 1.7; }
  .castle-start button { display: flex; align-items: center; gap: 25px; margin: 26px 0 14px; padding: 13px 14px 13px 19px; color: #271305; background: linear-gradient(#ffe09b,#dba74c); border: 1px solid #ffe9b9; border-radius: 4px; box-shadow: 0 5px 0 #704515, 0 13px 35px rgba(255,143,34,.18); font: 800 .66rem var(--mono); text-transform: uppercase; cursor: pointer; }
  .castle-start button:hover { filter: brightness(1.1); transform: translateY(-1px); }
  .castle-start button span { font-size: 1rem; }
  .castle-start small { color: rgba(226,210,177,.44); font: .55rem var(--mono); }
  .castle-crest { display: grid; width: 58px; height: 66px; place-items: center; color: #2b1607; background: linear-gradient(135deg,#fff0b0,#ad7225); clip-path: polygon(50% 0, 92% 17%, 85% 73%, 50% 100%, 15% 73%, 8% 17%); filter: drop-shadow(0 7px 13px rgba(0,0,0,.6)); }
  .castle-crest::before { position: absolute; inset: 7px; content: ""; border: 1px solid rgba(61,32,8,.55); clip-path: inherit; }
  .castle-crest span { position: relative; z-index: 1; font: 950 .72rem var(--mono); }
  .castle-mobile-controls { display: none; }
  .castle-below { display: grid; grid-template-columns: 190px 190px 1fr; gap: 1px; margin-top: 12px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 12px; }
  .castle-below > * { padding: 19px; background: var(--panel); }
  .castle-below div strong { display: block; margin: 3px 0; color: var(--amber); font: 300 1.6rem var(--mono); letter-spacing: -.07em; }
  .castle-below div span { color: var(--faint); font: .56rem var(--mono); }
  .castle-below > p { color: var(--muted); font-size: .68rem; line-height: 1.65; }

  /* Signal Observatory — longitudinal trend mode. */
  .signal-observatory { --signal-color: var(--signal); position: relative; overflow: hidden; color: #eaf0ff; background: #080d17; border: 1px solid rgba(120,153,255,.18); border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
  .signal-observatory::before { position: absolute; inset: 0; z-index: 0; content: ""; opacity: .12; pointer-events: none; background-image: repeating-linear-gradient(0deg,transparent 0 3px,rgba(210,225,255,.08) 3px 4px); mix-blend-mode: screen; }
  .signal-observatory > * { position: relative; z-index: 1; }
  .signal-console { display: grid; grid-template-columns: 82px minmax(0,1fr) minmax(250px,360px); align-items: center; gap: clamp(18px,3vw,42px); padding: clamp(24px,4vw,44px); background: radial-gradient(circle at 10% 0,color-mix(in srgb,var(--signal-color) 16%,transparent),transparent 34%),linear-gradient(115deg,#0d1423,#070b13 68%); border-bottom: 1px solid rgba(120,153,255,.17); }
  .signal-console-mark { position: relative; display: grid; width: 72px; height: 72px; place-items: center; color: var(--signal-color); background: radial-gradient(circle,rgba(255,255,255,.07),transparent 58%); border: 1px solid color-mix(in srgb,var(--signal-color) 44%,transparent); border-radius: 50%; box-shadow: 0 0 32px color-mix(in srgb,var(--signal-color) 13%,transparent),inset 0 0 25px rgba(0,0,0,.5); }
  .signal-console-mark::before, .signal-console-mark::after { position: absolute; inset: 7px; content: ""; border: 1px dashed color-mix(in srgb,var(--signal-color) 35%,transparent); border-radius: 50%; }
  .signal-console-mark::after { inset: -7px 34px; border: 0; border-left: 1px solid color-mix(in srgb,var(--signal-color) 32%,transparent); border-radius: 0; transform: rotate(43deg); }
  .signal-console-mark span { font: 750 .72rem var(--mono); letter-spacing: .08em; }
  .signal-console-mark i { position: absolute; right: 10px; bottom: 13px; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 9px var(--accent); }
  .signal-console h2 { margin: 8px 0 10px; font: 500 clamp(1.55rem,3vw,2.8rem)/1 Georgia,serif; letter-spacing: -.045em; }
  .signal-console > div:nth-child(2) > p:last-child { max-width: 650px; color: #8e9aaf; font-size: .72rem; line-height: 1.65; }
  .signal-console > dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; overflow: hidden; background: rgba(120,153,255,.15); border: 1px solid rgba(120,153,255,.15); border-radius: 8px; }
  .signal-console > dl div { min-width: 0; padding: 12px; background: rgba(7,12,21,.92); }
  .signal-console dt { margin-bottom: 5px; color: #59677f; font: .48rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .signal-console dd { overflow: hidden; color: #dfe8fb; font: .58rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
  .signal-tuner { display: flex; gap: 6px; overflow-x: auto; padding: 13px clamp(18px,3vw,35px); background: rgba(4,8,15,.94); border-bottom: 1px solid rgba(120,153,255,.13); scrollbar-width: thin; }
  .signal-tuner button { display: grid; min-width: 96px; grid-template-columns: 7px 1fr; align-items: center; gap: 2px 8px; padding: 8px 10px; color: #76839a; background: transparent; border: 1px solid rgba(120,153,255,.11); border-radius: 5px; font: .54rem var(--mono); text-align: left; cursor: pointer; }
  .signal-tuner button i { grid-row: span 2; width: 5px; height: 5px; background: var(--topic-color); border-radius: 50%; opacity: .5; }
  .signal-tuner button b { color: #566379; font-size: .48rem; font-weight: 500; }
  .signal-tuner button:hover { color: #e8efff; border-color: color-mix(in srgb,var(--topic-color) 45%,transparent); }
  .signal-tuner button.active { color: #f8fbff; background: color-mix(in srgb,var(--topic-color) 11%,transparent); border-color: color-mix(in srgb,var(--topic-color) 55%,transparent); box-shadow: inset 0 0 18px color-mix(in srgb,var(--topic-color) 6%,transparent); }
  .signal-tuner button.active i { opacity: 1; box-shadow: 0 0 10px var(--topic-color); }
  .signal-tuner button.active b { color: var(--topic-color); }
  .signal-chart { position: relative; overflow: hidden; background-color: #070c15; background-image: linear-gradient(rgba(120,153,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,153,255,.055) 1px,transparent 1px); background-size: 28px 28px; border-bottom: 1px solid rgba(120,153,255,.16); }
  .signal-chart::after { position: absolute; top: 54px; bottom: 29px; left: -3%; width: 1px; content: ""; pointer-events: none; background: linear-gradient(transparent,var(--signal-color),transparent); box-shadow: 0 0 16px var(--signal-color); opacity: .28; animation: signal-sweep 8s linear infinite; }
  @keyframes signal-sweep { to { left: 103%; } }
  .signal-chart > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px clamp(18px,3vw,35px); background: rgba(5,9,16,.8); border-bottom: 1px solid rgba(120,153,255,.12); }
  .signal-chart > header > div { display: flex; align-items: center; gap: 16px; }
  .signal-chart > header strong { font: 650 .66rem var(--mono); }
  .signal-chart > header p { color: #566379; font: .52rem var(--mono); }
  .signal-live { display: flex; align-items: center; gap: 7px; color: #65738b; font: .48rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
  .signal-live i { width: 5px; height: 5px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 8px var(--mint); }
  .signal-chart-scroll { overflow-x: auto; scrollbar-color: color-mix(in srgb,var(--signal-color) 45%,transparent) rgba(120,153,255,.06); scrollbar-width: thin; }
  .signal-chart-canvas { position: relative; height: 282px; min-width: 100%; }
  .signal-chart-canvas svg { position: absolute; inset: 35px 0 50px; width: 100%; height: calc(100% - 85px); overflow: visible; pointer-events: none; }
  .signal-chart-canvas polyline { fill: none; stroke: url(#signal-wave-gradient); stroke-width: 2; filter: drop-shadow(0 0 5px color-mix(in srgb,var(--signal-color) 62%,transparent)); }
  .signal-year-columns { position: absolute; inset: 0; display: grid; }
  .signal-year-columns button { position: relative; display: grid; min-width: 0; grid-template-rows: auto 1fr auto auto; justify-items: center; padding: 15px 3px 12px; color: #68758a; background: transparent; border: 0; border-left: 1px solid rgba(120,153,255,.075); font-family: var(--mono); cursor: pointer; }
  .signal-year-columns button:last-child { border-right: 1px solid rgba(120,153,255,.075); }
  .signal-year-columns button:hover { color: #f2f6ff; background: linear-gradient(transparent,color-mix(in srgb,var(--signal-color) 7%,transparent)); }
  .signal-year-columns button.active { color: #fff; background: linear-gradient(transparent,color-mix(in srgb,var(--signal-color) 12%,transparent)); box-shadow: inset 0 -2px var(--signal-color); }
  .signal-year-columns button.active::after { position: absolute; top: 37px; bottom: 40px; width: 1px; content: ""; background: linear-gradient(var(--signal-color),transparent); box-shadow: 0 0 10px var(--signal-color); opacity: .45; }
  .signal-year-columns button > span { font-size: .5rem; letter-spacing: .04em; }
  .signal-year-columns button > i { position: relative; align-self: end; width: 5px; height: calc(8px + var(--signal-level) * 95px); margin-bottom: 7px; background: linear-gradient(transparent,color-mix(in srgb,var(--signal-color) 52%,transparent)); border-radius: 5px 5px 0 0; }
  .signal-year-columns button > i b { position: absolute; top: -3px; left: -2px; width: 9px; height: 9px; background: var(--signal-color); border: 2px solid #080d17; border-radius: 50%; box-shadow: 0 0 9px var(--signal-color); }
  .signal-year-columns button > strong { color: #cad4e8; font-size: .64rem; font-weight: 600; }
  .signal-year-columns button > small { margin-top: 3px; color: var(--accent); font-size: .36rem; letter-spacing: .08em; }
  .signal-year-columns button.preliminary { border-inline-style: dashed; }
  .signal-chart > footer { display: flex; align-items: center; gap: 10px; padding: 8px clamp(18px,3vw,35px); color: #4d5a70; background: rgba(5,9,16,.9); border-top: 1px solid rgba(120,153,255,.1); font: .43rem var(--mono); letter-spacing: .08em; }
  .signal-chart > footer i { width: 90px; height: 2px; background: linear-gradient(90deg,rgba(120,153,255,.14),var(--signal-color)); }
  .signal-focus { padding: clamp(20px,3vw,35px); background: radial-gradient(circle at 0 100%,color-mix(in srgb,var(--signal-color) 8%,transparent),transparent 28%),#090e18; }
  .signal-focus .preliminary-notice { margin-bottom: 15px; }
  .signal-focus-grid { display: grid; grid-template-columns: minmax(260px,330px) minmax(0,1fr); gap: 14px; }
  .signal-readout, .signal-findings { overflow: hidden; background: rgba(7,12,21,.82); border: 1px solid rgba(120,153,255,.15); border-radius: 10px; }
  .signal-readout { padding: 24px; }
  .signal-lock { display: flex; align-items: center; gap: 7px; color: #66738a; font: .48rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .signal-lock i { width: 6px; height: 6px; background: var(--signal-color); border-radius: 50%; box-shadow: 0 0 9px var(--signal-color); }
  .signal-readout > strong { display: block; margin-top: 15px; color: #f3f6ff; font: 300 clamp(2.4rem,5vw,4rem)/.9 var(--mono); letter-spacing: -.09em; }
  .signal-readout > span { display: block; margin: 10px 0 18px; color: var(--signal-color); font: .57rem var(--mono); }
  .signal-readout > dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-bottom: 22px; overflow: hidden; background: rgba(120,153,255,.14); border: 1px solid rgba(120,153,255,.14); border-radius: 6px; }
  .signal-readout > dl div { padding: 10px; background: #080d16; }
  .signal-readout dt { color: #556176; font: .43rem var(--mono); text-transform: uppercase; }
  .signal-readout dd { margin-top: 3px; color: #dce5f6; font: .62rem var(--mono); }
  .signal-distribution { display: grid; gap: 7px; }
  .signal-distribution > div { display: grid; grid-template-columns: 58px 1fr 22px; align-items: center; gap: 7px; color: #6f7c92; font: .45rem var(--mono); }
  .signal-distribution > div > i { height: 3px; overflow: hidden; background: rgba(120,153,255,.08); }
  .signal-distribution > div > i b { display: block; height: 100%; min-width: 1px; }
  .signal-distribution > div > strong { color: #93a0b5; font-weight: 500; text-align: right; }
  .signal-findings > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 20px 22px; background: rgba(120,153,255,.035); border-bottom: 1px solid rgba(120,153,255,.12); }
  .signal-findings h3 { margin-top: 6px; font-size: clamp(1rem,2vw,1.35rem); }
  .signal-findings > header > span { color: #65738a; font: .48rem var(--mono); }
  .signal-findings > div { display: grid; }
  .signal-findings > .signal-result-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: rgba(120,153,255,.025); border-bottom: 1px solid rgba(120,153,255,.11); }
  .signal-result-tools > p { flex: 0 0 auto; color: #657189; font: .45rem var(--mono); }
  .signal-result-tools > p b { color: #d9e2f4; font-weight: 600; }
  .signal-status-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
  .signal-status-filter > span { margin-right: 3px; color: #59667d; font: .43rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .signal-status-filter button { padding: 6px 8px; color: #7d899f; background: transparent; border: 1px solid rgba(120,153,255,.15); border-radius: 4px; font: .48rem var(--mono); cursor: pointer; }
  .signal-status-filter button b { margin-left: 3px; color: #aeb9cc; font-weight: 600; }
  .signal-status-filter button:hover { color: #f1f5ff; border-color: rgba(120,153,255,.38); }
  .signal-status-filter button.active { color: #07101d; background: var(--signal-color); border-color: var(--signal-color); }
  .signal-status-filter button.active b { color: inherit; }
  /* A third axis, not a fourth standing: it sits apart from the Show group and
     takes the cyan of the recording mark rather than the room's tuned colour,
     so it cannot be read as one more value of "Show". */
  .signal-recorded-filter { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 6px 9px; color: #7d899f; background: transparent; border: 1px solid rgba(110,231,231,.2); border-radius: 4px; font: .48rem var(--mono); cursor: pointer; transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
  .signal-recorded-filter i { color: var(--cyan); font-style: normal; font-size: .55rem; }
  .signal-recorded-filter b { color: #aeb9cc; font-weight: 600; }
  .signal-recorded-filter:hover { color: #f1f5ff; border-color: rgba(110,231,231,.5); }
  .signal-recorded-filter.active { color: #04191b; background: var(--cyan); border-color: var(--cyan); }
  .signal-recorded-filter.active :is(i, b) { color: inherit; }
  .signal-status-filter button:disabled { opacity: .35; cursor: default; }
  .signal-preliminary-filter { display: flex; align-items: center; gap: 7px; color: var(--accent); font: .49rem var(--mono); }
  .signal-preliminary-filter i { width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }
  /* The recording slot is a column of its own and is ALWAYS emitted, empty
     where there is nothing to mark: a slot that appears only sometimes would
     move the arrow beside it into a different column on every other row. */
  .signal-finding { display: grid; grid-template-columns: 46px minmax(0,1fr) minmax(130px,190px) 10px 18px; align-items: center; gap: 12px; min-height: 61px; padding: 11px 17px; color: #aeb9cc; background: transparent; border: 0; border-bottom: 1px solid rgba(120,153,255,.09); text-align: left; cursor: pointer; transition: .17s; }
  .signal-finding .signal-video { font-size: .55rem; }
  .signal-finding:last-child { border-bottom: 0; }
  .signal-finding:hover { color: #fff; background: color-mix(in srgb,var(--signal-color) 8%,transparent); }
  .signal-finding > span { color: var(--signal-color); font: .48rem var(--mono); }
  .signal-finding > strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
  .signal-finding > small { overflow: hidden; color: #5f6c82; font: .47rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
  .signal-finding > i:last-child { color: var(--accent); font-style: normal; opacity: .5; }
  .signal-finding.is-read { opacity: .58; }
  .signal-finding.is-favourite { background: linear-gradient(90deg,rgba(255,180,84,.07),transparent 62%); box-shadow: inset 2px 0 #ffb454; }
  .signal-finding.is-favourite > i:last-child::before { content: "★"; color: #ffb454; }
  .signal-finding.is-favourite > i:last-child { font-size: 0; opacity: 1; }
  .signal-finding.is-favourite > i:last-child::before { font-size: .7rem; }
  .signal-more { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; color: #dbe4f6; background: rgba(120,153,255,.06); border: 0; border-top: 1px solid rgba(120,153,255,.12); font: .55rem var(--mono); cursor: pointer; }
  .signal-more:hover { background: rgba(120,153,255,.12); }
  .signal-more span { color: #657189; font-size: .45rem; }
  .signal-end { padding: 13px; color: #566279; font: .44rem var(--mono); text-align: center; }
}

@layer ported {
  /* Shared global index (replaces the removed catalogue view). */
  .global-results {
    position: fixed;
    top: 75px;
    right: clamp(22px, 4vw, 64px);
    z-index: 24;
    width: min(720px, calc(100vw - 286px));
    max-height: min(620px, calc(100vh - 94px));
    overflow: hidden;
    color: var(--ink);
    background: color-mix(in srgb,var(--view-surface) 98%,transparent);
    border: 1px solid var(--view-border);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 32px 90px rgba(0,0,0,.62);
    backdrop-filter: blur(24px);
    outline: none;
  }
  .global-results:focus-visible { box-shadow: 0 0 0 2px var(--view-accent),0 32px 90px rgba(0,0,0,.62); }
  .global-results[hidden] { display: none; }
  .global-results > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; color: var(--muted); border-bottom: 1px solid var(--view-border); font: .62rem var(--mono); text-transform: uppercase; }
  .global-results > header button { display: grid; width: 32px; height: 32px; place-items: center; color: var(--muted); background: transparent; border: 1px solid var(--view-border); border-radius: 50%; cursor: pointer; }
  .global-results > div { max-height: min(560px, calc(100vh - 150px)); overflow: auto; padding: 8px; }
  .global-results > div > button { display: grid; grid-template-columns: 96px minmax(0,1fr) 160px; width: 100%; align-items: center; gap: 14px; padding: 13px 14px; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid var(--view-border); text-align: left; cursor: pointer; }
  .global-results > div > button:hover, .global-results > div > button:focus-visible { color: var(--ink); background: var(--view-soft); }
  .global-results > div > button span { display: flex; gap: 7px; color: var(--faint); font: .59rem var(--mono); }
  .global-results > div > button span b { color: var(--accent); }
  .global-results > div > button > div { min-width: 0; }
  .global-results > div > button strong { display: block; font-size: .8rem; line-height: 1.4; }
  .global-results > div > button p { display: -webkit-box; overflow: hidden; margin-top: 5px; color: var(--muted); font-size: .69rem; line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  /* The researcher, under the title. Not italic despite the tag: em is here for
     the meaning, and a credit line reads as a name rather than an aside. */
  .global-results > div > button em { display: block; overflow: hidden; margin-top: 5px; color: var(--view-accent); font: .6rem var(--mono); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
  .global-results > div > button small { overflow: hidden; font: .59rem var(--mono); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  /* The publisher cell ellipses, so the mark is given a line of its own under
     it rather than being the first thing a long host name truncates away. */
  /* Its own line under the publisher, and `margin-left:auto` to sit under the
     END of it: the column is right-aligned text, which a block box does not
     inherit, so the badge would otherwise float off at the column's left edge
     with the name it belongs to over on the right. */
  .global-results > div > button small .result-video { display: flex; margin-top: 5px; margin-left: auto; font-size: .58rem; }
  .global-results > div > p { padding: 20px; color: var(--faint); font: .66rem/1.6 var(--mono); text-align: center; }

  /* The Hacker Terminal, ported into the shared application shell. */
  .hacker-terminal {
    --terminal-green: #39ff6e;
    --terminal-dim: #1e8a46;
    --terminal-dimmer: #14562e;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(420px, 64vh) auto auto;
    overflow: hidden;
    color: var(--terminal-green);
    background: #030904;
    border: 1px solid var(--terminal-dimmer);
    border-radius: 10px;
    box-shadow: 0 30px 90px rgba(0,0,0,.48), inset 0 0 80px rgba(57,255,110,.035);
    font: .72rem/1.52 var(--mono);
    text-shadow: 0 0 6px rgba(57,255,110,.35);
  }
  .hacker-terminal::before { position: absolute; inset: 0; z-index: 3; content: ""; pointer-events: none; background: repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px); }
  .hacker-terminal::after { position: absolute; inset: 0; z-index: 3; content: ""; pointer-events: none; background: radial-gradient(ellipse at center,transparent 55%,rgba(0,10,3,.58)); animation: terminal-flicker 7s infinite steps(1); }
  @keyframes terminal-flicker { 0%,100% { opacity: 1; } 63% { opacity: .92; } 63.4% { opacity: 1; } 87% { opacity: .95; } 87.3% { opacity: 1; } }
  .hacker-terminal-head, .hacker-terminal-foot, .hacker-terminal .terminal-input, .hacker-terminal .terminal-output { position: relative; z-index: 2; }
  .hacker-terminal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; padding: 7px 12px; background: rgba(57,255,110,.04); border-bottom: 1px solid var(--terminal-dimmer); }
  .hacker-terminal-head strong { color: #ffd75f; font-size: .67rem; letter-spacing: .12em; }
  .hacker-terminal-head > span { color: var(--terminal-dim); }
  .hacker-terminal-head nav { display: flex; flex: 1; flex-wrap: wrap; gap: 2px 8px; }
  .hacker-terminal button { padding: 0; color: #76ff9e; background: none; border: 0; font: inherit; text-shadow: inherit; cursor: pointer; }
  .hacker-terminal button:hover { color: #c9ffd9; text-decoration: underline; }
  .hacker-terminal-head button { color: var(--terminal-dim); font-size: .63rem; }
  .hacker-terminal .terminal-output { height: auto; overflow: auto; padding: 12px 15px 28px; color: var(--terminal-green); scrollbar-color: var(--terminal-dimmer) transparent; }
  .hacker-terminal .terminal-output p { min-height: 1.45em; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .hacker-terminal .terminal-banner { margin: 6px 0 10px; color: var(--terminal-green); line-height: 1.15; text-shadow: 0 0 8px rgba(57,255,110,.55); }
  .hacker-terminal .term-dim { color: var(--terminal-dim); }
  .hacker-terminal .term-bright { color: #a8ffc4; }
  .hacker-terminal .term-gold { color: #ffd75f; font-style: normal; }
  .hacker-terminal .term-warn { color: #ff9f7a; font-style: normal; }
  .hacker-terminal .term-error { color: #ff6259; }
  .hacker-terminal .term-echo { margin-top: 10px; color: #c9ffd9; }
  .hacker-terminal .term-echo span { color: var(--terminal-dim); }
  .terminal-man { display: grid; grid-template-columns: 25ch minmax(0,1fr); gap: 2px 12px; max-width: 90ch; margin: 5px 0 8px; }
  .terminal-man span { color: var(--terminal-dim); }
  .term-volume { display: grid; grid-template-columns: 5ch 10ch 12ch minmax(0,1fr); gap: 5px; min-height: 1.45em; }
  .term-volume > span, .term-volume small { color: var(--terminal-dim); }
  .term-volume i { color: var(--terminal-dimmer); font-style: normal; }
  .hacker-terminal .term-row { display: grid; grid-template-columns: 4ch 4ch minmax(220px,1fr) 22ch; gap: 6px; padding: 2px 0; color: var(--terminal-dim); border: 0; }
  .hacker-terminal .term-row b { color: #ffd75f; font-weight: 500; }
  .hacker-terminal .term-row.is-favourite { color: #76ff9e; background: rgba(255,215,95,.025); }
  .hacker-terminal .term-row small { overflow: hidden; color: var(--terminal-dimmer); text-overflow: ellipsis; white-space: nowrap; }
  .terminal-detail { max-width: 96ch; margin: 7px 0 9px; padding: 7px 12px; background: rgba(57,255,110,.04); border: 1px solid var(--terminal-dim); }
  .terminal-detail p { display: flex; gap: 10px; }
  .terminal-detail p > span:first-child { flex: 0 0 11ch; color: var(--terminal-dim); }
  .terminal-detail p > strong, .terminal-detail p > small { overflow-wrap: anywhere; }
  .terminal-detail p button, .terminal-detail p > span:not(:first-child) { display: inline-block; margin-right: 7px; padding: 0 6px; color: var(--terminal-green); border: 1px solid var(--terminal-dim); }
  .terminal-detail p > span:not(:first-child) { color: var(--terminal-dimmer); }
  .hacker-terminal .terminal-input { display: flex; align-items: center; padding: 7px 12px; background: rgba(57,255,110,.04); border-top: 1px solid var(--terminal-dimmer); }
  .hacker-terminal .terminal-input label { flex: 0 0 auto; color: var(--terminal-dim); }
  .hacker-terminal .terminal-input input { width: 100%; padding: 0 3px; color: #c9ffd9; background: transparent; border: 0; outline: 0; font: inherit; text-shadow: inherit; caret-color: var(--terminal-green); }
  .hacker-terminal .terminal-input i { font-style: normal; animation: terminal-cursor 1.1s steps(1) infinite; }
  @keyframes terminal-cursor { 50% { opacity: 0; } }
  .hacker-terminal-foot { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 5px 12px; color: var(--terminal-dim); border-top: 1px solid var(--terminal-dimmer); font-size: .59rem; }
  .hacker-terminal-foot b { color: #a8ffc4; font-weight: 500; }

  /* The Investigation Board, preserving the source mockup's full case layout. */
  .investigation-shell { --case-paper:#f4ecd4; --case-ink:#2b2620; --case-red:#b3202a; overflow: hidden; background: linear-gradient(#241b10,#17120c); border: 1px solid #4a3520; border-radius: 10px; box-shadow: 0 28px 80px rgba(0,0,0,.38); font-family: var(--mono); }
  .investigation-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 0; color: #e8ddc4; }
  .investigation-tools > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
  .investigation-tools strong { font-size: .86rem; letter-spacing: .17em; }
  .investigation-tools strong span { color: #e04a4a; }
  .investigation-tools small { color: #a4936f; font-size: .58rem; }
  .investigation-tools > div:last-child { display: flex; gap: 7px; }
  .investigation-tools button { padding: 7px 10px; color: #e8ddc4; background: #2c2114; border: 1px solid #5b4527; border-radius: 3px; font-size: .59rem; letter-spacing: .05em; cursor: pointer; }
  .investigation-tools button:hover, .investigation-tools button[aria-pressed="true"] { background: #50371d; border-color: #a87c3d; }
  .investigation-tools kbd { padding: 1px 4px; color: #d5c9aa; background: #241a0e; border-color: #6b542f; font-size: .52rem; }
  .case-tabs { display: flex; align-items: end; gap: 3px; overflow-x: auto; padding: 14px 18px 0; scrollbar-color: #6b542f #1c140b; }
  .case-tab { flex: 0 0 auto; padding: 8px 14px 10px; color: #4a3a1c; background: linear-gradient(#cdb474,#b89c56); border: 1px solid #6d5626; border-bottom: 0; border-radius: 8px 8px 0 0; clip-path: polygon(6% 0,94% 0,100% 100%,0 100%); font-size: .58rem; font-weight: 800; letter-spacing: .05em; opacity: .7; cursor: pointer; transform: translateY(3px); }
  .case-tab[aria-current="true"] { padding-top: 11px; color: #3a2c10; background: linear-gradient(#e7d29a,#d3ba79); opacity: 1; transform: none; }
  .case-tab.preliminary { color: #fff0c9; background: linear-gradient(#925c2c,#68401f); border-color: #c58a4b; }
  .case-tab.preliminary[aria-current="true"] { color: #2f1a09; background: linear-gradient(#ffd08a,#e7a951); }
  .case-slip { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: 0 18px; padding: 9px 16px; color: #33270e; background: repeating-linear-gradient(0deg,transparent 0 22px,rgba(122,90,30,.12) 22px 23px),linear-gradient(100deg,#e7d29a,#dfc98f 60%,#d3ba79); border: 1px solid #6d5626; border-bottom: 0; box-shadow: 0 4px 10px rgba(0,0,0,.45); font-size: .62rem; }
  .case-slip.preliminary { background: repeating-linear-gradient(0deg,transparent 0 22px,rgba(122,69,24,.13) 22px 23px),linear-gradient(100deg,#f2c67f,#e6ad5c 60%,#cd8841); border-color: #8e572a; }
  .case-slip b { color: #8c161e; letter-spacing: .12em; }
  .case-slip strong { letter-spacing: .05em; }
  .case-slip span { color: #6b5526; }
  .investigation-board-frame { margin: 0 18px 12px; overflow: hidden; background: radial-gradient(1000px 380px at 30% 0%,rgba(255,226,170,.14),transparent 60%),radial-gradient(circle at 78% 18%,rgba(0,0,0,.12) 0 2px,transparent 3px),linear-gradient(160deg,#a97444,#8a5c33 70%,#7c5029); border: 14px solid #4a2f17; border-radius: 4px; box-shadow: inset 0 0 0 2px #6b4423,inset 0 0 60px rgba(0,0,0,.55),0 10px 30px rgba(0,0,0,.6); }
  .investigation-board { position: relative; width: 100%; min-height: 520px; }
  #investigation-strings { position: absolute; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
  .investigation-card { position: absolute; z-index: 10; padding: 20px 10px 8px; color: var(--case-ink); background: repeating-linear-gradient(0deg,transparent 0 17px,rgba(64,120,170,.25) 17px 18px),linear-gradient(140deg,#f8f1dc,var(--case-paper) 55%,#eadfba); border: 0; border-radius: 2px; box-shadow: 0 5px 8px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4); text-align: left; cursor: grab; touch-action: none; transform: rotate(var(--card-rotation)); transition: box-shadow .15s ease,transform .15s ease; }
  .investigation-card:hover { z-index: 25; box-shadow: 0 10px 18px rgba(0,0,0,.55); transform: rotate(var(--card-rotation)) scale(1.05); }
  .investigation-card.dragging { z-index: 40; box-shadow: 0 14px 24px rgba(0,0,0,.6); cursor: grabbing; transition: none; }
  .investigation-card.top-evidence { width: 204px; min-height: 148px; }
  .investigation-card.supporting-evidence { z-index: 6; width: 150px; min-height: 106px; padding-top: 17px; }
  .investigation-card strong { display: -webkit-box; overflow: hidden; margin: 0 0 4px; font-size: .64rem; line-height: 1.4; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
  .investigation-card.supporting-evidence strong { font-size: .57rem; -webkit-line-clamp: 3; }
  .investigation-card small { display: block; overflow: hidden; color: #6b6252; font-size: .5rem; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
  .evidence-pin { position: absolute; top: 4px; width: 15px; height: 15px; margin-left: -8px; border-radius: 50%; box-shadow: 0 4px 4px rgba(0,0,0,.5),inset -2px -3px 3px rgba(0,0,0,.4); }
  .evidence-pin::after { position: absolute; top: 2px; left: 3px; width: 5px; height: 4px; content: ""; background: rgba(255,255,255,.75); border-radius: 50%; }
  .evidence-pin.red, .investigation-key i.red { background: radial-gradient(circle at 35% 30%,#ff7a6e,#c8231d 60%,#7c0f0c); }
  .evidence-pin.gold, .investigation-key i.gold { background: radial-gradient(circle at 35% 30%,#ffe08a,#cf9b2f 60%,#7c5a12); }
  .evidence-pin.grey, .investigation-key i.grey { background: radial-gradient(circle at 35% 30%,#cfcfcf,#8a8a8a 60%,#4c4c4c); }
  .evidence-stamp { display: inline-block; margin-bottom: 3px; padding: 1px 6px; color: var(--case-red); border: 2px solid var(--case-red); border-radius: 2px; font-size: .53rem; font-weight: 800; letter-spacing: .08em; transform: rotate(-4deg); }
  .investigation-card.evidence-stub { padding-bottom: 26px; color: #5c584d; background: repeating-linear-gradient(0deg,transparent 0 17px,rgba(90,90,90,.2) 17px 18px),linear-gradient(140deg,#ddd8ca,#cfc9b8 60%,#beb7a3); clip-path: polygon(0 0,100% 0,100% 78%,91% 86%,82% 79%,71% 88%,60% 80%,48% 89%,37% 81%,26% 90%,15% 82%,6% 90%,0 83%); }
  .investigation-card .missing-label { color: #8c6a20; font-size: .46rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: normal; }
  .investigation-card.is-read { filter: saturate(.55) brightness(.92); }
  /* Pinned top-right on the card, clear of the read and favourite stamps along
     its bottom edge and of the pin at the top centre. */
  .investigation-card .evidence-video { position: absolute; top: 5px; right: 6px; --record-color: #17595a; --record-ink: #f0fbfa; font-size: .55rem; }
  .investigation-card .evidence-video.is-potential { --record-color: #6b6459; opacity: 1; }
  .investigation-card .evidence-read { position: absolute; right: 5px; bottom: 4px; color: #5a704b; font-size: .46rem; letter-spacing: .08em; }
  .investigation-card .evidence-favourite { position: absolute; left: 5px; bottom: 4px; color: #8b5608; font-size: .43rem; letter-spacing: .05em; }
  .investigation-card.is-favourite { box-shadow: 0 8px 16px rgba(0,0,0,.35),0 0 0 3px rgba(255,180,84,.38); }
  .investigation-board.dense .investigation-card.top-evidence { width: 128px; min-height: 92px; padding: 13px 6px 5px; }
  .investigation-board.dense .investigation-card.supporting-evidence { width: 98px; min-height: 70px; padding: 11px 6px 5px; }
  .investigation-board.dense .investigation-card strong { font-size: .45rem; line-height: 1.35; }
  .investigation-board.dense .investigation-card small, .investigation-board.dense .evidence-stamp { display: none; }
  .investigation-board.dense .evidence-pin { top: 2px; width: 10px; height: 10px; margin-left: -5px; }
  .investigation-key { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 2px 20px 18px; color: #96865f; font-size: .54rem; }
  .investigation-key span { display: flex; align-items: center; gap: 5px; }
  .investigation-key span:last-child { margin-left: auto; }
  .investigation-key i { width: 9px; height: 9px; border-radius: 50%; }
  .investigation-shell .preliminary-notice { margin: 12px 18px; color: #3b2918; background: #f0d49b; border-color: #9d642e; }
  .investigation-shell .preliminary-notice b { color: #8c2f22; }
}

@layer responsive {
  @media (max-height: 720px) and (min-width: 821px) {
    .sidebar { padding: 18px 18px 14px; }
    .brand-mark { width: 41px; height: 41px; }
    .brand-edition { margin: 0 0 20px 54px; }
    .nav-item { min-height: 51px; padding-block: 7px; }
    .nav-copy em { margin-top: 2px; }
    .sidebar-foot { padding-top: 10px; }
    .reading-meter { margin-bottom: 10px; padding-bottom: 10px; }
    main { padding-top: 24px; }
    .view-intro { margin-bottom: 24px; padding-top: 14px; }
  }

  /* The search field is what the top bar is for, and every button beside it is
     taken out of its width. Below a wide desktop the submission button keeps
     its glyph and gives the words back - it is still named for a screen reader
     by its aria-label, and by its tooltip for everyone else. */
  @media (max-width: 1400px) {
    .quiet-button.contribute-launch b { display: none; }
    .quiet-button.contribute-launch { padding-inline: 12px; font-size: .82rem; }
  }

  @media (max-width: 1100px) {
    .project-links a b { display: none; }
    .project-links a { padding-inline: 6px; }
    .winner-plinths { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
    .winner-plinths .artifact-card:first-child { grid-column: span 2; }
    .artifact-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .catalogue-head, .catalogue-row { grid-template-columns: 62px minmax(220px,2fr) minmax(100px,.7fr) 80px; }
    .catalogue-head > *:nth-child(5), .catalogue-row > *:nth-child(5) { display: none; }
    .signal-console { grid-template-columns: 72px minmax(0,1fr); }
    .signal-console > dl { grid-column: 1 / 3; }
    .signal-focus-grid { grid-template-columns: 280px minmax(0,1fr); }
  }

  @media (max-width: 820px) {
    .app-shell:not([hidden]) { display: block; }
    .workspace { grid-column: auto; }
    .sidebar { width: min(290px, 86vw); padding-top: max(28px, env(safe-area-inset-top)); transform: translateX(-105%); transition: transform .25s ease; box-shadow: 25px 0 70px rgba(0,0,0,.55); }
    body.menu-open { overflow: hidden; }
    body.menu-open .sidebar { transform: none; }
    .mobile-menu-backdrop {
      position: fixed;
      inset: 0;
      z-index: 29;
      display: block;
      padding: 0;
      background: rgba(3,5,10,.58);
      border: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      touch-action: none;
      cursor: pointer;
      transition: opacity .25s ease, visibility 0s linear .25s;
    }
    body.menu-open .mobile-menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
    .mobile-menu { display: block; }
    .topbar { padding-inline: 14px; }
    .project-links { display: none; }
    .sidebar-project-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin: -22px 0 20px; }
    .sidebar-project-links a, .sidebar-project-links button { display: grid; min-height: 54px; place-items: center; gap: 4px; padding: 7px 4px; color: var(--muted); background: rgba(20,24,36,.48); border: 1px solid var(--line); border-radius: 3px; font: 600 .48rem/1.2 var(--mono); text-align: center; text-decoration: none; cursor: pointer; }
    .sidebar-project-links a span, .sidebar-project-links button span { color: var(--accent); font-size: .58rem; }
    .sidebar-project-links a:last-child span { color: var(--coral); }
    .sidebar-project-links a:hover, .sidebar-project-links button:hover { color: var(--ink); border-color: var(--line-strong); }
    /* Submitting research is the one action in this menu that leads somewhere
       new, so it gets the full width above the four links out. */
    .sidebar-project-links .contribute-launch { grid-column: 1 / -1; min-height: 46px; grid-auto-flow: column; color: var(--mint); border-color: rgba(130,245,178,.28); }
    .sidebar-project-links .contribute-launch span { color: var(--mint); }
    .global-results { right: 14px; left: 14px; width: auto; }
    .global-search { width: auto; flex: 1; }
    .global-search kbd, .quiet-button { display: none; }
    /* The one quiet button that stays on a phone: it is the only one that is
       not a shortcut to something already reachable. */
    .quiet-button.contribute-launch { display: inline-flex; padding-inline: 11px; }
    .contribute-grid { grid-template-columns: 1fr; }
    .contribute-field.is-half { grid-column: 1 / -1; }
    .artifact-dialog, .contribute-dialog { max-height: calc(100dvh - 12px); overscroll-behavior: contain; }
    main { padding-inline: 18px; }
    .view-intro { align-items: start; }
    .view-metric { display: none; }
    .winner-plinths { grid-template-columns: repeat(2, minmax(140px,1fr)); }
    .winner-plinths .artifact-card:first-child { grid-column: span 2; }
    .library-desk, .timeline-exhibit, .dig-console { grid-template-columns: 1fr; }
    .depth-scale { min-height: 180px; }
    .depth-controls { display: none; }
    .catalogue-tools { top: 73px; grid-template-columns: repeat(2,1fr); }
    .catalogue-head, .catalogue-row { grid-template-columns: 58px minmax(190px,1fr) 90px; }
    .catalogue-head > *:nth-child(3), .catalogue-row > *:nth-child(3), .catalogue-head > *:nth-child(5), .catalogue-row > *:nth-child(5) { display: none; }
    .case-file { width: 38%; }
    .case-file:nth-of-type(5) { width: 31%; left: 35%; }
    .constellation-frame { min-height: 650px; }
    .space-toolbar { top: 12px; right: 12px; flex-wrap: wrap; max-width: 390px; justify-content: end; }
    .space-toolbar button { padding: 7px 8px; }
    .space-toolbar kbd { display: none; }
    .space-coordinates { top: 12px; left: 12px; }
    .space-coordinates span:nth-child(2) { display: none; }
    .space-help { display: none; }
    .sky-legend { right: 58px; bottom: 12px; left: 12px; max-width: none; justify-content: start; }
    .star-rank-filter { right: 58px; bottom: 64px; }
    .space-selection { bottom: 258px; left: 12px; }
    .space-zoom { right: 12px; }
    .space-navigator { bottom: 60px; left: 8px; }
    .castle-shell { min-height: 620px; }
    .castle-minimap { width: 120px; height: 120px; }
    .castle-controls { display: none; }
    .castle-mobile-controls { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 10; display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
    .castle-dpad { display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(2,42px); gap: 4px; }
    .castle-dpad button:nth-child(1) { grid-column: 2; }.castle-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }.castle-dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }.castle-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
    .castle-touch-actions { display: flex; gap: 5px; }
    .castle-mobile-controls button { width: 42px; height: 42px; color: #f6d98e; background: rgba(10,5,2,.68); border: 1px solid rgba(246,201,107,.28); border-radius: 8px; font: 700 .72rem var(--mono); pointer-events: auto; backdrop-filter: blur(5px); touch-action: none; }
    .castle-touch-actions button:nth-child(2) { width: 48px; height: 48px; color: #2c1705; background: var(--amber); }
    .castle-prompt { bottom: 92px; }
    .castle-objective { right: 12px; bottom: 92px; left: auto; width: 205px; grid-template-columns: 34px minmax(0,1fr); padding: 8px; }
    .castle-objective > i { width: 31px; height: 31px; font-size: .8rem; }
    .castle-objective small { display: none; }
    .castle-below { grid-template-columns: 1fr 1fr; }
    .castle-below > p { grid-column: span 2; }
    .reader-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
    .reader-layout { grid-template-columns: 1fr; }
    .reader-sidebar { display: none; }
    .reader-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 108px; padding: 11px 14px; }
    .reader-bar > form { grid-column: 2; grid-row: 1; }
    .reader-actions { grid-column: 1 / 3; grid-row: 2; width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
    .reader-layout { height: auto; }
    .reader-actions a { display: none; }
    .pdf-dialog { width: calc(100vw - 10px); height: calc(100dvh - 10px); border-radius: 12px; }
    .pdf-bar { grid-template-columns: minmax(0,1fr) auto; display: grid; min-height: 108px; padding: 11px 12px; }
    .pdf-bar > form { grid-column: 2; grid-row: 1; }
    .pdf-actions { grid-column: 1 / 3; grid-row: 2; width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
    .pdf-stage { height: auto; }
    .pdf-viewer-note { overflow: hidden; padding-inline: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .investigation-tools { align-items: flex-start; flex-direction: column; }
    .investigation-tools > div:last-child { flex-wrap: wrap; }
    .investigation-key span:last-child { width: 100%; margin-left: 0; }
    .hacker-terminal { grid-template-rows: auto minmax(340px, 58dvh) auto auto; }
    .signal-observatory { margin-inline: -4px; }
    .signal-console { grid-template-columns: 64px minmax(0,1fr); }
    .signal-focus-grid { grid-template-columns: 1fr; }
    .signal-finding { grid-template-columns: 44px minmax(0,1fr) 10px 18px; }
    .signal-finding > small { display: none; }
    /* These are primary route/filter controls, not dense prose links. Give
       touch users a dependable target while preserving horizontal scrolling. */
    .year-pill, .signal-tuner button, .signal-status-filter button, .case-tab,
    .investigation-tools button, .saved-modes button, .favourite-filters button { min-height: 42px; }
    .site-footer { grid-template-columns: 1fr; margin-inline: 18px; }
    .credit-list { grid-template-columns: 1fr; }
    main:fullscreen { padding: 16px; }
    main.view-fullscreen-fallback { padding: 16px; }
    main:fullscreen .constellation-frame { height: calc(100dvh - 164px); min-height: 360px; }
    main.view-fullscreen-fallback .constellation-frame { height: calc(100dvh - 164px); min-height: 360px; }
    main:fullscreen .hacker-terminal { height: calc(100dvh - 164px); grid-template-rows: auto minmax(0,1fr) auto auto; }
    main.view-fullscreen-fallback .hacker-terminal { height: calc(100dvh - 164px); grid-template-rows: auto minmax(0,1fr) auto auto; }
  }

  @media (max-width: 560px) {
    .topbar { min-height: 66px; padding-top: max(10px, env(safe-area-inset-top)); }
    main { padding: 20px 14px max(58px, env(safe-area-inset-bottom)); }
    .view-intro { gap: 12px; margin-bottom: 20px; padding-top: 14px; }
    .view-intro-tools { align-self: start; }
    .view-fullscreen { width: 42px; min-height: 42px; padding: 0; font-size: 0; }
    .view-fullscreen span { font-size: 1rem; }
    .preliminary-notice { align-items: flex-start; flex-direction: column; gap: 6px; }
    /* Filter chips are targets on a phone, not a printed legend: give them a
       thumb-sized height, and let the count line take a row of its own rather
       than compete with the chips for the last few pixels. */
    .topic-key { gap: 9px 10px; }
    .topic-key li button, .topic-key-reset { min-height: 36px; padding-inline: 12px; font-size: .6rem; }
    .topic-key li.key-recorded { margin-left: 0; padding-left: 0; border-left: 0; }
    .winner-plinths, .nominee-wall, .timeline-winners { grid-template-columns: 1fr; }
    .winner-plinths .artifact-card:first-child { grid-column: auto; }
    .artifact-card { min-height: 145px; }
    .library-hall { padding-inline: 12px; }
    .library-desk { display: block; }
    .checkout-card { display: none; }
    .timeline-track { margin-inline: -18px; }
    .timeline-year { min-width: 65px; }
    .era-banner { grid-template-columns: 80px 1fr; }
    .era-banner > :last-child { display: none; }
    .sky-controls > .eyebrow { display: none; }
    .constellation-frame { height: clamp(480px, 72dvh, 620px); min-height: 480px; margin-inline: -10px; border-radius: 12px; }
    .space-coordinates { padding: 8px 9px; font-size: .47rem; }
    .space-toolbar { top: 56px; left: 12px; right: auto; }
    .space-toolbar button { padding: 7px; font-size: .49rem; }
    .space-toolbar button:nth-child(4) { display: none; }
    .space-toolbar { max-width: calc(100% - 24px); }
    .space-zoom { right: 8px; padding-inline: 4px; }
    .space-zoom-track { height: 105px; }
    .space-navigator { bottom: 64px; left: 3px; transform: scale(.8); transform-origin: left bottom; }
    .space-selection { right: 48px; bottom: 225px; left: 8px; width: auto; padding: 13px; }
    .space-selection h3 { font-size: .7rem; }
    .space-selection button { padding: 7px 8px; font-size: .49rem; }
    .sky-legend { right: 44px; bottom: 8px; left: 8px; }
    .sky-legend button { padding: 4px 5px; font-size: .47rem; }
    .star-rank-filter { right: 44px; bottom: 59px; padding: 4px; }
    .star-rank-filter > span:first-child, .star-rank-filter button b { display: none; }
    .star-rank-filter .star-recorded-filter { margin-left: 6px; padding: 5px 6px; gap: 3px; }
    .star-rank-filter button { padding: 5px 6px; font-size: .46rem; }
    .star-rank-filter .full-label { display: none; }
    .star-rank-filter .short-label { display: inline; }
    .evidence-board { min-height: 850px; padding: 15px; }
    .case-file { width: 72%; }
    .case-file:nth-of-type(1) { top: 6%; left: 5%; }.case-file:nth-of-type(2) { top: 24%; right: 5%; }.case-file:nth-of-type(3) { top: 62%; left: 4%; }.case-file:nth-of-type(4) { top: 78%; right: 4%; }.case-file:nth-of-type(5) { top: 43%; left: 14%; width: 72%; }
    .finds-tray { grid-template-columns: 1fr; }
    .dig-site { min-height: 760px; }
    .catalogue-tools { grid-template-columns: 1fr; position: static; }
    .catalogue-head { display: none; }
    .catalogue-row { grid-template-columns: 44px 1fr; padding-block: 14px; }
    .catalogue-row > *:nth-child(n+3) { display: none; }
    .artifact-facts { grid-template-columns: 1fr 1fr; }
    .artifact-actions > * { flex: 1; justify-content: center; }
    .artifact-dialog .dialog-body { padding-top: 34px; }
    .artifact-dialog .artifact-digest { margin-block: 22px 18px; }
    .artifact-dialog .artifact-digest.is-collapsible:not(.is-expanded) .artifact-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; }
    .artifact-dialog .artifact-digest.is-collapsible .digest-toggle { display: inline-flex; }
    .artifact-dialog .artifact-context { margin-block: 20px; }
    .artifact-dialog .artifact-digest .tag { min-height: 40px; padding-inline: 12px; }
    .artifact-card .card-summary { -webkit-line-clamp: 2; line-clamp: 2; }
    .castle-shell { min-height: 560px; margin-inline: -10px; border-radius: 12px; }
    .castle-start { padding-inline: 20px; }
    .castle-start::before, .castle-start::after { width: 13%; }
    .castle-start h2 { font-size: 3.25rem; }
    .castle-start > p:not(.eyebrow) { max-width: 350px; }
    .castle-hud { padding: 18px; }
    .castle-progress { display: none; }
    .castle-level-tools { margin: 0 100px 0 auto; }
    .castle-level-tools label span, .castle-level-tools button, .castle-level-tools small { display: none; }
    .castle-directory { inset: 70px 12px 86px; }
    .directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .castle-minimap { top: 15px; right: 15px; bottom: auto; left: auto; width: 92px; height: 92px; }
    .castle-objective { right: auto; left: 8px; width: 195px; }
    .castle-level-tools { position: absolute; top: 68px; right: 9px; margin: 0; }
    .castle-level-tools label { padding: 3px; background: rgba(8,4,2,.76); }
    .castle-level-tools select { padding-block: 4px; }
    .castle-directory { inset: 82px 8px 90px; padding: 18px 14px; }
    .directory-grid { grid-template-columns: 1fr 1fr; }
    .directory-grid button { min-height: 72px; padding: 11px; }
    .directory-grid span { margin-bottom: 6px; font-size: .8rem; }
    .castle-directory footer span { display: none; }
    .castle-below { grid-template-columns: 1fr 1fr; }
    .castle-below > div { padding: 14px; }
    .castle-below > p { padding: 16px; }
    .reader-dialog, .pdf-dialog { inset: 0; width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-width: 0; border-radius: 0; }
    .reader-bar, .pdf-bar { padding-top: max(11px, env(safe-area-inset-top)); }
    .reader-close, .pdf-close { width: 42px; height: 42px; }
    .reader-bar strong, .pdf-bar strong { max-width: none; overflow: visible; line-height: 1.3; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
    .reader-actions button { padding: 8px; font-size: .52rem; }
    .markdown-body { padding: 35px 20px 80px; font-size: .82rem; }
    .pdf-actions a, .pdf-actions button { padding: 7px 8px; font-size: .5rem; }
    .pdf-viewer-note { padding-bottom: max(9px, env(safe-area-inset-bottom)); }
    .pdf-viewer-note span { display: none; }
    .pdf-links header button { width: 42px; height: 42px; }
    .global-results > div > button { grid-template-columns: 70px minmax(0,1fr); }
    .global-results > div > button small { display: none; }
    .global-results > header button { width: 40px; height: 40px; }
    .hacker-terminal { margin-inline: -10px; border-radius: 6px; font-size: .64rem; }
    .hacker-terminal { grid-template-rows: auto minmax(300px, 54dvh) auto auto; }
    .hacker-terminal-head nav { min-width: 100%; }
    .hacker-terminal .term-row { grid-template-columns: 3ch 3ch minmax(180px,1fr); }
    .hacker-terminal .term-row small { display: none; }
    .term-volume { grid-template-columns: 4ch 9ch 9ch minmax(160px,1fr); min-width: 430px; }
    .terminal-man { grid-template-columns: 19ch minmax(180px,1fr); min-width: 430px; }
    .terminal-detail p { display: block; margin-bottom: 3px; }
    .terminal-detail p > span:first-child { display: block; }
    .hacker-terminal-foot span:last-child { display: none; }
    .investigation-shell { margin-inline: -10px; }
    .investigation-tools { padding-inline: 12px; }
    .investigation-tools > div:last-child button:last-child { display: none; }
    .case-tabs { padding-inline: 8px; }
    .case-slip { margin-inline: 8px; }
    .investigation-board-frame { margin-inline: 8px; border-width: 8px; }
    .investigation-key { padding-inline: 12px; }
    .signal-observatory { margin-inline: -10px; border-radius: 10px; }
    .signal-console { grid-template-columns: 1fr; padding: 22px 18px; }
    .signal-console-mark { display: none; }
    .signal-console > dl { grid-column: auto; }
    .signal-console > dl div { padding: 9px; }
    .signal-tuner { padding-inline: 12px; }
    .signal-tuner button { min-width: 88px; }
    .signal-chart > header { align-items: flex-start; flex-direction: column; gap: 7px; padding-inline: 14px; }
    .signal-chart-canvas { height: 255px; }
    .signal-focus { padding: 12px; }
    .signal-readout { padding: 19px; }
    .signal-findings > header { align-items: flex-start; flex-direction: column; }
    .signal-findings > .signal-result-tools { align-items: flex-start; flex-direction: column; }
    .signal-status-filter { width: 100%; }
    .signal-status-filter > span { width: 100%; }
    .signal-status-filter button { flex: 1; white-space: nowrap; }
    .signal-finding { padding-inline: 12px; }
    main:fullscreen { padding: 12px; }
    main.view-fullscreen-fallback { padding: 12px; }
    main:fullscreen .view-intro { margin-bottom: 12px; }
    main.view-fullscreen-fallback .view-intro { margin-bottom: 12px; }
    main:fullscreen .view-intro .view-mode { margin: 4px 0 0; }
    main.view-fullscreen-fallback .view-intro .view-mode { margin: 4px 0 0; }
    main:fullscreen .view-intro > div:first-child > p:last-child { display: none; }
    main.view-fullscreen-fallback .view-intro > div:first-child > p:last-child { display: none; }
    main:fullscreen .constellation-frame { height: calc(100dvh - 116px); min-height: 340px; margin-inline: 0; }
    main.view-fullscreen-fallback .constellation-frame { height: calc(100dvh - 116px); min-height: 340px; margin-inline: 0; }
    main:fullscreen .hacker-terminal { height: calc(100dvh - 116px); margin-inline: 0; }
    main.view-fullscreen-fallback .hacker-terminal { height: calc(100dvh - 116px); margin-inline: 0; }

    .investigation-board { display: grid; width: 100%; min-height: 0 !important; grid-template-columns: minmax(0,1fr); gap: 9px; padding: 12px; }
    #investigation-strings { display: none; }
    .investigation-card,
    .investigation-board.dense .investigation-card.top-evidence,
    .investigation-board.dense .investigation-card.supporting-evidence,
    .investigation-card.top-evidence,
    .investigation-card.supporting-evidence {
      position: relative;
      inset: auto !important;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      min-height: 92px;
      padding: 18px 12px 24px;
      cursor: pointer;
      touch-action: manipulation;
      transform: none;
    }
    .investigation-card:hover { transform: none; }
    .investigation-board.dense .investigation-card strong { font-size: .58rem; }
    .investigation-board.dense .investigation-card small, .investigation-board.dense .evidence-stamp { display: block; }
    .investigation-tools kbd { display: none; }
    .investigation-key span:last-child { display: none; }
  }

  @media (max-width: 390px) {
    .global-search { padding-inline: 10px; }
    .global-search input { font-size: .78rem; }
    .sound-button { display: none; }
    .artifact-dialog, .contribute-dialog { width: calc(100vw - 12px); }
    .artifact-dialog .dialog-body, .contribute-dialog .dialog-body { padding-inline: 19px; }
    .artifact-dialog .dialog-body { padding-top: 44px; }
    .contribute-check button { grid-template-columns: 1fr; }
    .contribute-check button span { grid-row: auto; }
    .artifact-facts { grid-template-columns: 1fr; }
    .pdf-bar strong { max-width: 220px; }
    .signal-status-filter { display: grid; grid-template-columns: repeat(3,1fr); }
    .signal-status-filter > span { grid-column: 1 / -1; }
    .case-slip { flex-direction: column; gap: 3px; }
  }

  @media (max-width: 820px) and (orientation: landscape) {
    .constellation-frame { height: calc(100dvh - 96px); min-height: 360px; }
    .hacker-terminal { grid-template-rows: auto minmax(250px, 62dvh) auto auto; }
    main:fullscreen .view-intro { display: none; }
    main.view-fullscreen-fallback .view-intro { display: none; }
    main:fullscreen .constellation-frame, main:fullscreen .hacker-terminal { height: calc(100dvh - 28px); min-height: 0; }
    main.view-fullscreen-fallback .constellation-frame, main.view-fullscreen-fallback .hacker-terminal { height: calc(100dvh - 28px); min-height: 0; }
    main:fullscreen .signal-observatory, main:fullscreen .investigation-shell { min-height: calc(100dvh - 28px); }
    main.view-fullscreen-fallback .signal-observatory, main.view-fullscreen-fallback .investigation-shell { min-height: calc(100dvh - 28px); }
  }

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

  body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; }
}