:root{--paper:#f6f1e4;--ink:#1b1b1b;--red:#e63946;--hl:#ffe066;--line:#cfc6ae;--mono:'IBM Plex Mono',monospace;--disp:'Fraunces',serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;
background-image:repeating-linear-gradient(transparent 0 27px,#e4dcc6 27px 28px),linear-gradient(90deg,transparent 46px,#f3b3b8 46px 47px,transparent 47px)}
header,main,footer{max-width:1150px;margin:0 auto;padding:16px 20px 16px 60px}
h1{font-family:var(--disp);font-weight:900;font-size:clamp(48px,9vw,96px);margin:10px 0 0;letter-spacing:-2px}
.eye{display:inline-block;font-size:.35em;margin-left:14px;vertical-align:middle;animation:squint 3s infinite}
@keyframes squint{0%,80%,100%{transform:scaleY(1)}88%{transform:scaleY(.15)}}
.sub{font-family:var(--disp);font-weight:300;font-size:20px;margin:4px 0 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.chip{border:1.5px solid var(--ink);padding:3px 9px;border-radius:20px;font-size:12px;background:#fff8}
.chip.warn{border-color:var(--red);color:var(--red)}
.fine{opacity:.6;font-size:11px}
h2{font-family:var(--disp);font-weight:900;font-size:30px;margin:28px 0 10px}
h2 small{font-family:var(--mono);font-weight:300;font-size:12px;opacity:.6}
.top{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.drop{border:2.5px dashed var(--ink);border-radius:10px;padding:22px;text-align:center;cursor:pointer;background:#fffdf6;transition:.2s}
.drop.over,.drop:hover{background:var(--hl);transform:rotate(-.4deg)}
.drop-big{font-family:var(--disp);font-weight:900;font-size:28px;margin-bottom:6px}
.draw{background:#fffdf6;border:1.5px solid var(--line);border-radius:10px;padding:12px}
.lbl{font-size:12px;margin-bottom:6px;opacity:.7}
#pad{width:100%;background:#fff;border:1px solid var(--line);touch-action:none;cursor:crosshair;border-radius:6px}
.row{display:flex;gap:8px;margin-top:10px;justify-content:center;flex-wrap:wrap}
button{font-family:var(--mono);font-weight:700;background:var(--ink);color:var(--paper);border:0;padding:9px 16px;border-radius:6px;cursor:pointer}
button:hover{background:var(--red)}
button.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
button.ghost:hover{background:var(--hl)}
.training{margin:16px 0;display:flex;align-items:center;gap:12px;font-size:12px}
.training.done{opacity:.5}
.bar{flex:0 0 200px;height:10px;border:1.5px solid var(--ink);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--red);transition:width .1s}
.settings{background:#fffdf6;border:1.5px solid var(--line);border-radius:10px;padding:10px 14px}
.settings summary{cursor:pointer;font-weight:700}
.settings .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px;align-items:end}
.settings label{display:flex;flex-direction:column;gap:4px;font-size:12px}
.settings label.chk{flex-direction:row;align-items:center}
input[type=range]{accent-color:var(--red)}
.stages{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:#fff;border:1.5px solid var(--ink);border-radius:8px;padding:8px;cursor:zoom-in;opacity:0;animation:pop .4s forwards;box-shadow:4px 4px 0 var(--ink)}
.card:hover{box-shadow:6px 6px 0 var(--red)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card canvas{width:100%;height:150px;object-fit:contain;background:#eee;display:block;border-radius:4px}
.card h3{margin:8px 0 2px;font-size:13px}
.card p{margin:0;font-size:11px;opacity:.75;line-height:1.4}
.stats{background:var(--hl);display:inline-block;padding:4px 10px;transform:rotate(-.5deg)}
.resgrid{display:grid;grid-template-columns:3fr 2fr;gap:18px}
#overlay{width:100%;background:#fff;border:1.5px solid var(--ink);border-radius:6px;cursor:pointer}
.hint{font-size:11px;opacity:.6}
textarea{width:100%;min-height:160px;font-family:var(--mono);font-size:15px;padding:10px;border:1.5px solid var(--ink);border-radius:6px;background:#fffdf6;resize:vertical}
.inspector{margin-top:14px;background:#fff;border:1.5px solid var(--red);border-radius:8px;padding:12px}
.inspector .gl{display:flex;gap:10px;flex-wrap:wrap}
.inspector figure{margin:0;text-align:center;font-size:11px}
.inspector canvas{width:64px;height:64px;image-rendering:pixelated;border:1px solid var(--line)}
.inspector input{font-family:var(--mono);width:50px;font-size:16px;padding:4px;text-align:center}
.hidden{display:none!important}
.modal{position:fixed;inset:0;background:#1b1b1bdd;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9;padding:20px;cursor:zoom-out}
.modal img{max-width:95%;max-height:80vh;background:#fff;image-rendering:pixelated}
.modal p{color:var(--paper);max-width:700px;text-align:center}
footer{font-size:12px;opacity:.75;padding-bottom:40px}
footer a{color:var(--red)}
@media(max-width:760px){.top,.resgrid{grid-template-columns:1fr}header,main,footer{padding-left:20px}}