:root{--paper:#fbf7ee;--ink:#344b55;--blue:#dce9ed;--pink:#efd9d6;--edge:#d9d6cb}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-rounded,'Avenir Next',system-ui,sans-serif;line-height:1.5}a{color:inherit;text-underline-offset:5px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #285b7a;outline-offset:5px}[hidden]{display:none!important}.skip{position:absolute;top:-80px;background:white;padding:12px;z-index:10}.skip:focus{top:0}.header{max-width:1160px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;gap:24px}.brand{display:flex;align-items:center;text-decoration:none;gap:14px}.brand img{width:126px;height:auto}.brand span{font-size:11px;letter-spacing:.14em;font-weight:750;max-width:100px}.header nav{display:flex;gap:28px;font-size:14px}.header nav a{padding:14px 0}main{max-width:1100px;margin:auto;padding:0 32px}.intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:30px;padding:30px 0 42px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}.intro h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(52px,7vw,86px);letter-spacing:-.05em;line-height:1.05;margin:17px 0 22px}.lead{font-size:20px;color:#52656b}.intro-art{background:#e4edeb;border-radius:46% 54% 43% 47%;transform:rotate(-3deg)}.intro-art svg{display:block;width:100%;transform:rotate(3deg)}.shelf-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px}.shelf-heading h2{font-size:23px;font-weight:600;margin:0}.shelf-heading span{font-size:13px;color:#5c696b}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid var(--edge);border-radius:19px 23px 18px 22px;background:#fffdf7;text-align:left;padding:0;overflow:hidden;box-shadow:0 5px 0 #344b5505;transition:transform .18s,box-shadow .18s}.card:hover{transform:translateY(-4px);box-shadow:0 9px 17px #344b550c}.card-art{display:block;margin:11px;border-radius:13px;background:#e6eef0}.card:nth-child(2n) .card-art{background:#f0e2dc}.card:nth-child(3n) .card-art{background:#ebe9da}.card-art svg{display:block;width:100%;height:155px}.card-copy{display:grid;grid-template-columns:1fr auto;padding:7px 22px 23px;gap:3px}.card-copy small{grid-column:1/-1;letter-spacing:.1em;font-size:10px;font-weight:750}.card-copy strong{font-size:21px;font-weight:600}.card-copy i{font-size:23px;font-style:normal}.toolbar{display:flex;justify-content:space-between;gap:10px;padding:22px 0}.toolbar button,#reset,#hear{border:1px solid var(--edge);background:#fffcf5;border-radius:30px;padding:10px 16px;min-height:46px}.settings{display:flex;gap:8px}.settings button{font-size:13px}.settings button[aria-pressed=true]{background:var(--blue);border-color:#6e909e}.game-heading{text-align:center;position:relative;margin:5px 0 20px}.game-heading h1{font-size:clamp(28px,4vw,39px);font-weight:550;line-height:1.15;margin:6px 50px}.game-heading .eyebrow{margin:0 50px 10px}#hear{position:absolute;right:0;bottom:0;font-weight:700;font-size:18px}.stage{max-width:700px;margin:auto;min-height:240px;aspect-ratio:480/260;background:#f3eee2;border:1px solid #e2ddd1;border-radius:35% 22% 28% 20% / 13% 20% 13% 21%;display:flex;align-items:center;justify-content:center;overflow:hidden}.stage>svg{display:block;width:100%;max-height:335px}.choices{display:flex;justify-content:center;gap:18px;margin:24px auto 0;max-width:740px;flex-wrap:wrap}.choice{border:2px solid #d3d2c7;background:#fffdf7;border-radius:17px;min-height:90px;width:calc((100% - 40px)/3);max-width:180px;padding:7px;transition:background .2s}.choice svg{width:100%;height:85px;display:block}.choice span{font-size:15px;font-weight:650}.choice:hover{background:#e8f0ef}.choice[aria-pressed=true]{border-color:#446a7b;background:#e2eeef}.choice.matched{border-color:#4c7153;background:#e4eddf}.feedback{min-height:104px;display:flex;align-items:center;justify-content:center;gap:17px;flex-wrap:wrap;padding:18px 0}.feedback p{font-size:18px;margin:0;min-width:100%;text-align:center}.primary{background:var(--ink);color:#fffdf7;border:0;border-radius:30px;padding:12px 27px;min-height:48px}#player{position:relative;padding-bottom:65px;max-width:820px;margin:auto}.butterfly{position:absolute;bottom:0;right:4px;width:84px;height:68px;background:none;border:0;padding:8px}.butterfly svg{width:100%;height:100%;overflow:visible;transform-origin:50% 50%}.flutter svg{animation:flutter .65s ease-in-out 2}@keyframes flutter{0%,100%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(.45) rotate(-4deg)}}.stage.changed>svg{animation:reveal .45s ease-out}@keyframes reveal{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}#parents{border-top:1px solid var(--edge);margin:65px 0 35px;padding:24px 0}summary{cursor:pointer;font-size:15px;padding:10px 0}.parent-copy{max-width:720px;font-size:15px;color:#52656b}footer{max-width:1036px;margin:0 auto;padding:28px 0 45px;border-top:1px solid var(--edge);font-size:12px;letter-spacing:.05em}footer p{font-size:11px}footer a{float:right}body.still *,body.still *::before,body.still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:700px){.header{padding:16px 22px}.brand span{display:none}.header nav{gap:17px;font-size:13px}main{padding:0 22px}.intro{gap:10px;padding:24px 0 35px}.intro h1{font-size:53px}.lead{font-size:16px}.cards{grid-template-columns:repeat(2,1fr);gap:14px}.card-copy{padding:7px 14px 18px}.card-copy strong{font-size:18px}.card-art svg{height:130px}.shelf-heading span{display:none}.stage{min-height:180px}.choices{gap:10px}.choice{width:calc((100% - 22px)/3);padding:6px}.choice svg{height:69px}.choice span{font-size:12px}.game-heading h1{margin-inline:32px}.toolbar button{padding:10px 12px}footer{margin:0 22px}footer a{float:none;display:block;margin-top:20px}}@media(max-width:380px){main{padding:0 16px}.header{padding:12px 16px}.brand img{width:97px}.header nav{gap:12px}.intro{grid-template-columns:1fr}.intro-art{display:none}.intro h1{font-size:57px}.card-art svg{height:108px}.card-copy{padding:4px 10px 15px}.card-copy strong{font-size:16px}.settings{gap:4px}.toolbar button{padding:10px;font-size:12px}.game-heading h1{font-size:27px}.stage{min-height:155px}.choice svg{height:56px}.feedback p{font-size:16px}}

/* Fine paper grain, static and non-interactive. */
.stage,.card-art,.intro-art{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23grain)' opacity='.035'/%3E%3C/svg%3E")}

/* v6: keep choices in reach; focus ring belongs on controls, not large headings. */
#game-title:focus-visible{outline:none}.stage{aspect-ratio:480/240;min-height:0;max-height:270px;max-width:600px}.stage>svg{max-height:265px}.toolbar{padding:10px 0 18px}.game-heading{margin:0 0 12px}.game-heading h1{font-size:clamp(27px,4vw,35px)}.choices{margin-top:16px}.choice svg{height:70px}.feedback{min-height:88px;padding:12px 0}.rounds{display:flex;justify-content:center;gap:8px;margin:0 0 12px}.rounds i{width:8px;height:8px;border-radius:50%;background:#dcd9cf}.rounds i.current{background:#496c7a;box-shadow:0 0 0 3px #dfeaec}.rounds i.complete{background:#8ca184}.card-link{text-decoration:none}.card-link:focus-visible{outline:3px solid #285b7a;outline-offset:5px}.card-link .card-copy{padding-bottom:23px}.choice:disabled{opacity:.8}.choice.matched::after{content:'✓';display:block;color:#34563c;font-weight:800}.butterfly{bottom:4px}.folding>svg{animation:paper-fold 650ms ease-in-out both}@keyframes paper-fold{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.08)}}@media(max-width:540px){.stage{max-height:200px}.stage>svg{max-height:195px}.choice svg{height:55px}.choices{gap:9px}.game-heading .eyebrow{font-size:9px}.header nav a{min-height:44px}.feedback{gap:10px}}

.creative-tools{display:flex;justify-content:center;gap:12px;margin:12px auto 0}.creative-tools button{min-height:44px;border:1px solid #b9c5c7;border-radius:24px;background:#fffdf7;padding:8px 20px}.creative-tools button[aria-pressed=true]{background:#dce9ed;border:2px solid #486a79}.choices:has(>:nth-child(4)) .choice{width:calc((100% - 54px)/4)}footer a{margin-left:18px}@media(max-width:540px){.choices:has(>:nth-child(4)) .choice{width:calc((100% - 30px)/4);padding:4px}.choice{min-height:82px}}
