/* 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: 309;
  --bg: #e9e9e5; --panel: #f6f6f2; --white: #fff;
  --ink: #121317; --ink2: #4a4c54; --muted: #7f8188; --faint: #b0b1b5;
  --line: #d8d8d1; --line2: #c4c4bc;
  --accent: hsl(var(--hue) 92% 52%); --accent-ink: hsl(var(--hue) 85% 38%); --accent-soft: hsl(var(--hue) 90% 52% / .12);
  --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; }

/* bear lore page and cave home */
.lore-hero { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(24px, 5vw, 56px) 0 20px; display: grid; gap: 24px; align-items: center; }
.lore-head .lead { margin-top: 14px; }
.lore-head h1 { margin-top: 10px; }
.lore-art { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.notice { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto 8px; padding: 14px 18px; border: 1px solid var(--accent-ink); background: var(--accent-soft); border-radius: var(--rs); font-size: 15px; color: var(--ink); }
.story { width: min(720px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 24px 0 24px; display: grid; gap: 40px; }
.chapter { display: grid; gap: 14px; font-size: 18px; line-height: 1.6; color: var(--ink2); }
.chapter h2 { font: 700 clamp(26px, 4vw, 36px)/1.1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.chapter h3 { font: 600 17px/1.2 var(--sans); color: var(--ink); margin-bottom: 4px; }
.chapter ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.forbid li { display: flex; gap: 14px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.forbid p { font-size: 16px; line-height: 1.5; }
.n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 15px/1 var(--mono); }
.rules { counter-reset: r; }
.rules li { counter-increment: r; padding: 12px 16px 12px 52px; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); font-size: 17px; }
.rules li::before { content: counter(r); position: absolute; left: 16px; top: 12px; font: 700 15px/1.6 var(--mono); color: var(--accent-ink); }
.quotes li { padding: 14px 18px; border-left: 4px solid var(--accent); background: var(--white); border-radius: 0 var(--rs) var(--rs) 0; color: var(--ink); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.chapter.end { justify-items: center; text-align: center; }
.mascot { width: min(260px, 70%); }
.cave { display: grid; gap: 20px; align-items: center; }
.cave img { width: 100%; max-width: 260px; margin: 0 auto; }
.cave-box { display: grid; gap: 14px; }
.cave-box .take { font: 700 clamp(22px, 3.5vw, 32px)/1.15 var(--sans); letter-spacing: -0.02em; min-height: 2.4em; }
.cave-box .row { display: flex; gap: 10px; flex-wrap: wrap; }
.gen { display: grid; gap: 24px; align-items: center; }
.gen-form { display: grid; gap: 12px; justify-items: start; }
.gen-label { font: 700 clamp(22px, 3.5vw, 30px)/1.15 var(--sans); letter-spacing: -0.02em; }
.gen-input { width: 100%; padding: 14px 16px; border-radius: var(--rs); border: 1px solid var(--line2); background: var(--white); font: 500 17px/1.2 var(--sans); color: var(--ink); }
.gen-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gen-note { font: 500 13px/1.4 var(--mono); color: var(--muted); min-height: 2.8em; }
.gen-card { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 40px -24px rgba(18, 19, 23, .5); }
.gen-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.gen-fine { margin-top: 20px; }
.hero-split { display: grid; gap: 24px; align-items: center; }
.hero-art { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.ticker { overflow: hidden; background: var(--ink); color: #fff; padding: 12px 0; margin: 8px 0 20px; }
.ticker-track { display: flex; gap: 36px; width: max-content; animation: tick 28s linear infinite; font: 500 14px/1 var(--mono); }
.ticker-track span::before { content: "/ "; color: var(--accent); }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
.band { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 24px 0; display: grid; gap: 16px; justify-items: start; }
.band h2 { font: 700 clamp(24px, 4vw, 32px)/1.1 var(--sans); letter-spacing: -0.02em; }
.cards { display: grid; gap: 12px; width: 100%; }
.card { display: grid; gap: 6px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink2); }
.card b { font: 700 20px/1.2 var(--sans); color: var(--ink); }
.card:hover { text-decoration: none; border-color: var(--accent-ink); }
.fine { font-size: 13.5px; color: var(--muted); max-width: 640px; }
.wall { display: grid; gap: 14px; width: 100%; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.meme { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.meme .pic { aspect-ratio: 1; background: url("art/art-cave-meme-site.png") no-repeat; background-size: 220% auto; }
.meme figcaption { padding: 14px 16px; font: 600 17px/1.3 var(--sans); letter-spacing: -0.01em; }
.m1 .pic { background-position: 0 0; }
.m2 .pic { background-position: 100% 0; }
.m3 .pic { background-position: 0 100%; }
.m4 .pic { background-position: 100% 100%; }
.m5 .pic { background-position: 50% 50%; background-size: 160% auto; }
.m6 .pic { background-position: 20% 80%; background-size: 300% auto; }
.m7 .pic { background-position: 80% 20%; background-size: 300% auto; }
.m8 .pic { background-position: 50% 0; background-size: 260% auto; }
.pk { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.meme figcaption:has(button) { display: flex; justify-content: space-between; align-items: center; }
.btn.small { padding: 8px 14px; font-size: 13px; }
@media (min-width: 860px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .hero-split { grid-template-columns: 1fr 1fr; }
  .lore-hero { grid-template-columns: 1.1fr 1fr; }
  .cave { grid-template-columns: 240px 1fr; }
  .gen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .menu { display: none; }
  #app { min-height: 300px; }
  .tile { width: 44px; height: 44px; font-size: 17px; }
}