:root{--sun:#f28c28;--gold:#f6c453;--cream:#fff6e3;--brown:#4a2c14;--spot:#a8571c;--grass:#7a9a3a}
*{box-sizing:border-box}
body{margin:0;font-family:'Fredoka',sans-serif;color:var(--brown);min-height:100vh;
background:radial-gradient(circle at 12% 20%,rgba(168,87,28,.18) 0 40px,transparent 42px),
radial-gradient(circle at 70% 60%,rgba(168,87,28,.15) 0 55px,transparent 57px),
radial-gradient(circle at 40% 85%,rgba(168,87,28,.14) 0 34px,transparent 36px),
linear-gradient(170deg,#f07a2a 0%,#f6b545 45%,#f9dc8a 100%);background-attachment:fixed}
header{text-align:center;padding:28px 16px 8px}
h1{font-size:clamp(2.2rem,7vw,4.6rem);margin:0;font-weight:700;letter-spacing:-1px;line-height:1}
h1 span{font-weight:300;font-style:italic;margin:0 .2em}
.sub{font-size:1.2rem;margin:.4em 0 .2em;font-weight:500}
.tag{max-width:640px;margin:0 auto;font-weight:300;opacity:.85}
.badge{display:inline-block;margin-top:12px;background:var(--brown);color:var(--gold);padding:6px 14px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.8rem}
main{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1180px;margin:18px auto;padding:0 14px}
@media(max-width:860px){main{grid-template-columns:1fr}}
.card{background:var(--cream);border:3px solid var(--brown);border-radius:20px;padding:16px;box-shadow:6px 6px 0 rgba(74,44,20,.55);min-width:0;animation:rise .6s both}
.card:nth-child(2){animation-delay:.1s}.card:nth-child(3){animation-delay:.2s}.card:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
.wide{grid-column:1/-1}
h2{margin:0 0 10px;font-size:1.5rem}
h2 b{font-family:'JetBrains Mono';background:var(--sun);color:var(--cream);padding:0 8px;border-radius:8px;margin-right:6px;font-size:1rem;vertical-align:middle}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
label{font-weight:500;display:flex;gap:6px;align-items:center}
input,select{font-family:'JetBrains Mono';border:2px solid var(--brown);border-radius:10px;padding:5px 7px;width:90px;background:#fff}
button{font-family:'Fredoka';font-weight:500;font-size:1rem;border:2.5px solid var(--brown);background:var(--sun);color:var(--cream);border-radius:14px;padding:7px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--brown);transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
button:hover{transform:translateY(-2px) scale(1.04)}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--brown)}
button.ghost{background:var(--cream);color:var(--brown)}
button:disabled{opacity:.5;cursor:not-allowed}
.bar{height:12px;border:2px solid var(--brown);border-radius:999px;overflow:hidden;background:#fff;flex:1;min-width:80px}
.bar div{height:100%;width:0;background:repeating-linear-gradient(45deg,var(--sun) 0 8px,var(--gold) 8px 16px);transition:width .2s}
.counts{display:grid;grid-template-columns:70px 1fr 40px;gap:4px 8px;font-family:'JetBrains Mono';font-size:.75rem;margin:10px 0}
.counts .cb{height:10px;border-radius:6px;align-self:center}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.gitem{border:2px solid var(--brown);border-radius:10px;padding:4px;background:#fff;text-align:center}
.gitem canvas{width:48%;image-rendering:pixelated}
.chip{display:inline-block;font-family:'JetBrains Mono';font-size:.65rem;color:#fff;padding:1px 6px;border-radius:6px}
.mono{font-family:'JetBrains Mono',monospace}.small{font-size:.8rem}
.ticker{font-family:'JetBrains Mono';font-size:.8rem;background:var(--brown);color:var(--gold);padding:6px 10px;border-radius:10px;margin:6px 0}
#lossChart{width:100%;height:140px;background:#fff;border:2px solid var(--brown);border-radius:12px}
.arch{display:flex;gap:4px;align-items:flex-end;margin:10px 0;flex-wrap:wrap;font-family:'JetBrains Mono';font-size:.7rem}
.arch .blk{background:var(--spot);color:var(--cream);border-radius:6px;padding:4px 6px;text-align:center;min-width:44px}
.arch .io{background:var(--grass)}
.preview{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
figure{margin:0;text-align:center}
figure canvas{width:100%;image-rendering:pixelated;border:2px solid var(--brown);border-radius:8px;background:#000}
figcaption{font-family:'JetBrains Mono';font-size:.7rem}
.seg{display:flex;gap:4px}.seg button{background:var(--cream);color:var(--brown)}.seg button.on{background:var(--brown);color:var(--gold)}
.screens{display:flex;gap:12px;justify-content:center}
.screens figure{flex:1;max-width:420px}
.drift{max-width:200px}
.pad{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.pad button{min-width:84px;touch-action:none;user-select:none}
.pad button.held{background:var(--brown);color:var(--gold)}
.hint{text-align:center;opacity:.75}
#stripCv{width:100%;image-rendering:pixelated;border:2px solid var(--brown);border-radius:8px;margin-top:8px;background:#000}
footer{text-align:center;padding:20px;font-weight:500}
footer a{color:var(--brown);font-weight:700}
#debug{position:fixed;bottom:6px;left:6px;font-size:.65rem;background:rgba(74,44,20,.85);color:var(--gold);padding:3px 7px;border-radius:6px}
#toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--brown);color:var(--gold);padding:8px 16px;border-radius:12px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:9}
#toast.show{opacity:1}