:root{color:#2c2c3e;font-synthesis:none;text-rendering:optimizelegibility;--pink:#ff6b9d;--orange:#ff9f45;--yellow:#ffd93d;--blue:#4d96ff;--purple:#8b5cf6;--cream:#fff7f0;--paper:#faf6ee;--ink:#2c2c3e;--shadow:0 6px 20px #2c2c3e1f;background:#fff7f0;font-family:Nunito,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;min-height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 20% 20%, #ffd93d29, transparent 30%), radial-gradient(circle at 80% 80%, #4d96ff1f, transparent 30%), var(--cream)}button{font:inherit;color:inherit}button:focus-visible{outline-offset:3px;outline:4px solid #005fcc}.sp-gallery{height:100%;padding:clamp(16px,3vw,40px);overflow-y:auto}.sp-gallery:before{content:"StyroPaint";text-align:center;color:var(--pink);letter-spacing:-2px;text-shadow:3px 3px #fff,6px 6px #ff9f4538;margin-bottom:8px;font-size:clamp(36px,7vw,72px);font-weight:900;display:block}.sp-gallery:after{content:"Pick a page and paint with soft watercolor!";text-align:center;color:#646476;pointer-events:none;margin-top:-4px;margin-bottom:24px;font-size:clamp(16px,2.5vw,22px);font-weight:700;display:block;position:absolute;top:clamp(72px,12vw,120px);left:0;right:0}.sp-gallery-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(14px,2.5vw,28px);max-width:1100px;margin:50px auto 0;display:grid}.sp-daily-banner{box-shadow:var(--shadow);text-align:center;background:#ffffffdb;border-radius:20px;flex-wrap:wrap;grid-column:1/-1;justify-content:center;gap:8px 16px;padding:12px 16px;font-weight:800;display:flex}.sp-daily-banner span{color:#646476}.sp-daily-badge{background:var(--yellow);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:900}.sp-canvas-daily{box-shadow:var(--shadow);text-align:center;background:#ffffffeb;border-radius:16px;flex-wrap:wrap;grid-area:2/1;justify-content:center;align-items:center;gap:8px 16px;padding:10px 14px;font-weight:800;display:flex}.sp-canvas-daily .sp-streak{color:#646476;font-weight:800}.sp-canvas-daily .sp-daily-badge{background:var(--yellow)}.sp-gallery-card{min-height:220px;box-shadow:var(--shadow);cursor:pointer;background:#fffc;border:3px solid #ffffffe6;border-radius:28px;flex-direction:column;align-items:center;gap:10px;padding:14px;transition:transform .15s,box-shadow .15s;display:flex}.sp-gallery-card:hover{transform:translateY(-5px)rotate(-.5deg);box-shadow:0 12px 30px #2c2c3e2e}.sp-gallery-card:nth-child(2n):hover{transform:translateY(-5px)rotate(.5deg)}.sp-gallery-mini{aspect-ratio:1;border-radius:18px;width:min(160px,90%);height:auto;box-shadow:inset 0 0 0 2px #2c2c3e0f}.sp-gallery-label{font-size:20px;font-weight:900}.sp-canvas-view{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 86px;gap:10px;width:100%;height:100%;padding:10px;display:grid}.sp-canvas-container{width:100%;min-width:0;height:100%;min-height:0;box-shadow:var(--shadow), inset 0 0 0 2px #ffffffe6;background:var(--paper);touch-action:none;border-radius:24px;position:relative;overflow:hidden}.sp-layer{width:100%;height:100%;position:absolute;inset:0}.sp-paint{z-index:2;touch-action:none;cursor:crosshair}.sp-texture{z-index:1;pointer-events:none}.sp-outline{z-index:3;pointer-events:none}.sp-cursor{z-index:4;pointer-events:none}.sp-tool-rail{box-shadow:var(--shadow);background:#ffffffe6;border-radius:22px;flex-direction:column;grid-area:1/2;align-items:center;gap:8px;padding:8px 4px;display:flex;overflow-y:auto}.sp-bottom-tray{display:none}.sp-btn,.sp-color-swatch,.sp-size-btn{cursor:pointer;background:#fff;border:3px solid #0000;border-radius:16px;flex:none;justify-content:center;align-items:center;min-width:52px;min-height:52px;font-size:24px;display:inline-flex;box-shadow:0 2px 8px #2c2c3e1a}.sp-btn:hover,.sp-color-swatch:hover,.sp-size-btn:hover{transform:translateY(-1px)}.sp-btn.sp-active,.sp-selected{box-shadow:0 0 0 3px #005fcc38;border-color:#005fcc!important}.sp-palette-group,.sp-size-group{border-top:2px solid #2c2c3e14;border-bottom:2px solid #2c2c3e14;flex-direction:column;align-items:center;gap:6px;padding:6px 0;display:flex}.sp-color-swatch{border-radius:50%;min-width:46px;min-height:46px;box-shadow:0 2px 6px #2c2c3e29,inset 0 0 0 2px #ffffff8c}.sp-size-btn{border-radius:14px;min-width:46px;min-height:46px}.sp-size-dot{background:var(--ink);border-radius:50%;display:block}.sp-status{z-index:100;color:#fff;pointer-events:none;background:#2c2c3ed1;border-radius:12px;max-width:min(90vw,640px);min-height:1px;padding:4px 12px;font-size:13px;position:fixed;bottom:8px;left:50%;transform:translate(-50%)}@media (width<=700px),(orientation:portrait) and (width<=900px){.sp-canvas-view{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr;gap:6px;padding:6px}.sp-canvas-container{border-radius:18px;grid-area:1/1}.sp-tool-rail{display:none!important}.sp-bottom-tray{box-shadow:var(--shadow);background:#fffffff0;border-radius:18px;flex-flow:wrap;grid-area:2/1;justify-content:center;align-items:center;gap:7px;padding:7px;display:flex!important}.sp-bottom-tray .sp-palette-group,.sp-bottom-tray .sp-size-group{border:0;flex-flow:wrap;justify-content:center;gap:6px;padding:0}.sp-btn,.sp-bottom-tray .sp-color-swatch{min-width:50px;min-height:50px}.sp-gallery{padding:14px}.sp-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:48px}.sp-gallery-card{border-radius:20px;min-height:170px;padding:10px}.sp-gallery-label{font-size:16px}.sp-status{bottom:78px}}@media (width<=380px){.sp-gallery-grid{grid-template-columns:1fr 1fr;gap:8px}.sp-gallery-card{min-height:150px}.sp-gallery-label{font-size:14px}}@media (height<=500px) and (orientation:landscape){.sp-canvas-view{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 72px}.sp-tool-rail{grid-area:1/2;display:flex!important}.sp-bottom-tray{display:none!important}.sp-btn,.sp-color-swatch,.sp-size-btn{min-width:46px;min-height:46px}.sp-status{bottom:4px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (forced-colors:active){.sp-btn,.sp-color-swatch,.sp-size-btn,.sp-gallery-card{border:2px solid buttontext}.sp-selected,.sp-active{outline:3px solid highlight}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}