/* Shared presentation layer. Learning state and assessment logic live in their existing modules. */
:root{--studio-bg:#f4f6f5;--surface:#fff;--surface-soft:#edf2ef;--ink:#193b34;--ink-strong:#102e28;--muted:#586e66;--line:#dce5df;--accent:#176c54;--green:#174e3f;--lime:#e4f3a7;--shadow:0 4px 24px #153e3707;--radius:18px;--reading-size:19px;--bg:var(--studio-bg)}
html[data-theme=dark]{--studio-bg:#101a18;--surface:#182722;--surface-soft:#21372e;--ink:#e5eee9;--ink-strong:#f4f8f5;--muted:#acc1b5;--line:#365045;--accent:#a2dfba;--green:#b7e3c8;--shadow:0 6px 24px #00000018;--bg:var(--studio-bg)}
html{scroll-padding-top:90px}body{color:var(--ink);background:var(--studio-bg);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}h1,h2,h3{color:var(--ink-strong);font-family:Manrope,'DM Sans',Arial,sans-serif;letter-spacing:-.045em;line-height:1.25}h1{font-size:clamp(29px,3vw,43px);font-weight:800;margin:10px 0 14px}h2{font-size:25px;font-weight:750}h3{font-size:18px;font-weight:700;letter-spacing:-.025em}p{line-height:1.75}.muted{color:var(--muted)}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:1.8px;line-height:1.6}.top{margin:36px 0 28px;max-width:850px}.top>p{max-width:680px;font-size:15px;margin-bottom:0}a{text-underline-offset:4px}button,.button{min-height:44px;border-radius:10px;font-size:13px;font-weight:700;transition:background .15s,border-color .15s,box-shadow .15s;line-height:1.45}button:hover,.button:hover{filter:none}button:disabled{cursor:not-allowed}.button:hover,button:not(:disabled):hover{box-shadow:0 0 0 2px #73988525}button.reader-word:hover{box-shadow:none}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}select,input,textarea{border-color:var(--line);border-radius:10px;line-height:1.5}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:17px;height:17px;flex-shrink:0}textarea{resize:vertical}button[hidden],[hidden]{display:none!important}.skip-link{position:fixed;left:20px;top:-100px;z-index:2000;background:var(--surface);color:var(--ink);padding:14px 20px;border-radius:10px}.skip-link:focus{top:12px}
aside#studioSidebar{width:252px;padding:28px 20px 22px;background:var(--surface);border-color:var(--line);z-index:1300;scrollbar-width:thin}.brand{display:block;font-size:37px;letter-spacing:-2px;color:var(--ink-strong)}.brand span{font-size:25px}.brand small{font-size:9px;letter-spacing:1.7px;margin:8px 0 24px;color:var(--muted)}#nav .nav-label{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin:22px 12px 8px}#nav a{display:flex;gap:12px;align-items:center;padding:10px 12px;margin:3px 0;font-size:12px;min-height:42px;border-radius:9px;color:var(--muted);font-weight:500;border:1px solid transparent}#nav a:hover{background:var(--surface-soft);color:var(--ink)}#nav a.active{background:#174e3f;color:#fff;font-weight:700;border-color:#174e3f}.nav-symbol{font-size:17px;display:inline-grid;place-items:center;width:21px;flex-shrink:0;line-height:1}html[data-theme=dark] #nav a.active{background:#b7e3c8;color:#10291e;border-color:#b7e3c8}.meaning-language-control{padding:12px;background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;margin-bottom:12px}.meaning-language-control label{font-size:10px}.meaning-language-control small{font-size:10px;line-height:1.5}.meaning-language-control select{font-size:12px;padding:7px}.theme-toggle,html[data-theme=dark] .theme-toggle{min-height:38px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-size:12px;margin-bottom:16px}.online-presence,html[data-theme=dark] .online-presence{border:0;background:var(--surface-soft);padding:12px;margin:20px 0 0}.aside-bottom{font-size:8px;line-height:2;letter-spacing:1px;margin-top:18px}
main{margin-left:252px;padding:0 clamp(24px,3.5vw,64px);max-width:1800px}main>header{height:80px;border-color:var(--line);gap:16px;position:relative;font-size:11px;letter-spacing:.4px}.header-leading{display:flex;align-items:center;gap:12px}.header-identity{display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:600;font-size:10px;letter-spacing:1.7px}.level-badge{background:var(--surface-soft);border:1px solid var(--line);padding:4px 8px;color:var(--accent);border-radius:6px;letter-spacing:0;font-size:10px}.profile-header-name{font-size:12px;letter-spacing:0}.profile-header-link .avatar{height:35px;width:35px;border:1px solid var(--line)}.menu-toggle{display:none}.menu-backdrop[hidden]{display:none}#app{min-height:65vh;outline:none}footer{border-top:1px solid var(--line);margin-top:50px;max-width:1100px;font-size:11px;line-height:1.85;padding:24px 0 36px}.grid{gap:18px;margin:24px 0;grid-template-columns:repeat(3,minmax(0,1fr))}.grid>*{min-width:0}.card{background:var(--surface);border:1px solid var(--line);padding:26px;border-radius:var(--radius);box-shadow:var(--shadow)}.section-head{margin-top:36px}.section-head h2{margin:6px 0}.section-head .eyebrow{font-size:9px}.pill{background:var(--surface-soft);color:var(--accent);font-size:11px;border:1px solid var(--line);white-space:nowrap}.row{gap:10px}.toolbar{gap:16px;padding:20px}.toolbar label{flex:1;min-width:160px;font-size:11px;color:var(--muted)}.toolbar input{min-width:0;width:100%}.toolbar>.row{align-self:end}.toolbar select{width:100%}.split{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.studio-hero,html[data-theme=dark] .studio-hero{background:#174e3f;border:1px solid #286350;color:#fff;padding:38px 40px;grid-template-columns:1.5fr 1fr;border-radius:22px;gap:25px}.studio-hero h2{font-size:clamp(30px,3.2vw,46px);line-height:1.13;letter-spacing:-.05em;color:#fff;margin:16px 0}.studio-hero .eyebrow{color:#d5ebad;font-size:9px}.studio-hero p,html[data-theme=dark] .studio-hero p{font-size:14px;color:#d8e8df;max-width:460px;line-height:1.8;margin-bottom:25px}.studio-hero .light,html[data-theme=dark] .studio-hero .light{background:#e4f3a7;color:#173d30;border:1px solid #e4f3a7;min-width:150px}.studio-hero .light span{margin-left:18px}.hero-link{color:#fff;font-size:12px;padding:12px;text-decoration:none}.hero-link:hover{text-decoration:underline}.studio-art{border-left:1px solid #ffffff30;align-self:stretch;padding:12px 0 10px 32px;display:flex;flex-direction:column;justify-content:center}.art-caption,.art-foot{font-size:8px;letter-spacing:2px;color:#d5e4c5}.art-type{font:700 clamp(35px,4vw,62px)/1.1 Manrope,Arial;letter-spacing:-3px;color:#e4f3a7;margin:26px 0 18px}.art-type span{display:block;color:#fff}.art-rule{width:60px;height:3px;background:#e4f3a7;margin-bottom:20px}.dashboard-stats .card{display:flex;flex-direction:column;padding:21px 24px}.dashboard-stats .stat{font-size:29px;letter-spacing:-1px;font-weight:800;color:var(--ink-strong)}.dashboard-stats .stat small{font:400 12px 'DM Sans',Arial;letter-spacing:0;color:var(--muted)}.dashboard-stats .label{font-size:12px;margin-top:2px}.learning-path{display:flex;flex-direction:column;position:relative;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}.learning-path:hover{border-color:var(--accent);transform:translateY(-2px)}.path-number{font-size:11px;color:var(--accent);width:33px;height:33px;display:grid;place-items:center;background:var(--surface-soft);border:1px solid var(--line);border-radius:10px}.learning-path h3{margin:20px 0 8px}.learning-path p{font-size:13px;margin:0 0 22px}.path-link{margin-top:auto;font-size:12px;font-weight:700;color:var(--accent)}.chapter-search{display:flex;align-items:center;gap:18px;margin-top:22px}.chapter-search input{width:min(450px,100%);font-size:13px;min-height:44px;background:var(--surface)}.chapter-search>span{font-size:11px;white-space:nowrap}.chapter-grid{margin-top:18px}.chapter,html[data-theme=dark] button.card.chapter{background:var(--surface);color:var(--ink);border-color:var(--line);min-height:230px;display:flex;flex-direction:column;padding:24px;box-shadow:var(--shadow);text-align:left;transition:border-color .15s,transform .15s}.chapter .number,html[data-theme=dark] button.card.chapter .number{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--accent)}.chapter h3,html[data-theme=dark] button.card.chapter h3{font-size:19px;line-height:1.35;margin:18px 0 10px;color:var(--ink-strong)}.chapter p,html[data-theme=dark] button.card.chapter .muted{font-size:12px;min-height:0;line-height:1.65;margin:0 0 20px;font-weight:400;color:var(--muted)}.chapter .tag,html[data-theme=dark] button.card.chapter .tag{display:flex;justify-content:space-between;width:100%;font-size:11px;color:var(--accent);margin-top:12px}.chapter-meter{height:3px;background:var(--surface-soft);width:100%;border-radius:5px;overflow:hidden;margin-top:auto}.chapter-meter>span{display:block;height:100%;background:var(--accent)}.chapter:hover,html[data-theme=dark] button.card.chapter:hover{background:var(--surface-soft);border-color:var(--accent)}.continue-learning,html[data-theme=dark] .continue-learning{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);padding:22px 26px;gap:20px}.continue-learning h2{font-size:21px;margin:5px 0 8px}.continue-learning p{font-size:13px;margin:5px 0}.continue-learning small{font-size:10px}
/* Exercise surfaces share the same reading and input rhythm. */
.flash{padding:42px 30px;max-width:780px;min-height:320px}.flash h2{font-size:clamp(25px,3vw,38px);overflow-wrap:anywhere}.flash p{font-size:17px}.options button{border-radius:12px;padding:16px 18px;font-weight:500;line-height:1.6}.options button.selected{border:2px solid var(--accent)}.exercise-tile{padding:22px;min-height:135px}.exercise-tile h3{font-size:17px}.exercise-tile.chosen{border:2px solid var(--accent)}.exercise-tile p{font-size:12px;line-height:1.65}.reading,.lesen-text{font-size:var(--reading-size);line-height:1.95;letter-spacing:.005em}.lesen-article{max-width:780px}.lesen-article h1{max-width:750px;font-size:clamp(30px,4vw,49px);line-height:1.15}.lesen-text{margin:36px 0}.lesen-card{border-radius:18px;border-color:var(--line);box-shadow:var(--shadow)}.lesen-card-art{min-height:115px}.lesen-card h3{font-size:23px}.lesen-card-body{padding:24px}.lesen-update{border-radius:18px}.lesen-topics{gap:8px}.lesen-topics button{min-height:40px;font-size:12px}.lesen-toolbar{background:var(--surface);padding:16px;border:1px solid var(--line);border-radius:14px}.lesen-vocabulary{background:var(--surface);border-color:var(--line);padding:22px}.lesen-questions fieldset{background:var(--surface);border-color:var(--line);padding:22px}.lesen-questions label{cursor:pointer}.reading-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:12px 0}.reading-tools span{font-size:11px;color:var(--muted);margin-right:4px}.reading-tools button{min-height:36px;min-width:38px;padding:6px 9px;font-size:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line)}.sb-text{font-size:18px;line-height:2.7}.sb-inline select{min-height:42px}.exam-question{margin-bottom:26px}.exam-question legend{font-size:16px;line-height:1.7}.exam-question label{line-height:1.7}.exam-last-completed{font-size:11px;color:var(--muted);margin:9px 0 14px}.testheft-page-scroll{border-radius:12px}.testheft-task,.testheft-chapters button{border-radius:12px}.tutor-layout{grid-template-columns:270px minmax(0,1fr)}.tutor-message{border-radius:14px;line-height:1.8}.tutor-settings{top:20px}.tutor-conversation textarea{font-size:16px}.chat-panel{border-radius:20px;box-shadow:0 16px 70px #0c281e30}.chat-toggle{min-height:48px;padding:12px 20px}.feedback{border-radius:0 12px 12px 0;padding:19px;line-height:1.75}audio{border-radius:12px}.vocab-row h3{font-size:20px}.reader-panel{border-color:var(--line);box-shadow:0 18px 90px #0c281e30}.reader-panel-top{background:var(--surface)}.reader-word{min-height:0;border-radius:3px;transition:none;box-shadow:none}.clickable-reading button.reader-word{min-height:0;display:inline;padding:0;margin:0}.reading .reader-word{font:inherit;line-height:inherit}.intensive-task-nav button{min-width:36px;min-height:38px}.intensive-task-card h2{line-height:1.65}.game-card{border-radius:18px}.game-arena{border-radius:20px}.game-card h2,.game-card h3{letter-spacing:-.025em}
html[data-theme=dark] :is(.card,.exercise-tile,.match-button,.tutor-card,.tutor-panel,.tutor-message,.tutor-conversation,.tutor-messages,.chat-panel,.chat-message,.reader-panel,.testheft-task,.testheft-chapters button,.game-card,.game-arena){background:var(--surface);color:var(--ink);border-color:var(--line)}html[data-theme=dark] :is(.toolbar,.lesen-toolbar,.lesen-vocabulary,.lesen-questions fieldset){background:var(--surface);color:var(--ink);border-color:var(--line)}html[data-theme=dark] :is(input,select,textarea){background:#102019;color:var(--ink);border-color:#4c6859}html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:var(--muted)}html[data-theme=dark] :is(.exercise-tile.chosen,.options button.selected,.match-button.selected){background:var(--surface-soft);border-color:var(--accent)}html[data-theme=dark] :is(.chat-messages,.tutor-user,.chat-message.chat-mine,.lesen-update){background:var(--surface-soft)}html[data-theme=dark] .reading-tools button{background:var(--surface);color:var(--ink)}html[data-theme=dark] .hero h2,html[data-theme=dark] .game-welcome h2{color:#fff}html[data-theme=dark] .clickable-reading .reader-word{background:transparent;color:inherit;box-shadow:none}html[data-theme=dark] .reader-panel-top{background:var(--surface)}html[data-theme=dark] .lesen-card{background:var(--surface);border-color:var(--line)}html[data-theme=dark] .lesen-card h3{color:var(--ink-strong)}
@media(min-width:1500px){main{padding-left:64px;padding-right:64px}.studio-hero{padding:46px}.chapter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1150px){aside#studioSidebar{width:224px;padding:25px 15px}.brand span{font-size:23px}main{margin-left:224px;padding:0 26px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-stats,.learning-paths{grid-template-columns:repeat(3,minmax(0,1fr))}.learning-path{padding:20px}.studio-hero{padding:32px;grid-template-columns:1.5fr 1fr}.studio-art{padding-left:22px}.tutor-layout{grid-template-columns:230px minmax(0,1fr)}.tutor-layout .card{padding:20px}}
@media(max-width:900px){.studio-hero{grid-template-columns:1fr}.studio-art{display:none}.tutor-layout{grid-template-columns:1fr}.tutor-settings{position:static}.split{grid-template-columns:1fr}.dashboard-stats .card{padding:19px}.dashboard-stats .stat{font-size:26px}.dashboard-stats .label{font-size:11px}.learning-paths{grid-template-columns:1fr}.learning-path{padding:22px 24px}.learning-path h3{margin:12px 0 8px}.learning-path p{margin-bottom:12px}}
@media(max-width:760px){aside#studioSidebar{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);padding:25px 20px;transform:translateX(-105%);transition:transform .2s;overflow-y:auto;height:100dvh;box-shadow:15px 0 60px #102e2820}.menu-open aside#studioSidebar{transform:translateX(0)}.menu-open{overflow:hidden}.menu-backdrop{position:fixed;inset:0;background:#081c16a3;z-index:1290;backdrop-filter:blur(2px)}main{margin-left:0;padding:0 22px}main>header{height:72px}.menu-toggle{display:inline-grid;place-items:center;min-width:42px;min-height:42px;padding:8px;font-size:19px;background:var(--surface);color:var(--ink)}.header-identity{font-size:9px;letter-spacing:1.2px;gap:8px}.profile-header-name{display:none}#nav{display:block;overflow:visible;margin-top:0}#nav a{font-size:13px;white-space:normal;min-height:44px}.brand{font-size:37px}.brand small{display:block;margin-bottom:24px}.meaning-language-control{margin:0 0 12px;max-width:none}.meaning-language-control select{max-width:none;font-size:14px}.meaning-language-control small{font-size:10px}.theme-toggle{width:100%;margin:0 0 16px}.online-presence{margin:18px 0 0}.aside-bottom{display:block}.top{margin:26px 0 24px}.top>p{font-size:14px}.hero.studio-hero{padding:30px;border-radius:19px}.studio-hero h2{font-size:37px}.studio-hero p{font-size:13px}.studio-hero .row{gap:6px}.card{padding:22px}.continue-learning{flex-direction:column;align-items:stretch;padding:21px}.continue-learning button{align-self:flex-start}.chapter-heading{gap:10px}.section-head h2{font-size:23px}.chapter-search{gap:12px;align-items:stretch;flex-direction:column}.chapter-search input{width:100%;font-size:16px}.chapter-search>span{font-size:11px}.chapter{min-height:220px}.toolbar{padding:18px}.toolbar label{min-width:140px}.toolbar select,select{font-size:16px}.learner-chat{bottom:max(16px,env(safe-area-inset-bottom));right:16px}.reader-panel{z-index:1350}.lesen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesen-update{padding:22px}.lesen-text{line-height:1.9}.lesen-toolbar{gap:10px}.profile-header-link .avatar{height:34px;width:34px}.chat-panel{max-height:calc(100dvh - 110px)}footer{margin-top:34px;padding-bottom:90px}}
@media(max-width:500px){main{padding:0 18px}.header-identity{letter-spacing:.8px;font-size:8px}.level-badge{font-size:10px;padding:3px 6px}.header-leading{gap:9px}.grid,.lesen-grid{grid-template-columns:1fr}.dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 28px}.dashboard-stats .card{padding:15px 12px;border-radius:13px}.dashboard-stats .stat{font-size:25px;line-height:1.35}.dashboard-stats .stat small{display:block;font-size:9px;height:13px}.dashboard-stats .label{font-size:10px;line-height:1.5;min-height:30px}.dashboard-stats .card:not(:first-child) .stat{padding-bottom:13px}.studio-hero h2{font-size:33px}.hero.studio-hero{padding:27px 24px}.hero-link{padding-left:4px}.chapter{min-height:210px}.chapter p{font-size:13px}.chapter .number{font-size:10px}.chapter-search{margin-top:17px}.section-head .pill{font-size:10px;padding:6px 9px}.top>p{line-height:1.7}.flash{padding:30px 22px}.flash h2{font-size:27px}.flash p{font-size:17px}.options button{font-size:15px;padding:14px}.lesen-article h1{font-size:34px}.lesen-vocabulary{padding:18px}.lesen-questions fieldset{padding:16px}.reading-tools{justify-content:flex-start}.tutor-layout .card{padding:19px}.row>.button{max-width:100%}.toolbar label,.toolbar input,.toolbar select{width:100%}.toolbar>.row{width:100%}.sb-text{font-size:17px}.section-head{margin-top:29px}.chat-panel{width:calc(100vw - 32px)}.match-grid{gap:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.chapter:hover,.learning-path:hover,.lesen-card:hover{transform:none}}

.menu-close{display:none}@media(max-width:760px){.menu-close{display:grid;place-items:center;position:absolute;right:14px;top:18px;padding:4px;width:34px;min-height:34px;font-size:23px}.menu-open .brand{padding-right:28px}}

/* Maintain contrast on filled welcome banners and small source labels. */
.tag{color:var(--accent)}.game-welcome h2{color:#fff}