body{min-height:100vh;padding:0 clamp(12px,5vw,96px);background:radial-gradient(circle at 52% 38%,#37332b 0,#1c1b18 57%,#121210 100%);background-attachment:fixed}
body::before{opacity:.2}
.alphabet-letters-note{position:relative;align-self:center;width:100%;aspect-ratio:350/340;overflow:hidden}
.alphabet-letters-note img{position:absolute;display:block;width:202.3%;max-width:none;height:auto;left:-53.7%;top:-27.5%}
.alpha-page footer .world.footer-globe{position:relative;display:block;justify-self:end;width:59.85%;aspect-ratio:330/260;overflow:hidden;font-size:0;transform:none}
.footer-globe img{position:absolute;display:block;width:214.55%;height:auto;max-width:none;left:-62.12%;top:-46.92%}
.spell-tool .spell-tool-form .audio-row{width:64%}
.spell-tool .audio-row .spell-again-image{padding:0;overflow:hidden}
.spell-again-image img{display:block;width:100%;height:100%;object-fit:contain}
.spell-tool .audio-row .spell-it-image{padding:0;overflow:hidden}
.spell-it-image img{display:block;width:100%;height:100%;object-fit:contain}
.spell-tool .audio-row .spell-slower-image{padding:0;overflow:hidden}
.spell-slower-image img{display:block;width:100%;height:100%;object-fit:contain}
.spell-tool-art:has(.spell-supplied-art){overflow:hidden;align-self:center;aspect-ratio:330/260;min-height:0}
.spell-tool-art img.spell-supplied-art{position:absolute;width:214.55%;height:auto;max-width:none;left:-62.12%;top:-46.92%;object-fit:initial}
.spell-tool{display:grid;grid-template-columns:minmax(0,7fr) minmax(150px,3fr);gap:20px;padding:24px;background:#dfabb0}
.spell-tool-form{min-width:0}
.spell-tool .spell-tool-form h2{font:700 clamp(20px,2.2vw,28px)/1.2 'Oswald',sans-serif}
.spell-tool .spell-tool-form p{font-size:14px;margin:8px 0 24px}
.spell-tool .spell-tool-form input{width:100%;max-width:none}
.spell-tool .audio-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.spell-tool .audio-row button{padding:12px 5px;font-size:15px;background:transparent;border-color:#17456e}
.spell-tool .audio-row button:first-child{background:#103e70;color:#fff5df}
.spell-tool .audio-row button{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.spell-tool .audio-row button:hover{background:#e4ae22;color:#103e70}
.spell-input-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.spell-tool-art{position:relative;align-self:stretch;min-height:180px}
.spell-tool-art img{width:100%;height:100%;object-fit:contain}
.spell-tool-art span{position:absolute;right:-6px;top:0;transform:rotate(-9deg);padding:16px 14px;background:#eee4cb;color:#103e70;font:17px/1.25 'Permanent Marker',cursive;box-shadow:2px 3px #4c342325}
#spell-message:empty{display:none}
@media(max-width:600px){.spell-tool{grid-template-columns:1fr}.spell-tool-art{display:none}.spell-tool .audio-row button{font-size:13px}}
.listen-collage{position:relative;isolation:isolate;overflow:hidden;padding:22px 28px 38px;min-height:410px}
.listen-collage::before{content:"";position:absolute;z-index:-1;left:-35px;bottom:-15px;width:180px;height:230px;background:#dba0aa;clip-path:polygon(0 15%,24% 20%,39% 5%,48% 0,63% 24%,68% 40%,100% 100%,0 100%);transform:rotate(-6deg)}
.listen-collage::after{content:"";position:absolute;z-index:-1;right:-8px;bottom:0;width:150px;height:60px;padding:24px 8px 0 38px;background:#174d7c;color:#f3e5ca;clip-path:polygon(0 100%,14% 40%,27% 45%,35% 15%,47% 30%,63% 0,78% 16%,100% 20%,100% 100%);font:bold 19px Georgia,serif}
.listen-collage h2{display:table;position:relative;max-width:100%;margin:22px auto 12px;padding:0;background:transparent;transform:none;clip-path:none;font-size:36px}
.listen-collage h2::after{content:none}
.listen-title-art{display:block;position:relative;width:378px;max-width:100%;aspect-ratio:708/190;overflow:hidden}
.listen-title-art img{position:absolute;display:block;width:100%;height:auto;left:0;top:-84%}
.alpha-page .listen-collage::before,.alpha-page .listen-collage::after,.alpha-page .listen-collage .big-letter::before,.alpha-page .listen-collage .big-letter::after{content:none}
.listen-collage .big-letter{display:table;position:relative;margin:16px auto;font-size:110px;text-shadow:2px 2px #fff5}
.listen-collage .big-letter::before,.listen-collage .big-letter::after{content:"";position:absolute;top:22%;width:28px;height:56%;background:linear-gradient(25deg,transparent 40%,#e7ba38 43% 57%,transparent 60%) top/100% 30% no-repeat,linear-gradient(#e7ba38,#e7ba38) center/80% 6px no-repeat,linear-gradient(-25deg,transparent 40%,#e7ba38 43% 57%,transparent 60%) bottom/100% 30% no-repeat}
.listen-collage .big-letter::before{left:-40px}.listen-collage .big-letter::after{right:-40px;transform:scaleX(-1)}
.listen-collage .options{max-width:580px;gap:10px;margin:20px auto}
.listen-collage .options button{border:3px double #627d8c;background:#f2e8d2;box-shadow:3px 4px #173e66;padding:12px}
.listen-collage .feedback{position:relative;background:#ead39b}
@media(max-width:600px){.listen-collage{padding:14px 12px 65px}.listen-collage h2{font-size:28px}.listen-collage::before{width:95px;height:150px}}
.alpha-hero .alphabet-image-title{margin:0;line-height:0;width:80%}
.alpha-hero .alphabet-image-title img{display:block;width:100%;height:auto;max-width:100%;filter:none;transform:none}
.alpha-hero .alphabet-collage-title{font-weight:700;line-height:1;letter-spacing:-2px;isolation:isolate}
.alpha-hero .alphabet-collage-title .title-the{display:table;position:relative;margin:4px 0 6px;padding:4px 20px 12px;background:#d98b9a;transform:rotate(-5deg);box-shadow:2px 3px 0 #74634a30}
.alpha-hero .title-the::before{content:"";position:absolute;width:42%;height:24px;left:40%;top:-14px;background:#cdb68dcc;transform:rotate(2deg);clip-path:polygon(1% 8%,100% 0,96% 96%,0 100%)}
.alpha-hero .title-the::after{content:"";position:absolute;right:-40px;top:24%;width:30px;height:46%;background:linear-gradient(130deg,transparent 42%,#103e70 44% 53%,transparent 55%) top/100% 33% no-repeat,linear-gradient(160deg,transparent 42%,#103e70 44% 53%,transparent 55%) center/100% 33% no-repeat,linear-gradient(20deg,transparent 42%,#103e70 44% 53%,transparent 55%) bottom/100% 33% no-repeat}
.alpha-hero .alphabet-collage-title .title-alphabet{display:table;position:relative;padding:0 10px 12px;background:#f3e9d1;box-shadow:2px 3px 0 #74634a30;font-size:clamp(46px,7.8vw,106px);transform:rotate(-1deg)}
.alpha-hero .title-alphabet::after{content:"";position:absolute;left:15%;right:5%;bottom:3px;border-bottom:4px solid #d4788d;transform:rotate(.5deg)}
.alpha-hero h2{font-weight:700;margin-top:16px}
@media(max-width:750px){.alpha-hero .alphabet-collage-title .title-alphabet{font-size:clamp(40px,10vw,75px)}}
.alpha-paper footer{display:grid;grid-template-columns:1fr auto 1fr}
.alpha-paper footer>p{grid-column:2;text-align:center;justify-self:center}
.alpha-paper footer>.stamp{justify-self:start}
.alpha-paper footer>.world{justify-self:end}
.alpha-paper footer>small{grid-column:1 / -1}
.options .selected-audio{outline:3px solid var(--blue);outline-offset:2px;background:var(--yellow)}
#confirm-choice[hidden]{display:none}
.alpha-paper footer>small{display:block;flex:0 0 100%;width:100%;text-align:center;margin:0 auto;letter-spacing:normal}
.alpha-nav{height:88px;padding:0;justify-content:flex-start;gap:clamp(20px,3vw,54px);background:transparent;color:#f0e5cc}
.alpha-nav .brand img{display:block;width:auto;height:78px}
.alpha-nav nav{gap:clamp(15px,2.5vw,39px);font:600 13px 'DM Mono',monospace}
.alpha-nav nav a{color:#f0e5cc}
.alpha-nav nav .active{background:#d75d81;color:#201a18;padding:10px 18px}
.alpha-motto{margin-left:auto;font:16px/.9 'Permanent Marker',cursive;transform:rotate(-5deg);text-align:center}
.alpha-page{max-width:1300px;margin:0 auto 28px;box-shadow:0 15px 25px #080807}
.alpha-hero{margin:0}
.hear-type-image-title{display:block;width:378px;max-width:100%;height:auto;margin:0 auto}
.practice h2.spelling-image-title{display:table;position:relative;margin-left:auto;margin-right:auto;line-height:0;padding:0}
.spelling-image-title span{display:block;visibility:hidden;line-height:0;height:0}
.spelling-image-title img{display:block;width:378px;height:auto;max-width:100%}
.alphabet-good-job,.alphabet-almost-there,.alphabet-try-again{display:block;width:min(320px,100%);height:auto;margin:0 0 10px}
.alpha-paper,.alpha-hero{background-color:#e9dfc7}
@media(max-width:780px){body{padding:0 10px}.alpha-nav{height:auto;min-height:74px;padding:8px 0;flex-wrap:nowrap}.alpha-nav .brand img{height:58px}.alpha-nav nav{display:none}.alpha-motto{font-size:12px}.alpha-hero{margin:0}}