:root{--paper:#F7F5EF;--ink:#1B2340;--lime:#C6F432;--coral:#FF6B5A;}
:root{--hl:#C6F432;--card:#fffef9;--grid:rgba(27,35,64,.07);--shadow:#1B2340;--surface:#fff}
html.dark{--paper:#10142A;--ink:#ECE9DF;--hl:#C6F43255;--card:#181D36;--grid:rgba(236,233,223,.06);--shadow:#000;--surface:#1A2040;color-scheme:dark}
body{transition:background .3s,color .3s}
body{background:var(--paper);color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;margin:0}
.mono{font-family:'IBM Plex Mono',monospace}
.grid-paper{background-color:var(--card);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
.sketch{border:2px solid var(--ink);border-radius:16px 14px 18px 13px/14px 18px 13px 16px;box-shadow:4px 5px 0 var(--shadow)}
html.dark .sketch{box-shadow:4px 5px 0 #C6F43255}
html.dark .bg-white{background:var(--surface)!important}
html.dark [class*="border-[#1B2340]"]{border-color:var(--ink)!important}
html.dark [class*="bg-[#F7F5EFdd]"]{background:rgba(16,20,42,.85)!important}
html.dark [class*="bg-[#1B2340]"]{background:#C6F432!important}
html.dark [class*="text-[#C6F432]"]{color:#10142A!important}
html.dark [class*="hover:bg-[#1B234015]"]:hover{background:#ffffff18!important}
html.dark [class*="hover:bg-[#C6F432]"]:hover{background:#C6F432!important;color:#10142A}
input::placeholder{color:currentColor;opacity:.5}
html.dark,html.dark body{background:var(--paper);color:var(--ink)}
html.dark [class*="text-[#FF6B5A]"]{color:#FF8A7C!important}
html.dark .stamp{color:#FF8A7C;border-color:#FF8A7C}
html.dark ::selection{background:#C6F432;color:#10142A}
button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.wobble:hover{animation:wob .4s ease}
@keyframes wob{25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}
.btn-lime{color:#1B2340;background:var(--lime);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:.15s}
.btn-lime:hover{box-shadow:0 0 18px var(--lime),3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.btn-lime:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.stamp{color:var(--coral);border:3px solid var(--coral);transform:rotate(-12deg);font-family:'IBM Plex Mono';font-weight:600;letter-spacing:.15em;padding:2px 10px;border-radius:6px;opacity:.85}
.fade-up{animation:fu .6s both}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.liquid{animation:fill 2.6s ease-in-out forwards}
@keyframes fill{from{height:0}to{height:78%}}
.bubble{animation:bub 1.4s infinite ease-in}
@keyframes bub{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-40px);opacity:0}}
.confetti{position:fixed;width:10px;height:14px;top:-20px;z-index:99;animation:drop 2.4s linear forwards}
@keyframes drop{to{transform:translateY(110vh) rotate(720deg)}}