/* Tachyon Village. The palette is lifted from the bar's own pixel art: a plum night, lamplight for anything
   you can act on, and paper only where Tachyon is speaking. */
:root {
  --night: #1f1830;
  --dusk: #2e2342;
  --dusk-edge: #4a3a62;
  --lamp: #f3c27a;
  --lamp-deep: #c9913f;
  --paper: #f4ecd9;
  --ink: #2b2147;
  --lilac: #c8aef5;
  --moon: #ece4f6;
  --moon-soft: #bfb3d2;
  --display: 'Pixelify Sans', ui-monospace, monospace;
  --body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  /* A 4:5 scale from 17px body text. */
  --s-1: 0.8rem; --s0: 1.0625rem; --s1: 1.33rem; --s2: 1.66rem; --s3: 2.07rem; --s4: 2.6rem;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--moon); font: 400 var(--s0)/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--lilac); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; margin: 0; }
p { margin: 0; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--lamp); color: var(--ink); font-weight: 700; }
.skip:focus { top: 16px; }

/* Buttons: lamplight for the main action, an outline for the other. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 3px solid var(--ink); border-radius: 4px; color: var(--ink); background: transparent; font: 700 var(--s0)/1 var(--body); text-decoration: none; cursor: pointer; }
.button-primary { background: var(--lamp); box-shadow: inset 0 -4px var(--lamp-deep); }
.button-primary:hover { background: #f8d39a; }
.button:not(.button-primary):hover { background: #e8dcc4; }
.button[aria-disabled='true'] { cursor: not-allowed; background: #d8cdb8; box-shadow: none; color: #5d5470; }
.text-link { font-weight: 700; }

/* Hero: the bar is the page's opening image, and Tachyon's speech box is its headline. */
.hero { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: min(100svh, 980px); overflow: hidden; background: #14101c; }
.hero-art { position: absolute; inset: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; image-rendering: pixelated; }
.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#14101caa, transparent 18%, transparent 55%, #14101cd9); }
.topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); font: 700 var(--s1)/1 var(--display); text-decoration: none; }
.wordmark img { image-rendering: pixelated; }
.wordmark-small { font-size: var(--s0); }
.topbar-links { display: flex; align-items: center; gap: 22px; }
.topbar-links a { color: var(--paper); font-weight: 700; text-decoration: none; }
.topbar-links a:hover { text-decoration: underline; }
.topbar-get { padding: 8px 14px; border: 2px solid var(--lamp); border-radius: 4px; }

.speech { position: relative; z-index: 2; grid-row: 3; display: grid; grid-template-columns: auto 1fr; gap: 20px; width: min(980px, 100% - 32px); margin: 0 auto 28px; padding: 20px 24px 22px 20px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 6px; box-shadow: inset 0 0 0 3px var(--lilac), 0 8px 0 #0d0a14aa; }
.speech-portrait { display: grid; align-content: start; justify-items: center; gap: 8px; }
.speech-portrait img { width: 88px; height: 88px; padding: 12px; background: var(--ink); border-radius: 4px; box-shadow: inset 0 0 0 3px #7a66d2; image-rendering: pixelated; }
.speech-portrait span { padding: 3px 10px; background: var(--ink); color: var(--paper); border-radius: 3px; font: 700 var(--s-1)/1.3 var(--display); }
.speech h1 { font-size: var(--s3); color: var(--ink); max-width: 22ch; }
.speech-line { max-width: 62ch; margin-top: 10px; font-size: var(--s1); line-height: 1.5; }
.speech-line .unread { color: transparent; }
.speech-choices { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* The cadence: a real sequence, so it is the one place with numbers. */
.cadence { padding: 96px 0 40px; }
.cadence h2, .promises h2, .install h2, .questions h2 { font-size: var(--s4); color: var(--paper); }
.lede { max-width: 60ch; margin-top: 14px; color: var(--moon-soft); font-size: var(--s1); line-height: 1.5; }
.steps { list-style: none; margin: 56px 0 0; padding: 0; }
.step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 48px; align-items: center; padding: 40px 0; }
.step + .step { border-top: 2px dashed var(--dusk-edge); }
.step-text { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-items: start; }
.step-number { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; background: var(--dusk); border: 3px solid var(--lamp); border-radius: 4px; color: var(--lamp); font: 700 var(--s3)/1 var(--display); }
.step h3 { font-size: var(--s2); color: var(--paper); padding-top: 10px; }
.step p { max-width: 46ch; margin-top: 10px; color: var(--moon); }
.shot { margin: 0; padding: 8px; background: var(--dusk); border: 3px solid var(--dusk-edge); border-radius: 6px; }
.shot img { border-radius: 2px; }

.promises { padding: 72px 0; background: var(--dusk); }
.promise-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; margin: 32px 0 0; padding: 0; }
.promise-list li { position: relative; max-width: 48ch; padding-left: 30px; color: var(--moon); }
.promise-list li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; background: var(--lilac); box-shadow: 4px 4px 0 #7a66d2; }
.promise-list strong { display: block; color: var(--paper); font-size: var(--s1); margin-bottom: 4px; }

.install { padding: 96px 0; }
.install-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.install p { max-width: 52ch; margin-top: 14px; color: var(--moon); }
.install .release-note { color: var(--moon-soft); }
.downloads { display: grid; gap: 14px; padding: 24px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 6px; box-shadow: inset 0 0 0 3px var(--lilac); }
.os-switch { display: flex; gap: 8px; }
.os-switch button { flex: 1; min-height: 44px; border: 3px solid var(--ink); border-radius: 4px; background: transparent; color: var(--ink); font: 700 var(--s0)/1 var(--body); cursor: pointer; }
.os-switch button[aria-selected='true'] { background: var(--ink); color: var(--paper); }
.download { width: 100%; }
.downloads .download-help { margin: 0; color: #5d5470; font-size: var(--s-1); }
.downloads .text-link { color: var(--ink); }

.questions { padding: 0 0 96px; }
.questions h2 { margin-bottom: 24px; }
details { max-width: 70ch; border-top: 2px dashed var(--dusk-edge); }
details:last-of-type { border-bottom: 2px dashed var(--dusk-edge); }
summary { padding: 18px 0; color: var(--paper); font: 700 var(--s1)/1.3 var(--display); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: '+'; display: inline-block; width: 1.4em; color: var(--lamp); }
details[open] summary::before { content: '−'; }
details p { padding: 0 0 20px 1.4em; color: var(--moon); max-width: 62ch; }

.footer { padding: 28px 0; border-top: 2px solid var(--dusk); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }

@media (max-width: 860px) {
  .step, .install-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .promise-list { grid-template-columns: minmax(0, 1fr); }
  .cadence { padding-top: 72px; }
}
@media (max-width: 600px) {
  :root { --s3: 1.66rem; --s4: 2.07rem; }
  .topbar { padding: 14px 16px; }
  .topbar-links a:not(.topbar-get) { display: none; }
  .hero { min-height: 0; grid-template-rows: auto auto auto; }
  .hero-art { position: relative; inset: auto; grid-row: 2; }
  .hero-art::after { background: linear-gradient(#14101caa, transparent 30%); }
  .topbar { background: #14101c; }
  .wordmark { font-size: var(--s0); }
  .speech { grid-template-columns: minmax(0, 1fr); margin: -24px 16px 24px; width: auto; padding: 18px; }
  .speech-portrait { display: flex; align-items: center; gap: 10px; justify-items: start; }
  .speech-portrait img { width: 52px; height: 52px; padding: 6px; }
  .speech-line { font-size: var(--s0); }
  .speech-choices .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }