.coloring-gallery,.coloring-app{--ink:#172033;--accent:#6d4aff;--panel:#f7f7fb;color:var(--ink);max-width:1200px;margin:auto}.theme-filter{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0}.picture-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}.picture-card{background:#fff;border:1px solid #ddd;border-radius:14px;overflow:hidden;box-shadow:0 5px 18px #17203312}.picture-card a{color:inherit;text-decoration:none}.picture-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}.picture-card__body{padding:1rem}.picture-card h2{font-size:1.2rem;margin:.25rem 0}.paint-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:1rem;align-items:start}.paint-tools{background:var(--panel);padding:1rem;border-radius:14px;position:sticky;top:1rem}.paint-tools fieldset{border:0;padding:0;margin:0 0 1.2rem}.paint-tools legend{font-weight:700;margin-bottom:.65rem}.palette{display:grid;grid-template-columns:repeat(6,34px);gap:7px;margin-bottom:.8rem}.palette button{width:34px;height:34px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #777;cursor:pointer}.palette button[aria-pressed=true]{box-shadow:0 0 0 3px var(--ink)}.brushes,.paint-actions{display:grid;gap:.5rem}.brushes button,.paint-actions button{border:1px solid #aaa;background:#fff;border-radius:8px;padding:.55rem;cursor:pointer}.brushes button[aria-pressed=true]{background:var(--ink);color:#fff}.paint-actions .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.paint-tools input[type=range]{width:100%}.canvas-shell{position:relative;width:100%;overflow:hidden;border:1px solid #ccc;border-radius:14px;background:#fff;touch-action:none;user-select:none}.canvas-shell canvas,.canvas-shell img{display:block;width:100%;height:auto}.canvas-shell img{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply}.paint-hint{text-align:center;color:#666;margin:.5rem}.coloring-app header{margin-bottom:1rem}@media(max-width:720px){.paint-layout{grid-template-columns:1fr}.paint-tools{position:static}.palette{grid-template-columns:repeat(8,28px)}.palette button{width:28px;height:28px}.brushes,.paint-actions{grid-template-columns:repeat(2,1fr)}}
.paint-progress{display:grid;gap:.3rem;margin:0 0 1rem}.paint-progress progress{width:100%;accent-color:var(--accent)}[hidden]{display:none!important}
.brushes button{display:flex;align-items:center;justify-content:flex-start;gap:.65rem;text-align:left}.brush-icon{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;font-size:1.25rem;line-height:1;flex:0 0 1.5rem}.brush-icon--spray{font-size:1.55rem;letter-spacing:-.15rem}
.picture-card__preview{position:relative}.picture-progress{position:absolute;right:.6rem;bottom:.6rem;padding:.35rem .6rem;border-radius:999px;background:#172033e8;color:#fff;font-size:.8rem;font-weight:700;box-shadow:0 2px 8px #0003}
.picture-progress-overlay{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none;mix-blend-mode:multiply}
.paint-layout{grid-template-columns:minmax(0,1fr) 280px}.paint-tools{grid-column:2;grid-row:1}.canvas-shell{grid-column:1;grid-row:1}.paint-scroll-zone{display:grid;place-items:center;min-height:150px;margin-top:1rem;padding:1rem;border:2px dashed #aeb5c2;border-radius:12px;color:#687386;text-align:center;background:repeating-linear-gradient(135deg,#fff,#fff 10px,#f5f6f8 10px,#f5f6f8 20px);touch-action:pan-y;overscroll-behavior-y:auto;user-select:none}.paint-scroll-zone span{max-width:12rem;font-size:.85rem}@media(max-width:720px){.paint-tools,.canvas-shell{grid-column:1;grid-row:auto}.paint-scroll-zone{min-height:100px}}
.paint-tools{padding-right:4rem}.paint-scroll-zone{position:absolute;z-index:2;top:.5rem;right:.5rem;bottom:.5rem;width:42px;min-height:0;margin:0;padding:0;border:1px solid #aeb5c2;border-radius:10px;background:repeating-linear-gradient(135deg,#fff,#fff 8px,#edf0f4 8px,#edf0f4 16px);touch-action:pan-y;overscroll-behavior-y:auto;user-select:none}.paint-scroll-zone span{font-size:1.4rem;color:#687386}@media(max-width:720px){.paint-scroll-zone{min-height:0}}
.paint-layout{grid-template-columns:minmax(0,1fr) minmax(0,322px)}.paint-sidebar{grid-column:2;grid-row:1;display:flex;align-items:stretch;position:sticky;top:1rem}.paint-tools{position:relative;top:auto;grid-column:auto;grid-row:auto;width:280px;padding-right:1rem;flex:0 0 280px}.paint-scroll-zone{position:static;top:auto;right:auto;bottom:auto;display:grid;align-self:stretch;width:42px;min-height:100%;margin:0 0 0 .35rem;flex:0 0 42px;border-radius:10px}.canvas-shell{grid-column:1;grid-row:1;touch-action:pan-x pan-y pinch-zoom}.finger-mode{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;margin:0 0 .35rem;padding:.55rem;border:1px solid #8d96a5;border-radius:8px;background:#fff;color:var(--ink)}.finger-mode.is-active,.finger-mode[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.tablet-hint{display:block;margin:0 0 1rem;color:#687386;line-height:1.35}@media(max-width:720px){.paint-layout{grid-template-columns:1fr}.canvas-shell{grid-column:1;grid-row:1}.paint-sidebar{grid-column:1;grid-row:2;position:relative;top:auto}.paint-tools{width:calc(100% - 46px);flex:1 1 auto}.paint-scroll-zone{flex:0 0 42px}}
.paint-layout{grid-template-columns:minmax(0,1fr) minmax(0,261px)}.paint-sidebar{column-gap:0}.paint-tools{width:240px;flex-basis:240px;padding:.75rem}.paint-scroll-zone{width:21px;flex-basis:21px;margin-left:0;border-left:1px solid #aeb5c2;border-radius:0 8px 8px 0}.paint-scroll-zone span{font-size:1rem}.tool-group{margin:0 0 .55rem;border:1px solid #c8ced8;border-radius:8px;background:#fff;overflow:hidden}.tool-group summary{display:flex;align-items:center;gap:.45rem;padding:.5rem .6rem;font-size:.9rem;font-weight:700;cursor:pointer;user-select:none}.tool-group summary:hover{background:#eef0f5}.tool-group__content{padding:.55rem;border-top:1px solid #d9dde4}.palette{grid-template-columns:repeat(6,28px);gap:5px}.palette button{width:28px;height:28px}.brushes{grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}.brushes button,.paint-actions button{min-height:32px;padding:.32rem .42rem;font-size:.82rem}.brush-icon{width:1.15rem;height:1.15rem;flex-basis:1.15rem;font-size:1rem}.finger-mode{min-height:32px;padding:.35rem .45rem;font-size:.82rem}@media(max-width:720px){.paint-tools{width:calc(100% - 21px)}.paint-scroll-zone{flex-basis:21px}}
.paint-layout{grid-template-columns:minmax(0,1fr) minmax(0,240px);align-items:stretch}.paint-sidebar{align-self:stretch;position:relative;top:auto;height:100%}.paint-tools{box-sizing:border-box;width:240px;height:100%;flex-basis:240px}.paint-scroll-zone{display:none}.tablet-controls,.paint-progress,.paint-actions{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #cbd1da}.tablet-controls .tablet-hint{margin-bottom:0}.paint-actions{padding-bottom:.1rem}@media (hover:none) and (pointer:coarse){.paint-layout{grid-template-columns:minmax(0,1fr) minmax(0,261px)}.paint-scroll-zone{display:grid}.paint-tools{width:240px;flex-basis:240px}}@media (max-width:720px){.paint-layout{grid-template-columns:1fr}.paint-sidebar{width:100%}.paint-tools{width:100%;flex:1 1 auto}}@media (max-width:720px) and (hover:none) and (pointer:coarse){.paint-tools{width:calc(100% - 21px)}.paint-scroll-zone{display:grid;flex:0 0 21px}}
.paint-tools fieldset+fieldset{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #cbd1da}.paint-tools fieldset label{display:block;margin-top:.55rem}.paint-tools fieldset output{display:inline-block;min-width:3rem;text-align:right;font-size:.8rem;font-weight:700}
.canvas-shell,.canvas-shell canvas{touch-action:pan-x pan-y pinch-zoom!important;overscroll-behavior:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.canvas-shell.is-finger-drawing,.canvas-shell.is-finger-drawing canvas,.canvas-shell.has-pen-input,.canvas-shell.has-pen-input canvas{touch-action:none!important;overscroll-behavior:contain}
.paint-tools .brushes{grid-template-columns:1fr}.paint-tools .brushes button{box-sizing:border-box;width:100%;min-height:38px;padding:.45rem .65rem;white-space:normal}