:root{--bg: #fff7e6;--ink: #2b2b2b;--accent: #ff8a3d;--accent-soft: #ffe2cc;--card: #fff;--shadow: 0 4px 0 #0000001f;--radius: 22px;--tap: clamp(56px, 9vmin, 84px);color:var(--ink);-webkit-tap-highlight-color:transparent;font-family:Nunito,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:none}button:focus-visible{outline-offset:3px;outline:4px solid #2563eb}.home{min-height:100%;padding:16px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left));flex-direction:column;align-items:center;gap:20px;display:flex}.logo{color:var(--accent);text-shadow:0 3px 0 var(--accent-soft);margin:8px 0 0;font-size:clamp(28px,6vw,48px);font-weight:900}.categories{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;width:100%;max-width:900px;display:grid}.category{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:4px;padding:10px 6px;transition:transform .15s;display:flex}.category.selected{background:var(--accent-soft);outline:4px solid var(--accent);transform:translateY(-3px)}.category-icon{font-size:clamp(36px,8vw,56px);line-height:1.1}.category-name{opacity:.75;font-size:15px;font-weight:800}.cards{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:16px;width:100%;max-width:900px;display:grid}.card,.soon{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:1;padding:12px}.card:active,.category:active,.tool:active,.swatch:active{transform:scale(.94)}.soon{opacity:.7;font-size:64px}.drawing{width:100%;height:100%}.drawing svg{width:100%;height:100%;display:block}.drawing.interactive [data-zone]{cursor:pointer;transition:fill .2s}.drawing [data-zone].pop{animation:.35s ease-out pop}@keyframes pop{40%{opacity:.55}}.paint{height:100%;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"toolbar" "stage" "palette";gap:10px;display:grid}.toolbar{flex-wrap:wrap;grid-area:toolbar;align-items:center;gap:8px;display:flex}.spacer{flex:1}.tool{width:var(--tap);height:var(--tap);background:var(--card);box-shadow:var(--shadow);border-radius:50%;place-items:center;display:grid}.tool:disabled{opacity:.35}.tool.repeat{background:var(--accent);color:#fff}.volume{width:clamp(80px,18vw,160px);accent-color:var(--accent);height:32px}.stage{grid-area:stage;place-items:center;min-height:0;display:grid;position:relative;container-type:size}.stage .drawing{background:var(--card);border-radius:var(--radius);width:min(100cqw,100cqh);height:min(100cqw,100cqh);box-shadow:var(--shadow);touch-action:manipulation}.caption{color:#fff;text-align:center;pointer-events:none;background:#2b2b2bd9;border-radius:999px;max-width:92%;margin:0;padding:10px 18px;font-size:clamp(16px,3vmin,24px);font-weight:800;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.palette{grid-area:palette;grid-template-columns:repeat(7,var(--tap));justify-content:center;gap:8px;display:grid}.swatch{width:var(--tap);height:var(--tap);box-shadow:var(--shadow),inset 0 0 0 3px #0000001f;border-radius:50%;place-items:center;transition:transform .15s;display:grid}.swatch.selected{box-shadow:0 0 0 4px var(--bg),0 0 0 8px var(--ink);animation:.4s bounce;transform:scale(1.12)}.swatch.eraser{background:#f3f4f6}@keyframes bounce{50%{transform:scale(1.25)}}@media(min-aspect-ratio:5/4){.paint{grid-template:"toolbar toolbar" "stage palette" minmax(0,1fr) / minmax(0,1fr) auto}.palette{grid-template-columns:repeat(2,var(--tap));align-content:center}}@media(max-width:480px)and (max-aspect-ratio:5/4){:root{--tap: clamp(40px, 12vw, 56px)}.palette{gap:6px}}.modal{background:#00000059;place-items:center;padding:16px;display:grid;position:fixed;top:0;right:0;bottom:0;left:0}.modal-box{background:var(--card);border-radius:28px;justify-items:center;gap:20px;padding:24px 28px;display:grid}.modal-actions{gap:24px;display:flex}.big{color:#fff;width:96px;height:96px;box-shadow:var(--shadow);border-radius:50%;place-items:center;display:grid}.big.yes{background:#22c55e}.big.no{background:#ef4444}@media(prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}