:root{--bg:#ebced5;--ink:#5b3a47;--accent:#e5634c;--accent-ink:#fff;--card:#fff;--shadow:0 6px 20px #5b3a472e;--radius:18px;--gutter:12px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html,body{overscroll-behavior:none;background:var(--bg);height:100%;margin:0;overflow:hidden}body{color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;font-family:ui-rounded,SF Pro Rounded,Nunito,Varela Round,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}img{-webkit-user-drag:none}button,.button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;appearance:none;border:0}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.screen{height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:fixed;top:0;bottom:0;left:0;right:0}.start{justify-content:center;align-items:center;display:flex;overflow:hidden}.start-bg{object-fit:cover;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.start-content{text-align:center;flex-direction:column;align-items:center;gap:clamp(12px,3vh,32px);padding:16px;display:flex;position:relative}.logo{object-fit:contain;filter:drop-shadow(0 8px 18px #5b3a4740);width:min(78vw,720px);max-height:42vh}.modes{flex-wrap:wrap;justify-content:center;gap:clamp(12px,3vw,40px);display:flex}.mode-card{filter:drop-shadow(0 8px 16px #5b3a4738);background:0 0;border-radius:24px;width:clamp(130px,20vw,250px);padding:0;transition:transform .15s ease-out}.mode-card img{pointer-events:none;width:100%;height:auto;display:block}.mode-card:hover{transform:translateY(-4px)rotate(-1deg)}.mode-card:active{transform:scale(.96)}.status{min-height:1.4em;color:var(--ink);text-shadow:0 1px #ffffffb3;margin:0;font-weight:700}.color{grid-template-rows:auto minmax(0,1fr);display:grid}.bar{padding:var(--gutter) var(--gutter) 0;align-items:center;gap:8px;min-width:0;display:flex}.pages{scrollbar-width:none;flex:auto;gap:8px;min-width:0;display:flex;overflow-x:auto}.pages::-webkit-scrollbar{display:none}.thumb{background:var(--card);width:56px;height:56px;box-shadow:var(--shadow);border:3px solid #0000;border-radius:12px;flex:none;padding:0;overflow:hidden}.thumb[aria-current=true]{border-color:var(--accent)}.thumb img{object-fit:cover;width:100%;height:100%;display:block}.add-sheet{background:var(--accent);color:var(--accent-ink);place-items:center;display:grid}.add-sheet svg{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;width:60%;height:60%}.thumb.nudge{animation:.4s ease-in-out nudge}@keyframes nudge{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}@media (prefers-reduced-motion:reduce){.thumb.nudge{animation:none}}.actions{flex:none;gap:8px;display:flex}.icon{background:var(--card);width:52px;height:52px;box-shadow:var(--shadow);border-radius:50%;padding:12px}.icon svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;display:block}.icon:disabled{opacity:.4;cursor:default}.icon:active:not(:disabled){transform:scale(.94)}#music[aria-pressed=false]{opacity:.5}.stage{gap:var(--gutter);padding:var(--gutter);grid-template-columns:minmax(0,1fr) clamp(150px,19vw,230px);min-height:0;display:grid}.paper{justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}#canvas{border-radius:var(--radius);box-shadow:var(--shadow);touch-action:none;cursor:crosshair;transform-origin:0 0;background:#fff;display:block}body[data-tool=fill] #canvas{cursor:pointer}#canvas.zoom-anim{transition:transform .25s ease-out}@media (prefers-reduced-motion:reduce){#canvas.zoom-anim{transition:none}}.zoom-out{background:var(--card);width:64px;height:64px;box-shadow:var(--shadow);color:var(--ink);border-radius:50%;padding:14px;position:absolute;bottom:12px;left:12px}.zoom-out svg,.tool svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;display:block}.tool-toggle{gap:8px;padding-bottom:6px;display:flex}.tool{background:var(--card);min-width:60px;height:60px;box-shadow:var(--shadow);color:var(--ink);border:3px solid #0000;border-radius:18px;flex:1 1 0;padding:12px}.tool[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.tool .drop{fill:currentColor}body[data-mode=sketch] #tool-fill{display:none}body[data-tool=fill] .size{opacity:.45}.tools{scrollbar-width:none;flex-direction:column;gap:8px;min-height:0;padding:4px 0 4px 18px;display:flex;overflow:hidden auto}.tools::-webkit-scrollbar{display:none}.crayons{flex-direction:column;gap:0;display:flex}.crayon{background:0 0;align-items:center;min-height:44px;padding:0;transition:transform .15s ease-out;display:flex}.crayon img{pointer-events:none;width:100%;height:auto;display:block}.crayon[aria-pressed=true],.eraser[aria-pressed=true]{transform:translate(-16px)scale(1.06)}.tools-row{align-items:center;gap:8px;padding-top:4px;display:flex}.eraser{background:0 0;flex:none;width:64px;padding:0;transition:transform .15s ease-out}.eraser img{pointer-events:none;width:100%;height:auto;display:block}.sizes{flex-wrap:wrap;gap:6px;display:flex}.size{background:var(--card);width:48px;height:48px;box-shadow:var(--shadow);border:3px solid #0000;border-radius:50%;place-items:center;padding:0;display:grid}.size:after{content:"";width:var(--dot);height:var(--dot);background:var(--ink);border-radius:50%}.size[aria-pressed=true]{border-color:var(--accent)}@media (max-aspect-ratio:1){.stage{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}.tools{padding:14px 0 0;overflow:visible}.crayons{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px 10px;display:grid}.crayon{align-items:center;min-height:44px;display:flex}.crayon[aria-pressed=true],.eraser[aria-pressed=true]{transform:translateY(-10px)scale(1.06)}.tools-row,.tool-toggle{justify-content:center}.tool{flex:none;width:76px}}@media (max-aspect-ratio:1) and (max-width:560px){.crayons{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px}.crayon{min-height:40px}}@media (max-width:560px){.icon{width:44px;height:44px;padding:10px}.thumb{width:44px;height:44px}.bar{flex-wrap:wrap}}.badge{left:calc(8px + env(safe-area-inset-left));bottom:calc(8px + env(safe-area-inset-bottom));background:#fffc;border-radius:8px;margin:0;padding:2px 8px;font-size:12px;position:fixed}.dialog{z-index:10;background:#5b3a4773;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.dialog-card{background:var(--card);max-width:min(92vw,640px);box-shadow:var(--shadow);border-radius:24px;flex-direction:column;gap:14px;padding:16px;display:flex}.dialog-card img{width:100%;max-height:65vh;object-fit:contain;-webkit-touch-callout:default;border-radius:12px;max-height:65dvh;display:block}.dialog-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.dialog-actions button,.dialog-actions .button{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:.6em 1.3em;font-weight:700;text-decoration:none}.dialog-actions .secondary{color:var(--ink);background:#f3e3e7}.trace-card-art{pointer-events:none;width:100%;height:auto;display:block}.trace{grid-template-rows:auto minmax(0,1fr) auto;display:grid}.trace-cats{flex:auto;gap:8px;min-width:0;display:flex}.cat{letter-spacing:1px;background:var(--card);min-width:76px;height:56px;box-shadow:var(--shadow);border:3px solid #0000;border-radius:18px;padding:0 14px;font-size:26px;font-weight:800}.cat[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.trace-stars{background:var(--card);height:52px;box-shadow:var(--shadow);border-radius:26px;align-items:center;gap:4px;padding:0 14px 0 10px;font-size:22px;font-weight:800;display:flex}.trace-stars svg{fill:#ffc93c;stroke:#e0a800;stroke-width:1.2px;stroke-linejoin:round;width:28px;height:28px}.trace-combo{height:52px;box-shadow:var(--shadow);color:#d23c78;background:#fff1f6;border-radius:26px;align-items:center;gap:2px;padding:0 14px 0 8px;font-size:22px;font-weight:800;display:flex}.trace-combo[hidden]{display:none}.trace-combo svg{fill:#ff7ab8;stroke:#d23c78;stroke-width:1.2px;stroke-linejoin:round;width:30px;height:30px}.balloon{z-index:2;width:calc(76px * var(--size,1));height:calc(126px * var(--size,1));margin-left:calc(-38px * var(--size,1));touch-action:none;background:0 0;border:0;padding:0;animation:6s linear both balloon-rise;position:absolute;top:100%}.balloon svg{transform-origin:50% 70%;width:100%;height:100%;animation:2.4s ease-in-out infinite alternate balloon-sway;display:block;overflow:visible}.balloon .body,.balloon .knot{fill:var(--balloon)}.balloon .shine{fill:#fff;opacity:.45}.balloon .string{fill:none;stroke:#b9a2ab;stroke-width:2px;stroke-linecap:round}@keyframes balloon-rise{0%{transform:translateY(0)}to{transform:translateY(var(--rise,-900px))}}@keyframes balloon-sway{0%{translate:-6px;rotate:-7deg}to{translate:6px;rotate:7deg}}@media (prefers-reduced-motion:reduce){.balloon{animation:8s linear both balloon-wait;animation-delay:0s!important}.balloon svg{animation:none}}@keyframes balloon-wait{0%,85%{opacity:1}to{opacity:0}}.trace-stage{align-items:center;gap:var(--gutter);padding:var(--gutter);grid-template-columns:auto minmax(0,1fr) auto;min-height:0;display:grid}.trace-paper{border-radius:var(--radius);height:100%;min-height:0;box-shadow:var(--shadow);background:#fff;position:relative;overflow:hidden}#trace-canvas{touch-action:none;cursor:pointer;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.nav-arrow{background:var(--card);width:72px;height:72px;box-shadow:var(--shadow);color:var(--ink);border-radius:50%;padding:16px}.nav-arrow svg{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;display:block}.nav-arrow.pulse{background:var(--accent);color:#fff;animation:1s ease-in-out infinite invite}@keyframes invite{50%{scale:1.12}}.trace-strip{padding:4px var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));scrollbar-width:none;gap:10px;scroll-padding-inline:40%;display:flex;overflow-x:auto}.trace-strip::-webkit-scrollbar{display:none}.trace-tile{background:var(--card);min-width:64px;height:64px;box-shadow:var(--shadow);border:3px solid #0000;border-radius:18px;flex:none;padding:0 10px;font-size:30px;font-weight:800;position:relative}.trace-tile[aria-current=true]{border-color:var(--accent)}.trace-tile.done{background:#eaf8ec}.trace-tile.done:after{content:"";clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#ffc93c;width:24px;height:24px;position:absolute;top:-6px;right:-6px}@media (max-width:560px){.cat{min-width:60px;height:48px;font-size:20px}.nav-arrow{width:52px;height:52px;padding:12px}.trace-stage{gap:6px;padding:8px}}@media (max-aspect-ratio:1){.trace-stage{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.trace-paper{grid-area:1/1/auto/-1}#trace-prev{grid-row:2;justify-self:start}#trace-next{grid-row:2;justify-self:end}}.vfx-layer{pointer-events:none;z-index:20;width:100vw;height:100vh;position:fixed;top:0;left:0}.tap-pop{animation:.28s ease-out tap-pop}@keyframes tap-pop{35%{scale:.9}70%{scale:1.06}}@media (prefers-reduced-motion:reduce){.tap-pop,.nav-arrow.pulse{animation:none}}.install-open{top:calc(env(safe-area-inset-top) + var(--gutter));right:calc(env(safe-area-inset-right) + var(--gutter));width:56px;height:56px;padding:14px;position:absolute}.install-card{-webkit-user-select:text;user-select:text;gap:16px;width:min(92vw,480px);max-height:calc(100dvh - 32px);padding:20px;overflow-y:auto}.install [data-for]{display:none}.install[data-kind=ios] [data-for=ios],.install[data-kind=ios] [data-for=touch],.install[data-kind=android] [data-for=android],.install[data-kind=android] [data-for=touch],.install[data-kind=prompt] [data-for=touch],.install[data-kind=desktop] [data-for=desktop]{display:revert}.install[data-kind=ios] [data-for=manual],.install[data-kind=android] [data-for=manual],.install[data-inapp] [data-for=inapp],.install[data-kind=ios] .install-steps[data-for=ios],.install[data-kind=android] .install-steps[data-for=android]{display:flex}.install:not([data-prompt]) #install-add{display:none}.install-head{align-items:center;gap:14px;display:flex}.install-card .install-icon{width:72px;height:72px;box-shadow:var(--shadow);border-radius:18px;flex:none}.install-card h2{margin:0 0 4px;font-size:1.3rem}.install-lead{margin:0;line-height:1.35}.install-note{background:#fff6d9;border-radius:12px;align-items:center;gap:10px;margin:0;padding:10px 12px;font-size:.92rem;line-height:1.3}.install-note svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;flex:none;width:22px;height:22px}.install-steps{counter-reset:step;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}.install-steps li{cursor:default;counter-increment:step;align-items:center;gap:10px;line-height:1.3;display:flex}.install-steps li:before{content:counter(step);text-align:center;opacity:.6;flex:none;width:26px;font-size:1.1rem;font-weight:800}.install-steps small{opacity:.75;display:block}.step-icon{color:#1f7ae0;flex:none;width:28px;height:28px}.step-icon svg,.install .dialog-actions svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;display:block}.install-card .install-qr{aspect-ratio:1;border-radius:12px;width:min(60vw,240px);margin:0 auto}.install .dialog-actions{flex-direction:column;align-items:stretch}.install .dialog-actions button{justify-content:center;align-items:center;gap:10px;min-height:56px;font-size:1.05rem;display:inline-flex}.install .dialog-actions svg{width:22px;height:22px}.install-pointer{z-index:11;background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow);pointer-events:none;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;font-weight:800;animation:1.2s ease-in-out infinite install-nudge;position:fixed}.install-pointer svg{fill:none;stroke:currentColor;stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;width:28px;height:28px}.install-pointer[data-where=bottom]{bottom:calc(env(safe-area-inset-bottom) + 8px);right:calc(env(safe-area-inset-right) + 16px)}.install-pointer[data-where=top]{top:calc(env(safe-area-inset-top) + 8px);right:calc(env(safe-area-inset-right) + 84px);flex-direction:column-reverse}.install-pointer[data-where=top] svg{transform:rotate(180deg)}@keyframes install-nudge{50%{translate:0 6px}}.install-pointer[data-where=top]{animation-name:install-nudge-up}@keyframes install-nudge-up{50%{translate:0 -6px}}@media (prefers-reduced-motion:reduce){.install-pointer{animation:none}}.gallery{grid-template-rows:auto minmax(0,1fr);display:grid}.gallery-wall{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:20px var(--gutter) calc(var(--gutter) + 24px);overflow:hidden auto}.gallery-grid{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(18px,3vw,34px);max-width:1200px;margin:0 auto;display:flex}.frame{background:var(--frame,#f6c453);width:clamp(150px,26vw,260px);box-shadow:var(--shadow), inset 0 -4px 0 #00000014;transform:rotate(var(--tilt,0deg));border-radius:18px;padding:12px;animation:.4s cubic-bezier(.3,1.5,.6,1) backwards hang}.frame img{pointer-events:none;background:#fff;border-radius:8px;width:100%;height:auto;display:block}.frame:active{transform:rotate(0)scale(.96)}@keyframes hang{0%{opacity:0;transform:translateY(-24px) rotate(calc(var(--tilt,0deg) * 4)) scale(.9)}}.gallery-empty{justify-content:center;padding-top:6vh;display:flex}.gallery-start{filter:drop-shadow(0 8px 16px #5b3a472e);background:0 0;width:min(56vw,240px);padding:0;animation:1.4s ease-in-out infinite invite}.gallery-start svg{width:100%;height:auto;display:block}.gallery-card img{max-height:62vh;max-height:62dvh}.gallery-actions{justify-content:center;gap:16px;display:flex}.round{background:var(--accent);width:64px;height:64px;color:var(--accent-ink);box-shadow:var(--shadow);border-radius:50%;justify-content:center;align-items:center;padding:16px;display:inline-flex}.round.secondary{color:var(--ink);background:#f3e3e7}.round svg{fill:none;stroke:currentColor;stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;display:block}@media (prefers-reduced-motion:reduce){.frame,.gallery-start{animation:none}}