/* Presentation adapter only. The original page still owns all audio and state. */
html{scroll-padding-top:0}body{padding:0!important;background:#fffdfa;font-family:Geist,Arial,sans-serif}.brandbar,main>.layout>aside,main>footer,.lesson-head,.practice-guide,.lesson-pager,.skip{display:none!important}main{padding:0!important;margin:0;max-width:none}.layout{display:block;margin:0;padding:0}#lesson{border:0;border-radius:0;background:transparent;box-shadow:none}.sentence{padding:20px 15px;border-bottom:1px solid #e7ded8}.sentence:before{content:attr(aria-label);display:block;color:#85766b;font-size:10px;font-weight:650;letter-spacing:.5px;margin-bottom:10px}.line-controls{gap:7px;margin-bottom:13px}.line-controls button{border:1px solid #ffffffaa;border-radius:12px;background:linear-gradient(180deg,#ffffff2c,transparent 25%,#29000622),#a30e20;color:white;box-shadow:0 1px 3px #7e0b1525,inset 0 0 0 1px #ffffff45;padding:9px 11px;min-height:36px;font-size:10px}.line-controls button[aria-pressed=true]{background:#750918}.boxes{gap:12px 8px}.player{display:none!important}.player-main{display:block}.player-buttons{display:flex;justify-content:center;gap:5px;padding:0;flex-wrap:wrap}.player button{min-height:35px;padding:7px 10px;font-size:10px}.player .icon-button{position:static;padding:0;width:30px}.loop{font-size:10px}.toast{left:10px;right:10px;bottom:12px;transform:none;width:auto;font-size:11px}.phone-scroll-guide{display:none}.sentence:last-of-type{padding-bottom:30px}


.boxes{align-items:flex-start;gap:22px 16px}
.translated-phrase{display:flex;flex-direction:column;gap:10px;width:var(--phrase-width);max-width:100%;min-width:0}
.translated-phrase>.phrase-scroll{flex-shrink:0}
.phrase-translation{margin:0;padding:0 4px;color:#3e5246;font:500 14px/1.65 Geist,Arial,sans-serif;overflow-wrap:break-word}
.translations-hidden .phrase-translation{display:none}
.translation-unmatched{color:#9a6b27;font-size:12px}
@media(max-width:700px){.boxes{gap:20px 12px}.phrase-translation{font-size:14px;line-height:1.65}}

/* Phrase boxes are the sole visible controls in each passage. */
.sentence:before,.sentence>.line-controls{display:none!important}

/* Separate speaking turns using the Test 5 pearl glass card treatment. */
body{background:#f2eeec!important}
#lesson{padding:36px 16px 4px!important}
.sentence{position:relative;margin:0 0 26px;padding:28px 20px 24px;border:1px solid #ffffffd9;border-radius:42px;background:linear-gradient(135deg,#fffdfb,#eee9e8);box-shadow:inset 0 0 0 1px #fffffff2,inset 0 0 0 4px #ffffff59,inset 0 2px 1px #fff,inset 0 -2px 1px #9b88952e,0 0 0 1px #b6a9ad40,0 6px 14px #49374112}
.sentence:last-of-type{padding-bottom:24px}
.sentence[data-speaker=answer] .turn-heading{min-height:26px;padding:4px 11px}
@media(max-width:700px){#lesson{padding:36px 10px 2px!important}.sentence{padding:27px 12px 20px;margin-bottom:24px;border-radius:28px}.sentence:last-of-type{padding-bottom:20px}.turn-heading{left:18px}.turn-title{font-size:12px}}

/* Keep status messages compact; loading is announced without covering the lesson. */
.toast{top:auto!important;height:auto;max-height:5em;overflow:auto}
body[data-audio-state="loading"] .toast{position:absolute;left:0;right:auto;bottom:auto;width:1px;height:1px;max-height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* The complete speaker badge is one keyboard-accessible playback button. */

/* Pearl and mint glass audio controls: no backdrop blur or layout animation. */
.phrase-layer.segmented{border:1.5px solid #c5d5cb;border-radius:16px;background:linear-gradient(155deg,#fffefdf5 0%,#f6faf7 48%,#e9f2ed 100%);box-shadow:inset 0 0 0 1px #fff,inset 0 2px 1px #fff,inset 0 -2px 3px #68887612}
.phrase-scroll{border-radius:16px;box-shadow:0 3px 7px #40594b0d,0 1px 2px #40594b0a;scrollbar-color:#b4c8bc transparent}
.segmented .inner-boxes{border-left:1px solid #b9cfc080;background:transparent}
.segmented .inner-boxes>.audio-box+.audio-box:before{top:9px;bottom:9px;background:linear-gradient(180deg,transparent,#b2c6bca0 25%,#b2c6bca0 75%,transparent)}
.segmented .word{background:transparent;color:#255e44;transition:background-color .15s ease,box-shadow .15s ease}
.segmented .outer-audio>.word{background:linear-gradient(145deg,#f9fffb,#dceee2);color:#246344;box-shadow:inset 0 0 0 2px #ffffff90;border-radius:13px}
.segmented .inner-boxes .word{box-shadow:inset 0 1px #ffffffb3}
.segmented .word .word-count{color:#50695c;font-weight:550}
.segmented .word-position{stroke:#7c9989}
.segmented .audio-box.selected>.word{box-shadow:inset 0 0 0 2px #7fae9666}
@media(hover:hover){.segmented .word:hover{background:linear-gradient(145deg,#fff,#e1f1e7);box-shadow:inset 0 0 0 1px #ffffffd9}}
.segmented .audio-box.playing>.word,.segmented .audio-box.part-playing>.word{background:linear-gradient(145deg,#e4f8eb,#b5ddc5);box-shadow:inset 0 0 0 1px #ffffffdb,inset 0 -3px #4c916d66,0 0 10px #75b48b20}
.segmented .audio-box.playing .word-position,.segmented .audio-box.part-playing .word-position{stroke:#3d7958}
.segmented .word:focus-visible{outline:3px solid #277ac1;outline-offset:-4px}
@media(prefers-reduced-motion:reduce){.segmented .word{transition:none}}

/* One continuous glass frame; the portrait and sound badge have independent edges. */
.turn-heading{position:absolute;top:0;left:24px;transform:translateY(-50%);display:flex;align-items:center;margin:0;padding:0;border:0;background:transparent;box-shadow:none;z-index:2}
.turn-speaker{position:relative;isolation:isolate;display:flex;align-items:center;gap:11px;min-height:48px;width:auto;height:auto;flex:0 0 auto;padding:5px 16px 5px 5px;border:1px solid #d4c6cbb3;border-radius:20px;background:radial-gradient(ellipse at 18% 0%,#ffffff 0%,#ffffff00 62%),linear-gradient(155deg,#fffcfaf5,#f1ecebd9 65%,#e7dfe2e8);box-shadow:inset 0 0 0 1px #ffffffed,inset 0 2px 1px #fff,inset 0 -2px 3px #80657212,0 5px 12px #58404b10,0 1px 2px #58404b0c;cursor:pointer;transition:box-shadow .16s ease,background-color .16s ease}
.turn-title{margin:0;color:#792f40;font:650 13px/1.3 Geist,Arial,sans-serif;letter-spacing:.1px}
.turn-avatar{position:relative;display:block;flex:0 0 36px;width:36px;height:36px;box-sizing:border-box;border:1px solid #c9bfc5;border-radius:12px;background:linear-gradient(150deg,#fff,#e3e9f0);box-shadow:inset 0 0 0 1px #fff,0 1px 3px #27334b0c}
.turn-speaker img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0;box-sizing:border-box;padding:1px}
.turn-speaker-sound{position:absolute;display:grid;place-items:center;right:-5px;bottom:-3px;width:17px;height:17px;box-sizing:border-box;border:1px solid #d4bec3;border-radius:50%;background:linear-gradient(145deg,#fff,#f3e8eb);color:#9d1632;box-shadow:0 0 0 1.5px #fff9,0 2px 4px #6832461a}
.turn-speaker-sound svg{width:11px;height:11px}
@media(hover:hover){.turn-speaker:hover{box-shadow:inset 0 0 0 1px #fff,inset 0 2px 1px #fff,0 5px 14px #753c5423,0 0 0 2px #ffffff70}}
.turn-speaker[aria-pressed=true]{background:linear-gradient(150deg,#fff5f6,#eed4db);box-shadow:inset 0 0 0 1px #fff,0 0 0 2px #ad52665c,0 4px 12px #753c541a}
.turn-speaker[aria-pressed=true] .turn-speaker-sound{background:#a41632;color:#fff;border-color:#a41632}
.turn-speaker:focus-visible{outline:3px solid #287abd;outline-offset:3px}
@media(max-width:700px){.turn-heading{left:18px}.turn-speaker{min-height:46px;padding-right:14px}.turn-title{font-size:13px}}
@media(prefers-reduced-motion:reduce){.turn-speaker{transition:none}}

/* Exact approved portrait already contains its complete base and sound badge. */
.turn-avatar-reference{flex-basis:44px;width:44px;height:44px;border:0;border-radius:0;background:none;box-shadow:none}
.turn-avatar-reference img{padding:0;border-radius:0}