:root{--ink:#223248;--muted:#718095;--blue:#3268cb;--line:#e1e6eb;--paper:#fff;--soft:#eef4ff;--warm:#faf8f4;font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;color:var(--ink);background:var(--warm);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit;min-height:44px;border-radius:12px;padding:10px 16px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #f0b66f;outline-offset:3px}button:hover{filter:brightness(.97)}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1{font-size:32px;letter-spacing:-1.1px;line-height:1.4}h2{letter-spacing:-.6px}h3{font-size:15px}p{line-height:1.65}.muted{color:var(--muted);font-size:14px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.8px;color:#7a899e;margin-bottom:9px}.topbar{max-width:1240px;margin:auto;display:flex;align-items:center;padding:26px 38px;gap:22px}.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:750;letter-spacing:-.7px}.brand-mark{display:grid;place-items:center;background:var(--blue);color:white;border-radius:11px;width:34px;height:34px;font-family:Georgia,serif;font-weight:normal;font-size:24px}.prototype-tag{font-size:11px;color:var(--muted);padding-top:3px}.topbar>.quiet{margin-left:auto}.quiet{background:#f0f2f4;font-size:13px;color:#546377}.shell{max-width:1156px;margin:22px auto 60px;display:grid;grid-template-columns:218px minmax(0,780px);gap:62px;padding:0 24px}.sidebar{padding-top:8px}.sidebar h2{font-size:26px}.chapter-title{margin-top:8px;font-size:16px;font-weight:600}.sidebar nav{margin-top:36px;display:flex;flex-direction:column;gap:7px}.group-button{text-align:left;display:flex;align-items:center;gap:12px;padding:14px 12px;min-height:58px;font-size:13px}.group-button[aria-current=true]{background:white;box-shadow:0 4px 20px #25375b08;color:var(--blue)}.group-number{font-size:11px;display:grid;place-items:center;background:#e9edf1;color:#7d8998;width:28px;height:28px;border-radius:9px;flex-shrink:0}.group-button[aria-current=true] .group-number{background:var(--blue);color:white}.group-sub{display:block;font-size:10px;color:#8290a1;margin-top:5px}.side-note{border-top:1px solid var(--line);margin-top:42px;padding:24px 10px;display:flex;gap:12px;font-size:12px;color:var(--muted);line-height:1.8}.side-note>span{color:var(--blue);font-size:24px}.mode-switch{display:flex;padding:5px;background:#eaeef1;border-radius:16px;max-width:356px;margin-bottom:30px;gap:4px}.mode-switch button{flex:1;font-weight:700;font-size:14px;padding:12px 15px}.mode-switch button span{display:inline-block;color:#8290a1;margin-left:5px;font-size:10px;font-weight:400}.mode-switch button[aria-pressed=true]{background:white;box-shadow:0 2px 7px #2232480b}.intro .muted{margin-top:8px}.steps{display:flex;list-style:none;padding:0;margin:25px 0 20px;justify-content:space-between;gap:5px}.steps li{flex:1}.steps button{display:flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap;padding:8px 5px;min-height:42px;width:100%;color:#8b95a4;border-radius:0;border-bottom:2px solid var(--line)}.steps button[aria-current=step]{color:var(--blue);font-weight:700;border-color:var(--blue)}.step-number{font-size:10px;border-radius:50%;background:#e8ecf1;width:20px;height:20px;display:grid;place-items:center}.steps button[aria-current=step] .step-number{background:var(--blue);color:white}.cold-note{font-size:12px;color:#946b35;background:#fbefd9;padding:12px 16px;border-radius:12px;margin-bottom:16px;line-height:1.6}.cold-note span{margin-right:7px}.lesson-card{background:var(--paper);border:1px solid #e7e9ed;border-radius:24px;box-shadow:0 15px 45px #34485c07;padding:26px 28px 15px}.scene{display:flex;align-items:center;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line)}.scene h2{font-size:21px;margin-bottom:5px}.scene .muted{font-size:12px}.scene-art{width:93px;height:82px;border-radius:18px;background:#eef3ed;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.person{width:32px;height:45px;border-radius:20px 20px 9px 9px;display:grid;place-items:center;color:white;font-weight:700;font-size:12px}.person-a{background:#7c9ea9;transform:rotate(-8deg) translateY(-5px)}.person-b{background:#b4ad95;transform:rotate(8deg) translateY(7px)}.scene-link{color:#648293;align-self:flex-start;margin-top:12px;letter-spacing:2px}.lesson-toolbar{display:flex;align-items:center;justify-content:space-between;margin:15px 0;color:var(--muted);font-size:11px}.role-switch{display:flex;align-items:center;gap:5px}.role-switch>span{margin-right:5px}.role-switch button{min-width:44px;padding:7px;font-size:12px}.role-switch button[aria-pressed=true]{background:var(--soft);color:var(--blue);font-weight:700}.dialogue{display:flex;flex-direction:column;gap:18px}.utterance{display:flex;gap:12px;align-items:flex-start;max-width:95%}.utterance.speaker-b{align-self:flex-end;flex-direction:row-reverse}.speaker-badge{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#dce7f5;color:var(--blue);font-size:11px;font-weight:750;flex-shrink:0;margin-top:5px}.speaker-b .speaker-badge{background:#e7e9ec;color:#6a7887}.bubble{background:#f0f5ff;border-radius:3px 17px 17px 17px;padding:18px 20px;min-width:230px;max-width:520px}.speaker-b .bubble{background:#f3f4f6;border-radius:17px 3px 17px 17px}.turn-label{font-size:10px;font-weight:600;color:#8290a1;margin-bottom:8px}.english{font-size:19px;line-height:1.6;font-weight:550;letter-spacing:-.3px}.korean{font-size:12px;line-height:1.7;color:#768599;margin-top:8px}.concealed{display:flex;align-items:center;gap:8px;min-height:33px;font-size:13px;color:#8896a8}.concealed-dots{letter-spacing:4px;color:#a8b6c9}.first-word{font-size:15px;color:var(--blue);font-weight:650;margin-top:6px}.hint-status{font-size:11px;color:#947039;min-height:25px;padding-top:15px}.support-actions{display:flex;justify-content:center;gap:9px;margin:12px 0 22px}.support-actions .quiet{background:#f6f7f9}.speak-action{text-align:center;border-top:1px dashed var(--line);padding-top:22px}.speak-action p{font-size:12px;color:var(--muted);margin-bottom:12px}.primary{background:var(--blue);color:white;font-size:13px;font-weight:600;padding:14px 24px;border-radius:13px}.primary span{margin-left:22px;opacity:.8}.assessment{margin-top:21px;text-align:center}.assessment>p{font-size:12px;margin-bottom:10px}.rating-buttons{display:flex;gap:8px}.rating-buttons button{flex:1;background:#f5f6f8;border:1px solid var(--line);font-size:12px;padding:10px 6px}.rating-buttons span{display:block;font-size:18px;margin-bottom:4px;color:#71869f}.feedback{min-height:31px;margin-top:14px;font-size:12px;text-align:center;color:var(--blue)}.lesson-footer{display:flex;align-items:center;border-top:1px solid var(--line);padding-top:10px;gap:10px;font-size:11px;color:var(--muted)}.next{margin-left:auto;font-size:12px;color:var(--blue);font-weight:700}.next span{margin-left:12px}.below-card{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.audio-panel,.records-panel{border:1px solid var(--line);border-radius:16px;padding:18px;background:#ffffff75;font-size:12px}.audio-panel summary{cursor:pointer;line-height:1.7;padding:4px 0}.audio-panel p{font-size:11px;margin-top:10px}.audio-panel audio{width:100%;margin-top:12px;height:36px}.records-panel h2{font-size:12px;margin-bottom:10px}.records-panel .muted{font-size:11px}#records{padding:0;list-style:none;margin:0}#records li{font-size:11px;color:#687b91;line-height:1.6;padding:7px 0;border-bottom:1px solid var(--line)}.scope-note{font-size:10px;color:#96a0ae;line-height:1.8;margin-top:22px}.photo-slots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.photo-slot{padding:16px;border:1px solid var(--line);border-radius:16px}.photo-preview{height:180px;background:#f0f3f6;border-radius:10px;display:grid;place-items:center;margin:13px 0;font-size:12px;color:var(--muted);overflow:hidden}.photo-preview img{width:100%;height:100%;object-fit:contain}.photo-slot>div:last-child{display:flex;gap:7px}.photo-slot button{padding:10px 12px;font-size:12px}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.dialog-heading h2{font-size:23px}dialog{border:1px solid var(--line);border-radius:22px;padding:27px;width:min(660px,calc(100% - 28px));color:var(--ink);max-height:90dvh;overflow:auto}dialog::backdrop{background:#192c455c}#photo-status{font-size:12px;line-height:1.8;color:var(--muted)}
@media(max-width:900px){.shell{gap:26px;grid-template-columns:175px minmax(0,1fr)}.lesson-card{padding:22px}.topbar{padding:20px 26px}.mode-switch button span{display:none}.steps button{font-size:10px;gap:4px}.step-number{width:17px;height:17px}.below-card{grid-template-columns:1fr}.scene-art{width:74px}.bubble{min-width:190px}}
@media(max-width:640px){.topbar{padding:17px 18px;gap:10px}.brand{font-size:15px}.brand-mark{width:30px;height:30px;font-size:21px}.prototype-tag{display:none}.topbar>.quiet{font-size:11px;min-height:40px;padding:8px 12px}.shell{display:block;margin-top:5px;padding:0 16px}.sidebar{padding:0;margin-bottom:22px}.sidebar>.eyebrow,.sidebar>h2,.sidebar>.chapter-title,.sidebar>.muted,.side-note{display:none}.sidebar nav{flex-direction:row;overflow:auto;margin:0;padding-bottom:5px;gap:8px}.group-button{min-height:48px;flex-shrink:0;padding:7px 10px;font-size:11px;gap:7px;background:#efefed}.group-sub{display:none}.group-number{width:23px;height:23px;font-size:10px}.mode-switch{margin-bottom:24px;max-width:none}.mode-switch button span{display:inline-block}.intro h1{font-size:26px}.intro .muted{font-size:12px}.steps{margin-top:20px;gap:3px}.steps button{flex-direction:column;gap:7px;font-size:10px;padding:7px 1px;min-height:54px}.step-number{width:20px;height:20px}.lesson-card{padding:20px 16px 10px;border-radius:20px}.scene{gap:12px;padding-bottom:17px}.scene-art{width:65px;height:65px;border-radius:14px}.person{width:23px;height:36px}.scene h2{font-size:17px}.scene .eyebrow{font-size:9px;margin-bottom:6px}.scene .muted{font-size:11px}.scene-link{font-size:10px;letter-spacing:0}.utterance{gap:7px;max-width:100%}.bubble{padding:15px;min-width:210px;max-width:calc(100vw - 114px)}.english{font-size:17px}.speaker-badge{width:25px;height:25px;font-size:10px}.korean{font-size:11px}.support-actions button{font-size:11px}.speak-action>.primary{width:100%}.rating-buttons{gap:5px}.rating-buttons button{font-size:11px}.photo-slots{grid-template-columns:1fr}.dialog-heading h2{font-size:19px}.scope-note{font-size:10px}.cold-note{font-size:11px}.lesson-footer .quiet{font-size:10px;padding:5px 8px}#stage-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Complete learning flow */
:root{--muted:#657489}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.topbar .brand{padding:0}.profile-pill{font-size:13px;background:#e9eef7;color:#365b96;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.full{width:100%;margin-top:10px}.home-intro{padding:15px 0 28px}.home-intro h1{white-space:pre-line;font-size:42px;line-height:1.3;margin-bottom:16px}.home-intro>.muted{white-space:pre-line;font-size:16px}.home-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.home-tile{padding:26px;background:white;border:1px solid var(--line);border-radius:22px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}.home-tile h2{font-size:20px}.home-tile .muted{flex:1}.home-tile button{margin-top:6px;width:100%}.tile-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#eaf1ff;color:var(--blue);font-size:26px}.tile-icon.warm{background:#f8ecd6;color:#986e31}.chapter-overview{margin:26px 0 12px;padding:26px;background:#ffffff80;border:1px solid var(--line);border-radius:22px}.chapter-overview h2{font-size:21px;margin-bottom:9px}.progress-track{height:6px;border-radius:6px;background:#e8ecf1;margin:22px 0 10px;overflow:hidden}.progress-track>span{display:block;height:100%;background:var(--blue);border-radius:6px}.chapter-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:8px 0;font-size:14px}.chapter-row:last-child{border:0}.chapter-row .muted{margin-left:auto;white-space:nowrap;font-size:12px}.chapter-row button{font-size:12px;white-space:nowrap}.completion-dot{width:24px;height:24px;border-radius:50%;background:#edf2fa;color:var(--blue);display:grid;place-items:center;flex-shrink:0;font-size:12px}.resume-card{background:#edf3ff;border:1px solid #d7e4fa;padding:22px;border-radius:20px;margin-bottom:20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.resume-card>div,.resume-card>p{width:100%}.study-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.badge{font-size:12px;color:var(--blue);background:var(--soft);border-radius:8px;padding:7px 10px}.badge:empty{display:none}.step-marker{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;padding:10px 4px;min-height:44px;color:var(--muted);border-bottom:2px solid var(--line)}.step-marker[aria-current=step]{color:var(--blue);font-weight:700;border-color:var(--blue)}.step-marker[aria-current=step] .step-number{background:var(--blue);color:white}.task-actions{text-align:center;border-top:1px dashed var(--line);padding-top:16px;display:flex;flex-direction:column;gap:10px}.task-actions>p{font-size:14px}.task-actions .rating-buttons button{min-height:54px;font-size:13px}.needs-practice{display:flex;align-items:flex-start;text-align:left;gap:8px;padding:10px;font-size:13px;line-height:1.6}.needs-practice input{flex-shrink:0}.flow-audio{margin-top:18px}.flow-audio audio,dialog audio{width:100%;margin:15px 0}.flow-audio>button{margin-top:10px}.scope-note{font-size:12px;color:#6b798d}.bubble{min-width:min(230px,100%);overflow-wrap:anywhere}.korean{font-size:14px;color:#61718a}.turn-label{font-size:12px}.utterance{max-width:100%}.hint-status{font-size:12px}.lesson-toolbar{font-size:13px}.concealed{font-size:14px}.support-actions{flex-wrap:wrap}.support-actions select{width:auto;max-width:170px}.listening-cue{padding:16px;border:1px dashed #b7ccec;background:#f5f8fe;border-radius:14px;align-self:flex-start;font-size:14px}.scene .muted{font-size:13px}.result-mark{width:70px;height:70px;border-radius:24px;display:grid;place-items:center;color:#347462;background:#e6f0e8;font-size:34px;margin:20px 0}.result-card{padding:22px;background:white;border:1px solid var(--line);border-radius:18px;margin-top:18px}.result-card h2{font-size:18px;margin-bottom:12px}.result-card p+p{margin-top:7px}.next-due{margin:24px 0;color:var(--blue);font-weight:600}.dialog-footer{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:22px}.scope-options{display:flex;flex-direction:column;gap:10px;margin-top:20px}.scope-option{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;min-height:56px}.scope-option small{margin-left:auto;white-space:nowrap}.scope-option:has(input:checked){background:var(--soft);border-color:#a2bce6}input,select,textarea{font:inherit;color:var(--ink);border:1px solid #bac6d5;background:white;border-radius:10px;padding:11px;max-width:100%}input[type=checkbox]{width:19px;height:19px;accent-color:var(--blue)}select,textarea{width:100%;margin:8px 0 15px}label{font-size:14px}dialog>.muted{margin:15px 0}dialog h2{font-size:22px}.profile-list{margin:18px 0}.input-row{display:flex;gap:10px;margin:9px 0}.input-row input{min-width:0;flex:1}.table-scroll{overflow:auto;margin-top:24px;border:1px solid var(--line);border-radius:16px;background:white}.history-table{border-collapse:collapse;width:100%;min-width:610px;font-size:12px}.history-table th,.history-table td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:left;line-height:1.6}.history-table thead{background:#eef3fb}.history-table tbody th{font-weight:500;max-width:240px}.history-table td{min-width:95px}.result-card summary{cursor:pointer;min-height:30px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#223248;color:white;z-index:1000;border-radius:14px;padding:14px 22px;width:max-content;max-width:calc(100% - 32px);font-size:14px;line-height:1.6;box-shadow:0 5px 25px #22324826}.skip-link{position:fixed;left:12px;top:-100px;background:white;color:var(--blue);padding:12px;z-index:999}.skip-link:focus{top:12px}.error{background:#fff0e9;border:1px solid #eeb998;padding:20px;border-radius:16px;line-height:1.6}.segment-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.segment-inputs input{width:100%;margin-top:5px}.segment-text{padding:15px;background:#eef3fb;border-radius:10px;font-size:18px}.writing-prompt{white-space:pre-line;background:#eef3fb;padding:18px;border-radius:12px;line-height:1.7;margin:5px 0 20px}#writing-feedback{white-space:pre-line;font-size:14px;line-height:1.7;margin-top:15px}#segment-status,#audio-status{font-size:13px;line-height:1.6;margin-top:8px}#workspace:focus{outline:none}
@media(max-width:640px){.topbar{padding:16px;gap:6px}.header-actions{gap:5px}.header-actions button{padding:8px 10px;font-size:12px}.profile-pill{max-width:100px}.home-intro{padding-top:5px}.home-intro h1{font-size:34px}.home-intro>.muted{font-size:14px}.home-cards{grid-template-columns:1fr}.home-tile{padding:22px;gap:12px}.home-tile h2{font-size:19px}.chapter-overview{padding:20px 16px}.chapter-overview h2{font-size:19px}.chapter-row{font-size:13px;gap:7px}.chapter-row small{display:none}.chapter-row button{margin-left:auto;padding:9px 10px}.chapter-row>span:nth-child(2){flex:1}.step-marker{flex-direction:column;gap:7px;font-size:11px;padding:7px 0;min-height:57px}.bubble{min-width:0;max-width:calc(100vw - 102px);padding:16px}.english{font-size:18px}.korean{font-size:14px}.turn-label{font-size:11px}.scene h2{font-size:18px}.scene .muted{font-size:12px}.scene-art{display:none}.task-actions .rating-buttons{flex-direction:column}.task-actions .rating-buttons button{min-height:48px;font-size:14px}.lesson-toolbar{font-size:12px;gap:8px}.badge{font-size:11px}.scope-option{font-size:13px;padding:12px;gap:8px}.dialog-heading h2{font-size:20px}.scope-note{font-size:11px}.lesson-footer{font-size:12px}.next{font-size:14px;min-height:48px}.study-top{margin-bottom:18px}.photo-slot button{min-height:44px}.result-card{padding:18px}.result-card p{font-size:14px}.photo-slot .muted{font-size:12px}.support-actions .quiet{font-size:12px}}
h1:focus{outline:none}.scope-option:has(input:disabled){opacity:.55}.workspace[aria-busy=true]{cursor:progress}
/* Optional microphone practice and separate, explainable feedback signals. */
.speech-panel { margin: 20px 0; padding: 20px; border: 1px solid #cbdaf2; border-radius: 18px; background: #f4f8ff; }
.speech-panel h3 { font-size: 1.1rem; line-height: 1.5; }
.speech-panel .muted { font-size: .86rem; line-height: 1.65; }
.speech-panel button { margin: 6px 8px 6px 0; }
.speech-panel audio { width: 100%; margin: 12px 0; }
.speech-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.speech-metrics > div { padding: 12px 5px; border-radius: 12px; background: white; text-align: center; }
.speech-metrics strong, .speech-metrics small { display: block; }
.speech-metrics strong { color: #265ebc; font-size: 1.15rem; }
.speech-metrics small { font-size: .75rem; margin-top: 6px; }
.speech-timeline { position: relative; height: 14px; border-radius: 7px; background: #dce5f1; overflow: hidden; }
.speech-timeline span { position: absolute; top: 0; bottom: 0; background: #4679cc; }
.voice-meter { height: 58px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.voice-meter span { width: 9px; height: 8px; border-radius: 7px; background: #3268cb; }
.speech-clock { text-align: center; font-variant-numeric: tabular-nums; color: #51627b; }
.speech-transcript { overflow-wrap: anywhere; line-height: 1.7; }
.row-play { font-size: .8rem; padding: 7px 12px; margin-top: 10px; }
.automatic-mode #task-actions,.automatic-mode #support-actions,.automatic-mode #speech-panel,.automatic-mode #hint-status,.automatic-mode .lesson-footer,.automatic-mode #audio-panel,.automatic-mode .row-play,.automatic-mode #counterpart-play { display:none!important; }
.flow-panel { padding:26px 0 12px; text-align:center; border-top:1px solid #e8edf4; margin-top:22px; }
.flow-panel h3 { font-size:17px; line-height:1.6; margin:16px 0 5px; }
.flow-orb { --voice:0; display:grid; place-items:center; width:82px; height:82px; border-radius:50%; margin:auto; background:#edf3ff; color:#3268cb; transition:background .25s; }
.flow-orb svg { width:32px; height:32px; }
.flow-orb.recording { background:#3268cb; color:white; box-shadow:0 0 0 calc(5px + var(--voice)*20px) #3268cb1c; }
.flow-orb.listening { background:#e6f3f0; color:#287761; }
.flow-orb.processing { animation:flow-pulse 1.1s ease-in-out infinite; }
.flow-orb.feedback { background:#edf4e9; color:#477435; }
.flow-orb.feedback.hesitant,.flow-orb.feedback.difficult { background:#fff2de; color:#976d2c; }
.flow-orb.feedback.uncertain { background:#edf0f4; color:#65758b; }
.flow-controls { display:flex; justify-content:center; gap:16px; margin-top:22px; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:48px; min-height:48px; padding:10px; flex-shrink:0; }
.flow-controls .icon-button { width:54px; height:54px; border-radius:50%; }
.flow-controls #flow-speed { position:relative; }
#flow-speed small { position:absolute; bottom:1px; font-size:9px; background:inherit; padding:0 3px; }
.flow-note { font-size:11px; color:#7d8a9d; line-height:1.7; margin:16px auto 0; max-width:360px; }
.speaking-now .bubble { box-shadow:0 0 0 2px #82b4df; background:#f0f7ff; }
.home-tile>.icon-button { align-self:flex-start; }
.lesson-card .icon-button.full { width:auto; align-self:center; }
.automatic-mode #feedback { display:none; }
@media(max-width:640px) {
  .automatic-session .sidebar { display:none; }
  .automatic-session .shell { margin-top:4px; gap:0; }
  .automatic-session .workspace { padding-bottom:100px; }
  .automatic-mode .study-top { margin-bottom:8px; }
  .automatic-mode .intro .eyebrow,.automatic-mode .intro>.muted,.automatic-mode #cold-note { display:none; }
  .automatic-mode .intro h1 { font-size:22px; }
  .automatic-mode .steps { margin:10px 0 14px; }
  .automatic-mode .lesson-card { padding-top:16px; }
  .automatic-mode .scene { padding-bottom:12px; }
  .automatic-mode .dialogue { max-height:34vh; max-height:34svh; overflow-y:auto; padding:3px; }
  .automatic-mode .flow-panel { margin-top:14px; padding-top:18px; }
  .automatic-mode .flow-orb { width:64px; height:64px; }
  .automatic-mode .flow-controls { position:fixed; z-index:20; bottom:0; left:0; right:0; margin:0; padding:12px 16px max(12px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #e1e6eb; box-shadow:0 -5px 22px #22324808; }
  .automatic-mode .flow-controls .icon-button { width:52px; height:52px; }
}
@keyframes flow-pulse { 50% { opacity:.5; transform:scale(.93); } }
@media(prefers-reduced-motion:reduce) { .flow-orb.processing { animation:none; } }

/* Keep the learning mode identifiable from entry through the active session. */
[data-mode=preview] { --mode-color:#275db5; --mode-soft:#edf4ff; --mode-border:#b7cfee; }
[data-mode=review] { --mode-color:#216c57; --mode-soft:#edf7f1; --mode-border:#a9d1bf; }
.labelled-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; }
.labelled-button>span { margin:0; opacity:1; }
.labelled-button>svg { flex-shrink:0; }
.chapter-intro { padding:8px 0 22px; }
.chapter-intro h1 { font-size:34px; margin-bottom:8px; }
.chapter-intro>.muted { font-size:15px; }
.mode-cards { gap:18px; }
.mode-card { display:flex; flex-direction:column; align-items:stretch; gap:17px; padding:26px; border:1px solid var(--mode-border); border-top:5px solid var(--mode-color); border-radius:22px; background:var(--mode-soft); }
.mode-card-heading { display:flex; align-items:center; gap:13px; }
.mode-symbol { width:46px; height:46px; display:grid; place-items:center; flex-shrink:0; color:var(--mode-color); background:white; border-radius:14px; }
.mode-symbol svg { width:27px; height:27px; }
.mode-card h2 { color:var(--mode-color); font-size:29px; }
.mode-purpose { font-size:12px; color:#526474; margin-top:3px; }
.mode-description { font-size:15px; white-space:pre-line; line-height:1.75; }
.mode-meta { margin-top:auto; font-size:12px; color:var(--mode-color); }
.mode-start,.resume-card[data-mode] .primary,#scope-dialog[data-mode] #scope-start { background:var(--mode-color); }
.mode-start { width:100%; font-size:15px; }
.resume-card[data-mode] { border-color:var(--mode-border); background:var(--mode-soft); }
.resume-card>div { font-weight:650; color:var(--mode-color); }
.scope-mode-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0 16px; }
.scope-mode-options button { border:1px solid #dbe2e9; background:#f6f7f8; color:#5c6a7a; font-size:16px; font-weight:650; }
.scope-mode-options #scope-mode-preview[aria-pressed=true] { color:#275db5; background:#edf4ff; border:2px solid #275db5; }
.scope-mode-options #scope-mode-review[aria-pressed=true] { color:#216c57; background:#edf7f1; border:2px solid #216c57; }
#scope-dialog[data-mode] #scope-title { color:var(--mode-color); }
#scope-dialog[data-mode] .scope-option:has(input:checked) { background:var(--mode-soft); border-color:var(--mode-border); }
#scope-dialog[data-mode] input { accent-color:var(--mode-color); }
.scope-schedule { font-size:12px; color:#657489; line-height:1.6; }
#mode-badge { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:650; color:var(--mode-color); background:var(--mode-soft); border:1px solid var(--mode-border); }
#mode-badge svg { width:18px; height:18px; }
@media(max-width:640px) {
  .chapter-home .sidebar { display:none; }
  .chapter-home .shell { margin-top:4px; }
  .chapter-intro { padding:4px 0 18px; }
  .chapter-intro h1 { font-size:28px; }
  .chapter-intro>.muted { font-size:13px; }
  .mode-cards { gap:14px; }
  .mode-card { display:grid; grid-template-columns:108px minmax(0,1fr); gap:9px 12px; padding:17px; border-radius:18px; border-top-width:4px; }
  .mode-card-heading { grid-row:1 / 3; flex-direction:column; align-items:flex-start; gap:5px; }
  .mode-symbol { width:32px; height:32px; border-radius:10px; }
  .mode-symbol svg { width:22px; height:22px; }
  .mode-card h2 { font-size:25px; }
  .mode-purpose { font-size:11px; margin-top:0; }
  .mode-description { align-self:center; font-size:13px; }
  .mode-meta { font-size:11px; margin:0; align-self:end; }
  .mode-start { grid-column:1 / -1; min-height:48px; padding:11px 16px; font-size:14px; }
  #mode-badge { font-size:12px; }
}
@media(max-width:360px) {
  .mode-card { grid-template-columns:94px minmax(0,1fr); padding:14px; gap:9px; }
}