/* 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: 31;
  --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; }

.lw { display: grid; gap: 14px; justify-items: center; text-align: center; }
.lw-word { font: 700 clamp(44px, 12vw, 110px)/1 var(--sans); letter-spacing: -0.04em; color: var(--accent-ink); overflow-wrap: anywhere; }
.lw-timer { font: 500 15px/1 var(--mono); color: var(--ink2); }
.lw-form { display: flex; gap: 8px; width: min(420px, 100%); }
.lw-input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line2); font: 500 15px/1 var(--sans); background: var(--white); color: var(--ink); }
.lw-best { font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
.feed-head { display: grid; gap: 4px; margin-top: 8px; text-align: left; width: 100%; }
.feed-title { font: 600 18px/1.2 var(--sans); letter-spacing: -0.01em; }
.fi { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--rs); background: var(--panel); text-align: left; }
.fi-w { font: 600 15px/1.2 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.fi-t { font: 500 12.5px/1 var(--mono); color: var(--accent-ink); white-space: nowrap; }
.lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-row { display: grid; grid-template-columns: 44px 1fr auto 92px; gap: 4px 10px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rs); background: var(--panel); font: 500 13px/1.3 var(--mono); }
.lb-row.now { border-color: var(--accent); background: var(--accent-soft); }
.lb-head { background: transparent; border: 0; padding-bottom: 0; color: var(--muted); font-size: 12px; }
.lb-rank { color: var(--muted); }
.lb-word { font: 600 16px/1.2 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.lb-dur { color: var(--accent-ink); white-space: nowrap; }
.lb-date { color: var(--muted); text-align: right; }
.board { display: grid; gap: 6px; }
.lb .empty { padding: 8px 0; color: var(--muted); }
@media (max-width: 480px) { .lb-row { grid-template-columns: 30px 1fr auto 78px; gap: 4px 6px; font-size: 12px; } }
.fi-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.fi-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 4%); background: var(--accent); border-radius: 4px; }
.lw-hist .empty { padding: 8px 0; color: var(--muted); }
.feed-pic { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 24px 0; display: grid; gap: 12px; }
.feed-pic h2 { font: 600 18px/1.2 var(--sans); }
.feed-pic img { width: 100%; height: auto; border-radius: var(--r); }
.lw-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; font: 500 12.5px/1.4 var(--mono); color: var(--ink2); }
.hero-pic { margin-top: 24px; }
.hero-pic img { width: 100%; height: auto; border-radius: var(--r); }
.kit { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 24px; display: grid; gap: 16px; grid-template-columns: 1fr; }
.kit-card { display: grid; gap: 10px; justify-items: start; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); align-content: start; }
.kit-card img { width: 100%; height: auto; border-radius: var(--rs); }
.kit-card h2 { font: 600 18px/1.2 var(--sans); }
.note { font: 500 12.5px/1 var(--mono); color: var(--muted); }
@media (min-width: 800px) { .kit { grid-template-columns: 1fr 2fr; } }

/* dark theme for lastword. */
:root { --hue: 150; --bg: #0b0c10; --panel: #14161c; --white: #10121a; --ink: #f4f5f7; --ink2: #b4b7c0; --muted: #858995; --faint: #50535c; --line: #23262f; --line2: #343844; --accent: hsl(150 85% 52%); --accent-ink: hsl(150 80% 60%); --accent-soft: hsl(150 85% 52% / .14); }
.btn { background: var(--accent); color: #07110b; }
.btn:hover { background: var(--ink); color: #07110b; }
.btn.ghost { background: transparent; color: var(--ink); }
.screen { box-shadow: 0 30px 80px -30px hsl(150 85% 52% / .25); }
.lw { padding: clamp(8px, 3vw, 28px) 0; }
.lw-word { font-size: clamp(48px, 17vw, 180px); max-width: 100%; color: var(--ink); text-shadow: 0 0 40px hsl(150 85% 52% / .35); }
.lw-timerbox { display: grid; gap: 6px; }
.lw-timer { font: 600 clamp(24px, 5vw, 40px)/1 var(--mono); color: var(--accent-ink); }
.lw-sub, .lw-msg { font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
.lw-input::placeholder { color: var(--muted); }
.lw-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.how { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 24px; display: grid; gap: 16px; }
.how h2 { font: 600 18px/1.2 var(--sans); }
.how img { width: 100%; height: auto; border-radius: var(--r); }
.how p { color: var(--ink2); max-width: 620px; }

/* sync status and sync page */
.lw-sync { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font: 500 12px/1.3 var(--mono); color: var(--ink2); max-width: 100%; }
.sync-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.sync-dot.poll { background: #e0b341; box-shadow: 0 0 0 4px rgba(224, 179, 65, .16); }
.lw-word.flash { animation: lwflash .8s ease-out; }
@keyframes lwflash { from { color: var(--accent); } to { color: var(--ink); } }
.sync { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 24px; display: grid; gap: 20px; align-items: center; }
.sync h2 { font: 600 18px/1.2 var(--sans); }
.sync p { color: var(--ink2); }
.sync-text { display: grid; gap: 12px; justify-items: start; }
.sync img { width: 100%; height: auto; border-radius: var(--r); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; gap: 6px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.steps h3 { font: 600 16px/1.2 var(--sans); }
.steps p { color: var(--ink2); font-size: 15px; }
.steps code, .rec { font: 500 13px/1.5 var(--mono); color: var(--accent-ink); }
.rec { display: block; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 800px) { .sync { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr 1fr; } }

/* spam protection v1 */
.lw-guard { display: grid; gap: 6px; justify-items: center; width: min(420px, 100%); font: 500 12px/1.3 var(--mono); color: var(--muted); }
.lw-gbar { display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.lw-gfill { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.btn:disabled { background: var(--line2); color: var(--ink2); cursor: not-allowed; }
.lw-input.bad { border-color: #e0b341; }
.lw-input.bad:focus { outline-color: #e0b341; }
.guard { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 24px; display: grid; gap: 20px; align-items: center; }
.guard h2 { font: 600 18px/1.2 var(--sans); }
.guard p { color: var(--ink2); }
.guard img { width: 100%; height: auto; border-radius: var(--r); }
.rules { justify-self: stretch; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rules li { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); font-size: 15px; color: var(--ink2); }
.rules b { flex: none; min-width: 64px; font: 600 13px/1.2 var(--mono); color: var(--accent-ink); }
.words { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-word { font: 600 18px/1.3 var(--mono); margin-right: auto; }
.rv-chip { padding: 4px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font: 500 12.5px/1.3 var(--mono); color: var(--ink2); cursor: pointer; }
.words span { padding: 4px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font: 500 12.5px/1.3 var(--mono); color: var(--ink2); }
@media (min-width: 800px) { .guard { grid-template-columns: 1fr 1fr; } }

/* share card */
.lw-share { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.lw-card { width: 100%; max-width: 600px; height: auto; aspect-ratio: 1200 / 630; border-radius: var(--rs); border: 1px solid var(--line2); }
.lw-card[hidden], .lw-share a[hidden] { display: none; }

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