:root{font-family:Georgia,'Times New Roman',serif;color:#322d2a;background:#f3ede2}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 50% 5%,#fffaf0,#e8ded0)}main{max-width:1180px;margin:auto;padding:24px 25px 44px}header{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand,.eyebrow,.speaker{font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.16em;color:#9b6d4f}button{font:600 14px system-ui,sans-serif;cursor:pointer}#restart{border:1px solid #cbbcad;border-radius:20px;background:#faf5eb;color:#614b3d;padding:10px 16px}.heading{text-align:center;margin:32px 0 24px}.heading h1{font-size:clamp(29px,4vw,48px);font-weight:500;line-height:1.1;margin:10px 0;color:#493427}.heading p{margin:0;color:#846e60;font-size:17px}.frame{position:relative;width:100%;border:9px solid #fffaf2;border-radius:10px;overflow:hidden;box-shadow:0 18px 55px #6e4f3326;background:#eee9df}.frame svg{display:block;width:100%;height:auto}.target{position:absolute;border:2px solid #fff8;box-shadow:0 0 0 3px #fff6;opacity:.72;display:grid;place-items:center;color:#372c22}.target span{position:absolute;top:100%;margin-top:8px;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;padding:4px 8px;border-radius:20px;background:#fffaf0e8}.target.gear{left:35.4%;top:76%;width:13.7%;height:15%;border-radius:50%;background:#eebc4c70}.target.crystal{left:53%;top:64%;width:9.8%;height:25%;border-radius:40%;background:#78b6c763}.target.spring{left:65.5%;top:77%;width:18%;height:16%;border-radius:50%;background:#d58e9270}.target[aria-pressed=true]{border-color:#5b704a;background:#9ac38860;opacity:.8}.target:focus-visible,#restart:focus-visible,#start:focus-visible,.answer:focus-visible{outline:3px solid #8c4f33;outline-offset:4px}.story{display:flex;align-items:flex-start;gap:15px;margin:22px auto 0;max-width:850px;min-height:96px}.avatar{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#d19a63;color:#fff;font-weight:bold}.speaker{margin:2px 0 6px}.story p{font-size:clamp(17px,2vw,22px);line-height:1.35;margin:0 0 12px}.story button:not(#restart){border:0;background:#8a5436;color:#fffaf2;border-radius:24px;padding:10px 18px;margin:0 7px 6px 0}.story button:hover{background:#6d3d28}#count{font:600 14px system-ui;color:#8f684d}.footnote{text-align:center;color:#9c8c7c;font:12px system-ui;margin:28px 0 0}@media(max-width:600px){main{padding:14px 10px 24px}.heading{margin:26px 0 18px}.heading p{font-size:15px}.frame{border-width:5px}.target span{font-size:10px;padding:2px 5px}.story{padding:0 6px}.brand{font-size:9px}}
#artwork{display:block;width:100%;height:auto;opacity:0}#painting,#sketch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#sketch.complete{opacity:0}#draw-start{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);border:0;border-radius:24px;background:#8a5436;color:#fffaf2;padding:13px 24px;box-shadow:0 5px 20px #50362933}#draw-start:focus-visible{outline:3px solid #8c4f33;outline-offset:4px}
.target{z-index:2;opacity:1;border:3px solid var(--hint);background:transparent!important;box-shadow:0 0 0 3px #fffdf2,0 0 18px 5px var(--hint);animation:hint-glow 1.8s ease-in-out infinite}
.target.gear{--hint:#ffca46}.target.crystal{--hint:#63d9ff}.target.spring{--hint:#ff92a4}
.target span{font-weight:700;color:#392819;background:#fffaf2;border:2px solid var(--hint);box-shadow:0 2px 8px #35201055}
.target[aria-pressed=true]{animation:none;border-color:#8de39f;box-shadow:0 0 0 3px #fffdf2,0 0 14px #64c878;background:#8de39f35!important}
@keyframes hint-glow{0%,100%{box-shadow:0 0 0 3px #fffdf2,0 0 9px 2px var(--hint)}50%{box-shadow:0 0 0 5px #fffdf2,0 0 24px 8px var(--hint)}}
@media(prefers-reduced-motion:reduce){.target{animation:none}}
/* Soft animated sparkle surrounds each object without moving the artwork. */
.target:not([aria-pressed=true]){border:3px solid #fff9d8;box-shadow:0 0 0 2px var(--hint),0 0 14px 6px var(--hint),inset 0 0 16px 2px var(--hint);animation:hint-glow 2s ease-in-out infinite;isolation:isolate}
.target:not([aria-pressed=true])::before{content:"";position:absolute;pointer-events:none;inset:-22px;border-radius:50%;background:radial-gradient(circle at 12% 23%,#fff 0 2px,var(--hint) 3px,transparent 7px),radial-gradient(circle at 90% 30%,#fff 0 2px,var(--hint) 3px,transparent 7px),radial-gradient(circle at 83% 78%,#fff 0 2px,var(--hint) 3px,transparent 7px),radial-gradient(circle at 16% 79%,#fff 0 2px,var(--hint) 3px,transparent 7px);filter:drop-shadow(0 0 5px var(--hint));animation:sparkle-drift 3s ease-in-out infinite alternate;z-index:-1}
.target:not([aria-pressed=true])::after{content:"✦";position:absolute;pointer-events:none;top:-34px;left:50%;transform:translateX(-50%);font:700 clamp(24px,3vw,36px)/1 Georgia,serif;color:#fff9ce;-webkit-text-stroke:1px #8d5321;text-shadow:0 0 4px #fff,0 0 12px var(--hint),0 3px 5px #55331b;animation:sparkle-bob 1.8s ease-in-out infinite}
.target span{z-index:2;padding:5px 10px;box-shadow:0 2px 9px #31201080;background:#fffef5;font-size:clamp(10px,1vw,13px)}
.target[aria-pressed=true]::before{content:"✓";position:absolute;top:-18px;right:-10px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#2d874d;color:white;border:2px solid white;font:700 17px system-ui;box-shadow:0 2px 8px #25463199}
@keyframes sparkle-drift{from{transform:scale(.93) rotate(-5deg);opacity:.65}to{transform:scale(1.07) rotate(5deg);opacity:1}}
@keyframes sparkle-bob{0%,100%{transform:translate(-50%,0) scale(.9)}50%{transform:translate(-50%,-7px) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.target:not([aria-pressed=true]),.target:not([aria-pressed=true])::before,.target:not([aria-pressed=true])::after{animation:none}}
/* The clues are tiny light sprites, not drawn rings or labels over the art. */
.target:not([aria-pressed=true]){border:0;box-shadow:none;background:transparent!important;animation:none}
.target.gear{--glimmer:#ffd367}.target.crystal{--glimmer:#a1ebff}.target.spring{--glimmer:#ffd5a5}
.target:not([aria-pressed=true])::before{inset:-18%;border:0;border-radius:50%;z-index:-1;opacity:.85;filter:none;background:radial-gradient(ellipse at center,var(--glimmer) 0%,transparent 64%),radial-gradient(circle at 20% 25%,#fff 0 2px,var(--glimmer) 3px,transparent 7px),radial-gradient(circle at 78% 24%,#fff 0 2px,var(--glimmer) 3px,transparent 7px),radial-gradient(circle at 85% 72%,#fff 0 2px,var(--glimmer) 3px,transparent 7px),radial-gradient(circle at 17% 72%,#fff 0 2px,var(--glimmer) 3px,transparent 7px);animation:fairy-glow 2.5s ease-in-out infinite alternate}
.target:not([aria-pressed=true])::after{content:"✦";top:-25px;left:75%;font-size:clamp(22px,2.8vw,34px);color:#fff9db;-webkit-text-stroke:.5px #d79043;text-shadow:0 0 4px #fff,0 0 11px var(--glimmer),0 0 20px var(--glimmer);animation:fairy-float 2.8s ease-in-out infinite}
.target span{opacity:0;transition:opacity .2s ease;pointer-events:none}
.target:hover span,.target:focus-visible span{opacity:1}
.target[aria-pressed=true]{border:0;box-shadow:none;background:transparent!important}
.target[aria-pressed=true]::before{content:"✦";background:none;border:0;box-shadow:none;color:#fff6c6;font-size:25px;text-shadow:0 0 7px #ffdf80;top:-18px;right:-5px}
@keyframes fairy-glow{from{opacity:.30;transform:scale(.93)}to{opacity:.65;transform:scale(1.08)}}
@keyframes fairy-float{0%,100%{transform:translate(-50%,2px) scale(.85);opacity:.8}50%{transform:translate(-50%,-10px) scale(1.12);opacity:1}}
@media(prefers-reduced-motion:reduce){.target:not([aria-pressed=true])::before,.target:not([aria-pressed=true])::after{animation:none;opacity:.7}}
.target:not([aria-pressed=true])::before{inset:-50%;border-radius:0;background:url('magic-dust.webp') center/100% 100% no-repeat;opacity:.8;filter:drop-shadow(0 0 3px #ffcf77);animation:magic-dust-breathe 2.8s ease-in-out infinite alternate;z-index:-1}
.target:not([aria-pressed=true])::after{content:none}
.target.crystal:not([aria-pressed=true])::before{filter:hue-rotate(155deg) saturate(.85) drop-shadow(0 0 3px #a3e8ff);animation-delay:-.8s}
.target.spring:not([aria-pressed=true])::before{animation-delay:-1.6s}
@keyframes magic-dust-breathe{from{opacity:.55;transform:scale(.94) rotate(-3deg)}to{opacity:1;transform:scale(1.04) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.target:not([aria-pressed=true])::before{animation:none;opacity:.8}}
.target:not([aria-pressed=true])::before{inset:-30%;opacity:.7}
.target:not([aria-pressed=true])::after{content:"";position:absolute;pointer-events:none;top:-65px;left:68%;width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px);background:url('firefly.webp') center/contain no-repeat;filter:drop-shadow(0 2px 6px #70451d99);animation:helper-flight 2.6s ease-in-out infinite;z-index:3}
.target.crystal:not([aria-pressed=true])::after{animation-delay:-.7s}.target.spring:not([aria-pressed=true])::after{animation-delay:-1.4s}
@keyframes helper-flight{0%,100%{transform:translate(-50%,0) rotate(-6deg)}50%{transform:translate(-50%,-9px) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.target:not([aria-pressed=true])::after{animation:none}}
.target:not([aria-pressed=true])::before{animation:veil-sweep 4.8s ease-in-out infinite;will-change:transform,opacity}
.target .veil{position:absolute;pointer-events:none;inset:-20%;z-index:0;opacity:.8;filter:drop-shadow(0 0 4px #ffe3a6);background:radial-gradient(circle at 20% 65%,#fff 0 1px,#ffe7a0 2px,transparent 5px),radial-gradient(circle at 75% 65%,#fff 0 1px,#ffe7a0 2px,transparent 5px),radial-gradient(circle at 86% 30%,#fff 0 1px,#ffe7a0 2px,transparent 5px),radial-gradient(circle at 15% 30%,#fff 0 1px,#ffe7a0 2px,transparent 5px);animation:veil-particles 3.7s ease-in-out infinite}
.target[aria-pressed=true] .veil{display:none}.target.crystal .veil{filter:hue-rotate(155deg) drop-shadow(0 0 5px #a3e8ff);animation-delay:-1.1s}.target.spring .veil{animation-delay:-2.2s}
.target:not([aria-pressed=true])::after{animation:helper-flight-natural 3.4s ease-in-out infinite;will-change:transform}
.target.crystal:not([aria-pressed=true])::after{animation-delay:-1.1s}.target.spring:not([aria-pressed=true])::after{animation-delay:-2.2s}
@keyframes veil-sweep{0%,100%{opacity:.48;transform:scale(.95) rotate(-5deg)}25%{opacity:.75;transform:translate(3px,-4px) scale(1.02) rotate(1deg)}55%{opacity:.62;transform:translate(-3px,2px) scale(1.04) rotate(5deg)}80%{opacity:.78;transform:translate(2px,3px) scale(.98) rotate(-1deg)}}
@keyframes veil-particles{0%,100%{opacity:.35;transform:translateY(4px) scale(.95)}45%{opacity:.95;transform:translateY(-7px) scale(1.06)}70%{opacity:.6;transform:translateY(-12px) scale(1)}}
@keyframes helper-flight-natural{0%,100%{transform:translate(-50%,1px) rotate(-6deg)}18%{transform:translate(-57%,-7px) rotate(1deg)}37%{transform:translate(-44%,-13px) rotate(8deg)}55%{transform:translate(-36%,-6px) rotate(3deg)}75%{transform:translate(-47%,-10px) rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){.target:not([aria-pressed=true])::before,.target:not([aria-pressed=true])::after,.target .veil{animation:none}}
.target:not([aria-pressed=true])::after{content:none}
.bee{position:absolute;pointer-events:none;top:-65px;left:68%;width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px);z-index:3;filter:drop-shadow(0 2px 6px #70451d99);animation:helper-flight-natural 3.4s ease-in-out infinite}
.bee-base,.bee-wing{position:absolute;inset:0;display:block;background:url('firefly.webp') center/contain no-repeat}
.bee-base{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 62%,45% 62%,56% 50%,45% 10%,0 10%)}
.bee-wing{clip-path:polygon(0 10%,45% 10%,56% 50%,45% 62%,0 62%);transform-origin:52% 47%;animation:wing-flutter .18s ease-in-out infinite alternate}
.target.crystal .bee{animation-delay:-1.1s}.target.spring .bee{animation-delay:-2.2s}.target[aria-pressed=true] .bee{display:none}
@keyframes wing-flutter{from{transform:scaleY(.7) rotate(-3deg)}to{transform:scaleY(1.03) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.bee,.bee-wing{animation:none}}
/* The lesson explicitly asks for moving hints; keep their movement enabled. */
@media(prefers-reduced-motion:reduce){.target:not([aria-pressed=true])::before{animation:veil-sweep 4.8s ease-in-out infinite}.target .veil{animation:veil-particles 3.7s ease-in-out infinite}.bee{animation:helper-flight-natural 3.4s ease-in-out infinite}.bee-wing{animation:wing-flutter .18s ease-in-out infinite alternate}}
.target.gear{left:19.5%;top:64.5%;width:22%;height:22%}.target.crystal{left:45.5%;top:67%;width:19%;height:20%}.target.spring{left:70.5%;top:71%;width:14%;height:16%}
.sr-only,.heading{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
header{justify-content:flex-end;margin-bottom:14px;gap:10px}
header button,#voice-answer,#start{width:52px;height:52px;border:0;border-radius:50%;display:inline-grid;place-items:center;background:#8a5436;color:#fffaf2;box-shadow:0 4px 14px #50362933}
header button svg,#voice-answer svg,#start svg,#draw-start svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#draw-start{width:80px;height:80px;padding:0;display:grid;place-items:center;border-radius:50%}#draw-start svg{width:42px;height:42px;fill:currentColor;stroke:none}
.story{display:flex;justify-content:center;min-height:70px}.story>div{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.story button:not(#restart){margin:0;padding:0}
#answers{display:flex;gap:10px;align-items:center}.answer{width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:50%;background:#fffaf2!important;border:2px solid #bd9575!important}
.answer-dot{display:block;width:10px;height:10px;border-radius:50%;background:#a05e38}
#voice-answer{width:68px;height:68px;background:#b86b39;transition:transform .2s,box-shadow .2s}
#voice-answer.listening{background:#c9453c;animation:mic-listen 1s ease-in-out infinite}
@keyframes mic-listen{0%,100%{box-shadow:0 0 0 4px #cf6d5c70}50%{box-shadow:0 0 0 14px #cf6d5c30}}
.target span,.target:hover span,.target:focus-visible span{opacity:0}
#draw-start,.story #start{width:auto;min-width:136px;height:56px;padding:0 26px;border-radius:28px;font:700 18px/1 system-ui,sans-serif}
/* Warm storybook controls with ample touch targets. */
#draw-start,.story #voice-answer{width:auto;min-width:172px;height:64px;padding:0 34px;border:1px solid #f3dcaa;border-radius:32px;background:linear-gradient(180deg,#527759 0%,#355b41 100%);color:#fff9e9;font:700 19px/1 Georgia,serif;letter-spacing:.02em;box-shadow:inset 0 1px 0 #ffffff7a,0 0 0 3px #3d583e88,0 8px 24px #2e392b55;transition:transform .2s ease,box-shadow .2s ease}
#draw-start:hover,.story #voice-answer:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff85,0 0 0 3px #547657aa,0 12px 26px #2e392b66}
#draw-start:hover{transform:translate(-50%,calc(-50% - 2px))}
#draw-start:focus-visible,.story #voice-answer:focus-visible,header button:focus-visible{outline:3px solid #f8d884;outline-offset:4px}
header button{background:#f8f1df;color:#365c43;border:1px solid #c8aa76;box-shadow:inset 0 1px #fff,0 3px 10px #49382722}
#voice-answer.listening{background:linear-gradient(180deg,#bd6946,#93492f);animation:mic-listen 1s ease-in-out infinite}
#voice-answer:disabled{opacity:1;cursor:wait}
.story #replay{width:auto;min-width:190px;height:64px;padding:0 24px;border:1px solid #bb9d70;border-radius:32px;background:linear-gradient(180deg,#fffaf0,#eadcc0);color:#3b5a42;font:700 16px/1 Georgia,serif;box-shadow:inset 0 1px #fff,0 6px 16px #58473030;transition:transform .2s ease,box-shadow .2s ease}
.story #replay:hover{transform:translateY(-2px);box-shadow:inset 0 1px #fff,0 9px 20px #58473040}
.story #replay:focus-visible{outline:3px solid #d9ab4e;outline-offset:4px}
.story button#voice-answer{background:linear-gradient(180deg,#527759,#355b41);color:#fff9e9;padding:0 34px}
.story button#voice-answer.listening{background:linear-gradient(180deg,#bd6946,#93492f)}
.story button#replay{background:linear-gradient(180deg,#fffaf0,#eadcc0);color:#3b5a42;padding:0 24px}
.count-mode .target:not([aria-pressed=true]){visibility:hidden}
.count-mode .target[aria-pressed=true]{visibility:visible;opacity:1;pointer-events:none;border:0;background:transparent!important}
.count-mode .target[aria-pressed=true]::before{content:"";position:absolute;inset:-30%;width:auto;height:auto;border:0;border-radius:0;background:url('magic-dust.webp') center/100% 100% no-repeat;filter:drop-shadow(0 0 3px #ffcf77);animation:veil-sweep 4.8s ease-in-out infinite;box-shadow:none}
.count-mode .target.crystal[aria-pressed=true]::before{filter:hue-rotate(155deg) saturate(.85) drop-shadow(0 0 3px #a3e8ff)}
.count-mode .target[aria-pressed=true] .veil,.count-mode .target[aria-pressed=true] .bee{display:block}
.story button#voice-answer{position:relative;min-width:196px;height:68px;padding:0 42px;border-radius:20px;border:1px solid #e9cf96;background:linear-gradient(160deg,#647e5a 0%,#3f624b 44%,#294a39 100%);color:#fff8e7;font:700 21px/1 Georgia,serif;letter-spacing:.025em;box-shadow:inset 0 1px 0 #ffffff80,inset 0 -3px 8px #1b362d55,0 2px 0 #253e30,0 12px 26px #42351f45;transition:transform .18s ease,box-shadow .18s ease}
.story button#voice-answer::after{content:"";position:absolute;inset:4px;border:1px solid #f3dea153;border-radius:15px;pointer-events:none}
.story button#voice-answer:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff90,inset 0 -3px 8px #1b362d55,0 4px 0 #253e30,0 15px 28px #42351f55}
.story button#voice-answer:active{transform:translateY(1px)}
.story button#voice-answer.listening{background:linear-gradient(160deg,#b17749,#945739 55%,#70432c);animation:mic-listen 1.3s ease-in-out infinite}
.story button#voice-answer:focus-visible{outline:3px solid #f5d78b;outline-offset:5px}
@media(min-width:601px){main{max-width:min(1180px,calc(177.6vh - 216px))}}
.story button#voice-answer.microphone-error{background:linear-gradient(160deg,#9b5149,#733731);box-shadow:0 0 0 3px #dba6a0,0 8px 24px #632b2b55}
.story button#voice-answer.microphone-error::before{content:"!";position:absolute;right:14px;display:grid;place-items:center;width:22px;height:22px;border:1px solid #fff5;border-radius:50%;color:#fff;font:700 15px/1 system-ui}
/* Fit the storybook to the available screen while keeping its aspect ratio. */
main{width:min(100%,calc(177.7dvh - 190px));max-width:none;margin:auto;padding:8px 8px 0}
.story{margin:8px auto 0;min-height:72px}
#draw-start{min-width:184px;height:68px;padding:0 36px;border:1px solid #fff3d4;border-radius:22px;background:linear-gradient(155deg,#fff9e8,#ead8b4);color:#294c3d;font:700 22px/1 Georgia,serif;letter-spacing:.02em;box-shadow:inset 0 1px 0 #fff,0 2px 0 #ad966f,0 12px 32px #352b2470}
#draw-start:hover{background:linear-gradient(155deg,#fffdf4,#f1e1be);box-shadow:inset 0 1px 0 #fff,0 3px 0 #ad966f,0 16px 34px #352b247a}
#draw-start:active{transform:translate(-50%,calc(-50% + 1px))}
@media(max-width:600px){main{padding:6px 6px 0}.story{margin-top:8px}}
#painting{transition:opacity .22s ease}
#answer-choices{display:flex;align-items:center;gap:10px}
.story #answer-choices .choice{width:60px;height:60px;padding:0;margin:0;border:1px solid #d4b98c;border-radius:18px;background:linear-gradient(155deg,#fffdf4,#eadaba);color:#34523e;font:700 25px/1 Georgia,serif;box-shadow:inset 0 1px #fff,0 2px 0 #ae9770,0 7px 16px #49382725;transition:transform .15s,box-shadow .15s,background .15s}
.story #answer-choices .choice:hover{transform:translateY(-2px);background:linear-gradient(155deg,#fffef8,#f5e8cc);box-shadow:inset 0 1px #fff,0 3px 0 #ae9770,0 10px 18px #49382730}
.story #answer-choices .choice[aria-pressed=true]{background:linear-gradient(155deg,#77966d,#466b4e);color:#fffdf1;border-color:#f0d89e;box-shadow:inset 0 1px #ffffff70,0 2px 0 #294a39,0 7px 16px #49382730}
.story #answer-choices .choice:focus-visible{outline:3px solid #d9ab4e;outline-offset:3px}
.story #answer-choices .choice:disabled{opacity:.55;cursor:wait}
@media(max-width:420px){.story #answer-choices .choice{width:52px;height:52px;border-radius:16px}.story button#voice-answer{min-width:140px;height:56px;padding:0 24px}}
.story button#voice-answer{width:78px;min-width:78px;height:60px;padding:0;display:inline-grid;place-items:center}
.story button#voice-answer .voice-icon{width:51px;height:40px;stroke:none}
@media(max-width:420px){.story button#voice-answer{width:70px;min-width:70px;height:52px;padding:0}.story button#voice-answer .voice-icon{width:46px;height:36px}}