:root{--bg: #0a0c14;--panel: #141826;--panel-2: #1c2236;--ink: #e8ecf8;--ink-dim: #8b93ad;--line: #2a3252;--accent: #54e0c7;--bad: #ff5a7a;--good: #8af0a0}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.stage{position:relative;width:960px;max-width:100vw;height:600px;max-height:100vh}canvas{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(1200px 700px at 70% -10%,#161c30,#0a0c14 60%);border:1px solid var(--line);border-radius:10px;cursor:crosshair;touch-action:none}.hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:10px 12px;font-size:13px}.row{display:flex;gap:10px;align-items:flex-start}.row.top{justify-content:space-between}.row.bottom{justify-content:space-between;align-items:flex-end}.stat{background:#141826d1;border:1px solid var(--line);border-radius:8px;padding:6px 10px;line-height:1.35;backdrop-filter:blur(3px)}.stat b{color:var(--accent);font-variant-numeric:tabular-nums}.stat .bad{color:var(--bad)}.stat .good{color:var(--good)}.stat .label{color:var(--ink-dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.palette{pointer-events:auto;display:flex;gap:6px;background:#141826d1;border:1px solid var(--line);border-radius:10px;padding:6px;backdrop-filter:blur(3px)}.tool{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:8px;padding:6px 9px;min-width:78px;text-align:left;cursor:pointer;font:inherit;transition:border-color .12s,transform .06s}.tool:hover{border-color:var(--accent)}.tool.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.tool:disabled{opacity:.4;cursor:not-allowed}.tool .k{color:var(--ink-dim);font-size:11px}.tool .cost{color:var(--accent);font-size:11px}.swatches{pointer-events:auto;display:flex;gap:6px;align-items:center}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0}.swatch:hover{border-color:#fff}.btn{pointer-events:auto;border:1px solid var(--accent);background:linear-gradient(180deg,#1e6f63,#14564d);color:#eafffb;border-radius:8px;padding:8px 14px;cursor:pointer;font:inherit;font-weight:600}.btn:hover{filter:brightness(1.12)}.btn.ghost{background:var(--panel-2);border-color:var(--line);color:var(--ink);font-weight:500}.tune{pointer-events:auto;display:flex;align-items:center;gap:8px;background:#141826d1;border:1px solid var(--line);border-radius:10px;padding:6px 10px;backdrop-filter:blur(3px)}.tune .bar{width:180px;height:14px;border-radius:7px;background:linear-gradient(90deg,#f42525,#f4f425,#25f425,#25f4f4,#2525f4,#f425f4,#f42525);position:relative;cursor:pointer}.tune .needle{position:absolute;top:-3px;width:3px;height:20px;background:#fff;border-radius:2px;transform:translate(-50%);box-shadow:0 0 4px #000000b3}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;background:#080a12c7;backdrop-filter:blur(4px);border-radius:10px;pointer-events:auto}.overlay.hidden{display:none}.overlay h1{margin:0;font-size:40px;letter-spacing:.02em}.overlay h1 .lo{color:var(--accent)}.overlay p{margin:0;max-width:540px;color:var(--ink-dim);line-height:1.5}.overlay .summary{display:grid;grid-template-columns:auto auto;gap:4px 18px;margin:4px 0}.overlay .summary b{color:var(--accent);font-variant-numeric:tabular-nums}.legend{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;max-width:620px;color:var(--ink-dim);font-size:12px}.legend span:before{content:"●";margin-right:4px}.kbd{color:var(--ink-dim);font-size:12px}.kbd b{color:var(--ink)}