/* 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: 138;
  --bg: #f4f4ef; --panel: #fafaf6; --white: #fff;
  --ink: #121317; --ink2: #4a4c54; --muted: #6f7178; --faint: #b0b1b5;
  --line: #e0e0d8; --line2: #c8c8bf;
  --accent: #0b7a45; --accent-ink: #0b7a45; --accent-soft: rgba(11, 122, 69, .1);
  --ok: #0b8a4c;
  --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: 11px 18px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1 var(--sans); border: 0; cursor: pointer; }
.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(11, 138, 76, .14); }

.stage { padding: 8px 0 28px; }
.screen { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(18, 19, 23, .35); 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: #fff; 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; }

.hero { display: grid; gap: 28px; align-items: center; }
.hero-art { width: 100%; max-width: 380px; height: auto; border-radius: var(--r); }
@media (min-width: 820px) { .hero { grid-template-columns: 1.3fr 1fr; } .hero-art { justify-self: end; } }

.board { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; justify-items: start; }
.idea-form { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.idea-input { flex: 1 1 220px; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line2); font: 400 15px/1 var(--sans); background: var(--white); color: var(--ink); }
.ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.idea, .empty { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--rs); background: var(--panel); }
.idea.win { border-color: var(--accent-ink); background: var(--accent-soft); }
.idea-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rank { font: 600 12px/1 var(--mono); color: var(--accent-ink); min-width: 24px; }
.vote { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--white); cursor: pointer; font: 500 13px/1 var(--mono); }
.vote:hover { border-color: var(--accent-ink); }
.note { color: var(--muted); font-size: 13.5px; }

.kit { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 20px; display: grid; gap: 16px; }
.kit-card { display: grid; gap: 12px; justify-items: start; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.kit-card h2 { font: 600 18px/1.2 var(--sans); }
.kit-logo { width: 100%; max-width: 260px; height: auto; border-radius: var(--rs); }
.kit-banner { width: 100%; height: auto; border-radius: var(--rs); }
@media (min-width: 820px) { .kit { grid-template-columns: 1fr 2fr; align-items: start; } }

/* DailyPad launchpad */
.wordmark b { color: var(--accent); font-weight: 700; }
.btn { background: var(--accent); }
.btn:hover { background: var(--ink); }
.btn.ghost:hover { background: var(--accent-soft); color: var(--ink); }
.pad { display: grid; gap: clamp(18px, 3vw, 32px); }
.clock { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r); background: var(--ink); color: #fff; }
.clock .eyebrow { color: #7ee2ae; }
.clock .note { color: #a9abb2; }
.count { font: 700 clamp(44px, 8vw, 68px)/1 var(--mono); letter-spacing: -0.03em; }
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.4 var(--mono); color: #d9dade; }
.status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e0a43a; }
.status.on::before { background: #3ad083; }
.pad-form { display: grid; gap: 12px; align-content: start; justify-items: stretch; }
.pad-form .btn { justify-self: start; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; font: 500 12px/1 var(--mono); color: var(--ink2); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; padding: 11px 13px; border-radius: var(--rs); border: 1px solid var(--line2); background: var(--white); color: var(--ink); font: 400 15px/1.4 var(--sans); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
@media (min-width: 820px) { .pad { grid-template-columns: 1fr 1.3fr; } }

.band, .sec { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0; }
.band { display: grid; gap: 28px; align-items: center; }
.band h2, .sec h2 { font: 700 clamp(24px, 3.4vw, 34px)/1.1 var(--sans); letter-spacing: -0.02em; margin-bottom: 14px; }
.pitch { color: var(--ink2); font-size: 17px; max-width: 560px; }
.steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.steps b { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 14px/1 var(--mono); }
.band-art { width: 100%; max-width: 440px; height: auto; border-radius: var(--r); justify-self: center; }
@media (min-width: 820px) { .band { grid-template-columns: 1.2fr 1fr; } .band-art { justify-self: end; } }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.more { font: 500 14px/1 var(--mono); color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.card { display: grid; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card:hover { text-decoration: none; border-color: var(--accent); }
.pic-box { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--panel); }
.pic-box .pic { width: 100%; height: 100%; object-fit: cover; }
.pic-box.sm { width: 44px; flex: none; border-radius: 10px; }
.card-body { display: grid; gap: 4px; padding: 12px; }
.card-name { font-weight: 600; overflow-wrap: anywhere; }
.card-tk, .card-m { font: 500 12px/1.3 var(--mono); color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.fact { display: grid; gap: 6px; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.fact .k { font: 500 12px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fact .v { font-weight: 600; }
.sub { font: 600 18px/1.2 var(--sans); margin: 28px 0 6px; }
.split { display: grid; gap: 10px; margin-top: 14px; max-width: 640px; }
.part { display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px; align-items: center; }
.part-pct { font: 700 16px/1 var(--mono); color: var(--accent); }
.part-k { font-size: 15px; }
.part-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.part-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

.board-wrap .board { margin: 0; }

.page-h { margin: 12px 0 10px; font-size: clamp(30px, 5vw, 48px); }
.history { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 8px; }
.h-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--rs); }
.h-n { font: 600 12px/1 var(--mono); color: var(--accent); min-width: 22px; }
.h-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.h-go { font: 500 13px/1 var(--mono); color: var(--accent); }

/* idea board page */
.ideas.wide { max-width: none; margin-top: 14px; }
.idea-by { font: 500 12px/1 var(--mono); color: var(--muted); }
.leaders { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; max-width: 640px; }
.lead-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 4px 12px; align-items: center; }
.lead-row .part-bar { grid-column: 1 / -1; }
.creators .pro { padding: 16px; gap: 6px; justify-items: start; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 15px/1 var(--mono); }
.fees-facts { margin-top: 22px; }
.fine { margin-top: 14px; }

.cardgen { display: grid; gap: 22px; padding: clamp(18px, 3vw, 32px); align-items: start; }
.card-cv { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--rs); border: 1px solid var(--line); }
@media (min-width: 820px) { .cardgen { grid-template-columns: 1fr 1.5fr; } }

/* announcer bot page */
.ann { display: grid; gap: 22px; padding: clamp(18px, 3vw, 32px); align-items: start; background: linear-gradient(160deg, var(--accent-soft), transparent 60%); }
.tg { max-width: 420px; width: 100%; display: grid; gap: 10px; }
.tg-head { display: flex; align-items: center; gap: 10px; }
.tg-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.tg-who { display: grid; gap: 2px; font-size: 15px; }
.tg-who span { font: 500 12px/1 var(--mono); color: var(--muted); }
.tg-msg { position: relative; display: grid; gap: 6px; justify-items: start; padding: 16px 16px 26px; background: var(--white); border: 1px solid var(--line); border-radius: 4px 18px 18px 18px; box-shadow: 0 14px 30px -20px rgba(18, 19, 23, .4); }
.tg-k { font: 500 11.5px/1 var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.tg-win { font: 700 22px/1.2 var(--sans); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tg-sub { color: var(--ink2); font-size: 14px; }
.tg-count { font: 700 34px/1 var(--mono); letter-spacing: -0.02em; }
.tg-btn { margin-top: 8px; padding: 9px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font: 600 14px/1 var(--sans); }
.tg-time { position: absolute; right: 12px; bottom: 8px; font: 500 11px/1 var(--mono); color: var(--faint); }
.ann-side { display: grid; gap: 12px; min-width: 0; }
.ann-text { width: 100%; min-width: 0; padding: 12px 14px; border-radius: var(--rs); border: 1px solid var(--line2); background: var(--white); color: var(--ink); font: 400 13.5px/1.5 var(--mono); resize: vertical; }
.ann-side .actions { margin-top: 0; }
@media (min-width: 820px) { .ann { grid-template-columns: 1fr 1fr; } }

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