body.guided-reading{margin:0;background:#e7f5fc;color:#244456;font:17px/1.45 system-ui,sans-serif}body.guided-reading *{box-sizing:border-box}.g-header{background:#fffdf7;padding:10px max(16px,calc((100% - 1240px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px}.g-header a{color:inherit;text-decoration:none;font-weight:750}.g-header img{width:32px;height:32px;vertical-align:middle;margin-right:7px}.g-wrap{max-width:1288px;margin:auto;padding:14px 24px 30px}.g-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.g-toolbar h1{font-size:clamp(1.15rem,2.4vw,1.65rem);margin:0}.guided-reading button{font:inherit;font-weight:750;border:3px solid #fff;border-radius:17px;min-height:50px;padding:10px 18px;color:#244456;background:#edf4f9;cursor:pointer}.guided-reading button:focus-visible,.guided-reading a:focus-visible{outline:4px solid #315e82;outline-offset:3px}.guided-reading button:disabled{cursor:default}.g-sheet{position:relative;max-width:1000px;margin:auto;background:#fffdf5;border:4px solid #fff;border-radius:28px;padding:14px 22px 18px;text-align:center}.g-progress{display:flex;gap:14px;align-items:center;color:#647e89;font-size:.8rem}.g-progress progress{flex:1;min-width:0;height:8px;accent-color:#67ae98}.g-progress span{white-space:nowrap}#g-prompt{font-size:clamp(1.1rem,2.6vw,1.45rem);margin:12px 0;line-height:1.3}#g-picture:empty,#g-built:empty,#g-options:empty,#g-feedback:empty,#g-note:empty{display:none}.g-picture-button{display:block;margin:0 auto;padding:0!important;background:transparent!important;border:0!important}.g-picture-button img,#g-picture>img{display:block;width:min(100%,360px);height:clamp(150px,28dvh,250px);object-fit:contain;margin:auto;border-radius:18px}.g-bridge-picture img{height:clamp(120px,22dvh,180px)}#g-scene{font-size:clamp(2rem,6vw,3rem);font-weight:800;margin:10px 0}.g-pieces{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.guided-reading .g-piece,.guided-reading .g-letter{background:#d9f0fa;border:4px solid white;box-shadow:0 4px 0 #a8c8d7;font-size:clamp(2.4rem,8vw,4.6rem);line-height:1.1;min-width:95px;min-height:100px;padding:12px 20px}.g-piece:nth-child(2n){background:#ffedb0;box-shadow:0 4px 0 #dac47e}.g-piece.speaking,.g-word-tile.speaking{outline:4px solid #db8534;outline-offset:2px}.g-alternate{font-size:1.1rem;color:#587582;display:block;margin-top:18px;font-weight:500}.g-anchor mark{color:inherit;background:#ffeaa6;border-radius:6px}.g-link-arrow{display:inline-block;margin:0 18px;color:#df8937}.g-anchor{font-size:clamp(1.7rem,5vw,2.8rem)}#g-options{display:flex;justify-content:center;gap:14px;margin:18px auto 10px;flex-wrap:wrap}.guided-reading .g-choice{background:#c6e9df;border-color:#fff;box-shadow:0 4px 0 #96c1b4;min-width:110px;min-height:78px;font-size:2.6rem}.g-choice:nth-child(2n){background:#e3daf7;box-shadow:0 4px 0 #bdb0d8}.g-choice.try{outline:3px solid #e1ad69}.g-choice.correct{outline:4px solid #60a383}.g-choice:disabled{opacity:.6}.g-slots{display:flex;gap:10px;justify-content:center;margin:18px 0 8px}.g-slot{min-width:70px;min-height:70px;padding:8px 14px;border:3px dashed #93b7c6;border-radius:14px;font-size:2.6rem;font-weight:800;background:white;display:grid;place-items:center}.joined .g-slots{gap:0}.joined .g-slot{border-color:transparent;background:#d9efda;border-radius:0}.joined .g-slot:first-child{border-radius:14px 0 0 14px}.joined .g-slot:last-child{border-radius:0 14px 14px 0}.guided-reading .g-image-choice{padding:5px;width:min(42%,220px);min-width:0}.g-image-choice img{width:100%;height:clamp(100px,23dvh,185px);object-fit:contain}.g-word-tile{background:#d9eef8!important;font-size:clamp(1.4rem,4vw,2.3rem)!important;margin:5px;min-height:66px!important}.g-actions{display:flex;justify-content:center;gap:12px;margin:14px 0 0;flex-wrap:wrap}.guided-reading .g-primary{background:#dd8938;color:white;border-color:#dd8938;box-shadow:0 4px 0 #b96a2b;font-size:1.2rem;min-width:140px}.g-gate{position:absolute;inset:0;z-index:5;background:#fffdf5ed;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.g-gate p{font-size:1.3rem;font-weight:750;margin:0}.g-gate button{min-height:76px!important;font-size:1.7rem!important;padding:16px 28px!important}#g-feedback{color:#3d795c;font-weight:750;margin:8px 0}#g-note{font-size:.8rem;color:#6b7d87;margin:10px 0}.g-parent{line-height:1.7;margin-top:25px;font-size:.9rem}.g-parent summary{font-weight:700;cursor:pointer}.g-paused #g-scene,.g-paused #g-options,.g-paused #g-picture{opacity:.35;pointer-events:none}.g-finish a{display:inline-block;margin:20px;color:#245b7a;font-weight:750}.guided-reading [hidden]{display:none!important}.g-sheet[data-kind=build] #g-picture>img{height:clamp(90px,15dvh,130px)}.g-sheet[data-kind=build] .g-piece{font-size:2.2rem;min-height:66px;min-width:68px}.g-sheet[data-kind=build] .g-choice{font-size:2rem;min-height:62px}.g-sheet[data-kind=build] .g-slot{min-height:58px;min-width:58px;font-size:2rem}.g-sheet[data-kind=build] #g-options{margin:12px 0}.g-sheet[data-kind=build] .g-slots{margin:12px 0 6px}@media(max-width:600px){.g-wrap{padding:12px}.g-sheet{padding:12px;border-radius:24px}.g-piece{min-width:74px!important;min-height:86px!important;padding:10px 14px!important}.g-link-arrow{margin:0 8px}.g-sheet[data-kind=build] .g-piece{min-width:50px!important;min-height:58px!important;padding:8px!important}.g-pieces{gap:7px}.g-sheet[data-kind=build] .g-slot{min-width:46px;min-height:50px;padding:6px}.g-sheet[data-kind=build] .g-choice{min-width:70px;min-height:58px}#g-options{gap:9px}.g-progress{gap:8px}.g-header a{font-size:.9rem}}@media(max-height:730px){.g-picture-button img{height:23dvh}.g-bridge-picture img{height:18dvh}.g-sheet{padding-top:10px;padding-bottom:12px}#g-prompt{margin:8px 0}.g-actions{margin-top:10px}.g-toolbar{margin-bottom:8px}.g-slots{margin-top:10px}.g-sheet[data-kind=build] #g-picture>img{height:12dvh}}

/* The first image stays visible when autoplay needs one user gesture. */
.g-gate{position:static;inset:auto;background:transparent;gap:0;margin:14px auto 0}.g-gate>p{display:none}.g-sheet:has(.g-gate:not([hidden])) .g-actions{display:none}
.joined .g-slot{min-width:0!important;padding:8px 0!important;border:0!important}.joined .g-slots{background:#d9efda;border-radius:14px;width:max-content;margin-left:auto;margin-right:auto;padding:4px 16px;gap:0}
#g-built.joined .g-slots{margin:12px auto 6px}.g-sheet:has(#g-built.joined) #g-options{display:none}

.g-actions{align-items:center}.guided-reading #g-back{min-width:50px;font-size:1.5rem}.guided-reading #g-listen.needs-audio{outline:3px solid #e5a34c}.guided-reading #g-next:disabled{opacity:.6}

/* One compact row of navigation, including on phones. */
.guided-reading .g-actions{display:grid;grid-template-columns:48px minmax(48px,auto) minmax(100px,auto);gap:10px;max-width:430px;margin:14px auto 0;align-items:center}.guided-reading .g-actions button{min-height:50px;margin:0;padding:10px 14px}.guided-reading #g-next{min-width:0;white-space:nowrap}.guided-reading #g-listen{font-size:1rem}.guided-reading #g-pause{font-size:.85rem;min-height:40px;padding:7px 12px}.guided-reading .g-progress progress{appearance:none;border:0;border-radius:8px;overflow:hidden;background:#e7eef1}.guided-reading .g-progress progress::-webkit-progress-bar{background:#e7eef1}.guided-reading .g-progress progress::-webkit-progress-value{background:#67ae98}.guided-reading .g-progress progress::-moz-progress-bar{background:#67ae98}
@media(max-width:600px){.guided-reading .g-actions{grid-template-columns:46px 50px minmax(110px,1fr);max-width:340px;gap:8px}.guided-reading #g-listen{font-size:0;padding:9px}.guided-reading #g-listen::before{content:"🔊";font-size:1.3rem}.guided-reading #g-next{font-size:1.1rem;padding:10px 12px}.guided-reading #g-back{min-width:0}.guided-reading .g-bridge-picture img{height:clamp(115px,19dvh,165px)}.guided-reading .g-bridge-picture{margin-bottom:5px}.guided-reading .g-sheet[data-kind=bridge] .g-letter{min-height:75px;min-width:72px;font-size:3.2rem;padding:8px 14px}.guided-reading #g-scene{margin:8px 0}}

/* The model is writing, not a second draggable alphabet. */
.guided-reading .g-model{display:flex;justify-content:center;gap:2px;font-size:2.2rem;color:#587582;user-select:none;margin:0 0 8px;pointer-events:none}
.guided-reading .g-model .g-piece{display:inline;background:none;border:0;box-shadow:none;min-width:0!important;min-height:0!important;padding:0 2px!important;font-size:inherit;line-height:1.2;border-radius:0}
.guided-reading .g-model .speaking{color:#244456;text-decoration:underline;text-decoration-color:#dd8938;text-underline-offset:7px;outline:0}
.guided-reading .g-add{touch-action:none;cursor:grab}.guided-reading .g-add:active{cursor:grabbing}.guided-reading .g-dragging{position:relative;z-index:10;opacity:.85}
.guided-reading #g-next:disabled{opacity:.38;box-shadow:none;cursor:default}.guided-reading #g-skip{font-size:.85rem;min-height:44px}

.guided-reading .g-slot.g-current{border-style:solid;border-color:#dd8938;background:#fff0d5;color:#b86822}.guided-reading .g-choice.g-hint{outline:4px solid #dd8938;outline-offset:3px;animation:g-invite 1.4s ease-in-out infinite}.guided-reading .g-sheet[data-kind=build] #g-picture>img{height:clamp(110px,20dvh,175px)}
@keyframes g-invite{50%{outline-offset:7px}}@media(prefers-reduced-motion:reduce){.guided-reading .g-choice.g-hint{animation:none}}

@media(max-width:600px){.guided-reading .g-slots{gap:6px}.guided-reading .g-sheet[data-kind=build] .g-slot{min-width:0;width:clamp(32px,10vw,46px);padding:6px 3px}.guided-reading .g-sheet[data-kind=build] .g-choice{min-width:60px}}

.guided-reading .g-sentence-slots{flex-wrap:wrap}.guided-reading .g-sentence-slots .g-slot{min-width:110px;font-size:clamp(1.2rem,4vw,2rem);width:auto;min-height:58px}.guided-reading .g-sentence-piece{font-size:clamp(1.2rem,4vw,2rem);min-width:80px}.guided-reading .g-sentence-piece.speaking{outline:4px solid #dd8938;outline-offset:3px}.guided-reading .g-sheet[data-kind=find] #g-picture>img{height:clamp(90px,16dvh,145px)}
@media(max-width:600px){.guided-reading .g-sentence-slots .g-slot{min-width:72px;width:auto;padding:6px 10px}.guided-reading .g-sentence-piece{padding:8px 12px;font-size:1.4rem}}

.guided-reading .g-read-syllable{display:inline-block;padding:3px 7px;margin:0 3px;border-bottom:5px solid #e4b969}.guided-reading .g-read-syllable:nth-child(2n){border-color:#73b8aa}.guided-reading .g-sheet[data-kind=read] .g-image-choice{width:min(29%,220px)}@media(max-width:600px){.guided-reading .g-sheet[data-kind=read] .g-image-choice{width:29%;border-radius:14px}.guided-reading .g-sheet[data-kind=read] .g-image-choice img{height:clamp(80px,18dvh,130px)}}

.g-comparison{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.g-compare-word{border:2px solid #cddfd7;background:#fffbef;border-radius:17px;padding:15px;font:inherit;font-weight:750;font-size:clamp(1.7rem,5vw,2.7rem);color:inherit}.g-compare-word mark{background:#ffe193;border-radius:8px;padding:0 4px}.g-sheet[data-kind=signbuild] .g-slot{font-size:clamp(1.6rem,5vw,2.8rem);min-width:65px}.g-sheet[data-kind=sign] #g-picture img,.g-sheet[data-kind=signgap] #g-picture img,.g-sheet[data-kind=signbuild] #g-picture img{height:clamp(110px,18dvh,180px);max-width:100%;object-fit:contain}

.g-sheet[data-kind=sign] #g-scene mark,.g-sheet[data-kind=signgap] #g-scene mark{background:#ffe29b;border-radius:9px;padding:0 5px;color:inherit}
