@font-face { font-family: Geist; src: url('assets/fonts/geist-latin-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('assets/fonts/geist-mono-latin-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* COOKING · Night Market
   Night  #09080f  page        Panel #14111f   Edge #3b2a63
   Purple #7c3aed  brand       Lavender #bfa7ff  Lamp #f2b45a (token names, highlights)
   Pass   #2fd08a  Rug #ff5a5a */
:root {
  color-scheme: dark;
  --night: #09080f; --panel: #14111f; --panel-2: #1a1626; --edge: #3b2a63; --edge-2: #4a3b70;
  --purple: #7c3aed; --purple-hi: #a679ff; --purple-hover: #8b4cf4; --lav: #bfa7ff; --lamp: #f2b45a;
  --pass: #2fd08a; --rug: #ff5a5a;
  --text: #f7f5ff; --soft: #d8d1ea; --muted: #a39bba; --quiet: #7d7594;
  --px: 4px;
  --sans: Geist, Arial, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; background: var(--night); }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--night); color: var(--text); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--lav); outline-offset: 6px; }
::selection { background: var(--purple); color: #fff; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 60; padding: 12px 18px; background: var(--purple); color: #fff; font: 600 13px var(--mono); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }

/* The pixel frame: a 1-pixel border with notched corners, drawn with four hard shadows */
.px { position: relative; background: var(--bg, var(--panel)); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge-c, var(--edge)), 0 var(--px) 0 0 var(--edge-c, var(--edge)), calc(-1 * var(--px)) 0 0 0 var(--edge-c, var(--edge)), var(--px) 0 0 0 var(--edge-c, var(--edge)); }

/* Pixel type (drawn by pixel.js) */
[data-pixel] { display: block; }
.px-line { display: block; width: fit-content; max-width: 100%; }
.px-line + .px-line { margin-top: calc(var(--pxs) * 3); }
.px-line svg { display: block; max-width: 100%; height: auto; }
.pixel-h1 { --pxs: 5px; --ptrack: 2; color: #fff; filter: drop-shadow(0 3px 0 #3b1d7a); }
.pixel-h1 .seg-1 { color: var(--lav); }
.pixel-h2 { --pxs: 3.5px; --ptrack: 2; max-width: 760px; color: #fff; filter: drop-shadow(0 2px 0 #5b21b6); }

/* Buttons */
.btn { --bg: var(--purple); --edge-c: var(--purple-hi); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 10px 16px; color: #fff; font: 600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: 0; transition: transform .08s steps(2); }
.btn:hover { --bg: var(--purple-hover); }
.btn:active { transform: translate(2px, 2px); }
.btn.ghost { --bg: var(--panel-2); --edge-c: var(--edge-2); color: var(--soft); }
.btn.ghost:hover { --bg: #221c33; color: #fff; }
.btn.small { min-height: 38px; padding: 8px 14px; font-size: 11.5px; }

/* Navigation */
.site-nav { --bg: rgba(20, 17, 31, .9); position: fixed; z-index: 40; top: 20px; left: 50%; display: flex; align-items: center; gap: 28px; width: min(1200px, calc(100% - 48px)); padding: 10px 10px 10px 18px; transform: translateX(-50%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font: 700 12.5px var(--mono); letter-spacing: .16em; }
.brand img { width: 28px; height: 28px; }
.desktop-nav { display: flex; gap: 26px; }
.desktop-nav a { color: var(--muted); font-size: 13px; }
.desktop-nav a:hover { color: #fff; }
.menu-toggle { --bg: var(--panel-2); display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 44px; height: 44px; border: 0; }
.menu-toggle span { display: block; width: 18px; height: 3px; background: currentColor; }
.mobile-nav { --bg: var(--panel); position: fixed; z-index: 39; top: 92px; inset-inline: 24px; padding: 10px; }
.mobile-nav a { display: block; padding: 12px 14px; font: 500 13px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.mobile-nav a:hover { background: var(--panel-2); }
.mobile-nav a:last-child { margin-top: 8px; background: var(--purple); color: #fff; text-align: center; }

/* Hero: the night market */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-content: start; gap: 40px; min-height: max(860px, 100svh); padding: 168px max(48px, calc((100% - 1200px) / 2)) 230px; overflow: hidden; isolation: isolate; }
.hero-world { --blur: 6px; position: absolute; z-index: -1; inset: 0; overflow: hidden; background: var(--night); }
.hero-world::before { content: ''; position: absolute; inset: calc(var(--blur) * -4); background: url('assets/world/scene.webp') 64% 74% / cover no-repeat; image-rendering: pixelated; filter: blur(var(--blur)); }
.hero-world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 8, 15, .94) 0%, rgba(9, 8, 15, .62) 36%, rgba(9, 8, 15, 0) 60%), linear-gradient(0deg, var(--night) 0%, rgba(9, 8, 15, 0) 24%), linear-gradient(180deg, rgba(9, 8, 15, .6), rgba(9, 8, 15, 0) 18%); }
.hero-copy { max-width: 640px; }
.quest { --bg: var(--panel-2); --edge-c: var(--edge-2); display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; color: var(--lamp); font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.quest i { width: 8px; height: 8px; background: var(--pass); }
.pixel-h1 { margin-top: 28px; }
.lead { max-width: 30em; margin: 34px 0 30px; color: var(--soft); font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 18px; }
.chains { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 30px; color: var(--muted); font-size: 13px; }
.chains span { display: inline-flex; align-items: center; gap: 7px; color: var(--soft); }
.hud { display: grid; gap: 16px; align-self: start; margin-top: 2px; }
.hud-card { --bg: rgba(14, 11, 24, .9); padding: 14px 16px; font: 11.5px var(--mono); color: var(--soft); }
.hud-card b { display: flex; justify-content: space-between; margin-bottom: 4px; color: #fff; font-size: 12.5px; letter-spacing: .06em; }
.hud-card b small { color: var(--quiet); font-size: 11px; font-weight: 400; }
.hud-card.passed { --edge-c: var(--pass); }
.meter { height: 10px; margin-top: 10px; background: linear-gradient(90deg, var(--fill) calc(var(--v) * 10%), #2a2340 0); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); }
.blocked .meter { --fill: var(--rug); } .passed .meter { --fill: var(--pass); }
.dialog { --bg: rgba(14, 11, 24, .95); --edge-c: var(--purple); position: absolute; left: 50%; bottom: 52px; display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 26px; align-items: center; width: min(1060px, calc(100% - 96px)); padding: 20px 24px; transform: translateX(-50%); }
.portrait { --bg: #0e0b18; --edge-c: var(--edge-2); height: 104px; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; image-rendering: pixelated; }
.who { color: var(--lav); font: 600 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.say { min-height: 3em; margin-top: 8px; font: 500 15.5px/1.55 var(--mono); }
.say .tok { color: var(--lamp); }
.say b { color: var(--pass); font-weight: 500; }
.say.typing::after { content: ''; display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--lav); }
.choices { display: grid; gap: 12px; }
.choice { white-space: nowrap; --bg: var(--panel-2); --edge-c: var(--edge-2); display: block; padding: 9px 18px; color: var(--soft); font: 600 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.choice.on { --bg: var(--purple); --edge-c: var(--purple-hi); color: #fff; }
.choice.on::before { content: '▶ '; }
.hero-note { position: absolute; right: max(48px, calc((100% - 1200px) / 2)); bottom: 16px; color: var(--quiet); font: 11px var(--mono); }

/* Sections */
.section { padding-top: 144px; }
.sec-head { display: grid; gap: 16px; align-content: start; }
.sec-head > .pixel-h2 { margin-top: 0 !important; }
.sec-head.with-guide { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
.sec-label { color: var(--lav); font: 600 12.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sec-label + .pixel-h2 { margin-top: 16px; }
.faq-layout > .sec-head { position: sticky; top: 120px; align-self: start; }
.intro { max-width: 34em; margin-top: 26px; color: var(--muted); font-size: 14px; }
.guide { --bg: #0e0b18; --edge-c: var(--edge-2); width: 150px; height: 150px; overflow: hidden; }
.guide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; image-rendering: pixelated; }
.fine { margin-top: 18px; color: var(--quiet); font-size: 13px; }

/* How it works: a four-level route */
.route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.level { padding: 24px 22px 22px; }
.level:not(:last-child)::after { content: ''; position: absolute; top: 34px; right: -30px; width: 28px; height: 4px; background: repeating-linear-gradient(90deg, var(--purple) 0 4px, transparent 4px 8px); }
.lv { display: inline-block; padding: 3px 8px; background: var(--purple); color: #fff; font: 600 11.5px var(--mono); letter-spacing: .08em; }
.level h3 { margin: 18px 0 8px; font: 600 15px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.level p { color: var(--muted); font-size: 14px; }
.lv-visual { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 112px; margin-top: 22px; }
.blockline, .checkline { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; background: #0e0b18; color: var(--muted); font: 11.5px var(--mono); }
.blockline.new { background: var(--purple); color: #fff; }
.checkline { padding-inline: 0; background: transparent; border-bottom: 2px dashed #2a2340; color: var(--soft); }
.checkline b { font-weight: 400; color: var(--muted); } .checkline .no { color: var(--rug); } .checkline .ok { color: var(--pass); }
.mini-alert { --bg: #0e0b18; --edge-c: var(--edge-2); display: grid; gap: 4px; padding: 12px; font-size: 13px; }
.mini-alert small { color: var(--quiet); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.mini-alert strong { margin-bottom: 8px; font-weight: 600; }
.mini-alert .choice { padding: 6px 10px; font-size: 11.5px; text-align: center; }
.guard { display: grid; gap: 6px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.guard .tp { color: var(--pass); border-bottom: 2px dashed var(--pass); padding-bottom: 2px; text-align: right; }
.guard .sl { color: var(--rug); border-top: 2px dashed var(--rug); padding-top: 2px; text-align: right; }
.steps { display: flex; align-items: flex-end; gap: 4px; height: 48px; }
.steps i { flex: 1; height: calc(var(--h) * 8%); background: var(--lav); }

/* Terminal: a pixel monitor */
.monitor { --px: 6px; --bg: #0e0b18; --edge-c: var(--purple); margin-top: 60px; }
.monitor-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--purple); color: #fff; font: 11.5px var(--mono); }
.monitor-bar i { width: 10px; height: 10px; background: rgba(255, 255, 255, .45); }
.monitor-bar span { margin-left: 10px; opacity: .85; }
.monitor img { width: 100%; height: auto; }
.captions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 36px; }
.captions span { color: var(--lamp); font: 600 11.5px var(--mono); }
.captions h3 { margin: 8px 0 4px; font: 600 14px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.captions p { color: var(--muted); font-size: 14px; }

/* Token: an item card */
.token-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.token-intro .pixel-h2 { margin-top: 22px; }
.token-live { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; color: var(--soft); font: 12.5px var(--mono); }
.token-live i { width: 8px; height: 8px; background: var(--pass); }
.item-card { --edge-c: var(--lamp); padding: 30px; }
.item-head { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 2px dashed #2a2340; }
.item-icon { --bg: #0e0b18; --edge-c: var(--edge-2); display: grid; place-items: center; width: 64px; height: 64px; }
.item-kind { color: var(--quiet); font: 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.item-name { color: var(--lamp); font: 700 23px var(--mono); letter-spacing: .02em; }
.field-label { color: var(--muted); font: 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.contract-box { --bg: #0e0b18; --edge-c: var(--edge-2); display: flex; align-items: center; gap: 10px; margin: 12px 0 26px; padding: 6px 6px 6px 14px; }
.contract-box input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: #fff; font: 13px/2 var(--mono); outline-offset: 8px; text-overflow: ellipsis; }
.token-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; color: var(--lav); font-size: 14px; }
.token-links a:not(.btn):hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* Product: an RPG menu */
.product-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; margin-top: 60px; }
.menu { padding: 8px; }
.product-tab { position: relative; display: block; width: 100%; padding: 18px 20px 18px 46px; border: 0; background: transparent; color: var(--muted); text-align: left; }
.product-tab + .product-tab { border-top: 2px dashed #2a2340; }
.product-tab h3 { font: 600 15px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.product-tab p { margin-top: 8px; color: var(--soft); font-size: 14px; }
.product-tab[aria-selected='false'] p { display: none; }
.product-tab[aria-selected='true'] { background: var(--panel-2); color: #fff; }
.product-tab[aria-selected='true']::before { content: '▶'; position: absolute; left: 18px; top: 18px; color: var(--lamp); font: 13px var(--mono); }
.product-tab:hover { color: #fff; }
.product-preview { overflow: hidden; }
.preview-top { display: flex; justify-content: space-between; gap: 12px; padding: 14px 22px; background: var(--panel-2); color: #fff; font: 600 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.demo-label { color: var(--quiet); font-weight: 400; }
.preview-content { padding: 8px 22px 6px; }
.preview-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 13px 0; border-bottom: 2px dashed #2a2340; font-size: 13px; }
.preview-row strong { color: var(--lamp); font: 600 15px var(--mono); }
.preview-row b { font: 400 13px var(--mono); text-align: right; }
.preview-row .fail { color: var(--rug); }
.preview-chain { padding-top: 10px; color: var(--muted); font-size: 13px; }
.preview-note { margin-top: 14px; color: var(--quiet); font-size: 12.5px; }
.status { padding: 3px 8px; background: var(--panel-2); color: var(--muted); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.status.blocked { background: rgba(255, 90, 90, .14); color: var(--rug); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 6px; }
.metric-grid > div { padding: 12px 14px; background: #0e0b18; color: var(--muted); font-size: 11.5px; }
.metric-grid strong { display: block; margin-top: 4px; color: #fff; font: 600 15px var(--mono); }
.bridge-route { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px 0; color: var(--lav); }
.bridge-route > div { width: 100%; padding: 12px 16px; background: #0e0b18; }
.bridge-route span { color: var(--muted); font: 11.5px var(--mono); }
.bridge-route strong { display: block; margin-top: 4px; color: #fff; font: 400 15px var(--mono); }
.preview-cta { display: block; margin: 14px 22px 22px; padding: 12px 16px; background: var(--purple); color: #fff; font: 600 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.preview-cta:hover { background: var(--purple-hover); }

/* Jev console */
.console { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 60px; }
.dials { padding: 32px; }
.range-row + .range-row { margin-top: 34px; }
.range-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.range-heading label { font: 600 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.range-heading output { color: var(--lamp); font: 600 18px var(--mono); }
.range-row > p { margin-top: 10px; color: var(--muted); font-size: 13px; }
.range-row > p b { margin-left: 4px; color: #fff; font: 400 13px var(--mono); }
input[type='range'] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 12px; background: linear-gradient(90deg, var(--purple) var(--range-progress, 50%), #2a2340 var(--range-progress, 50%)); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 26px; margin-top: -7px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 -4px 0 #cfc5ea; }
input[type='range']::-moz-range-track { height: 12px; background: #2a2340; }
input[type='range']::-moz-range-progress { height: 12px; background: var(--purple); }
input[type='range']::-moz-range-thumb { width: 22px; height: 26px; border: 0; border-radius: 0; background: #fff; }
.verdict { display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.verdict.blocked { --bg: #1c1015; --edge-c: var(--rug); }
.verdict.passed { --bg: #0f1c16; --edge-c: var(--pass); }
.verdict-kicker { color: var(--muted); font: 600 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.pixel-verdict { --pxs: 8px; --ptrack: 2; margin: 16px 0 20px; }
.verdict.blocked .pixel-verdict { color: var(--rug); filter: drop-shadow(0 3px 0 #4a1820); }
.verdict.passed .pixel-verdict { color: var(--pass); filter: drop-shadow(0 3px 0 #0f4a32); }
#verdict-reason { font-size: 15px; }

/* Safety: stat blocks */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 60px; }
.stat { padding: 26px 24px; }
.pixel-stat { --pxs: 6px; --ptrack: 2; color: var(--lav); filter: drop-shadow(0 3px 0 #3b1d7a); }
.stat h3 { margin: 24px 0 8px; font: 600 14px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.stat p { color: var(--muted); font-size: 14px; }
.risk { --bg: var(--panel-2); margin-top: 40px; padding: 16px 20px; color: var(--soft); font-size: 14px; }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; }
.faq-guide { width: 132px; height: 160px; margin-top: 24px; }
.faq-list { display: grid; gap: 18px; }
.faq-list details { --bg: var(--panel); }
.faq-list details { position: relative; background: var(--panel); box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge); }
.faq-list details[open] { box-shadow: 0 -4px 0 0 var(--purple), 0 4px 0 0 var(--purple), -4px 0 0 0 var(--purple), 4px 0 0 0 var(--purple); }
.faq-list summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; list-style: none; font-size: 14px; font-weight: 550; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; flex-shrink: 0; width: 26px; height: 26px; background: var(--panel-2); color: var(--lav); font: 600 15px/26px var(--mono); text-align: center; }
.faq-list details[open] summary::after { content: '−'; background: var(--purple); color: #fff; }
.faq-list p { max-width: 60ch; padding: 0 20px 20px; color: var(--muted); font-size: 14px; }

/* Start: the door */
.start { position: relative; margin-top: 160px; padding-block: 120px; overflow: hidden; isolation: isolate; }
.start-world { --blur: 6px; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 58%; overflow: hidden; background: var(--night); }
.start-world::before { content: ''; position: absolute; inset: calc(var(--blur) * -4); background: url('assets/world/door.webp') 30% 40% / cover no-repeat; image-rendering: pixelated; filter: blur(var(--blur)); }
.start-world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(9, 8, 15, .4) 40%, rgba(9, 8, 15, 0) 70%), linear-gradient(180deg, var(--night), rgba(9, 8, 15, 0) 22%, rgba(9, 8, 15, 0) 78%, var(--night)); }
.start .pixel-h2 { margin-top: 22px; }
.start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 28px; margin-top: 56px; }
.start-card { --bg: rgba(20, 17, 31, .95); padding: 28px; }
.card-label { color: var(--lamp); font: 600 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.start-card h3 { margin: 12px 0 10px; font-size: 17px; font-weight: 600; }
.start-card p:not(.card-label) { margin-bottom: 24px; color: var(--muted); font-size: 14px; }

/* Footer */
.site-footer { margin-top: 40px; padding: 48px 0 28px; border-top: 4px solid #1a1626; }
.footer-top, .footer-bottom { display: flex; justify-content: space-between; gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 18px; color: var(--muted); font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 64px; }
.footer-links h3 { margin-bottom: 14px; color: var(--lav); font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.footer-links a { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.footer-links a:hover { color: #fff; }
.footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 2px dashed #2a2340; color: var(--quiet); font-size: 12.5px; }

/* Responsive */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; }
  .hud { display: none; }
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level:nth-child(2)::after { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .site-nav { gap: 12px; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 140px 24px 40px; }
  .hero-copy { order: 1; } .hero-world { order: 2; } .dialog { order: 3; } .hero-note { order: 4; }
  .hero-world { position: relative; z-index: 0; inset: auto; height: 380px; margin: 36px -24px 0; }
  .hero-world::before { background-size: auto 150%; background-position: 46% 92%; }
  .hero-world::after { background: linear-gradient(180deg, var(--night) 0%, rgba(9, 8, 15, 0) 30%, rgba(9, 8, 15, 0) 70%, var(--night) 100%); }
  .dialog { position: relative; left: auto; bottom: auto; z-index: 1; width: 100%; margin-top: -70px; transform: none; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .portrait { height: 84px; }
  .choices { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .choice { text-align: center; }
  .say { font-size: 15px; }
  .hero-note { position: static; margin-top: 18px; }
  .pixel-h1 { --pxs: 4.5px; }
  .token-grid, .faq-layout, .console, .product-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-layout > .sec-head { position: static; }
  .faq-guide { display: none; }
  .captions { grid-template-columns: 1fr; gap: 20px; }
  .start-world { width: 100%; opacity: .55; }
  .footer-top, .footer-bottom { flex-direction: column; gap: 24px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .site-nav { top: 12px; width: calc(100% - 28px); padding: 8px 8px 8px 12px; }
  .brand { gap: 8px; font-size: 11.5px; letter-spacing: .12em; } .brand img { width: 24px; height: 24px; }
  .nav-cta { min-height: 40px; padding: 8px 12px; font-size: 11.5px; }
  .mobile-nav { top: 80px; inset-inline: 18px; }
  .hero { padding: 116px 20px 32px; }
  .hero-world { margin-inline: -20px; height: 320px; }
  .pixel-h1 { --pxs: 3.5px; margin-top: 22px; }
  .pixel-h2 { --pxs: 3px; }
  .lead { font-size: 14px; margin-top: 26px; }
  .actions .btn { flex: 1 1 auto; }
  .section { padding-top: 104px; }
  .sec-head.with-guide { grid-template-columns: 1fr; gap: 26px; }
  .guide { width: 112px; height: 112px; order: -1; }
  .route { grid-template-columns: 1fr; gap: 28px; }
  .level::after { display: none; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat { padding: 20px 16px; }
  .pixel-stat { --pxs: 5px; }
  .item-card { padding: 22px 18px; }
  .item-name { font-size: 18px; }
  .contract-box input { font-size: 11.5px; }
  .metric-grid { gap: 6px; } .metric-grid > div { padding: 10px; } .metric-grid strong { font-size: 13px; }
  .pixel-verdict { --pxs: 7px; }
  .dials, .verdict { padding: 24px 20px; }
  .start { margin-top: 120px; padding-block: 80px; }
  .start-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-links { gap: 24px 40px; }
}
@media (max-width: 360px) {
  .stats { grid-template-columns: 1fr; }
  .nav-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Token launching soon: pending contract */
.contract-pending { padding: 8px 0; color: var(--muted); font: 13px/2 var(--mono); letter-spacing: .04em; }
.token-pending-note { margin: -10px 0 24px; color: var(--soft); font-size: 14px; }

/* Pooper app: an illustrative pipeline inside the monitor (replaces the old COOKING dashboard capture). */
.mock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: #1a1530; font: 11.5px var(--mono); }
.mock-col { display: grid; align-content: start; gap: 8px; padding: 14px; background: #0e0b18; min-height: 300px; }
.mock-col.ok { box-shadow: inset 0 0 0 2px rgba(47, 208, 138, .55); }
.mock-col h3 { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--lav); font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.mock-col h3 b { color: #fff; font-weight: 600; }
.mock-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; background: #14111f; }
.mock-row i { display: grid; place-items: center; width: 28px; height: 28px; background: #241c3d; color: var(--lav); font-style: normal; font-size: 10px; }
.mock-row strong { display: block; color: var(--lamp); font-weight: 600; }
.mock-row small { color: var(--quiet); font-size: 10.5px; }
.mock-row .r { color: var(--rug); } .mock-row .g { color: var(--pass); }
.mock-row .buy { padding: 4px 8px; background: var(--purple); color: #fff; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--purple-hi); }
@media (max-width: 900px) { .mock { grid-template-columns: 1fr; } .mock-col { min-height: 0; } }