@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

  :root {
    --bg: #08090a;
    --panel: #0f1011;
    --panel-2: #151617;
    --panel-3: #1c1d1f;
    --border: rgba(255,255,255,.08);
    --border-2: rgba(255,255,255,.12);
    --text: #f7f8f8;
    --text-2: #d0d6e0;
    --muted: #8a8f98;
    --faint: #7c8089;
    --yellow: #f2c94c;
    --green: #4cb782;
    --red: #eb5757;
    --indigo: #7170ff;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --gutter: clamp(20px, 5.5vw, 80px);
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 "Inter", -apple-system, system-ui, sans-serif; font-feature-settings: "cv01", "ss03"; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

  /* Nav */
  .nav { position: sticky; top: 0; z-index: 50; background: rgba(8,9,10,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
  .nav .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
  .mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--text); position: relative; }
  .mark::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--text); }
  .nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--muted); }
  .nav ul a:hover { color: var(--text); }
  .pill { display: inline-block; background: var(--text); color: var(--bg) !important; font-weight: 510; padding: 7px 14px; border-radius: 999px; font-size: 14px; }

  /* Hero */
  .hero { padding: clamp(96px, 16vh, 168px) 0 56px; position: relative; }
  .hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 700px; background: radial-gradient(60% 50% at 30% 0%, rgba(255,255,255,.05), transparent 70%); pointer-events: none; }
  .hero h1 { font-weight: 560; font-size: clamp(40px, 5.4vw, 66px); line-height: 1.06; letter-spacing: -.035em; margin: 0; max-width: 21ch; }
  .hero .row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
  .hero .row p { margin: 0; color: var(--muted); font-size: 17px; }
  .hero .now { font-size: 15px; color: var(--muted); }
  .hero .now b { color: var(--text); font-weight: 510; margin-right: 8px; }
  .hero .now:hover { color: var(--text); }

  .hero h1 span { display: block; color: var(--muted); }
  /* Globe */
  .hero { min-height: 0; overflow: hidden; padding: clamp(150px, 24vh, 220px) 0 clamp(80px, 12vh, 120px); }
  .hero .wrap { position: relative; z-index: 2; }

  /* App window */
  .app { margin: 64px auto 0; max-width: 1340px; padding: 0 clamp(12px, 3vw, 48px); position: relative; }
  .app::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 220px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
  .window { background: var(--panel); border: 1px solid var(--border-2); border-radius: 16px; display: grid; grid-template-columns: 240px 1fr; overflow: hidden; height: 600px; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 40px 120px rgba(0,0,0,.6); font-size: 13.5px; }
  .side { padding: 14px 10px; border-right: 1px solid var(--border); background: #0c0d0e; }
  .side p { margin: 0; padding: 6px 10px; border-radius: 6px; color: var(--text-2); display: flex; align-items: center; gap: 10px; }
  .side p.on { background: var(--panel-3); color: var(--text); }
  .main { display: grid; grid-template-rows: 48px 1fr; min-width: 0; }
  .body { display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
  code { font-family: var(--mono); font-size: .88em; background: var(--panel-3); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; }
  .ev { display: flex; gap: 10px; align-items: baseline; color: var(--muted); font-size: 13px; padding: 6px 0; }
  .ev b { color: var(--text-2); font-weight: 510; }
  .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); transform: translateY(-1px); }
  .dot.g { background: var(--green); } .dot.y { background: var(--yellow); } .dot.i { background: var(--indigo); } .dot.r { background: var(--red); }
  .steps { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 12.5px; }
  .steps div { display: flex; gap: 8px; align-items: baseline; }
  .steps div::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; transform: translateY(-1px); }
  .steps div.run::before { background: var(--yellow); box-shadow: 0 0 0 3px rgba(242,201,76,.15); }

  /* Feature sections */
  .feature { padding: 140px 0 0; }
  .feature .head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .feature h2 { font-weight: 560; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.035em; margin: 0; }
  .feature .lead { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.42; color: var(--text-2); margin: 0; letter-spacing: -.012em; font-weight: 400; }
  .feature .more { display: inline-block; margin-top: 28px; color: var(--muted); font-size: 15px; }
  .feature .more:hover { color: var(--text); }

  .panel { background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; overflow: hidden; font-size: 13px; }

  .shift { width: 100%; border-collapse: collapse; margin-top: 64px; font-size: 16px; }
  .shift th, .shift td { text-align: left; vertical-align: top; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--border); }
  .shift thead th { font-size: 13px; font-weight: 510; color: var(--faint); padding-top: 0; padding-bottom: 14px; }
  .shift tbody th { width: 22%; font-weight: 510; color: var(--text); }
  .shift td { width: 39%; }
  .shift td:nth-child(2) { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.18); }
  .shift td:nth-child(3) { color: var(--text-2); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  @media (max-width: 760px) {
    .shift thead { display: none; }
    .shift tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--border); }
    .shift th, .shift td, .shift tbody th, .shift td:nth-child(2), .shift td:nth-child(3) { display: block; width: auto; border: 0; padding: 4px 0; }
  }
  .world { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--border); align-items: start; }
  .world .cap { display: block; color: var(--faint); font-size: 13px; margin-bottom: 16px; }
  .map svg { width: 100%; height: auto; overflow: visible; }
  .map .grid circle { fill: rgba(255,255,255,.09); }
  @media (max-width: 760px) { .world { grid-template-columns: 1fr; } }

  .proof { margin: 36px 0 0; color: var(--muted); font-size: 17px; max-width: 64ch; }
  .proof a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.3); }
  .proof a:hover { text-decoration-color: var(--text); }
  .ok { width: 16px; height: 16px; border-radius: 50%; background: var(--green); position: relative; display: inline-block; }
  .ok::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #08090a; border-width: 0 2px 2px 0; transform: rotate(45deg); }

  .shift td:nth-child(2) { text-decoration: none !important; }
  .shift .was { background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) no-repeat 0 55% / 100% 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  [data-anim] .shift .was { transition: background-size .6s ease; }
  [data-anim] .shift td:nth-child(3) { opacity: 0; transform: translateX(10px); transition: opacity .6s ease, transform .6s ease; }
  [data-anim].in .shift .was { background-size: 100% 1px; }
  [data-anim].in .shift td:nth-child(3) { opacity: 1; transform: none; }
  .shift tbody tr:nth-child(1) .was { transition-delay: .2s; } .shift tbody tr:nth-child(1) td:nth-child(3) { transition-delay: .7s; }
  .shift tbody tr:nth-child(2) .was { transition-delay: .6s; } .shift tbody tr:nth-child(2) td:nth-child(3) { transition-delay: 1.1s; }
  .shift tbody tr:nth-child(3) .was { transition-delay: 1s; } .shift tbody tr:nth-child(3) td:nth-child(3) { transition-delay: 1.5s; }
  .shift tbody tr:nth-child(4) .was { transition-delay: 1.4s; } .shift tbody tr:nth-child(4) td:nth-child(3) { transition-delay: 1.9s; }
  .shift tbody tr:nth-child(5) .was { transition-delay: 1.8s; } .shift tbody tr:nth-child(5) td:nth-child(3) { transition-delay: 2.3s; }

  @media (prefers-reduced-motion: reduce) {
    .shift .was { background-size: 100% 1px; }
    [data-anim] *, [data-anim] *::before, [data-anim] *::after { transition: none !important; animation: none !important; }
  }


  /* How I decide: four tabs, each with a progress line; the panel shows one principle at a time */
  .tabs4 { margin-top: 64px; }
  .tablist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .tablist button { all: unset; cursor: pointer; position: relative; padding: 22px 0 0; border-top: 1px solid var(--border-2); color: var(--faint); font-size: 17px; font-weight: 510; letter-spacing: -.015em; line-height: 1.3; transition: color .3s ease; }
  .tablist button span { display: block; font-size: 13px; font-weight: 400; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
  .tablist button::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--text); }
  .tablist button[aria-selected="true"] { color: var(--text); }
  .tablist button[aria-selected="true"]::before { width: 100%; }
  .tablist button:hover { color: var(--text-2); }
  .tablist button:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; border-radius: 2px; }
  .tpanel[hidden] { display: none; }
  .tpanel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 64px; padding-top: 56px; min-height: 220px; align-items: start; animation: rise .5s ease; }
  .tpanel .what { margin: 0; font-weight: 560; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2; letter-spacing: -.035em; color: var(--text); }
  .tpanel .why { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; padding-top: 8px; }
  .tpanel .why em { display: block; font-style: normal; color: var(--faint); font-size: 13px; margin-bottom: 8px; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @media (max-width: 860px) { .tablist { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); } .tablist::-webkit-scrollbar { display: none; } .tablist button { flex: 0 0 auto; white-space: nowrap; } .tpanel { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .tpanel { animation: none; } }


  /* Every stage, region and way of working: one map, three columns, one animation */
  .atlas { margin-top: 56px; }
  .atlas .map { padding-bottom: 8px; }
  .dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 0; border-top: 1px solid var(--border); }
  .dims > div { padding: 24px 24px 0 0; }
  .dims small { max-width: 26ch; }
  .dims li small + small { margin-top: 6px; }
  .dims > div + div { padding-left: 24px; border-left: 1px solid var(--border); }
  .dims .cap { display: block; color: var(--faint); font-size: 13px; margin-bottom: 14px; }
  .dims ul { list-style: none; margin: 0; padding: 0; }
  .dims li { position: relative; padding: 9px 0 9px 20px; font-size: clamp(17px, 1.5vw, 19px); font-weight: 510; letter-spacing: -.015em; color: var(--text); }
  .dims li small { display: block; color: var(--faint); font-size: 13px; font-weight: 400; letter-spacing: 0; margin-top: 2px; }
  .dims li::before { content: ""; position: absolute; left: 0; top: 17px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--text-2); background: var(--text); }
  .d1 li:nth-child(1), .d1 li:nth-child(1)::before { animation-delay: .1s !important; }
  .d1 li:nth-child(2), .d1 li:nth-child(2)::before { animation-delay: .5s !important; }
  .d1 li:nth-child(3), .d1 li:nth-child(3)::before { animation-delay: .9s !important; }
  .d4 li:nth-child(1), .d4 li:nth-child(1)::before { animation-delay: .5s !important; }
  .d4 li:nth-child(2), .d4 li:nth-child(2)::before { animation-delay: .7s !important; }
  .d4 li:nth-child(3), .d4 li:nth-child(3)::before { animation-delay: .9s !important; }
  .d2 li:nth-child(1), .d2 li:nth-child(1)::before { animation-delay: 1.1s !important; }
  .d2 li:nth-child(2), .d2 li:nth-child(2)::before { animation-delay: 1.22s !important; }
  .d2 li:nth-child(3), .d2 li:nth-child(3)::before { animation-delay: 1.34s !important; }
  .d2 li:nth-child(4), .d2 li:nth-child(4)::before { animation-delay: 1.46s !important; }
  .d2 li:nth-child(5), .d2 li:nth-child(5)::before { animation-delay: 1.58s !important; }
  .d3 li:nth-child(1), .d3 li:nth-child(1)::before { animation-delay: 1.8s !important; }
  .d3 li:nth-child(2), .d3 li:nth-child(2)::before { animation-delay: 1.95s !important; }
  .d3 li:nth-child(3), .d3 li:nth-child(3)::before { animation-delay: 2.1s !important; }
  @media (max-width: 1100px) { .dims { grid-template-columns: 1fr 1fr; row-gap: 32px; } .dims > div:nth-child(3) { border-left: 0; padding-left: 0; } }
  @media (max-width: 760px) { .dims { grid-template-columns: 1fr; } .dims > div + div { border-left: 0; padding-left: 0; } }

  /* Section rhythm: more air, a divider between sections, and a band for How I decide */
  .feature { padding: 200px 0 0; position: relative; }
  .feature + .feature::before, .feature + .log::before, .log { position: relative; }
  .feature + .feature::before { content: ""; position: absolute; top: 100px; left: 0; right: 0; height: 1px; background: var(--border); }
  .log { padding-top: 200px; }
  .log::before { content: ""; position: absolute; top: 100px; left: 0; right: 0; height: 1px; background: var(--border); }
  .feature .lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); }
  .decide { background: #0c0d0f; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 120px 0 112px; margin-top: 0; }
  .decide + .feature { padding-top: 160px; }
  .decide + .feature::before { display: none; }
  .tpanel .what { font-size: clamp(20px, 1.9vw, 24px) !important; font-weight: 500 !important; color: var(--text-2) !important; line-height: 1.4 !important; }
  .tpanel { padding-top: 40px !important; min-height: 170px !important; }

  .pubs-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .pubs-head .lead { margin: 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); line-height: 1.42; }
  .log h2, .pubs-head h2 { margin: 0; line-height: 1.04; font-weight: 560; font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -.035em; }
  @media (max-width: 960px) { .pubs-head { grid-template-columns: 1fr; gap: 20px; } }

  .destination { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 64px; margin-top: 56px; padding: 28px 32px; border: 1px solid var(--border-2); border-radius: 14px; background: rgba(255,255,255,.02); }
  .destination .cap { grid-column: 1 / -1; color: var(--faint); font-size: 13px; }
  .destination .note { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; padding-top: 4px; }
  .destination + .tabs4 { margin-top: 48px; }
  @media (max-width: 860px) { .destination { grid-template-columns: 1fr; padding: 24px; } }

  .readmore { display: block; width: fit-content; margin-top: 16px; font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.25); }
  .readmore:hover { color: var(--text); text-decoration-color: var(--text); }


  /* ---------- Detail layer ---------- */
  main, footer { position: relative; z-index: 1; }
  #field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

  /* 7. Reading progress and current section */
  .nav::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: calc(var(--read, 0) * 100%); background: rgba(255,255,255,.45); }
  .nav ul a.current { color: var(--text); }

  /* 5. Command menu */
  .kbd { all: unset; cursor: pointer; font-size: 12px; color: var(--muted); border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 7px; line-height: 1.2; font-feature-settings: "tnum"; }
  .kbd:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
  .kbd:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
  .cmdk { width: min(560px, calc(100vw - 32px)); margin: 14vh auto auto; padding: 0; border: 1px solid var(--border-2); border-radius: 14px; background: #121315; color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .cmdk::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
  .cmdk input { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: 18px 20px; color: var(--text); font: 400 16px Inter, sans-serif; outline: none; }
  .cmdk ul { list-style: none; margin: 0; padding: 8px; max-height: 340px; overflow: auto; }
  .cmdk li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--text-2); }
  .cmdk li small { color: var(--faint); font-size: 13px; }
  .cmdk li[aria-selected="true"] { background: rgba(255,255,255,.07); color: var(--text); }
  .cmdk-foot { display: flex; gap: 16px; margin: 0; padding: 10px 20px; border-top: 1px solid var(--border); color: var(--faint); font-size: 12px; }

  /* 8. Toast */
  .toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 510; padding: 10px 16px; border-radius: 999px; transition: opacity .25s ease, transform .25s ease; }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }

  /* 4. Cursor spotlight */
  [data-spot] { background-image: radial-gradient(420px circle at var(--mx, -1000px) var(--my, -1000px), rgba(255,255,255,.045), transparent 65%); }

  /* 3. Scrollytelling: How I build pins while the scroll steps through the five */
  .scrollhint { display: none; margin: 0 0 18px; color: var(--faint); font-size: 13px; }
  .decide.scrolly { height: 440vh; padding: 0; }
  .decide.scrolly > .wrap { position: sticky; top: 73px; min-height: calc(100vh - 73px); display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(64px, 10vh, 104px); padding-bottom: 24px; }
  .decide.scrolly .scrollhint { display: block; }
  .decide.scrolly .head { margin-bottom: 0; }
  .decide.scrolly .tablist button[aria-selected="true"]::before { width: calc(var(--fill, 1) * 100%); }

  /* 9. Talk previews */
  .peek { position: fixed; z-index: 55; width: 240px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-2); box-shadow: 0 20px 50px rgba(0,0,0,.6); opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; background: #111; }
  .peek.show { opacity: 1; transform: none; }
  .peek img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* 6. Typographic details */
  h1, h2, .lead, .tpanel .what { text-wrap: balance; }
  p, li { text-wrap: pretty; }
  small, .tablist span { font-variant-numeric: tabular-nums; }
  blockquote { hanging-punctuation: first; }

  @media (prefers-reduced-motion: reduce) { .toast, .peek, #field { transition: none; } }

  .contact { padding: 120px 0 96px; }
  .connect { display: flex; align-items: center; gap: 20px; padding: 24px 28px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--panel); }
  .connect img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
  .connect .say { flex: 1; min-width: 0; }
  .connect h2 { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 560; letter-spacing: -.025em; line-height: 1.2; }
  .connect p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
  .connect .btns { display: flex; gap: 10px; flex: none; }
  .connect .btns a { padding: 9px 18px; border-radius: 999px; font-size: 15px; font-weight: 510; border: 1px solid var(--border-2); color: var(--text); }
  .connect .btns a.solid { background: var(--text); color: var(--bg); border-color: var(--text); }
  .connect .btns a:hover { border-color: rgba(255,255,255,.35); }
  .connect .btns a.solid:hover { background: #fff; }
  @media (max-width: 760px) { .connect { flex-wrap: wrap; } .connect .say { flex-basis: calc(100% - 92px); } .connect .btns { width: 100%; } .connect .btns a { flex: 1; text-align: center; } }

  /* Modules rise slowly into place the first time they scroll into view */
  .reveal { opacity: 0; transform: translateY(48px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }
  .reveal.shown { opacity: 1; transform: none; }
  .reveal.rd1 { transition-delay: .12s; } .reveal.rd2 { transition-delay: .24s; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

  /* Quality checks: a quiet pill until opened, then a panel in the site's own style */
  .agents { position: fixed; right: 20px; bottom: 20px; z-index: 40; }
  .pill2 { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-2); background: rgba(15,16,17,.9); color: var(--text-2); font-size: 13px; font-weight: 510; backdrop-filter: blur(10px); }
  .pill2:hover { border-color: rgba(255,255,255,.3); color: var(--text); }
  .pill2:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
  .pill2 i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(76,183,130,.18); }
  .panel2 { display: none; position: absolute; right: 0; bottom: 48px; width: 380px; max-height: calc(100vh - 120px); overflow: auto; border: 1px solid var(--border-2); border-radius: 14px; background: #0f1011; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .agents.open .panel2 { display: block; }
  .ph2 { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
  .ph2 b { display: block; font-size: 15px; font-weight: 560; letter-spacing: -.015em; }
  .ph2 span { display: block; color: var(--faint); font-size: 12.5px; margin-top: 2px; }
  .ph2 .live { flex: none; font-size: 11.5px; color: var(--green); border: 1px solid rgba(76,183,130,.35); border-radius: 999px; padding: 2px 9px; margin: 0; }
  .groups { padding: 6px 20px 4px; }
  .grp2 h5 { margin: 14px 0 4px; font-size: 12px; font-weight: 510; color: var(--faint); }
  .row2 { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13.5px; }
  .row2:last-child { border-bottom: 0; }
  .row2 i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); transform: translateY(-1px); }
  .row2 i.warn { background: var(--yellow); }
  .row2 i.info { background: none; box-shadow: inset 0 0 0 1px var(--faint); }
  .row2 span { color: var(--text-2); }
  .row2 b { font-weight: 510; color: var(--text); font-variant-numeric: tabular-nums; }
  .row2 b small { color: var(--faint); font-weight: 400; margin-left: 6px; }
  .pf2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px 16px; border-top: 1px solid var(--border); margin-top: 8px; font-size: 12.5px; color: var(--muted); }
  .pf2 button { all: unset; cursor: pointer; flex: none; font-size: 13px; font-weight: 510; color: var(--bg); background: var(--text); border-radius: 999px; padding: 6px 14px; }
  .pf2 button[aria-pressed="true"] { background: #7170ff; color: #fff; }
  .pf2 button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
  @media (max-width: 560px) { .agents { display: none; } }

  /* Inspector: only when switched on */
  .insp { position: fixed; z-index: 45; pointer-events: none; border: 1px solid #7170ff; background: rgba(113,112,255,.05); border-radius: 3px; display: none; }
  .insp-note { position: fixed; z-index: 46; pointer-events: none; width: 280px; display: none; background: #121316; border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--text-2); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
  .insp-note .n { font: 500 11px var(--mono); color: #7170ff; }
  .insp-note .sp { font: 400 10.5px var(--mono); color: var(--faint); margin: 2px 0 8px; }
  .insp-note em { display: block; font-style: normal; font-size: 11px; color: var(--faint); margin-bottom: 2px; }
  body.inspecting [data-why] { cursor: help; outline: 1px dashed rgba(113,112,255,.35); outline-offset: 6px; border-radius: 2px; }
  body.inspecting [data-why]:hover { outline-color: transparent; }
  .col h5 { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; font-size: 13px; font-weight: 510; color: var(--text-2); }
  .col h5 small { color: var(--faint); font-weight: 400; }
  .who { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
  .who i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #5e6ad2, #2f3291); display: inline-block; }
  .who i.h { background: linear-gradient(135deg, #8a8f98, #3a3d42); }
  .years { display: grid; grid-template-columns: 220px repeat(15, 1fr); border-bottom: 1px solid var(--border); color: var(--faint); font-family: var(--mono); font-size: 11px; }
  .years span { padding: 10px 0 10px 6px; border-left: 1px solid var(--border); }
  .years span:first-child { border-left: 0; padding-left: 16px; font-family: Inter, sans-serif; font-size: 12px; }
  .runs div { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text-2); }
  .runs div small { margin-left: auto; color: var(--faint); font-family: var(--mono); font-size: 11px; }

  .built { list-style: none; margin: 64px 0 0; padding: 0; border-top: 1px solid var(--border); }
  .built li > a, .built li { display: grid; grid-template-columns: 8rem minmax(0, 18rem) minmax(0, 1fr); gap: 6px 32px; align-items: baseline; }
  .built li { padding: 20px 0; border-bottom: 1px solid var(--border); }
  .built li > a { grid-column: 1 / -1; }
  .built b { font-weight: 510; font-size: 17px; letter-spacing: -.01em; }
  .built span:last-child { color: var(--muted); font-size: 15px; }
  .built a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  @media (max-width: 960px) { .built li > a, .built li { grid-template-columns: 1fr; gap: 4px; } }

  /* Archive row */
  .log { padding: 140px 0 0; }
  .log h2 { font-weight: 560; font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -.035em; margin: 0 0 48px; }

  .pubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--border); }
  .pubs > div { padding: 26px 28px 0 0; }
  .pubs > div + div { padding-left: 28px; border-left: 1px solid var(--border); }
  .pubs h3 { margin: 0 0 14px; font-size: 13px; font-weight: 510; color: var(--faint); }
  .pubs h3.gap { margin-top: 36px; }
  .pubs ul { list-style: none; margin: 0; padding: 0; }
  .pubs li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--text-2); font-size: 15px; line-height: 1.4; }
  .pubs li small { display: block; color: var(--faint); font-size: 13px; margin-top: 4px; }
  .pubs a:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 960px) { .pubs { grid-template-columns: 1fr; } .pubs > div + div { padding-left: 0; border-left: 0; } }

  /* Contact */
  .contact { padding: 140px 0 120px; }
  .contact .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }

  footer { border-top: 1px solid var(--border); padding: 56px 0 40px; color: var(--muted); font-size: 14px; }
  footer .wrap { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 24px; }
  footer h6 { margin: 0 0 14px; color: var(--text); font-size: 14px; font-weight: 510; }
  footer ul { list-style: none; margin: 0; padding: 0; }
  footer li { margin-bottom: 10px; }
  footer a:hover { color: var(--text); }

  @media (max-width: 960px) {
    .nav ul li.opt { display: none; }
    .window { grid-template-columns: 1fr; height: 560px; }
    .side { display: none; }
    .body { grid-template-columns: 1fr; }
    .feature .head, .contact .grid { grid-template-columns: 1fr; }
    .years { min-width: 900px; }
    footer .wrap { grid-template-columns: 1fr 1fr; }
  }

  /* Skip link, footer column titles, panel group titles */
  .skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 510; }
  .skip:focus { top: 12px; }
  footer .fh { margin: 0 0 14px; color: var(--text); font-size: 14px; font-weight: 510; }
  .grp2 .gh { margin: 14px 0 4px; font-size: 12px; font-weight: 510; color: var(--faint); }

  /* Print: everything visible, no fixed chrome */
  @media print {
    .nav, .agents, .toast, .peek, #field, .cmdk, .skip, .scrollhint { display: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .decide.scrolly { height: auto; }
    .decide.scrolly > .wrap { position: static; min-height: 0; }
    .tpanel[hidden] { display: grid; }
    body { background: #fff; color: #000; }
  }

/* 404 page */
.notfound { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
.notfound .code { margin: 0 0 12px; color: var(--faint); font-size: 14px; }
.notfound h1 { margin: 0; font-weight: 560; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.035em; line-height: 1.05; }
.notfound p { color: var(--muted); margin: 12px 0 28px; }