/* 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: 45;
  --bg: #0e0b0a; --panel: #1a1412; --white: #14100e;
  --ink: #f6ecd8; --ink2: #cdbfa6; --muted: #958874; --faint: #6b6154;
  --line: #2e2420; --line2: #4a3b33;
  --accent: #f2b632; --accent-ink: #f2b632; --accent-soft: rgba(242, 182, 50, .14);
  --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(--accent); color: #1a1006; font: 600 15px/1 var(--sans); border: 0; cursor: pointer; }
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.hero { display: grid; gap: 28px; align-items: center; }
.hero-pic { width: 100%; max-width: 420px; height: auto; border-radius: var(--r); border: 1px solid var(--line2); }
@media (min-width: 860px) { .hero { grid-template-columns: 1.2fr 1fr; } .hero-pic { justify-self: end; } }
.grid-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.grid-form label { display: grid; gap: 6px; font: 500 12px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.grid-form input { width: 100%; padding: 10px 12px; border-radius: var(--rs); border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font: 500 16px/1 var(--mono); }
.grid-out { margin-top: 20px; display: grid; gap: 6px; }
.grow { display: grid; grid-template-columns: 34px 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--rs); background: var(--panel); border: 1px solid var(--line); font: 500 13px/1.2 var(--mono); position: relative; }
.grow.head { background: none; border: 0; color: var(--muted); text-transform: uppercase; font-size: 11px; }
.grow .bar2 { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #d63a2a); }
.note { margin-top: 14px; color: var(--muted); font-size: 13.5px; }
.kit { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 0 0 40px; display: grid; gap: 28px; }
.kit h1 { font-size: clamp(30px, 5vw, 48px); }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 14px; }
.kcard img { width: 100%; height: auto; border-radius: var(--rs); }
.kcard.sq img { max-width: 320px; }
.kcard h2 { font: 600 18px/1.2 var(--sans); }
.kcard p { color: var(--ink2); }
.kcard .btn { justify-self: start; }
.profile { white-space: pre-line; font: 500 15px/1.6 var(--mono); color: var(--ink); background: var(--white); border: 1px solid var(--line2); border-radius: var(--rs); padding: 14px; }
.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; }

/* terminal skin */
:root { --bg: #070c09; --panel: #0e1812; --white: #0a110d; --ink: #dcf5e4; --ink2: #aacbb5; --muted: #7a9985; --line: #1d3326; --line2: #2f5240; --accent: #54f08c; --accent-ink: #54f08c; --accent-soft: rgba(84, 240, 140, .14); }
body, .wordmark, h1, h2, h3 { font-family: var(--mono); }
h1 { letter-spacing: -0.04em; }
.btn { color: #04120a; }
.wordmark { color: var(--accent); }
.sect { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 24px 0 28px; }
.sect h2 { font: 600 18px/1.2 var(--mono); margin-bottom: 14px; color: var(--accent); }
.sect h2::before { content: "$ "; color: var(--muted); }
.term { margin: 0; padding: 16px; min-height: 17.5em; background: var(--white); border: 1px solid var(--line2); border-radius: var(--r); font: 500 14px/1.5 var(--mono); color: var(--accent); white-space: pre-wrap; overflow-wrap: anywhere; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.card h3 { font: 600 17px/1.2 var(--mono); }
.card p { color: var(--ink2); font-size: 15px; }
.steps, .road { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; }
.steps li, .road li { padding: 12px 14px 12px 48px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); color: var(--ink2); position: relative; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; font: 700 15px/1.5 var(--mono); color: var(--accent); }
.steps b, .road b { color: var(--ink); }
.road li { padding-left: 14px; display: grid; gap: 4px; }
.road li.done { border-color: var(--accent); }
.sect .actions { margin-top: 16px; }
.sect .note { margin-top: 12px; }

/* golden grid calculator */
.gtop { display: grid; gap: 18px; align-items: center; grid-template-columns: 1fr; margin-bottom: 22px; }
.gintro { display: grid; gap: 10px; }
.gtitle { font: 700 clamp(22px, 3.4vw, 32px)/1.1 var(--mono); letter-spacing: -0.03em; }
.gsub { color: var(--ink2); max-width: 520px; }
.gpic { width: 100%; max-width: 180px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line2); }
@media (min-width: 700px) { .gtop { grid-template-columns: 1fr 180px; } }
.grid-form label small { font: 400 11px/1 var(--mono); color: var(--faint); text-transform: none; letter-spacing: 0; }
.gstats { margin-top: 18px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.gstat { display: grid; gap: 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); }
.gstat span { font: 500 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.gstat b { font: 700 18px/1.1 var(--mono); color: var(--accent); overflow-wrap: anywhere; }
.gview { margin-top: 16px; display: grid; gap: 16px; min-width: 0; }
@media (min-width: 960px) { .gview { grid-template-columns: 1fr 1fr; align-items: start; } }
.gchartwrap, .gtable { min-width: 0; }
.gchart { width: 100%; height: auto; display: block; }
.gc-bg { fill: var(--panel); stroke: var(--line); }
.gc-line { stroke: var(--line2); stroke-dasharray: 3 4; }
.gc-bar { fill: var(--accent); }
.gc-avg { stroke: #f2b632; stroke-width: 1.5; }
.gc-t { fill: var(--ink2); font: 500 12px var(--mono); }
.gc-s { fill: var(--muted); font: 500 11px var(--mono); }
.gc-a { fill: #f2b632; font: 600 12px var(--mono); }
.gtable { overflow-x: auto; }
.gtable table { width: 100%; border-collapse: collapse; font: 500 13px/1.3 var(--mono); }
.gtable th { text-align: right; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 8px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.gtable td { text-align: right; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.gtable th:first-child, .gtable td:first-child { text-align: left; color: var(--accent); }
.gwarn { margin-top: 18px; padding: 12px 14px; border: 1px solid #f2b632; border-radius: var(--rs); color: var(--ink2); font-size: 14px; background: rgba(242, 182, 50, .08); }

/* leaderboard */
.lmain { padding: clamp(14px, 3vw, 28px); }
.lboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lrow { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); }
.lrow.top { border-color: var(--accent); }
.lrank { font: 700 18px/1 var(--mono); color: var(--accent); }
.lwho { display: grid; gap: 4px; min-width: 0; }
.lwho b { font: 600 16px/1.2 var(--mono); overflow-wrap: anywhere; }
.ltitle { font: 500 12px/1.2 var(--mono); color: var(--muted); }
.lbar { display: block; height: 5px; width: var(--w, 10%); border-radius: 3px; background: linear-gradient(90deg, var(--accent), #f2b632); }
.lpts { display: grid; text-align: right; gap: 3px; }
.lpts b { font: 700 20px/1 var(--mono); color: var(--accent); }
.lpts span { font: 500 11px/1 var(--mono); color: var(--muted); }

/* memes and stickers */
.mh { font: 600 18px/1.2 var(--mono); color: var(--accent); margin-bottom: 14px; }
.mgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.sgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr)); }
.meme { margin: 0; min-width: 0; }
.meme-box { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); }
.meme-box img { width: 100%; height: 100%; object-fit: cover; }
.mt { position: absolute; left: 8px; right: 8px; text-align: center; font: 800 clamp(16px, 2.2vw, 22px)/1.1 var(--sans); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; }
.mt.top { top: 10px; }
.mt.bot { bottom: 10px; }
.stk-svg { width: 100%; height: auto; display: block; }
.stk { min-width: 0; }
/* milkbot raid terminal */
.bot { display: grid; gap: 0; background: var(--white); border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; min-width: 0; max-width: 100%; }
.bhead { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.bava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--accent); flex: none; }
.bwho { display: grid; gap: 3px; }
.bwho b { font: 700 16px/1 var(--mono); color: var(--accent); }
.bwho span { font: 500 12px/1 var(--mono); color: var(--muted); }
.bfeed { display: grid; gap: 10px; align-content: start; padding: 14px; max-height: 460px; overflow-y: auto; overflow-x: hidden; background: radial-gradient(circle at 20% 0%, var(--accent-soft), transparent 60%); }
.bmsg { display: flex; min-width: 0; }
.bmsg.me { justify-content: flex-end; }
.bbody { display: grid; gap: 7px; max-width: min(520px, 92%); min-width: 0; padding: 10px 12px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; font: 500 14px/1.45 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.bmsg.me .bbody { background: var(--accent); color: #04120a; border-color: transparent; border-radius: 14px 14px 4px 14px; }
.btime { justify-self: end; font: 500 10.5px/1 var(--mono); color: var(--muted); }
.bmsg.me .btime { color: #0b3a1f; }
.blist { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink2); }
.blist code, .blist b { color: var(--accent); font: 600 13.5px/1.4 var(--mono); }
.blink { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bpre { margin: 0; padding: 10px; background: var(--white); border: 1px dashed var(--line2); border-radius: var(--rs); white-space: pre-wrap; font: 500 13px/1.45 var(--mono); color: var(--ink2); }
.bcopy { justify-self: start; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 600 12.5px/1 var(--mono); cursor: pointer; }
.bticket { display: grid; gap: 6px; padding: 12px; border-radius: var(--rs); border: 1px solid #f2b632; background: rgba(242, 182, 50, .08); }
.bticket b { font: 700 22px/1 var(--mono); color: #f2b632; letter-spacing: .04em; }
.bticket span:last-child { font-size: 12px; color: var(--muted); }
.bchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.bchip { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink2); font: 500 12.5px/1 var(--mono); cursor: pointer; }
.bchip:hover { border-color: var(--accent); color: var(--accent); }
.bform { display: flex; gap: 8px; padding: 10px 14px 14px; }
.binput { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font: 500 15px/1 var(--mono); }
.binput:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.bsend { flex: none; }
.bwrap { display: grid; gap: 18px; align-items: start; min-width: 0; }
@media (min-width: 900px) { .bwrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.bside { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bside img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line2); }
.cmds { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cmds li { display: grid; gap: 4px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); color: var(--ink2); font-size: 14px; }
.cmds code { font: 600 13.5px/1.3 var(--mono); color: var(--accent); overflow-wrap: anywhere; }
html, body { overflow-x: hidden; max-width: 100%; }
.hero { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .hero { grid-template-columns: 1.2fr 1fr; } }
.hero > *, .stage, .screen, .lmain, .lboard, .lrow, .sect, .cards, .card { min-width: 0; max-width: 100%; }
.hero-text h1 { overflow-wrap: anywhere; }
.cards { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.lrow { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
.note { overflow-wrap: anywhere; }
.top { flex-wrap: wrap; }
@media (max-width: 640px) {
  .menu { display: none; }
  #app { min-height: 300px; }
  .tile { width: 44px; height: 44px; font-size: 17px; }
}