:root{--ink:#1a181d;--paper:#f8f6f1;--accent:#ff5a1f;--muted:#1a181d99;--font:"Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--hand:"Marker Felt", "Chalkboard SE", "Comic Neue", "Segoe Print", "Bradley Hand", cursive}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;background:#cfc8bc;margin:0;overflow:hidden}#stage{position:fixed;inset:0}#stage canvas{opacity:0;width:100%;height:100%;transition:opacity .9s;display:block}body.ready #stage canvas{opacity:1}#stage:after{content:"";pointer-events:none;background:radial-gradient(75% 70% at 50% 48%,#0000 55%,#281e1438 100%);position:absolute;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui>*{pointer-events:auto}#ui.flash:after{content:"";pointer-events:none;background:#fff;animation:.35s ease-out forwards flash;position:fixed;inset:0}@keyframes flash{0%{opacity:.8}to{opacity:0}}.brand{top:max(20px, env(safe-area-inset-top));position:absolute;left:24px;pointer-events:none!important}.logo{letter-spacing:-.04em;align-items:baseline;gap:2px;font-size:30px;font-weight:900;line-height:1;display:inline-flex}.logo i{background:var(--accent);border-radius:50%;width:9px;height:9px;display:inline-block}.brand p{color:var(--muted);letter-spacing:.01em;margin:6px 0 0;font-size:13px}.corner{top:max(16px, env(safe-area-inset-top));gap:2px;display:flex;position:absolute;right:18px}.about{top:calc(max(16px, env(safe-area-inset-top)) + 48px);background:var(--paper);border-radius:14px;width:min(340px,100vw - 36px);padding:16px 18px 14px;font-size:13px;line-height:1.5;position:absolute;right:18px;box-shadow:0 20px 50px -18px #281e1473,0 2px 6px #281e141a}.about h3{margin:0 0 8px;font-size:15px;font-weight:800}.about p{color:#1a181dd1;margin:0 0 9px}.about b{color:var(--ink)}.about .keys{color:var(--muted);margin:12px 0 0;font-size:12px}kbd{font:600 11px var(--font);background:#1a181d12;border-radius:4px;padding:1px 5px}.icon-btn{appearance:none;color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:10px;place-items:center;width:40px;height:40px;display:grid}.icon-btn:hover{background:#1a181d12}.icon-btn svg{width:22px;height:22px}.dock{left:50%;bottom:max(18px, env(safe-area-inset-bottom));background:var(--paper);white-space:nowrap;border-radius:14px;align-items:center;gap:2px;padding:5px;display:flex;position:absolute;transform:translate(-50%);box-shadow:inset 0 1px #ffffffb3,0 10px 30px -10px #281e1459,0 2px 6px #281e141f}.dock button{appearance:none;color:var(--ink);font:600 13.5px/1 var(--font);cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:7px;padding:10px 13px;transition:background .15s;display:inline-flex}.dock button:hover{background:#1a181d12}.dock button:active{transform:translateY(1px)}.dock button[data-act=make]{background:var(--ink);color:var(--paper)}.dock button[data-act=make]:hover{background:#000}.dock button.ghost{color:var(--muted);padding:10px}.dock svg{flex:none;width:18px;height:18px}.dock .sep{background:#1a181d1f;width:1px;height:22px;margin:0 4px}.hint{left:50%;top:max(22px, env(safe-area-inset-top));color:var(--ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;white-space:nowrap;background:#f8f6f1d1;border-radius:999px;padding:7px 12px;font-size:13.5px;transition:opacity .3s,transform .3s;position:absolute;transform:translate(-50%,6px);pointer-events:none!important}.hint.show{opacity:1;transform:translate(-50%)}.note{color:var(--accent);opacity:0;transition:opacity .6s .8s;position:absolute;top:0;left:0;pointer-events:none!important}.note.show{opacity:1}.note.gone{transition:opacity .25s;opacity:0!important}.note svg{width:84px;height:50px;position:absolute;top:2px;left:-92px}.note.flip svg{left:8px;transform:scaleX(-1)}.note.flip span{left:70px;transform:rotate(6deg)}.note span{font:700 24px/1 var(--hand);white-space:nowrap;position:absolute;top:40px;left:-168px;transform:rotate(-6deg)}.toast{left:50%;bottom:calc(max(18px, env(safe-area-inset-bottom)) + 66px);background:var(--ink);color:var(--paper);opacity:0;border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:500;transition:opacity .2s,transform .2s;position:absolute;transform:translate(-50%,8px);pointer-events:none!important}.toast.show{opacity:1;transform:translate(-50%)}.fatal{text-align:center;place-items:center;font-size:16px;display:grid;position:absolute;inset:0}.maker{z-index:10;background:#1e181200;place-items:center;padding:16px;transition:background .25s;display:grid;position:fixed;inset:0}.maker.open{background:#1e181259}.maker-card{background:var(--paper);opacity:0;border-radius:18px;width:min(440px,100%);padding:16px;transition:transform .25s cubic-bezier(.2,.9,.3,1.2),opacity .2s;transform:translateY(16px)scale(.98);box-shadow:0 30px 80px -20px #140a0080}.maker.open .maker-card{opacity:1;transform:none}.maker-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.maker h2{letter-spacing:-.01em;margin:0 0 0 4px;font-size:17px;font-weight:800}.pad{aspect-ratio:1;background-color:#fff;background-image:radial-gradient(#1a181d21 1px,#0000 1.2px);background-size:18px 18px;border-radius:12px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #1a181d14}.pad.drop{box-shadow:inset 0 0 0 3px var(--accent)}.pad canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;position:absolute;inset:0}.pad-empty{text-align:center;font:700 22px/1.3 var(--hand);color:#1a181d59;pointer-events:none;place-content:center;margin:0;transition:opacity .2s;display:grid;position:absolute;inset:0}.pad-empty small{font:500 13px var(--font)}.tools{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;display:flex}.swatches,.sizes,.row{align-items:center;gap:6px;display:flex}.sw{appearance:none;background:var(--c);cursor:pointer;border:0;border-radius:50%;width:26px;height:26px;box-shadow:inset 0 0 0 1px #00000026}.sw.on{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink)}.sz{appearance:none;cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;width:30px;height:30px;display:grid}.sz i{width:var(--s);height:var(--s);background:var(--ink);border-radius:50%}.sz.on{background:#1a181d1a}.seg{background:#1a181d12;border-radius:9px;padding:3px;display:inline-flex}.seg button{appearance:none;font:600 13px var(--font);cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:7px;padding:6px 11px}.seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px #0000001f}.seg button[data-f=holo].on{background:linear-gradient(120deg,#ffd6f0,#d6e6ff 40%,#d9ffe9 70%,#fff3c4)}.text-btn{appearance:none;font:600 13px var(--font);color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:7px 8px}.text-btn:hover{background:#1a181d12}.maker-status{color:#b4361a;min-height:1em;margin:10px 2px 0;font-size:13px}.maker-status:empty{display:none}.primary{appearance:none;background:var(--accent);color:#fff;width:100%;font:700 15px var(--font);cursor:pointer;border:0;border-radius:11px;margin-top:14px;padding:13px}.primary:disabled{opacity:.4;cursor:default}@media (width<=640px){.note{display:none}.brand{left:16px}.logo{font-size:24px}.brand p{font-size:12px}.dock button span{display:none}.dock button[data-act=make] span{display:inline}.hint{top:auto;bottom:calc(max(18px, env(safe-area-inset-bottom)) + 62px);white-space:normal;text-align:center;width:max-content;max-width:calc(100vw - 32px);font-size:12.5px}}