/* Firefly Pad. Night meadow, light = data. Colour appears only where light is: --lume is the light colour and the primary
   action, --ember only for buyback + burn. No gradients, no glow, no blur; frames are 3 px (= 1 art px) --dusk insets with
   stepped corners. Jersey 20 for words, Ysabeau Office for text, Google Sans Code for EVERY number. */
:root {
  --void: #070b12; --night: #0e1726; --dusk: #1b2a40; --moon: #d7dde8; --moon-dim: #8a97ab;
  --lume-hi: #f6fbd0; --lume: #dff27d; --lume-lo: #9aa94a; --ink: #0d1a10;
  --ember: #d9733f; --ember-hi: #f2b16a; --ember-lo: #8a3a22; --off: #343f4c; --off-lo: #232c38;
  --st: 6px; /* stepped corner = 2 art px */
  --disp: "Jersey 20", "Courier New", monospace; --text: "Ysabeau Office", "Segoe UI", system-ui, sans-serif; --mono: "Google Sans Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
@media (max-width: 759px) { :root { --st: 4px; } }
* { box-sizing: border-box; }
html { background: var(--void); -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--void); color: var(--moon); font: 400 19px/1.55 var(--text); overflow-x: hidden; }
a { color: var(--moon); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--moon-dim); }
a:hover { color: var(--lume); text-decoration-color: var(--lume); }
a, button, [role="button"], label[for], summary, select, input[type="file"] { cursor: pointer; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
img.px, canvas, .px { image-rendering: pixelated; image-rendering: crisp-edges; }
canvas { display: block; }
.num { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: 0; }
.disp, h1, h2, h3, .brand span { font-family: var(--disp); font-weight: 400; -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-only a:focus { position: fixed; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--lume); color: var(--ink); padding: 8px 14px; font-weight: 600; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; }
.cap, .hl, .eyebrow, .lab { font: 600 12px/1.2 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--moon-dim); }
[hidden] { display: none !important; }

/* ---- stepped corners (clip-path) shared by buttons, frames, chips */
.step { clip-path: polygon(0 var(--st), var(--st) var(--st), var(--st) 0, calc(100% - var(--st)) 0, calc(100% - var(--st)) var(--st), 100% var(--st), 100% calc(100% - var(--st)), calc(100% - var(--st)) calc(100% - var(--st)), calc(100% - var(--st)) 100%, var(--st) 100%, var(--st) calc(100% - var(--st)), 0 calc(100% - var(--st))); }
.bt-blink, .bt-sec, .frame, .cachip, .lantern, .plate, .toast, .field input, .field textarea, .mini, .wbtn, .chip { clip-path: polygon(0 var(--st), var(--st) var(--st), var(--st) 0, calc(100% - var(--st)) 0, calc(100% - var(--st)) var(--st), 100% var(--st), 100% calc(100% - var(--st)), calc(100% - var(--st)) calc(100% - var(--st)), calc(100% - var(--st)) 100%, var(--st) 100%, var(--st) calc(100% - var(--st)), 0 calc(100% - var(--st))); }

/* ---- buttons: one construction, a tile of light */
.bt-blink { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 26px 14px; background: var(--lume); color: var(--ink); font: 400 30px/1 var(--disp); -webkit-font-smoothing: none; box-shadow: inset 0 -6px 0 var(--lume-lo); transition: none; text-decoration: none; }
.bt-blink.big { font-size: 52px; padding: 16px 44px 22px; }
.bt-blink.sm { font-size: 30px; padding: 6px 18px 12px; min-height: 44px; }
.bt-blink:hover:not(:disabled) { background: var(--lume-hi); color: var(--ink); }
.bt-blink:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 -3px 0 var(--lume-lo); }
.bt-blink:disabled { background: var(--off); color: var(--moon-dim); box-shadow: inset 0 -6px 0 var(--off-lo); }
.bt-blink.busy { animation: bstep 375ms steps(1) infinite; pointer-events: none; }
@keyframes bstep { 0% { background: var(--lume-lo); } 33% { background: var(--lume); } 66% { background: var(--lume-hi); } }
.bt-blink:focus-visible, .bt-sec:focus-visible, .cachip:focus-visible, .mini:focus-visible, .wbtn:focus-visible { clip-path: none; outline: 3px solid var(--moon); outline-offset: 3px; }
.bt-sec { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 20px 9px; background: transparent; color: var(--moon); box-shadow: inset 0 0 0 3px var(--moon-dim); font: 400 30px/1 var(--disp); -webkit-font-smoothing: none; text-decoration: none; white-space: nowrap; }
.bt-sec.sm { font-size: 26px; }
.bt-sec.xs { font-size: 22px; min-height: 40px; padding: 4px 14px 7px; }
.bt-sec:hover:not(:disabled) { box-shadow: inset 0 0 0 3px var(--moon); color: var(--lume); }
.bt-sec:disabled { color: var(--moon-dim); box-shadow: inset 0 0 0 3px var(--off); }
.bt-sec.primary { background: var(--lume); color: var(--ink); box-shadow: inset 0 -6px 0 var(--lume-lo); }
.bt-sec.primary:hover:not(:disabled) { background: var(--lume-hi); color: var(--ink); box-shadow: inset 0 -6px 0 var(--lume-lo); }
.bt-sec.busy { animation: bstep 375ms steps(1) infinite; color: var(--ink); }
.mini { display: inline-flex; align-items: center; min-height: 32px; padding: 3px 10px 5px; background: var(--night); box-shadow: inset 0 0 0 3px var(--lume-lo); color: var(--lume); font: 600 13px/1 var(--text); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.mini:hover { box-shadow: inset 0 0 0 3px var(--lume); color: var(--lume-hi); }
.mini.busy { animation: bstep 375ms steps(1) infinite; color: var(--ink); }

/* ---- header (sticky 72 px on void) */
.bar { position: sticky; top: 0; z-index: 30; height: 72px; display: flex; align-items: center; gap: 28px; padding: 0 24px; background: var(--void); box-shadow: inset 0 -3px 0 var(--night); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--moon); flex: none; }
.brand img { width: 44px; height: 44px; }
.brand span { font-size: 30px; line-height: 1; padding-bottom: 3px; }
.nav { display: flex; gap: 24px; }
.nav a { font: 600 15px/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--moon-dim); padding: 12px 0; }
.nav a:hover, .nav a[aria-current] { color: var(--moon); }
.nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--lume); }
.sp { flex: 1; }
.bar-r { display: flex; align-items: center; gap: 12px; }
.lantern { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 14px; background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); }
.lantern .tk, .dca .tk { font: 400 22px/1 var(--disp); color: var(--lume); padding-bottom: 2px; }
.lantern .lk { font: 600 12px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); text-decoration: none; }
.lantern .lk:hover { color: var(--lume); }
.cachip { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 8px; background: transparent; color: var(--moon); }
.cachip .num { font-size: 15px; }
.cachip .cl { font: 600 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); }
.cachip:hover .cl, .cachip.copied .cl { color: var(--lume); }
.cachip:disabled { cursor: default; }
.wbtn { min-height: 44px; padding: 0 14px; background: transparent; box-shadow: inset 0 0 0 3px var(--dusk); font: 600 14px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--moon-dim); }
.wbtn.on { font-family: var(--mono); text-transform: none; letter-spacing: 0; color: var(--moon); }
.wbtn:hover { color: var(--lume); box-shadow: inset 0 0 0 3px var(--moon-dim); }
.hblink { display: inline-flex; }
.menu-b { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; box-shadow: inset 0 0 0 3px var(--dusk); }
.menu-b span { display: block; width: 18px; height: 3px; background: var(--moon); }
.drawer { position: fixed; z-index: 29; top: 72px; left: 0; right: 0; background: var(--void); box-shadow: inset 0 -3px 0 var(--night); padding: 8px 16px 20px; display: grid; gap: 4px; }
.drawer a { font: 400 30px/1.1 var(--disp); text-decoration: none; padding: 8px 0; color: var(--moon); }
.dca { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.dca .num { font-size: 12px; word-break: break-all; }
.sunset { margin: 0; padding: 10px 16px; background: var(--night); box-shadow: inset 0 -3px 0 var(--dusk); text-align: center; font-size: 16px; }
@media (max-width: 1180px) { .nav { gap: 16px; } .bar { gap: 18px; } .lantern .lk { display: none; } }
@media (max-width: 1023px) { .nav, .hide-m { display: none; } .menu-b { display: inline-flex; } }
@media (max-width: 759px) {
  .bar { height: 64px; padding: 0 12px; gap: 8px; }
  .drawer { top: 64px; }
  .brand { gap: 6px; } .brand span { font-size: 22px; }
  .bar-r { gap: 8px; }
  .lantern { padding: 0 6px; height: 44px; } .lantern .tk, .lantern .lk { display: none; } .lantern .num, .lantern .cl { display: none; } .lantern .cachip { padding: 2px 6px; }
  .lantern .cachip::before { content: "CA"; font: 600 12px/1 var(--text); letter-spacing: .1em; color: var(--lume); }
  .wbtn { display: none; }
  .bt-blink.sm { font-size: 26px; padding: 6px 14px 12px; }
}
@media (max-width: 380px) { .brand span { display: none; } }

/* ---- hero meadow */
.hero { position: relative; height: calc(var(--htp, 48px) * 17); overflow: hidden; background: var(--void); --tp: var(--htp, 48px); --ap: 3px; cursor: pointer; }
.hero-ov { cursor: default; }
.hero-cv { position: absolute; inset: 0; overflow: hidden; }
.hero-cv canvas { position: absolute; top: 0; left: 0; visibility: hidden; }
.hero.live .hero-cv canvas { visibility: visible; }
.hero-cv .nojs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: none; object-position: 50% 0; }
.hero.live .hero-cv .nojs { visibility: hidden; }
.hero-ov { position: absolute; inset: 0; pointer-events: none; text-align: center; }
.hero-ov > * { pointer-events: auto; }
.hero .name { position: absolute; left: 0; right: 0; top: calc(var(--tp) * 2.25); margin: 0; font-size: 128px; line-height: 1; letter-spacing: 0.02em; color: var(--moon); pointer-events: none; }
.hero .line { position: absolute; left: 0; right: 0; top: calc(var(--tp) * 2.25 + 140px); margin: 0 auto; max-width: 62ch; padding: 0 16px; font-size: 22px; color: var(--moon); pointer-events: none; }
.hb { position: absolute; left: 0; right: 0; bottom: calc(100% - var(--tp) * 12); display: flex; justify-content: center; pointer-events: none; }
.hb .bt-blink { pointer-events: auto; }
.hb .why { position: absolute; top: calc(100% + var(--tp) * 0.25 + 6px); left: 0; right: 0; margin: 0; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; pointer-events: none; }
.why span { font: 600 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon); background: var(--void); padding: 5px 8px; }
.why .mini { pointer-events: auto; }
.hud { position: absolute; left: 0; right: 0; top: calc(var(--tp) * 13 + 10px); display: flex; justify-content: center; gap: 56px; pointer-events: none; }
.hud > div { display: grid; gap: 6px; justify-items: center; }
.hud .hl { color: var(--moon-dim); }
.hud .hn { font-family: var(--mono); font-weight: 700; font-size: 30px; line-height: 1; color: var(--moon); }
.hud.lit > div:first-child .hn { color: var(--lume); }
.hero .invite { display: none; position: absolute; left: 0; right: 0; top: calc(var(--tp) * 14.6); margin: 0; align-items: center; justify-content: center; gap: 16px; font-size: 18px; color: var(--moon); }
.hero.empty .invite { display: flex; }
.demo-tag { position: absolute; left: 24px; bottom: 16px; margin: 0; font: 600 12px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--lume-lo); }
.stamp { position: absolute; right: 24px; bottom: 10px; margin: 0; font: 400 40px/1 var(--disp); color: var(--lume); }
.stamp.dusk { color: var(--moon-dim); }
.plate { position: absolute; z-index: 5; width: 300px; display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 12px; background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); text-align: left; pointer-events: none; }
.plate img { width: 128px; height: 128px; }
.plate div { display: grid; gap: 4px; align-content: start; }
.plate .pn { font: 400 26px/1 var(--disp); color: var(--moon); }
.plate .num { font-size: 15px; color: var(--moon-dim); }
.plate .num.sm { font-size: 13px; }
.ps { font: 600 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); }
.ps.blink { color: var(--lume); }
.meter { display: flex; gap: 2px; margin-top: 4px; }
.meter i { width: 7px; height: 12px; background: var(--off-lo); }
.meter i.on { background: var(--lume); }
@media (max-width: 759px) {
  .hero { height: calc(var(--htp, 32px) * 17); --tp: var(--htp, 32px); --ap: 2px; }
  .hero .name { font-size: 64px; top: calc(var(--tp) * 1.5); }
  .hero .line { top: calc(var(--tp) * 1.5 + 72px); font-size: 18px; max-width: 26ch; }
  .bt-blink.big { font-size: 44px; padding: 12px 36px 18px; }
  .hud { gap: 18px; top: calc(var(--tp) * 13 + 8px); flex-wrap: wrap; padding: 0 12px; row-gap: 12px; }
  .hud .hn { font-size: 20px; }
  .hud .hl { font-size: 11px; }
  .hero .invite { top: calc(var(--tp) * 15.1); gap: 10px; padding: 0 12px; }
  .hero .invite > span { display: none; }
  .demo-tag { left: 12px; bottom: auto; top: 10px; }
  .stamp { font-size: 26px; right: 12px; bottom: 6px; }
  .plate { width: 260px; grid-template-columns: 64px 1fr; } .plate img { width: 64px; height: 64px; }
}

/* ---- scenes (Starbound rhythm: picture -> eyebrow -> title -> 1-2 lines -> 96 px of void) */
.scene, .ending { position: relative; padding: 96px 16px 0; text-align: center; }
.sc { position: relative; width: var(--sw, fit-content); max-width: 100%; margin: 0 auto; }
.sc canvas { margin: 0 auto; }

.sc .nojs { display: block; margin: 0 auto; }
.js .sc .nojs { display: none; }
.sh { max-width: 62ch; margin: 28px auto 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.glyph { display: inline-flex; gap: 3px; }
.glyph::before { content: ""; }
.glyph i { width: 6px; height: 6px; background: var(--off-lo); }
.sh h2 { margin: 0; font-size: 56px; line-height: 1; letter-spacing: 0.04em; color: var(--moon); }
.lede { margin: 14px auto 0; font-size: 21px; line-height: 1.5; color: var(--moon); max-width: 56ch; }
@media (max-width: 759px) { .scene, .ending { padding-top: 72px; } .sh h2 { font-size: 36px; } .lede { font-size: 18px; } }

.vlist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; max-width: 1200px; margin: 40px auto 0; text-align: left; }
.vrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; box-shadow: inset 0 -3px 0 var(--night); }
.vi { display: block; width: 64px; height: 64px; }
.crop { display: block; width: 64px; height: 64px; overflow: hidden; background: var(--night); }
.crop img { display: block; width: 64px; height: 64px; }
.crop.none { box-shadow: inset 0 0 0 3px var(--dusk); }
.vt { display: grid; gap: 4px; min-width: 0; }
.vn { font: 400 28px/1 var(--disp); color: var(--moon); text-decoration: none; -webkit-font-smoothing: none; }
.vn:hover { color: var(--lume); }
.vm { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; color: var(--moon-dim); }
.vs { font: 600 12px/1.6 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); }
.vrow.lit .vs { color: var(--lume); }
.vrow.lit .vn { color: var(--lume-hi); }
.carow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.carow .cachip { padding: 0; min-height: 26px; }
.carow .cachip .num { font-size: 13px; color: var(--moon-dim); }
.carow .lk { font: 600 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--moon-dim); text-decoration: none; padding: 6px 0; }
.carow .lk:hover { color: var(--lume); }
.vempty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; text-align: center; font-size: 19px; }
.more { margin: 28px 0 0; }
@media (max-width: 1099px) { .vlist { grid-template-columns: 1fr; max-width: 640px; } }
@media (max-width: 520px) { .vrow { grid-template-columns: 56px 1fr; } .vrow > .bt-sec { grid-column: 2; justify-self: start; } .vi, .crop { width: 56px; height: 56px; } .crop img { width: 56px; height: 56px; } .vn { font-size: 24px; } }

[data-scene=night] { padding-left: 0; padding-right: 0; overflow: hidden; }
[data-scene=night] .sc { width: 100%; }
[data-scene=night] .sh { padding: 0 16px; }
.moons { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.moons li { position: absolute; display: grid; justify-items: center; gap: 2px; transform: translateX(-50%); }
.moons b { font: 400 28px/1 var(--disp); color: var(--moon); }
.moons span { font-size: 14px; color: var(--moon-dim); }
.moons li:nth-child(2) b { color: var(--lume); }
.meter-cap { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin: 14px 0 0; }
.meter-cap .num { font-size: 20px; font-weight: 700; color: var(--lume); }
.meter-cap [data-mlabel] { font: 600 12px/1 var(--text); letter-spacing: .1em; color: var(--moon-dim); }
.meter-cap [data-mlabel].demo { color: var(--lume-lo); }
.sal { font: 400 26px/1 var(--disp); color: var(--lume); }
.bnums { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.bnums li { font-size: 18px; color: var(--moon); }
.bnums li:last-child { color: var(--moon-dim); }
.pays { display: flex; justify-content: space-between; gap: 24px; margin: 16px auto 0; width: var(--sw); max-width: 100%; }
.pay { display: grid; gap: 2px; max-width: 46%; text-align: left; }
.pay.r { text-align: right; }
.pay b { font: 700 30px/1 var(--mono); color: var(--moon); }
.pay.l b { color: var(--ember); }
.pay span { font-size: 15px; color: var(--moon-dim); line-height: 1.35; }
.pay .ember { color: var(--ember); }
.cold .pay b { color: var(--moon-dim); }
.gnum { display: flex; justify-content: center; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin: 16px 0 0; }
.gnum b { font-size: 22px; font-weight: 700; margin-right: 18px; color: var(--moon); }
@media (max-width: 759px) {
  .pays { flex-direction: column; } .pay { max-width: none; } .pay.r { text-align: left; }
  .moons b { font-size: 20px; } .moons span { font-size: 12px; }
  .bnums li { font-size: 14px; }
}

/* ---- ending: the jar */
.ending .sc { width: var(--sw, 1440px); }
.jlinks { position: absolute; left: 0; right: 0; top: calc(var(--ap) * 106); display: flex; justify-content: center; align-items: baseline; gap: 28px; }
.jlinks a { font: 400 30px/1 var(--disp); color: var(--moon); text-decoration: none; -webkit-font-smoothing: none; padding: 6px 2px; }
.jlinks a:hover { color: var(--lume); }
.jgap { width: calc(var(--ap) * 96); }
.jlabel { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; }
.jlabel b { font: 400 26px/1 var(--disp); color: var(--lume); }
.ending .fine { margin: 40px auto 0; padding: 0 0 48px; font-size: 14px; line-height: 2.4; color: var(--moon-dim); max-width: 62ch; }
.ending .fine a { color: var(--moon-dim); }
@media (max-width: 759px) { .jlinks { top: calc(var(--ap) * 112); gap: 14px; } .jlinks a { font-size: 22px; } .jgap { width: calc(var(--ap) * 70); } }

/* ---- footer (inner pages) */
.foot { display: grid; justify-items: center; gap: 16px; padding: 96px 16px 48px; text-align: center; }
.foot img { width: 88px; height: 88px; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.foot nav a { font: 400 26px/1 var(--disp); text-decoration: none; padding: 6px 0; }
.foot .age { font-size: 11px; color: var(--moon-dim); margin-left: 4px; vertical-align: super; }
.fine { margin: 0; font-size: 14px; color: var(--moon-dim); }

/* ---- toasts (stepped, no fades) */
.tstack { position: fixed; z-index: 60; left: 16px; bottom: 16px; display: grid; gap: 8px; max-width: min(460px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); font-size: 16px; line-height: 1.35; }
.toast .tg { flex: none; width: 12px; height: 12px; background: var(--moon-dim); }
.toast.ok .tg { background: var(--lume); }
.toast.err { box-shadow: inset 0 0 0 3px var(--moon-dim); }
.toast.err .tg { background: var(--moon); }
.toast a { white-space: nowrap; font-size: 14px; }

/* ---- inner pages */
.page { max-width: 1120px; margin: 0 auto; padding: 48px 16px 0; }
.phead { text-align: center; }
.phead h1 { margin: 0; font-size: 72px; line-height: 1; letter-spacing: .03em; }
.phead .lede { color: var(--moon-dim); }
.crumbs { margin: 0 0 12px; font: 600 12px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); }
.crumbs a { color: var(--moon-dim); text-decoration: none; }
.frame { background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); padding: 24px; }
.note { font-size: 16px; color: var(--moon-dim); }
@media (max-width: 759px) { .phead h1 { font-size: 48px; } .page { padding-top: 32px; } }

/* coin page */
.cart { display: grid; justify-items: center; gap: 18px; text-align: center; }
.cart .pic { padding: 12px; background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); clip-path: polygon(0 var(--st), var(--st) var(--st), var(--st) 0, calc(100% - var(--st)) 0, calc(100% - var(--st)) var(--st), 100% var(--st), 100% calc(100% - var(--st)), calc(100% - var(--st)) calc(100% - var(--st)), calc(100% - var(--st)) 100%, var(--st) 100%, var(--st) calc(100% - var(--st)), 0 calc(100% - var(--st))); }
.cart .pic img { display: block; width: 384px; height: 384px; }
.cart h1 { margin: 0; font-size: 80px; line-height: 1; }
.cart .tick { font: 700 22px/1 var(--mono); color: var(--lume); }
.cart .desc { max-width: 56ch; margin: 0; color: var(--moon-dim); font-size: 18px; }
.cstate { font: 600 13px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); }
.cstate.blink { color: var(--lume); }
.cnight { margin: 56px auto 0; text-align: center; }
.cnight .sc { width: var(--sw, 960px); }
.cacts { display: flex; justify-content: center; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.cacts .hb2 { display: grid; justify-items: center; gap: 10px; }
.cacts .why { position: static; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0; }
.cmeter { display: flex; justify-content: center; gap: 2px; margin: 18px auto 0; }
.cmeter canvas { display: block; }
.cfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 48px 0 0; padding: 0; }
.cfacts div { padding: 18px 12px; text-align: center; box-shadow: inset -3px 0 0 var(--night); }
.cfacts div:last-child { box-shadow: none; }
.cfacts dt { font: 600 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); }
.cfacts dd { margin: 8px 0 0; font: 700 24px/1 var(--mono); color: var(--moon); }
.cfacts dd.ember { color: var(--ember); }
@media (max-width: 759px) { .cfacts { grid-template-columns: 1fr 1fr; } .cfacts div:nth-child(2) { box-shadow: none; } .cart .pic img { width: 256px; height: 256px; } .cart h1 { font-size: 52px; } }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 52px; padding: 6px 8px; background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); text-decoration: none; color: var(--moon-dim); }
.chip b { font: 700 14px/1 var(--mono); color: inherit; }
.chip span { font: 600 10px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.chip.lit { background: var(--lume); color: var(--ink); box-shadow: inset 0 -3px 0 var(--lume-lo); }
.chip.live { box-shadow: inset 0 0 0 3px var(--lume); color: var(--lume); }
.chip.missed { opacity: 1; color: var(--off); }
.chip:hover { color: var(--moon); }
.chip.lit:hover { background: var(--lume-hi); color: var(--ink); }
.sect { margin: 72px 0 0; text-align: center; }
.sect h2 { margin: 0; font-size: 44px; line-height: 1; letter-spacing: .04em; }
.sect .lede { color: var(--moon-dim); font-size: 18px; }
table.tb { width: 100%; border-collapse: collapse; margin: 24px 0 0; text-align: left; font-size: 16px; }
.tb th { font: 600 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); padding: 10px 12px; box-shadow: inset 0 -3px 0 var(--dusk); }
.tb td { padding: 12px; box-shadow: inset 0 -3px 0 var(--night); vertical-align: top; }
.tb th.r, .tb td.r { text-align: right; }
.tb .lume { color: var(--lume); }
.twrap { overflow-x: auto; }
.bdots { display: inline-flex; gap: 2px; vertical-align: middle; }
.bdots i { width: 6px; height: 10px; background: var(--off-lo); }
.bdots i.on { background: var(--lume); }

/* launch */
.lgrid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; margin-top: 40px; }
.lform { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; text-align: left; }
.field label, .field .lab { font: 600 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--night); border: 0; box-shadow: inset 0 0 0 3px var(--dusk); color: var(--moon); font: 400 19px/1.4 var(--text); border-radius: 0; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 3px var(--lume-lo); }
.field input.num { font-family: var(--mono); }
.field textarea { min-height: 90px; resize: vertical; }
.field .hint { font-size: 14px; color: var(--moon-dim); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drop { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 14px; background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); }
.drop .pv { width: 96px; height: 96px; background: var(--void); display: block; object-fit: cover; }
.drop input[type=file] { font-size: 15px; color: var(--moon-dim); }
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.presets .mini { color: var(--moon); box-shadow: inset 0 0 0 3px var(--dusk); }
.presets .mini.on { color: var(--lume); box-shadow: inset 0 0 0 3px var(--lume-lo); }
.lside { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 20px; background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); }
.lside canvas { display: block; }
.lside .facts { display: grid; gap: 6px; width: 100%; text-align: left; font-size: 15px; color: var(--moon-dim); }
.lside .facts div { display: flex; justify-content: space-between; gap: 12px; }
.lside .facts b { font: 700 15px/1.4 var(--mono); color: var(--moon); }
.ldone { padding: 18px; background: var(--night); box-shadow: inset 0 0 0 3px var(--lume-lo); display: grid; gap: 10px; }
@media (max-width: 900px) { .lgrid { grid-template-columns: 1fr; } .frow { grid-template-columns: 1fr; } }

/* mine */
.mtot { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; margin: 32px 0 0; }
.mtot .v { display: grid; gap: 6px; justify-items: center; }
.mtot b { font: 700 30px/1 var(--mono); }
.mtot b.lume { color: var(--lume); }

/* stats / nights */
.killer { margin: 24px auto 0; max-width: 30ch; font: 400 44px/1.1 var(--disp); color: var(--moon); text-align: center; }
.killer .num { font-family: var(--mono); font-weight: 700; font-size: 38px; color: var(--lume); }
.nstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin: 32px 0 0; }
.nstrip a { width: 18px; height: 18px; background: var(--off-lo); }
.nstrip a.lit { background: var(--lume); }
.nstrip a.dark { background: var(--dusk); }
.nstrip a:hover { box-shadow: inset 0 0 0 3px var(--moon); }

/* log / docs / tx */
.log { list-style: none; margin: 40px auto 0; padding: 0; max-width: 760px; display: grid; gap: 24px; }
.log li.frame h2 { margin: 6px 0 10px; font-size: 36px; }
.log ul { margin: 0; padding-left: 20px; }
.log ul li { margin: 6px 0; }
.docs { max-width: 860px; margin: 0 auto; }
.docs h2 { font-size: 44px; margin: 64px 0 12px; line-height: 1; letter-spacing: .03em; }
.docs h3 { font-size: 30px; margin: 32px 0 8px; }
.docs p, .docs li { font-size: 18px; }
.docs code, .docs .mono { font-family: var(--mono); font-size: 15px; color: var(--lume); }
.docs .toc { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 24px 0 0; padding: 0; list-style: none; }
.docs .toc a { font: 600 13px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--moon-dim); padding: 8px 0; display: inline-block; }
.docs .toc a:hover { color: var(--lume); }
.docs .formula { display: block; padding: 14px 16px; background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); font: 500 15px/1.6 var(--mono); color: var(--moon); white-space: pre-wrap; overflow-x: auto; }
.txbox dl { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; text-align: left; }
.txbox dt { font: 600 12px/1.8 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); }
.txbox dd { margin: 0; font-family: var(--mono); font-size: 15px; word-break: break-all; }
.evs { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; text-align: left; }
.evs li { padding: 14px 16px; background: var(--night); box-shadow: inset 0 0 0 3px var(--dusk); }
.evs b { font: 400 24px/1 var(--disp); color: var(--lume); }
.evs .kv { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 14px; color: var(--moon-dim); }
.evs .kv span .num { color: var(--moon); }
@media (max-width: 600px) { .txbox dl { grid-template-columns: 1fr; } }

/* 404 */
.lost { min-height: calc(100vh - 72px); display: grid; align-content: center; justify-items: center; gap: 18px; padding: 40px 16px; text-align: center; }
.lost .sc { width: var(--sw, 834px); }
.lost h1 { margin: 12px 0 0; font-size: 56px; line-height: 1; letter-spacing: .04em; }
.lost p { margin: 0; font-size: 20px; }
@media (max-width: 759px) { .lost h1 { font-size: 36px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.scene404 { width: 100%; }
.scene404 .sc { width: var(--sw, 834px); }
.drop input[type=file]::file-selector-button { margin-right: 12px; min-height: 36px; padding: 4px 12px; border: 0; background: var(--void); color: var(--moon); box-shadow: inset 0 0 0 3px var(--moon-dim); font: 400 20px/1 var(--disp); cursor: pointer; }
.drop input[type=file]::file-selector-button:hover { color: var(--lume); box-shadow: inset 0 0 0 3px var(--moon); }
/* placeholders so nothing jumps while the scene art loads (JS then sets whole-device-pixel sizes) */
.sc canvas { max-width: 100%; }
[data-scene=tonight] canvas, [data-scene=bright] canvas { width: calc(320 * var(--ap3, 3px)); aspect-ratio: 320 / 96; }
[data-scene=seal] canvas { width: calc(320 * var(--ap3, 3px)); aspect-ratio: 320 / 80; }
[data-scene=payout] canvas { width: calc(240 * var(--ap3, 3px)); aspect-ratio: 240 / 96; }
[data-scene=glow] canvas { width: calc(256 * var(--ap3, 3px)); aspect-ratio: 256 / 128; }
[data-scene=night] .sc { height: calc(128 * var(--ap3, 3px)); }
#jar canvas { width: calc(480 * var(--ap3, 3px)); aspect-ratio: 480 / 144; }
.cnight canvas { width: calc(320 * var(--ap3, 3px)); aspect-ratio: 320 / 96; }
.scene404 canvas { width: 864px; aspect-ratio: 144 / 80; }
@media (max-width: 759px) {
  [data-scene=tonight] canvas, [data-scene=bright] canvas, .cnight canvas { width: 320px; }
  [data-scene=seal] canvas { width: 320px; } [data-scene=payout] canvas { width: 240px; } [data-scene=glow] canvas { width: 256px; }
  [data-scene=night] .sc { height: 128px; } #jar canvas { width: 224px; aspect-ratio: 224 / 144; } .scene404 canvas { width: 288px; }
}
@media (max-width: 1023px) { .carow .cachip, .carow .lk, .cachip { min-height: 34px; display: inline-flex; align-items: center; } .vn { padding: 4px 0; display: inline-block; } }
.fine a { white-space: nowrap; }
@media (min-width: 1100px) { .vlist[data-list] { min-height: 470px; align-content: start; } }
[data-scene=night] canvas { position: absolute; top: 0; left: 0; }
.moons:not(.placed) { visibility: hidden; }
@media (min-width: 1100px) { .vlist[data-list] { min-height: 560px; } }
.snd { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--moon-dim); box-shadow: inset 0 0 0 3px var(--dusk); }
.snd svg { fill: currentColor; }
.snd .x { display: none; } .snd[aria-pressed="false"] .w { display: none; } .snd[aria-pressed="false"] .x { display: inline; }
.snd:hover { color: var(--lume); }
@media (max-width: 759px) { .snd { display: none; } }
.dsnd { justify-self: start; min-height: 44px; padding: 0 14px; box-shadow: inset 0 0 0 3px var(--dusk); font: 600 14px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); }
.dsnd[aria-pressed="true"] { color: var(--lume); box-shadow: inset 0 0 0 3px var(--lume-lo); }
.docs .mono { word-break: break-all; }
[data-ntable] td, [data-ntable] th, [data-btable] td, [data-btable] th { white-space: nowrap; }
@media (max-width: 1340px) { .bar { gap: 16px; padding: 0 16px; } .nav { gap: 14px; } .bar-r { gap: 8px; } .lantern .cl, .lantern .lk { display: none; } .brand span { font-size: 26px; } }
@media (min-width: 1024px) and (max-width: 1180px) { .lantern { display: none !important; } }