.baby-kritor-page{overflow-x:hidden;overflow-x:clip}.bk-shell{max-width:1180px;margin:0 auto;padding:clamp(.75rem,2vw,1.5rem);overflow-x:clip}
.bk-intro{max-width:760px;margin:0 0 .8rem}
.bk-intro h1{margin:0 0 .25rem}
.bk-intro p{margin:0;color:#49606a}
.bk-app{display:grid;gap:1rem;--buddy-color:#ef5350}
.bk-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1rem;align-items:start}
.bk-stage-wrap{min-width:0}
.bk-status{margin:0 0 .35rem;font-weight:700;color:#49606a}
.bk-stage{position:relative;width:min(100%,760px);aspect-ratio:1;margin:0 auto;overflow:hidden;border:2px solid rgba(18,35,52,.12);border-radius:24px;background:#fff;box-shadow:0 16px 40px rgba(18,35,52,.08);touch-action:none;user-select:none;-webkit-user-select:none}
.bk-svg-layer,.bk-canvas{position:absolute;inset:0;width:100%;height:100%}
.bk-svg-layer svg{display:block;width:100%;height:100%}
.bk-svg-bg{z-index:1}.bk-canvas{z-index:2;display:block;touch-action:none}.bk-svg-outline{z-index:3;pointer-events:none}
.bk-app.is-fill .bk-canvas{pointer-events:none}.bk-app.is-fill .bk-svg-bg{pointer-events:auto}

.bk-controls{display:grid;gap:.8rem}
.bk-child-controls{position:relative;display:grid;gap:.8rem;padding:1rem;border:1px solid rgba(18,35,52,.12);border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(18,35,52,.07)}
.bk-crayon-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;align-items:end}
.bk-crayon{position:relative;width:100%;height:86px;border:0;background:var(--bk-crayon);clip-path:polygon(50% 0,88% 16%,88% 100%,12% 100%,12% 16%);cursor:pointer;filter:drop-shadow(0 5px 5px rgba(18,35,52,.12));transform-origin:50% 100%;transition:transform .15s ease,filter .15s ease}
.bk-crayon::before{content:"";position:absolute;left:12%;right:12%;top:22%;height:8px;background:rgba(255,255,255,.52)}
.bk-crayon::after{content:"";position:absolute;left:12%;right:12%;bottom:15%;height:12px;background:rgba(255,255,255,.22)}
.bk-crayon__shine{position:absolute;left:27%;top:31%;width:12%;height:38%;border-radius:999px;background:rgba(255,255,255,.36)}
.bk-crayon.is-active{transform:translateY(-8px) scale(1.06);filter:drop-shadow(0 9px 8px rgba(18,35,52,.2))}
.bk-crayon.is-active::before{background:#fff}
.bk-child-actions{display:flex;gap:.6rem;justify-content:center}
.bk-icon-button{display:grid;width:58px;height:58px;place-items:center;border:2px solid rgba(18,35,52,.14);border-radius:18px;background:#fff;color:#17313d;font-size:1.8rem;font-weight:900;cursor:pointer}
.bk-icon-button:disabled{opacity:.35}
.bk-icon-button.is-active{border-color:#245f72;background:#edf7f8}
.bk-eraser-icon{display:block;width:28px;height:18px;border:3px solid #17313d;border-radius:5px;background:linear-gradient(135deg,#f8bbd0 0 50%,#fff 50%);transform:rotate(-26deg)}

.bk-mascot{position:relative;width:108px;margin:.1rem auto 0;opacity:.94}
.bk-mascot svg{width:100%;height:auto;overflow:visible}
.bk-mascot__tip{fill:#f4d7b2;stroke:#17313d;stroke-width:3}
.bk-mascot__body{fill:var(--buddy-color);stroke:#17313d;stroke-width:3;transition:fill .2s ease}
.bk-mascot__band{fill:rgba(255,255,255,.42)}
.bk-mascot__eye{fill:#17313d}.bk-mascot__smile{fill:none;stroke:#17313d;stroke-width:3;stroke-linecap:round}
.bk-mascot__arm,.bk-mascot__leg{fill:none;stroke:#17313d;stroke-width:4;stroke-linecap:round}
.bk-mascot__spark{fill:#ffd54f;opacity:0}
.bk-mascot__bubble{position:absolute;left:75%;top:5%;min-width:88px;padding:.35rem .55rem;border:2px solid rgba(18,35,52,.12);border-radius:14px;background:#fff;font-size:.78rem;font-weight:800;color:#17313d;opacity:0;transform:translateY(6px);pointer-events:none}
.bk-mascot.is-helping .bk-mascot__crayon{animation:bkBuddyWiggle .7s ease-in-out 2}
.bk-mascot.is-helping .bk-mascot__arm--left{animation:bkBuddyPoint .7s ease-in-out 2}
.bk-mascot.is-helping .bk-mascot__bubble{opacity:1;transform:translateY(0);transition:opacity .18s ease,transform .18s ease}
.bk-mascot.is-celebrating .bk-mascot__crayon{animation:bkBuddyHop .5s ease 1}
.bk-mascot.is-celebrating .bk-mascot__spark{animation:bkSpark .7s ease 1}

.bk-adult{border:1px solid rgba(18,35,52,.12);border-radius:18px;background:#fff;overflow:hidden}
.bk-adult summary{padding:.8rem 1rem;font-weight:800;cursor:pointer}
.bk-adult__panel{display:grid;gap:.7rem;padding:0 1rem 1rem}
.bk-adult__tools,.bk-size,.bk-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.bk-size{grid-template-columns:repeat(3,1fr)}
.bk-adult button{min-height:44px;padding:.55rem .65rem;border:2px solid rgba(18,35,52,.14);border-radius:12px;background:#fff;color:#17313d;font:inherit;font-weight:800;cursor:pointer}
.bk-adult button.is-active{border-color:#245f72;background:#edf7f8}
.bk-adult button:disabled{opacity:.4}

.bk-choose{display:grid;gap:.55rem}
.bk-choose h2{margin:0;font-size:clamp(1.25rem,3vw,1.7rem)}
.bk-motifs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.bk-motif{display:grid;gap:.4rem;padding:.55rem;border:2px solid rgba(18,35,52,.14);border-radius:16px;background:#fff;font:inherit;font-weight:800;cursor:pointer}
.bk-motif img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:11px;background:#fff}
.bk-motif.is-active{border-color:#245f72;box-shadow:0 0 0 3px rgba(36,95,114,.1)}
.bk-privacy{margin:0;font-size:.88rem;color:#667984}

.bk-crayon:focus-visible,.bk-icon-button:focus-visible,.bk-adult button:focus-visible,.bk-motif:focus-visible{outline:4px solid rgba(36,95,114,.35);outline-offset:2px}

@keyframes bkBuddyWiggle{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes bkBuddyPoint{0%,100%{transform:rotate(0);transform-origin:43px 54px}50%{transform:rotate(-18deg);transform-origin:43px 54px}}
@keyframes bkBuddyHop{0%,100%{transform:translateY(0)}45%{transform:translateY(-10px)}}
@keyframes bkSpark{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(.8)}}

@media(max-width:820px){
.bk-shell{padding:.45rem .5rem 1rem;max-width:none;width:100%}
.bk-intro{margin-bottom:.45rem}
.bk-intro h1{font-size:clamp(1.9rem,8vw,2.45rem);margin-bottom:.1rem}
.bk-intro p{display:none}
.bk-app{gap:.8rem}
.bk-workspace{display:flex;flex-direction:column;gap:.65rem}
.bk-stage-wrap{order:1;width:100%;max-width:100%;min-width:0}
.bk-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bk-stage{width:min(94vw,max(300px,46svh));max-width:100%;margin:0 auto;transform:none;border-radius:16px;touch-action:pan-y}
.bk-canvas{touch-action:pan-y}
.bk-app.is-paint-armed .bk-stage,.bk-app.is-paint-armed .bk-canvas{touch-action:none}
.bk-app.is-fill .bk-svg-bg{touch-action:none}
.bk-controls{order:2;width:100%}
.bk-child-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"crayons mascot" "actions mascot";gap:.55rem .5rem;padding:.65rem .7rem;border-radius:16px}
.bk-crayon-row{grid-area:crayons;grid-template-columns:repeat(6,1fr);gap:.32rem}
.bk-crayon{height:66px;min-width:0}
.bk-crayon.is-active{transform:translateY(-5px) scale(1.04)}
.bk-child-actions{grid-area:actions;justify-content:flex-start}
.bk-icon-button{width:48px;height:48px;border-radius:14px;font-size:1.55rem}
.bk-eraser-icon{width:24px;height:16px}
.bk-mascot{grid-area:mascot;width:74px;align-self:center;margin:0}
.bk-mascot__bubble{display:none}
.bk-adult summary{padding:.65rem .8rem}
.bk-adult__panel{padding:0 .8rem .8rem}
.bk-choose{order:3}
.bk-choose h2{font-size:1.2rem}
.bk-motifs{display:flex;overflow-x:auto;gap:.55rem;padding:.05rem .05rem .35rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.bk-motif{flex:0 0 98px;scroll-snap-align:start;padding:.4rem;font-size:.8rem}
.bk-privacy{order:4;font-size:.78rem}
}

@media(max-width:390px){
.bk-shell{padding-inline:.35rem}
.bk-child-controls{grid-template-columns:minmax(0,1fr) 62px;padding:.55rem}
.bk-crayon-row{gap:.22rem}
.bk-crayon{height:58px}
.bk-mascot{width:62px}
}

@media(prefers-reduced-motion:reduce){
.bk-crayon,.bk-mascot__crayon,.bk-mascot__arm,.bk-mascot__spark{transition:none!important;animation:none!important}
}