:root{--ink:#3b302a;--ink-soft:#7a6a5c;--red:#c4483a;--blue:#3f5fb0;--paper:#f2ece0;--sketch:255px 15px 225px 15px / 15px 225px 15px 255px;--sketch-2:15px 255px 15px 225px / 225px 15px 255px 15px}*{box-sizing:border-box}html,body{background:var(--paper);height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none;margin:0;font-family:Patrick Hand,Comic Sans MS,cursive;overflow:hidden}#stage{position:fixed;inset:0}#stage canvas{display:block}#vignette{pointer-events:none;background:radial-gradient(#0000 55%,#78644629 100%);position:fixed;inset:0}#hud{pointer-events:none;position:fixed;inset:0}#hud>*{pointer-events:auto}.title{align-items:center;gap:6px;font-family:Caveat,cursive;font-size:40px;font-weight:700;line-height:1;display:flex;position:absolute;top:14px;left:20px}.title img{width:52px;height:52px;animation:2.6s ease-in-out infinite bob}.title span:first-of-type{color:var(--red)}.title span:last-of-type{color:var(--blue)}.top-right{gap:8px;display:flex;position:absolute;top:16px;right:18px}.btn{font:inherit;color:var(--ink);border:2px solid var(--ink);border-radius:var(--sketch);cursor:pointer;background:#fffcf5bf;padding:4px 14px;font-size:20px;transition:transform .12s,background .12s}.btn:nth-child(2n){border-radius:var(--sketch-2)}.btn:hover{background:#fffaf0;transform:rotate(-2deg)scale(1.05)}.btn:active{transform:scale(.95)}.btn.on{background:#fde6b8}.btn.big{color:var(--red);border-color:var(--red);padding:4px 22px;font-size:26px}.palette{flex-direction:column;gap:10px;max-height:calc(100% - 200px);padding:4px;display:flex;position:absolute;top:50%;left:16px;overflow-y:auto;transform:translateY(-50%)}.palette .label{color:var(--ink-soft);text-align:center;font-family:Caveat,cursive;font-size:22px}.card{border:1.6px solid var(--ink-soft);border-radius:var(--sketch);cursor:pointer;text-align:center;background:#fffcf5b3;width:84px;padding:6px 4px 2px;transition:transform .12s}.card:nth-child(odd){border-radius:var(--sketch-2);transform:rotate(1deg)}.card:hover{transform:rotate(-2deg)scale(1.06)}.card.on{border-color:var(--ink);background:#fde6b8}.card canvas{margin:0 auto;display:block}.card div{font-size:16px}.bottom{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.status{color:var(--red);white-space:nowrap;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q50 2 100 4.5 T198 3.5' stroke='%23c4483a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") bottom/100% 8px no-repeat;padding:0 18px 4px;font-family:Caveat,cursive;font-size:34px}.status b{color:var(--blue);font-weight:700}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.speed{color:var(--ink-soft);align-items:center;gap:4px;font-size:18px;display:flex}.speed input{width:90px;accent-color:var(--red)}.hint{color:var(--ink-soft);text-align:center;pointer-events:none;white-space:nowrap;font-family:Caveat,cursive;font-size:26px;transition:opacity 1.2s;position:absolute;top:76px;left:50%;transform:translate(-50%)rotate(-1deg)}.hint.gone{opacity:0}.toast{border:1.6px solid var(--ink-soft);border-radius:var(--sketch);opacity:0;pointer-events:none;background:#fff6c9;padding:8px 18px;font-size:22px;transition:opacity .4s;position:absolute;top:80px;left:50%;transform:translate(-50%)rotate(1deg);box-shadow:2px 3px #0000000f}.toast.show{opacity:1}.sleeper{pointer-events:none;width:64px;height:64px;position:absolute}.sleeper img{width:100%;height:100%;animation:3.4s ease-in-out infinite breathe}.sleeper .z{color:var(--ink-soft);font-family:Caveat,cursive;font-size:20px;animation:3s ease-in infinite zz;position:absolute}.sleeper .z:nth-of-type(2){font-size:15px;animation-delay:1.5s}.sleeper.bl{bottom:10px;left:12px}.sleeper.br{bottom:10px;right:12px}.sleeper.br .z{left:0}.sleeper.bl .z{right:0}.btn.rec:before{content:"";background:var(--red);vertical-align:1px;border-radius:50%;width:9px;height:9px;margin-right:6px;display:inline-block}.btn.rec.live{border-color:var(--red);color:var(--red);background:#fde0da}.btn.rec.live:before{animation:1s steps(2,end) infinite blink}.modal-back{z-index:10;background:#46372840;place-items:center;display:grid;position:fixed;inset:0}.modal{border:2px solid var(--ink);border-radius:var(--sketch);background:#fffbef;flex-direction:column;align-items:center;gap:10px;width:min(640px,100% - 32px);padding:16px 18px 18px;display:flex;transform:rotate(-.6deg);box-shadow:4px 6px #00000014}.modal-title{color:var(--red);font-family:Caveat,cursive;font-size:36px;line-height:1}.modal video{border:1.6px solid var(--ink-soft);border-radius:var(--sketch-2);background:var(--paper);width:100%;max-height:55vh}.modal-note{color:var(--ink-soft);text-align:center;font-size:18px}@keyframes blink{50%{opacity:0}}@keyframes bob{50%{transform:translateY(-4px)rotate(-4deg)}}@keyframes breathe{50%{transform:scale(1.05,.95)translateY(2px)}}@keyframes zz{0%{opacity:0;transform:translateY(10px)}30%{opacity:1}to{opacity:0;transform:translate(8px,-22px)}}@media (width<=720px){.title{font-size:30px}.title img{width:38px;height:38px}.palette{flex-direction:row;max-height:none;padding:4px 12px;inset:auto 0 168px;overflow-x:auto;transform:none}.palette .label{display:none}.card{flex:none;width:62px;padding:4px 2px 0}.card canvas{width:40px!important;height:40px!important}.card div{font-size:14px}.speed span{display:none}.top-right{flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:62%}.top-right .btn{padding:2px 8px;font-size:15px}.hint,.sleeper{display:none}.btn{padding:3px 10px;font-size:17px}.status{font-size:28px}}