@font-face{font-family:Lesedruckschrift;src:url('lesedruckschrift.woff');font-display:swap}
*{box-sizing:border-box}[hidden]{display:none!important}.wrap{width:min(940px,calc(100% - 32px));margin:auto}a{color:inherit}button{font:inherit;color:#234e45;background:#fffdf8;border:1px solid #c9d6c7;padding:12px 20px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button.primary{padding:13px 30px;font-weight:650}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.eyebrow{font-size:14px;color:#84702e;margin:0 0 5px}.page-heading h1{font-size:36px;margin:0}.sound-option{display:flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}.sound-option input{width:22px;height:22px}
.funke-guide{display:flex;align-items:center;gap:20px;max-width:720px;margin:12px auto 0}.funke-guide>img{width:150px;height:auto;flex:none}.guide-bubble{padding:27px 30px 27px 40px;background:url('funke-sprechblase-v1.svg') center/100% 100% no-repeat;flex:1}.guide-bubble p{font:25px/1.4 Lesedruckschrift,system-ui,sans-serif;margin:0}.audio-feedback{min-height:1.4em;margin:4px 0 12px;text-align:center;font-size:14px;color:#536c61}
.lesson-panel{background:#fffdf8;border:2px solid #e7d4a4;border-radius:27px;padding:25px;text-align:center;box-shadow:0 5px 0 #cfaa5312}.meet-letters{font:112px/1.2 Lesedruckschrift,system-ui,sans-serif;letter-spacing:.12em;color:#8a5917;margin:0 0 12px}.listen{background:#fff0be;white-space:nowrap}.word-example{display:flex;align-items:center;justify-content:center;gap:15px;margin:20px auto 0;padding:10px 20px;background:#f6f9f0;min-width:205px}.word-example img{width:85px;height:65px;object-fit:contain}.word-example>span{font:24px Lesedruckschrift,system-ui,sans-serif}.small-note{color:#536c61;margin:18px 0}.round-header{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#61736c;font-size:14px}.round-header p{margin:0}progress{width:140px;height:10px;accent-color:#b98b2d}#taskTitle{font-size:28px;margin:18px 0 12px}.target-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:22px}.target-example{font:50px/1.1 Lesedruckschrift,system-ui,sans-serif;color:#8a5917;letter-spacing:.06em}
.letter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:600px;margin:0 auto}.exercise-page .letter-tile{position:relative;display:grid;place-items:center;min-height:112px;border:2px solid #cbd8c7;background:#fffdf8;border-radius:18px;color:#234e45;font:76px/1.2 Lesedruckschrift,system-ui,sans-serif;padding:10px}.exercise-page .letter-tile:disabled{opacity:1;cursor:default}.exercise-page .letter-tile[aria-pressed=true]{background:#e3f0e7;border-color:#3f815c;color:#234e45}.letter-tile[aria-pressed=true]::after{content:'✓';position:absolute;right:9px;top:5px;color:#3f815c;font:22px system-ui,sans-serif}.feedback{font-size:19px;line-height:1.4;min-height:2.8em;display:grid;place-items:center;margin:18px 0 0}.found-label{font-size:14px;color:#61736c;margin:0 0 16px}.done-mark{display:inline-grid;place-items:center;background:#e3f0e7;color:#3f815c;border:2px solid #bfd9bd;border-radius:50%;width:65px;height:65px;font-size:40px}.completion h2{font-size:30px}.completion .meet-letters{font-size:88px}.completion-actions{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:25px}.next-link{padding:12px 18px;border:1px solid #c9d6c7;border-radius:13px;text-decoration:none;background:#f0f7fb}footer{text-align:center;padding:25px 0;font-size:13px;color:#61736c}
@media(max-width:620px){.wrap{width:calc(100% - 26px)}.page-heading h1{font-size:29px}.eyebrow{font-size:12px}.funke-guide{gap:6px;margin-top:14px}.funke-guide>img{width:110px}.guide-bubble{padding:22px 16px 22px 25px}.guide-bubble p{font-size:21px}.lesson-panel{padding:18px 13px}.meet-letters{font-size:95px}.letter-grid{gap:10px}.exercise-page .letter-tile{min-height:94px;font-size:64px;border-radius:15px;padding:7px}.feedback{font-size:17px}.round-header{font-size:12px}.round-header progress{width:100px}.target-row{gap:13px}#taskTitle{font-size:25px}.target-example{font-size:43px}.target-row button{font-size:14px;padding:10px 12px}.completion h2{font-size:26px}}
@media(max-width:360px){.funke-guide>img{width:85px}.guide-bubble p{font-size:19px}.sound-option{font-size:12px}.exercise-page .letter-tile{font-size:58px;min-height:86px}}
.meet-letters[data-multi-letter=true]{font-size:clamp(38px,9vw,70px);letter-spacing:.02em}.target-example[data-multi-letter=true]{font-size:30px}.exercise-page .letter-grid[data-multi-letter=true] .letter-tile{font-size:48px}
@media(max-width:620px){.exercise-page .letter-grid[data-multi-letter=true] .letter-tile{font-size:34px}}
/* A letters float in a pineapple silhouette; other letter exercises keep their layout. */
.letter-grid.pineapple-cloud{display:block;position:relative;width:min(100%,420px);max-width:420px;aspect-ratio:420/580;background:url('ananas-buchstabenwolke.svg') center/100% 100% no-repeat;margin:0 auto}
.exercise-page .pineapple-cloud .letter-tile{position:absolute;display:grid;place-items:center;left:29%;top:44%;width:25%;min-height:0;height:17%;padding:0;border:0;border-radius:48%;background:transparent;color:#234e45;font-size:clamp(48px,11vw,76px);transform:translate(-50%,-50%) rotate(-7deg);box-shadow:none}
.exercise-page .pineapple-cloud .letter-tile:nth-child(2){left:68%;top:45%;transform:translate(-50%,-50%) rotate(5deg)}
.exercise-page .pineapple-cloud .letter-tile:nth-child(3){left:34%;top:63%;transform:translate(-50%,-50%) rotate(3deg)}
.exercise-page .pineapple-cloud .letter-tile:nth-child(4){left:68%;top:64%;transform:translate(-50%,-50%) rotate(-5deg)}
.exercise-page .pineapple-cloud .letter-tile:nth-child(5){left:30%;top:82%;transform:translate(-50%,-50%) rotate(-4deg)}
.exercise-page .pineapple-cloud .letter-tile:nth-child(6){left:65%;top:82%;transform:translate(-50%,-50%) rotate(6deg)}
.exercise-page .pineapple-cloud:has(.letter-tile:nth-child(3):last-child) .letter-tile:nth-child(3){left:49%;top:73%}
.exercise-page .pineapple-cloud .letter-tile[aria-pressed=true]{background:#d9eac9;border:2px dashed #56834a;color:#234e45}
.exercise-page .pineapple-cloud .letter-tile[aria-pressed=true]::after{right:-4px;top:-5px;background:#fffdf5;border-radius:50%;font-size:22px}
.exercise-page .pineapple-cloud .letter-tile:focus-visible{outline:3px solid #286ac2;outline-offset:4px}

.funke-guide>.guide-funke{display:block;width:150px;flex:none;background:transparent;border:0;padding:0;border-radius:18px;line-height:0}
.guide-funke>img{display:block;width:100%;height:auto}.guide-funke:focus-visible{outline:3px solid #286ac2;outline-offset:5px}.guide-funke[aria-busy=true]{filter:drop-shadow(0 0 6px #eac05a)}
@media(max-width:620px){.funke-guide>.guide-funke{width:110px}}
@media(max-width:360px){.funke-guide>.guide-funke{width:85px}}
/* E and e float inside an elephant face; the ears and trunk stay clear. */
.letter-grid.elephant-cloud{display:block;position:relative;width:min(100%,600px);max-width:600px;aspect-ratio:600/490;background:url('elefant-buchstabenwolke.svg') center/100% 100% no-repeat;margin:12px auto}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile{position:absolute;display:grid;place-items:center;left:36%;top:32%;width:20%;height:20%;min-width:44px;min-height:44px;padding:0;border:0;border-radius:48%;background:transparent;color:#234e45;font-size:clamp(38px,9vw,70px);transform:translate(-50%,-50%) rotate(-6deg);box-shadow:none}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile:nth-child(2){left:62%;top:32%;transform:translate(-50%,-50%) rotate(5deg)}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile:nth-child(3){left:36%;top:50%;transform:translate(-50%,-50%) rotate(3deg)}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile:nth-child(4){left:62%;top:50%;transform:translate(-50%,-50%) rotate(-4deg)}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile:nth-child(5){left:36%;top:68%;transform:translate(-50%,-50%) rotate(-4deg)}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile:nth-child(6){left:62%;top:68%;transform:translate(-50%,-50%) rotate(4deg)}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud):has(.letter-tile:nth-child(3):last-child) .letter-tile:nth-child(3){left:49%;top:59%}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile[aria-pressed=true]{background:#d9eac9;border:2px dashed #56834a;color:#234e45}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile[aria-pressed=true]::after{right:-4px;top:-5px;background:#fffdf5;border-radius:50%;font-size:22px}
.exercise-page :is(.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile:focus-visible{outline:3px solid #286ac2;outline-offset:4px}

.letter-grid.island-cloud{display:block;position:relative;width:min(100%,600px);max-width:600px;aspect-ratio:600/490;background:url('insel-buchstabenwolke-v1.svg') center/100% 100% no-repeat;margin:12px auto}
.exercise-page .island-cloud .letter-tile{left:28%;top:35%}
.exercise-page .island-cloud .letter-tile:nth-child(2){left:54%;top:35%}
.exercise-page .island-cloud .letter-tile:nth-child(3){left:28%;top:55%}
.exercise-page .island-cloud .letter-tile:nth-child(4){left:54%;top:55%}
.exercise-page .island-cloud .letter-tile:nth-child(5){left:28%;top:75%}
.exercise-page .island-cloud .letter-tile:nth-child(6){left:54%;top:75%}
.exercise-page .island-cloud:has(.letter-tile:nth-child(3):last-child) .letter-tile:nth-child(3){left:41%;top:65%}

.letter-grid.otter-cloud{display:block;position:relative;width:min(100%,500px);max-width:500px;aspect-ratio:1;background:url('otter-buchstabenwolke.svg') center/100% 100% no-repeat;margin:12px auto}
.exercise-page .otter-cloud .letter-tile{left:36%;top:54%;height:15%;width:22%}
.exercise-page .otter-cloud .letter-tile:nth-child(2){left:64%;top:54%}
.exercise-page .otter-cloud .letter-tile:nth-child(3){left:36%;top:69%}
.exercise-page .otter-cloud .letter-tile:nth-child(4){left:64%;top:69%}
.exercise-page .otter-cloud .letter-tile:nth-child(5){left:36%;top:84%}
.exercise-page .otter-cloud .letter-tile:nth-child(6){left:64%;top:84%}
.exercise-page .otter-cloud:has(.letter-tile:nth-child(3):last-child) .letter-tile:nth-child(3){left:50%;top:76%}

.letter-grid.undershirt-cloud{display:block;position:relative;width:min(100%,450px);max-width:450px;aspect-ratio:500/560;background:url('unterhemd-buchstabenwolke.svg') center/100% 100% no-repeat;margin:12px auto}
.exercise-page .undershirt-cloud .letter-tile{left:33%;top:38%;height:17%;width:24%}
.exercise-page .undershirt-cloud .letter-tile:nth-child(2){left:67%;top:38%}
.exercise-page .undershirt-cloud .letter-tile:nth-child(3){left:33%;top:59%}
.exercise-page .undershirt-cloud .letter-tile:nth-child(4){left:67%;top:59%}
.exercise-page .undershirt-cloud .letter-tile:nth-child(5){left:33%;top:80%}
.exercise-page .undershirt-cloud .letter-tile:nth-child(6){left:67%;top:80%}
.exercise-page .undershirt-cloud:has(.letter-tile:nth-child(3):last-child) .letter-tile:nth-child(3){left:50%;top:69%}
/* Override the shared rectangular button rule only inside the five word outlines. */
body.exercise-page #letterGrid:is(.pineapple-cloud,.elephant-cloud,.island-cloud,.otter-cloud,.undershirt-cloud) .letter-tile{border-radius:48%;min-height:44px;line-height:1.2}

/* The vowel pair itself is the listening control, without a separate label or box. */
body.exercise-page #hearTaskA.letter-listen{display:inline-flex;align-items:center;justify-content:center;min-width:120px;min-height:64px;padding:8px 14px;background:transparent;border:0;border-radius:0;box-shadow:none;line-height:1.2}
body.exercise-page #hearTaskA.letter-listen:focus-visible{outline:3px solid #286ac2;outline-offset:4px;border-radius:12px}
body.exercise-page #hearTaskA.letter-listen:active .target-example{color:#234e45}
/* More room inside the elephant head, including the six-letter rounds. */
.letter-grid.elephant-cloud{aspect-ratio:1;background-image:url('elefant-buchstabenwolke-v2.svg')}
.exercise-page .elephant-cloud .letter-tile{left:40%;top:29%;width:18%;height:15%;font-size:clamp(30px,8vw,60px)}
.exercise-page .elephant-cloud .letter-tile:nth-child(2){left:60%;top:29%}
.exercise-page .elephant-cloud .letter-tile:nth-child(3){left:40%;top:45%}
.exercise-page .elephant-cloud .letter-tile:nth-child(4){left:60%;top:45%}
.exercise-page .elephant-cloud .letter-tile:nth-child(5){left:40%;top:61%}
.exercise-page .elephant-cloud .letter-tile:nth-child(6){left:60%;top:61%}
.exercise-page .elephant-cloud:has(.letter-tile:nth-child(3):last-child) .letter-tile:nth-child(3){left:50%;top:53%}
/* Keep all six letters inside the broader hedgehog body. */
.letter-grid.island-cloud{aspect-ratio:600/520;background-image:url('insel-buchstabenwolke-v1.svg')}
.exercise-page .island-cloud .letter-tile{left:30%;top:29%;width:20%;height:16%;font-size:clamp(30px,8vw,58px)}
.exercise-page .island-cloud .letter-tile:nth-child(2){left:54%;top:29%}
.exercise-page .island-cloud .letter-tile:nth-child(3){left:30%;top:48%}
.exercise-page .island-cloud .letter-tile:nth-child(4){left:54%;top:48%}
.exercise-page .island-cloud .letter-tile:nth-child(5){left:30%;top:67%}
.exercise-page .island-cloud .letter-tile:nth-child(6){left:54%;top:67%}
.exercise-page .island-cloud:has(.letter-tile:nth-child(3):last-child) .letter-tile:nth-child(3){left:42%;top:59%}
/* The mouth is a masked portion of the existing Funke artwork, never a replacement face. */
.guide-funke{position:relative}
.guide-funke>.funke-mouth{position:absolute;inset:0;opacity:0;pointer-events:none;mask-image:radial-gradient(ellipse 6% 4% at 53.5% 57.1%,#000 85%,transparent 100%)}
.guide-funke[data-mouth-open=true]>.funke-mouth{opacity:1}
body[data-vowel-lesson=true] #adultHelp{display:none}
@media(min-width:700px){
 body[data-vowel-lesson=true] .wrap{width:min(1160px,calc(100% - 32px))}
 body[data-vowel-lesson=true] header{display:flex;margin:0 0 10px;padding:6px 0;justify-content:space-between}
 body[data-vowel-lesson=true] a.site-logo{width:230px;flex-basis:230px}
 body[data-vowel-lesson=true] main{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr);gap:6px 22px;padding:14px}
 body[data-vowel-lesson=true] .page-heading{grid-column:1;justify-content:flex-end}
 body[data-vowel-lesson=true] .funke-guide{grid-column:1;flex-direction:column;gap:4px;margin:0;align-self:start}
 body[data-vowel-lesson=true] .funke-guide>.guide-funke{width:clamp(110px,20vh,190px)}
 body[data-vowel-lesson=true] .guide-bubble{width:100%;padding:20px 22px 20px 30px;flex:none}
 body[data-vowel-lesson=true] .guide-bubble p{font-size:clamp(19px,2.6vh,27px)}
 body[data-vowel-lesson=true] .audio-feedback{grid-column:1;margin:0;min-height:1.4em;font-size:12px}
 body[data-vowel-lesson=true] #practice{grid-column:2;grid-row:1/span 5;padding:12px;--shape-height:clamp(280px,calc(100svh - 355px),600px)}
 body[data-vowel-lesson=true] .target-row{margin:0}
 body[data-vowel-lesson=true] #letterGrid{max-width:100%;margin:0 auto}
 body[data-vowel-lesson=true] .pineapple-cloud{width:calc(var(--shape-height)*.72414)}
 body[data-vowel-lesson=true] :is(.elephant-cloud,.otter-cloud){width:var(--shape-height)}
 body[data-vowel-lesson=true] .island-cloud{width:calc(var(--shape-height)*1.15385)}
 body[data-vowel-lesson=true] .undershirt-cloud{width:calc(var(--shape-height)*.89286)}
 body[data-vowel-lesson=true] #letterGrid .letter-tile{font-size:clamp(30px,7vh,64px)}
 body[data-vowel-lesson=true] .feedback{margin:3px 0 0;min-height:1.5em;font-size:17px}
 body[data-vowel-lesson=true] .found-label{margin:0;font-size:13px}
 body[data-vowel-lesson=true] footer{padding:8px 0}
}
.vowel-examples{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin:8px auto 14px;width:min(100%,340px)}
.exercise-page .vowel-picture{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 12px;min-height:90px;background:#fffdf8;border:1px solid #d9d6bc}
.vowel-picture img{width:125px;height:95px;object-fit:contain}
.vowel-picture span{font:23px Lesedruckschrift,system-ui,sans-serif}
.vowel-picture:active{transform:scale(.98)}
@media(min-width:700px){
 body[data-vowel-lesson=true] .vowel-examples{grid-column:1;align-self:start;margin:0 auto;gap:5px}
 body[data-vowel-lesson=true] .vowel-picture{min-height:70px;padding:3px 10px}
 body[data-vowel-lesson=true] .vowel-picture img{width:95px;height:clamp(55px,10vh,110px)}
 body[data-vowel-lesson=true] .vowel-picture span{font-size:21px}
 body[data-vowel-lesson=true] .funke-guide>.guide-funke{width:clamp(90px,16vh,160px)}
}
/* Vowel companions sit together; original moon pixels and the existing speech-bubble style are retained. */
.vowel-guides{display:contents}
body[data-vowel-lesson=true] .vowel-guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
body[data-vowel-lesson=true] .vowel-guides .funke-guide,.vowel-moon-guide{display:flex;flex-direction:column;align-items:center;gap:6px;margin:8px 0 0;min-width:0;grid-column:auto}
body[data-vowel-lesson=true] .vowel-guides .guide-funke{width:100px;height:auto}
body[data-vowel-lesson=true] .vowel-guides .guide-bubble{width:100%;padding:23px 15px 22px 21px}
body[data-vowel-lesson=true] .vowel-guides .guide-bubble p{font-size:18px;line-height:1.35}
.vowel-moon-figure{--moon-height:95px;position:relative;flex:none;width:calc(var(--moon-height)*1.11);height:var(--moon-height);transform:scaleX(-1)}
.vowel-moon-original,.vowel-moon-mouth{position:absolute;left:calc(var(--moon-height)*-.03);top:calc(var(--moon-height)*.08);width:calc(var(--moon-height)*1.88);height:calc(var(--moon-height)*.94);max-width:none;pointer-events:none;clip-path:polygon(0 0,58.5% 0,58.5% 66%,53% 66%,53% 100%,0 100%)}
.vowel-moon-mouth{opacity:0;mask-image:radial-gradient(ellipse 4% 6% at 35.7% 54%,#000 70%,transparent 100%)}
.vowel-moon-figure:has(#vowelMoonListen[data-mouth-open=true]) .vowel-moon-mouth{opacity:1}
.vowel-moon-crown{position:absolute;left:36.5%;top:0;width:27%;height:auto;pointer-events:none;transform:rotate(-9deg)}
body.exercise-page #vowelMoonListen{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;opacity:1;border-radius:48%}
@media(min-width:700px){body[data-vowel-lesson=true] .vowel-guides{grid-column:1;gap:6px}body[data-vowel-lesson=true] .vowel-guides .guide-funke{width:clamp(80px,13vh,125px)}body[data-vowel-lesson=true] .vowel-moon-figure{--moon-height:clamp(76px,12.4vh,119px)}body[data-vowel-lesson=true] .vowel-guides .guide-bubble p{font-size:clamp(16px,2.25vh,20px)}}

/* Six touch targets remain entirely within the island shore. */
.letter-grid.island-cloud{aspect-ratio:600/520}
.exercise-page .island-cloud .letter-tile{left:34%;top:44%;width:20%;height:16%}
.exercise-page .island-cloud .letter-tile:nth-child(2){left:64%;top:44%}
.exercise-page .island-cloud .letter-tile:nth-child(3){left:34%;top:62%}
.exercise-page .island-cloud .letter-tile:nth-child(4){left:64%;top:62%}
.exercise-page .island-cloud .letter-tile:nth-child(5){left:34%;top:80%}
.exercise-page .island-cloud .letter-tile:nth-child(6){left:64%;top:80%}
.exercise-page .island-cloud:has(.letter-tile:nth-child(3):last-child) .letter-tile:nth-child(3){left:49%;top:70%}

/* Consonants use the same free letter clouds as the vowel outlines. */
#letterGrid.consonant-cloud{display:block;position:relative;width:min(100%,520px);max-width:520px;aspect-ratio:1;margin:8px auto;background-position:center;background-size:100% 100%;background-repeat:no-repeat;--left-a:25%;--left-b:53%;--top-a:38%;--top-b:55%;--top-c:72%;--tile-width:22%;--tile-height:17%}
#letterGrid.mouse-cloud{background-image:url('maus-buchstabenwolke.svg');--left-a:29%;--left-b:54%;--top-a:44%;--top-b:61%;--top-c:78%}
#letterGrid.magnifier-cloud{background-image:url('lupe-buchstabenwolke.svg');--left-a:30%;--left-b:58%;--top-a:23%;--top-b:43%;--top-c:63%}
#letterGrid.sofa-cloud{background-image:url('sofa-buchstabenwolke.svg');--left-a:34%;--left-b:66%;--top-a:28%;--top-b:48%;--top-c:68%}
#letterGrid.rhino-cloud{background-image:url('nashorn-buchstabenwolke.svg')}
#letterGrid.fish-cloud{background-image:url('fisch-buchstabenwolke.svg');--left-a:34%;--left-b:60%;--top-a:30%;--top-b:50%;--top-c:70%}
body.exercise-page #letterGrid.consonant-cloud .letter-tile{position:absolute;display:grid;place-items:center;left:var(--left-a);top:var(--top-a);width:var(--tile-width);height:var(--tile-height);min-width:44px;min-height:44px;padding:0;border:0;border-radius:48%;background:transparent;color:#234e45;font-size:clamp(32px,8vw,64px);line-height:1.2;transform:translate(-50%,-50%) rotate(-5deg);box-shadow:none}
body.exercise-page #letterGrid.consonant-cloud .letter-tile:nth-child(2n){left:var(--left-b);transform:translate(-50%,-50%) rotate(4deg)}
body.exercise-page #letterGrid.consonant-cloud .letter-tile:nth-child(n+3){top:var(--top-b)}
body.exercise-page #letterGrid.consonant-cloud .letter-tile:nth-child(n+5){top:var(--top-c)}
body.exercise-page #letterGrid.consonant-cloud:has(.letter-tile:nth-child(3):last-child) .letter-tile:nth-child(3){left:calc((var(--left-a) + var(--left-b))/2);top:var(--top-c)}
body.exercise-page #letterGrid.consonant-cloud .letter-tile[aria-pressed=true]{background:#d9eac9;border:2px dashed #56834a}
body.exercise-page #letterGrid.consonant-cloud .letter-tile[aria-pressed=true]::after{right:-4px;top:-5px;background:#fffdf5;border-radius:50%;font-size:22px}
body.exercise-page #letterGrid.consonant-cloud .letter-tile:focus-visible{outline:3px solid #286ac2;outline-offset:4px}
@media(min-width:700px){
 body[data-consonant-outline=true]:has(#practice:not([hidden])) .wrap{width:min(1160px,calc(100% - 32px))}
 body[data-consonant-outline=true]:has(#practice:not([hidden])) header{display:flex;margin:0 0 10px;padding:6px 0;justify-content:space-between}
 body[data-consonant-outline=true]:has(#practice:not([hidden])) a.site-logo{width:230px;flex-basis:230px}
 body[data-consonant-outline=true]:has(#practice:not([hidden])) main{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr);gap:6px 22px;padding:14px}
 body[data-consonant-outline=true] .page-heading{grid-column:1}
 body[data-consonant-outline=true] .vowel-guides{display:block;grid-column:1}
 body[data-consonant-outline=true] .funke-guide{flex-direction:column;gap:4px;margin:0}
 body[data-consonant-outline=true] .funke-guide>.guide-funke{width:clamp(100px,18vh,170px)}
 body[data-consonant-outline=true] .guide-bubble{width:100%;padding:20px 22px 20px 30px}
 body[data-consonant-outline=true] .guide-bubble p{font-size:clamp(19px,2.6vh,25px)}
 body[data-consonant-outline=true] .audio-feedback{grid-column:1;margin:0;font-size:12px}
 body[data-consonant-outline=true] #practice{grid-column:2;grid-row:1/span 4;padding:12px}
 body[data-consonant-outline=true] #practice .target-row{margin:0}
 body[data-consonant-outline=true] #letterGrid.consonant-cloud{width:clamp(280px,calc(100svh - 300px),520px);max-width:100%;margin:0 auto}
 body[data-consonant-outline=true] #letterGrid .letter-tile{font-size:clamp(30px,7vh,64px)}
 body[data-consonant-outline=true] .feedback{margin:3px 0 0;min-height:1.5em;font-size:17px}
 body[data-consonant-outline=true] .found-label{margin:0;font-size:13px}
 body[data-consonant-outline=true] #adultHelp{grid-column:1/-1}
 body[data-consonant-outline=true] footer{padding:8px 0}
}

.i-catch-link{display:block;text-align:center;padding:10px 12px;border:2px dashed #c7b37d;border-radius:17px;background:#fff5d8;color:#234e45;text-decoration:none;font-size:17px}.i-catch-link:focus-visible{outline:3px solid #3974ba;outline-offset:4px}

/* The optional I/ie catch game follows the letter-tapping exercise. */
#iCatchLink{margin:12px 0 0}
@media(min-width:700px){body[data-vowel-lesson=true] #iCatchLink{grid-column:2;grid-row:6;margin:0}}