@font-face { font-family: "HolyPixel"; src: url("../assets/font/holypixel.ttf") format("truetype"); font-display: block; }
:root {
  --bg: #000;
  --fg: #fff;
  --muted: #a8a8a8;
  --line: rgba(255, 255, 255, 0.7);
  --panel: rgba(0, 0, 0, 0.25);
  --gutter: 16px;
  --font: "HolyPixel", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* layout budget: every fixed element is placed from these, so nothing can overlap */
  --top-h: 72px;            /* top bar height; page.js writes the measured value */
  --nav-h: 36px; --nav-w: 112px; --gap: 8px;
  --row-h: 48px; --row-b: max(16px, env(safe-area-inset-bottom));
  --top-zone: calc(var(--top-h) + var(--gap) + var(--nav-h) + var(--gap));
  --bot-zone: calc(var(--row-b) + var(--row-h) + var(--gap) + var(--nav-h) + var(--gap));
  --phone-min: 150px;
  /* shared by the text slide-in and the 3D camera/screen move; page.js overwrites both from its TRANSITION constant */
  --t: 1000ms; --ease: cubic-bezier(.4, 0, .2, 1);
  --glow: 0 0 8px rgba(255,255,255,.55), 0 0 22px rgba(255,255,255,.25);
}
* { box-sizing: border-box; border-radius: 0 !important; }
html { background: var(--bg); scroll-snap-type: y mandatory; overscroll-behavior-y: none; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font);
  font-size: 16px; line-height: 1.6; text-transform: uppercase; -webkit-font-smoothing: none; font-smooth: never; overflow-x: hidden; max-width: 100vw;
}
#scene, .fallback {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  z-index: 0; display: block; background: var(--bg);
}
.fallback { object-fit: cover; }
.fallback[hidden], #scene[hidden] { display: none; }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.3) 100%);
}

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--gutter); padding-top: max(12px, env(safe-area-inset-top));
  background: transparent;
}
.brand { color: var(--fg); letter-spacing: .18em; font-size: 16px; white-space: nowrap; }

:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

main { position: relative; z-index: 5; }
.step {
  position: relative; height: 100vh; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; padding: 0 var(--gutter); overflow: hidden;
}
.step-hero, .step-section, .step-compat, .step-faq { overflow: visible; }
.hero-block, .text-block {
  background: var(--panel); border: 1px solid var(--line);
  padding: 20px; width: 100%; max-width: 40vw; max-height: calc(100svh - 2 * max(var(--top-zone), var(--bot-zone))); overflow-y: auto;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-block, .text-block { opacity: 0; transform: translateY(24px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.hero-block.ready, .step.active .text-block { opacity: 1; transform: none; }
h1 {
  margin: 0 0 6px; font-size: clamp(40px, 4.4vw, 80px); line-height: 1; letter-spacing: .02em;
  color: var(--fg); text-shadow: none; overflow-wrap: anywhere;
}
.tagline { margin: 0 0 16px; color: var(--muted); font-size: clamp(16px, 1.6vw, 24px); letter-spacing: .14em; text-transform: uppercase; }
.features, .bullets { margin: 0; padding: 0; list-style: none; }
.features li, .bullets li { position: relative; padding-left: 18px; margin: 6px 0; overflow-wrap: anywhere; }
.features li::before, .bullets li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: #fff; }
.features li { font-size: 16px; margin: 4px 0; }
.scroll-hint { margin: 14px 0 0; color: var(--muted); font-size: 16px; letter-spacing: .3em; text-transform: uppercase; }
.text-block h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: none; }

/* compatibility */
.tabs { display: flex; gap: 0; margin: 0 0 12px; border: 1px solid var(--line); }
.tabs button { flex: 1; min-height: 44px; font: inherit; font-size: 16px; color: var(--muted); background: #000; border: 0; cursor: pointer; }
.tabs button + button { border-left: 1px solid var(--line); }
.tabs button[aria-selected="true"] { background: #fff; color: #000; font-weight: 700; }
.compat-list { margin: 0; padding: 0; list-style: none; }
.compat-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.compat-list .note { color: var(--muted); font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.compat-pending { margin: 0; color: var(--muted); }

@media (min-width: 900px) and (orientation: landscape) {
  .step { padding: 0 48px; justify-content: flex-start; }
  .hero-block, .text-block { padding: 28px; max-width: calc(40vw - 48px); transform: translateX(-40px); }
  .hero-block.ready, .step.active .text-block { transform: none; }
}
@media (orientation: portrait), (max-width: 899px) {
  :root { --row-h: 40px; --row-b: max(10px, env(safe-area-inset-bottom)); }
  .step { align-items: flex-end; padding: 0; }
  .hero-block, .text-block {
    position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--bot-zone); width: auto;
    max-width: none; padding: 12px 14px;
    max-height: calc(100svh - var(--top-zone) - var(--bot-zone) - var(--phone-min));
  }
  .text-block h2 { font-size: 16px; margin-bottom: 6px; }
  .bullets li { font-size: 16px; margin: 3px 0; line-height: 1.35; }
  h1 { font-size: 40px; margin-bottom: 0; }
  .tagline { font-size: 16px; margin-bottom: 8px; }
  .features { columns: 2; column-gap: 12px; }
  .features li { font-size: 16px; margin: 2px 0; padding-left: 12px; line-height: 1.2; break-inside: avoid; }
  .features li::before { width: 6px; }
  .scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-block, .text-block { transition: none; }
  .bullets.swap { animation: none; }
}


button, input, textarea, select { text-transform: inherit; }
.lead { margin: 0 0 8px; font-size: 16px; }
.features a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--muted); }
.features a:hover { border-bottom-color: var(--fg); }

/* app-style nav buttons: bordered pixel-font boxes with a small arrow, like PREV / UP / NEXT in the app */
.navbtn {
  position: fixed; z-index: 20; left: 50%; margin-left: calc(var(--nav-w) / -2); width: var(--nav-w); height: var(--nav-h);
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0;
  font: inherit; font-size: 16px; letter-spacing: .08em; color: #fff; background: #000; border: 2px solid var(--line); cursor: pointer;
}
.nav-prev { top: calc(var(--top-h) + var(--gap)); }
.nav-next { bottom: calc(var(--row-b) + var(--row-h) + var(--gap)); }
.navbtn:hover:not(:disabled) { background: #fff; color: #000; }
.navbtn:disabled { visibility: hidden; }
.arr { width: 0; height: 0; display: inline-block; border: 5px solid transparent; }
.arr.up { border-bottom: 7px solid currentColor; border-top-width: 0; }
.arr.down { border-top: 7px solid currentColor; border-bottom-width: 0; }
.arr.left { border-right: 7px solid currentColor; border-left-width: 0; }
.arr.right { border-left: 7px solid currentColor; border-right-width: 0; }
/* sampler sub-pages */
.subnav { display: flex; align-items: stretch; gap: 8px; margin: 0 0 8px; }
.subnav .navbtn { position: static; margin: 0; width: 44px; height: 36px; flex: none; }
.subnav .sub-label { flex: 1; display: flex; align-items: center; justify-content: center; border: 1px dotted var(--line); letter-spacing: .12em; }
.bullets.swap { animation: swapin var(--t) var(--ease); }
@keyframes swapin { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* round 6: PREV left / NEXT right, big, in a row pinned above the text panel; panel pinned above the button row */
:root { --bot-zone: calc(var(--row-b) + var(--row-h) + var(--gap)); }
.navbtn { width: 120px; height: 56px; margin: 0; top: var(--nav-top, auto); bottom: auto; font-size: 16px; }
.nav-prev { left: var(--nav-l, 16px); right: auto; }
.nav-next { left: auto; right: var(--gutter, 16px); }
.nav-prev .arr, .nav-next .arr { transform: rotate(-90deg) scale(1.4); }
.nav-prev { flex-direction: row-reverse; }
.subnav .navbtn { width: 44px; height: 36px; top: auto; }
.subnav .navbtn .arr { transform: none; }
@media (orientation: portrait), (max-width: 899px) {
  .hero-block, .text-block {
    position: fixed; bottom: var(--bot-zone);
    max-height: calc(100dvh - var(--top-h) - var(--bot-zone) - 56px - 140px);
  }
  .text-block { pointer-events: none; }
  .step.active .text-block { pointer-events: auto; }
}
body.off-hero .hero-block { opacity: 0; transform: translateY(24px); pointer-events: none; }

/* round 7: top bar right (DOCS + Sketch), big header row with square arrows, two store CTAs */
:root { --bot-zone: calc(var(--row-b) + var(--row-h) + 8px); --col-w: max(340px, calc(40vw - 48px)); }
.topright { display: flex; gap: 8px; align-items: center; }
.topbtn {
  height: 36px; padding: 0 12px; display: inline-flex; align-items: center; font: inherit; font-size: 16px; letter-spacing: .08em;
  color: #fff; background: #000; border: 1px solid var(--line); text-decoration: none; cursor: pointer; text-transform: uppercase;
}
.topbtn:hover { background: #fff; color: #000; }
.cta-row { position: fixed; z-index: 20; left: var(--gutter); right: var(--gutter); bottom: var(--row-b); display: flex; gap: 8px; }
.store {
  flex: 1 1 0; min-width: 0; height: var(--row-h); display: flex; align-items: center; justify-content: center;
  color: #000; background: #fff; text-decoration: none; font-weight: 700; letter-spacing: .06em; white-space: nowrap; border: 1px solid #fff;
}
.store:hover { background: #000; color: #fff; }
.navbtn { width: 56px; height: 56px; left: var(--nav-l, 16px); top: var(--nav-top, auto); bottom: auto; right: auto; }
.nav-next { left: var(--nav-r, auto); right: auto; }
.nav-prev, .nav-next { flex-direction: row; }
.nav-prev .arr, .nav-next .arr { transform: scale(1.8); }
.subnav .navbtn { width: 44px; height: 36px; top: auto; left: auto; }
.subnav .navbtn .arr { transform: none; }
.step-title {
  position: fixed; z-index: 6; margin: 0; height: 56px; line-height: 56px; text-align: center; white-space: nowrap; overflow: hidden;
  font-size: 40px; font-weight: 400; letter-spacing: .04em; color: #fff; left: var(--hl, 0); width: var(--hw, 0); top: var(--ht, 0);
  opacity: 0; transform: translateY(24px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); pointer-events: none;
}
.step.active .step-title { opacity: 1; transform: none; }
.hero-block, .text-block { pointer-events: none; }
.hero-block.ready, .step.active .text-block { pointer-events: auto; }
.text-block h2 { display: none; }
.hero-block, .text-block { position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--bot-zone); width: auto; max-width: none; padding: 12px 14px;
  max-height: calc(100dvh - var(--top-h) - var(--bot-zone) - 56px - 16px - 140px); }
.bullets li { font-size: 16px; margin: 3px 0; line-height: 1.35; }
@media (min-width: 900px) and (orientation: landscape) {
  :root { --row-h: 48px; }
  .cta-row { left: auto; right: 48px; width: 440px; }
  .hero-block, .text-block { left: 48px; right: auto; bottom: auto; width: var(--col-w); max-width: var(--col-w); padding: 24px;
    max-height: calc(100dvh - var(--top-h) - 56px - 8px - 32px); }
  .step-title { font-size: 64px; }
}
/* FAQ accordion */
.faq { margin: 0; padding: 0; list-style: none; }
.faq li { border-bottom: 1px solid rgba(255,255,255,.25); }
.faq button { width: 100%; min-height: 40px; display: flex; justify-content: space-between; gap: 12px; align-items: center; text-align: left;
  font: inherit; font-size: 16px; line-height: 1.3; color: #fff; background: none; border: 0; padding: 6px 0; cursor: pointer; }
.faq button::after { content: "+"; flex: none; }
.faq button[aria-expanded="true"]::after { content: "-"; }
.faq .ans { margin: 0 0 8px; color: var(--muted); font-size: 16px; line-height: 1.35; }
.faq .ans[hidden] { display: none; }

/* round 8: hero title lives in the header row like every other title; compatibility tables */
.step-hero .step-title { opacity: 0; transform: translateY(24px); }
.step-hero.ready .step-title { opacity: 1; transform: none; }
body.off-hero .step-hero .step-title { opacity: 0; transform: translateY(24px); }
.compat-block { display: flex; flex-direction: column; overflow: hidden; max-height: none;
  height: min(640px, calc(100dvh - var(--top-h) - var(--bot-zone) - 56px - 16px - 90px)); }
.compat-block .subnav { flex: none; }
.table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid rgba(255,255,255,.25); }
.compat-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.3; }
.compat-table th { position: sticky; top: 0; background: #000; color: var(--muted); text-align: left; font-weight: 400; letter-spacing: .06em; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.compat-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.2); vertical-align: top; overflow-wrap: anywhere; }
.table-wrap .compat-pending { padding: 10px 8px; }
@media (min-width: 900px) and (orientation: landscape) {
  .compat-block { height: min(640px, calc(100dvh - var(--top-h) - 56px - 8px - 32px)); }
}

/* round 8: translucent controls so the scene gradient shows through */
.navbtn, .topbtn { background: rgba(0,0,0,.25); }
.navbtn:hover:not(:disabled), .topbtn:hover { background: #fff; }
.tabs button, .compat-table th { background: rgba(0,0,0,.4); }

/* HTML lives on the black screen after the portrait camera arrives. */
@media (orientation: portrait), (max-width: 899px) {
  .text-block.screen-overlay {
    right: auto; bottom: auto; max-width: none; max-height: none; margin: 0;
    padding: 12px; border: 0; background: #000; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: auto; overscroll-behavior: contain; transform: none; visibility: hidden; pointer-events: none;
    transition: opacity var(--t) var(--ease), visibility 0s var(--t);
  }
  .step.active .text-block.screen-overlay {
    visibility: visible; opacity: 1; pointer-events: auto;
    transition-delay: var(--t);
  }
  .screen-overlay .table-wrap { overflow: auto; }
  .screen-overlay .sub-label { font-size: 14px; letter-spacing: 0; }
  .screen-overlay .compat-table { font-size: 12px; }
  .screen-overlay .compat-table th, .screen-overlay .compat-table td { padding: 5px 3px; white-space: normal; }
}

/* Cover keeps only its centred copy and the store row. */
.cover-copy { position: fixed; z-index: 6; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; visibility: hidden; }
.cover-copy h1 { font-size: clamp(40px, 10vw, 112px); white-space: nowrap; overflow-wrap: normal; }
.cover-copy p { margin: 8px 0 0; font-size: clamp(16px, 3vw, 28px); letter-spacing: .14em; }
body.on-cover .cover-copy { visibility: visible; }
body.on-cover .topbar, body.on-cover #nav-prev, body.on-cover #nav-next, body.on-cover .hero-block, body.on-cover .step-title { visibility: hidden; pointer-events: none; }

/* Round 10: consistent feature copy and equal-width feature columns. */
.lead, .features li, .bullets li { font-size: 20px; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
#cover-note { position: fixed; z-index: 6; left: 16px; right: 16px; margin: 0; text-align: center; font-size: 16px; line-height: 1.2; visibility: hidden; pointer-events: none; }
body.on-cover #cover-note { visibility: visible; }
/* store button not live yet: greyed, not clickable */
.store.soon, .store.soon:hover { background: transparent; color: rgba(255,255,255,.35); border-color: rgba(255,255,255,.25); cursor: default; } /* keeps the tap (an <a> without href does nothing) so it never falls through to tap-to-advance */