/* Starting look: warm grey page, white screen, ink text, one accent whose hue comes from the coin ticker. Geist for
   text, Geist Mono for small labels and numbers (local files, SIL OFL). Change the palette freely to fit the idea,
   dark or light, loud or calm: keep it finished and fresh. No inline styles in HTML (strict CSP): JS sets styles
   through the CSSOM only. */
@font-face { font-family: "Geist"; src: url("geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --hue: 322;
  --bg: #0d0a1f; --panel: #171233; --white: #120d2b;
  --ink: #f6f1ff; --ink2: #c6bde6; --muted: #9b92c4; --faint: #6d6596;
  --line: #2b2457; --line2: #40377a;
  --accent: #ff3fa4; --accent-ink: #ff7cc2; --accent-soft: rgba(255, 63, 164, .16);
  --cyan: #2de2e6;
  --ok: #2de2e6;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --r: 16px; --rs: 10px; --maxw: 1080px; --gutter: clamp(16px, 3vw, 28px);
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); }
body { margin: 0; min-height: 100dvh; background: var(--bg); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.top, .hero, .stage, .log, .foot { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; }
.top { display: flex; align-items: center; gap: 18px; padding: 18px 0; }
.wordmark { font: 700 20px/1 var(--sans); letter-spacing: -0.02em; }
.menu { display: flex; gap: 14px; margin-left: 6px; font: 500 14px/1 var(--sans); color: var(--ink2); }
.chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--ink2); }
.mark { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--white); }

.hero { padding: clamp(28px, 6vw, 72px) 0 clamp(18px, 3vw, 32px); }
.hero-text { max-width: 640px; }
h1 { font: 700 clamp(34px, 6vw, 60px)/1.02 var(--sans); letter-spacing: -0.03em; }
.lead { margin-top: 16px; font-size: clamp(16px, 1.6vw, 19px); color: var(--ink2); max-width: 520px; }
.actions { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px; background: var(--accent); color: #1a0716; font: 600 15px/1 var(--sans); border: 0; cursor: pointer; box-shadow: 0 0 24px rgba(255, 63, 164, .45); }
.btn:hover { text-decoration: none; background: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line2); }
.live { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--mono); color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(45, 226, 230, .18); }
.tag { font: 500 11px/1 var(--mono); color: var(--muted); margin-left: 4px; }
body { background: radial-gradient(900px 420px at 85% -80px, rgba(255, 63, 164, .22), transparent 70%), radial-gradient(700px 400px at 0 120px, rgba(45, 226, 230, .12), transparent 70%), var(--bg); }
.hero { display: grid; gap: 28px; align-items: center; }
.hero-pic { border-radius: var(--r); border: 1px solid var(--line2); box-shadow: 0 0 50px rgba(255, 63, 164, .25); width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 820px) { .hero { grid-template-columns: 1.1fr .9fr; } }

/* night desk app */
.desk { display: grid; gap: 20px; }
.desk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.desk h2 { font: 600 24px/1.1 var(--sans); letter-spacing: -0.02em; }
.clock { font: 500 13px/1 var(--mono); color: var(--cyan); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding: 14px; border-radius: var(--rs); border: 1px solid var(--line); background: linear-gradient(180deg, #1a1240, #0d0a1f); overflow: hidden; }
.candle { flex: 1 1 0; min-width: 4px; max-width: 22px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 10px rgba(45, 226, 230, .5); }
.candle.down { background: var(--accent); box-shadow: 0 0 10px rgba(255, 63, 164, .5); }
.say { font: 500 17px/1.4 var(--sans); color: var(--ink); min-height: 2.8em; }
.desk .row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.count { font: 500 13px/1 var(--mono); color: var(--muted); }

/* kit page */
.page { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding-bottom: 40px; }
.page h1 { font-size: clamp(30px, 5vw, 48px); }
.kit { display: grid; gap: 18px; margin-top: 28px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; }
.card img { width: 100%; height: auto; border-radius: var(--rs); border: 1px solid var(--line2); }
.card.sq img { max-width: 320px; }
.card h2 { font: 600 18px/1.2 var(--sans); }
.card p { color: var(--ink2); }
.meta { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.desc p { font-size: 18px; color: var(--ink); }
.desc { display: grid; gap: 10px; }
@media (min-width: 820px) { .kit { grid-template-columns: 340px 1fr; align-items: start; } .kit .wide { grid-column: 1 / -1; } }

/* lore page */
.panels { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 18px; }
.panel { display: grid; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; align-items: center; }
.panel img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--rs); border: 1px solid var(--line2); }
.panel h2 { font: 600 22px/1.2 var(--sans); margin: 8px 0; letter-spacing: -0.02em; }
.panel p { color: var(--ink2); }
.page .lead { margin-top: 12px; }
.page .eyebrow { margin-top: 20px; margin-bottom: 10px; }
@media (min-width: 820px) { .panel { grid-template-columns: 1.2fr 1fr; padding: 18px; gap: 24px; } .panel:nth-child(even) img { order: 2; } }

/* meme pack */
.memes { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.meme { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: grid; gap: 10px; }
.meme canvas { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--rs); display: block; }
.meme .row { display: flex; justify-content: space-between; align-items: center; }
.btn.small { padding: 9px 14px; font-size: 13px; box-shadow: none; }
.sheet { display: grid; gap: 18px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 24px; }
.sheet img { width: 100%; height: auto; border-radius: var(--rs); max-width: 420px; }
.sheet h2 { font: 600 22px/1.2 var(--sans); margin-bottom: 8px; }
.sheet p { color: var(--ink2); }
@media (min-width: 560px) { .memes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .memes { grid-template-columns: repeat(3, 1fr); } .sheet { grid-template-columns: 420px 1fr; } }

/* meme generator */
.mg { display: grid; gap: 22px; margin: 28px 0; align-items: start; }
.mg canvas { width: 100%; max-width: 560px; height: auto; aspect-ratio: 1 / 1; border-radius: var(--r); border: 1px solid var(--line2); }
.mg-controls { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.mg-controls h2 { font: 500 12px/1 var(--mono); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { padding: 8px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--line2); color: var(--ink2); font: 500 13px/1 var(--sans); cursor: pointer; }
.pick:hover, .pick.on { border-color: var(--accent); color: var(--ink); }
.pick.on { background: var(--accent-soft); }
.field { display: grid; gap: 6px; font: 500 12px/1 var(--mono); color: var(--muted); }
.field input { padding: 11px 12px; border-radius: var(--rs); border: 1px solid var(--line2); background: var(--white); color: var(--ink); font: 500 16px/1.2 var(--sans); width: 100%; }
@media (min-width: 900px) { .mg { grid-template-columns: 560px 1fr; } }

/* sticker pack */
.stickers { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.sticker { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: grid; gap: 10px; }
.sticker img { width: 100%; height: auto; aspect-ratio: 1 / 1; background: repeating-conic-gradient(#1d1745 0 25%, #151030 0 50%) 0 0 / 24px 24px; border-radius: var(--rs); }
.sticker .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (min-width: 700px) { .stickers { grid-template-columns: repeat(4, 1fr); } }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.strip img { width: 100%; height: auto; }
@media (min-width: 700px) { .strip { grid-template-columns: repeat(8, 1fr); } }
.packbox { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 20px; }
.packbox .card { grid-template-columns: 1fr; }
.packbox h2 { font: 600 18px/1.2 var(--sans); }

.stage { padding: 8px 0 28px; }
.screen { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 0 60px -20px rgba(255, 63, 164, .5); overflow: hidden; }
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); display: inline-block; }
.url { flex: 1; text-align: center; font: 500 12px/1 var(--mono); color: var(--muted); }
#app { min-height: 380px; padding: clamp(18px, 3vw, 36px); }
.soon { display: grid; place-content: center; text-align: center; min-height: 320px; gap: 8px; color: var(--ink2); }
.soon h2 { font: 600 24px/1.1 var(--sans); color: var(--ink); letter-spacing: -0.02em; }
.eyebrow { font: 500 12px/1 var(--mono); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .08em; }

.log { padding: 24px 0 40px; }
.log h2 { font: 600 18px/1.2 var(--sans); margin-bottom: 12px; letter-spacing: -0.01em; }
.log ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.log li { display: flex; gap: 14px; align-items: baseline; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); font-size: 15px; }
.when { font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }

.foot { padding: 20px 0 48px; color: var(--muted); font-size: 13.5px; display: grid; gap: 10px; }
.ca { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--ink2); font: 500 12px/1.4 var(--mono); cursor: pointer; word-break: break-all; text-align: left; }
.ca:hover { border-color: var(--ink2); color: var(--ink); }
.ca code { font: inherit; }

/* tiles and small building blocks the product can use */
.tiles { display: grid; gap: 8px; }
.tile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font: 700 20px/1 var(--mono); text-transform: uppercase; }
.tile.hit { background: var(--accent); color: #1a0716; border-color: transparent; }
.tile.near { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.tile.miss { background: var(--line); color: var(--muted); border-color: transparent; }

@media (max-width: 640px) {
  .menu { display: none; }
  #app { min-height: 300px; }
  .tile { width: 44px; height: 44px; font-size: 17px; }
}