:root {
  --mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  --serif:
    "Iowan Old Style",
    "Palatino Linotype",
    Palatino,
    "Book Antiqua",
    Georgia,
    serif;
  --ui:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    system-ui,
    sans-serif;
  --display: var(--ui);
  --track: .07em;
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
:root {
  --glass-menu-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.9 .9 .9 0 -.85 .9 .9 .9 0 -.85 .9 .9 .9 0 -.85 0 0 0 0 .07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
}
:root,
:root[data-theme=dark] {
  --bg: #0b0d1d;
  --panel: #13162d;
  --panel-2: #1b1e3b;
  --line: rgba(246,178,140,.16);
  --ink: #f5efea;
  --muted: #bdb6c7;
  --accent: #f4b287;
  --navy: #1a1d3f;
  --navy-2: #242856;
  --sand: #f1c57e;
  --copper: #f5ad6e;
  --focus: #a4b8ff;
  --hover: #1b1e3b;
  --active-bg: rgba(245,173,110,.18);
  --hint-bg: rgba(16,17,38,.8);
  --veil: rgba(6,6,16,.62);
  --glow: rgba(244,178,135,.16);
  --warn: #f0b8a0;
  --warn-line: #c0603a;
  --warn-fill: rgba(192,96,58,.12);
  --warn-bg: #3a2c0c;
  --warn-ink: #ffd98a;
  --unfilled-ink: #ff8a80;
  --accent-wash: rgba(244,178,135,.10);
  --accent-wash-2: rgba(244,178,135,.02);
  --on-accent: #fff;
  --accent-hi: #ffe2cc;
  --on-accent-ink: #2a1410;
  --ok: #3f8f5a;
  --neutral: #6b7a88;
  --neutral-fill: rgba(107,122,136,.10);
  --btn: #191c36;
  --btn-hover: #22254a;
  --mark: #ff8a80;
  --mark-ink: #2a0a06;
  --mark-wash: rgba(255,138,128,.08);
  --mark-wash-2: rgba(255,138,128,0);
  --brand: #e8c48a;
  --brand-2: #aab5c7;
  --brand-3: #4a4666;
  --rail: #13162d;
  --tip: #f3d38a;
  --tip-ink: #1a1408;
  --shadow: rgba(2,2,10,.6);
  --glass: color-mix(in srgb, var(--panel) 86%, transparent);
  --glass-blur: 18px;
  --glass-menu: color-mix(in srgb, var(--panel) 58%, transparent);
  --glass-menu-filter: blur(22px) saturate(1.3) brightness(.66);
  --glass-menu-edge: rgba(255,214,190,.22);
  --glass-menu-hi: rgba(255,222,200,.2);
  --glass-menu-sheen: rgba(255,226,206,.05);
  --glass-menu-halo: 0 1px 2px rgba(8,6,20,.6);
  --intro: #0d1b2a;
  --stage: #1b2733;
  --page-img:
    radial-gradient(
      1300px 560px at 82% 115%,
      rgba(243,140,110,.26),
      transparent 62%),
    radial-gradient(
      1000px 520px at 6% 112%,
      rgba(241,197,126,.16),
      transparent 60%),
    radial-gradient(
      1000px 560px at 50% -22%,
      rgba(140,150,255,.11),
      transparent 60%),
    linear-gradient(
      180deg,
      #0a0c1b 0%,
      #0f1026 50%,
      #211631 100%);
  --panel-light:
    radial-gradient(
      150% 90% at 100% 100%,
      rgba(243,140,110,.11),
      transparent 55%),
    radial-gradient(
      150% 90% at 0% 0%,
      rgba(255,222,200,.06),
      transparent 50%);
  --surface-img:
    linear-gradient(
      180deg,
      rgba(255,222,200,.07) 0%,
      rgba(255,222,200,.015) 36%,
      rgba(0,0,0,.07) 100%);
  --bar-img:
    linear-gradient(
      180deg,
      rgba(255,222,200,.045),
      rgba(255,222,200,0) 100%);
  --bar-shadow: 0 1px 0 rgba(244,178,135,.18), 0 14px 34px -20px rgba(0,0,0,.95);
  --elev-1:
    inset 0 1px 0 rgba(255,226,206,.11),
    0 1px 2px rgba(0,0,0,.4),
    0 12px 28px -12px rgba(4,2,16,.75);
  --elev-2:
    inset 0 1px 0 rgba(255,226,206,.13),
    0 0 0 1px rgba(244,178,135,.06),
    0 2px 6px rgba(0,0,0,.4),
    0 30px 70px -20px rgba(4,2,16,.9);
  --btn-img:
    linear-gradient(
      180deg,
      rgba(255,226,206,.06),
      rgba(255,226,206,0));
  --btn-shadow: inset 0 1px 0 rgba(255,226,206,.06), 0 1px 2px rgba(0,0,0,.4);
  --accent-img:
    linear-gradient(
      135deg,
      #f9cda2 0%,
      #f4b087 55%,
      #f19c7c 100%);
  --accent-shadow: inset 0 1px 0 rgba(255,244,234,.55), 0 6px 20px -6px rgba(240,140,110,.55);
  --field-shadow: inset 0 1px 3px rgba(0,0,0,.45);
  --tab-glow: 0 0 12px rgba(245,173,110,.65);
  --stage-veil:
    radial-gradient(
      120% 95% at 50% 38%,
      rgba(140,150,255,.07) 0%,
      transparent 46%,
      rgba(6,4,18,.42) 100%),
    radial-gradient(
      90% 50% at 70% 110%,
      rgba(243,140,110,.12),
      transparent 70%),
    linear-gradient(rgba(26,22,64,.30), rgba(26,22,64,.30));
}
:root[data-theme=light] {
  --bg: #f5f0e6;
  --panel: #fffdf8;
  --panel-2: #efe7d8;
  --line: rgba(20,38,74,.14);
  --ink: #14223b;
  --muted: #4a5870;
  --accent: #1d3563;
  --navy: #14264a;
  --navy-2: #1d3563;
  --sand: #e8c48a;
  --copper: #9a5a1c;
  --focus: #1f5fd6;
  --hover: #efe7d8;
  --active-bg: rgba(154,90,28,.14);
  --hint-bg: rgba(255,253,248,.86);
  --veil: rgba(20,34,59,.45);
  --glow: rgba(20,38,74,.10);
  --warn: #8c3410;
  --warn-line: #c0603a;
  --warn-fill: rgba(192,96,58,.10);
  --warn-bg: #fff3d6;
  --warn-ink: #6b4400;
  --unfilled-ink: #a3261b;
  --accent-wash: rgba(20,38,74,.07);
  --accent-wash-2: rgba(20,38,74,.02);
  --on-accent: #fff;
  --accent-hi: #14264a;
  --on-accent-ink: #ffffff;
  --ok: #1d6b3a;
  --neutral: #4c5a66;
  --neutral-fill: rgba(76,90,102,.10);
  --btn: #fffdf8;
  --btn-hover: #efe7d8;
  --mark: #a3261b;
  --mark-ink: #fff5f2;
  --mark-wash: rgba(163,38,27,.06);
  --mark-wash-2: rgba(163,38,27,0);
  --brand: #14264a;
  --brand-2: #4a5870;
  --brand-3: #a9b3c2;
  --rail: #fffdf8;
  --tip: #fff2b3;
  --tip-ink: #3b2f05;
  --shadow: rgba(12,22,44,.18);
  --glass: color-mix(in srgb, var(--panel) 92%, transparent);
  --glass-blur: 18px;
  --glass-menu: color-mix(in srgb, var(--panel) 50%, transparent);
  --glass-menu-filter: blur(22px) saturate(1.3) brightness(1.08);
  --glass-menu-edge: rgba(255,255,255,.7);
  --glass-menu-hi: rgba(255,255,255,.85);
  --glass-menu-sheen: rgba(255,255,255,.34);
  --glass-menu-halo: 0 0 10px rgba(255,253,248,.6);
  --intro: #0d1b2a;
  --stage: #f4f6f8;
}
:root[data-theme=dark][data-dark=b] {
  --bg: #0c0e11;
  --panel: #14171b;
  --panel-2: #1c2025;
  --line: rgba(255,255,255,.085);
  --ink: #edeff2;
  --muted: #a9b0ba;
  --accent: #45d3c3;
  --navy: #1d2227;
  --navy-2: #272d34;
  --sand: #e8c48a;
  --copper: #45d3c3;
  --focus: #86b6ff;
  --hover: #1c2025;
  --active-bg: rgba(69,211,195,.14);
  --hint-bg: rgba(16,18,22,.82);
  --veil: rgba(4,5,7,.66);
  --glow: rgba(69,211,195,.14);
  --accent-wash: rgba(69,211,195,.09);
  --accent-wash-2: rgba(69,211,195,.02);
  --accent-hi: #bff4ec;
  --on-accent-ink: #04201c;
  --btn: #1a1e23;
  --btn-hover: #23282e;
  --brand-3: #4a525c;
  --rail: #14171b;
  --shadow: rgba(0,0,0,.6);
  --glass: color-mix(in srgb, var(--panel) 88%, transparent);
  --glass-blur: 18px;
  --glass-menu: color-mix(in srgb, var(--panel) 58%, transparent);
  --glass-menu-filter: blur(22px) saturate(1.1) brightness(.66);
  --glass-menu-edge: rgba(255,255,255,.16);
  --glass-menu-hi: rgba(255,255,255,.14);
  --glass-menu-sheen: rgba(255,255,255,.04);
  --glass-menu-halo: 0 1px 2px rgba(0,0,0,.6);
  --page-img:
    radial-gradient(
      1200px 600px at 50% -20%,
      rgba(255,255,255,.075),
      transparent 62%),
    radial-gradient(
      900px 600px at 0% 110%,
      rgba(69,211,195,.06),
      transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.022) 0 1px,
      transparent 1px 40px),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.022) 0 1px,
      transparent 1px 40px),
    linear-gradient(
      180deg,
      #13161a 0%,
      #0b0d10 100%);
  --panel-light:
    radial-gradient(
      160% 80% at 50% 0%,
      rgba(255,255,255,.06),
      transparent 55%);
  --surface-img:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.01) 38%,
      rgba(0,0,0,.1) 100%);
  --bar-img:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,0) 100%);
  --bar-shadow: 0 1px 0 rgba(69,211,195,.14), 0 14px 34px -20px rgba(0,0,0,.95);
  --elev-1:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 1px rgba(0,0,0,.35),
    0 12px 28px -12px rgba(0,0,0,.75);
  --elev-2:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(0,0,0,.4),
    0 30px 70px -20px rgba(0,0,0,.85);
  --btn-img:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,0));
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.45);
  --accent-img:
    linear-gradient(
      180deg,
      #66e2d4 0%,
      #33c2b2 100%);
  --accent-shadow: inset 0 1px 0 rgba(222,255,250,.5), 0 6px 18px -6px rgba(51,194,178,.5);
  --field-shadow: inset 0 1px 3px rgba(0,0,0,.5);
  --tab-glow: 0 0 10px rgba(69,211,195,.6);
  --stage-veil:
    radial-gradient(
      120% 95% at 50% 36%,
      rgba(255,255,255,.05) 0%,
      transparent 46%,
      rgba(0,0,0,.45) 100%),
    linear-gradient(rgba(18,20,24,.34), rgba(18,20,24,.34));
}
:root[data-wipe]::view-transition-old(root),
:root[data-wipe]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
:root[data-wipe]::view-transition-new(root) {
  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 48.58%,
      transparent 51.42%);
  mask-image:
    linear-gradient(
      90deg,
      #000 48.58%,
      transparent 51.42%);
  -webkit-mask-size: 210% 100%;
  mask-size: 210% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
:root[data-wipe]::view-transition {
  pointer-events: none;
}
@property --ink { syntax: "<color>"; inherits: true; initial-value: #f5efea; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #bdb6c7; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #f4b287; }
@property --accent-hi { syntax: "<color>"; inherits: true; initial-value: #ffe2cc; }
@property --on-accent { syntax: "<color>"; inherits: true; initial-value: #fff; }
@property --on-accent-ink { syntax: "<color>"; inherits: true; initial-value: #2a1410; }
@property --brand { syntax: "<color>"; inherits: true; initial-value: #e8c48a; }
@property --brand-2 { syntax: "<color>"; inherits: true; initial-value: #aab5c7; }
@property --copper { syntax: "<color>"; inherits: true; initial-value: #f5ad6e; }
@property --sand { syntax: "<color>"; inherits: true; initial-value: #f1c57e; }
@property --mark { syntax: "<color>"; inherits: true; initial-value: #ff8a80; }
@property --mark-ink { syntax: "<color>"; inherits: true; initial-value: #2a0a06; }
@property --warn { syntax: "<color>"; inherits: true; initial-value: #f0b8a0; }
@property --warn-ink { syntax: "<color>"; inherits: true; initial-value: #ffd98a; }
@property --unfilled-ink { syntax: "<color>"; inherits: true; initial-value: #ff8a80; }
@property --tip-ink { syntax: "<color>"; inherits: true; initial-value: #1a1408; }
@property --focus { syntax: "<color>"; inherits: true; initial-value: #a4b8ff; }
@property --bg { syntax: "<color>"; inherits: true; initial-value: #0b0d1d; }
@property --panel { syntax: "<color>"; inherits: true; initial-value: #13162d; }
@property --panel-2 { syntax: "<color>"; inherits: true; initial-value: #1b1e3b; }
@property --line { syntax: "<color>"; inherits: true; initial-value: rgba(246, 178, 140, .16); }
@property --hover { syntax: "<color>"; inherits: true; initial-value: #1b1e3b; }
@property --active-bg { syntax: "<color>"; inherits: true; initial-value: rgba(245, 173, 110, .18); }
@property --hint-bg { syntax: "<color>"; inherits: true; initial-value: rgba(16, 17, 38, .8); }
@property --navy { syntax: "<color>"; inherits: true; initial-value: #1a1d3f; }
@property --navy-2 { syntax: "<color>"; inherits: true; initial-value: #242856; }
@property --btn { syntax: "<color>"; inherits: true; initial-value: #191c36; }
@property --btn-hover { syntax: "<color>"; inherits: true; initial-value: #22254a; }
@property --rail { syntax: "<color>"; inherits: true; initial-value: #13162d; }
@property --tip { syntax: "<color>"; inherits: true; initial-value: #f3d38a; }
@property --accent-wash { syntax: "<color>"; inherits: true; initial-value: rgba(244, 178, 135, .10); }
@property --accent-wash-2 { syntax: "<color>"; inherits: true; initial-value: rgba(244, 178, 135, .02); }
@property --mark-wash { syntax: "<color>"; inherits: true; initial-value: rgba(255, 138, 128, .08); }
@property --mark-wash-2 { syntax: "<color>"; inherits: true; initial-value: rgba(255, 138, 128, 0); }
@property --warn-fill { syntax: "<color>"; inherits: true; initial-value: rgba(192, 96, 58, .12); }
@property --warn-bg { syntax: "<color>"; inherits: true; initial-value: #3a2c0c; }
@property --warn-line { syntax: "<color>"; inherits: true; initial-value: #c0603a; }
@property --neutral { syntax: "<color>"; inherits: true; initial-value: #6b7a88; }
@property --neutral-fill { syntax: "<color>"; inherits: true; initial-value: rgba(107, 122, 136, .10); }
@property --ok { syntax: "<color>"; inherits: true; initial-value: #3f8f5a; }
@property --brand-3 { syntax: "<color>"; inherits: true; initial-value: #4a4666; }
@property --glass-menu-edge { syntax: "<color>"; inherits: true; initial-value: rgba(255, 214, 190, .22); }
@property --glass-menu-sheen { syntax: "<color>"; inherits: true; initial-value: rgba(255, 226, 206, .05); }
:root {
  --shift-ms: 1200ms;
  --shift-ease: cubic-bezier(.7, 0, .3, 1);
}
:root[data-shift=dark] {
  --shift-ink: 624ms;
}
:root[data-shift=light] {
  --shift-ink: 576ms;
}
:root[data-shift] {
  transition:
    --ink var(--shift-ink) steps(1, end),
    --muted var(--shift-ink) steps(1, end),
    --accent var(--shift-ink) steps(1, end),
    --accent-hi var(--shift-ink) steps(1, end),
    --on-accent var(--shift-ink) steps(1, end),
    --on-accent-ink var(--shift-ink) steps(1, end),
    --brand var(--shift-ink) steps(1, end),
    --brand-2 var(--shift-ink) steps(1, end),
    --copper var(--shift-ink) steps(1, end),
    --sand var(--shift-ink) steps(1, end),
    --mark var(--shift-ink) steps(1, end),
    --mark-ink var(--shift-ink) steps(1, end),
    --warn var(--shift-ink) steps(1, end),
    --warn-ink var(--shift-ink) steps(1, end),
    --unfilled-ink var(--shift-ink) steps(1, end),
    --tip-ink var(--shift-ink) steps(1, end),
    --focus var(--shift-ink) steps(1, end),
    --bg var(--shift-ms) var(--shift-ease),
    --panel var(--shift-ms) var(--shift-ease),
    --panel-2 var(--shift-ms) var(--shift-ease),
    --line var(--shift-ms) var(--shift-ease),
    --hover var(--shift-ms) var(--shift-ease),
    --active-bg var(--shift-ms) var(--shift-ease),
    --hint-bg var(--shift-ms) var(--shift-ease),
    --navy var(--shift-ms) var(--shift-ease),
    --navy-2 var(--shift-ms) var(--shift-ease),
    --btn var(--shift-ms) var(--shift-ease),
    --btn-hover var(--shift-ms) var(--shift-ease),
    --rail var(--shift-ms) var(--shift-ease),
    --tip var(--shift-ms) var(--shift-ease),
    --accent-wash var(--shift-ms) var(--shift-ease),
    --accent-wash-2 var(--shift-ms) var(--shift-ease),
    --mark-wash var(--shift-ms) var(--shift-ease),
    --mark-wash-2 var(--shift-ms) var(--shift-ease),
    --warn-fill var(--shift-ms) var(--shift-ease),
    --warn-bg var(--shift-ms) var(--shift-ease),
    --warn-line var(--shift-ms) var(--shift-ease),
    --neutral var(--shift-ms) var(--shift-ease),
    --neutral-fill var(--shift-ms) var(--shift-ease),
    --ok var(--shift-ms) var(--shift-ease),
    --brand-3 var(--shift-ms) var(--shift-ease),
    --glass-menu-edge var(--shift-ms) var(--shift-ease),
    --glass-menu-sheen var(--shift-ms) var(--shift-ease);
}
:root[data-shift] :is(.nav button, .nav a, .pill, .icon-btn, .site-label.key, .landing.inert .home-card .cta.go, .landing.inert .home-card input) {
  transition: none;
}
:root[data-shift] :is(.bar, .menu-card, .coast-menu .menu-sheet, .coast-menu .menu-toggle, .coast-menu .sheet-head h2, .equip-card, .site-equip .equip-sheet, .site-equip .equip-toggle, .site-equip .sheet-head h2, .site-label, .site-note, .site-card, .site-back) {
  transition:
    box-shadow var(--shift-ms) var(--shift-ease),
    backdrop-filter var(--shift-ms) var(--shift-ease),
    -webkit-backdrop-filter var(--shift-ms) var(--shift-ease),
    text-shadow var(--shift-ink) steps(1, end);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-ms: 700ms;
  }
  :root[data-shift=dark] {
    --shift-ink: 364ms;
  }
  :root[data-shift=light] {
    --shift-ink: 336ms;
  }
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}
body {
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
header,
main {
  min-width: 0;
}
.landing,
main {
  grid-row: 2;
  grid-column: 1;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: padding-box;
}
h1,
.display {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}
h2,
h3 {
  font-family: var(--ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
}
h2 {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 12px;
}
h3 {
  font-size: 12px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.cta {
  font: 400 12px/1 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.cta .arrow {
  width: 26px;
  height: 26px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  transition: transform .25s ease;
}
.cta:hover .arrow {
  transform: translateX(3px);
}
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}
.bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  position: relative;
  z-index: 6;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 18px/1 var(--serif);
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}
.brand em {
  font-style: italic;
  font-weight: 500;
  color: var(--copper);
}
.brand-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background:
    var(--navy) radial-gradient(
      circle at 50% 38%,
      var(--sand) 0 22%,
      transparent 24%);
  box-shadow: inset 0 -5px 0 -2px rgba(232, 196, 138, .7);
}
.nav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav[hidden] {
  display: none;
}
.nav,
.nav-toggle {
  flex: none;
}
.bar .nav-toggle {
  display: none;
}
.nav button,
.nav a {
  position: relative;
  font: 600 14px/1 var(--ui);
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 11px 12px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.nav button:hover:not(:disabled),
.nav a:hover {
  color: var(--ink);
  background: var(--accent-wash);
}
.nav button[aria-current=page] {
  color: var(--ink);
}
.nav button[aria-current=page]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--copper);
}
.nav button:disabled {
  color: var(--brand-3);
  cursor: default;
}
#units {
  font-size: 12px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30vw;
}
#units:empty {
  display: none;
}
.ws-head {
  padding: 2px 0 12px;
  border-bottom: 1px solid var(--line);
  margin: 0 -16px 0;
  padding-inline: 16px;
}
.ws-head .back {
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ws-head .back:hover {
  color: var(--ink);
}
.ws-head h1 {
  font-size: 19px;
  line-height: 1.2;
  margin: 8px 0 3px;
}
.ws-head #partcount {
  font-size: 12.5px;
}
.pick {
  margin: 10px 0 0;
}
.pick label {
  display: block;
  font: 700 10.5px/1 var(--ui);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.pick select {
  width: 100%;
  min-height: 36px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13.5px;
}
.ws-filter {
  padding: 10px 0;
  margin: 0 -16px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--line);
}
.ws-filter input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
}
.ws-filter input:focus,
.pick select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
}
.muted {
  color: var(--muted);
}
.mono {
  font-family: var(--mono);
  font-size: 13px;
}
main {
  display: grid;
  grid-template-columns: 272px auto 1fr 360px;
  min-height: 0;
  height: 100%;
  position: relative;
}
main[hidden] {
  display: none;
}
#parts {
  grid-column: 1;
}
#subparts {
  grid-column: 2;
}
#stage {
  grid-column: 3;
}
#detail {
  grid-column: 4;
}
.panel {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--line);
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: 14px 16px;
}
#detail {
  border-right: 0;
  border-left: 1px solid var(--line);
  padding: 16px 18px 40px;
}
.d-context {
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0 10px;
}
#d-label {
  font: 600 24px/1.15 var(--serif);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 4px;
}
.name-src {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.name-src:empty {
  display: none;
}
dl.meta {
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 12.5px;
  margin: 10px 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
dl.meta:empty {
  display: none;
}
dl.meta dt {
  color: var(--muted);
}
dl.meta dd {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
dl.meta dd.mono {
  font: 600 12px/1.5 var(--mono);
}
.facts-h {
  font-size: 12px;
  margin: 22px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.facts-h[hidden] {
  display: none;
}
#d-facts {
  font-size: 13.5px;
}
.btn.sm,
.name-btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
}
.panel h2 {
  font-size: 12px;
  margin: 4px 0 10px;
}
#partlist {
  list-style: none;
  margin: 0 -10px;
  padding: 6px 0;
}
#partlist li {
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
}
#partlist li .ti {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  font-size: 13.5px;
  min-height: 36px;
  box-sizing: border-box;
}
#partlist li .tw {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform .15s;
}
#partlist li .tw svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
#partlist li[aria-expanded=true] .tw {
  transform: rotate(90deg);
}
#partlist li .n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#partlist li .k {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 11px/1.3 var(--mono);
  color: var(--muted);
}
#partlist li .x {
  font-size: 11px;
  color: var(--muted);
  padding-right: 6px;
}
#partlist li.folder .n {
  font-weight: 400;
}
#partlist li:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus);
}
#partlist li.empty-row {
  padding: 12px 10px;
  cursor: default;
  font-size: 13px;
}
.dots {
  flex: none;
  display: inline-flex;
  gap: 2px;
}
.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hover);
  border: 1px solid var(--line);
  box-sizing: border-box;
}
.dots i.draft {
  background: var(--warn-ink);
  border-color: transparent;
}
.dots i.verified {
  background: var(--ok);
  border-color: transparent;
}
#partlist li .sub {
  flex: none;
  font: 600 11px/1.3 var(--mono);
  color: var(--copper);
}
.col li .sub {
  position: absolute;
  right: 8px;
  top: 6px;
  font: 600 11px/1.3 var(--mono);
  color: var(--copper);
}
#partlist li.ancestor {
  background: var(--hover);
  box-shadow: inset 2px 0 0 var(--accent);
}
#partlist li:hover {
  background: var(--hover);
}
#partlist li.active {
  background: var(--active-bg);
}
#partlist li.active > .ti .n {
  font-weight: 700;
}
#partlist li .fav,
.col li .fav {
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: var(--accent);
  font-size: 12px;
}
#stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--stage) 68%, transparent);
  transition: background-color .5s ease .45s;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity .4s ease;
}
main.away {
  pointer-events: none;
}
main.away #c {
  opacity: 0;
}
main.away #stage {
  background-color: transparent;
  transition-delay: 0s;
}
.panel,
.cols,
.rail,
.hint,
.tip,
#locator-frame,
#compare-bar {
  transition: transform .5s ease .45s, opacity .5s ease .45s;
}
main.away .panel,
main.away .cols,
main.away .rail,
main.away .hint,
main.away .tip,
main.away #locator-frame,
main.away #compare-bar {
  opacity: 0;
  transition-delay: 0s;
}
#hotspots,
#labels {
  transition: opacity .4s ease;
}
main.away #hotspots,
main.away #labels {
  opacity: 0;
}
main.away #parts,
main.away .cols {
  transform: translateX(-24px);
}
main.away #detail {
  transform: translateX(24px);
}
.hint {
  position: absolute;
  left: 14px;
  top: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}
.hint:empty {
  display: none;
}
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 12px 0;
}
dt {
  color: var(--muted);
}
dd {
  margin: 0;
}
.content-state {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 6px;
}
.content-state strong {
  display: block;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.content-state.unfilled {
  border: 2px dashed var(--mark);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--mark-wash-2) 0 8px,
      var(--mark-wash) 8px 16px);
  color: var(--unfilled-ink);
  border-radius: 10px;
}
.content-state.unfilled strong {
  font-weight: 800;
  letter-spacing: .03em;
}
.content-state.draft {
  border: 2px solid var(--warn-line);
  background: var(--warn-fill);
  color: var(--warn);
}
.content-state.verified {
  border: 1px solid var(--line);
}
.naming-unverified {
  color: var(--warn);
}
@media (max-width: 699px) {
  main {
    display: flex;
    flex-direction: column;
    overflow: auto;
    overscroll-behavior: contain;
  }
  #parts,
  #subparts,
  #stage,
  #detail {
    grid-column: auto;
    flex: none;
  }
  .panel {
    border: 0;
    border-top: 1px solid var(--line);
    overflow: visible;
    min-height: auto;
  }
  .cols {
    flex-direction: column;
  }
  .col {
    width: auto;
    overflow: visible;
    min-height: auto;
  }
  #stage {
    height: 60vh;
  }
  .landing {
    grid-template-columns: 1fr;
  }
  .nav {
    display: none;
  }
  #locator-frame {
    display: none;
  }
}
.content-summary {
  margin: 14px 0 8px;
  color: var(--muted);
  font-size: 13px;
}
.field {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.field h3 {
  font-size: 12px;
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.field p {
  margin: 4px 0;
}
.field ul {
  margin: 4px 0 0 18px;
  padding: 0;
}
.field.unfilled {
  border: 2px dashed var(--mark);
  background:
    repeating-linear-gradient(
      135deg,
      var(--mark-wash) 0 10px,
      var(--mark-wash-2) 10px 20px);
}
.field.draft,
.field.inherited {
  border: 2px solid var(--warn-line);
  background: var(--warn-fill);
}
.field.verified {
  border-color: var(--ok);
}
#d-content .field,
.study-record .field {
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
#d-content .field-head,
.study-record .field-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
#d-content .field-head h3,
.study-record .field-head h3 {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: .06em;
}
.state {
  font: 800 10.5px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.state.unfilled {
  background: var(--hover);
  color: var(--muted);
}
.state.draft {
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.state.verified {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
}
.state.rejected {
  background: var(--neutral-fill);
  color: var(--neutral);
}
.unfilled-marker {
  border: 2px dashed var(--mark);
  color: var(--unfilled-ink);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--mark-wash-2) 0 8px,
      var(--mark-wash) 8px 16px);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .03em;
}
.unverified-banner {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: 8px 8px 0 0;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .05em;
}
.draft-body {
  border: 1px solid color-mix(in srgb, var(--warn-ink) 30%, transparent);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 10px 12px;
}
#d-content .source,
.study-record .source {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.verified-by {
  font-size: 12px;
  color: var(--ok);
  font-weight: 600;
  margin-top: 6px;
}
#d-content .field.inherited .src,
.study-record .field.inherited .src {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
#d-content .field.inherited.rejected p,
.study-record .field.inherited.rejected p {
  text-decoration: line-through;
  color: var(--muted);
}
.badge {
  font: 600 11px/1 var(--mono);
  letter-spacing: .06em;
  padding: 4px 7px;
  border-radius: 3px;
}
.badge.unfilled {
  background: var(--mark);
  color: var(--mark-ink);
}
.badge.draft {
  background: var(--warn-line);
  color: var(--on-accent);
}
.conv {
  color: var(--muted);
  font-size: .92em;
  white-space: nowrap;
}
.badge.verified {
  background: var(--ok);
  color: var(--on-accent);
}
.badge.geo {
  display: inline-block;
  margin-bottom: 3px;
}
.badge.geo.placeholder {
  background: var(--mark);
  color: var(--mark-ink);
}
.badge.geo.unconfirmed {
  background: var(--warn-line);
  color: var(--on-accent);
}
.badge.geo.confirmed {
  background: var(--ok);
  color: var(--on-accent);
}
.badge.geo.unknown {
  background: var(--neutral);
  color: var(--on-accent);
}
.badge.geo.rejected {
  background: var(--neutral);
  color: var(--on-accent);
}
.badge.geo.none {
  background: var(--warn-line);
  color: var(--on-accent);
}
.geo-text {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
#d-confirm .kind {
  margin: 10px 0 4px;
  font-weight: 600;
}
#d-confirm textarea,
#d-marks textarea {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
}
#d-confirm .row,
#d-marks .row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.empty {
  color: var(--unfilled-ink);
  font-size: 13px;
}
.src {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.field table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 13px;
}
.field th,
.field td {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.field td .conv {
  white-space: normal;
}
.field th {
  color: var(--muted);
  font-weight: 500;
}
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.tools button,
.btn {
  background: var(--btn);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 11px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tools button:hover:not(:disabled),
.btn:hover:not(:disabled) {
  background: var(--btn-hover);
}
.tools button:disabled,
.btn:disabled {
  opacity: .4;
  cursor: default;
}
.tools button[hidden] {
  display: none;
}
#btn-back {
  border-color: var(--accent);
  color: var(--accent);
}
.field.inherited.rejected {
  border-color: var(--neutral);
  background: var(--neutral-fill);
}
.field.inherited.rejected p {
  text-decoration: line-through;
  color: var(--muted);
}
.badge.rejected {
  background: var(--neutral);
  color: var(--on-accent);
}
.reason {
  color: var(--warn);
  font-size: 13px;
}
.naming {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
#d-naming.naming {
  margin: 4px 0 6px;
  padding: 0;
  border: 0;
}
#d-naming .nm-form {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hover);
}
.naming:empty {
  display: none;
}
.naming h3 {
  font-size: 12px;
  margin: 0 0 8px;
}
.naming input[type=text] {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  margin-bottom: 6px;
}
.naming label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0;
}
.naming button {
  margin-top: 6px;
  background: var(--btn);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#partlist li .naming-unverified {
  color: var(--warn);
  font-style: italic;
}
.who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.who > a {
  color: var(--ink);
  background: var(--btn);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font: 600 13px/1 var(--ui);
  text-decoration: none;
  cursor: pointer;
}
.who > a:hover {
  border-color: var(--accent);
}
.search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 8px 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--btn);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.search-btn:hover {
  color: var(--ink);
}
.search-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
kbd {
  font: 600 11px var(--ui);
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--hover);
  color: var(--muted);
}
.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.icon-btn:hover {
  background: var(--accent-wash);
}
.icon-btn:active {
  transform: scale(.94);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--navy);
  color: var(--sand);
  font: 700 13px/1 var(--ui);
  letter-spacing: .02em;
  cursor: pointer;
}
.avatar:hover {
  box-shadow: 0 0 0 3px var(--glow);
}
.user-wrap {
  position: relative;
}
.user-menu {
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 30;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 50px var(--shadow);
  padding: 6px;
  display: grid;
}
.user-menu[hidden] {
  display: none;
}
.user-menu-head {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  white-space: normal;
}
.user-menu-head strong {
  color: var(--ink);
  font-size: 14px;
}
.user-menu-head .role {
  justify-self: start;
  margin-top: 4px;
  font: 700 10.5px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--hover);
  color: var(--ink);
}
.menu-item {
  text-align: left;
  font: inherit;
  font-size: 14px;
  background: none;
  border: 0;
  padding: 10px;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.menu-item:hover {
  background: var(--hover);
}
#labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
#labels .leader {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}
#labels .anchor {
  fill: var(--accent);
}
#labels .label {
  font:
    600 13px system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 4px;
  stroke-linejoin: round;
}
#labels .label.hidden-part {
  fill: var(--muted);
  font-weight: 400;
}
#labels .leader.unclean {
  stroke-dasharray: 4 3;
  opacity: .7;
}
#labels .label.unclean {
  fill: var(--muted);
}
.explode {
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--accent-wash-2);
}
.explode h3 {
  margin: 0 0 6px;
  font-size: 12px;
}
.explode p {
  margin: 6px 0;
  font-size: 13px;
}
.explode input[type=range] {
  width: 100%;
  margin: 6px 0 2px;
}
.explode .scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}
.explode ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
}
.explode .status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--neutral-fill);
  color: var(--neutral);
}
#subparts[hidden] {
  display: none;
}
.cols {
  display: flex;
  min-height: 0;
}
.col {
  width: 224px;
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: 14px 12px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--line);
  transition: transform .22s ease-out, opacity .22s ease-out;
}
.col.enter {
  transform: translateX(-14px);
  opacity: 0;
}
.col h3 {
  font-size: 12px;
  margin: 4px 0 0;
}
.col > .muted {
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
}
.col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.col li {
  position: relative;
  padding: 5px 30px 5px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.col li:hover {
  background: var(--hover);
}
.col li.active {
  background: var(--active-bg);
  color: var(--accent);
  outline: 1px solid var(--accent);
}
.col li .k {
  display: block;
  font: 11px/1.3 var(--mono);
  color: var(--muted);
}
.rail {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 5px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px var(--shadow);
  z-index: 4;
}
.rail button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
}
.rail button:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}
.rail button[aria-pressed=true] {
  background: var(--active-bg);
  color: var(--accent);
}
.rail button:disabled {
  opacity: .35;
  cursor: default;
}
.rail svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail .sep {
  width: 1px;
  background: var(--line);
  margin: 4px 2px;
}
#stage {
  container: stage / inline-size;
}
@media (min-width: 700px) {
  #stage:has(> #locator-frame:not([hidden])) .rail {
    left: calc((100% - clamp(140px, 16%, 220px) - 14px) / 2);
  }
}
@media (min-width: 700px) {
  @container stage (max-width: 620px) {
    #stage:has(> #locator-frame:not([hidden])) .rail {
      left: 50%;
      bottom: 121px;
      flex-wrap: wrap;
      justify-content: center;
      width: max-content;
      max-width: calc(100% - 16px);
    }
  }
}
@media (max-width: 480px) {
  .rail {
    flex-wrap: wrap;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 16px);
    bottom: 8px;
  }
  .rail .sep {
    display: none;
  }
}
.pop {
  position: absolute;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  width: 270px;
  max-height: calc(100% - 100px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px var(--shadow);
  z-index: 5;
  font-size: 13px;
}
.pop[hidden] {
  display: none;
}
.pop h3 {
  margin: 0 0 8px;
}
.pop label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
}
.pop input[type=range] {
  width: 100%;
}
.pop .axes {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.pop .axes button {
  flex: 1;
}
.pop .axes button[aria-pressed=true] {
  border-color: var(--accent);
  color: var(--accent);
}
.pop select {
  width: 100%;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 8px;
  font: inherit;
}
.pop .note {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0 0;
}
#hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#hotspots .hot {
  pointer-events: auto;
  cursor: pointer;
}
#hotspots .ring {
  fill: var(--panel);
  fill-opacity: .6;
  stroke: var(--accent);
  stroke-width: 1;
}
#hotspots .dot {
  fill: var(--accent);
}
#hotspots text {
  font:
    500 12px system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 4px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .15s;
}
#hotspots .hot:hover text,
#hotspots .hot.sel text {
  opacity: 1;
}
#hotspots .hot.sel .ring {
  stroke-width: 2;
}
#hotspots[hidden] {
  display: none;
}
#hover-name {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  white-space: nowrap;
  font:
    500 12px system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  text-shadow:
    0 0 3px var(--panel),
    0 0 3px var(--panel),
    0 0 2px var(--panel);
}
#hover-name[hidden] {
  display: none;
}
#locator-frame {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 6px 24px var(--shadow);
}
#locator-frame span {
  position: absolute;
  left: 8px;
  top: 6px;
  font: 400 9px/1 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}
#locator-frame[hidden] {
  display: none;
}
.tip {
  position: absolute;
  left: 14px;
  top: 52px;
  width: 250px;
  padding: 12px 14px 10px;
  background: var(--tip);
  color: var(--tip-ink);
  border-radius: 2px;
  box-shadow: 0 8px 22px var(--shadow);
  transform: rotate(-1.2deg);
  font-size: 13px;
  line-height: 1.45;
  z-index: 3;
}
.tip[hidden] {
  display: none;
}
.tip .tip-head {
  font: 400 10px/1 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: .7;
}
.tip .tip-nav {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
}
.tip .tip-nav button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
#stage.compare #c {
  width: 50%;
}
#c2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  display: none;
  border-left: 1px solid var(--line);
}
#stage.compare #c2 {
  display: block;
}
#compare-bar {
  position: absolute;
  right: 12px;
  top: 12px;
  display: none;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  z-index: 4;
}
#stage.compare #compare-bar {
  display: flex;
}
#compare-bar select {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  font-size: 13px;
  max-width: 260px;
}
#stage.compare .hint {
  left: 64px;
}
.view {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  padding: clamp(20px, 4vw, 48px) clamp(20px, 5vw, 64px);
  z-index: 6;
}
.view[hidden] {
  display: none;
}
.view h1 {
  font-size: 20px;
  margin: 0 0 6px;
}
.view .lede {
  color: var(--muted);
  max-width: 64ch;
  margin: 0 0 22px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--shadow);
}
.card .thumb {
  aspect-ratio: 16 / 10;
  background: var(--bg);
  display: grid;
  place-items: center;
  color: var(--brand-3);
  overflow: hidden;
}
.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card .thumb .noimg {
  font: 400 10px/1.4 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-align: center;
  padding: 12px;
  color: var(--muted);
}
.card .body {
  padding: 12px 14px 14px;
}
.card .family {
  font: 400 10px/1 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.card .title {
  font-size: 14px;
  line-height: 1.35;
}
.card .meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}
.card .star {
  position: absolute;
  right: 10px;
  top: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
}
.card .star[aria-pressed=true] {
  color: var(--accent);
  border-color: var(--accent);
}
.view .actions {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}
.notes-list li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
}
.notes-list li .where {
  font: 400 10px/1.4 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}
.notes-list li .when {
  color: var(--muted);
  font-size: 12px;
}
.notes-list li .body {
  white-space: pre-wrap;
  grid-column: 1 / -1;
}
.notes-list li button {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
}
#d-marks {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
#d-marks:empty {
  display: none;
}
#d-marks .star {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 9px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
#d-marks .star[aria-pressed=true] {
  color: var(--accent);
  border-color: var(--accent);
}
#d-marks .note {
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  white-space: pre-wrap;
}
#d-marks .note .when {
  color: var(--muted);
  font-size: 12px;
  display: block;
}
.landing {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
  background: var(--sky, var(--bg));
}
.landing[hidden] {
  display: none;
}
#site {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  transition: filter 1.5s ease;
}
.landing.inert #site {
  filter: blur(14px) saturate(.85);
  visibility: hidden;
  pointer-events: none;
}
.landing.inert {
  background: var(--intro);
}
body:has(> .landing.inert:not([hidden])) .landing {
  grid-row: 1 / -1;
}
body:has(> .landing.inert:not([hidden])) .bar {
  grid-row: 1;
  grid-column: 1;
  height: 72px;
  padding: 0 clamp(16px, 4vw, 56px);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
}
body:has(> .landing.inert:not([hidden])) .bar .brand {
  color: #fff;
}
body:has(> .landing.inert:not([hidden])) .bar .brand em {
  color: var(--sand);
}
body:has(> .landing.inert:not([hidden])) .bar .icon-btn {
  color: #fff;
}
.hero-tag {
  font-size: 13px;
  color: rgba(255, 255, 255, .9);
  margin-right: 8px;
}
.intro-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--intro);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.2s ease, visibility 0s 1.2s;
}
.intro-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(10, 16, 32, .55) 0%,
      rgba(10, 16, 32, .15) 45%,
      rgba(10, 16, 32, 0) 70%),
    linear-gradient(
      0deg,
      rgba(10, 16, 32, .45),
      transparent 30%),
    linear-gradient(
      180deg,
      rgba(10, 16, 32, .35),
      transparent 16%);
}
.landing.inert .intro-frame {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.intro-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}
.intro-title {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(620px, calc(100% - 520px));
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.intro-title .eyebrow {
  color: rgba(255, 255, 255, .85);
  font-weight: 600;
  letter-spacing: .18em;
  margin-bottom: 18px;
}
.intro-title h1 {
  margin: 0 0 18px;
  font: 600 clamp(40px, 6vw, 76px)/1.08 var(--serif);
  letter-spacing: -.01em;
  text-transform: none;
}
.intro-title .lede {
  margin: 0;
  max-width: 460px;
  font-size: 18px;
  line-height: 1.5;
  opacity: .95;
}
.landing.inert .home-card {
  left: auto;
  top: 50%;
  right: clamp(16px, 4vw, 56px);
  bottom: auto;
  transform: translateY(-50%);
  width: min(380px, calc(100% - 32px));
  grid-template-columns: 1fr;
  padding: 26px 26px 22px;
  border-color: var(--line);
  box-shadow: 0 18px 50px var(--shadow);
  color: var(--ink);
  z-index: 1;
}
.landing.inert .home-card.gone {
  transform: translateY(calc(-50% + 12px));
}
.landing.inert .home-card .intro {
  display: none;
}
.home-card .signin-title {
  display: none;
}
.landing.inert .home-card .signin-title {
  display: block;
  margin: 0 0 6px;
  font: 600 24px/1.2 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.landing.inert .home-card label {
  margin: 14px 0 6px;
  font: 600 13px/1 var(--ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.landing.inert .home-card input {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .15s;
}
.landing.inert .home-card input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
}
.landing.inert .home-card .cta.go {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font: 600 15px/1 var(--ui);
  letter-spacing: 0;
  text-transform: none;
  transition: background .15s, transform .12s var(--ease);
}
:root[data-theme=dark] .landing.inert .home-card .cta.go {
  background: var(--sand);
  color: var(--on-accent-ink);
}
.landing.inert .home-card .cta.go:hover {
  background: var(--navy-2);
}
:root[data-theme=dark] .landing.inert .home-card .cta.go:hover {
  background: var(--accent-hi);
}
.landing.inert .home-card .cta.go:active {
  transform: translateY(1px) scale(.99);
}
.landing.inert .home-card .cta.go .arrow {
  display: none;
}
.landing.inert .home-card .foot {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.landing.inert .home-note {
  color: #fff;
  background: rgba(13, 27, 42, .6);
  border-color: rgba(255, 255, 255, .18);
}
.landing.inert .home-note {
  left: auto;
  right: clamp(16px, 4vw, 56px);
  transform: translateY(-50%);
  width: min(380px, calc(100% - 32px));
  z-index: 1;
}
.home-note .note-retry {
  display: flex;
  width: fit-content;
  margin: 14px auto 0;
}
.landing.inert .home-note .note-retry {
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
@media (max-width: 900px) {
  .intro-title {
    top: 96px;
    transform: none;
    max-width: calc(100% - 32px);
  }
  .intro-title h1 {
    font-size: 40px;
  }
  .landing.inert .home-card {
    top: auto;
    bottom: 16px;
    transform: none;
    left: 16px;
    right: 16px;
    width: auto;
  }
  .landing.inert .home-card.gone {
    transform: translateY(12px);
  }
  .landing.inert .home-note {
    top: auto;
    bottom: 16px;
    transform: none;
    left: 16px;
    right: 16px;
    width: auto;
  }
  .hero-tag {
    display: none;
  }
}
.lp-more,
.lp-go {
  display: none;
}
.landing.inert > #landing-signin:not([hidden]) ~ .lp-more {
  display: grid;
}
.landing.inert:has(> #landing-signin:not([hidden])) .lp-go {
  display: inline-flex;
}
.landing.inert:has(> #landing-signin:not([hidden])) .intro-frame {
  position: relative;
  height: 100%;
}
.landing.inert:has(> #landing-signin:not([hidden])) .intro-frame::after {
  background:
    linear-gradient(
      0deg,
      var(--intro),
      transparent 22%),
    linear-gradient(
      90deg,
      rgba(10, 16, 32, .55) 0%,
      rgba(10, 16, 32, .15) 45%,
      rgba(10, 16, 32, 0) 70%),
    linear-gradient(
      180deg,
      rgba(10, 16, 32, .35),
      transparent 16%);
}
.lp-more,
.lp-go {
  transition: opacity .8s ease;
}
.landing.inert > #landing-signin.gone ~ .lp-more,
.landing.inert:has(> #landing-signin.gone) .lp-go {
  opacity: 0;
  pointer-events: none;
}
.lp-go {
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 12px 18px 11px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: rgba(13, 27, 42, .35);
  color: #fff;
  font: 600 14px/1 var(--ui);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .8s ease, background .2s ease;
}
.lp-go:hover {
  background: rgba(255, 255, 255, .16);
}
.lp-go .arrow {
  transition: transform .25s ease;
}
.lp-go:hover .arrow {
  transform: translateY(2px);
}
.lp-more {
  position: relative;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 clamp(32px, 5vw, 72px);
  align-items: start;
  padding: clamp(56px, 8vw, 104px) max(clamp(16px, 4vw, 56px), calc((100% - 1180px) / 2)) 40px;
  background: var(--intro);
  color: #fff;
}
.lp-more .eyebrow {
  color: var(--sand);
  font-weight: 600;
  letter-spacing: .18em;
  margin-bottom: 14px;
}
.lp-more h2 {
  margin: 0 0 24px;
  font: 600 clamp(28px, 3.2vw, 40px)/1.12 var(--serif);
  letter-spacing: -.01em;
  text-transform: none;
  color: #fff;
}
.lp-courses {
  scroll-margin-top: 96px;
}
.lp-modules {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.lp-modules li,
.lp-sim {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 6px 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.lp-kicker {
  font: 600 11px/1.4 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.lp-name {
  font: 600 20px/1.3 var(--serif);
  color: #fff;
}
.lp-scenarios {
  grid-column: 2;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  counter-reset: lp-scenario;
  display: grid;
  gap: 8px;
}
.lp-scenarios li {
  counter-increment: lp-scenario;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .9);
}
.lp-scenarios li::before {
  content: counter(lp-scenario, decimal-leading-zero);
  flex: none;
  font: 600 12px/1 var(--ui);
  color: var(--sand);
}
.lp-sample figure {
  margin: 0;
}
.lp-sample video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.lp-sample figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .78);
}
.lp-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.lp-foot p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}
.lp-more .pill {
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.lp-more .pill:hover {
  background: #fff;
  color: var(--intro);
}
.lp-more :focus-visible,
.lp-go:focus-visible {
  outline-color: #fff;
}
body:has(> .landing.inert.scrolled:not([hidden])) .bar {
  background: color-mix(in srgb, var(--intro) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .1);
}
@media (prefers-reduced-transparency: reduce) {
  body:has(> .landing.inert.scrolled:not([hidden])) .bar {
    background: var(--intro);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (max-width: 900px) {
  .landing.inert:has(> #landing-signin:not([hidden])) .intro-frame {
    height: auto;
  }
  .landing.inert:has(> #landing-signin:not([hidden])) .intro-title {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    max-width: 640px;
    padding: 88px clamp(16px, 4vw, 56px) 124px;
  }
  .lp-go {
    margin-top: 22px;
  }
  .landing.inert > #landing-signin.home-card:not([hidden]) {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    width: auto;
    max-width: 560px;
    margin: -100px clamp(16px, 4vw, 56px) 0;
  }
  .landing.inert > #landing-signin.home-card.gone:not([hidden]) {
    transform: translateY(12px);
  }
  .lp-more {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 56px;
  }
  .lp-sample {
    margin-top: 48px;
  }
}
@media (max-width: 480px) {
  .lp-modules li,
  .lp-sim {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .lp-scenarios {
    grid-column: 1;
  }
  .lp-name {
    font-size: 19px;
  }
}
.landing.behind #site {
  filter: blur(14px) saturate(.85);
  pointer-events: none;
}
.landing.behind .site-note,
.landing.behind #site-labels,
.landing.behind .site-card,
.landing.behind .coast-menu {
  display: none;
}
.landing.returning #site-labels {
  display: none;
}
.landing.inert .site-note {
  display: none;
}
#site-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.site-keys {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.site-label {
  position: absolute;
  transform: translate(-50%, -100%);
  font: 400 10px/1.2 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 8px;
  white-space: nowrap;
}
.site-label.lib {
  color: var(--accent);
  border-color: var(--accent);
}
.site-label.key {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--accent);
  background: var(--glass);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.site-label.key::after {
  display: none;
}
.site-label.key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.site-label.key.area {
  width: 34px;
  height: 34px;
  border-width: 2px;
}
.site-label.key.area::before {
  width: 11px;
  height: 11px;
}
.site-label.key.hot {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.12);
}
.site-label.key.hot::before {
  background: var(--on-accent-ink);
}
.pill.site-back {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 3;
  padding: 11px 20px 9px;
  background: var(--panel);
  box-shadow: 0 6px 24px var(--shadow);
}
.pill.site-back[hidden] {
  display: none;
}
.landing.behind .pill.site-back,
.landing.inert .pill.site-back {
  display: none;
}
.site-label.mass {
  color: var(--muted);
}
.site-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 12px;
  background: var(--line);
}
.site-card {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: max(320px, 25%);
  display: flex;
  flex-direction: column;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px var(--shadow);
  z-index: 5;
  font:
    400 14px/1.55 "Jost",
    system-ui,
    sans-serif;
}
.site-card[hidden] {
  display: none;
}
.site-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 44px 36px 32px;
}
@media (max-width: 699px) {
  .site-card {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 52%;
    border-radius: 16px 16px 0 0;
  }
  .site-card-body {
    padding: 36px 20px 20px;
  }
  .landing:has(> .site-card:not([hidden])) .site-note {
    bottom: auto;
    top: 78px;
  }
}
.site-card .close {
  position: absolute;
  left: 0;
  top: 32px;
  transform: translateX(-50%);
  z-index: 1;
  width: 56px;
  height: 56px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 10px 26px var(--shadow);
  cursor: pointer;
}
.site-card .close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.site-card .close:hover {
  border-color: var(--accent);
}
.site-card .close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (max-width: 699px) {
  .site-card .close {
    left: 16px;
    top: 0;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
  }
}
.site-card .family {
  font: 400 11px/1.2 var(--display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.site-card h2 {
  margin: 10px 0 14px;
  font: 600 26px/1.12 var(--serif);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
}
.site-card .rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 18px;
}
.site-card .thumb {
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 8px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 400 11.5px/1 var(--display);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 15px 26px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.pill .arrow {
  transition: transform .35s ease;
}
.pill:hover {
  background: var(--accent);
  color: var(--on-accent-ink);
}
.pill:hover .arrow {
  transform: translateX(4px);
}
.site-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.site-card .field h3 {
  margin: 0 0 6px;
  font-size: 13px;
}
.site-card .actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.site-note {
  position: absolute;
  left: 20px;
  bottom: 16px;
  font: 400 10px/1.4 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 6px 10px;
  border-radius: 3px;
}
.home-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(780px, calc(100% - 32px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  padding: 28px 30px 22px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px var(--shadow);
  transition: opacity .8s ease, transform .8s ease;
}
.home-card[hidden] {
  display: none;
}
.home-card.gone {
  opacity: 0;
  transform: translate(-50%, -46%);
  pointer-events: none;
}
.home-card .intro {
  padding-right: 28px;
  border-right: 1px solid var(--line);
}
.home-card .foot {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .home-card {
    grid-template-columns: 1fr;
  }
  .home-card .intro {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
}
.home-card h1 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.home-card .lede {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}
.home-card .fields label:first-child {
  margin-top: 0;
}
.home-card label {
  display: block;
  margin: 12px 0 5px;
  font: 400 10px/1 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}
.home-card input {
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  font: inherit;
}
.home-card input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.home-card .cta {
  margin-top: 20px;
  font-size: 13px;
}
.home-card .cta:disabled {
  opacity: .5;
  cursor: default;
}
.home-card .msg {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid var(--warn-line);
  background: var(--warn-fill);
  color: var(--warn);
}
.home-card .foot {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.home-note {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 460px;
  text-align: center;
  padding: 18px 22px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
  border-radius: 14px;
}
.home-note[hidden] {
  display: none;
}
.webgl-dialog {
  width: min(540px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: auto;
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
}
.webgl-dialog::backdrop {
  background: rgba(10, 16, 32, .62);
}
.webgl-dialog h2 {
  margin: 0 0 8px;
  font: 600 24px/1.2 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-wrap: balance;
}
.webgl-dialog p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.webgl-dialog ol {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}
.webgl-dialog .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.webgl-dialog .pill {
  padding: 13px 20px 11px;
  letter-spacing: .12em;
  text-align: center;
  line-height: 1.3;
  text-wrap: balance;
}
.webgl-dialog .pill.go {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
:root[data-theme=dark] .webgl-dialog .pill.go {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--on-accent-ink);
}
@media (max-width: 480px) {
  .webgl-dialog {
    padding: 22px 18px 18px;
  }
  .webgl-dialog h2 {
    font-size: 22px;
  }
  .webgl-dialog .pill {
    flex: 1 1 100%;
    justify-content: center;
  }
}
.eyebrow {
  font: 400 11px/1 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.brand {
  cursor: pointer;
}
.tour[hidden] {
  display: none;
}
.tour {
  position: fixed;
  inset: 0;
  z-index: 50;
}
.tour-spot {
  position: fixed;
  border: 2px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 0 0 9999px var(--veil);
  pointer-events: none;
  transition:
    left .25s ease,
    top .25s ease,
    width .25s ease,
    height .25s ease;
}
.tour-card {
  position: fixed;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 20px;
  box-shadow: 0 18px 50px var(--shadow);
}
.tour-step {
  font: 400 10px/1 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.tour-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.tour-card p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}
.tour-again {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}
.tour-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tour-spacer {
  flex: 1;
}
.tour-nav button {
  background: var(--btn);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tour-nav button.primary {
  background: var(--accent);
  color: var(--on-accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}
.tour-nav button:disabled {
  opacity: .4;
  cursor: default;
}
#btn-help {
  border-color: var(--accent);
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .coast-menu,
  .menu-card,
  .menu-sheet,
  .site-equip,
  .equip-card,
  .equip-sheet,
  .col,
  .card,
  .cta .arrow,
  .tour-spot,
  #stage,
  .panel,
  .cols,
  .rail,
  .hint,
  .tip,
  #locator-frame,
  #compare-bar,
  .intro-frame,
  #site,
  .home-card {
    transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .menu-card,
  .menu-sheet,
  .equip-card,
  .equip-sheet,
  .palette,
  .bar,
  .panel,
  .hint,
  .col,
  .rail,
  .pop,
  #compare-bar,
  .card,
  .site-label,
  .site-note,
  .site-card,
  .tour-card,
  .home-card,
  .home-note {
    background: var(--panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 28, .35);
  z-index: 60;
  transition: opacity .15s;
}
.scrim.enter {
  opacity: 0;
}
.palette {
  position: fixed;
  z-index: 61;
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 24px));
  border-radius: 16px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px var(--shadow);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.palette.enter {
  opacity: 0;
  transform: translate(-50%, -6px) scale(.98);
}
.palette-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.palette-head svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: none;
}
.palette-input {
  flex: 1;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  outline: none;
}
.palette-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 52vh;
  overflow: auto;
  overscroll-behavior: contain;
}
.palette-item {
  display: grid;
  grid-template-columns: 74px 1fr;
  column-gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.palette-item[aria-selected=true] {
  background: var(--active-bg);
}
.palette-item .kind {
  grid-row: span 2;
  align-self: center;
  font: 800 10.5px/1 var(--ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.palette-item .k-draft,
.palette-item .k-inherited {
  color: var(--warn-ink);
}
.palette-item .k-content {
  color: var(--ok);
}
.palette-item .label {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.palette-item .sub {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-empty {
  padding: 16px;
  color: var(--muted);
}
.palette-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
#d-content .field {
  transition: background-color 1.2s var(--ease);
}
#d-content .field.flash {
  background: var(--active-bg);
  transition: none;
}
.parts-toggle,
.sheet-close {
  display: none;
}
@media (min-width: 700px) and (max-width: 1100px) {
  .bar {
    gap: 12px;
  }
  .nav button,
  .nav a {
    padding: 11px 7px;
    font-size: 13.5px;
  }
  .nav button[aria-current=page]::after {
    left: 7px;
    right: 7px;
  }
  .search-btn span,
  .search-btn kbd,
  #units {
    display: none;
  }
  main {
    grid-template-columns: minmax(0, 1fr);
  }
  #stage {
    grid-column: 1 / -1;
  }
  #subparts {
    display: none;
  }
  #parts {
    grid-column: 1 / -1;
    position: absolute;
    z-index: 8;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 85vw);
    transform: translateX(-104%);
    transition: transform .25s var(--ease);
    box-shadow: 0 18px 50px var(--shadow);
  }
  main.show-parts #parts {
    transform: none;
  }
  #detail {
    grid-column: 1 / -1;
    position: absolute;
    z-index: 9;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 52%;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px var(--shadow);
    transform: translateY(104%);
    transition: transform .28s var(--ease);
  }
  main.show-detail #detail {
    transform: none;
  }
  main.show-detail .rail {
    bottom: calc(52% + 12px);
  }
  .parts-toggle {
    display: inline-flex;
    align-items: center;
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 5;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: var(--ink);
    font: 600 14px/1 var(--ui);
    cursor: pointer;
  }
  .hint {
    left: 96px;
  }
  .tip {
    top: 62px;
  }
  .sheet-close {
    display: inline-grid;
    position: sticky;
    top: 0;
    float: right;
    margin: -6px -8px 0 0;
    font-size: 22px;
    z-index: 1;
  }
  .rail button {
    width: 44px;
    height: 44px;
  }
  #partlist li .ti {
    min-height: 44px;
  }
}
@media (max-width: 1100px) {
  .search-btn span,
  .search-btn kbd,
  #units {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 899px), (max-width: 419px) {
  .brand {
    font-size: 0;
    gap: 0;
  }
}
@media (max-width: 767px) {
  .bar {
    gap: 8px;
    padding: 0 12px;
  }
  .bar .nav-toggle:not([hidden]) {
    display: inline-grid;
    margin-left: -6px;
  }
  .nav {
    display: none;
  }
  .nav.open:not([hidden]) {
    display: grid;
    position: absolute;
    left: 8px;
    top: calc(100% + 6px);
    z-index: 30;
    width: min(260px, calc(100vw - 16px));
    max-height: calc(100dvh - 72px);
    overflow: auto;
    gap: 2px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 50px var(--shadow);
  }
  .nav.open button,
  .nav.open a {
    text-align: left;
    font-size: 15px;
    padding: 12px;
  }
  .nav.open button[aria-current=page]::after {
    left: 0;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 3px;
    height: auto;
  }
  .user-menu {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 72px);
    overflow: auto;
  }
}
.field-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.field-actions .btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding: 0 8px;
  min-height: 26px;
  font-size: 12px;
}
.field-actions .btn.ghost:hover,
.field-actions .btn.ghost[aria-expanded=true] {
  color: var(--ink);
  background: var(--hover);
}
.field-extra:empty {
  display: none;
}
.field-extra {
  margin-top: 8px;
}
.small {
  font-size: 12px;
}
.err {
  color: var(--unfilled-ink);
  font-size: 12.5px;
  margin: 6px 0 0;
}
.propose {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hover);
}
.propose p {
  margin: 0;
}
.propose textarea,
.propose input[type=text],
.propose .rows-editor input,
.p-decide input[type=text] {
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
}
.propose textarea {
  min-height: 96px;
  resize: vertical;
}
.propose .row,
.p-decide .row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.btn.primary {
  background: var(--accent);
  color: var(--on-accent-ink);
  border-color: var(--accent);
}
.btn.primary:hover:not(:disabled) {
  background: var(--accent-hi);
}
.btn.danger {
  color: var(--unfilled-ink);
  border-color: color-mix(in srgb, var(--unfilled-ink) 40%, transparent);
}
.btn.ghost {
  background: transparent;
}
.rows-editor {
  border-collapse: collapse;
  width: 100%;
}
.rows-editor th {
  text-align: left;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  padding: 0 4px 2px;
  text-transform: capitalize;
}
.rows-editor td {
  padding: 2px;
}
.icon-btn.sm {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 16px;
}
.proposal {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.proposal.verified {
  border-color: var(--ok);
}
.proposal.rejected {
  border-color: var(--neutral);
}
.p-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
}
.p-head .p-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.p-head .p-link:hover {
  text-decoration: underline;
}
.p-meta {
  font-size: 12px;
  margin-top: 4px;
}
.p-stale {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 12.5px;
  font-weight: 600;
}
.p-clear {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px dashed var(--mark);
  color: var(--unfilled-ink);
  font-size: 12.5px;
  font-weight: 700;
}
.diff {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.diff del {
  background: color-mix(in srgb, var(--unfilled-ink) 22%, transparent);
  color: var(--ink);
  text-decoration: line-through;
  text-decoration-color: var(--unfilled-ink);
  border-radius: 3px;
}
.diff ins {
  background: color-mix(in srgb, var(--ok) 26%, transparent);
  color: var(--ink);
  text-decoration: none;
  border-radius: 3px;
}
.p-preview {
  margin-top: 8px;
  font-size: 12.5px;
}
.p-preview summary {
  cursor: pointer;
  color: var(--muted);
}
.p-preview .field {
  margin-top: 6px;
}
.p-decide {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.p-decide:empty {
  display: none;
}
.p-decide label {
  font-size: 12px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}
.p-verdict {
  font-size: 12.5px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.history h4 {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 4px;
}
.history .h {
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.history .h .small {
  color: var(--muted);
}
.view .tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
}
.view .proposals {
  max-width: 860px;
}
.toasts {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  z-index: 40;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--on-accent);
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px var(--shadow);
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: auto;
}
.toast.in {
  opacity: 1;
  transform: none;
}
.toast.ok {
  border-color: var(--ok);
}
.toast.err {
  border-color: var(--unfilled-ink);
}
.toast .btn {
  background: transparent;
  color: var(--sand);
  border-color: var(--sand);
}
.toast .btn:hover:not(:disabled) {
  background: var(--sand);
  color: var(--on-accent-ink);
}
.coast-menu {
  --menu-w: min(400px, 27vw);
  --menu-x: min(40px, 3vw);
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.landing.at-coast .coast-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease;
}
.landing.inert .coast-menu {
  display: none;
}
.coast-menu .mc-col {
  --rows: 3;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--menu-w);
  min-height: calc((min(560px, calc(100% - 120px)) - 36px) / 3 * var(--rows) + 18px * (var(--rows) - 1));
  display: grid;
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: 18px;
}
.coast-menu .mc-col.left {
  left: var(--menu-x);
}
.coast-menu .mc-col.right {
  right: var(--menu-x);
}
.coast-menu .menu-toggle,
.coast-menu .sheet-head {
  display: none;
}
.coast-menu .menu-sheet {
  display: contents;
}
.menu-card {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 22px 24px 20px;
  border-radius: 18px;
  border: 1px solid var(--glass-menu-edge);
  background:
    var(--glass-menu-grain),
    linear-gradient(
      165deg,
      var(--glass-menu-sheen),
      transparent 45%),
    var(--glass-menu);
  backdrop-filter: var(--glass-menu-filter);
  -webkit-backdrop-filter: var(--glass-menu-filter);
  box-shadow: inset 0 1px 0 var(--glass-menu-hi), 0 14px 36px var(--shadow);
  color: var(--ink);
  text-shadow: var(--glass-menu-halo);
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    transform .2s var(--ease),
    border-color .2s ease,
    box-shadow .2s ease;
}
.menu-card > span:not(.mc-icon) {
  grid-column: 2;
}
.menu-card .mc-icon {
  grid-row: 1 / span 3;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid var(--line);
}
.menu-card .mc-icon svg {
  width: 26px;
  height: 26px;
}
.menu-card .mc-title {
  font: 600 24px/1.18 var(--serif);
  letter-spacing: -.005em;
}
.menu-card .mc-desc {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.menu-card .mc-count {
  align-self: end;
  margin-top: 10px;
  font: 700 12px/1.35 var(--ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.menu-card .mc-count[hidden] {
  display: none;
}
.menu-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 var(--glass-menu-hi), 0 18px 44px var(--shadow);
}
.menu-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.menu-card.off {
  cursor: default;
}
.menu-card.off:hover {
  transform: none;
  border-color: var(--glass-menu-edge);
  box-shadow: inset 0 1px 0 var(--glass-menu-hi), 0 14px 36px var(--shadow);
}
.menu-card.off .mc-icon {
  background: var(--neutral-fill);
  color: var(--muted);
}
.menu-card.off .mc-count {
  color: var(--ink);
}
@media (min-width: 1101px) and (max-height: 620px) {
  .menu-card .mc-desc {
    display: none;
  }
  .menu-card {
    padding: 14px 20px;
  }
}
@media (max-width: 1100px) {
  .coast-menu .menu-toggle {
    display: inline-flex;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 112px;
    height: 44px;
    padding: 0 14px;
    justify-content: center;
    gap: 10px;
    pointer-events: auto;
    background: var(--panel);
    box-shadow: 0 6px 24px var(--shadow);
  }
  .coast-menu .menu-sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(460px, 92vw);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 22px;
    pointer-events: auto;
    background:
      var(--glass-menu-grain),
      linear-gradient(
        165deg,
        var(--glass-menu-sheen),
        transparent 30%),
      var(--glass-menu);
    backdrop-filter: var(--glass-menu-filter);
    -webkit-backdrop-filter: var(--glass-menu-filter);
    border-right: 1px solid var(--glass-menu-edge);
    box-shadow: inset -1px 0 0 var(--glass-menu-hi), 18px 0 50px var(--shadow);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
  }
  .coast-menu.open .menu-sheet {
    transform: none;
    visibility: visible;
    transition: transform .28s var(--ease);
  }
  .coast-menu .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .coast-menu .sheet-head h2 {
    margin: 0;
    font: 600 20px/1.2 var(--serif);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    text-shadow: var(--glass-menu-halo);
  }
  .coast-menu .sheet-x {
    font-size: 24px;
    line-height: 1;
  }
  .coast-menu .mc-col {
    display: contents;
  }
  .menu-card {
    background: var(--accent-wash);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: inset 0 1px 0 var(--glass-menu-hi);
    flex: none;
    min-height: 96px;
    padding: 18px 20px;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
  }
  .menu-card .mc-icon {
    width: 48px;
    height: 48px;
  }
  .menu-card .mc-title {
    font-size: 22px;
  }
  .menu-card:hover,
  .menu-card.off:hover {
    box-shadow: inset 0 1px 0 var(--glass-menu-hi);
  }
}
.site-equip {
  --menu-w: min(400px, 27vw);
  --menu-x: min(40px, 3vw);
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.landing.at-site .site-equip {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease;
}
.landing.inert .site-equip,
.landing.behind .site-equip {
  display: none;
}
.site-equip .eq-col {
  --rows: 2;
  position: absolute;
  top: 50%;
  right: var(--menu-x);
  transform: translateY(-50%);
  width: var(--menu-w);
  min-height: calc((min(560px, calc(100% - 120px)) - 36px) / 3 * var(--rows) + 18px * (var(--rows) - 1));
  display: grid;
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: 18px;
}
.site-equip .equip-toggle,
.site-equip .sheet-head {
  display: none;
}
.site-equip .equip-sheet {
  display: contents;
}
.equip-card {
  pointer-events: auto;
  display: grid;
  grid-template-columns: clamp(72px, 7vw, 104px) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 20px 22px 18px 18px;
  border-radius: 18px;
  border: 1px solid var(--glass-menu-edge);
  background:
    var(--glass-menu-grain),
    linear-gradient(
      165deg,
      var(--glass-menu-sheen),
      transparent 45%),
    var(--glass-menu);
  backdrop-filter: var(--glass-menu-filter);
  -webkit-backdrop-filter: var(--glass-menu-filter);
  box-shadow: inset 0 1px 0 var(--glass-menu-hi), 0 14px 36px var(--shadow);
  color: var(--ink);
  text-shadow: var(--glass-menu-halo);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    transform .2s var(--ease),
    border-color .2s ease,
    box-shadow .2s ease;
}
.equip-card > span:not(.eq-pic) {
  grid-column: 2;
}
.equip-card .eq-pic {
  grid-row: 1 / span 4;
  align-self: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid var(--line);
}
.equip-card .eq-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.equip-card .eq-pic svg {
  width: 34px;
  height: 34px;
}
.equip-card .eq-title {
  font: 600 24px/1.18 var(--serif);
  letter-spacing: -.005em;
}
.equip-card .eq-note {
  margin-top: 4px;
  font: 600 12px/1.35 var(--ui);
  letter-spacing: .02em;
  color: var(--ink);
}
.equip-card .eq-line {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.equip-card .eq-flag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  text-shadow: none;
  font: 800 10.5px/1.5 var(--ui);
  letter-spacing: .06em;
  vertical-align: 1px;
}
.equip-card .eq-count {
  align-self: end;
  margin-top: 8px;
  font: 700 12px/1.35 var(--ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.equip-card .eq-note[hidden],
.equip-card .eq-count[hidden] {
  display: none;
}
.equip-card:hover,
.equip-card.hot {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 var(--glass-menu-hi), 0 18px 44px var(--shadow);
}
.equip-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (min-width: 1101px) and (max-height: 620px) {
  .equip-card .eq-line {
    display: none;
  }
  .equip-card {
    padding: 14px 20px 14px 14px;
  }
}
@media (max-width: 1100px) {
  .site-equip.open {
    z-index: 4;
  }
  .site-equip .equip-toggle {
    display: inline-flex;
    position: absolute;
    right: 16px;
    top: 20px;
    width: 160px;
    height: 44px;
    padding: 0 14px;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    pointer-events: auto;
    background: var(--panel);
    box-shadow: 0 6px 24px var(--shadow);
  }
  .site-equip .equip-sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(460px, 92vw);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 22px;
    pointer-events: auto;
    background:
      var(--glass-menu-grain),
      linear-gradient(
        195deg,
        var(--glass-menu-sheen),
        transparent 30%),
      var(--glass-menu);
    backdrop-filter: var(--glass-menu-filter);
    -webkit-backdrop-filter: var(--glass-menu-filter);
    border-left: 1px solid var(--glass-menu-edge);
    box-shadow: inset 1px 0 0 var(--glass-menu-hi), -18px 0 50px var(--shadow);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
  }
  .site-equip.open .equip-sheet {
    transform: none;
    visibility: visible;
    transition: transform .28s var(--ease);
  }
  .site-equip .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .site-equip .sheet-head h2 {
    margin: 0;
    font: 600 20px/1.2 var(--serif);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    text-shadow: var(--glass-menu-halo);
  }
  .site-equip .sheet-x {
    font-size: 24px;
    line-height: 1;
  }
  .site-equip .eq-col {
    display: contents;
  }
  .equip-card {
    background: var(--glass);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: inset 0 1px 0 var(--glass-menu-hi);
    flex: none;
    min-height: 96px;
    padding: 16px 18px 16px 14px;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 16px;
  }
  .equip-card .eq-title {
    font-size: 22px;
  }
  .equip-card:hover,
  .equip-card.hot {
    box-shadow: inset 0 1px 0 var(--glass-menu-hi);
  }
}
@media (max-width: 439px) {
  .site-equip .equip-toggle {
    top: 72px;
  }
}
.study .study-pick label {
  font-size: 13px;
  color: var(--muted);
}
.study .study-pick select {
  max-width: min(560px, 100%);
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.study .study-body {
  max-width: 780px;
}
.study .study-rec {
  margin: 0 0 30px;
}
.study .study-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-bottom: 6px;
}
.study .study-head h2,
.study .study-head h3 {
  margin: 0;
  font: 600 21px/1.25 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.study .study-head h3 {
  font-size: 17px;
}
.study .study-head .mono {
  font: 12px/1.3 var(--mono);
}
.study .study-open {
  margin-left: auto;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.study .study-open:hover {
  text-decoration: underline;
}
.study .study-parts {
  margin: 40px 0 14px;
  font: 400 11px/1.2 var(--display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}
:root[data-theme=dark] body,
:where(:root[data-theme=dark]) .view {
  background-image: var(--page-img);
}
:root[data-theme=dark] body:not(:has(> .landing.inert:not([hidden]))) .bar {
  background-image: var(--bar-img);
  box-shadow: var(--bar-shadow);
}
:root[data-theme=dark] main:not(.away) #stage {
  background-image: var(--stage-veil);
}
:root[data-theme=dark] .nav button[aria-current=page]::after {
  box-shadow: var(--tab-glow);
}
:root[data-theme=dark] .col,
:root[data-theme=dark] .panel {
  background-image: var(--panel-light), var(--surface-img);
}
:root[data-theme=dark] .card,
:root[data-theme=dark] .proposal,
:root[data-theme=dark] .rail,
:root[data-theme=dark] .hint,
:root[data-theme=dark] #compare-bar,
:root[data-theme=dark] .site-label:not(.key),
:root[data-theme=dark] .site-note {
  background-image: var(--surface-img);
  box-shadow: var(--elev-1);
}
:root[data-theme=dark] .user-menu,
:root[data-theme=dark] .palette,
:root[data-theme=dark] .pop,
:root[data-theme=dark] .tour-card,
:root[data-theme=dark] .home-card,
:root[data-theme=dark] .home-note,
:root[data-theme=dark] .site-card,
:root[data-theme=dark] .toast {
  background-image: var(--panel-light), var(--surface-img);
  box-shadow: var(--elev-2);
}
:root[data-theme=dark] .site-card .close {
  background-image: var(--btn-img);
  box-shadow: var(--btn-shadow), 0 10px 26px var(--shadow);
}
:root[data-theme=dark] .btn:not(.primary):not(.ghost),
:root[data-theme=dark] .tools button,
:root[data-theme=dark] .search-btn,
:root[data-theme=dark] .who > a,
:root[data-theme=dark] .tour-nav button:not(.primary) {
  background-image: var(--btn-img);
  box-shadow: var(--btn-shadow);
}
:root[data-theme=dark] .btn.primary,
:root[data-theme=dark] .tour-nav button.primary,
:root[data-theme=dark] .pill:hover,
:root[data-theme=dark] .card button:not(.star):not(.rev):not(.reset):not(.notes):not(.todo-refresh):not(.todo-more),
:root[data-theme=dark] .landing.inert .home-card .cta.go {
  background-image: var(--accent-img);
  box-shadow: var(--accent-shadow);
}
:root[data-theme=dark] .landing.inert .home-card .cta.go {
  background-color: var(--accent);
}
:root[data-theme=dark] .card input,
:root[data-theme=dark] .home-card input,
:root[data-theme=dark] .ws-filter input,
:root[data-theme=dark] .pick select,
:root[data-theme=dark] .study-pick select,
:root[data-theme=dark] .propose textarea,
:root[data-theme=dark] .propose input[type=text],
:root[data-theme=dark] .p-decide input[type=text],
:root[data-theme=dark] .diff {
  box-shadow: var(--field-shadow);
}
:root[data-theme=dark] .avatar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme=dark] .col,
  :root[data-theme=dark] .panel {
    background-image: var(--surface-img);
  }
}