.illustrated-drawing{position:relative;background:#fff;aspect-ratio:4/3;overflow:hidden;isolation:isolate}
.coloring-original,.coloring-canvas{display:block;width:100%;height:100%;object-fit:contain}
.coloring-original{position:relative;z-index:2;mix-blend-mode:multiply;pointer-events:none}
.coloring-canvas{position:absolute;inset:0;z-index:1;visibility:hidden;touch-action:manipulation;cursor:pointer}
[data-color-ready="true"]>.coloring-canvas{visibility:visible}
.coloring-regions{position:absolute;inset:0;z-index:3;pointer-events:none}
.illustrated-region{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;min-width:48px;min-height:48px;border:0;border-radius:50%;padding:0;background:transparent;pointer-events:auto;touch-action:none;opacity:0}
.illustrated-region:focus-visible{opacity:1;outline:3px solid #163f69;outline-offset:-3px;box-shadow:inset 0 0 0 6px #fff9;background:#fff3}
.illustrated-region:active{transform:translate(-50%,-50%)!important}
.wm-paint-ghost{position:fixed;left:0;top:0;width:32px;height:32px;border-radius:50%;box-shadow:0 4px 10px #0003,inset 0 0 0 3px #fff;pointer-events:none;z-index:900}
/* a color chip starts a real drag: the browser must not steal the touch for panning */
.coloring-view [data-action="palette"]{touch-action:none}
.coloring-view .activity-heading>img{width:155px;height:160px}
.coloring-view .drawing-paper{background:#fff;max-width:min(100%,calc((100dvh - 350px)*1.33333));padding:10px}
.coloring-view .activity-heading{gap:18px}
.coloring-view .activity-heading>div{min-width:0}
@media(orientation:portrait){
 .coloring-view{padding:0 12px 46px;gap:10px;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain}
 .coloring-view .activity-heading>img{width:115px;height:135px}
 .coloring-view .activity-heading h1{font-size:25px}
 .coloring-view .drawing-paper{max-width:420px;padding:6px}
 .coloring-view .color-studio{gap:13px;justify-content:safe center}
 .coloring-view .paint-tools{gap:9px}
}
/* Mid-height portrait phones (741-880px): the generous column cannot fit the
   fixed shell, so the heading, palette and actions go compact like the short
   phones and every control keeps a 44px+ target. */
@media(orientation:portrait) and (min-height:741px) and (max-height:880px){
 .coloring-view{padding:0 12px 16px;gap:7px}
 .coloring-view .activity-heading{gap:8px}
 .coloring-view .activity-heading>img{width:52px;height:56px}
 .coloring-view .activity-heading h1{font-size:22px}
 .coloring-view .activity-heading .eyebrow{display:none}
 .coloring-view .activity-heading p{font-size:13px;margin-top:2px;padding:3px 9px}
 .coloring-view .color-studio{gap:8px}
 .coloring-view .drawing-paper{max-width:420px;padding:6px}
 .coloring-view .paint-tools{gap:6px}
 .coloring-view .palette{grid-template-columns:repeat(4,56px);gap:6px;padding:8px 10px}
 .coloring-view .paint-pot{width:56px;height:56px}
 .coloring-view .painting-actions{gap:10px}
 .coloring-view .painting-actions .small-action{min-height:48px;font-size:15px;padding:2px 9px 2px 5px}
 .coloring-view .painting-actions .small-action>img{width:40px;height:40px}
 .coloring-view .painting-actions .icon{width:56px;height:56px}
 .coloring-view .paint-tools .activity-note{display:none}
}
@media(orientation:portrait) and (max-height:740px){
 .coloring-view{padding-bottom:26px;gap:6px}
 .coloring-view .activity-heading{gap:8px}
 .coloring-view .activity-heading>img{width:90px;height:100px}
 .coloring-view .activity-heading h1{font-size:22px}
 .coloring-view .drawing-paper{max-width:310px;padding:5px}
 .coloring-view .color-studio{gap:7px}
 .coloring-view .paint-tools{gap:5px}
}