/* Sansan scene reference: concerns → one solution and explanatory visual per row.
   Local Shabelish content and palette only. */
.study-sansan{--accent:#d23339;--soft:#f5f5f5;--ink:#222;background:#fff;color:var(--ink)}
.study-sansan main{font-family:'Zen Kaku Gothic New',sans-serif}
.study-sansan main *{box-sizing:border-box}
.ss-wrap{width:calc(100% - 96px);max-width:1100px;margin:0 auto}
.study-sansan main h1,.study-sansan main h2,.study-sansan main h3{letter-spacing:.025em;line-height:1.55;word-break:normal;overflow-wrap:normal;margin:0;font-weight:700}
.study-sansan main p{line-height:1.95}
.study-sansan main h2{font-size:34px}
.study-sansan main a{color:inherit}
.study-sansan main section{scroll-margin-top:100px}
.ss-hero{background:var(--soft);padding:24px 0 66px}
.ss-crumb{font-size:12px;color:#79736e;margin-bottom:44px}.ss-crumb a{text-decoration:none}
.ss-hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.ss-eyebrow{color:var(--accent);font-size:14px;font-weight:700;letter-spacing:.12em;margin:0 0 18px}
.study-sansan .ss-hero h1{font-size:54px;line-height:1.45;letter-spacing:.045em}
.ss-hero h1 em{font-style:normal;color:var(--accent)}
.ss-lead{font-size:16px;margin:24px 0}
.ss-hero figure{position:relative;margin:0;padding-bottom:25px}
.ss-hero img{display:block;width:100%;height:420px;object-fit:cover;object-position:48% center;border-radius:0 58px 0 58px}
.ss-hero figcaption{position:absolute;bottom:0;right:0;letter-spacing:.2em;color:#a99587;font-size:11px}
.ss-button{display:inline-flex;gap:42px;align-items:center;background:var(--accent);color:white!important;padding:15px 24px;border-radius:4px;text-decoration:none;font-weight:700;font-size:15px}
.ss-concerns{padding:76px 0;background:white}.ss-concerns h2{text-align:center}
.ss-concern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:40px}
.ss-concern-grid>a{padding:26px 25px 22px;background:#f5f3f1;border-radius:5px;text-decoration:none;border-bottom:3px solid #d9c7bd;transition:border-color .2s}
.ss-concern-grid>a:hover{border-color:var(--accent)}
.ss-concern-grid small{font-size:12px;color:#7b716a}.study-sansan .ss-concern-grid h3{font-size:22px;margin:14px 0 24px}.ss-concern-grid span{font-size:13px;color:var(--accent);font-weight:700}
.ss-intro{background:var(--soft);padding:64px 0 58px;text-align:center;position:relative}.ss-intro:before{content:'';border:20px solid transparent;border-top-color:white;position:absolute;left:calc(50% - 20px);top:0}
.ss-intro p:last-child{margin:20px 0 0;color:#6c635e;font-size:15px}
.ss-feature{padding:78px 0}.ss-tinted{background:#f4f1ee}
.ss-feature-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:center}
.ss-number{display:flex;align-items:center;gap:16px;color:var(--accent);font:36px/1.2 'Reem Kufi',sans-serif;margin:0 0 22px!important}.ss-number span{font:13px/1.8 'Zen Kaku Gothic New',sans-serif;color:#81736a}
.ss-feature-copy>p:not(.ss-number){font-size:16px;margin:22px 0 24px;max-width:440px}
.ss-textlink{font-size:14px;color:var(--accent)!important;text-decoration:none;border-bottom:1px solid #d4b7aa;padding:0 0 7px;display:inline-block}
.ss-example{background:#eee8e2;padding:32px;border-radius:8px;min-width:0}
.study-sansan .study-paper{padding:28px 24px 22px;box-shadow:5px 5px 0 #dcd0c7}.study-sansan .study-step{font-size:12px;margin:0 0 22px;color:#8c7465}
.study-sansan .c-case-sample{background:none;border:0;padding:0;margin:0}.study-sansan .c-case-sample__en{font-size:25px;line-height:1.8;margin:0 0 18px;font-weight:500;overflow-wrap:normal;word-break:normal}.study-sansan .c-case-sample__ja{font-size:13px;line-height:1.9;margin:0;color:#6b635d}
.study-sansan .c-case-legend{padding:18px 0 0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:10px 16px;font-size:11px;border-top:1px solid #e6ded8;list-style:none}.study-sansan .study-mark-details{margin-top:18px;font-size:11px}.study-diagram-panels{display:grid;grid-template-columns:repeat(3,1fr)}.study-diagram-panels svg{width:100%;height:auto}
.ss-practice-visual{padding:34px;background:#fff;border:1px solid #e5dcd6;border-radius:8px}.ss-word small{font-size:12px;color:#89776b}.ss-word p{font:32px/1.6 Georgia,serif!important;margin:18px 0 10px}.ss-word em{font-style:normal;color:var(--accent);border-bottom:2px solid var(--accent)}.ss-word>span{font-size:12px;color:#81756d}
.ss-practice-flow{list-style:none;padding:22px 0 0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #e7ded7;gap:12px}.ss-practice-flow li{display:flex;flex-direction:column;gap:10px;position:relative}.ss-practice-flow b{font:20px 'Reem Kufi',sans-serif;color:var(--accent)}.ss-practice-flow span{font-size:13px;font-weight:700}.ss-wave{letter-spacing:5px;font-size:23px;color:#c59380;padding-top:22px;overflow:hidden;white-space:nowrap}
.ss-conversation{background:#eee8e2;padding:32px 34px;border-radius:8px}.ss-conversation>small{font-size:11px;letter-spacing:.08em;color:#81736a}.ss-turn{margin-top:22px}.ss-turn>span{display:block;font-size:12px;color:#7d6c5f;margin-bottom:6px}.ss-turn p{font:25px/1.6 Georgia,serif!important;background:white;padding:18px 22px;display:inline-block;border-radius:0 12px 12px;margin:0}.ss-self{text-align:right}.ss-self p{background:var(--accent);color:#fff;text-align:left;border-radius:12px 0 12px 12px;font-size:23px!important}.ss-conversation-foot{border-top:1px solid #d6c8bc;margin-top:26px;padding-top:17px;font-size:12px;color:#7b6759;text-align:center}
.study-sansan .reference-overview{max-width:none;margin-top:32px}.reference-overview .c-case-approach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ss-case{background:var(--soft);padding:76px 0}.ss-case-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.ss-case-heading>div>p:last-child{font-size:13px;color:#756a62;margin-top:18px}.ss-case dl{margin:0;border-top:1px solid #d7ccc3}.ss-case dl>div{padding:20px 0;border-bottom:1px solid #d7ccc3}.ss-case dt{font-size:12px;color:#887468;margin-bottom:8px}.ss-case dd{font-size:16px;line-height:1.8;margin:0}.ss-case #voice{padding-top:44px;scroll-margin-top:110px}.ss-case #voice h3{font-size:22px;margin:0 0 22px}
.study-sansan .study-audio{max-width:none;margin:0}.study-sansan .c-voice-ba__rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.study-sansan .c-voice-ba__row{display:block;background:#fff;padding:26px 30px}.study-sansan .c-voice-ba__row--after{background:#f1e1da}.voice-period{display:block;color:#90796c;font-size:11px;letter-spacing:.14em}.c-voice-ba__row>b{display:block;font-size:23px;margin:12px 0}.voice-kind{font-size:13px;color:#88766b;margin:0 0 20px}.study-sansan .c-player{width:100%;display:flex;align-items:center;gap:16px;padding-top:20px;border-top:1px solid #dfd2ca}.study-sansan .c-player__bar{flex:1}.study-sansan .c-player__btn{flex:0 0 44px}.study-sansan .c-player__time{font-size:11px;white-space:nowrap}
.ss-story{margin-top:40px}.study-sansan .study-story-link{border-radius:5px}.study-sansan .study-story-link__copy strong{font-size:22px}
.study-sansan #counseling{padding:72px 0;background:#fff;color:var(--ink);text-align:center}.study-sansan #counseling .c-container{max-width:1100px;width:calc(100% - 96px);display:block}.study-sansan #counseling h2{font-size:30px;color:var(--ink)}.study-sansan #counseling p{color:#645c56;font-size:15px;margin:24px 0}.study-sansan #counseling .c-cta__action{margin-top:28px}.study-sansan #counseling .c-btn{background:var(--accent);color:#fff;padding:20px 36px}.study-sansan #counseling .c-cta__points{justify-content:center;color:#756a64;margin-top:18px}.ss-notes{padding:0 0 36px;font-size:12px;color:#877d75}
.study-sansan main a:focus-visible{outline:3px solid #d23339;outline-offset:5px}
@media(max-width:767px){.ss-wrap{width:calc(100% - 40px)}.study-sansan main h2{font-size:27px}.ss-hero{padding:20px 0 40px}.ss-crumb{margin-bottom:26px;font-size:11px}.ss-hero-grid{grid-template-columns:1fr;gap:30px}.study-sansan .ss-hero h1{font-size:42px}.ss-hero h1 br:first-child{display:none}.ss-hero img{height:240px;border-radius:0 35px}.ss-lead{font-size:14px}.ss-concerns,.ss-case{padding:48px 0}.ss-concern-grid{grid-template-columns:1fr;gap:12px;margin-top:28px}.ss-concern-grid>a{padding:20px 24px}.study-sansan .ss-concern-grid h3{font-size:21px;margin:8px 0 12px}.ss-concern-grid h3 br{display:none}.ss-intro{padding:48px 0 40px}.ss-intro p:last-child{font-size:14px}.ss-feature{padding:46px 0}.ss-feature-grid,.ss-case-heading{grid-template-columns:1fr;gap:28px}.ss-number{font-size:29px}.ss-number span{font-size:12px}.ss-feature-copy>p:not(.ss-number){font-size:15px}.ss-example{padding:20px}.study-sansan .study-paper{padding:22px 18px}.study-sansan .c-case-sample__en{font-size:22px}.ss-practice-visual,.ss-conversation{padding:26px 22px}.ss-practice-flow span{font-size:11px}.ss-turn p{font-size:23px!important}.ss-self p{font-size:21px!important}.ss-conversation-foot{font-size:11px}.reference-overview .c-case-approach{grid-template-columns:1fr}.study-sansan .c-voice-ba__rows{grid-template-columns:1fr;gap:16px}.study-sansan .c-voice-ba__row{padding:24px}.ss-story{margin-top:28px}.study-sansan .study-story-link__copy strong{font-size:19px}.study-sansan #counseling{padding:48px 0}.study-sansan #counseling .c-container{width:calc(100% - 40px)}.study-sansan #counseling h2{font-size:26px}.study-sansan #counseling .c-btn{padding:18px;font-size:15px}.study-pc-break{display:none}}
.ss-feature-grid>*{min-width:0;max-width:100%}.ss-wave{max-width:100%}.ss-case-heading>*{min-width:0}
/* Reference correction: small page-title band, then white two-column introduction. */
.ss-title-band{background:var(--soft);padding:22px 0 56px}
.ss-title-band .ss-crumb{margin-bottom:32px}
.ss-title-band>.ss-wrap>p{font-size:13px;color:#786c64;margin:0 0 8px}
.study-sansan .ss-title-band h1{font-size:32px;color:var(--accent);line-height:1.5}
.ss-title-band h1:after{content:'';display:block;width:40px;height:3px;background:var(--accent);margin-top:20px}
.ss-hero{background:white;padding:62px 0 68px;position:relative;margin-top:-20px;border-radius:20px 20px 0 0}
.ss-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.study-sansan .ss-hero h1{font-size:34px;line-height:1.65;letter-spacing:.025em;color:var(--accent)}
.ss-hero h1:after{content:'';display:block;width:40px;height:3px;background:var(--accent);margin-top:24px}
.ss-lead{font-size:15px;line-height:2;margin:26px 0 0}
.ss-hero figure{padding:0}.ss-hero img{height:auto;aspect-ratio:1.55;object-fit:cover;border-radius:8px}
.ss-concerns{padding:0 0 64px}.ss-concerns>.ss-wrap{background:#f6f5f3;padding:40px 36px}
.study-sansan .ss-concerns h2{font-size:24px}.ss-concern-grid{gap:16px;margin-top:30px}.ss-concern-grid>a{background:white;border:0;border-radius:0;text-align:center;padding:26px 14px}.study-sansan .ss-concern-grid h3{font-size:20px}
.ss-intro{background:white;padding:35px 0 28px}.ss-intro:before{display:none}.study-sansan .ss-intro h2{color:var(--accent);font-size:32px}
.ss-feature,.ss-tinted{background:#fff;padding:64px 0}
.ss-number{font-size:58px;color:#eadbd6;display:block;margin-bottom:12px!important}.ss-number span{display:block;width:fit-content;border-radius:20px;background:var(--accent);color:white;padding:3px 14px;margin-top:8px;font-size:12px}
.study-sansan .ss-feature-copy h2{color:var(--accent);font-size:29px;line-height:1.6}.ss-feature-copy h2:after{content:'';display:block;width:32px;height:3px;background:var(--accent);margin-top:22px}
@media(max-width:767px){.ss-title-band{padding:20px 0 40px}.study-sansan .ss-title-band h1{font-size:26px}.ss-hero{padding:36px 0 40px}.ss-hero-grid{grid-template-columns:1fr;gap:26px}.study-sansan .ss-hero h1{font-size:27px}.ss-lead{font-size:14px}.ss-concerns{padding-bottom:36px}.ss-concerns>.ss-wrap{padding:28px 18px}.study-sansan .ss-concerns h2{font-size:22px}.ss-concern-grid{gap:12px}.ss-intro{padding:20px 0}.study-sansan .ss-intro h2{font-size:26px}.ss-feature{padding:38px 0}.study-sansan .ss-feature-copy h2{font-size:26px}.ss-number{font-size:46px}}
/* Center the constrained CTA paragraph on the same axis as title and button. */
.study-sansan #counseling .c-cta__lead{width:100%;max-width:48em;margin:24px auto;text-align:center}
/* Keep the learner, concern and practice together, as in the approved profile. */
.ss-case-heading{display:block;max-width:880px}
.ss-case-heading dl{margin:26px 0 0;border-top:0}
.ss-case-heading dl>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:baseline;padding:8px 0;border-bottom:0}
.ss-case-heading dt{margin:0;line-height:1.9}
.ss-case-heading dd{line-height:1.9}
@media(max-width:767px){.ss-case-heading dl>div{grid-template-columns:1fr;gap:4px;padding:9px 0}.ss-case-heading dd{font-size:15px}}

/* One primary heading; page category stays secondary. */
.ss-title-band{padding:18px 0 28px}
.ss-title-band .ss-crumb{margin-bottom:18px}
.ss-title-band>.ss-wrap>p:not(.ss-page-label){display:none}
.ss-title-band>.ss-wrap>.ss-page-label{font-size:14px;font-weight:500;color:#786c64;margin:0;letter-spacing:.04em}
.study-sansan .ss-hero h1{font-size:34px;line-height:1.65;letter-spacing:.025em;color:var(--accent)}
.ss-hero{padding-top:44px}
@media(max-width:767px){.study-sansan .ss-hero h1{font-size:27px}.ss-hero{padding-top:30px}.ss-hero h1 br:first-child{display:initial}}
/* A single continuous introduction, without the redundant title strip. */
.study-sansan .ss-hero{margin-top:0;border-radius:0;padding:22px 0 64px}
.ss-hero .ss-crumb{margin:0 0 38px;color:#8b827c}
.ss-hero .ss-page-label{font-size:13px;font-weight:500;letter-spacing:.08em;color:#82756d;margin:0 0 16px}
.ss-hero-grid{align-items:center}
@media(max-width:767px){.study-sansan .ss-hero{padding:18px 0 40px}.ss-hero .ss-crumb{margin-bottom:28px}.ss-hero .ss-page-label{margin-bottom:12px}}

/* Official Shabelish typography and brand, verified against /shabelish/plan. */
.study-sansan .ss-hero h1{font-size:40px;line-height:1.55;color:var(--ink)}
.study-sansan .ss-intro h2,.study-sansan .ss-feature-copy h2{color:var(--ink)}
.ss-hero .ss-page-label{color:var(--accent);font-weight:700}
.ss-hero h1:after{display:none}
.ss-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px}
.ss-hero img{border-radius:4px}
.ss-concerns>.ss-wrap{background:#f5f5f5}
.ss-example,.ss-conversation{background:#f3f3f3;border-radius:4px}
.ss-practice-visual,.study-sansan .study-story-link{border-radius:4px;border-color:#ddd}
.study-sansan .c-voice-ba__row--after{background:#fbecee}
.ss-number{color:#e5e5e5}
.ss-case dt,.ss-number span,.ss-crumb,.ss-case-heading>div>p:last-child{color:#666}
.ss-number span{color:white}
.study-sansan #counseling .c-btn{border-radius:4px}
.study-sansan .c-player__btn,.study-sansan .study-story-link__arrow{background:var(--accent)}
@media(max-width:767px){
 .study-sansan .ss-hero h1{font-size:28px;line-height:1.6}
 .ss-hero-grid{grid-template-columns:1fr;gap:26px}
}

/* Practice demonstrations: silent, viewport-triggered, replay on return. */
.ss-wave{display:flex;align-items:center;justify-content:space-between;height:64px;gap:5px;padding-top:18px}
.ss-wave i{display:block;width:6px;height:var(--height);background:var(--accent);border-radius:4px;opacity:.35;transform:scaleY(.3)}
.motion-on .ss-wave i{animation:ss-wave .85s ease-in-out infinite alternate;animation-delay:var(--delay)}
.ss-practice-flow li{padding:10px 5px;border-bottom:3px solid transparent;transition:background .4s,border-color .4s}
.motion-on .ss-practice-flow li.is-active{background:#fbecee;border-color:var(--accent)}
.motion-on[data-step="0"] .ss-word em{animation:ss-stress 1.3s ease-in-out infinite}
.motion-on[data-step="2"] .ss-word em{background:#fbecee;box-shadow:0 3px 0 var(--accent)}
.ss-conversation{min-height:420px;overflow:hidden}
.ss-turn{transition:opacity .6s,transform .6s;position:relative}
.ss-turn>span{display:flex;align-items:center;gap:8px}
.ss-turn>span:before{content:'';width:24px;height:24px;border:1px solid #bbb;border-radius:50%;background:radial-gradient(circle at 50% 35%,#888 0 4px,transparent 4.5px),radial-gradient(ellipse at 50% 105%,#888 0 9px,transparent 9.5px)}
.ss-self>span{justify-content:flex-end}
.motion-on[data-step="0"] .ss-self{opacity:0;transform:translateY(12px)}
.motion-on[data-step="0"] .ss-turn:not(.ss-self)>span:before{box-shadow:0 0 0 5px #e0e0e0}
.motion-on[data-step="1"] .ss-self>span:before{box-shadow:0 0 0 5px #f5dadd}
.motion-on[data-step="1"] .ss-self{opacity:1;transform:translateY(0)}
.motion-on .ss-conversation-foot{transition:opacity .5s}
.motion-on[data-step="0"] .ss-conversation-foot,.motion-on[data-step="1"] .ss-conversation-foot{opacity:0}
@keyframes ss-wave{to{transform:scaleY(1);opacity:.9}}
@keyframes ss-stress{50%{background:#fbecee;color:#d23339}}
@media(prefers-reduced-motion:reduce){.ss-turn,.ss-practice-flow li{transition:none}.ss-wave i{transform:none}}
@media(max-width:767px){.ss-conversation{min-height:410px}}

/* Clear head-and-shoulders person icons for both speakers. */
.ss-turn>span:before{width:40px;height:40px;flex:0 0 40px;border:0;background:#fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2213%22%20r%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%23555%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2033v-3c0-6%205-10%2012-10s12%204%2012%2010v3%22%20fill%3D%22none%22%20stroke%3D%22%23555%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/34px 34px no-repeat}
.ss-self>span:before{background-color:#fbecee}

/* Each step demonstrates a different action, rather than only changing its number. */
.study-sansan .ss-word>p{font-size:30px!important;line-height:1.6!important}
.practice-stage{position:relative;height:152px;margin-top:22px;border-top:1px solid #eee}
.practice-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.practice-scene strong{font:700 16px/1.5 'Zen Kaku Gothic New',sans-serif}
.practice-symbol{font:42px/1 Georgia,serif;color:var(--accent)}
.practice-scene svg{width:42px;height:42px;color:var(--accent)}
.practice-feedback{background:#fbecee;padding:7px 14px;border-radius:4px;font-size:14px}
.stage-advice>span:last-child{font-size:12px;color:#666}
.record-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;animation:ss-stress 1s infinite}
.ss-practice-visual:not(.motion-on) .stage-advice,.ss-practice-visual[data-step="0"].motion-on .stage-listen,.ss-practice-visual[data-step="1"].motion-on .stage-record,.ss-practice-visual[data-step="2"].motion-on .stage-advice{opacity:1;transform:none}
.motion-on[data-step="0"] .spoken-word{animation:spoken-word 2.6s linear infinite}
.motion-on[data-step="0"] .spoken-word:nth-child(2){animation-delay:.4s}.motion-on[data-step="0"] .spoken-word:nth-child(3){animation-delay:.8s}.motion-on[data-step="0"] .spoken-word:nth-child(4){animation-delay:1.2s}.motion-on[data-step="0"] .spoken-word:nth-child(5){animation-delay:1.6s}
.motion-on[data-step="2"] .spoken-word:last-child{color:var(--accent);text-decoration:underline;text-underline-offset:6px}
@keyframes spoken-word{0%,22%{color:#d23339;background:#fbecee}23%,100%{color:inherit;background:transparent}}
@media(prefers-reduced-motion:reduce){.practice-scene{transition:none}.record-dot{animation:none}}
@media(max-width:767px){.study-sansan .ss-word>p{font-size:26px!important}.practice-feedback{font-size:13px}}

/* Three linked exchanges, with a stable stage and no page reflow. */
.ss-conversation .ss-turn:not(.ss-self){height:150px}
.ss-conversation .ss-self{height:166px}
.ss-conversation.motion-on .ss-self{opacity:1;transform:none}
.ss-conversation.motion-on[data-speaking="teacher"] .ss-self{opacity:0;transform:translateY(12px)}
.ss-conversation.motion-on .ss-turn>span:before{box-shadow:none}
.ss-conversation.motion-on[data-speaking="teacher"] .ss-turn:not(.ss-self)>span:before{box-shadow:0 0 0 5px #e0e0e0}
.ss-conversation.motion-on[data-speaking="student"] .ss-self>span:before{box-shadow:0 0 0 5px #f5dadd}
.ss-conversation.motion-on .ss-conversation-foot{opacity:1}
.ss-conversation .ss-turn p{max-width:100%;font-size:23px!important}
@media(max-width:767px){.ss-conversation .ss-turn p{font-size:21px!important}}

/* Expanded practice details: contain copy with consistent padding and rhythm. */
.study-sansan .reference-overview .c-case-approach{align-items:stretch;gap:24px;margin-top:20px}
.study-sansan .reference-overview .c-case-approach__item{padding:28px;background:#f7f7f7;border:0;min-width:0}
.study-sansan .reference-overview .c-case-approach__item p{margin:0;font-size:14px;line-height:1.95;word-break:normal;overflow-wrap:anywhere}
.study-sansan .reference-overview .c-case-approach__item .c-case-approach__label{font-size:16px;font-weight:700;line-height:1.75;min-height:0;margin:0 0 16px;padding:0;border:0}
@media(max-width:767px){.study-sansan .reference-overview .c-case-approach{gap:16px}.study-sansan .reference-overview .c-case-approach__item{padding:24px}.study-sansan .reference-overview .c-case-approach__item .c-case-approach__label{min-height:0;margin-bottom:12px}}

/* Integrated learning illustrations: paper, feedback and people carry the story. */
.ss-practice-visual{background:#f4f4f4;border:0;padding:30px;position:relative}
.ss-practice-visual .ss-word{background:#fff;padding:28px 26px 18px;border-top:3px solid var(--accent);box-shadow:0 8px 24px #22200009;position:relative}
.study-sansan .ss-word>p{margin:24px 0 8px!important}
.practice-stage{height:115px;margin-top:20px;border-top:0}
.practice-scene{align-items:flex-start;gap:6px;justify-content:center}
.stage-listen .practice-symbol,.stage-record svg{position:absolute;right:4px;width:38px;height:38px;opacity:.7}
.practice-scene strong{font-size:15px}
.stage-advice{background:#fff5f5;border-left:3px solid var(--accent);padding:12px 16px}
.practice-feedback{padding:0;background:none;font-weight:700}
.stage-advice strong{font-size:22px}
.ss-practice-visual .ss-wave{height:40px;padding-top:8px;margin-top:12px;border-top:1px solid #eee}
.ss-practice-visual .ss-wave i{width:4px;max-height:24px}
.ss-practice-flow{margin:20px 0 0;padding:0;border:0;gap:8px}
.ss-practice-flow li{padding:8px 4px;border:0;background:none!important;opacity:.4}
.ss-practice-flow li.is-active{opacity:1}
.ss-practice-flow li b{font-size:14px}.ss-practice-flow li span{font-size:11px}
.ss-conversation{padding:28px 30px;min-height:0;background:#f4f4f4}
.ss-conversation>small{display:none}
.conversation-people{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.conversation-people>div{display:flex;flex-direction:column;align-items:center;gap:5px;color:#555;font-size:12px}
.conversation-people>div:last-child{color:var(--accent)}
.conversation-people svg{width:60px;height:60px}
.conversation-connector{font-size:9px;letter-spacing:.12em;color:#888}
.ss-conversation .ss-turn:not(.ss-self),.ss-conversation .ss-self{height:auto;min-height:112px;margin:0 0 16px}
.ss-conversation .ss-turn>span{display:none}
.ss-conversation .ss-turn p{font-size:22px!important;padding:15px 18px;box-shadow:0 3px 12px #00000004}
.ss-conversation .ss-self p{border-radius:12px 0 12px 12px}
.turn-translation{display:block;margin-top:8px;font-size:12px;color:#666;line-height:1.6}
.ss-conversation.motion-on[data-speaking="teacher"] .ss-self{opacity:.38;transform:none}
.ss-conversation.motion-on[data-speaking="student"] .ss-self{opacity:1;transform:none}
.ss-conversation.motion-on[data-speaking="teacher"] .conversation-people>div:first-child svg{filter:drop-shadow(0 0 5px #bbb)}
.ss-conversation.motion-on[data-speaking="student"] .conversation-people>div:last-child svg{filter:drop-shadow(0 0 5px #efc4c6)}
.ss-conversation-foot{margin-top:8px;padding-top:14px;border-color:#ddd;font-size:11px}
@media(max-width:767px){.ss-practice-visual,.ss-conversation{padding:22px 18px}.ss-practice-visual .ss-word{padding:22px 18px 16px}.ss-conversation .ss-turn p{font-size:20px!important}.conversation-connector{font-size:8px}.conversation-people svg{width:48px;height:48px}}

/* Feedback is a pronunciation mark and stress diagram, not a callout. */
.stage-advice{background:none;border:0;padding:0;display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-content:center;align-items:center}
.stage-advice .feedback-caption{font-size:12px;color:#777}
.stage-advice>span:last-child{grid-column:1;font-size:14px;color:#222}
.stress-beats{grid-column:2;grid-row:1 / 3;display:flex;align-items:flex-end;gap:14px;padding-right:8px}
.stress-beats>span{display:flex;flex-direction:column;align-items:center;gap:8px;font:17px/1.2 Georgia,serif;color:#888}
.stress-beats i{display:block;width:9px;height:9px;border-radius:50%;background:#bbb}
.stress-beats>span:last-child{color:var(--accent)}
.stress-beats>span:last-child i{width:23px;height:23px;background:var(--accent)}
.motion-on[data-step="2"] .spoken-word:last-child{color:inherit;text-decoration:none}
.motion-on[data-step="2"] .stress-syllable{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.motion-on[data-step="2"] .stress-beats>span:last-child i{animation:stress-beat 1.5s ease-in-out infinite}
@keyframes stress-beat{50%{transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.stress-beats i{animation:none!important}}

/* Longer dialogue: readable lines and enough room for reasons and examples. */
.ss-conversation .ss-turn p{font-size:19px!important;line-height:1.65!important;text-align:left}
.ss-conversation .turn-translation{font-size:13px;line-height:1.85;text-align:left}
.ss-conversation .ss-turn:not(.ss-self){min-height:150px}
.ss-conversation .ss-self{min-height:285px}
.ss-conversation .ss-self .turn-translation{max-width:100%}
@media(max-width:767px){.ss-conversation .ss-turn p{font-size:18px!important}.ss-conversation .ss-turn:not(.ss-self){min-height:180px}.ss-conversation .ss-self{min-height:355px}}

/* Only one practice action is visible; no overlapping text during a transition. */
.practice-scene{visibility:hidden;transition:none}
.ss-practice-visual:not(.motion-on) .stage-advice,.ss-practice-visual[data-step="0"].motion-on .stage-listen,.ss-practice-visual[data-step="1"].motion-on .stage-record,.ss-practice-visual[data-step="2"].motion-on .stage-advice{visibility:visible}
.stage-advice{display:flex;align-items:flex-start;justify-content:center;gap:8px}
.stage-advice strong{font-family:'Zen Kaku Gothic New',sans-serif;font-size:17px;line-height:1.7;color:var(--accent)}
.stage-advice>span:last-child{font-size:12px;color:#666;line-height:1.7}
.stage-listen .practice-symbol{font-size:42px}

/* Waveform represents listening/recording only, never feedback. */
.ss-practice-visual .ss-wave{visibility:hidden}
.ss-practice-visual .ss-wave i{animation:none;transform:scaleY(.3)}
.ss-practice-visual.motion-on[data-step="0"] .ss-wave,.ss-practice-visual.motion-on[data-step="1"] .ss-wave{visibility:visible}
.ss-practice-visual.motion-on[data-step="0"] .ss-wave i,.ss-practice-visual.motion-on[data-step="1"] .ss-wave i{animation:ss-wave .85s ease-in-out infinite alternate;animation-delay:var(--delay)}

/* Short conversational turns, without long-reading slide-sized gaps. */
.ss-conversation .ss-turn:not(.ss-self){min-height:135px}
.ss-conversation .ss-self{min-height:190px}
.ss-conversation .ss-turn p{transition:background .2s}
@media(max-width:767px){.ss-conversation .ss-turn:not(.ss-self){min-height:145px}.ss-conversation .ss-self{min-height:225px}}

/* Let the final reply end naturally without a reserved blank area below it. */
.study-sansan .ss-conversation .ss-self{min-height:0;height:auto;margin-bottom:0}

/* Tighten the gap between the question translation and the reply. */
.study-sansan .ss-conversation .ss-turn:not(.ss-self){min-height:0;height:auto;margin-bottom:28px}

/* Keep the pronunciation example compact and focused on one intention. */
.study-sansan .ss-practice-visual{padding:24px}
.study-sansan .ss-practice-visual .ss-word{padding:22px 24px 14px}
.study-sansan .ss-word>p{font-size:25px!important;line-height:1.6!important;margin:16px 0 10px!important}
.ss-practice-visual .practice-stage{height:88px;margin-top:12px}
.ss-practice-visual .ss-practice-flow{margin-top:12px}
.ss-practice-visual .ss-wave{height:30px;margin-top:6px;padding-top:6px}
@media(max-width:767px){.study-sansan .ss-practice-visual{padding:18px}.study-sansan .ss-practice-visual .ss-word{padding:20px 18px 12px}.study-sansan .ss-word>p{font-size:23px!important}}

/* Separate the sentence translation from the feedback, without squeezing its lines. */
.ss-practice-visual .practice-stage{height:112px;margin-top:28px}
.ss-practice-visual .stage-advice{gap:12px}
.ss-practice-visual .stage-advice .feedback-caption{line-height:1.6}
.ss-practice-visual .stage-advice strong{line-height:1.8}
.study-sansan .ss-practice-visual .ss-word{padding-bottom:20px}