:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#182038;background:#fff7d8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}button{appearance:none;font:inherit;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}[hidden]{display:none!important}.coloring-game{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(circle at 14% 16%,rgb(255 79 154 / 24%) 0 132px,transparent 134px),radial-gradient(circle at 88% 18%,rgb(37 199 217 / 22%) 0 152px,transparent 154px),radial-gradient(circle at 72% 86%,rgb(255 210 63 / 28%) 0 184px,transparent 186px),linear-gradient(135deg,#fff4cb,#fff6fb 46%,#e9fff1);touch-action:none;-webkit-user-select:none;user-select:none}.coloring-stage{position:absolute;inset:0;display:grid;place-items:center;padding:calc(74px + env(safe-area-inset-top)) 16px calc(132px + env(safe-area-inset-bottom))}.coloring-board{position:relative;width:min(72vh,72vw,620px);min-width:280px;aspect-ratio:1;border:8px solid rgb(255 255 255 / 86%);border-radius:8px;background:linear-gradient(90deg,rgb(24 32 56 / 5%) 1px,transparent 1px),linear-gradient(rgb(24 32 56 / 5%) 1px,transparent 1px),#fffdf7;background-size:34px 34px;box-shadow:0 24px 70px #18203824,inset 0 0 0 2px #1820380f}.coloring-canvas,.coloring-outline,.coloring-fine-outline{position:absolute;inset:0;width:100%;height:100%}.coloring-canvas{z-index:2;touch-action:none}.coloring-outline{z-index:1}.coloring-fine-outline{z-index:3}.coloring-outline,.coloring-fine-outline{display:grid;padding:4%;place-items:center;pointer-events:none}.coloring-outline{color:#26324f;filter:drop-shadow(0 10px 16px rgb(24 32 56 / 8%))}.coloring-fine-outline{color:#0f1627c2}.coloring-outline-svg{display:block;width:100%;height:100%;overflow:visible}.coloring-outline .coloring-outline-svg{opacity:.34}.coloring-controls{position:absolute;inset:0;z-index:4;pointer-events:none}.coloring-actions,.coloring-palette{display:flex;align-items:center;gap:8px;pointer-events:auto}.coloring-actions{position:absolute;top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));padding:0}.coloring-palette{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));left:16px;display:grid;grid-template-columns:repeat(5,64px);justify-content:center;width:min(430px,calc(100% - 32px));margin:0 auto;padding:12px;border:3px solid rgb(255 255 255 / 72%);border-radius:8px;background:#ffffffd1;box-shadow:0 18px 46px #18203824;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.coloring-tool,.coloring-color{min-width:46px;min-height:46px;border:2px solid rgb(24 32 56 / 12%);border-radius:8px;cursor:pointer}.coloring-tool{display:grid;width:46px;height:46px;place-items:center;padding:0;border-color:#fff3;color:#fff;background:#0a0f23b8;opacity:.72;box-shadow:0 14px 34px #0000002e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:opacity .14s ease,transform .14s ease}.coloring-tool:hover,.coloring-tool:focus-visible{opacity:1}.coloring-tool svg{width:24px;height:24px}.coloring-color{position:relative;width:64px;height:72px;padding:0;background:var(--coloring-color);box-shadow:inset 0 -7px #00000021,0 10px 20px #18203814}.coloring-color.is-selected{border-color:#182038;transform:translateY(-3px)}.coloring-color.is-selected:after{position:absolute;inset:12px;border:3px solid rgb(255 255 255 / 88%);border-radius:999px;content:""}.coloring-tool:focus-visible,.coloring-color:focus-visible,.seo-play-button:focus-visible{outline:5px solid #7457ff;outline-offset:4px}@media(max-width:760px){.coloring-stage{padding:calc(66px + env(safe-area-inset-top)) 12px calc(160px + env(safe-area-inset-bottom))}.coloring-board{width:min(86vw,58dvh,430px);min-width:250px;border-width:6px}.coloring-controls{display:block}.coloring-actions{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}.coloring-palette{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;grid-template-columns:repeat(5,minmax(0,1fr));width:min(360px,calc(100% - 24px));gap:8px;padding:10px}.coloring-color{width:100%;min-width:0;height:58px;min-height:58px}}@media(max-width:380px){.coloring-stage{padding-bottom:calc(146px + env(safe-area-inset-bottom))}.coloring-board{width:min(88vw,54dvh,360px);min-width:226px}.coloring-tool{width:42px;height:42px;min-width:42px;min-height:42px}.coloring-color{height:52px;min-height:52px}}@media(orientation:landscape)and (max-height:520px)and (pointer:coarse){.coloring-stage{padding:calc(56px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(178px + env(safe-area-inset-left))}.coloring-board{width:min(calc(100vw - 214px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc(100dvh - 86px),430px);min-width:220px;border-width:6px}.coloring-palette{top:50%;right:auto;bottom:auto;left:calc(12px + env(safe-area-inset-left));grid-template-columns:repeat(2,66px);width:auto;gap:7px;padding:8px;transform:translateY(-50%)}.coloring-color{width:66px;height:38px;min-width:66px;min-height:38px}}