:root{--cream:#fff6e9;--ink:#2b2233;--lavender:#b79cff;--purple:#8b5cf6;--pink:#ff8fc7;--mint:#8ee5c1;--sky:#7ec8f2;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);color:var(--ink);font-family:ui-rounded,SF Pro Rounded,Arial Rounded MT Bold,system-ui,sans-serif}html,body{background:var(--cream);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;height:100%;margin:0;overflow:hidden}img{-webkit-user-drag:none;pointer-events:none}#game{position:fixed;inset:0}#game canvas{touch-action:none;display:block}#ui{pointer-events:none;z-index:45;position:fixed;inset:0}#ui>*{pointer-events:auto}#start{z-index:30;background:radial-gradient(circle at 50% 45%, #fff 0%, var(--cream) 60%);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4vh;display:flex;position:fixed;inset:0}#start .puppy{aspect-ratio:1;background:var(--lavender);border-radius:50%;place-items:center;width:min(42vh,38vw);animation:2.6s ease-in-out infinite breathe,2.6s ease-out infinite ring;display:grid;box-shadow:0 0 #b79cff99}#start .puppy img{width:82%}#start .zzz{color:var(--purple);font-size:6vh;animation:2.6s ease-in-out infinite float}#start .hint{opacity:.55;font-size:2.4vh}#start.leaving{animation:.35s ease-in forwards pop-out}@keyframes breathe{50%{transform:scale(1.04)}}@keyframes ring{0%{box-shadow:0 0 #b79cff8c}to{box-shadow:0 0 0 5vh #b79cff00}}@keyframes float{50%{opacity:.6;transform:translateY(-1.2vh)}}@keyframes pop-out{to{opacity:0;transform:scale(1.15)}}#rotate{z-index:100;background:var(--cream);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:3vh;font-size:4vw;display:none;position:fixed;inset:0}#rotate .pad{border:1.4vw solid var(--ink);background:var(--lavender);border-radius:3vw;width:22vw;height:32vw;animation:2.2s ease-in-out infinite turn}@keyframes turn{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media (orientation:portrait){#rotate{display:flex}}#gate{z-index:48;top:calc(var(--safe-t) + 10px);left:calc(var(--safe-l) + 10px);opacity:.55;background:#2b223314;border:0;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;display:grid;position:fixed}#gate svg{width:26px;height:26px}#gate .ring{position:absolute;inset:0}#gate .ring circle{transition:stroke-dashoffset .1s linear}.scrim{z-index:40;background:#2b223373;place-items:center;animation:.18s ease-out fade-in;display:grid;position:fixed;inset:0}.panel{touch-action:pan-y;background:#fff;border-radius:28px;width:min(680px,86vw);max-height:82vh;padding:28px 32px;font-size:18px;line-height:1.4;animation:.22s cubic-bezier(.2,.9,.3,1.2) rise;overflow:auto;box-shadow:0 20px 60px #2b22334d}.panel h2{margin:0 0 6px;font-size:26px}.panel h3{text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin:22px 0 8px;font-size:16px}.panel p{margin:6px 0}.panel .row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.panel button,.panel label.btn{font:inherit;min-height:48px;color:var(--ink);cursor:pointer;background:#f1ecff;border:0;border-radius:14px;padding:12px 18px;font-size:17px}.panel button.primary,.panel button.on{background:var(--purple);color:#fff}.panel .muted{opacity:.6;font-size:15px}.panel .choices{justify-content:center;gap:16px;margin:20px 0 8px;display:flex}.panel .choices button{border-radius:22px;width:120px;height:110px;font-size:40px}.panel ol{padding-left:22px}.panel .shot{align-items:center;gap:14px;margin:10px 0;display:flex}.panel .shot svg{flex:none;width:54px;height:54px}@keyframes fade-in{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(20px)scale(.97)}}#debug{z-index:35;right:calc(var(--safe-r) + 10px);bottom:calc(var(--safe-b) + 10px);touch-action:pan-y;color:#e9e4ff;background:#14101cdb;border-radius:14px;width:330px;max-height:70vh;padding:12px 14px;font:12px/1.45 ui-monospace,Menlo,monospace;position:fixed;overflow:auto}#debug b{color:#fff}#debug .ok{color:var(--mint)}#debug .bad{color:#ff8b8b}#debug button{font:inherit;color:#fff;background:#3b2f55;border:0;border-radius:8px;margin:3px 3px 0 0;padding:7px 9px}#debug pre{white-space:pre-wrap;opacity:.8;max-height:140px;margin:6px 0 0;overflow:auto}#wake{z-index:60;background:var(--cream);place-items:center;display:grid;position:fixed;inset:0}#wake .puppy{aspect-ratio:1;background:var(--lavender);border-radius:50%;place-items:center;width:36vh;animation:2.6s ease-in-out infinite breathe;display:grid}#wake .puppy img{width:82%}.studio{background:var(--cream);padding:calc(var(--safe-t) + 1.5vh) calc(var(--safe-r) + 2vh) calc(var(--safe-b) + 1.5vh) calc(var(--safe-l) + 2vh);grid-template:"top top top"14vh"tools page side"1fr"tools mix side"15vh/15vh 1fr 29vh;gap:1.5vh 2vh;display:grid;position:fixed;inset:0}.studio .hidden{display:none!important}.st-btn{border:.6vh solid var(--ink);cursor:pointer;background:#fff;border-radius:3.5vh;place-items:center;width:13vh;height:13vh;padding:0;transition:transform .12s;display:grid;box-shadow:0 .6vh #2b22332e}.st-btn img{width:78%;height:78%}.st-btn:active{transform:scale(.92)}.st-btn.on{outline:.9vh solid var(--purple);outline-offset:.3vh;background:#f1e8ff}.st-top{grid-area:top;align-items:center;gap:2vh;padding-left:9vh;display:flex}.st-top .st-spacer{flex:1}.st-top .st-btn{box-shadow:none;background:0 0;border:0;border-radius:50%}.st-top .st-btn img{width:100%;height:100%}.st-top .st-newpage,.st-top .st-frame{border:.6vh solid var(--ink);background:#fff;border-radius:3.5vh}.st-top .st-newpage img,.st-top .st-frame img{width:80%;height:80%}.st-tools{flex-direction:column;grid-area:tools;align-items:center;gap:1.8vh;display:flex}.st-center{grid-area:page;place-items:center;min-width:0;min-height:0;display:grid}.st-page{aspect-ratio:4/3;border:.7vh solid var(--ink);background:#fff;border-radius:2vh;max-width:100%;height:100%;transition:transform .45s,opacity .45s;position:relative;overflow:hidden;box-shadow:0 1vh #2b223326}.st-page canvas,.st-page .st-lines{width:100%;height:100%;position:absolute;inset:0}.st-page canvas{touch-action:none}.st-page .st-lines{pointer-events:none}.st-page.framed{opacity:0;transform:translateY(-30vh)scale(.25)rotate(-6deg)}.st-page.nudge{animation:.4s st-nudge}@keyframes st-nudge{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}.st-palette{grid-area:side;grid-template-columns:13vh 13vh;grid-auto-rows:13vh;place-content:start center;gap:1.6vh;display:grid}.st-swatch{border:.6vh solid var(--ink);background:var(--c);border-radius:50%;padding:0;transition:transform .12s;box-shadow:inset 0 -1.2vh #0000001f,0 .6vh #2b22332e}.st-swatch.on{outline:.9vh solid var(--purple);outline-offset:.4vh;transform:scale(1.04)}.st-mix{grid-area:mix;justify-content:center;align-items:center;gap:2vh;display:flex}.st-bowl{width:15vh;position:relative;overflow:hidden}.st-bowl-paint{opacity:0;border-radius:50%;height:18%;position:absolute;top:40%;left:18%;right:18%}.st-bowl-paint.show,.st-bowl-paint.swirl{opacity:1}.st-bowl-paint.swirl{animation:.7s st-swirl}@keyframes st-swirl{0%{transform:scale(.3)rotate(0)}60%{transform:scale(1.25)rotate(200deg)}to{transform:scale(1)rotate(360deg)}}.st-eq{opacity:.45;font-size:7vh;font-weight:800}.st-pot{border:.6vh solid var(--ink);background:radial-gradient(circle at 50% 42%, var(--c) 0 52%, #fff 53%);border-radius:50%;width:13vh;height:13vh;padding:0;transition:transform .12s;box-shadow:0 .6vh #2b22332e}.st-pot:active,.st-swatch:active{transform:scale(.9)}.st-top{z-index:2;position:relative}.st-picker{z-index:1;background:#fff6e9f7;grid-template-columns:repeat(2,52vh);grid-auto-rows:37vh;place-content:center;gap:3vh;display:grid;position:absolute;inset:17vh 0 0}.st-pick{border:.7vh solid var(--ink);background:#fff;border-radius:3vh;padding:1vh;box-shadow:0 1vh #2b223326}.st-pick img{object-fit:contain;width:100%;height:100%}.st-pick:active{transform:scale(.95)}.st-reveal{background:#2b223373;place-items:center;display:grid;position:absolute;inset:0}.st-reveal img{width:60vh;animation:.5s cubic-bezier(.3,1.6,.5,1) st-pop}@keyframes st-pop{0%{transform:scale(.3)}to{transform:scale(1)}}