:root{--bg:#faf6ec;--edge:#26456f;--panel:#fff;--acc-a:#8FA35C;--acc-b:#E06A45;--acc-c:#E5A43B;--acc-d:#7E93A8;--head:#26456f}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#26313f;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center}
main{padding:14px 12px 40px;max-width:820px;margin:0 auto}
.home-btn{display:inline-block;background:var(--acc-c);border:4px solid var(--edge);border-radius:12px;padding:8px 18px;text-decoration:none;color:var(--edge);font-weight:800;box-shadow:4px 4px 0 var(--edge);margin-bottom:12px}
.kicker{font-size:.72rem;letter-spacing:.12em;color:var(--head);font-weight:700}
.wordmark{font-size:clamp(1.3rem,6vw,2rem);letter-spacing:.04em;margin:.2em 0;color:var(--head)}
.sub{margin:0 0 12px;font-size:.95rem;opacity:.85}
.hud{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.stat{background:var(--panel);border:3px solid var(--edge);border-radius:10px;padding:6px 12px;font-size:.9rem}
canvas{max-width:100%;height:auto;border:4px solid var(--edge);border-radius:12px;background:#f3ecd8;box-shadow:5px 5px 0 var(--edge);touch-action:manipulation}
.panel{margin:14px auto 0;max-width:560px;background:var(--panel);border:4px solid var(--edge);border-radius:12px;padding:16px;text-align:left;box-shadow:5px 5px 0 var(--edge)}
.panel[hidden]{display:none}
.p-title{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--head);margin:0 0 6px}
.p-idea{font-size:1.12rem;font-weight:800;margin:0 0 8px;line-height:1.35}
.p-why{margin:0 0 8px;line-height:1.5}
.p-eg{margin:0 0 12px;line-height:1.45;opacity:.9}
.p-build{background:#f2ebda;border:3px solid var(--edge);border-radius:9px;padding:11px 13px;margin:0 0 12px}
.p-build b{display:block;margin-bottom:4px}
.opts{display:grid;gap:8px;margin:10px 0}
.opt{padding:11px 13px;border:3px solid var(--edge);border-radius:9px;background:var(--acc-d);cursor:pointer;font-size:1rem;text-align:left}
.opt:nth-child(4n+1){background:var(--acc-a)}.opt:nth-child(4n+2){background:var(--acc-b)}.opt:nth-child(4n+3){background:var(--acc-c)}
input[type=range]{width:100%;margin:10px 0}
.val{font-weight:800;font-size:1.1rem}
.go{background:var(--acc-c);border:4px solid var(--edge);border-radius:11px;padding:11px 26px;font-weight:800;cursor:pointer;box-shadow:4px 4px 0 var(--edge)}
.msg{margin-top:10px;font-weight:700;min-height:1.4em}
.msg.ok{color:#2f6b34}.msg.no{color:#a3402a}
.lock{opacity:.75;font-size:.92rem}
.gate{position:fixed;inset:0;background:rgba(38,69,111,.92);display:flex;align-items:center;justify-content:center}
.gate[hidden]{display:none}
.gate-card{background:#fff;border:5px solid var(--edge);border-radius:14px;padding:22px 26px}
.who-row{display:flex;gap:12px;justify-content:center;margin-top:10px}
.who{padding:12px 22px;border:4px solid var(--edge);border-radius:11px;background:var(--acc-a);font-weight:800;cursor:pointer}