:root{
  --bg:#FFF8EC; --ink:#111; --card:#fff; --muted:#6b6257;
  --lime:#C6FF3D; --pink:#FF8FD1; --lav:#B8A6FF; --tang:#FF9F43; --sky:#7DD3FC;
}
.dark{ --bg:#17151a; --ink:#f4efe6; --card:#221f27; --muted:#a49a8c; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;
  background-image:radial-gradient(var(--ink) .6px, transparent .6px);background-size:22px 22px;background-attachment:fixed;}
.dark body, body.dark{}
#root{min-height:100vh}
.app-bg{background:color-mix(in srgb,var(--bg) 92%,transparent);min-height:100vh}
.mono{font-family:'JetBrains Mono',monospace}
.brut{border:2.5px solid var(--ink);border-radius:20px;background:var(--card);box-shadow:4px 4px 0 var(--ink)}
.btn{border:2.5px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);font-weight:800;padding:.6rem 1rem;transition:transform .08s, box-shadow .08s;background:var(--card);color:var(--ink);cursor:pointer}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.inp{border:2.5px solid var(--ink);border-radius:12px;padding:.55rem .75rem;background:var(--card);color:var(--ink);width:100%;font-family:inherit;outline:none}
.inp:focus{box-shadow:3px 3px 0 var(--lav)}
.chip{border:2px solid var(--ink);border-radius:999px;padding:.25rem .7rem;font-weight:700;font-size:.85rem;cursor:pointer;background:var(--card);color:var(--ink);transition:transform .1s}
.chip:hover{transform:rotate(-3deg) scale(1.05)}
.slide{animation:slide .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes slide{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.wobble:hover{animation:wob .4s}
@keyframes wob{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.scanbox{position:relative;overflow:hidden}
.scanline{position:absolute;left:0;right:0;height:4px;background:var(--lime);box-shadow:0 0 18px 6px var(--lime);animation:scan 1.6s ease-in-out infinite alternate}
@keyframes scan{from{top:0}to{top:calc(100% - 4px)}}
.orphan{box-shadow:0 0 0 3px var(--pink),4px 4px 0 var(--ink);animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px var(--pink),4px 4px 0 var(--ink)}}
.confetti{position:fixed;top:-20px;width:10px;height:16px;z-index:100;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.zig{background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in srgb,var(--ink) 8%,transparent) 8px 10px)}
input[type=number]::-webkit-inner-spin-button{opacity:.4}
.sheet{animation:up .3s cubic-bezier(.2,.9,.3,1.1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}