:root{--sand:#F4D58D;--orange:#E08E45;--brown:#7A4419;--green:#5B8C5A;--ink:#231509;--paper:#fff6dc}
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Mono',monospace;color:var(--ink);
 background:radial-gradient(circle at 20% 0%,#ffe9ad 0,transparent 50%),repeating-linear-gradient(45deg,var(--sand) 0 18px,#efcd80 18px 36px)}
header{text-align:center;padding:28px 12px 8px}
h1{font-family:'Press Start 2P';font-size:clamp(22px,5vw,44px);margin:0;color:var(--orange);text-shadow:4px 4px 0 var(--brown)}
.sub{font-weight:300;margin:12px 0}
.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pill{border:2px solid var(--ink);background:var(--paper);padding:4px 10px;font-size:12px;box-shadow:2px 2px 0 var(--ink)}
.hidden{display:none}
main{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px;max-width:1200px;margin:auto}
.card{background:var(--paper);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--brown);padding:16px;min-width:0;
 animation:pop .5s both;animation-delay:calc(var(--d)*.12s)}
.card.wide{grid-column:1/-1}
@keyframes pop{from{opacity:0;transform:translateY(20px)}}
h2{font-family:'Press Start 2P';font-size:13px;margin:0 0 12px;color:var(--green)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;font-size:13px}
button,select,input[type=number]{font-family:inherit;font-weight:700;border:3px solid var(--ink);background:#fff;padding:6px 10px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
input[type=number]{width:80px}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
button.accent,button.on{background:var(--orange);color:#fff}
button:disabled{opacity:.5;cursor:wait}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chips button{font-size:11px;padding:3px 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px;max-height:300px;overflow:auto}
.grid figure{margin:0;text-align:center;font-size:8px}
canvas.px,.grid canvas,.previews canvas,#canvas{image-rendering:pixelated}
.grid canvas{width:100%;border:2px solid var(--ink)}
#loss{width:100%;border:3px solid var(--ink);background:#fff}
.legend{font-size:11px;display:flex;gap:12px}
.lg::before{content:'';display:inline-block;width:12px;height:4px;margin-right:4px;vertical-align:middle}
.lg.g::before{background:var(--orange)}.lg.p::before{background:var(--green)}
.previews{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.previews canvas{width:48px;border:2px solid var(--ink)}
.status{font-size:12px;min-height:2.4em;background:var(--ink);color:var(--sand);padding:8px}
.compare{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.compare figure{margin:0;text-align:center;font-size:12px}
.compare canvas{width:min(192px,38vw);border:3px solid var(--ink);background:#fff}
#canvas{width:100%;border:4px solid var(--ink);display:block}
.drift{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:8px}
.bar{flex:1;height:12px;border:2px solid var(--ink);background:#fff}
#driftBar{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--orange),#c0392b)}
.pad{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.pad button{min-width:70px;padding:12px;touch-action:none;user-select:none}
.hint{font-size:11px;text-align:center}
footer{text-align:center;padding:20px;font-size:12px}
footer a{color:var(--brown);font-weight:700}
@media(max-width:800px){main{grid-template-columns:1fr;padding:12px}}