/* New period content uses the same touch targets and adaptive card layout. */
body.storybook-music.sentence-lesson{--gap:5px}
.sentence-steps{display:flex;flex:none;align-self:center;justify-content:center;gap:10px;width:min(620px,100%)}
.sentence-step{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;min-height:48px;padding:4px 12px;border:2px solid #e9dfc9;border-radius:18px;background:#fff9e9;color:#425c77;font:700 18px/1.2 "Leo Rounded Latin","Leo Rounded Chinese",sans-serif;cursor:pointer;touch-action:manipulation}
.sentence-step img{width:34px;height:34px;flex:none}
.sentence-step[aria-pressed="true"]{border-color:#3397ed;background:#e3f3ff;color:#153f6b;box-shadow:0 3px 0 #a7d6f2}
.sentence-panel{display:flex;flex:none;align-items:center;justify-content:center;gap:12px;width:100%;min-height:68px;padding:5px 10px;background:#fff4dc;border:2px solid #f1e1ba;border-radius:20px}
.sentence-panel #meaning{display:grid;place-items:center;flex:none;width:54px;height:54px;padding:0;border:0;border-radius:18px;background:none;cursor:pointer;touch-action:manipulation}
#meaning-image{width:54px;height:54px}
.sentence-panel p{margin:0}
#sentence-text{color:#10284e;font:700 clamp(20px,2.4vw,29px)/1.2 "Leo Rounded Latin",sans-serif}
#sentence-hint{margin-top:3px;color:#5a6c7d;font:400 14px/1.4 "Leo Rounded Chinese",sans-serif}
body.sentence-lesson:not(.quiz) #message{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
body.sentence-lesson.quiz .sentence-panel{display:none}
body.sentence-lesson .photo{mix-blend-mode:multiply}
body[data-letter="W"] .picture{mix-blend-mode:normal;padding:2px}
.sentence-step:focus-visible,#meaning:focus-visible{outline:4px solid #173e71;outline-offset:4px}
@media(orientation:portrait){.sentence-panel{min-height:76px}#sentence-text{font-size:25px}.sentence-step{font-size:19px}}
@media(max-height:700px) and (orientation:landscape){body.sentence-lesson main{gap:5px}body.sentence-lesson .cards,body.sentence-lesson .grid{min-height:145px}.sentence-panel{min-height:64px}#sentence-text{font-size:22px}}
@media(max-width:560px){.sentence-steps{gap:6px}.sentence-step{gap:4px;font-size:15px;padding:4px 5px}.sentence-step img{width:29px;height:29px}.sentence-panel{gap:7px;padding:5px 7px}#meaning-image,.sentence-panel #meaning{width:48px;height:48px}#sentence-text{font-size:20px}#sentence-hint{font-size:12px}}
body.storybook-music.sentence-lesson .lesson-actions{margin-bottom:7px}