.ocean-art{appearance:none;border:0;background:none;width:100%;max-width:250px;display:block;padding:0;cursor:pointer;pointer-events:auto;color:inherit;touch-action:manipulation;border-radius:30%;-webkit-tap-highlight-color:transparent}
.ocean-art svg{display:block;width:100%;height:auto;overflow:visible}.ocean-art:focus-visible{outline:2px dashed #f4d69d;outline-offset:5px}
.play-hint{display:block;color:#bcd7d9;font:10px/1.6 var(--sans);min-height:32px;letter-spacing:.02em}.process-step .step-label{margin-top:12px}.process-step h3{margin-top:12px}.process-sequence{gap:28px}
.talk-mouth{transform-box:fill-box;transform-origin:center}.bubbles{opacity:0}.chatting .talk-mouth{animation:talk .38s ease-in-out infinite}.chatting .bubbles{animation:bubble 1.6s ease-out infinite}
@media(hover:hover){.art-0:hover .talk-mouth{animation:talk .38s ease-in-out infinite}.art-0:hover .bubbles{animation:bubble 1.6s ease-out infinite}.art-2:hover .piece{transform:none}}
@keyframes talk{50%{transform:scaleY(3)}}@keyframes bubble{0%{opacity:0;transform:translateY(12px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-18px)}}
.eye-pair{transition:transform .4s cubic-bezier(.4,0,.2,1)}.hiding .eye-pair{transform:translateY(58px)}.pupils{transition:transform .1s linear}
.piece{transition:transform .7s cubic-bezier(.22,.75,.23,1);transform-origin:120px 100px}.piece.a{transform:translate(-5px,-8px) rotate(-10deg)}.piece.b{transform:translate(-12px,7px) rotate(12deg)}.piece.c{transform:translate(13px,-1px) rotate(-15deg)}.piece.d{transform:translate(-7px,16px) rotate(-16deg)}.piece.e{transform:translate(8px,19px) rotate(12deg)}.piece.f{transform:translate(17px,12px) rotate(-7deg)}.assembled .piece{transform:none}
.egg-glow{transform-origin:118px 119px;animation:glow 3s ease-in-out infinite}.baby{opacity:0;transform:translate(54px,64px) scale(.5);transition:transform 1.3s ease-in-out .18s,opacity .35s .18s}.shell,.egg-fold{transition:transform .85s ease-in-out,opacity .65s ease-in}.hatch-bubbles{opacity:0}.hatched .upper,.hatched .egg-fold{transform:translate(-26px,-37px) rotate(-12deg);opacity:0}.hatched .lower{transform:translate(18px,40px) rotate(12deg);opacity:0}.hatched .baby{opacity:1;transform:translate(17px,23px) scale(.85)}.hatched .egg-glow{opacity:.04}.hatched .hatch-bubbles{animation:bubble 1.8s ease-out both}
@keyframes glow{50%{opacity:.23;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.ocean-art *{animation:none!important;transition:none!important}.chatting .bubbles,.hatched .hatch-bubbles{opacity:1}.chatting .talk-mouth{ry:5}.art-0:hover .bubbles{opacity:1}}
@media(max-width:560px){.process-sequence{gap:28px 18px}.play-hint{font-size:9px}}
/* Generated paper artwork, revision 2 */
.raster-jaw{transform-origin:28px 111px}.chatting .raster-jaw{animation:paper-talk .42s ease-in-out infinite}@keyframes paper-talk{50%{transform:translateY(3px) rotate(-5deg)}}
.raster-piece{transition:transform .7s cubic-bezier(.22,.75,.23,1);transform-box:fill-box;transform-origin:center}.rp0{transform:translate(-8px,-9px) rotate(-15deg)}.rp1{transform:translate(2px,-6px) rotate(16deg)}.rp2{transform:translate(8px,4px) rotate(-12deg)}.rp3{transform:translate(-12px,6px) rotate(12deg)}.rp4{transform:rotate(-12deg)}.rp5{transform:translate(9px,3px) rotate(18deg)}.rp6{transform:translate(-7px,10px) rotate(-14deg)}.rp7{transform:translate(3px,9px) rotate(12deg)}.rp8{transform:translate(9px,10px) rotate(-9deg)}.assembled .raster-piece{transform:none}
@media(hover:hover){.art-0:hover .raster-jaw{animation:paper-talk .42s ease-in-out infinite}.art-2:hover .raster-piece{transform:none}}
.hatch-scene{display:block;position:relative;width:100%;aspect-ratio:240/200;overflow:hidden}.egg-art{position:absolute;width:60%;left:20%;top:12%;transition:opacity .5s,transform .65s}.hatch-fish{position:absolute;width:65%;height:auto;left:18%;top:15%;opacity:0;pointer-events:none}.hatch-ring{position:absolute;left:25%;top:18%;width:50%;aspect-ratio:1;border:2px solid #fae3b477;border-radius:50%;opacity:0}.hatching .egg-art{opacity:0;transform:scale(1.1)}.hatching .hatch-fish{animation:leave-egg 4.2s ease-in-out both}.hatching .hatch-ring{animation:egg-ring 1s ease-out both}
@keyframes leave-egg{0%,10%{opacity:0;transform:translate(0,0) scale(.4)}24%{opacity:1;transform:translate(0,0) scale(.65)}50%{opacity:1;transform:translate(-5px,-5px) scale(.65)}90%{opacity:1}100%{opacity:0;transform:translate(-160px,-36px) scale(.65)}}@keyframes egg-ring{20%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){.raster-piece,.egg-art{transition:none}.hatching .hatch-fish{opacity:1}.hatching .egg-art{opacity:0}.raster-jaw{animation:none!important}}
/* v3: simplified volumetric folded paper; no duplicate jaw layer. */
.mouth-open{visibility:hidden}.chatting .mouth-closed{animation:mouth-closed .7s steps(1,end) infinite}.chatting .mouth-open{animation:mouth-open .7s steps(1,end) infinite}
@keyframes mouth-closed{0%,65%,100%{visibility:visible}25%,55%{visibility:hidden}}@keyframes mouth-open{0%,65%,100%{visibility:hidden}25%,55%{visibility:visible}}
.tetromino{transition:transform .85s cubic-bezier(.22,.75,.23,1);transform-origin:60px 60px}.tetro-0{transform:translate(-14px,-10px) rotate(-6deg)}.tetro-1{transform:translate(14px,-8px) rotate(6deg)}.tetro-2{transform:translate(0,6px) rotate(-4deg)}.tetro-3{transform:translate(0,23px) rotate(4deg)}.assembled .tetromino{transform:none}
@media(hover:hover){.art-0:hover .mouth-closed{animation:mouth-closed .7s steps(1,end) infinite}.art-0:hover .mouth-open{animation:mouth-open .7s steps(1,end) infinite}.art-2:hover .tetromino{transform:none}}
@media(prefers-reduced-motion:reduce){.tetromino{transition:none}.ocean-art .mouth-closed{animation:none!important;visibility:visible}.ocean-art .mouth-open{animation:none!important;visibility:hidden}}

.ocean-art svg.mouth-frame{overflow:hidden}
.sole-speaking{display:block;width:100%;height:auto;aspect-ratio:1;margin-block:-20px;pointer-events:none}.talk-bubble{position:absolute;border:1.5px solid #cde6dc;border-radius:50%;opacity:0;pointer-events:none}.bubble-a{width:8px;height:8px;left:8%;top:32%}.bubble-b{width:12px;height:12px;left:12%;top:20%}.speaking .talk-bubble{animation:bubble 1.7s ease-out infinite}.speaking .bubble-b{animation-delay:.35s}.art-3 .egg-art{width:53%;left:23.5%;top:16%}
@media(prefers-reduced-motion:reduce){.speaking .talk-bubble{animation:none;opacity:1}}