@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#141414;background:#ffd600;font-synthesis:none;color-scheme:light}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid;outline-offset:8px}::selection{color:#ffd600;background:#141414}.page{max-width:1500px;margin:auto;padding:0 64px}header{height:132px;display:flex;justify-content:space-between;align-items:center}.wordmark{font-family:'Space Grotesk',sans-serif;font-size:51px;letter-spacing:-3px;font-weight:700;line-height:1}.wordmark span{font-family:Arial,sans-serif;font-size:14px;vertical-align:top;display:inline-block;margin:5px 0 0 6px;letter-spacing:0}.platform{font-size:14px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:640px;align-items:center;gap:15px;padding:32px 0 70px}.edition{font-size:11px;letter-spacing:1.6px;font-weight:500;display:block;margin-bottom:29px}h1{font:500 clamp(65px,7.5vw,108px)/.99 'Space Grotesk',sans-serif;letter-spacing:-6px;margin:0 0 31px}.intro{font-size:20px;line-height:1.55;margin:0 0 35px;letter-spacing:-.3px}.download-area{display:flex;flex-direction:column;align-items:flex-start;gap:13px}button{display:inline-flex;align-items:center;gap:48px;font:500 16px 'DM Sans',sans-serif;border:0;background:#141414;color:#ffd600;border-radius:3px;padding:19px 22px;opacity:1;cursor:default}button span{font-size:24px;line-height:1}.availability{font-size:12px}.art img{display:block;width:112%;height:auto;margin-left:-6%;mix-blend-mode:multiply}.details{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #14141455;padding:29px 0 42px;gap:30px}.details h2{font-size:15px;font-weight:600;margin:0 0 10px}.details p{font-size:15px;line-height:1.5;margin:0;color:#34301a}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #14141455;padding:23px 0 28px;font-size:11px}footer span:first-child{font-weight:600}@media(min-width:1600px){.hero{min-height:720px}}@media(max-width:1050px){.page{padding-inline:36px}.hero{min-height:550px}h1{font-size:76px;letter-spacing:-4.5px}.intro{font-size:18px}.art img{width:106%;margin-left:-3%}}@media(max-width:700px){.page{padding-inline:24px}header{height:96px}.wordmark{font-size:42px}.platform{font-size:12px}.hero{grid-template-columns:1fr;padding:35px 0 20px;gap:0}.edition{font-size:10px;margin-bottom:24px}h1{font-size:clamp(61px,13vw,88px);letter-spacing:-4px}.intro{font-size:18px;margin-bottom:28px}.art{width:min(100%,390px);margin:15px auto 0}.art img{width:100%;margin:0}.details{grid-template-columns:1fr;padding:24px 0;gap:24px}.details article{display:grid;grid-template-columns:80px 1fr;gap:20px}.details h2{margin:0}.details p{font-size:14px}footer{flex-wrap:wrap;row-gap:13px;font-size:10px}footer span:nth-child(2){order:3;width:100%}footer span:last-child{margin-left:auto}}

/* Neutral landing page direction. */
:root{background:#f7f7f5;color:#181818}::selection{background:#181818;color:#f7f7f5}.page{max-width:1320px}header{height:120px}.wordmark{font-size:38px;letter-spacing:-2px}.platform{color:#747474;font-size:13px}.hero{min-height:580px;grid-template-columns:1.25fr 1fr;gap:50px;padding-top:40px;padding-bottom:80px}h1{font-size:clamp(64px,6.6vw,88px);letter-spacing:-4.7px;line-height:1.05;font-weight:500}.edition{color:#777;letter-spacing:1.3px;font-size:10px}.intro{color:#696969;font-size:19px;line-height:1.65}.art{display:flex;justify-content:center;align-items:center}.art img{width:82%;height:auto;margin:0;filter:grayscale(1) contrast(3);mix-blend-mode:multiply;transform:none}.availability{font-size:13px;color:#555;display:inline-block;padding:10px 14px;border:1px solid #d8d8d5;border-radius:6px;background:transparent}.details{border-color:#dededb;padding-block:30px 45px}.details h2{font-size:14px}.details p{color:#777;font-size:14px}footer{border-color:#dededb;color:#777;font-size:11px}footer span:first-child{color:#333}@media(max-width:1050px){.hero{gap:25px}h1{font-size:66px}}@media(max-width:700px){header{height:92px}.wordmark{font-size:34px}.hero{grid-template-columns:1fr;gap:0;padding:35px 0}.hero h1{font-size:clamp(56px,11vw,77px);letter-spacing:-3px}.hero .art{max-width:260px;margin:30px auto 0}.art img{width:100%}.intro{font-size:17px}.details{padding-block:25px}.details p{font-size:14px}.platform{font-size:11px}}

/* Beta access: tokens, the key form and the setup guide. */
:root {
  --surface: #f7f7f5;
  --surface-raised: #fff;
  --text: #181818;
  --text-hover: #33332f;
  --text-muted: #5f5f5c;
  --text-placeholder: #72726e;
  --text-on-strong: #f7f7f5;
  --border: #dededb;
  --border-control: #8a8a86;
  --danger: #a8261b;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --control-height: 48px;
  --radius-control: 6px;
  --focus-ring: 2px solid var(--text);
  --focus-offset: 2px;
  --font-body: 'DM Sans', Arial, sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --duration-fast: 120ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* The muted greys of the first draft fell short of AA on this background. */
.platform, .edition, .details p, footer { color: var(--text-muted); }

.skip {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  color: var(--text-on-strong);
  background: var(--text);
  border-radius: var(--radius-control);
  transform: translateY(-200%);
}
.skip:focus { transform: none; outline-offset: var(--focus-offset); }

.access { display: grid; gap: var(--space-2); width: 100%; max-width: 520px; }
.access label { font-size: 13px; font-weight: 500; }
.access-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.access input {
  flex: 1 1 260px;
  min-width: 0;
  height: var(--control-height);
  padding: 0 var(--space-4);
  font: 500 16px/1 var(--font-mono);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.access input::placeholder { color: var(--text-placeholder); opacity: 1; }
.access input:hover { border-color: var(--text); }
.access input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--text); }
.access input[aria-invalid="true"] { border-color: var(--danger); }
.access input[aria-invalid="true"]:focus-visible { outline-color: var(--danger); }

.access button {
  flex: 0 0 auto;
  justify-content: center;
  gap: 0;
  height: var(--control-height);
  padding: 0 var(--space-6);
  font: 500 15px var(--font-body);
  color: var(--text-on-strong);
  background: var(--text);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.access button:hover { background: var(--text-hover); }
.access button:active { transform: translateY(1px); }
.access button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.access button[aria-disabled="true"] { background: var(--text-muted); cursor: progress; transform: none; }

.access-hint, .access-status { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
/* Keeps its line when empty, so a message never pushes the page down. */
.access-status { min-height: 1.5em; }
.access-status[data-tone="error"] { color: var(--danger); }
.access-status[data-tone="success"] { color: var(--text); }
.access a, .guide a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.access a:focus-visible, .guide a:focus-visible { outline-offset: var(--focus-offset); border-radius: 2px; }

.guide { max-width: 680px; padding: var(--space-8) 0 var(--space-16); }
.guide h1 { font-size: clamp(40px, 5vw, 56px); letter-spacing: -2.5px; margin-bottom: var(--space-4); }
.guide .lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-muted); }

.steps { display: grid; margin: var(--space-12) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: var(--space-8) 1fr;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  padding-top: var(--space-1);
  font: 500 13px/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.steps h2 { margin: 0 0 var(--space-2); font: 600 17px/1.4 var(--font-body); }
.steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.steps p + p { margin-top: var(--space-2); }

.facts { display: grid; margin: 0; border-bottom: 1px solid var(--border); }
.facts div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
}
.facts dt { font-size: 14px; font-weight: 600; line-height: 1.6; }
.facts dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

@media (max-width: 700px) {
  .access button { flex: 1 1 100%; }
  .guide { padding-bottom: var(--space-12); }
  .guide h1 { letter-spacing: -1.5px; }
  .facts div { grid-template-columns: 1fr; gap: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .access input, .access button { transition: none; }
}