/* Arabic studios share the main site's cards, type, controls and navigation. */
.letters-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start}
.letters-setup{padding:22px}.letters-setup h2{font-size:1.4rem}.letters-setup p{margin:12px 0;color:#486176;font-weight:700}
.letters-postcard{height:175px;position:relative;overflow:hidden;border-radius:20px;margin-bottom:22px;border:2px solid #b7dceb;background:#d2f4ff}
.letters-postcard img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block}.letters-postcard::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#cde8d133);pointer-events:none}
.postcard-bubbles{position:absolute;inset:15px 25px;display:flex;align-items:center;justify-content:space-around;gap:15px;z-index:1}
.postcard-bubbles span{display:grid;place-items:center;width:76px;height:88px;border:3px solid white;border-radius:26px;background:#fffffff2;box-shadow:0 5px 0 #7c3aed33;font:700 58px/1.5 Amiri;color:#6d28d9;transform:rotate(-6deg)}
.postcard-bubbles span:nth-child(2){transform:rotate(6deg) translateY(-12px);color:#0369a1}.postcard-bubbles span:nth-child(3){color:#047857}
.letters-select{display:block;width:100%;min-height:48px;border:2px solid #b9d8ed;border-radius:14px;padding:10px 12px;background:white;color:#173653;font:800 .95rem Nunito;margin:8px 0 16px}
.letters-setup label{font-weight:900;font-size:.9rem}.letters-setup #startLetters{width:100%;margin-top:15px}
.letters-setup .practice-note{font-size:.8rem;margin-bottom:0}.garden-preview{display:flex;gap:8px;justify-content:space-between;margin:14px 0;direction:rtl}
.garden-preview span{flex:1;min-width:0;font:700 37px/1.6 Amiri;text-align:center;background:#f3edff;border:1px solid #c4b5fd;border-radius:12px;color:#5b21b6}
.letters-journey{padding:20px}.letters-journey h2{font-size:1.25rem;margin-bottom:12px}.letters-journey p{margin:9px 0}.letters-journey .practice-note{font-size:.82rem}
.discovery-alphabet{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:14px 0;direction:rtl}
.discovery-alphabet>span{font:700 24px/1.5 Amiri;text-align:center;border:1px solid #cbddec;border-radius:9px;background:#f8fafc;color:#486176;position:relative}
.discovery-alphabet .discovered{background:#d1fae5;border-color:#059669;color:#065f46}.discovery-alphabet .discovered::after{content:'✓';position:absolute;right:0;bottom:-3px;font:900 9px Nunito}
.letters-stops{display:grid;gap:10px;margin-top:18px}.letters-stop{display:block;border:2px solid #c8e5ef;border-radius:15px;padding:12px;color:#075985;text-decoration:none;background:#f0f9ff;font-weight:900;min-height:65px}
.letters-stop span{display:block;font-size:.78rem;font-weight:700;color:#486176;margin-top:4px}.letters-stop:hover{background:#e0f2fe}
.letters-session{max-width:780px;margin:auto}.letters-session:focus{outline:0}.letters-session .practice-card{padding:20px}
.letters-roundline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem;font-weight:900;margin-bottom:15px}.letters-roundline strong{font-size:1rem;color:#5b21b6}.letters-roundline .session-title{padding:7px 10px;border:1px solid #c4b5fd;border-radius:12px;background:#f5f3ff;color:#5b21b6}
.letters-target{display:flex;align-items:center;justify-content:center;gap:25px;background:linear-gradient(120deg,#f3edff,#e7f8ff);border:2px solid #c4b5fd;border-radius:23px;padding:10px 18px;margin:15px 0}
.letters-target .target-glyph{font:700 96px/1.45 Amiri;color:#5b21b6;min-width:82px;text-align:center;flex:0 0 auto}
.letters-target h2{font-size:1.35rem}.letters-target p{margin-top:6px;font-size:.85rem;color:#486176;font-weight:700}
.letter-field{position:relative}.letter-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding:12px 0}
.practice .letter-option{min-width:0;min-height:130px;display:flex;flex-direction:column;justify-content:center;position:relative;border-radius:23px;padding:9px;background:#fff;box-shadow:0 5px 0 #cbdff0;border:3px solid #8eb8d6;color:#173653;overflow:visible}
.practice .letter-option:disabled{opacity:1}.letter-option .option-glyph{font:700 62px/1.6 Amiri;color:#4c1d95}
.letter-option .option-name{font-size:.86rem;color:#173653;font-weight:900}.letter-option .option-key{position:absolute;left:7px;top:5px;font:900 10px/1.2 Nunito;color:#486176}
.practice .letter-option.answer{background:#ecfdf5;border:3px solid #059669;box-shadow:0 5px 0 #a7dfbf}
.letters-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin:16px 0 10px}.letters-controls .practice-actions{gap:8px}
.letters-notice{font-size:.88rem;min-height:44px;font-weight:800;color:#486176;margin:10px 0!important}.letter-hint{padding:14px 17px;background:#fff9df;border:2px solid #f6da85;border-radius:15px;font-size:.92rem;font-weight:800;margin:14px 0!important}
.letters-voice{font-size:.77rem!important;color:#486176;min-height:22px}.letters-pause{border:2px solid #edcb75;border-radius:17px;background:#fff7d6;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;font-weight:900}
.letters-feedback{padding:20px;border:2px solid #c4b5fd;background:#f5f3ff;border-radius:23px;margin:18px 0}
.letters-feedback h3{font-size:1.2rem;color:#4c1d95;margin:0 0 12px}.feedback-body{display:flex;gap:17px;align-items:center}
.feedback-glyph{font:700 66px/1.7 Amiri;text-align:center;min-width:72px;border-radius:17px;background:#fff;color:#5b21b6}.letters-feedback p{font-size:.92rem;font-weight:800}
.letters-feedback .practice-note{font-size:.8rem;margin:14px 0}.letters-feedback .practice-actions{margin-top:16px;justify-content:space-between}
.letters-end{text-align:center;padding:26px;max-width:780px;margin:auto}.letters-end h2{margin:12px 0}.letters-end>p{margin:12px 0}.letters-end .end-icon{font-size:48px}
.end-letter-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:20px 0}
.end-letter-list li{min-width:0;display:flex;flex-direction:column;background:#effbf5;border:2px solid #b9e1cd;border-radius:17px;padding:10px 4px}
.end-letter-list [lang=ar]{font:700 47px/1.7 Amiri;color:#065f46}.end-letter-list li>span:nth-child(2){font-size:.79rem;font-weight:900;color:#173653}.end-letter-list small{font-size:.65rem;color:#486176;font-weight:800;margin-top:4px}
.letters-end .practice-actions{justify-content:center;margin-top:20px}.letters-review{padding:16px;border:2px solid #c4b5fd;background:#f5f3ff;border-radius:17px;font-size:.9rem;font-weight:800}
.letters-help{padding:18px 22px;margin-top:22px}.letters-help summary{display:flex;align-items:center;min-height:44px;font-weight:900;cursor:pointer}.letters-help p{margin:12px 0}.letters-help a{color:#075985;font-weight:900}
.letters-blitz .letter-field{--bubble:96px;height:300px;border:3px solid #88cddd;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 20% 15%,#fff 0 5%,transparent 5.5%),radial-gradient(ellipse at 77% 35%,#fff9 0 7%,transparent 7.5%),linear-gradient(#d0f2ff 0%,#edfcff 77%,#c3e7b5 77%,#a2d7b2 100%)}
.letters-blitz .letter-field::after{content:'✿  ·  ✿  ·  ✿';position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:27px;color:#8a5592;letter-spacing:25px;pointer-events:none}
.letters-blitz .letter-choices{position:absolute;inset:12px 0 35px;display:block;padding:0}
.letters-blitz .letter-option{position:absolute;top:calc(35% - var(--bubble)/2);width:var(--bubble);height:var(--bubble);min-height:0;padding:0;border-radius:50%;transform:translateX(-50%);border-width:3px;box-shadow:inset -5px -6px #00000009,0 5px 0 #4586a533;touch-action:manipulation;z-index:1}
.letters-blitz .tone-0{left:16.666%;background:#fff6d6;border-color:#ae771b}.letters-blitz .tone-1{left:50%;background:#f3e8ff;border-color:#9d74c1}.letters-blitz .tone-2{left:83.333%;background:#d9fbef;border-color:#4c9b83}
.letters-blitz .letter-option .option-glyph{font-size:58px;line-height:1.6;color:#173653}.letters-blitz .letter-option .option-key{left:calc(50% - 3px);top:4px;font-size:10px}
.letters-blitz [data-pace=glide] .letter-option{top:calc(var(--fall,0)*(100% - var(--bubble)))}
.letters-blitz [data-state=paused] .letter-option{visibility:hidden}
.letters-blitz [data-pace=gentle][data-state=playing] .option-glyph{animation:letterBob 3s ease-in-out infinite}
.letters-timer{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:.8rem;font-weight:900;color:#486176}.letters-timer progress{flex:1}
.letters-blitz .letter-option .option-glyph{font-size:50px;line-height:1.45;transform:translateY(3px)}
.letters-blitz .letter-option .option-key{left:7px;top:7px}
.movement-spark{animation:letterSpark .45s ease}
.letters-blitz .letter-option.answer .option-glyph{animation:letterPop .45s ease}
.letters-blitz .letter-option.answer::after{content:'✦';position:absolute;right:-8px;top:-8px;color:#6d28d9;font:900 25px Nunito;pointer-events:none;animation:letterTwinkle .6s ease both}
@keyframes letterPop{40%{transform:translateY(3px) scale(1.14)}100%{transform:translateY(3px) scale(1)}}
@keyframes letterTwinkle{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.8)}}
@keyframes letterBob{50%{transform:translateY(-3px)}}@keyframes letterSpark{50%{transform:scale(1.015)}}
@media(max-width:760px){.letters-layout{grid-template-columns:1fr}.letters-setup{padding:18px}.letters-postcard{height:145px}.letters-journey{padding:18px}.letters-stops{grid-template-columns:repeat(3,minmax(0,1fr))}.letters-stop{font-size:.83rem;padding:10px}.discovery-alphabet{grid-template-columns:repeat(14,1fr)}.letters-session .practice-card{padding:16px}.letters-target{gap:12px;padding:7px 12px}.letters-target .target-glyph{font-size:80px;min-width:66px}.letters-target h2{font-size:1.15rem}.letters-target p{font-size:.76rem}.letters-blitz .letter-field{--bubble:78px;height:245px}.letters-blitz .letter-option .option-glyph{font-size:50px}.end-letter-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}}
@media(max-width:480px){.letters-stops{grid-template-columns:1fr}.discovery-alphabet{grid-template-columns:repeat(7,1fr)}.letters-session .practice-card{padding:12px}.letter-choices{gap:9px}.practice .letter-option{border-radius:18px;min-height:116px}.letter-option .option-glyph{font-size:52px}.letter-option .option-name{font-size:.75rem}.letters-controls{gap:9px}.letters-controls button{padding:10px 12px;font-size:.83rem}.letters-blitz .letter-option{min-height:0;border-radius:50%}.letters-blitz .letter-field{--bubble:66px;height:220px}.letters-blitz .letter-option .option-glyph{font-size:46px}.letters-blitz .letter-field::after{font-size:22px;letter-spacing:17px}.letters-target .target-glyph{font-size:72px;min-width:60px}.letters-target h2{font-size:1.05rem}.letters-feedback{padding:15px}.feedback-body{gap:12px}.feedback-glyph{font-size:52px;min-width:57px}.letters-feedback p{font-size:.85rem}.letters-feedback .practice-actions button{width:100%}.letters-end{padding:18px}.end-letter-list{grid-template-columns:repeat(3,minmax(0,1fr))}.letters-pause{flex-wrap:wrap}.garden-preview{gap:5px}.garden-preview span{font-size:31px}.postcard-bubbles span{width:65px;height:76px;font-size:48px}.postcard-bubbles{inset:15px;gap:10px}.letters-select{font-size:.85rem}.letters-roundline{gap:8px}}
@media(prefers-reduced-motion:reduce){.letters-blitz .option-glyph,.movement-spark{animation:none!important}}
html[data-sg-calm=true] .letters-blitz .option-glyph,html[data-sg-calm=true] .movement-spark{animation:none!important}
@media(prefers-reduced-motion:reduce){.letters-blitz .letter-option.answer::after{display:none}}
html[data-sg-calm=true] .letters-blitz .letter-option.answer::after{display:none}
/* Leave generous space above and below the ink, including vowel marks. */
@media(max-width:760px){.letters-blitz .letter-field{--bubble:78px}.letters-blitz .letter-option .option-glyph{font-size:42px;line-height:1.45}}
@media(max-width:480px){.letters-blitz .letter-field{--bubble:74px}.letters-blitz .letter-option .option-glyph{font-size:40px;line-height:1.45}}