.drawing-overlay { display: none; position: fixed; inset: 0; z-index: 1000; place-items: center; background: #f8f7f1; color: #52654b; font-family: 'Segoe UI', Arial, sans-serif; }
.drawing-intro .drawing-overlay, .drawing-overlay.is-leaving { display: grid; }
.drawing-intro body { overflow: hidden; }
.drawing-intro .studio-page { opacity: 0; }
.drawing-scene { width: min(360px, 82vw); text-align: center; }
.drawing-brand { font-size: 11px; letter-spacing: 3px; margin: 0 0 14px; animation: drawing-copy-in .6s ease both; }
.drawing-art { display: block; width: 100%; overflow: visible; stroke: #52654b; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.draw-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.planet-line { animation: draw-stroke 1.25s .18s cubic-bezier(.35,0,.25,1) forwards, drawing-fill .65s .9s both; }
.orbit-line { animation: draw-stroke .85s 1.25s ease forwards; }
.sprout-line { animation: draw-stroke .5s 1.4s ease forwards; }
.leaf-left { animation: draw-stroke .5s 1.65s ease forwards, drawing-fill .5s 1.65s both; }
.leaf-right { animation: draw-stroke .6s 1.8s ease forwards, drawing-fill .5s 1.8s both; }
.drawing-face { animation: drawing-face-in .65s 1.15s cubic-bezier(.2,.8,.2,1) both; transform-origin: 180px 170px; }
.drawing-eyes { animation: drawing-blink .22s 2.75s ease both; transform-origin: 180px 155px; }
.drawing-sprout { transform-origin: 181px 99px; animation: drawing-sway 1.5s 2s ease-in-out infinite; }
.drawing-float { animation: drawing-bob 1.9s 1.3s ease-in-out infinite; }
.drawing-shadow { stroke: none; transform-origin: 180px 273px; animation: drawing-shadow-pulse 1.9s 1.3s ease-in-out infinite; }
.drawing-star { transform-box: fill-box; transform-origin: center; }
.star-one { animation: drawing-star-in .65s 1.7s cubic-bezier(.15,.8,.25,1.4) both, drawing-twinkle 1.8s 2.35s ease-in-out infinite; }
.star-two { animation: drawing-star-in .65s 2s cubic-bezier(.15,.8,.25,1.4) both, drawing-twinkle 2s 2.65s ease-in-out infinite; }
.star-three { animation: drawing-star-in .65s 2.2s cubic-bezier(.15,.8,.25,1.4) both; }
.drawing-pencil { animation: drawing-pencil-away 1.55s ease both; }
.drawing-caption { margin: 5px 0 22px; font-size: 15px; letter-spacing: .1px; animation: drawing-copy-in .6s .35s both; }
.drawing-progress { width: 90px; height: 2px; margin: auto; border-radius: 9px; background: #e2e7db; overflow: hidden; }
.drawing-progress i { display: block; height: 100%; background: #91a781; transform-origin: left; animation: drawing-progress-fill 3.5s linear both; }
.drawing-skip { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); right: max(28px, env(safe-area-inset-right)); min-height: 44px; padding: 10px 16px; border: 1px solid #dce2d3; border-radius: 999px; font: inherit; font-size: 13px; background: transparent; color: #52654b; cursor: pointer; }
.drawing-skip span { margin-left: 14px; }
.drawing-skip:hover { background: #ecf0e4; }
.drawing-skip:focus-visible, .drawing-replay:focus-visible { outline: 2px solid #91a781; outline-offset: 4px; }
.drawing-overlay.is-leaving { animation: drawing-curtain-away .65s cubic-bezier(.4,0,.2,1) forwards; pointer-events: none; }
.intro-revealed .gateway-panel { animation: gateway-soft-arrival .8s cubic-bezier(.2,.7,.2,1) both; }
.drawing-replay { margin-top: 18px; padding: 8px 12px; min-height: 40px; border: 0; background: transparent; color: #b8c5a2; font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; cursor: pointer; }
.drawing-replay span { padding-left: 10px; }
.drawing-replay:hover { color: var(--cyan); }
@keyframes draw-stroke { to { stroke-dashoffset: 0; } }
@keyframes drawing-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes drawing-copy-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drawing-face-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes drawing-blink { 50% { transform: scaleY(.12); } }
@keyframes drawing-sway { 50% { transform: rotate(-7deg); } }
@keyframes drawing-bob { 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes drawing-shadow-pulse { 50% { transform: scaleX(.85); opacity: .65; } }
@keyframes drawing-star-in { from { opacity: 0; transform: scale(.15) rotate(-30deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes drawing-twinkle { 50% { transform: scale(.8) rotate(9deg); } }
@keyframes drawing-pencil-away { 0% { opacity: 0; } 12%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes drawing-progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drawing-curtain-away { to { opacity: 0; transform: translateY(-18px); } }
@keyframes gateway-soft-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .drawing-overlay { display: none !important; } .intro-revealed .gateway-panel { animation: none; } }