.guided-layer { padding: 18px; background: #173d4680; }
.dialogue-addon-card.guided-card { width: min(700px, 100%); padding: 0; display:flex; flex-direction:column; overflow:hidden; border: 1px solid #d9ddcf; border-radius: 24px; background: #fffdf6; color: #213d3c; box-shadow: 0 16px 60px #17312c30; font: 16px/1.55 Arial,sans-serif; }
.guided-body { min-height:0; overflow:auto; padding:24px 30px 16px; overscroll-behavior:contain; scrollbar-gutter:stable; }
.guided-actions { flex:none; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:center; gap:12px; padding:14px 30px; border-top:1px solid #dedfce; background:#fffdf6; box-shadow:0 -5px 20px #193f3508; text-align:center; }
.guided-card .guided-actions .guided-primary { margin:0; }
.guided-actions .guided-text-button { margin:0; font-size:12px; line-height:1.4; }
.guided-top .dialogue-music-toggle { min-height:36px; padding:4px 8px; font-size:11px; }
.guided-top .dialogue-music-toggle svg { width:17px; height:17px; }
.guided-hero { display:grid; grid-template-columns:128px 1fr; gap:22px; align-items:center; margin-bottom:20px; }
.guided-cover { display:block; width:128px; height:132px; object-fit:cover; border-radius:18px 18px 18px 5px; border:3px solid #fff; box-shadow:0 5px 18px #243d3220; }
.guided-card .guided-hero .guided-title { margin-bottom:0; }
.guided-progress { display:flex; flex-direction:column; gap:6px; margin:2px 0 10px; color:#4b6b59; font-size:12px; }
.guided-progress progress { appearance:none; border:0; width:100%; height:6px; border-radius:9px; background:#e5eadf; overflow:hidden; }
.guided-progress progress::-webkit-progress-bar { background:#e5eadf; border-radius:9px; }
.guided-progress progress::-webkit-progress-value { background:#56855d; border-radius:9px; }
.guided-progress progress::-moz-progress-bar { background:#56855d; border-radius:9px; }
.guided-contents { margin:0 0 18px; }
.guided-contents summary { cursor:pointer; padding:8px 0; font-size:13px; font-weight:700; color:#335d4b; min-height:40px; }
.guided-contents .guided-steps { margin:7px 0 12px; }
.guided-success-label { display:inline-block; color:#376c4c; background:#e8f1dc; padding:6px 10px; margin:6px 0 17px; font-size:11px; font-weight:800; letter-spacing:.06em; border-radius:20px; }
.guided-card * { box-sizing: border-box; }
.guided-card .guided-eyebrow { margin: 0 0 8px; color: #756030; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.guided-card .guided-title { margin: 0 0 10px; color: #183f3b; font-size: clamp(24px, 3vw, 32px); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.guided-card .guided-title:focus { outline: none; }
.guided-card .guided-lead { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: #4b6059; }
.guided-card button { cursor: pointer; font-family: inherit; }
.guided-card button:disabled { cursor: default; opacity: .5; }
.guided-card button:focus-visible,.guided-card summary:focus-visible { outline: 3px solid #d79724; outline-offset: 3px; }
.guided-card .guided-primary,.guided-card .guided-secondary { display: block; width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 13px; font-weight: 750; font-size: 16px; line-height: 1.3; margin: 12px 0 0; }
.guided-card .guided-primary { color: #fff; background: #246454; border: 1px solid #174f42; box-shadow: 0 3px 0 #163f36; }
.guided-card .guided-primary:hover:not(:disabled) { background: #1b5547; }
.guided-card .guided-secondary { color: #265b50; background: #fffdf6; border: 1px solid #bfcfc5; box-shadow: none; }
.guided-card .guided-secondary:hover:not(:disabled) { background: #f0f4e9; }
.guided-card .guided-text-button { min-height: 44px; border: 0; background: transparent; color: #326658; padding: 7px 3px; font-weight: 650; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.guided-card .guided-small { font-size: 12px; line-height: 1.55; color: #5b6c62; margin: 13px 0; }
.guided-path { margin: 12px 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; list-style: none; gap: 8px; counter-reset: stage; }
.guided-path li { display: grid; grid-template-columns: 24px 1fr; gap: 2px 8px; align-items: center; padding: 10px; border-radius: 12px; background: #eff3e8; counter-increment: stage; }
.guided-path li::before { content: counter(stage); grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #dce7cf; color: #36533b; font-weight: 800; font-size: 12px; }
.guided-path strong { font-size: 12px; line-height: 1.25; }.guided-path span { font-size: 11px; color: #657360; }
.guided-mission { margin: 18px 0 10px; padding: 12px 14px; border: 1px solid #e5dcc6; border-radius: 14px; background: #fbf5e7; }
.guided-mission h3 { margin: 0 0 10px; font-size: 13px; color: #71562f; }
.guided-mission ul { display: flex; justify-content: space-between; gap: 8px; list-style: none; margin: 0; padding: 0; }
.guided-mission li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 700; line-height: 1.2; }
.guided-icon { width: 42px; height: 42px; object-fit: contain; filter: none; mix-blend-mode: normal; }
.guided-top,.guided-footer,.guided-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guided-top { margin: -9px 0 9px; }.guided-top .guided-eyebrow { margin: 0; font-size: 9px; text-align: right; }
.guided-footer { border-top: 1px solid #e2e6d8; margin-top: 16px; padding-top: 9px; flex-wrap: wrap; }
.guided-footer .dialogue-music-toggle { font-size: 12px; }.guided-footer .guided-text-button { font-size: 11px; }
.guided-bottom { margin-top: 14px; justify-content: center; border-top: 1px solid #e2e6d8; }
.guided-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 0 0 18px; }
.guided-card .guided-step { border: 1px solid #d5ddd2; background: #fffdf6; border-radius: 9px; color: #60705e; padding: 6px 8px; font-size: 11px; min-height: 44px; }
.guided-card .guided-step[aria-current] { border-color: #316d59; background: #eaf2e3; color: #214f3e; font-weight: 800; }
.guided-speech { border-radius: 16px; padding: 14px 18px; margin: 8px 0 12px; border: 1px solid #dee3d8; background: #f2f4ec; }
.guided-answer { margin-left: 30px; border-color: #bed3c2; background: #eaf3e7; }
.guided-speech-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.guided-speech-top > span { font-size: 11px; text-transform: uppercase; letter-spacing: .055em; font-weight: 700; color: #5b6d55; }
.guided-card .guided-audio { min-height: 44px; flex: none; max-width: 55%; border: 1px solid #c0cec0; border-radius: 9px; padding: 5px 12px; color: #295f4e; background: #fffefa; font-size: 12px; font-weight: 750; }
.guided-card .guided-phrase { margin: 1px 0 4px; color: #254d41; font-size: 21px; line-height: 1.4; font-weight: 750; overflow-wrap: anywhere; }
.guided-question .guided-phrase { font-size: 18px; font-weight: 600; color: #465849; }
.guided-card .guided-translation { margin: 0; color: #5e6d60; font-size: 13px; }
.guided-card .guided-pronunciation { margin: 4px 0 7px; color: #885126; font-size: 12px; line-height: 1.5; }
.guided-teacher { position: relative; margin: 16px 0 8px; padding: 16px; border: 1px solid #e7d8b4; border-radius: 15px; background: #fff8e7; }
.guided-teacher h3 { color: #805324; margin: 0 0 8px; font-size: 13px; padding-right: 56px; min-height: 28px; }
.guided-teacher-image { position: absolute; top: 7px; right: 11px; width: 44px; height: 49px; object-fit: contain; }
.guided-card .guided-copy { margin: 0; font-size: 14px; line-height: 1.8; color: #47594b; }
.guided-term { font-weight: 750; color: #1f6656; }.guided-term[data-color="1"]{color:#315ca8}.guided-term[data-color="2"]{color:#934714}.guided-term[data-color="3"]{color:#70438e}.guided-term[data-color="4"]{color:#97384a}.guided-term[data-color="5"]{color:#24656b}
.guided-details { margin: 10px 0; }.guided-details summary,.guided-reference summary { cursor: pointer; color: #3d6457; font-size: 13px; font-weight: 700; min-height: 44px; padding: 10px 0; }
.guided-details .coffee-explanation-card { width: 100%; box-shadow: none; margin-top: 8px; }
.guided-quiz { padding: 16px; border: 1px solid #dfdac9; background: #fffef9; border-radius: 15px; margin-top: 18px; }
.guided-quiz h3 { font-size: 16px; font-weight: 650; line-height: 1.5; margin: 0 0 12px; }
.guided-frame { font-size: 23px; color: #355947; padding: 12px 0; margin: 0; }
.guided-options { display: grid; gap: 9px; }
.guided-card .guided-option { display: block; min-height: 48px; width: 100%; text-align: left; border: 1.5px solid #bdcdc0; background: #fff; border-radius: 11px; padding: 11px 14px; color: #345448; font-size: 17px; }
.guided-card .guided-option:hover { border-color: #356f53; background: #f0f6ea; }
.guided-card .guided-option:disabled { opacity:1; cursor:default; }
.guided-card .guided-option:disabled:not([aria-pressed="true"]) { background:#f6f6f0; color:#69776b; border-color:#dde3d7; }
.guided-option .guided-pronunciation { display: block; font-weight: 400; }
.guided-card .guided-option[data-correct="true"] { border-color: #2c7658; background: #e9f4e8; }.guided-card .guided-option[data-correct="false"] { border-color: #b88b43; background: #fff6e5; }
.guided-feedback { margin-top: 14px; padding: 14px; border: 1px solid #e7d4af; background: #fff6e6; border-radius: 12px; }
.guided-feedback[data-correct="true"] { background: #edf6e8; border-color: #bdd4b3; }
.guided-feedback > strong { display: block; margin-bottom: 5px; font-size: 14px; color: #385c40; }.guided-feedback small { display: block; margin-top: 8px; font-size: 12px; color: #6a624d; }
.guided-feedback .guided-audio { margin-top: 10px; }.guided-hint { padding: 12px; border-radius: 10px; background: #f4f3e9; }
.guided-feedback .guided-text-button { margin-left:14px; }
.guided-feedback .guided-phrase { margin-top:12px; font-size:18px; }
.guided-card .guided-feedback:focus { outline:none; }
.guided-how { margin: 18px 0; }.guided-how h3 { font-size: 15px; margin: 0 0 6px; }.guided-how p { margin: 0; font-size: 14px; color: #4b6257; }
.guided-reference { margin: 14px 0; border-top: 1px solid #d6ded0; }.guided-reference dl { margin: 0; display: grid; gap: 5px; }.guided-reference dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #788065; margin-top: 12px; }.guided-reference dd { margin: 0; padding-bottom: 10px; border-bottom: 1px solid #e9ebdf; }.guided-reference dd strong { display: block; color: #245e4e; font-size: 16px; }.guided-reference dd span { display: block; color: #647465; font-size: 13px; }
@media(max-width: 520px) {
  .guided-layer { padding: 8px; }
  .dialogue-addon-card.guided-card { border-radius: 18px; }
  .guided-body { padding:18px 17px 12px; }
  .guided-actions { padding:11px 17px; gap:10px; }
  .guided-hero { grid-template-columns:80px 1fr; gap:12px; margin-bottom:14px; }
  .guided-cover { width:80px; height:104px; border-radius:13px 13px 13px 4px; }
  .guided-card .guided-hero .guided-title { font-size:24px; }
  .guided-card .guided-hero .guided-eyebrow { font-size:9px; letter-spacing:.07em; }
  .guided-card .guided-lead { font-size: 14px; line-height: 1.5; }
  .guided-card .guided-title { font-size: 26px; }
  .guided-mission li { flex-direction: column; text-align: center; }
  .guided-answer { margin-left: 14px; }
  .guided-speech { padding: 11px 12px; }
  .guided-card .guided-phrase { font-size: 19px; }.guided-question .guided-phrase { font-size: 16px; }
  .guided-card .guided-copy { font-size: 13px; }.guided-teacher { padding: 13px; }
  .guided-quiz { padding: 13px; }.guided-card .guided-option { font-size: 16px; }
  .guided-path strong { font-size: 11px; }.guided-path li { padding: 8px; gap: 2px 5px; }
}
.guided-outcome { margin:16px 0; padding:17px 20px; border:1px solid #d8e4d2; background:#f1f6eb; border-radius:16px; }
.guided-outcome h3 { font-size:18px; line-height:1.3; margin:0 0 8px; color:#285748; }
.guided-outcome p { font-size:14px; line-height:1.6; margin:0; color:#4b6457; }
.guided-outcome .guided-reference { margin-bottom:0; }
.guided-next-story { background:#f8efdb; border:1px solid #e4d3aa; padding:20px; border-radius:18px; margin:20px 0 8px; }
.guided-next-story .guided-eyebrow { color:#896029; font-size:10px; font-weight:800; letter-spacing:.12em; }
.guided-next-story h3 { font-size:21px; line-height:1.25; margin:7px 0 9px; color:#3b5341; }
.guided-next-story p { margin:0 0 15px; color:#5c644c; font-size:14px; line-height:1.6; }
.guided-next-story button { width:100%; min-height:48px; }
.guided-next-story small { display:block; font-size:11px; color:#776d50; text-align:center; margin-top:10px; }
@media(prefers-reduced-motion: no-preference) { .guided-card .guided-feedback { animation: guided-feedback-in .18s ease-out; } @keyframes guided-feedback-in { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: none; } } }

/* Illustrated preparation. Art always comes from the current story package. */
.dialogue-addon-card.guided-card { width:min(880px,100%); }
.guided-card[data-guided-view="welcome"],.guided-card[data-guided-view="recap"] { width:min(730px,100%); }
.guided-hero { display:block; margin:0 0 13px; }
.guided-cover-frame { position:relative; margin:-24px -30px 22px; overflow:hidden; background:#e5eadb; }
.guided-cover { width:100%; height:210px; object-fit:cover; object-position:center 20%; border:0; border-radius:0; box-shadow:none; }
.guided-cover-caption { position:absolute; bottom:12px; left:30px; padding:7px 13px; border:1px solid #ffffffb8; border-radius:999px; background:#fffdf3f2; color:#315747; font-size:12px; font-weight:750; box-shadow:0 2px 7px #143e2920; }
.guided-card .guided-hero .guided-title { font-size:clamp(26px,3vw,34px); }
.guided-card .guided-lead { max-width:65ch; }
.guided-path { gap:12px; }
.guided-path li { position:relative; grid-template-columns:48px 1fr; padding:11px 12px; border:1px solid #dce5d2; background:#f2f6ec; }
.guided-path li::before { position:absolute; left:-4px; top:-7px; width:20px; height:20px; font-size:10px; border:2px solid #fffdf6; }
.guided-path-art { grid-row:span 2; width:48px; height:48px; object-fit:contain; }
.guided-path strong { font-size:13px; }
.guided-path span { font-size:12px; }
.guided-path li:not(:has(.guided-path-art)) { grid-template-columns:1fr; }
.guided-mission { padding:14px 15px; background:#fff7e4; }
.guided-mission h3 { font-size:14px; }
.guided-mission li { flex-direction:column; text-align:center; gap:7px; font-size:13px; }
.guided-icon { width:54px; height:54px; }
.guided-step-heading { display:flex; align-items:center; gap:15px; margin:4px 0 16px; }
.guided-step-heading > div { min-width:0; }
.guided-step-cue { width:66px; height:66px; object-fit:contain; flex:none; background:#fff5de; border-radius:18px; padding:4px; border:1px solid #ecdcb9; }
.guided-card .guided-step-heading .guided-title { margin:0; font-size:clamp(23px,2.7vw,30px); }
.guided-card .guided-step-heading .guided-eyebrow { margin-bottom:6px; }
.guided-rhythm { display:flex; gap:5px; padding:0; margin:0; list-style:none; counter-reset:rhythm; border-radius:11px; overflow:hidden; background:#eef0e8; }
.guided-rhythm li { flex:1; display:flex; justify-content:center; align-items:center; gap:8px; min-height:38px; padding:7px 10px; font-size:12px; font-weight:650; color:#586c60; counter-increment:rhythm; }
.guided-rhythm li::before { content:counter(rhythm); display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid currentColor; font-size:10px; }
.guided-rhythm li[aria-current] { background:#dcebdc; color:#205841; font-weight:800; }
.guided-lesson-tools { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:9px 0; }
.guided-lesson-tools .guided-small { font-size:11px; max-width:200px; margin:0; }
.guided-card .guided-lesson-tools .guided-text-button { display:inline-flex; gap:7px; align-items:center; padding:3px 10px 3px 4px; min-height:44px; border:1px solid #d8e3d5; border-radius:11px; background:#fff; text-decoration:none; }
.guided-pronunciation-art { width:32px; height:35px; object-fit:contain; }
.guided-lesson-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:14px; align-items:start; }
.guided-scene { position:relative; isolation:isolate; padding:15px 13px 12px; border:1px solid #d7dfcb; border-radius:20px; overflow:hidden; background:#f1f3e9; }
.guided-scene-background { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; opacity:.24; }
.guided-scene::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,#fcfff947,#fcfff9bc); }
.guided-scene-label { display:block; width:fit-content; max-width:100%; padding:4px 9px; margin-bottom:11px; border-radius:8px; color:#455b49; background:#fffdf4ed; font-size:10px; font-weight:650; line-height:1.5; }
.guided-speech-row { display:flex; align-items:flex-start; gap:9px; margin:9px 0; }
.guided-speech-row.guided-answer { flex-direction:row-reverse; margin-left:0; background:none; }
.guided-speech { min-width:0; flex:1; position:relative; margin:0; padding:12px 13px; border-radius:4px 15px 15px 15px; background:#fffcf4f5; border-color:#e5dcc5; box-shadow:0 3px 9px #30473008; }
.guided-speech.guided-answer { margin:0; border-radius:15px 4px 15px 15px; background:#f1f9ebf5; border-color:#c2d6b6; }
.guided-speech-top { flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.guided-speaker { min-width:0; display:flex; flex-direction:column; gap:0; }
.guided-speaker strong { font-size:12px; color:#325741; line-height:1.4; }
.guided-speaker span { font-size:10px; line-height:1.4; color:#65725e; }
.guided-card .guided-speech .guided-audio { margin-left:auto; font-size:11px; padding:5px 8px; min-height:40px; max-width:100%; }
.guided-card .guided-speech .guided-phrase { font-size:19px; }
.guided-card .guided-question .guided-phrase { font-size:17px; }
.guided-card .guided-speech .guided-translation { line-height:1.5; font-size:12px; }
.guided-portrait { display:block; width:70px; height:93px; flex:none; position:relative; overflow:hidden; border-radius:12px 12px 20px 20px; background:linear-gradient(145deg,#fffaf0d9,#dfebd5de); border-bottom:2px solid #aabf9e; }
.guided-portrait img { position:absolute; height:285%; width:auto; max-width:none; left:50%; top:-8%; transform:translateX(-50%); object-fit:contain; }
.guided-portrait[hidden] { display:none; }
.guided-lesson-layout .guided-teacher { margin:0; padding:16px; background:#fff7e5; }
.guided-teacher-image { width:56px; height:61px; }
.guided-lesson-layout .guided-teacher h3 { padding-right:58px; min-height:44px; display:flex; align-items:center; }
.guided-card .guided-lesson-layout .guided-copy { font-size:14px; line-height:1.8; }
.guided-ready-scene { display:flex; justify-content:center; align-items:end; gap:24px; height:140px; margin:8px 0 18px; padding-bottom:0; }
.guided-ready-scene .guided-scene-label { position:absolute; top:12px; left:12px; }
.guided-ready-scene .guided-ready-portrait { height:115px; width:calc((100% - 24px)/2); max-width:120px; background:none; border:0; border-radius:0; }
.guided-ready-portrait img { height:310%; top:0; }
.guided-ready-portrait img[data-measured-guided-cast="true"] { height:calc(100% * var(--guided-cast-height)); top:calc(100% * var(--guided-cast-top)); }
.guided-ready-scene[data-cast-size="3"] { gap:12px; }
.guided-ready-scene[data-cast-size="3"] .guided-ready-portrait { width:calc((100% - 24px)/3); max-width:120px; }
.guided-quiz { margin-top:13px; }
.guided-course-status { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:22px; margin:0 0 14px; }
.guided-course-status .guided-progress { margin:0; font-size:11px; }
.guided-course-status .guided-contents { position:relative; margin:0; }
.guided-course-status .guided-contents summary { min-height:36px; padding:8px 0; font-size:12px; text-align:right; }
.guided-course-status .guided-contents[open] { grid-column:1 / -1; grid-row:2; }
.guided-course-status .guided-contents[open] summary { text-align:left; }
.guided-lesson-controls { display:flex; align-items:center; gap:15px; margin:0 0 12px; }
.guided-lesson-controls .guided-rhythm { flex:1; }
.guided-lesson-controls .guided-lesson-tools { flex:none; margin:0; }
.guided-lesson-controls .guided-lesson-tools .guided-small { display:none; }
@media(max-width:720px) {
  .guided-lesson-layout { grid-template-columns:1fr; }
  .guided-speech-row { gap:12px; }
  .guided-portrait { width:77px; height:98px; }
  .guided-lesson-layout .guided-teacher h3 { min-height:36px; }
  .guided-lesson-controls { gap:8px; }
}
@media(max-width:520px) {
  .guided-cover-frame { margin:-18px -17px 18px; }
  .guided-cover { width:100%; height:160px; border-radius:0; }
  .guided-cover-caption { left:17px; bottom:10px; font-size:11px; }
  .guided-card .guided-hero .guided-title { font-size:26px; }
  .guided-step-cue { width:52px; height:52px; border-radius:14px; }
  .guided-step-heading { gap:11px; margin-bottom:13px; }
  .guided-card .guided-step-heading .guided-title { font-size:23px; }
  .guided-path li { grid-template-columns:35px 1fr; padding:9px 8px; gap:2px 7px; }
  .guided-path-art { width:35px; height:40px; }
  .guided-path strong { font-size:11px; }.guided-path span { font-size:11px; }
  .guided-icon { width:46px; height:46px; }
  .guided-mission li { font-size:11px; }
  .guided-rhythm li { font-size:11px; gap:6px; padding:7px 5px; }
  .guided-scene { padding:12px 10px; border-radius:16px; }
  .guided-speech-row { gap:8px; }
  .guided-portrait { width:57px; height:82px; border-radius:10px 10px 15px 15px; }
  .guided-speech { padding:10px; }
  .guided-speech-top { gap:4px; }
  .guided-card .guided-speech .guided-phrase { font-size:17px; }
  .guided-card .guided-question .guided-phrase { font-size:16px; }
  .guided-card .guided-speech .guided-audio { min-height:40px; font-size:11px; }
  .guided-card .guided-lesson-layout .guided-copy { font-size:13px; }
  .guided-ready-portrait { width:100px; height:115px; }
  .guided-lesson-tools .guided-small { max-width:115px; font-size:10px; line-height:1.5; }
  .guided-course-status { gap:14px; }
  .guided-lesson-controls { display:block; }
  .guided-lesson-controls .guided-lesson-tools { margin:8px 0 0; }
  .guided-lesson-controls .guided-lesson-tools .guided-small { display:block; }
}
@media(max-height:650px) and (min-width:521px) {
  .guided-hero { display:grid; grid-template-columns:155px minmax(0,1fr); gap:19px; align-items:center; }
  .guided-cover-frame { margin:0; border-radius:15px; }
  .guided-cover { height:135px; }
  .guided-cover-caption { left:5px; right:5px; bottom:5px; padding:4px 5px; font-size:9px; text-align:center; }
  .guided-card .guided-hero .guided-title { font-size:26px; }
  .guided-top { margin-bottom:4px; }
  .guided-course-status { margin-bottom:8px; }
  .guided-step-heading { margin:2px 0 10px; }
  .guided-step-cue { width:48px; height:48px; border-radius:13px; }
  .guided-card .guided-step-heading .guided-title { font-size:24px; }
  .guided-lesson-controls { margin-bottom:9px; }
}
@media(max-width:350px) {
  .guided-body { padding-left:12px; padding-right:12px; }
  .guided-actions { padding-left:12px; padding-right:12px; grid-template-columns:1fr; gap:3px; }
  .guided-actions .guided-text-button { min-height:36px; }
  .guided-cover-frame { margin-left:-12px; margin-right:-12px; }
  .guided-portrait { width:42px; height:69px; }
  .guided-speech-row { gap:6px; }
  .guided-speech { padding:9px; }
  .guided-card .guided-speech .guided-audio { width:100%; margin:3px 0 0; }
  .guided-rhythm li { font-size:10px; gap:4px; }
  .guided-rhythm li::before { width:17px; height:17px; }
  .guided-path { grid-template-columns:1fr; gap:10px; }
  .guided-path li { grid-template-columns:40px 1fr; }
  .guided-path-art { width:40px; }
}

/* In short embedded players, keep lesson navigation on one row so the
   illustrated conversation is visible before the learner starts scrolling. */
@media(max-height:550px) and (min-width:721px) {
  .guided-course-header { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; margin-bottom:8px; }
  .guided-course-header .guided-top { margin:0; gap:8px; }
  .guided-course-header .guided-course-status { margin:0; gap:15px; }
  .guided-card:is([data-guided-view="learn"],[data-guided-view="practice"]) .guided-body { padding-top:12px; }
}