:root{--paper:#f7f4ed;--night:#232135;--ink:#2e2b33;--ink-soft:#6b6572;--surface:#fff;--line:#e3ded2;--accent:#e63946;--ok:#4f9d5f;--bad:#cf5240;--shadow:0 2px 4px #2e2b3314, 0 8px 20px #2e2b331a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;background:var(--paper);height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none;margin:0;font-family:ui-rounded,system-ui,-apple-system,sans-serif;overflow:hidden}#app{flex-direction:column;height:100dvh;display:flex}.screen{flex-direction:column;flex:1;min-height:0;display:none}.screen.active{display:flex}.btn{appearance:none;border:2px solid var(--line);background:var(--surface);color:var(--ink);width:64px;min-width:64px;height:64px;box-shadow:var(--shadow);cursor:pointer;border-radius:22px;justify-content:center;align-items:center;padding:0;font-size:30px;transition:transform .12s;display:inline-flex}.btn:active{transform:scale(.88)}.btn svg{width:32px;height:32px;display:block}.btn.selected{border-color:var(--accent);border-width:4px;transform:scale(1.06)}@media (prefers-reduced-motion:reduce){.btn,.btn:active,.btn.selected{transition:none;transform:none}}.home{justify-content:center;align-items:center;gap:28px;padding:24px}.home h1{letter-spacing:.01em;margin:0;font-size:clamp(2rem,7vw,3.2rem);font-weight:800}.home .cards{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.homecard{appearance:none;border:2px solid var(--line);background:var(--surface);aspect-ratio:1/1.05;width:min(200px,42vw);box-shadow:var(--shadow);cursor:pointer;border-radius:32px;flex-direction:column;justify-content:center;align-items:center;gap:10px;transition:transform .15s;display:flex}.homecard:active{transform:scale(.92)}.homecard .emoji{font-size:clamp(56px,14vw,84px);line-height:1}.homecard .label{color:var(--ink-soft);font-size:1.05rem;font-weight:700}.home .mute{top:max(12px, env(safe-area-inset-top));position:fixed;right:16px}.draw{background:var(--paper)}.draw.night{background:var(--night)}.topbar{padding:max(10px, env(safe-area-inset-top)) 14px 8px;justify-content:space-between;align-items:center;gap:10px;display:flex}.topbar .group{gap:10px;display:flex}.canvas-wrap{flex:1;min-height:0;margin:0 10px;position:relative}.canvas-wrap canvas{border-radius:24px;width:100%;height:100%;position:absolute;inset:0}#paint{background:var(--surface);box-shadow:var(--shadow)}.draw.night #paint{background:var(--night-canvas,#2b2845)}#fx{pointer-events:none}.tray{padding:10px 14px calc(max(12px, env(safe-area-inset-bottom)) + 4px);flex-direction:column;align-items:center;gap:10px;display:flex}.tray .row{scrollbar-width:none;flex-wrap:nowrap;justify-content:center;gap:10px;max-width:100%;padding:6px 4px;display:flex;overflow-x:auto}.tray .row::-webkit-scrollbar{display:none}.swatch{appearance:none;cursor:pointer;width:56px;min-width:56px;height:56px;box-shadow:var(--shadow);border:3px solid #2e2b3326;border-radius:50%;padding:0;transition:transform .12s}.swatch:active{transform:scale(.85)}.swatch.selected{border:5px solid var(--ink);transform:scale(1.12)}.draw.night .swatch.selected{border-color:#fff}.stamp-picker{flex-wrap:nowrap;justify-content:center;gap:8px;max-width:100%;padding:4px;display:none;overflow-x:auto}.stamp-picker.open{display:flex}.stamp-picker .btn{width:60px;min-width:60px;height:60px;font-size:34px}.coloring-grid{flex:1;grid-template-columns:repeat(auto-fit,minmax(min(260px,44vw),1fr));align-content:start;gap:18px;padding:18px;display:grid;overflow-y:auto}.scene-card{appearance:none;border:2px solid var(--line);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;border-radius:28px;padding:10px;transition:transform .15s;position:relative}.scene-card:active{transform:scale(.94)}.scene-card canvas{pointer-events:none;border-radius:18px;width:100%;height:auto;display:block}.card-badge{filter:drop-shadow(0 2px 3px #2e2b334d);font-size:34px;position:absolute;top:-10px;right:-6px}.scene-view{flex-direction:column;flex:1;min-height:0;display:flex}.paint-stage{flex:1;min-height:0;margin:0 10px;position:relative}.paint-stage canvas{border-radius:24px;width:100%;height:100%;position:absolute;inset:0}.paint-view{background:var(--surface);box-shadow:var(--shadow)}.paint-fx{pointer-events:none}.sizebtn{color:var(--ink-soft);line-height:1}.sizebtn.selected{color:var(--ink)}.step-dots{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-width:50vw;display:flex}.step-dot{border:2.5px solid var(--ink-soft);opacity:.5;background:0 0;border-radius:50%;width:14px;height:14px}.step-dot.on{background:var(--ok);border-color:var(--ok);opacity:1}.step-dot.now{opacity:1;border-color:#3a86ff;transform:scale(1.25)}.gallery-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(min(220px,44vw),1fr));align-content:start;gap:16px;padding:18px;display:grid;overflow-y:auto}.gallery-item{position:relative}.gallery-item img{aspect-ratio:4/3;object-fit:cover;border:2px solid var(--line);background:var(--surface);width:100%;box-shadow:var(--shadow);cursor:pointer;border-radius:22px;display:block}.gallery-item .del{border-radius:50%;width:48px;min-width:48px;height:48px;font-size:20px;position:absolute;top:-8px;right:-8px}.gallery-empty{color:var(--ink-soft);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;font-size:1.1rem;font-weight:600;display:flex}.gallery-empty .emoji{font-size:72px}.confirm-overlay{z-index:50;background:#2e2b3373;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.confirm-overlay.open{display:flex}.confirm-box{background:var(--surface);box-shadow:var(--shadow);border-radius:30px;gap:24px;padding:28px 32px;display:flex}.confirm-box .btn{border-width:3px;width:84px;height:84px;font-size:40px}.confirm-box .yes{border-color:var(--ok);color:var(--ok)}.confirm-box .no{border-color:var(--bad);color:var(--bad)}#confetti{pointer-events:none;z-index:40;position:fixed;inset:0}