/* One local illustration family: shared by the pre-bundle surface and Svelte loading states. */
.doodle-loading { display: inline-flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; color: var(--ink); vertical-align: middle; }
.doodle-loading.doodle-pending, .operation-loading:has(.doodle-pending), .audio-loading:has(.doodle-pending) { display: none; }
.doodle-art { position: relative; display: block; flex: 0 0 auto; width: var(--doodle-compact); aspect-ratio: 1; }
.doodle-art img { position: absolute; display: block; object-fit: contain; pointer-events: none; }
.doodle-art .doodle-sun, .doodle-art .doodle-face { width: 78%; height: 78%; left: 0; bottom: 0; }
.doodle-art .doodle-face { clip-path: ellipse(24% 19% at 58% 56%); }
html[data-theme="dark"] .doodle-art .doodle-face { filter: brightness(3) saturate(.65); }
.doodle-art .doodle-sun { animation: doodle-draw var(--doodle-cycle) ease-in-out infinite; }
.doodle-art .doodle-pencil { width: 48%; height: 48%; left: 60%; top: 14%; transform-origin: 11% 91%; animation: doodle-trace var(--doodle-cycle) ease-in-out infinite; }
.doodle-copy { display: flex; flex-direction: column; gap: 6px; text-align: start; font-weight: 800; font-size: 15px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.doodle-slow { font-size: 13px; font-weight: 600; color: var(--ink); }
.doodle-tiny { gap: 0; }
.doodle-tiny .doodle-art { width: var(--doodle-tiny); }
.doodle-tiny .doodle-sun, .doodle-tiny .doodle-face { display: none; }
.doodle-tiny .doodle-pencil { width: 100%; height: 100%; inset: 0; animation-name: doodle-scribble; }
.doodle-panel { display: flex; flex-direction: column; margin: 14px auto; gap: 8px; }
.doodle-panel .doodle-art { width: min(var(--doodle-panel), 36vw); }
.doodle-panel .doodle-copy { text-align: center; }
.doodle-startup { min-height: 100dvh; padding: 32px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; text-align: center; }
.doodle-brand { font-size: clamp(28px, 5vw, 40px); font-weight: 900; letter-spacing: -1.5px; }
.doodle-startup .doodle-art { width: min(var(--doodle-startup), 66vw, 42dvh); }
.doodle-startup h1 { font-size: clamp(20px, 4vw, 28px); line-height: 1.35; max-width: 28ch; }
.doodle-startup p { font-size: 15px; line-height: 1.6; max-width: 42ch; margin: 12px auto 0; }
.doodle-startup [lang="pl"] { display: none; }
html[lang="pl"] .doodle-startup [lang="en"] { display: none; }
html[lang="pl"] .doodle-startup [lang="pl"] { display: inline; }
.doodle-startup [hidden] { display: none; }
.operation-loading { margin: 8px 0; }
.audio-loading { display: inline-flex; align-items: center; }
@keyframes doodle-draw { 0%, 8% { clip-path: inset(0 39% 0 0); } 58%, 82% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 39% 0 0); } }
@keyframes doodle-trace { 0%, 8%, 100% { transform: translate(0, 0) rotate(-3deg); } 35% { transform: translate(-5%, 30%) rotate(6deg); } 58%, 82% { transform: translate(-45%, 60%) rotate(15deg); } }
@keyframes doodle-scribble { 0%, 100% { transform: rotate(-8deg) translateX(-3%); } 50% { transform: rotate(8deg) translateX(3%); } }
html[data-reduced-motion="true"] .doodle-art img, .reduce-motion .doodle-art img, [data-stalled="true"] .doodle-art img { animation: none; }
html[data-page-hidden="true"] .doodle-art img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .doodle-art img { animation: none; } }
@media (max-height: 500px) { .doodle-startup { gap: 12px; padding: 16px; } .doodle-startup .doodle-art { width: min(140px, 30dvh); } }

.hero-art > .picture-frame.hero-picture { height: auto; aspect-ratio: 1200 / 924; }
.finish-art > .picture-frame { height: auto; aspect-ratio: 1; }