@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
.who-texts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.who-texts p{line-height:1.9}.who-texts mark{background:#fff0a6;color:#171717;border-radius:3px;padding:2px 3px;box-decoration-break:clone}#who-feedback{margin:18px 0}#who-feedback blockquote{border-left:3px solid var(--yellow);padding-left:12px;margin-left:0}@media(max-width:640px){.who-texts{grid-template-columns:1fr;gap:0}}
.opinion-options{display:grid;gap:10px}.opinion-options .btn{text-align:left;display:grid;gap:4px}.opinion-options small{color:var(--muted);font-size:.9rem}.opinion-result{border-top:1px solid var(--line);padding:12px 0}
.comic-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.comic-panel{min-height:230px;border:3px solid var(--ink);border-radius:18px;padding:16px;position:relative;overflow:hidden;box-shadow:5px 5px 0 var(--ink)}.comic-panel.yellow{background:#fff0a6}.comic-panel.blue{background:#dcecff}.comic-panel.green{background:#ddf4df}.comic-panel.pink{background:#ffe1e6}.comic-scene{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.comic-avatar{font-size:3rem;margin:14px 0 2px}.speech{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px;position:relative}.speech:before{content:'';position:absolute;left:25px;bottom:-12px;border-width:12px 10px 0 0;border-style:solid;border-color:var(--ink) transparent transparent transparent}.speech p{margin:5px 0;font-size:1.08rem;font-weight:700}.speech .btn{font-size:.8rem;padding:6px 9px}.comic-tr{color:var(--muted)!important;font-size:.92rem!important;font-weight:500!important}.comic-quiz{margin-top:22px}@media(max-width:640px){.comic-strip{grid-template-columns:1fr}.comic-panel{min-height:190px}}
:root{--ink:#171717;--muted:#555555;--bg:#f5f5f5;--line:#dedede;--brand:#171717;--yellow:#fff0a6;--white:#fff;--radius:18px;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c51f2f;outline-offset:4px}h1,h2,h3,p{margin-top:0}h1,h2,h3,.brand{font-family:Manrope,Arial,sans-serif}h1{font-size:2.45rem;line-height:1.2;letter-spacing:-1.4px;font-weight:800;margin-bottom:14px}h2{font-size:1.45rem;line-height:1.3;letter-spacing:-.5px}h3{font-size:1.12rem;line-height:1.4;letter-spacing:-.2px}p{color:var(--muted)}.skip-link{position:fixed;z-index:50;left:12px;top:-80px;padding:10px 18px;background:white;border:2px solid var(--brand)}.skip-link:focus{top:12px}
.sidebar{width:224px;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--line);background:#fff;padding:32px 20px;display:flex;flex-direction:column;z-index:5}.brand{font-size:1.85rem;letter-spacing:-1.4px;display:flex;align-items:center;font-weight:800;gap:10px;padding:0 8px}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:var(--brand);color:var(--yellow);font-size:1.75rem}.brand-dot{color:#c51f2f;margin-left:-10px}.side-label{font-size:.75rem;letter-spacing:1.7px;font-weight:700;margin:46px 12px 15px}.sidebar nav{display:grid;gap:8px}.sidebar nav a{padding:13px 15px;border-radius:10px;font-size:.9rem;font-weight:600;display:flex;gap:12px;align-items:center;color:#555555}.sidebar nav a span{font-size:1.4rem;line-height:1}.sidebar nav a.active{background:#fff3b3;color:var(--brand)}.sidebar nav a:hover{background:#f2f2f2}.side-note{margin-top:auto;background:#f3f3f3;border-radius:14px;padding:20px 16px}.side-note>span{font-size:1.8rem;display:block;color:#c51f2f;margin-bottom:8px}.side-note strong{display:block;font-size:.87rem}.side-note p{font-size:.81rem;line-height:1.6;margin:8px 0 0}.storage-note{font-size:.75rem;padding:0 10px;margin:20px 0 0}.workspace{margin-left:224px}.topbar{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:rgba(255,255,255,.8);gap:16px}.topbar-label{font-size:.87rem;color:var(--muted)}.topbar-right{display:flex;align-items:center;gap:10px;font-size:.87rem}.demo-badge{font-size:.75rem;border:1px solid var(--line);border-radius:20px;padding:4px 11px;color:var(--muted);margin-right:12px}.avatar{display:grid;place-items:center;background:#fff3b3;font-weight:700;border-radius:50%;width:34px;height:34px}main{max-width:1360px;padding:38px 42px 60px;margin:auto;min-height:calc(100vh - 165px)}main:focus{outline:none}.eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:#b41929;margin:0 0 12px}.page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:28px}.page-intro p{margin-bottom:0}.count-tag{font-size:.85rem;color:var(--muted);white-space:nowrap}.featured{display:grid;grid-template-columns:1.2fr .8fr;background:#fff0a6;border-radius:20px;overflow:hidden;min-height:248px;margin-bottom:37px;position:relative}.featured-copy{padding:30px 32px}.featured .eyebrow{color:#171717}.featured h2{font-size:1.75rem;max-width:360px;margin-bottom:10px}.featured p{color:#292929;margin-bottom:20px;max-width:410px;font-size:.95rem}.featured-art{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:28px 38px 28px 25px;color:#171717;background:#171717;overflow:hidden}.featured-art .hello{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:4.2rem;line-height:1.2;letter-spacing:-3px;transform:rotate(-5deg);z-index:1}.featured-art .phrase{font-size:1.8rem;font-weight:600;transform:rotate(-5deg);z-index:1}.featured-art .level-big{position:absolute;right:10px;bottom:-14px;font-size:7rem;font-weight:800;line-height:1;color:#454545;letter-spacing:-6px}.featured-art .art-label{font-size:.75rem;letter-spacing:2px;margin-top:30px;z-index:1}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:11px 20px;border:1px solid transparent;border-radius:10px;font-weight:600;font-size:.9rem;min-height:46px;transition:background .15s,transform .15s}.btn.primary{background:var(--brand);color:white}.btn.primary:hover{background:#333333}.btn.secondary{background:white;border-color:var(--line);color:var(--ink)}.btn.secondary:hover{background:#f2f2f2}.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn:disabled{opacity:.5}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:16px}.section-heading h2{margin:0}.search{display:flex;align-items:center;gap:9px;background:white;border:1px solid #dedede;border-radius:10px;padding:9px 12px;min-width:290px}.search svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}.search input{border:0;outline:0;background:transparent;width:100%;font-size:.88rem;color:var(--ink)}.search:focus-within{outline:2px solid #c51f2f;outline-offset:2px}.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}.filter{border:1px solid var(--line);color:var(--muted);background:white;border-radius:30px;padding:8px 17px;font-size:.88rem;min-height:42px}.filter.active{background:var(--brand);color:white;border-color:var(--brand)}.filter:hover:not(.active){background:#fff7d1}.catalog-status{font-size:.82rem;color:var(--muted);margin:-4px 0 16px}.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.course-card{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}.course-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #1717170c}.course-art{height:152px;padding:20px 22px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--tint);color:var(--tone)}.course-art .art-word{font-family:Manrope,Arial,sans-serif;font-size:2.7rem;font-weight:800;letter-spacing:-1.5px;line-height:1.2;position:relative;z-index:1}.course-art .art-index{position:absolute;right:15px;bottom:-20px;font-size:6.5rem;line-height:1;opacity:.1;font-weight:800;letter-spacing:-5px}.course-level{position:absolute;top:14px;right:14px;background:#ffffffb0;padding:3px 9px;border-radius:6px;font-size:.75rem;font-weight:700;z-index:2}.course-body{padding:21px 22px;display:flex;flex-direction:column;flex:1}.category-label{font-size:.75rem;font-weight:700;color:#555555;letter-spacing:.5px;margin-bottom:8px}.course-body h3{margin-bottom:9px}.course-body>p{font-size:.88rem;line-height:1.6;margin:0 0 18px}.course-meta{display:flex;gap:15px;flex-wrap:wrap;font-size:.76rem;color:var(--muted);margin-top:auto;margin-bottom:18px}.course-meta span{display:flex;align-items:center;gap:5px}.card-link{display:block;font-size:.88rem;font-weight:700;padding-top:15px;border-top:1px solid var(--line)}.card-link:hover{color:#b41929}.mini-progress{margin:0 0 15px}.mini-progress p{margin:4px 0 0;font-size:.74rem}.progress-track{width:100%;height:6px;background:#e7e7e7;border-radius:10px;overflow:hidden}.progress-fill{height:100%;background:#c51f2f;border-radius:10px}.empty{border:1px dashed #cccccc;border-radius:18px;padding:42px 20px;text-align:center;background:white}.empty h2{margin-bottom:8px}.empty p{margin:0 auto 20px;max-width:450px}.back-link{display:inline-flex;align-items:center;gap:8px;font-size:.87rem;color:var(--muted);margin-bottom:24px}.back-link:hover{color:var(--brand)}.detail-header{background:var(--tint);border-radius:20px;padding:36px;margin-bottom:30px;position:relative;overflow:hidden}.detail-header h1{max-width:670px;font-size:2.4rem;position:relative;z-index:1}.detail-header>p{max-width:620px;color:var(--tone);position:relative;z-index:1;margin-bottom:18px}.detail-header .course-meta{color:var(--tone);margin-bottom:0}.detail-category{font-size:.8rem;font-weight:700;color:var(--tone);margin:0 0 14px}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:30px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:28px}.panel+.panel{margin-top:22px}.outcomes{padding:0;margin:0;list-style:none;display:grid;gap:14px}.outcomes li{display:flex;gap:12px;font-size:.95rem}.check{color:#171717;font-weight:700}.outline{list-style:none;padding:0;margin:0;display:grid}.outline li{padding:17px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}.outline li:last-child{border:0;padding-bottom:0}.step-number{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px;background:#f1f1f1;font-size:.83rem;font-weight:700}.outline strong{font-size:.93rem}.outline small{display:block;font-size:.77rem;color:var(--muted);margin-top:2px}.start-panel{position:sticky;top:24px}.start-panel h2{font-size:1.2rem;margin-bottom:10px}.start-panel p{font-size:.9rem}.start-panel .btn{width:100%;margin-top:8px}.start-panel .local-note{font-size:.77rem;margin:17px 0 0}.lesson-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:18px}.lesson-top .back-link{margin:0}.lesson-layout{display:grid;grid-template-columns:255px minmax(0,1fr);gap:26px;align-items:start}.curriculum{background:white;border:1px solid var(--line);border-radius:16px;padding:22px}.curriculum summary{font-size:.9rem;font-weight:700;cursor:pointer;list-style:none}.curriculum summary::-webkit-details-marker{display:none}.curriculum .course-title{font-size:1rem;font-weight:700;margin:16px 0}.lesson-nav{display:grid;gap:8px;margin-top:17px}.lesson-nav a{display:flex;gap:11px;align-items:center;font-size:.86rem;border-radius:10px;padding:12px 9px;color:var(--muted)}.lesson-nav a[aria-current=step]{background:#fff3b3;color:var(--brand);font-weight:700}.lesson-nav .locked{display:flex;gap:11px;padding:12px 9px;align-items:center;font-size:.86rem;color:#666666}.lesson-nav .step-number{width:28px;height:28px;flex-basis:28px;font-size:.76rem}.lesson-panel{background:white;border:1px solid var(--line);border-radius:18px;padding:36px;min-width:0}.lesson-panel h1{font-size:1.9rem;margin-bottom:20px}.lesson-panel p{font-size:1rem;line-height:1.8}.lesson-panel .lead{font-size:1.07rem;color:#454545}.lesson-content h2{font-size:1.15rem;margin-top:28px;margin-bottom:12px}.example-box{border-left:3px solid #fff0a6;background:#fff8d6;border-radius:0 12px 12px 0;padding:20px 24px;margin:23px 0;color:var(--ink)}.example-box p{color:var(--ink);margin-bottom:7px}.example-box p:last-child{margin:0}.example-box strong{font-size:1rem}.vocab-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:23px 0}.vocab-item{padding:16px 18px;border:1px solid var(--line);border-radius:10px}.vocab-item strong{display:block}.vocab-item span{font-size:.88rem;color:var(--muted)}.lesson-tip{background:#fff8d6;border-radius:12px;padding:18px 22px;margin:25px 0}.lesson-tip p{margin:0;font-size:.94rem}.lesson-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:25px;margin-top:30px}.lesson-actions .btn{margin-left:auto}.lesson-actions span{font-size:.83rem;color:var(--muted)}fieldset{padding:0;margin:0;border:0}legend{font-size:1.25rem;font-weight:700;line-height:1.5;margin-bottom:22px;color:var(--ink);width:100%}.quiz-meta{font-size:.84rem;color:var(--muted);margin-bottom:25px}.options{display:grid;gap:12px}.option{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid #dedede;border-radius:12px;cursor:pointer;line-height:1.5}.option:hover{background:#fffbea}.option:has(input:checked){background:#fff8d6;border-color:#171717}.option input{accent-color:#171717;width:18px;height:18px;flex-shrink:0;margin:0}.option.correct{background:#fff8d6;border-color:#9b7b00}.option.incorrect{background:#fff1f2;border-color:#c51f2f}.feedback{padding:18px 22px;border-radius:12px;margin-top:22px;background:#fff8d6;line-height:1.7}.feedback.wrong{background:#fff1f2}.feedback strong{display:block;margin-bottom:5px}.feedback p{margin:0;font-size:.94rem;color:#292929}.feedback.wrong p{color:#9c1623}.quiz-actions{display:flex;gap:12px;margin-top:26px}.result-panel{text-align:center;max-width:740px;margin:14px auto 0;padding:46px 40px;background:white;border:1px solid var(--line);border-radius:20px}.result-mark{font-size:2rem;font-weight:700;display:grid;place-items:center;margin:0 auto 22px;width:74px;height:74px;border-radius:50%;background:#fff0a6;color:#171717}.result-panel h1{font-size:2rem}.result-panel>p{max-width:480px;margin:0 auto 28px}.result-stats{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;margin:26px auto 30px;max-width:390px;padding:22px}.result-stats div+div{border-left:1px solid var(--line)}.result-stats strong{display:block;font-size:1.8rem}.result-stats span{font-size:.82rem;color:var(--muted)}.result-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.journey-summary{display:flex;gap:25px;background:var(--brand);color:white;border-radius:18px;padding:25px 30px;margin-bottom:28px}.journey-summary strong{font-size:1.8rem;display:block;line-height:1.3}.journey-summary span{color:#eeeeee;font-size:.87rem}.notice{position:fixed;right:24px;bottom:24px;max-width:380px;padding:15px 22px;background:#171717;color:white;border-radius:12px;z-index:30;box-shadow:0 8px 25px #0002;font-size:.9rem}.noscript{position:fixed;inset:30% 10% auto;background:white;border:2px solid #fff0a6;padding:25px;z-index:40}footer{max-width:1360px;margin:auto;border-top:1px solid var(--line);padding:24px 42px;display:flex;gap:20px;align-items:center;color:var(--muted);font-size:.77rem}footer>span:first-child{font-family:Manrope,Arial,sans-serif;font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:-.5px}footer p{margin:0}.footer-note{margin-left:auto}
@media(min-width:1600px){.course-art{height:175px}}@media(max-width:1200px){.sidebar{width:204px;padding:30px 14px}.workspace{margin-left:204px}main{padding:32px 28px 45px}.topbar{padding:0 28px}.course-grid{gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.featured h2{font-size:1.6rem}.featured-art .hello{font-size:3.5rem}.featured-art .phrase{font-size:1.4rem}.detail-layout{grid-template-columns:minmax(0,1fr) 270px;gap:20px}.lesson-layout{grid-template-columns:220px minmax(0,1fr);gap:18px}.lesson-panel{padding:28px}}
@media(max-width:900px){.sidebar{position:sticky;inset:0;top:0;width:auto;padding:13px 24px;flex-direction:row;align-items:center;gap:30px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:1.6rem;padding:0;gap:8px}.brand-mark{width:30px;height:30px;font-size:1.5rem}.side-label,.side-note,.storage-note{display:none}.sidebar nav{display:flex;margin-left:auto;gap:8px}.sidebar nav a{padding:10px 12px;font-size:.84rem}.sidebar nav a span{font-size:1.15rem}.workspace{margin-left:0}.topbar{height:64px}.detail-layout{grid-template-columns:minmax(0,1fr) 270px}.lesson-layout{grid-template-columns:1fr}.curriculum{padding:16px 22px}.curriculum .course-title{margin:12px 0}.curriculum summary:after{content:' −';float:right;color:var(--muted)}.curriculum:not([open]) summary:after{content:' +'}footer{padding:24px 28px}.page-intro h1{font-size:2.1rem}}
@media(max-width:650px){.sidebar{padding:12px 16px;gap:12px;flex-wrap:wrap}.sidebar .brand{font-size:1.45rem}.sidebar nav{gap:4px;width:100%;margin-left:0}.sidebar nav a{font-size:.875rem;padding:9px 10px;gap:6px;flex:1;text-align:center;justify-content:center}.sidebar nav a span{display:none}.brand-mark{width:27px;height:27px;font-size:1.3rem}.topbar{padding:0 20px;height:56px}.topbar-label{font-size:.76rem}.demo-badge{font-size:.75rem;margin-right:0;padding:3px 8px}.student-label,.avatar{display:none}main{padding:27px 20px 40px}.page-intro{display:block;margin-bottom:24px}.page-intro h1{font-size:1.85rem;letter-spacing:-.8px}.page-intro p{font-size:.92rem}.count-tag{display:none}.featured{grid-template-columns:1fr;min-height:0;margin-bottom:28px}.featured-copy{padding:26px 25px}.featured h2{font-size:1.55rem;max-width:300px}.featured p{font-size:.88rem}.featured-art{display:none}.section-heading{display:block}.section-heading h2{margin-bottom:15px;font-size:1.3rem}.search{min-width:0;width:100%;padding:11px 12px}.search input{font-size:1rem}.filters{gap:7px}.filter{padding:7px 13px;font-size:.83rem}.course-grid{grid-template-columns:1fr;gap:20px}.course-art{height:145px}.course-body{padding:22px}.course-body h3{font-size:1.15rem}.course-body>p{font-size:.95rem}.course-meta{font-size:.81rem}.card-link{font-size:.95rem;min-height:42px}.detail-header{padding:27px 24px}.detail-header h1{font-size:1.9rem;letter-spacing:-.8px}.detail-header>p{font-size:.95rem}.detail-layout{grid-template-columns:1fr;gap:22px}.start-panel{position:static;grid-row:1}.panel{padding:24px}.lesson-panel{padding:26px 22px}.lesson-panel h1{font-size:1.65rem;letter-spacing:-.6px}.vocab-list{grid-template-columns:1fr}.lesson-actions{align-items:flex-start;flex-direction:column}.lesson-actions .btn{margin:0;width:100%}.lesson-top{align-items:flex-start}.lesson-top>span{font-size:.78rem;white-space:nowrap}.example-box{padding:17px 18px}.option{padding:15px 14px}.quiz-actions .btn{width:100%}.result-panel{padding:34px 22px}.result-panel h1{font-size:1.65rem;letter-spacing:-.6px}.result-buttons .btn{width:100%}.journey-summary{padding:22px;gap:30px}.journey-summary strong{font-size:1.6rem}footer{padding:22px 20px;flex-wrap:wrap;gap:8px 16px}.footer-note{margin-left:0;flex-basis:100%}footer p{font-size:.75rem}.notice{right:16px;left:16px;bottom:16px;max-width:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.brand-name{font-size:1.125rem;line-height:1.3;letter-spacing:-.35px}.brand-name>span{display:block}footer>span:first-child{white-space:nowrap}

.listen-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.listen-controls .btn{font-size:.875rem;padding:8px 12px}.vocab-item strong{font-size:1.25rem;line-height:1.5;overflow-wrap:anywhere}.dialogue{display:grid;gap:14px;margin:24px 0}.dialogue-line{background:#fff8d6;border-radius:14px;padding:18px 22px;margin-right:8%;}.dialogue-line.max{background:#fff8d6;margin-right:0;margin-left:8%}.dialogue-line p{margin:5px 0}.dialogue-line p[lang=de]{font-size:1.15rem;color:var(--ink);font-weight:600}.dialogue-line .translation{font-size:1rem}.dialogue-line .btn{margin-top:9px}.recap p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:10px 0}.recap strong{font-size:1.2rem;color:var(--ink)}#practice-status{margin-top:18px;min-height:2em;font-weight:600}.audio-note{color:var(--muted)}@media(max-width:650px){.dialogue-line,.dialogue-line.max{margin:0;padding:18px}.listen-controls .btn{flex:1}.recap p{flex-direction:column}.vocab-item span{font-size:1rem}}

/* Teachers Kingdom: yellow, black, white and red. */
:root{--yellow:#fff0a6;--red:#c51f2f;--brand:#171717;--ink:#171717;--muted:#555555;--line:#dedede;--bg:#f5f5f5}
.sidebar{background:#171717;border-right-color:#171717;color:#fff}.sidebar .brand{color:#fff}.brand-mark{background:var(--yellow);color:#171717}.sidebar .side-label,.sidebar .storage-note{color:#cfcfcf}.sidebar nav a{color:#eee}.sidebar nav a:hover{background:#303030;color:#fff}.sidebar nav a.active{background:var(--yellow);color:#171717}.side-note{background:#292929;color:#fff;border-top:3px solid var(--red)}.side-note>span{color:var(--yellow)}.side-note p{color:#d7d7d7}
.topbar{background:#fff;border-bottom:3px solid var(--red)}.featured{background:var(--yellow);color:#171717}.featured p,.featured .eyebrow{color:#292929}.featured-art{background:#171717;color:var(--yellow)}.featured-art .art-label{color:#fff}.featured-art .level-big{color:#454545}
.btn.primary{background:var(--yellow);color:#171717;border-color:var(--yellow)}.btn.primary:hover{background:#f5e394;border-color:#f5e394}.btn.secondary:hover{background:#fff8d6;border-color:#9b7b00}.card-link:hover{color:var(--red)}.course-level{background:#171717;color:#fff}.progress-fill{background:var(--red)}.journey-summary{background:#171717;border-left:6px solid var(--yellow)}.result-mark{background:var(--yellow);color:#171717}.option.incorrect{background:#fff1f2;border-color:var(--red)}.feedback.wrong{background:#fff1f2;border-left:4px solid var(--red)}.feedback:not(.wrong){border-left:4px solid var(--yellow)}.notice{background:#171717;border-left:4px solid var(--yellow)}
.featured .btn.primary{background:#171717;color:#fff0a6;border-color:#171717}.featured .btn.primary:hover{background:#c51f2f;color:#fff;border-color:#c51f2f}
.theme-toggle{font-size:.875rem;white-space:nowrap;min-height:42px;padding:8px 12px}
:root[data-theme=dark]{--ink:#f5f5f5;--muted:#bdbdbd;--line:#414141;--bg:#121212;color-scheme:dark}
[data-theme=dark] .topbar,[data-theme=dark] .course-card,[data-theme=dark] .panel,[data-theme=dark] .curriculum,[data-theme=dark] .lesson-panel,[data-theme=dark] .result-panel,[data-theme=dark] .empty,[data-theme=dark] .search,[data-theme=dark] .btn.secondary,[data-theme=dark] .skip-link,[data-theme=dark] .noscript{background:#202020;color:var(--ink)}
[data-theme=dark] .sidebar{background:#181818;border-color:var(--line)}
[data-theme=dark] .featured{background:#28261e;color:var(--ink);border:1px solid #665b31}
[data-theme=dark] .featured h2,[data-theme=dark] .featured .eyebrow{color:var(--yellow)}
[data-theme=dark] .featured p{color:#e2dcc8}
[data-theme=dark] .featured .btn.primary{background:var(--yellow);color:#171717;border-color:var(--yellow)}
[data-theme=dark] .featured .btn.primary:hover{background:#f5e394}
[data-theme=dark] .course-art,[data-theme=dark] .detail-header{background:#302d20;color:var(--yellow)}
[data-theme=dark] .detail-header h1{color:var(--yellow)}
[data-theme=dark] .detail-header>p,[data-theme=dark] .detail-header .course-meta,[data-theme=dark] .detail-category{color:#e2dcc8}
[data-theme=dark] .course-level{background:var(--yellow);color:#171717}
[data-theme=dark] .category-label,[data-theme=dark] .lesson-panel .lead,[data-theme=dark] .lesson-nav a,[data-theme=dark] .lesson-nav .locked{color:var(--muted)}
[data-theme=dark] .eyebrow,[data-theme=dark] .check,[data-theme=dark] .card-link:hover,[data-theme=dark] .back-link:hover{color:var(--yellow)}
[data-theme=dark] .step-number{background:#333;color:#e4e4e4}
[data-theme=dark] .lesson-nav a[aria-current=step]{background:#3c3623;color:var(--yellow)}
[data-theme=dark] .example-box,[data-theme=dark] .lesson-tip,[data-theme=dark] .dialogue-line,[data-theme=dark] .dialogue-line.max{background:#2b2922}
[data-theme=dark] .dialogue-line .translation,[data-theme=dark] .lesson-tip p{color:#d2d2d2}
[data-theme=dark] .option{border-color:var(--line)}
[data-theme=dark] .option:hover,[data-theme=dark] .btn.secondary:hover{background:#333024}
[data-theme=dark] .option:has(input:checked),[data-theme=dark] .option.correct,[data-theme=dark] .feedback:not(.wrong){background:#353020;border-color:#b29d54;color:#f5f5f5}
[data-theme=dark] .feedback p{color:#efe7ca}
[data-theme=dark] .option.incorrect,[data-theme=dark] .feedback.wrong{background:#3a2026;border-color:#eb6d7b}
[data-theme=dark] .feedback.wrong p{color:#ffc4cc}
[data-theme=dark] .option input{accent-color:#fff0a6}
[data-theme=dark] .progress-track{background:#414141}
[data-theme=dark] .avatar{background:#353020;color:var(--yellow)}
[data-theme=dark] .empty{border-color:#555}
[data-theme=dark] .filter{background:#202020;color:var(--muted)}
[data-theme=dark] .filter.active{background:var(--yellow);color:#171717}
[data-theme=dark] .search{border-color:var(--line)}
@media(max-width:650px){.topbar-right{width:100%;justify-content:space-between}.topbar-label{display:none}.theme-toggle{min-height:42px}.topbar{padding-top:6px;padding-bottom:6px}}

.topbar{justify-content:flex-end}
.account-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.save-word{margin-top:12px;width:100%;font-size:.875rem;padding:8px 12px}.sync-status{font-size:.875rem}.review-score{font-size:1.8rem!important;font-weight:700;color:var(--ink)}.review-links{padding-left:22px}.review-links li{margin-bottom:12px}.review-links a{text-decoration:underline;text-underline-offset:3px}#account-control{display:flex;align-items:center;gap:8px}.sidebar nav{gap:6px}@media(max-width:900px){.sidebar nav{flex-wrap:wrap}.sidebar nav a{font-size:.875rem}}@media(max-width:650px){.sidebar nav{display:grid;grid-template-columns:1fr 1fr}.account-name{max-width:130px}}

.study-tools progress{width:100%;height:12px;accent-color:var(--accent)}.study-links{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.study-tools [aria-pressed="true"]{outline:2px solid currentColor}.flashcard{max-width:640px;margin:auto}.card-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;width:100%;min-height:220px;padding:24px;margin:24px 0;border:1px solid currentColor;border-radius:16px;background:transparent;color:inherit;cursor:pointer;font:inherit}.card-face strong{font-size:clamp(1.5rem,5vw,2.5rem);overflow-wrap:anywhere}.card-face span{font-size:1rem}.study-tools h2{margin-top:0}
.assistant-toggle{position:fixed;right:20px;bottom:20px;z-index:25;box-shadow:0 3px 15px #0002}.assistant-panel{position:fixed;right:20px;bottom:84px;z-index:26;width:min(400px,calc(100vw - 24px));max-height:calc(100dvh - 110px);overflow:auto;padding:20px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 5px 30px #0003}.assistant-panel[hidden]{display:none}.assistant-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.assistant-heading h2{font-size:1.2rem;margin:0}.assistant-panel p,.assistant-panel label,.assistant-panel summary{font-size:.9rem}.assistant-panel textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;resize:vertical}.assistant-consent{display:block;margin:10px 0}.assistant-messages{max-height:220px;overflow:auto}.assistant-message{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;border:1px solid var(--line);border-radius:10px}.assistant-message.student{border-left:4px solid #c51f2f}.assistant-message.tutor{border-left:4px solid #d8bd5f}.assistant-panel details{margin-top:16px}.assistant-panel details button{margin:8px 4px 0 0}@media(max-width:600px){.assistant-panel{right:12px;bottom:78px}.assistant-toggle{right:12px;bottom:12px}}

.skill-topics{display:flex;gap:8px;overflow-x:auto;padding:4px 4px 14px;margin-bottom:20px}.skill-topics a{flex-shrink:0}.skill-topics [aria-current]{border:2px solid var(--ink);background:var(--yellow);color:#171717}.writing-answer{display:block;width:100%;font:inherit;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);margin:10px 0 20px}.topbar-right{flex-wrap:wrap}

.brand-logo{display:block;position:relative;width:64px;height:68px;overflow:hidden;flex-shrink:0;background:#fff;border-radius:10px}.brand-logo img{position:absolute;width:120px;height:auto;max-width:none;left:-28px;top:-59px}.brand{gap:8px;padding:0;font-size:1.5rem}.brand-name{min-width:0}@media(max-width:900px){.brand-logo{width:48px;height:50px}.brand-logo img{width:92px;left:-22px;top:-46px}}
.brand-logo{background:transparent;border:0;border-radius:0;overflow:visible;width:58px;height:58px;box-shadow:none}.brand-logo img{position:static;display:block;width:100%;height:100%;object-fit:contain}.brand{align-items:center}@media(max-width:900px){.brand-logo{width:46px;height:46px}.brand-logo img{position:static;width:100%;height:100%}}
.level-filter{display:flex;align-items:center;gap:12px;margin:0 0 20px}.level-filter select{font:inherit;padding:8px 12px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px}.reading-text{font-size:1.1rem;line-height:1.9;margin-top:18px}.activity-quiz fieldset{margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:12px}.activity-quiz legend{font-weight:600}.ai-result{white-space:pre-wrap;overflow-wrap:anywhere;margin:20px 0}.ai-result:empty{display:none}.lesson-panel details.panel{box-shadow:none}

.verb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}.verb-card{border:1px solid var(--line);border-radius:12px;padding:18px}.verb-card h3{font-size:1.25rem}.verb-card .listen-controls{flex-wrap:wrap}

.conjugation-table{width:100%;border-collapse:collapse;margin:16px 0}.conjugation-table th,.conjugation-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);font-size:1rem}.conjugation-table th{font-weight:600;width:50%}

.color-swatch{display:block;width:100%;height:48px;border:1px solid var(--line);border-radius:8px;margin-bottom:14px}

.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}.topic-card{display:block;margin:0}.topic-card:hover,.topic-card:focus-visible{border-color:var(--ink)}.topic-card h2{font-size:1.15rem}.topic-card span{color:var(--muted);font-size:.9rem}#vocabulary-search{max-width:600px}

.skill-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.skill-summary a{padding:14px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:8px}.weekly-study{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.weekly-study>div{display:flex;flex-direction:column;gap:10px;font-size:.9rem}.weekly-study progress{width:100%;accent-color:var(--red)}@media(max-width:650px){.weekly-study{grid-template-columns:1fr}.weekly-study>div{display:grid;grid-template-columns:100px 1fr 110px;align-items:center}}
/* A1 study tools extend the existing quiet yellow theme. */
.academy-nav{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:4px}
.academy-nav a{font-size:14px;padding:9px 12px}
.academy-top{margin-bottom:20px}.academy-quiz fieldset{border:0;padding:18px 0;margin:0;border-bottom:1px solid var(--line)}
.academy-quiz legend{font-weight:600;font-size:1rem}.academy-quiz .options{margin:12px 0}.academy-quiz button{margin-top:16px}
.lesson-media{display:block;width:100%;max-width:960px;margin:18px 0;border-radius:12px}video.lesson-media{background:#171717;max-height:560px}
.microphone-panel{margin:24px 0;padding:20px;border:1px solid var(--line);border-radius:14px}.mic-feedback{white-space:pre-wrap}
.assessment-checks{display:grid;gap:12px;margin:18px 0}.assessment-checks label{display:flex;align-items:flex-start;gap:8px;font-size:1rem}
.assessment-clock{position:sticky;top:8px;z-index:2;width:max-content;max-width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-weight:600}
.editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-editor label{display:block;margin:14px 0}.content-editor details{margin:18px 0}.content-editor fieldset{min-width:0}
.table-scroll{overflow-x:auto;max-width:100%}.table-scroll table{border-collapse:collapse;width:100%;font-size:1rem}.table-scroll th,.table-scroll td{padding:12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.invite-code{font-family:monospace;font-size:1rem;letter-spacing:.06em}.reading-text{white-space:pre-line;line-height:1.8}
.skill-summary>div{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px}
[data-academy-form] label{line-height:1.6}[data-academy-form] input[type=file]{max-width:100%}
@media(max-width:760px){.editor-grid{grid-template-columns:1fr}.microphone-panel{padding:14px}.academy-nav{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}.academy-nav a{padding:8px 10px}.assessment-clock{font-size:14px;width:auto}.table-scroll table{min-width:550px}}

@media(min-width:901px){.sidebar{overflow-y:auto}.sidebar .academy-nav a{padding:8px 12px}.sidebar .academy-nav{gap:2px}}
.academy-menu{margin-top:18px}.academy-menu summary{cursor:pointer;font-size:14px;padding:10px 12px}.academy-menu .academy-nav{margin-top:8px;padding-top:8px}.academy-nav a[hidden]{display:none!important}
@media(max-width:900px){.sidebar .academy-menu{width:100%;margin-top:0}.sidebar .academy-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar .academy-menu summary{text-align:center}.sidebar .academy-nav a{white-space:normal}}

.engagement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}.engagement-grid>.panel{margin:0}.engagement-picture img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:14px}.engagement-picture h2{margin-top:16px}.engagement-match{display:grid;grid-template-columns:1fr 1fr;gap:14px}.engagement-match>div{display:flex;flex-direction:column;gap:10px}.engagement-match button{min-height:52px;white-space:normal}.engagement-match button[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:2px}.engagement-sentence{min-height:72px;padding:18px;border:1px solid var(--line);border-radius:12px;font-size:1.25rem;margin:18px 0}.engagement-bubble{border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0;max-width:680px;background:var(--bg)}.engagement-bubble p{font-size:1.15rem}.engagement-bubble.answer{margin-left:auto;border-left:4px solid var(--ink)}.engagement-choices{display:flex;flex-wrap:wrap;gap:10px}.engagement-achievements{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}.engagement-achievement{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}.engagement-achievement span{color:var(--muted);font-size:.9rem}.engagement-achievement.earned{border:2px solid var(--ink)}.engagement-daily textarea{width:100%;box-sizing:border-box;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit}.engagement-daily form{max-width:680px}button:disabled{cursor:default}.engagement-picture .study-links{gap:8px}@media(max-width:480px){.engagement-match{gap:8px}.engagement-match .btn{padding:12px 6px;font-size:.9rem}.engagement-choices .btn{width:100%;white-space:normal}}

.karaoke-panel{max-width:960px}.karaoke-tabs,.karaoke-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:18px 0}.karaoke-tabs [aria-pressed=true]{border:2px solid var(--ink)}.karaoke-controls select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:8px;border-radius:8px}.karaoke-panel progress{width:100%;margin-bottom:18px}.karaoke-lines{display:grid;gap:12px}.karaoke-line{display:flex;flex-direction:column;gap:9px;text-align:left;width:100%;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}.karaoke-current{border:2px solid var(--ink);box-shadow:inset 5px 0 0 var(--ink)}.karaoke-speaker{font-size:.9rem;color:var(--muted)}.karaoke-de{font-size:clamp(1.25rem,3vw,1.75rem);line-height:1.5;font-weight:600}.karaoke-tr{color:var(--muted)}.karaoke-mask{display:none}.karaoke-hidden .karaoke-de,.karaoke-hidden .karaoke-tr{display:none}.karaoke-hidden .karaoke-mask{display:block}.karaoke-line:focus-visible{outline:3px solid var(--ink);outline-offset:3px}@media(max-width:480px){.karaoke-panel .study-links .btn{flex:1 1 140px;white-space:normal}.karaoke-line{padding:16px}}

.photo-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start}.photo-layout>section{min-width:0}.photo-scene{position:relative;overflow:hidden;border-radius:16px;isolation:isolate}.photo-scene>img{display:block;width:100%;height:auto}.photo-object{position:absolute;border:0;background:transparent;cursor:pointer;padding:0;min-width:0;min-height:0;color:#171717}.photo-object>span{position:absolute;transform:translate(-50%,-50%);display:grid;place-content:center;min-width:44px;height:44px;padding:0 6px;border:2px solid #171717;border-radius:100px;background:#fff4b7;font:600 1rem/1 system-ui;box-sizing:border-box;box-shadow:0 2px 8px #0003}.photo-object.selected>span{background:#171717;color:#fff4b7;border-color:#fff4b7}.photo-object:focus-visible{outline:3px solid #fff;outline-offset:-3px}.photo-object:focus-visible>span{outline:3px solid #171717;outline-offset:3px}.photo-object-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.photo-object-list [aria-pressed=true]{outline:2px solid var(--ink);outline-offset:1px}.photo-work{margin:0}.photo-step{color:var(--muted)}.photo-sentence{font-size:1.3rem;line-height:1.5;padding:18px;min-height:74px;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;margin:18px 0;overflow-wrap:anywhere}.photo-tokens{display:flex;flex-wrap:wrap;gap:8px}.photo-tokens .btn{min-height:44px}.photo-result strong{display:block;font-size:1.25rem;line-height:1.5}.photo-work .btn{white-space:normal}.photo-work .study-links{gap:8px}.photo-object-list .btn{font-size:.9rem;min-height:44px}@media(max-width:1000px){.photo-layout{grid-template-columns:1fr}.photo-work{max-width:none}}@media(prefers-reduced-motion:reduce){.photo-object{transition:none}}

.exam-setup select{display:block;max-width:100%;margin:12px 0 20px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}.exam-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:18px 0}.exam-topics label{display:flex;gap:10px;align-items:center;padding:10px;min-height:44px}.exam-topics input{width:20px;height:20px}.exam-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.exam-numbers>div{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:12px}.exam-numbers strong{font-size:1.75rem}.exam-numbers span,.exam-topic{color:var(--muted)}.exam-summary{margin:24px 0}.exam-round{max-width:850px;margin:auto}.exam-round-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.exam-round-top .btn{margin-left:auto}.exam-round progress{width:100%;margin:20px 0 12px}.exam-round h1{font-size:clamp(1.5rem,3.5vw,2.2rem);line-height:1.5;min-height:80px;overflow-wrap:anywhere}.exam-options{display:grid;gap:14px}.exam-option{display:flex;align-items:center;gap:16px;min-height:72px;width:100%;padding:16px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:500 1.125rem/1.5 system-ui;cursor:pointer}.exam-letter{display:grid;place-content:center;flex:0 0 40px;height:40px;border:1px solid var(--line);border-radius:10px;font-weight:700}.exam-option:hover:not(:disabled),.exam-option:focus-visible{border:2px solid var(--ink);outline-offset:3px}.exam-option:disabled{opacity:.6}.exam-save{min-height:28px;margin:20px 0 0;color:var(--muted)}.exam-result{max-width:950px;margin:auto}.exam-results{padding-left:24px;margin-top:28px}.exam-results>li{margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:14px}.exam-results>li>div{display:flex;gap:16px;flex-wrap:wrap}.exam-wrong{border-left:4px solid var(--ink)!important}.exam-reasons{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.exam-reasons [aria-pressed=true]{outline:2px solid var(--ink)}.exam-reasons .btn{white-space:normal}.exam-results summary,.exam-method summary,.exam-profile summary{cursor:pointer;padding:10px 0;min-height:24px}.exam-method{margin:20px 0}.exam-method p{max-width:760px}.exam-result h1{font-size:2.5rem}@media(max-width:600px){.exam-numbers{grid-template-columns:repeat(2,1fr)}.exam-round h1{min-height:60px}.exam-options{gap:10px}.exam-option{padding:12px;min-height:64px}.exam-reasons .btn{flex:1 1 160px}.exam-results{padding-left:18px}.exam-results>li{padding:14px}.exam-setup .study-links{flex-wrap:wrap}}

.about-page{max-width:820px;margin:0 auto;box-sizing:border-box}.about-page h1{margin-top:0}.about-page h2{font-size:1.3rem;margin-top:28px}.about-page p{font-size:1rem;line-height:1.8}.about-page .study-links{margin-top:28px}.site-about-link{color:var(--ink);font-size:.9rem;padding:10px 0;min-height:24px}.site-about-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.footer-links{display:flex;flex-wrap:wrap;gap:20px}.contact-channel{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:24px 0}.contact-channel .btn{min-height:44px;box-sizing:border-box;overflow-wrap:anywhere}
.help-page details{border-bottom:1px solid var(--line);padding:12px 0}.help-page summary{cursor:pointer;font-weight:600;min-height:44px;display:list-item;align-content:center}.report-source{overflow-wrap:anywhere}.help-page .btn{white-space:normal}

.exam-meaning{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.exam-meaning strong{display:block;margin-bottom:8px}
.exam-meaning p,.exam-meaning ul{margin:0}
.exam-meaning p+p{margin-top:10px}
.exam-meaning ul{padding-left:20px}
.exam-meaning li+li{margin-top:6px}
.article-practice{max-width:740px;margin:auto}.article-practice progress{width:100%}.article-word{text-align:center;font-size:clamp(2rem,7vw,3.5rem);margin:40px 0;overflow-wrap:anywhere}.article-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.article-options .btn{min-height:64px;font-size:1.35rem}.article-practice .feedback{min-height:48px;margin:24px 0}.article-practice li{padding:8px 0}
.relation-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.relation-options .btn{min-height:60px;white-space:normal}@media(max-width:480px){.relation-options{grid-template-columns:1fr}}
.listening-topic{max-width:820px;margin:auto}.listening-topic .feedback{min-height:36px;margin:24px 0}.listening-topic summary{cursor:pointer;min-height:44px;align-content:center}.listening-topic details p{line-height:1.8}
.twister-page{max-width:820px;margin:auto}.twister-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.twister-tabs [aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}.twister-page h2{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.6;overflow-wrap:anywhere}.twister-page summary{cursor:pointer;min-height:44px;align-content:center}.twister-page .study-links{flex-wrap:wrap}
.puzzle-page{max-width:820px;margin:auto}.puzzle-hunt,.puzzle-cross{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;max-width:390px;margin:24px auto}.puzzle-cell,.cross-cell{min-height:44px;aspect-ratio:1;display:grid;place-content:center;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 1.25rem system-ui;border-radius:6px}.puzzle-cell{cursor:pointer}.puzzle-cell.found{background:#fff0a3;color:#171717}.puzzle-cell[aria-pressed=true]{outline:3px solid var(--ink)}.cross-cell.blank{border:0;background:transparent}.puzzle-answer{font-size:2rem;letter-spacing:.15em;min-height:60px;margin:24px 0;overflow-wrap:anywhere}.puzzle-page [aria-pressed=true]{outline:2px solid var(--ink)}
/* Compact mobile navigation; desktop keeps its existing sidebar. */
#mobile-menu-toggle{display:none}#mobile-navigation{display:flex;flex-direction:column;flex:1;min-height:0}#mobile-navigation[hidden]{display:none}
@media(max-width:900px){
 .sidebar{position:relative;inset:auto;width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0;padding:12px 16px;z-index:5}
 .sidebar .brand{font-size:1.15rem;gap:8px;letter-spacing:-.4px}.sidebar .brand-name>span{display:inline}.sidebar .brand-logo{width:36px;height:36px}
 #mobile-menu-toggle{display:inline-flex;min-height:44px;padding:8px 14px}
 #mobile-navigation{flex:0 0 100%;width:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);max-height:70dvh;overflow-y:auto}
 #mobile-navigation nav{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0;gap:6px}
 #mobile-navigation nav a{min-height:44px;justify-content:flex-start;text-align:left;padding:10px 12px;box-sizing:border-box}
 .workspace{margin-left:0}.workspace>.topbar{display:none}
 #mobile-navigation .topbar-right{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;width:100%;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);gap:8px}
 #mobile-navigation .topbar-right>.btn{flex:1 1 140px;white-space:normal}
 #mobile-navigation #account-control{flex:1 1 100%;display:flex;justify-content:space-between;flex-wrap:wrap;padding:8px 0;gap:8px}.account-name{max-width:calc(100vw - 130px)}
 main{padding:22px 16px 88px;min-height:60vh}main h1{font-size:1.65rem;line-height:1.3;letter-spacing:-.5px}.panel{padding:20px}
 .engagement-grid{grid-template-columns:1fr;gap:0}.engagement-grid>article.panel:not(.engagement-picture){display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:16px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
 .engagement-grid>article.panel:not(.engagement-picture)>h2{flex:1 1 160px;font-size:1.1rem;margin:0}.engagement-grid>article.panel:not(.engagement-picture)>p{flex:1 1 100%;margin:0;font-size:.9rem}.engagement-grid>article.panel:not(.engagement-picture)>.btn{margin-left:auto;min-height:44px;padding:8px 14px}
 .assistant-toggle{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));min-height:44px;padding:8px 12px;font-size:.8rem;border-radius:24px}.assistant-panel{bottom:calc(68px + env(safe-area-inset-bottom));max-height:calc(100dvh - 90px)}footer{padding-bottom:80px}
}
.puzzle-grid-scroll{overflow-x:auto;max-width:100%}.puzzle-grid-scroll .puzzle-cross{max-width:none}.puzzle-grid-scroll .cross-cell{min-height:36px}
.sidebar .side-label{margin:28px 12px 12px}.sidebar nav a{padding:11px 14px;min-height:44px;box-sizing:border-box}.sidebar .practice-nav{margin-top:24px;padding-top:16px;border-top:1px solid #ffffff26}.sidebar .practice-nav a{font-size:.85rem}
.topbar{min-height:68px;height:auto;padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}.topbar-right{gap:0}.settings-menu{position:relative}.settings-menu>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:16px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-size:.875rem}.settings-menu>summary::-webkit-details-marker{display:none}.settings-menu>summary:after{content:'⌄'}.settings-menu[open]>summary:after{content:'⌃'}.settings-content{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:280px;max-width:calc(100vw - 40px);padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #0002;display:grid;gap:16px}.settings-content #account-control{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}.settings-content .account-name{max-width:100%;overflow-wrap:anywhere}.settings-menu:not([open]) .settings-content{display:none}
.skill-launcher{margin:0 0 24px;padding:0 0 20px;border-bottom:1px solid var(--line)}.skill-launcher h2{font-size:1rem;margin:0 0 12px;color:var(--muted);font-weight:600}.skill-launcher-links{display:flex;flex-wrap:wrap;gap:10px}.skill-launcher-links>.btn{min-height:44px;padding:10px 14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:.875rem}.skill-launcher-links>.btn:hover{border-color:var(--ink)}
@media(max-width:900px){#mobile-navigation .practice-nav{margin-top:12px;padding-top:12px}#mobile-navigation .topbar-right{display:block}.settings-menu>summary{color:var(--ink);background:var(--bg)}.settings-content{position:static;width:100%;max-width:none;box-sizing:border-box;margin-top:8px;box-shadow:none}.skill-launcher-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.skill-launcher-links>.btn{white-space:normal;text-align:center;padding:10px;font-size:.85rem}}
/* One top navigation bar replaces the desktop left rail. */
.sidebar{position:relative;inset:auto;width:100%;padding:16px 28px;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:24px;border-right:0;border-bottom:1px solid var(--line);overflow:visible;z-index:30;background:var(--bg);color:var(--ink)}
.sidebar .brand{flex:0 0 auto;font-size:1.15rem;letter-spacing:-.4px;color:var(--ink);gap:8px}.sidebar .brand-name>span{display:inline}.sidebar .brand-logo{width:38px;height:38px}.sidebar .side-label{display:none}
.workspace{margin-left:0}.workspace>.topbar{display:none}
#mobile-navigation{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:20px;flex:1;min-width:0}
#mobile-navigation nav{display:flex;align-items:center;gap:4px;margin:0;width:auto}
.sidebar nav a{color:var(--ink);padding:10px 12px;min-height:44px;white-space:nowrap;font-size:.875rem}.sidebar nav a:hover{background:var(--line);color:var(--ink)}.sidebar nav a.active{background:var(--yellow);color:#171717}
#mobile-navigation .practice-nav{border:0;border-left:1px solid var(--line);padding:0 0 0 16px;margin:0;gap:4px}
#mobile-navigation .topbar-right{flex:0 0 auto;margin:0;padding:0;border:0;width:auto;display:block}.settings-menu>summary{font-size:.8rem;padding:10px 12px;color:var(--ink)}
@media(max-width:1200px){
 .sidebar{flex-wrap:wrap;justify-content:space-between;gap:0;padding:12px 16px}.sidebar .brand{font-size:1.1rem}.sidebar .brand-logo{width:36px;height:36px}
 #mobile-menu-toggle{display:inline-flex;min-height:44px;padding:8px 14px}
 #mobile-navigation{flex:0 0 100%;width:100%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);max-height:70dvh;overflow-y:auto}
 #mobile-navigation[hidden]{display:none}
 #mobile-navigation nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:6px}
 #mobile-navigation nav a{justify-content:flex-start;text-align:left;white-space:normal}
 #mobile-navigation .practice-nav{border-left:0;border-top:1px solid var(--line);padding:12px 0 0;margin:0}
 #mobile-navigation .topbar-right{width:100%;margin:0;padding:0}.settings-content{position:static;width:100%;max-width:none;box-sizing:border-box;margin-top:8px;box-shadow:none}
}
.skills-menu .settings-content{left:0;right:auto;width:220px}.skills-menu .settings-content nav{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;width:100%!important}.skills-menu .settings-content nav a{width:100%;box-sizing:border-box;justify-content:flex-start}.skills-menu:not([open]) .settings-content{display:none}@media(max-width:1200px){.skills-menu .settings-content{width:100%;max-width:none}}
.skills-menu .exam-menu-link{border-top:1px solid var(--line);border-radius:0;margin-top:6px;padding-top:14px}
.welcome-main{max-width:1440px;padding-top:32px}.welcome-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:stretch}.welcome-copy{padding:32px 0 36px}.welcome-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--muted);margin:0 0 24px}.welcome-copy h1{font-size:clamp(3rem,5.5vw,5.4rem);line-height:1.05;letter-spacing:-.055em;margin:0 0 28px;font-weight:800}.welcome-copy h1 em{font-style:normal;display:inline;background:#fff0a6;color:#171717;padding:0 .13em}.welcome-lead{font-size:1.1rem;line-height:1.7;max-width:380px;margin-bottom:28px}.welcome-start{background:#fff0a6;color:#171717;border:1px solid #d8bd5f;gap:30px;padding:16px 22px;min-height:56px;font-size:1rem}.welcome-start:hover{background:#ffe889}.welcome-exam{display:block;width:fit-content;margin-top:18px;font-size:.9rem;text-decoration:underline;text-underline-offset:5px}.welcome-scene{position:relative;background:#fff2b6;color:#171717;border-radius:24px;padding:36px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:440px}.welcome-scene-label{font-size:.7rem;letter-spacing:.16em;font-weight:700;margin-bottom:32px}.welcome-greeting{font-size:clamp(4rem,7vw,7rem);letter-spacing:-.07em;font-weight:800;line-height:1.1}.welcome-greeting>span{color:#b92d38}.welcome-dialogue{margin:20px 0 0;position:relative;z-index:1}.welcome-dialogue p{color:#171717;width:fit-content;max-width:100%;font-size:1.3rem;line-height:1.5;padding:12px 18px;background:#fff9df;border:1px solid #dbc879;border-radius:16px;margin:0 0 12px}.welcome-dialogue p+p{margin-left:24px}.welcome-listen{position:relative;z-index:1;align-self:flex-start;min-height:44px;border:0;background:#171717;color:#fff2b6;border-radius:24px;padding:10px 20px;font:600 .9rem system-ui;cursor:pointer;margin-top:10px}.welcome-translation{font-size:.8rem;line-height:1.8;margin-top:18px;color:#514620;position:relative;z-index:1}.welcome-a1{position:absolute;right:-6px;bottom:-32px;font-size:9rem;font-weight:800;opacity:.1;letter-spacing:-.08em;pointer-events:none}.welcome-try{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 0;margin:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.welcome-try .welcome-label{margin-bottom:12px}.welcome-try h2{font-size:1.5rem;letter-spacing:-.03em;margin:0}.welcome-choices{display:flex;flex-wrap:wrap;gap:8px}.welcome-choices [aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}.welcome-feedback{font-size:.875rem;margin:14px 0 0;min-height:24px;max-width:420px}.welcome-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.welcome-paths>a{display:flex;align-items:flex-start;gap:14px;padding:18px 0;color:var(--ink)}.welcome-number{color:var(--muted);font-size:.8rem;padding-top:5px}.welcome-paths h2{font-size:1.1rem;margin:0 0 8px}.welcome-paths p{font-size:.875rem;line-height:1.6;margin:0}.welcome-paths>a>span:last-child{margin-left:auto;font-size:1.4rem}.welcome-paths>a:hover h2{text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.welcome-hero{grid-template-columns:1fr;gap:20px}.welcome-copy{padding:10px 0 8px}.welcome-main .welcome-copy h1{font-size:clamp(2.8rem,10vw,4.5rem);line-height:1.08;letter-spacing:-.05em}.welcome-scene{min-height:340px;padding:28px}.welcome-greeting{font-size:5rem}.welcome-try{flex-direction:column;align-items:flex-start;padding:24px 0;margin:24px 0}.welcome-paths{grid-template-columns:1fr;gap:0}.welcome-paths>a{border-bottom:1px solid var(--line)}.welcome-lead{font-size:1rem}.welcome-label{margin-bottom:18px}.welcome-start{width:100%;box-sizing:border-box}.welcome-exam{margin:18px auto 0}}
.writing-feedback-panel{margin:16px 0 24px;padding:18px;border:1px solid var(--line);border-radius:12px}.writing-feedback-panel>p{font-size:.9rem;line-height:1.7}.writing-check-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.writing-check-result:not(:empty){border-top:1px solid var(--line);margin-top:20px;padding-top:12px}.writing-feedback-panel summary{cursor:pointer;padding:10px 0}.writing-feedback-panel .btn{min-height:48px}
#main details>summary{cursor:pointer}#admin-dashboard-link[hidden]{display:none!important}

/* Account entry */
.auth-panel{max-width:480px;margin:28px auto;padding:clamp(20px,5vw,36px)}
.auth-panel h1{font-size:clamp(28px,5vw,38px);margin:20px 0 24px}
.auth-providers,.auth-panel form,.auth-actions{display:grid;gap:12px}
.auth-panel .btn{width:100%;min-height:48px;text-align:center;justify-content:center}
.auth-panel label{display:grid;gap:7px;font-weight:600;font-size:16px}
.auth-panel input{width:100%;box-sizing:border-box;min-height:48px;font-size:16px;border:1px solid var(--border,#777);border-radius:12px;background:transparent;color:inherit;padding:10px 12px}
.auth-divider{display:flex;align-items:center;gap:12px;font-size:14px;margin:24px 0}
.auth-divider:before,.auth-divider:after{content:'';height:1px;flex:1;background:var(--border,#777)}
.auth-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:16px 0}
.auth-status{min-height:24px;overflow-wrap:anywhere}

.mail-message{max-width:800px}.mail-message-body{white-space:pre-wrap;line-height:1.8;overflow-wrap:anywhere}.mail-message h2{font-size:22px}#mail-answer{width:100%;box-sizing:border-box;min-height:220px;font-size:16px}

.letter-sheet{display:grid;gap:12px;margin:20px 0}.letter-row{padding:14px;border:1px solid var(--line);border-radius:12px}.letter-row p{margin:0 0 10px}.letter-row select{width:100%;max-width:420px;font:inherit;padding:12px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px}.letter-feedback{margin-top:10px!important}.letter-options{display:grid;gap:12px;margin:20px 0}.letter-options button{text-align:left;white-space:normal}.letter-selected{min-height:60px;line-height:1.8;padding-left:24px}.letter-exercise>.btn{margin:12px 8px 0 0}

.letter-row select:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.studio-hero{padding:clamp(24px,5vw,48px);background:var(--yellow);color:#171717;border-radius:var(--radius);margin-bottom:30px}.studio-hero p{color:#343434}.studio-hero h1{font-size:clamp(2rem,5vw,3.6rem)}.studio-hero h2{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.35}.studio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.studio-card{display:block;margin:0;transition:transform .15s}.studio-card:hover{transform:translateY(-3px)}.studio-number{display:block;color:var(--muted);margin-bottom:12px;font-weight:700}.studio-badge{display:inline-block;font-size:.8rem;border:1px solid var(--line);padding:3px 8px;border-radius:8px}.studio-output .btn{margin:16px 10px 0 0}#studio-builder,#studio-material{display:grid;gap:12px;max-width:760px}#studio-builder select,#studio-material input,#studio-material textarea{width:100%;padding:12px;font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px}#studio-builder select:focus-visible,#studio-material textarea:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}@media(max-width:480px){.studio-grid{gap:12px}.studio-card{padding:18px 14px}.studio-card h2{font-size:1.1rem}.studio-card p{font-size:.9rem}}@media(max-width:340px){.studio-grid{grid-template-columns:1fr}}
#teacher-profile-form{display:grid;gap:16px;max-width:760px}#teacher-profile-form input:not([type=checkbox]),#teacher-profile-form textarea,#teacher-profile-form select,#teacher-search input{display:block;width:100%;padding:12px;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px}#teacher-profile-form input[type=checkbox]{width:18px;height:18px}#teacher-search{max-width:620px;margin-bottom:24px}.panel dt{font-weight:700}.panel dd{margin:0 0 14px;overflow-wrap:anywhere}
#feedback-form,[data-feedback-reply]{display:grid;gap:14px;max-width:780px}#feedback-form input,#feedback-form textarea,#feedback-form select,[data-feedback-reply] select,[data-feedback-reply] textarea,#feedback-filter{display:block;width:100%;padding:12px;font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px}.feedback-meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--muted);font-size:.85rem;margin-bottom:12px}.feedback-item p{overflow-wrap:anywhere}#feedback-filter{max-width:300px;margin-bottom:20px}
.exam-papers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}.exam-papers article{padding:18px;border:1px solid var(--line);border-radius:12px}.exam-papers h3{margin-bottom:8px}.exam-papers span{display:block;color:var(--muted);font-size:.85rem;margin-bottom:10px}

.exam-round #exam-question{white-space:pre-line;font-size:clamp(1.2rem,3vw,1.65rem);line-height:1.6;letter-spacing:0}

/* Music karaoke: native audio transport, compact scrollable lyric stage. */
.song-panel,.song-catalog{max-width:860px;margin-inline:auto}.song-panel audio{display:block;width:100%;margin:16px 0}.song-description,.song-hint{color:var(--muted);line-height:1.6}.song-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:16px 0}.song-controls label,.song-catalog>label{display:flex;align-items:center;gap:8px}.song-controls select,.song-catalog select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px}.song-cards{display:grid;gap:16px;margin:20px 0}.song-lyrics{position:relative;max-height:clamp(240px,42vh,430px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px;padding:12px;scroll-behavior:auto}.song-line{display:flex;align-items:center;gap:12px;width:100%;border:2px solid transparent;border-radius:10px;padding:18px 14px;text-align:center;background:transparent;color:var(--ink);font:inherit;cursor:pointer}.song-text{flex:1;display:grid;gap:8px}.song-line-number{font-size:.8rem;color:var(--muted);min-width:16px}.song-de{font-size:clamp(1.25rem,3.5vw,1.9rem);font-weight:600;line-height:1.5}.song-tr{display:none;font-size:1rem;font-weight:400;color:var(--muted);line-height:1.5;border-top:1px solid var(--line);padding-top:8px}.show-translation .song-tr{display:block}.song-past .song-de{color:var(--muted);font-weight:400}.song-current{border-color:var(--ink);background:var(--bg);box-shadow:inset 5px 0 var(--ink)}.song-current .song-de{font-weight:750}.song-line:focus-visible{outline:3px solid var(--ink);outline-offset:1px}.song-vocabulary{margin:20px 0}.song-vocabulary dt{font-weight:700;margin-top:16px}.song-vocabulary dd{margin-left:0}.song-vocabulary dd p{color:var(--muted)}@media(max-width:480px){.song-line{padding:14px 8px;gap:6px}.song-controls{gap:12px}.song-panel{padding:16px}.song-lyrics{padding:6px}.song-controls .btn{min-height:44px}.song-catalog select,.song-controls select{min-height:44px}}
.writing-check-text{white-space:normal}.writing-check-text p,.ai-result p{line-height:1.8;overflow-wrap:anywhere}.writing-check-text h3,.ai-result h3{margin-top:1.5rem;font-size:1.12rem}.writing-check-text li,.ai-result li{margin:.6rem 0;overflow-wrap:anywhere}.writing-check-text code{white-space:normal}#writing-topic{max-width:100%;min-height:44px}.writing-check-result{min-width:0}@media(max-width:600px){.writing-feedback-panel{padding:12px}.writing-check-text ul,.ai-result ul{padding-left:1.2rem}}
.studio-record{margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:12px}.studio-record label,.studio-take label,[data-studio-form] label{display:block;margin:12px 0;line-height:1.6}.studio-record audio,.studio-take audio{width:100%;max-width:100%}[data-studio-form] input:not([type=checkbox]),[data-studio-form] select,[data-studio-form] textarea{width:100%;max-width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--white)}[data-studio-form] textarea{font:inherit;resize:vertical}.studio-take dl{display:grid;grid-template-columns:auto 1fr;gap:8px}.studio-take dd{margin:0}.studio-take .reading-text{overflow-wrap:anywhere}#studio-page-status{overflow-wrap:anywhere}#studio-backing{max-width:100%;min-height:44px}@media(max-width:600px){.studio-record{padding:12px}.studio-take .song-controls{flex-wrap:wrap}}

@media(max-width:1200px){#mobile-navigation> *{flex-shrink:0}}

.pronunciation-button{display:inline-flex;align-items:center;justify-content:flex-start;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0 0 0 8px;padding:0;border:0;border-radius:3px;background:transparent;color:inherit;vertical-align:middle;cursor:pointer;box-shadow:none}.pronunciation-button svg{width:20px;height:20px;flex-shrink:0;pointer-events:none}.pronunciation-button:hover{background:transparent;opacity:.75}.pronunciation-button:active{transform:scale(.94)}.pronunciation-button.is-speaking{background:transparent;color:var(--ink);opacity:.6}.pronunciation-button[aria-busy="true"]{opacity:.5}.pronunciation-button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.vocab-item strong[lang],.verb-card h3[lang],.vocabulary-study h2[lang],.german-curriculum h3[lang]{overflow-wrap:anywhere;min-width:0}.word-heading{display:flex;align-items:center;min-width:0}.word-heading .card-flip-word{min-width:0;overflow-wrap:anywhere;background:transparent;border:0;color:inherit;font:inherit;padding:0;text-align:inherit}.flashcard .card-face{min-width:0}.flashcard .card-face strong{overflow-wrap:anywhere}.vocab-item,.verb-card,.vocabulary-study{min-width:0}
/* Five skill cards remain balanced at every width; reserve space for help controls. */
.skill-summary{grid-template-columns:repeat(5,minmax(0,1fr))}.skill-summary>a{min-width:0;overflow-wrap:anywhere}.workspace>main{padding-bottom:max(96px,calc(80px + env(safe-area-inset-bottom)))}
@media(max-width:1100px){.skill-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-summary>a:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:400px){.skill-summary{grid-template-columns:1fr}.skill-summary>a:last-child:nth-child(odd){grid-column:auto}}
.song-video{display:block;width:100%;height:auto;max-height:60dvh;object-fit:contain;background:#171717;border-radius:12px}

.skip-link:not(:focus-visible){transform:translateY(-200%);clip-path:inset(100%);pointer-events:none}.skip-link:focus-visible{top:12px;transform:none;clip-path:none;pointer-events:auto}

.learning-language-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;max-width:100%;border-bottom:1px solid var(--line)}.learning-language-controls label{display:flex;align-items:center;gap:8px}.learning-language-controls select,#learning-level{font:inherit;min-height:44px;max-width:100%;padding:8px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px}.learning-language-controls span{color:var(--muted);font-size:.85rem}

#learning-language-controls{display:flex;justify-content:center;align-items:center;gap:12px;padding:6px 16px;min-height:56px;border-bottom:1px solid var(--line);background:var(--bg)}.language-flag{display:inline-flex;justify-content:center;align-items:center;width:48px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:8px;cursor:pointer}.language-flag img{display:block;width:30px;height:20px;object-fit:cover}.language-flag[aria-pressed=true]{border:2px solid var(--ink);background:var(--yellow);box-shadow:0 0 0 1px var(--ink)}.language-flag:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.language-flag:disabled{opacity:.55;cursor:wait}

/* German chapter content reuses the existing quiz/card layout. */
.german-curriculum{min-width:0;max-width:100%;overflow-wrap:anywhere}
.german-curriculum .panel,.german-curriculum .q-transcript{min-width:0;max-width:100%}
.german-curriculum textarea,.german-curriculum select{max-width:100%;box-sizing:border-box}
.german-curriculum audio{max-width:100%;width:100%}
.german-curriculum h3 .pronunciation-button,.german-curriculum li .pronunciation-button{vertical-align:middle;flex-shrink:0}
.german-curriculum .q-actions{display:flex;flex-wrap:wrap;gap:.65rem}
@media(max-width:430px){.german-curriculum .q-actions>.btn{width:100%;white-space:normal}.german-curriculum .panel{padding:1rem}.german-curriculum .pronunciation-button{min-width:44px;min-height:44px}}

.german-curriculum input[type=text]{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;font:inherit;min-height:44px;margin:.4rem 0 1rem;padding:.65rem}

.german-legacy{min-width:0;max-width:100%;overflow-wrap:anywhere}.german-legacy summary{cursor:pointer;min-height:44px;display:flex;align-items:center}

/* Compact word audio: visual glyph is 20px; the invisible touch target remains 44px. */
.vocab-item strong[lang],.verb-card h3[lang],.engagement-picture h2[lang],.vocabulary-study h2[lang],.german-curriculum h3[lang]{display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere}.listen-controls:empty{display:none}

/* Unit cards: override generic sibling-panel margins only within the unit grid. */
.unit-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;gap:20px}
.unit-grid>.panel,.unit-grid>.panel+.panel{margin:0;min-width:0;display:flex;flex-direction:column;align-self:stretch;padding:24px;box-sizing:border-box}
.unit-grid>.panel>h2{font-size:1.15rem;line-height:1.4;min-height:2.8em;margin:0 0 16px;overflow-wrap:anywhere}
.unit-grid>.panel>p:first-of-type,.unit-grid>.panel>ul{flex:1;margin-top:0;line-height:1.6;overflow-wrap:anywhere}
.unit-grid>.panel>p{margin-bottom:16px}
.unit-grid>.panel>.btn:last-child{margin-top:auto;align-self:flex-start}
.unit-card-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;padding-top:4px}
.unit-card-actions>.btn{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;width:100%;white-space:normal;text-align:center;box-sizing:border-box}
@media(max-width:1100px){.unit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.unit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.unit-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.unit-grid>.panel>h2{min-height:0}}

.unit-title-link{color:inherit;text-decoration:none;display:block;border-radius:4px}.unit-title-link:hover{text-decoration:underline;text-underline-offset:4px}.unit-title-link:focus-visible{outline:2px solid currentColor;outline-offset:5px}

.language-flag-wrap{position:relative;display:inline-flex;flex-shrink:0}
#learning-language-controls{overflow:visible;position:relative;z-index:41}
.accent-popover{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:220px;max-width:calc(100vw - 32px);padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);box-shadow:0 8px 24px #0002;z-index:42}
.accent-popover[hidden]{display:none!important}
.accent-popover .accent-controls{display:block;margin:0;padding:0;border:0}
.accent-menu-title{font-size:.85rem;margin:6px 10px;color:var(--muted)}
.accent-popover [role=menu]{display:grid;gap:4px}
.accent-popover [role=menuitemradio]{display:block;text-align:left;min-height:44px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.accent-popover [aria-checked=true]{background:var(--yellow);color:#171717;font-weight:650}
.accent-popover button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.accent-popover button:disabled{opacity:.55;cursor:wait}



.word-picture-button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:44px;height:44px;min-width:44px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.word-picture-button svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.word-picture-button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}.word-picture-button:active{opacity:.65}.word-picture-dialog{width:min(480px,calc(100vw - 32px));max-height:85vh;box-sizing:border-box;border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--panel,#fff);color:var(--ink);overflow:auto}.word-picture-dialog::backdrop{background:rgba(0,0,0,.65)}.word-picture-dialog img{display:block;max-width:100%;max-height:65vh;object-fit:contain;margin:12px auto 0}.word-picture-close{display:block;margin-left:auto;min-height:44px;padding:8px 16px;cursor:pointer}

/* Keep activity cards aligned; generic stacked-panel spacing must not enter a grid. */
.german-curriculum .topic-grid{align-items:stretch;grid-auto-rows:1fr}
.german-curriculum .topic-grid>.panel,.german-curriculum .topic-grid>.panel+.panel{margin:0;min-width:0;align-self:stretch;box-sizing:border-box;display:flex;flex-direction:column}
.german-curriculum .topic-grid>.panel>h2,.german-curriculum .topic-grid>.panel>h3{margin-top:0;overflow-wrap:anywhere}
@media(max-width:520px){.german-curriculum .topic-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}

/* Direct navigation from the hamburger button, without a workspace submenu. */
.sidebar{flex-wrap:wrap;justify-content:space-between}
#mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px}
#mobile-navigation{flex:0 0 100%;width:100%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);max-height:70dvh;overflow-y:auto}
#mobile-navigation[hidden]{display:none}
#mobile-navigation #skills-menu nav{display:grid;grid-template-columns:1fr;width:100%;gap:4px}
#mobile-navigation #skills-menu nav a{justify-content:flex-start;white-space:normal;box-sizing:border-box}
#mobile-navigation .topbar-right{width:100%;margin:0;padding:0}
#mobile-navigation .settings-content{position:static;width:100%;max-width:none;box-sizing:border-box;margin-top:8px;box-shadow:none}

/* Group the three activities under one expandable navigation heading. */
.activities-menu>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;min-height:44px;box-sizing:border-box;padding:10px 12px;font-size:.875rem;font-weight:600;color:var(--ink);border-radius:10px}
.activities-menu>summary::-webkit-details-marker{display:none}
.activities-menu>summary::after{content:'⌄';font-size:1rem}
.activities-menu[open]>summary::after{content:'⌃'}
.activities-menu>summary:hover{background:var(--line)}
.activities-menu>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.activities-links{display:grid;gap:4px;margin:4px 0 8px 12px;padding-left:8px;border-left:1px solid var(--line)}
.activities-menu:not([open])>.activities-links{display:none}

.word-card-navigation{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}.word-navigation-arrow{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:6px}.word-navigation-arrow:hover:not(:disabled){background:rgba(128,128,128,.12)}.word-navigation-arrow:focus-visible{outline:2px solid #E6C46B;outline-offset:2px}.word-navigation-arrow:disabled{opacity:.3;cursor:default}

.inline-reading>[data-reading-check-all]{margin-top:16px}.inline-reading [data-reading-result]{grid-column:1/-1}.inline-reading [data-reading-result]:empty{display:none}

.tk-notifications{position:relative;display:inline-flex;align-items:center}.notification-bell{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;border-radius:8px;cursor:pointer}.notification-bell:focus-visible{outline:2px solid #e6c46b;outline-offset:2px}.notification-count{position:absolute;top:0;right:0;min-width:18px;padding:1px 4px;border-radius:12px;background:#e6c46b;color:#10182d;font-size:11px;font-weight:700}.notification-list{position:absolute;right:0;top:48px;width:min(360px,calc(100vw - 32px));max-height:65vh;overflow:auto;z-index:1000;background:var(--bg);color:var(--ink);border:1px solid #52678e;border-radius:14px;padding:16px;box-shadow:0 12px 35px #0005}.notification-list h2{font-size:1.1rem;margin:0 0 12px}.notification-item{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;border:0;border-bottom:1px solid #52678e55;background:transparent;color:inherit;padding:14px 8px;cursor:pointer;overflow-wrap:anywhere}.notification-item.unread{border-left:3px solid #e6c46b}.notification-item small{opacity:.65}.notification-list [data-notification-all]{background:transparent;color:inherit;border:1px solid #52678e;border-radius:8px;padding:8px;min-height:44px;cursor:pointer}.notification-list[hidden],.notification-count[hidden]{display:none}

@media(max-width:1200px){.sidebar>.tk-notifications{margin-left:auto;margin-right:8px}.sidebar .brand{min-width:0;flex-shrink:1}.notification-list{position:fixed;right:16px;top:150px}}
@media(max-width:420px){.sidebar .brand{font-size:.9rem}.sidebar .brand-logo{width:30px;height:30px}.sidebar>.tk-notifications{margin-right:2px}}

.german-dialog-writing{min-width:0}.german-dialog-writing .dialog-writing-turn{margin:0 0 24px}.german-dialog-writing .writing-answer{box-sizing:border-box;width:100%;max-width:100%;resize:vertical;margin-top:8px}.german-dialog-writing [data-dialog-save-error]:empty{display:none}

.learning-progress .progress-section>summary{cursor:pointer;display:grid;grid-template-columns:minmax(110px,1fr) minmax(100px,2fr);align-items:center;gap:16px;min-height:44px}.learning-progress-value{display:flex;align-items:center;gap:12px;min-width:0}.learning-progress-value>span{font-variant-numeric:tabular-nums;min-width:40px;text-align:right}.learning-progress-value progress{display:block;flex:1;width:100%;min-width:0;height:10px;accent-color:var(--yellow);border:0;border-radius:8px;overflow:hidden;background:var(--line)}.learning-progress-value progress::-webkit-progress-bar{background:var(--line);border-radius:8px}.learning-progress-value progress::-webkit-progress-value{background:#c99c36;border-radius:8px}.learning-progress-value progress::-moz-progress-bar{background:#c99c36;border-radius:8px}.learning-progress .progress-unit{padding:20px 0;border-bottom:1px solid var(--line)}.learning-progress .progress-unit h3{margin-bottom:10px}.learning-progress .progress-unit details{margin-top:12px}.learning-progress .progress-activity{padding:14px 0;overflow-wrap:anywhere}.learning-progress .progress-activity>a{display:block;margin-bottom:8px}.learning-progress .progress-section-content{padding-top:12px}.learning-progress .progress-section-content>.btn{margin-top:16px}@media(max-width:480px){.learning-progress .progress-section>summary{grid-template-columns:1fr;gap:8px}.learning-progress .progress-section{padding:16px}}

/* Unit quiz additions reuse the existing panel and universal MCQ palette. */
.unit-quiz-catalog .topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;align-items:stretch}
.unit-quiz-card{display:flex;flex-direction:column;min-width:0;margin:0}
.unit-quiz-card h2{min-height:3em;overflow-wrap:anywhere}
.unit-quiz-card .q-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.unit-quiz-card .unit-title-link{color:inherit;text-align:left}
.unit-quiz-card button.unit-title-link{background:none;border:0;min-height:44px;cursor:pointer;font:inherit}
#main .unit-quiz-page fieldset{min-width:0;margin:20px 0;padding:16px}
#main .unit-quiz-page .mcq-options{display:grid;grid-template-columns:1fr;gap:12px}
#main .unit-quiz-page progress{width:100%;accent-color:#E6C46B}
#main .unit-quiz-page .q-actions{display:flex;flex-wrap:wrap;gap:10px}
.quiz-language-progress details{padding:12px 0;min-width:0}
.quiz-language-progress summary{cursor:pointer;min-height:44px}
@media(max-width:480px){#main .unit-quiz-page fieldset{padding:10px}.unit-quiz-page .q-actions .btn{flex:1 1 42%;min-height:44px}.unit-quiz-card h2{min-height:0}}
#main .unit-quiz-page fieldset.mcq-options{display:block}
#main .unit-quiz-page legend{max-width:100%;overflow-wrap:anywhere}

/* Keep the notification bell and menu together on every viewport. */
.sidebar>.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.header-actions>.tk-notifications{margin:0;flex:0 0 auto}
.header-actions>#mobile-menu-toggle{margin:0;flex:0 0 auto}
@media(max-width:420px){.sidebar>.header-actions{gap:2px}}

/* Quiz cards share grid spacing; ignore the generic stacked-panel margin. */
.unit-quiz-catalog .topic-grid{grid-auto-rows:1fr;align-items:stretch}
.unit-quiz-catalog .topic-grid>.unit-quiz-card{margin:0;align-self:stretch;box-sizing:border-box}
.unit-quiz-catalog .topic-grid>.unit-quiz-card>h2{margin:0 0 16px;min-height:2.8em;line-height:1.4}
.unit-quiz-catalog .unit-quiz-card>.q-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:auto}
.unit-quiz-catalog .unit-quiz-card>.q-actions>.btn{width:100%;margin:0;box-sizing:border-box}
@media(max-width:520px){.unit-quiz-catalog .topic-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.unit-quiz-catalog .topic-grid>.unit-quiz-card>h2{min-height:0}}

/* Personal trainer: one question at a time, with a persistent account-bound session. */
#assistant-panel{width:min(540px,calc(100vw - 24px))}#assistant-messages{max-height:min(48dvh,440px);overflow:auto}.trainer-prompt{white-space:pre-wrap;line-height:1.6}.trainer-question{padding:12px;border:1px solid var(--line);border-radius:12px}.trainer-question h3{font-size:1rem}.trainer-question li{margin-bottom:10px;line-height:1.5}.trainer-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.trainer-review p{white-space:pre-wrap}.trainer-review{margin:8px 0}#assistant-form[hidden],#trainer-finish[hidden]{display:none}