/* 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 {
  --bg: #f7f7f4; --panel: #efefea; --white: #fff;
  --ink: #17202b; --ink2: #47505c; --muted: #7a818a; --faint: #b0b4b9;
  --line: #e2e2dc; --line2: #cfd0c9;
  --accent: #0d7d72; --accent-ink: #0a6359; --accent-soft: rgba(13, 125, 114, .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; }

.kit { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 8px 0 20px; }
.kit-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: grid; align-content: start; }
.kit-card img { width: 100%; height: auto; background: var(--panel); }
.kit-info { padding: 16px 18px 20px; display: grid; gap: 8px; justify-items: start; }
.kit-info h2 { font: 600 20px/1.2 var(--sans); letter-spacing: -0.02em; }
.kit-meta { font: 500 12px/1.2 var(--mono); color: var(--muted); margin-bottom: 6px; }
.kit-text { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 16px 0 24px; }
.kit-text h2 { font: 600 18px/1.2 var(--sans); margin-bottom: 12px; }
.kit-desc { white-space: pre-line; max-width: 560px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); color: var(--ink2); }
.idea { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); align-items: center; }
.idea-art { width: 100%; border-radius: var(--rs); }
.idea-form { display: grid; gap: 12px; justify-items: start; }
.idea-form label { display: grid; gap: 4px; width: 100%; font: 500 12px/1 var(--mono); color: var(--muted); }
.idea-form input { font: 400 16px/1.2 var(--sans); padding: 11px 12px; border: 1px solid var(--line2); border-radius: var(--rs); background: var(--white); color: var(--ink); }
.idea-form input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* minipad launchpad */
.wm-dot { color: var(--accent); font-weight: 800; }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: var(--accent-ink); }
.btn.ghost:hover { background: var(--white); border-color: var(--ink2); }
.dot.wait { background: #c98a1a; box-shadow: 0 0 0 4px rgba(201, 138, 26, .16); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.top, .hero, .stage, .log, .foot, .steps, .block { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }

.hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.hero-art { margin: 0; border-radius: 22px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 48px -32px rgba(23, 32, 43, .35); }
.hero-art img { width: 100%; height: auto; }
h1 { letter-spacing: -0.035em; }

.pad-app { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 4vw, 44px); align-items: start; }
.idea-form { gap: 14px; justify-items: stretch; }
.idea-form .btn { justify-self: start; padding: 13px 22px; font-size: 16px; }
.field { display: grid; gap: 6px; width: 100%; }
.field-name { font: 500 12px/1 var(--mono); color: var(--muted); }
.idea-form input { width: 100%; background: var(--bg); border-color: var(--line); }
.idea-form input:focus { background: var(--white); }
.row2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; justify-self: start; }
.seg-btn { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--ink2); cursor: pointer; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.on { background: var(--accent); color: #fff; }
.seg-btn:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pic-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--rs); font-size: 14px; color: var(--ink2); }
.pic-icon { flex: none; width: 30px; height: 24px; border-radius: 6px; background: var(--accent-soft); position: relative; overflow: hidden; }
.pic-icon::before { content: ""; position: absolute; left: 4px; bottom: -6px; width: 16px; height: 16px; background: var(--accent); transform: rotate(45deg); border-radius: 2px; }
.pic-icon::after { content: ""; position: absolute; right: 5px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hint { font: 500 12px/1.3 var(--mono); color: var(--muted); }

.preview { display: grid; gap: 12px; padding: 18px; border-radius: var(--r); background: var(--accent-soft); position: relative; overflow: hidden; }
.p-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 16px 30px -22px rgba(23, 32, 43, .45); position: relative; z-index: 1; }
.p-head { display: flex; align-items: center; gap: 12px; }
.p-badge, .g-badge { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: #fff; font: 700 20px/1 var(--sans); }
.p-titles { display: grid; gap: 3px; min-width: 0; }
.p-name { font: 600 17px/1.15 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-tick { font: 500 12px/1 var(--mono); color: var(--muted); }
.p-type { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font: 500 11.5px/1 var(--mono); }
.p-line { font-size: 15px; color: var(--ink2); overflow-wrap: anywhere; min-height: 2.9em; }
.p-foot { font: 500 11.5px/1 var(--mono); color: var(--accent-ink); }
.p-mascot { width: 62%; justify-self: end; margin: -8px -10px -18px 0; mix-blend-mode: multiply; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 0 8px; }
.step { padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 6px; align-content: start; }
.step h3 { font: 600 17px/1.2 var(--sans); margin: 0; letter-spacing: -0.01em; }
.step p { color: var(--ink2); font-size: 15px; }
.num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font: 600 13px/1 var(--mono); margin-bottom: 4px; }

.block { padding: clamp(24px, 4vw, 40px) 0 8px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.block-head h2 { font: 650 clamp(22px, 2.6vw, 28px)/1.1 var(--sans); letter-spacing: -0.02em; }
.more { margin-top: 14px; }
.announce { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; padding-bottom: 24px; }
.announce-text h2 { font: 650 clamp(24px, 3vw, 34px)/1.1 var(--sans); letter-spacing: -0.02em; margin: 6px 0 12px; }
.announce-text p { color: var(--ink2); margin-bottom: 12px; }
.announce-text .actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (min-width: 860px) { .announce { grid-template-columns: 1.1fr 1fr; gap: 36px; } }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gallery.is-empty { grid-template-columns: 1fr; }
.g-card { display: grid; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .15s ease, border-color .15s ease; }
a.g-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); }
.g-pic { aspect-ratio: 1; background: var(--accent-soft); display: grid; place-items: center; }
.g-pic img { width: 100%; height: 100%; object-fit: cover; }
.g-pic .g-badge { width: 64px; height: 64px; font-size: 28px; border-radius: 18px; }
.g-body { padding: 12px 14px 14px; display: grid; gap: 4px; }
.g-name { font: 600 15px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-meta, .g-mcap { font: 500 12px/1 var(--mono); color: var(--muted); }
.g-empty { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: var(--white); border: 1px dashed var(--line2); border-radius: var(--r); color: var(--ink2); }
.g-empty img { width: 96px; height: 96px; border-radius: 14px; mix-blend-mode: multiply; flex: none; }

.split { padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 14px; }
.split-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--panel); gap: 2px; }
.split-bar span { flex-basis: 0; min-width: 0; }
.seg-0, .sw-0 { background: var(--accent); }
.seg-1, .sw-1 { background: #5fb3a9; }
.seg-2, .sw-2 { background: var(--ink); }
.seg-3, .sw-3 { background: var(--faint); }
.split-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.split-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.split-label { color: var(--ink2); }
.split-pct { margin-left: auto; font: 600 14px/1 var(--mono); }

.rule-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rule-list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--rs); font-size: 15px; }
.rule-list .when { min-width: 58px; color: var(--accent-ink); }
.log li { background: var(--white); }

.how-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.how-step { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.how-step .num { flex: none; width: 36px; height: 36px; font-size: 15px; margin: 0; }
.how-step h3 { font: 600 18px/1.2 var(--sans); letter-spacing: -0.01em; margin-bottom: 4px; }
.how-step p { color: var(--ink2); max-width: 560px; }
.grow { display: grid; gap: 20px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 800px) { .grow { grid-template-columns: 1fr 1fr; } }
.grow-list { margin: 12px 0 0; padding-left: 18px; color: var(--ink2); display: grid; gap: 6px; }
.hero-art.mascot-art { max-width: 360px; justify-self: center; }

/* picture helper */
.pic-app { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 44px); align-items: start; padding: clamp(18px, 3vw, 36px); }
.pic-stage { border-radius: var(--r); background: var(--accent-soft); padding: 14px; }
#pic-canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; display: block; background: var(--white); }
.wrap-seg { flex-wrap: wrap; border-radius: 18px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line2); cursor: pointer; padding: 0; font: 500 10px/1 var(--mono); color: var(--ink2); background: var(--bg); }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pic-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* examples */
.examples { margin: 0; }
.g-card.ex { margin: 0; }
.ex .g-body { gap: 8px; }
.ex-tag { justify-self: start; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.ex-line { font: 500 15px/1.3 var(--sans); }

@media (max-width: 860px) {
  .pic-app { grid-template-columns: 1fr; }
  .hero-split, .pad-app { grid-template-columns: 1fr; }
  .p-mascot { width: 40%; }
}
@media (max-width: 640px) {
  .steps, .split-list, .rule-list { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr 1fr; }
  .g-empty { flex-direction: column; text-align: center; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .kit, .idea { grid-template-columns: 1fr; }
  .kit-logo { max-width: 260px; }
  .menu { display: none; }
  #app { min-height: 300px; }
  .tile { width: 44px; height: 44px; font-size: 17px; }
}
/* 26.10. hotfix by the platform: the mascot kept its height attribute and was stretched; the next build keeps this */
.p-mascot { height: auto !important; }