/* 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: 78;
  --bg: #0c0d0f; --panel: #16181c; --white: #111316;
  --ink: #f3f4ee; --ink2: #b9bbb4; --muted: #80837c; --faint: #4d5049;
  --line: #24272c; --line2: #363a40;
  --accent: hsl(var(--hue) 95% 56%); --accent-ink: hsl(var(--hue) 90% 62%); --accent-soft: hsl(var(--hue) 90% 56% / .12);
  --ok: #b6f23a;
  --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: #0c0d0f; font: 600 15px/1 var(--sans); border: 0; cursor: pointer; }
.btn:hover { text-decoration: none; background: var(--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 var(--accent-soft); }

.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; }

/* degenmeter. */
body { background: radial-gradient(900px 500px at 85% -10%, hsl(var(--hue) 90% 50% / .10), transparent 70%), var(--bg); }
.wordmark b { color: var(--accent); }
.hero { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.hero .eyebrow { margin-bottom: 16px; }
.hl { color: var(--accent); }
.hero-art { position: relative; display: none; justify-self: end; width: 300px; }
.mini-gauge { width: 100%; }
.hero-coin { position: absolute; left: 50%; bottom: 0; width: 84px; height: 84px; transform: translate(-50%, 30%); border-radius: 50%; border: 4px solid var(--bg); background: var(--panel); }
.g-track, .g-fill { fill: none; stroke-width: 16; stroke-linecap: round; }
.g-track { stroke: var(--line2); }
.g-fill { stroke: var(--accent); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .35s ease; }
.g-fill-hero { stroke-dashoffset: 22; }
.g-hub { fill: var(--ink); }
.g-needle { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 110px 110px; transform: rotate(-90deg); transition: transform .35s ease; }
.screen { background: var(--white); box-shadow: 0 40px 80px -40px hsl(var(--hue) 90% 50% / .25); }
.url { color: var(--ink2); }

.meter { display: grid; grid-template-columns: 1fr; gap: 28px; }
.meter-in { display: grid; gap: 12px; align-content: start; }
textarea { width: 100%; resize: vertical; min-height: 160px; padding: 14px 16px; border-radius: var(--rs); border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font: 400 16px/1.5 var(--sans); }
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.samples { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font: 500 13px/1 var(--mono); cursor: pointer; }
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.ghost { background: transparent; color: var(--muted); }
.backend { display: grid; gap: 8px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.field { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font: 500 13px/1.2 var(--mono); }
.field:focus { outline: none; border-color: var(--accent); }
.doc { width: min(720px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 32px 0 56px; display: grid; gap: 14px; }
.doc h1 { font: 700 clamp(30px, 6vw, 48px)/1.05 var(--sans); letter-spacing: -0.02em; }
.doc h2 { font: 600 18px/1.2 var(--sans); margin-top: 12px; }
.doc p, .doc li { color: var(--ink2); line-height: 1.55; }
.doc pre { margin: 0; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); overflow-x: auto; font: 500 13px/1.5 var(--mono); color: var(--ink); }
.small { font: 500 12px/1 var(--mono); color: var(--muted); }
.meter-out { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 20px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.gauge-wrap { width: min(280px, 100%); }
.gauge { width: 100%; display: block; }
.score { margin-top: -6px; font: 700 64px/1 var(--sans); letter-spacing: -0.04em; }
.score small { font: 500 16px/1 var(--mono); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.band { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #0c0d0f; background: var(--accent); padding: 6px 10px; border-radius: 999px; }
.verdict { font: 600 19px/1.3 var(--sans); max-width: 340px; min-height: 2.6em; }
.parts { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; display: grid; gap: 8px; text-align: left; }
.parts li { display: grid; grid-template-columns: 130px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; color: var(--ink2); }
.track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .35s ease; }
.pval { font: 500 12px/1 var(--mono); color: var(--muted); text-align: right; }
.inline { color: var(--accent); }

.share { grid-column: 1 / -1; display: grid; gap: 12px; padding: 20px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.card-canvas { width: 100%; max-width: 720px; height: auto; aspect-ratio: 16 / 9; border-radius: var(--rs); border: 1px solid var(--line2); background: var(--bg); }
.share-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.share-actions .btn { padding: 12px 18px; }
.share-actions a.pill { text-decoration: none; padding: 11px 14px; }
button:disabled { opacity: .4; cursor: not-allowed; }
.pill.off { opacity: .4; pointer-events: none; }
.card-style { display: grid; gap: 8px; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { display: grid; justify-items: center; gap: 4px; padding: 6px; border-radius: var(--rs); border: 1px solid var(--line2); background: transparent; color: var(--muted); font: 500 11px/1 var(--mono); cursor: pointer; }
.opt:hover { border-color: var(--accent); }
.opt.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.opt .sw { width: 44px; height: 44px; border-radius: 6px; }
.tg { display: grid; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); }
.tg-log { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; align-content: start; }
.tg-msg { margin: 0; padding: 10px 14px; border-radius: 14px; max-width: 88%; white-space: pre-line; overflow-wrap: anywhere; font: 500 14px/1.45 var(--sans); }
.tg-msg.bot { justify-self: start; border: 1px solid var(--line2); color: var(--ink); }
.tg-msg.me { justify-self: end; background: var(--accent); color: #0c0d0f; }

.examples, .results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.examples li { display: flex; gap: 16px; align-items: center; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); }
.examples b { font: 700 28px/1 var(--sans); color: var(--accent); min-width: 48px; }
.results li.pass .when { color: var(--accent); }
.results li.fail { border-color: #ff5d5d; }
.results li.fail .when { color: #ff5d5d; }
.some-fail { color: #ff5d5d; }

.rate { width: 100%; justify-content: center; padding: 16px 20px; font-size: 17px; }
.rate:active { transform: scale(.98); }
.sep { color: var(--faint); margin: 0 4px; }
.meter-out.rated .band { animation: pop .4s ease; }
.meter-out.rated .verdict { animation: fade .5s ease; }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.g-fill, .g-needle { transition-duration: .9s; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
.track i { transition-duration: .9s; }
@media (prefers-reduced-motion: reduce) { .g-fill, .g-needle, .track i { transition: none; } .meter-out.rated * { animation: none !important; } }

.pack { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.pack-h { font: 700 clamp(22px, 3vw, 30px)/1.1 var(--sans); letter-spacing: -0.02em; }
.pack-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
.ex { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: var(--rs); border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.ex:hover { border-color: var(--accent); }
.ex b { font: 700 30px/1 var(--sans); color: var(--accent); min-width: 44px; letter-spacing: -0.03em; }
.ex span { display: grid; gap: 4px; }
.ex strong { font: 600 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.ex em { font-style: normal; font-size: 14px; color: var(--ink2); overflow-wrap: anywhere; }

.board { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; justify-items: start; }
.optin { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.rank { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.rank li { display: grid; grid-template-columns: 28px 48px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); }
.rank .rk { font: 500 12px/1 var(--mono); color: var(--muted); }
.rank b { font: 700 24px/1 var(--sans); color: var(--accent); letter-spacing: -0.03em; }
.rank em { font-style: normal; font-size: 14px; color: var(--ink2); overflow-wrap: anywhere; }
.rank small { font: 500 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; }

@media (min-width: 900px) {
  .pack-grid { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr 300px; }
  .hero-art { display: block; }
  .meter { grid-template-columns: 1.1fr 1fr; }
}

@media (max-width: 640px) {
  .parts li { grid-template-columns: 110px 1fr 40px; }
  .score { font-size: 54px; }
  .menu { display: none; }
  #app { min-height: 300px; }
  .tile { width: 44px; height: 44px; font-size: 17px; }
}