body{
  background:
    radial-gradient(ellipse at 20% -10%, var(--accent-glow), transparent 55%),
    repeating-linear-gradient(0deg, transparent, transparent 27px, var(--grid-soft) 28px),
    repeating-linear-gradient(90deg, transparent, transparent 27px, var(--grid-soft) 28px),
    var(--bg);
}
.topbar{max-width:1500px;margin:0 auto;width:100%;padding:1rem 1.2rem .4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-start}
.brand-block h1{font-size:clamp(3rem,7vw,4.6rem);margin:0;color:var(--ink);transform:rotate(-1.2deg);line-height:.9}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .3rem;font-weight:700}
.tagline{margin:.35rem 0 0;font-size:1.05rem;color:var(--ink-soft)}
.tagline strong{color:var(--ink)}
.top-stats{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.stat{background:var(--surface);border:2px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;padding:.45rem .9rem;text-align:center;box-shadow:2px 3px 0 var(--shadow-ink)}
.stat span{display:block;font-weight:800;font-size:1.05rem;color:var(--ink);line-height:1.1}
.stat small{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.layout{max-width:1500px;margin:0 auto;width:100%;padding:.8rem 1.2rem 1.2rem;display:grid;grid-template-columns:250px minmax(0,1fr) 270px;gap:1rem;align-items:start}
.panel{background:var(--surface);border:2px solid var(--ink);border-radius:255px 12px 225px 12px/12px 225px 12px 255px;box-shadow:3px 4px 0 var(--shadow-ink);padding:1rem}
.panel h2{font-size:1.9rem;margin:0 0 .2rem}
.panel h3{font-family:var(--font-text);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.panel-note{font-size:.88rem;color:var(--ink-soft);margin:0 0 .8rem}
.level-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.level-list button{width:100%;text-align:left;display:flex;justify-content:space-between;gap:.5rem;align-items:center;background:var(--card-2);border:1.5px solid var(--line);border-radius:12px 3px 14px 3px;padding:.5rem .65rem;cursor:pointer;font-size:.9rem;color:var(--ink)}
.level-list button:hover{border-color:var(--ink);transform:rotate(-.3deg)}
.level-list button.active{border-color:var(--accent);background:var(--tint);box-shadow:2px 2px 0 rgba(255,138,76,.35);font-weight:700}
.level-list button:disabled{opacity:.45;cursor:not-allowed}
.level-list .lvl-stars{color:var(--accent);white-space:nowrap;font-size:.85rem}
.legend{margin-top:1.1rem;border-top:1.5px dashed var(--line);padding-top:.7rem}
.legend ul{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.45rem;font-size:.85rem}
.swatch{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:.45rem;border:2px solid var(--ink);border-radius:4px}
.mirror-s{background:linear-gradient(135deg,transparent 44%,#7fb2e5 44%,#7fb2e5 56%,transparent 56%)}
.prism-s{background:linear-gradient(90deg,#e5484d,#f5a524,#2f9e6e,#2456c8)}
.grav-s{background:radial-gradient(circle,var(--ink) 30%,#9fc2ff 32%,transparent 70%)}
.rift-s{background:radial-gradient(circle,var(--surface) 25%,var(--accent) 30%,transparent 72%)}
.board-panel{padding:1rem 1rem .8rem}
.board-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-start}
.board-head h2{font-size:2.4rem;margin:0}
.goal{margin:.15rem 0 .6rem;color:var(--ink-soft);max-width:56ch}
.receptors-box{display:grid;gap:.3rem;text-align:right;font-family:var(--font-mono);font-size:.85rem}
#receptorCount{font-weight:800;color:var(--ink);background:var(--tint);border:1.5px solid var(--accent);padding:.3rem .6rem;border-radius:999px}
.engine-stats{color:var(--ink-soft);font-size:.72rem}
.board-wrap{position:relative;border:2.5px solid var(--ink);border-radius:14px 4px 16px 4px;overflow:hidden;background:var(--board);box-shadow:inset 0 0 0 1px var(--grid-soft)}
#board{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.overlay{position:absolute;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:5}
.overlay.hidden{display:none}
.overlay-card{background:var(--surface);border:2.5px solid var(--ink);border-radius:255px 14px 225px 14px/14px 225px 14px 255px;box-shadow:4px 6px 0 var(--shadow-ink);max-width:520px;width:100%;padding:1.4rem 1.5rem;transform:rotate(-.4deg)}
.overlay-card h3{font-family:var(--font-display);font-size:2rem;text-transform:none;letter-spacing:0;margin:.1rem 0 .5rem;color:var(--ink)}
.how{margin:.4rem 0 1rem;padding-left:1.2rem;display:grid;gap:.35rem;font-size:.95rem}
.save-note{font-size:.8rem;color:var(--ink-soft);margin:.6rem 0 0}
.win-card{text-align:center}
.win-stars{font-size:3rem;color:var(--accent);letter-spacing:.2em;text-shadow:2px 2px 0 var(--shadow-ink);animation:pop .5s ease}
@keyframes pop{from{transform:scale(.6) rotate(-4deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.win-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.8rem}
.big-btn{background:var(--accent);color:var(--accent-ink);border:2px solid var(--ink);border-radius:255px 12px 225px 12px/12px 225px 12px 255px;padding:.65rem 1.2rem;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--shadow-ink);font-size:1rem}
.big-btn:hover{transform:translate(-1px,-1px) rotate(-.3deg);box-shadow:4px 5px 0 var(--shadow-ink)}
.big-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow-ink)}
.ink-btn{background:var(--card-2);color:var(--ink);border:2px solid var(--ink);border-radius:255px 10px 225px 10px/10px 225px 10px 255px;padding:.55rem .9rem;font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--shadow-ink)}
.ink-btn:hover{background:var(--tint)}
.ink-btn:disabled{opacity:.45;cursor:not-allowed}
kbd{font-family:var(--font-mono);font-size:.72em;background:var(--ink);color:var(--on-ink);border-radius:4px;padding:.08em .35em}
.controls{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.8rem;align-items:center}
.hint-btn{margin-left:auto}
.hint-box{display:none;margin:.7rem 0 0;background:var(--hint);border:1.5px dashed var(--ink);border-radius:10px 3px 12px 3px;padding:.6rem .8rem;font-size:.92rem}
.hint-box.show{display:block}
.status-line{margin:.55rem 0 0;font-family:var(--font-display);font-size:1.25rem;color:var(--ink)}
.tray{display:grid;gap:.55rem}
.tool-btn{display:flex;align-items:center;gap:.7rem;text-align:left;background:var(--card-2);border:2px solid var(--line);border-radius:14px 4px 16px 4px;padding:.55rem .65rem;cursor:pointer;color:var(--ink)}
.tool-btn:hover{border-color:var(--ink)}
.tool-btn.active{border-color:var(--accent);background:var(--tint);box-shadow:2px 2px 0 rgba(255,138,76,.4)}
.tool-btn:disabled{opacity:.45;cursor:not-allowed}
.tool-icon{width:42px;height:42px;flex:0 0 42px;border:2px solid var(--ink);border-radius:10px 3px 12px 3px;display:grid;place-items:center;font-size:1.3rem;background:var(--board)}
.tool-btn b{display:block;font-size:.95rem}
.tool-btn small{display:block;color:var(--ink-soft);font-size:.76rem;line-height:1.35}
.tool-count{margin-left:auto;font-family:var(--font-mono);font-weight:800;background:var(--ink);color:var(--on-ink);border-radius:999px;min-width:1.7rem;text-align:center;padding:.15rem .4rem}
.selected-box,.keys-box,.perf-box{margin-top:1rem;border-top:1.5px dashed var(--line);padding-top:.7rem;font-size:.88rem}
.selected-box p,.keys-box p,.perf-box p{margin:.3rem 0 0;color:var(--ink-soft)}
.notes{max-width:1500px;margin:0 auto;width:100%;padding:0 1.2rem 1rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.notes article{background:var(--surface);border:2px solid var(--ink);border-radius:12px 255px 12px 225px/225px 12px 255px 12px;padding:1rem 1.2rem;box-shadow:3px 4px 0 var(--shadow-ink)}
.notes h2{font-size:1.8rem;margin:0 0 .3rem}
.notes p{margin:0;color:var(--ink-soft);font-size:.95rem}
.footer{text-align:center;color:var(--ink-soft);font-family:var(--font-display);font-size:1.2rem;padding:.5rem 1rem 1.6rem}
@media (max-width:1080px){.layout{grid-template-columns:210px minmax(0,1fr)}.tray-panel{grid-column:1/-1}.tray{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
@media (max-width:720px){.layout{grid-template-columns:1fr;padding:.6rem}.levels-panel{order:2}.tray-panel{order:3}.notes{grid-template-columns:1fr;padding:0 .6rem 1rem}.topbar{padding:.8rem .6rem 0}.receptors-box{text-align:left}.hint-btn{margin-left:0}.overlay-card{padding:1rem}.how{font-size:.88rem}}