/* Coloring studio: an activity sheet on a playful blue craft table. */
.coloring-tile{background:linear-gradient(145deg,#e9d7ff,#f9d2e6);color:#68438e}.coloring-picture{width:170px;height:175px;border:8px solid white;border-radius:25px;background:#fff url('coloring-animals.png') 0 0/400% 200% no-repeat;box-shadow:0 7px 0 #a880c6;transform:rotate(-5deg)}
.coloring-screen{max-width:1400px;margin:auto;padding:3px 14px 14px}.coloring-screen[hidden]{display:none}.coloring-heading{display:flex;align-items:center;gap:16px;margin:0 4px 8px;min-height:50px}.coloring-heading h1{font-size:clamp(24px,2.5vw,32px);color:#73529b;margin:0}.coloring-heading>#coloring-page-name{flex:1;text-align:center;color:#5b7192;font-size:14px;font-weight:900}.coloring-heading #coloring-done{display:flex;align-items:center;justify-content:center;gap:9px;min-width:118px;min-height:49px;border:3px solid white;border-radius:22px;background:linear-gradient(#a9e5ac,#72cc8d);color:#225735;box-shadow:0 4px 0 #5aae7a;font-size:20px;font-weight:900;cursor:pointer}.coloring-heading #coloring-done>span{display:grid;place-items:center;background:white;border-radius:50%;width:26px;height:26px;color:#50a76d}.coloring-heading #coloring-done:disabled{opacity:.5;cursor:default;box-shadow:0 3px 0 #91b5a0}
.coloring-workspace{position:relative;isolation:isolate;display:grid;grid-template-columns:96px minmax(0,1fr) 160px;align-items:center;gap:18px;min-height:min(690px,calc(100svh - 175px));padding:24px 18px 18px;overflow:hidden;border:4px solid #d9f5ff;border-radius:34px;background:repeating-linear-gradient(0deg,transparent 0 88px,#85bbd148 89px 92px,#d6f4fc44 93px 95px,transparent 96px 180px),linear-gradient(115deg,#b1e1eb,#94cadd 55%,#8bbfd6);box-shadow:inset 0 4px 0 #fff7,0 7px 0 #80aac8,0 14px 25px #5482ab25}.coloring-workspace:before,.coloring-workspace:after{content:'';position:absolute;z-index:-1;width:170px;height:110px;background:#c6dc74;border-radius:53% 47% 57% 43%/36% 47% 53% 64%;box-shadow:inset 9px 6px 0 #ecf9b755,38px 12px 0 -25px #c6dc74,-45px 21px 0 -25px #c6dc74;transform:rotate(-18deg);left:10%;top:-68px}.coloring-workspace:after{left:auto;top:auto;right:16%;bottom:-70px;background:#ba98e6;box-shadow:inset 9px 6px 0 #dfc6ff55,38px 12px 0 -25px #ba98e6,-45px 21px 0 -25px #ba98e6;transform:rotate(18deg)}
.coloring-paper-wrap{min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}.coloring-paper{position:relative;width:min(100%,calc((100svh - 245px)*4/3));aspect-ratio:var(--sheet-ratio,4/3);background:#fff url('coloring-scenes/meadow.webp') 0 0/100% 100% no-repeat;background-origin:content-box;border:8px solid #6266a6;border-radius:29px;box-shadow:0 5px 0 #6774a936,0 12px 22px #48739925;overflow:hidden;touch-action:none;isolation:isolate;transition:box-shadow .2s}.coloring-paper.portrait{width:min(100%,calc((100svh - 245px)*.75));border-radius:23px}.coloring-paper.is-coloring{box-shadow:0 0 0 4px #e6c4ff,0 8px 18px #48739933}.coloring-paper canvas{display:block;width:100%;height:100%;mix-blend-mode:multiply;touch-action:none;cursor:crosshair}.coloring-paper[data-tool=eraser] canvas{cursor:cell}.coloring-hint{font-size:12px;font-weight:800;color:#507c99;text-align:center;min-height:15px}
.coloring-side-actions{display:flex;align-items:center;flex-direction:column;gap:15px}.coloring-side-actions button{cursor:pointer;touch-action:manipulation;color:#fff;border:3px solid #fff;box-shadow:0 4px 0 #5a95b34d;min-height:48px;font-weight:900}.coloring-side-actions small{font-size:11px}.coloring-picture-picker{width:90px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;border:0!important;background:transparent;box-shadow:none!important}.coloring-picture-picker #coloring-current-art{display:block;width:83px;max-height:100px;background:#fff url('coloring-scenes/meadow.webp') 0 0/100% 100% no-repeat;border:4px solid white;border-radius:5px;outline:2px solid #64adc1;box-shadow:0 4px 0 #6fa3bc66,0 5px 12px #2e72952b;transform:rotate(-7deg);transition:transform .2s}.coloring-picture-picker small{color:#436c8b;background:#d9f1f8cc;padding:4px 9px;border-radius:12px}.coloring-page-arrows{display:flex;gap:6px}.coloring-page-arrows button{width:44px;min-height:46px;border-radius:16px;background:#ffdc88;color:#835e95;font-size:31px;line-height:1}.coloring-side-actions #coloring-assist,.coloring-side-actions #coloring-reset{width:84px;min-height:90px;padding:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:25px;background:linear-gradient(#69d8b4,#3cafaa);gap:2px}.coloring-side-actions #coloring-assist svg,.coloring-side-actions #coloring-reset svg{width:51px;height:51px;filter:drop-shadow(0 2px 1px #46768144)}.coloring-side-actions #coloring-assist[aria-pressed=false]{background:linear-gradient(#bdafe2,#9886cc)}.coloring-side-actions #coloring-assist b{display:inline-block;background:#fff;color:#388b7d;padding:1px 4px;border-radius:6px}.coloring-side-actions #coloring-reset{background:linear-gradient(#f995bd,#e575a6);min-height:82px}
.coloring-tools{position:relative;align-self:stretch;display:flex;align-items:center;padding:13px 10px;border:3px solid #fff3d9;border-radius:24px;background:linear-gradient(90deg,#fff6db,#fffdf0 65%,#f6edd5);box-shadow:inset 3px 0 0 #fff8,0 3px 0 #6994b14d}.coloring-colors{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 5px}.coloring-color{min-width:0;min-height:60px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;padding:2px 0;border:2px solid transparent;border-radius:15px;background:transparent;cursor:pointer;touch-action:manipulation;transition:transform .15s,background .15s}.coloring-color svg{width:100%;height:35px;overflow:visible;filter:drop-shadow(0 3px 1px #84685644);transform:rotate(-12deg);transition:transform .15s}.coloring-color small{color:#98768d;font-size:10px;font-weight:900;text-transform:capitalize}.coloring-color[aria-pressed=true]{background:#eee0ff;border-color:#9270c7;box-shadow:0 2px 0 #ac97c1;transform:translateX(-2px)}.coloring-color[aria-pressed=true] svg{transform:rotate(-4deg) scale(1.12)}.coloring-color[aria-pressed=true]:after{content:'✓';position:absolute;top:-3px;right:1px;color:#7a52b5;font-size:13px;font-weight:900}.coloring-color.sparkle[aria-pressed=true] svg{filter:drop-shadow(0 0 4px #bd9bea)}.coloring-screen button:focus-visible{outline:4px solid #8057bc;outline-offset:3px}
.coloring-gallery{position:fixed;inset:0;z-index:100;background:#3d648b80;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}.coloring-gallery[hidden]{display:none}.coloring-gallery-card{width:min(100%,940px);max-height:calc(100svh - 40px);overflow:auto;overscroll-behavior:contain;padding:20px;border:5px solid white;border-radius:29px;background:#f3f7f1;box-shadow:0 9px 0 #6594b7,0 20px 60px #35536c55}.coloring-gallery-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.coloring-gallery-heading h2{margin:0;color:#70549b;font-size:24px}.coloring-gallery-heading button{width:48px;min-height:48px;border:3px solid white;border-radius:17px;background:#e6d9f6;color:#7c58a9;font-size:31px;cursor:pointer}.coloring-pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.coloring-page{min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px;border:3px solid #d8cde5;border-radius:17px;background:#fff;box-shadow:0 3px 0 #d4cfdf;cursor:pointer;touch-action:manipulation;color:#7d658f}.coloring-animal-art{display:block;width:100%;height:120px;border-radius:9px;background:#fff url('coloring-animals.png') 0 0/400% 200% no-repeat}.coloring-page[data-page^=scene-] .coloring-animal-art{aspect-ratio:4/3;height:auto}.coloring-page:not([data-page^=scene-]) .coloring-animal-art{width:90px}.coloring-page small{font-size:12px;font-weight:900}.coloring-page[aria-pressed=true]{border-color:#a17ad3;background:#efe4ff;box-shadow:0 3px 0 #af92d0}
.coloring-finished-preview{position:relative;width:220px;aspect-ratio:4/3;margin:4px auto;background:#fff url('coloring-scenes/meadow.webp') 0 0/100% 100% no-repeat;background-origin:content-box;border:5px solid white;border-radius:10px;box-shadow:0 3px 9px #543c7155;overflow:hidden}.coloring-finished-preview canvas{display:block;width:100%;height:100%;mix-blend-mode:multiply}
@media(min-width:701px) and (max-height:740px){.coloring-workspace{padding:14px 14px 12px;min-height:calc(100svh - 175px);gap:13px;grid-template-columns:88px minmax(0,1fr) 144px}.coloring-side-actions{gap:11px}.coloring-side-actions #coloring-assist,.coloring-side-actions #coloring-reset{min-height:75px}.coloring-side-actions #coloring-assist svg,.coloring-side-actions #coloring-reset svg{width:42px;height:42px}.coloring-tools{padding:10px 6px}.coloring-colors{gap:5px 2px}.coloring-color{min-height:52px}.coloring-paper{border-width:6px;border-radius:23px}.coloring-heading{margin-bottom:5px}}
@media(min-width:701px) and (max-width:950px){.coloring-workspace{grid-template-columns:94px minmax(0,1fr) 122px;gap:10px;padding:16px 10px}.coloring-picture-picker{width:74px}.coloring-picture-picker #coloring-current-art{width:68px}.coloring-side-actions #coloring-assist,.coloring-side-actions #coloring-reset{width:72px}.coloring-page-arrows{gap:4px}.coloring-page-arrows button{width:44px}.coloring-tools{padding:10px 5px}.coloring-colors{gap:7px 0}.coloring-color{min-height:55px}.coloring-heading>#coloring-page-name{font-size:12px}}
@media(max-width:700px){.coloring-screen{padding:3px 8px 14px}.coloring-heading{gap:8px;flex-wrap:wrap;margin-bottom:9px}.coloring-heading h1{font-size:24px;flex:1}.coloring-heading>#coloring-page-name{order:1;flex-basis:100%;font-size:12px;text-align:center}.coloring-heading #coloring-done{min-width:103px;min-height:47px;font-size:18px}.coloring-workspace{display:flex;flex-direction:column;gap:12px;padding:14px 10px;border-radius:25px;min-height:0}.coloring-paper-wrap{width:100%;order:0}.coloring-paper{width:100%;border-width:5px;border-radius:20px}.coloring-paper.portrait{width:min(100%,300px)}.coloring-hint{font-size:11px}.coloring-side-actions{order:1;flex-direction:row;justify-content:space-between;gap:5px;width:100%}.coloring-picture-picker{width:60px;gap:3px}.coloring-picture-picker #coloring-current-art{width:54px;max-height:45px;border-width:2px}.coloring-picture-picker small{font-size:9px;padding:2px 4px}.coloring-page-arrows{gap:3px}.coloring-page-arrows button{width:44px;min-height:47px;font-size:27px}.coloring-side-actions #coloring-assist,.coloring-side-actions #coloring-reset{width:65px;min-height:65px;border-radius:20px;padding:2px}.coloring-side-actions #coloring-assist svg,.coloring-side-actions #coloring-reset svg{width:34px;height:34px}.coloring-side-actions small{font-size:9px}.coloring-tools{order:2;width:100%;align-self:auto;border-radius:20px;padding:8px}.coloring-colors{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 3px}.coloring-color{min-height:54px;border-radius:12px}.coloring-color svg{height:27px}.coloring-color small{font-size:9px}.coloring-gallery{padding:12px}.coloring-gallery-card{padding:12px;max-height:calc(100svh - 24px)}.coloring-pages{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.coloring-page:not([data-page^=scene-]) .coloring-animal-art{width:75px;height:100px}.coloring-gallery-heading h2{font-size:21px}.coloring-picture{width:112px;height:110px}}
@media(prefers-reduced-motion:reduce){.coloring-screen *{transition:none!important}}

/* Three visual brush sizes; current generous brush stays the default. */
.coloring-tools{flex-direction:column;justify-content:center;gap:14px}.coloring-brushes{display:flex;justify-content:center;gap:2px;width:100%}.coloring-brushes button{display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0;border:2px solid #ded2ee;border-radius:14px;background:#fffdf8;cursor:pointer;touch-action:manipulation}.coloring-brushes i{display:block;width:var(--dot);height:var(--dot);border-radius:50%;background:#8d6bc1;box-shadow:inset 0 2px 0 #fff5}.coloring-brushes [aria-pressed=true]{border-color:#8d6bc1;background:#ecddfa;box-shadow:0 2px 0 #b39ccc}@media(min-width:701px) and (max-width:950px){.coloring-tools{padding-inline:3px}.coloring-brushes{flex-wrap:wrap;gap:4px}}

/* A welcoming picture library, with large previews and a scrollable touch grid. */
.coloring-gallery{padding:18px;background:radial-gradient(ellipse at 12% 10%,#fff6d8,transparent 45%),linear-gradient(140deg,#bfeaf4,#dcd1f0);backdrop-filter:none}
.coloring-gallery-card{width:min(100%,1220px);height:calc(100svh - 36px);max-height:none;display:flex;flex-direction:column;overflow:hidden;padding:20px;background:#f7fbf8;border-radius:30px;box-shadow:0 8px 0 #8db0c5,0 18px 40px #507da42b}
.coloring-gallery-heading{flex-shrink:0;gap:12px;margin-bottom:16px}.coloring-gallery-heading h2{font-size:clamp(24px,3vw,34px)}
.coloring-gallery-help{margin:5px 0 0;color:#587d92;font-size:15px;font-weight:700}
.coloring-pages{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;min-height:0;padding:4px 8px 12px;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;gap:16px;scrollbar-color:#a38ac7 #e9eff0;scrollbar-width:auto}
.coloring-page{padding:9px;border-radius:20px;box-shadow:0 4px 0 #d1cadf;transition:transform .12s,border-color .12s}.coloring-page:active{transform:translateY(3px)}
.coloring-page .coloring-animal-art,.coloring-page:not([data-page^=scene-]) .coloring-animal-art{width:100%;height:auto;aspect-ratio:4/3;border-radius:12px}
.coloring-page:not([data-page^=scene-]) .coloring-animal-art{width:56%;aspect-ratio:3/4}
.coloring-page small{font-size:14px;min-height:22px;line-height:1.25}.coloring-page[aria-pressed=true]{border-color:#9673c5}
@media(max-width:1000px){.coloring-pages{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
@media(max-width:600px){.coloring-gallery{padding:10px}.coloring-gallery-card{height:calc(100svh - 20px);padding:14px 8px;border-radius:24px}.coloring-gallery-heading{padding:0 5px}.coloring-gallery-help{font-size:12px}.coloring-pages{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.coloring-page small{font-size:13px}}