:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#273c32;background:#eef1e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:280px;background:radial-gradient(ellipse at 80% 15%,#dde8d855,transparent 45%),radial-gradient(ellipse at 8% 0,#fffaf2aa,transparent 40%)}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #8ba57d;outline-offset:4px}button{border:0}.site-header{max-width:1160px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:29px 28px}.brand{display:flex;align-items:center;gap:10px;font-size:29px;letter-spacing:-1.5px;font-weight:650}.brand>span{width:38px;height:38px;background:#426951;color:#fff;border-radius:13px;display:grid;place-items:center;padding-right:3px}.header-right{display:flex;align-items:center;gap:20px}.language-badge{font-size:10px;color:#88997b;letter-spacing:.1px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:41px;padding:11px 17px;border-radius:15px;border:1px solid #fff;background:linear-gradient(135deg,#fff,#ffffff70);box-shadow:0 5px 16px #3a58350a,inset 0 1px #fff;font-size:11px;white-space:nowrap}.btn:hover{filter:brightness(1.02)}.btn.primary{background:linear-gradient(135deg,#5a7b58,#3d624d);border-color:#4c6d4d;color:white;box-shadow:inset 0 1px #bcd1aa55,0 5px 14px #3353321c}.btn:active:not(:disabled){transform:translateY(1px)}main{max-width:1160px;margin:auto;padding:0 28px 55px}.page-title{text-align:center;padding:37px 0 38px}.kicker{font-size:9px;letter-spacing:1.7px;color:#91a080}.page-title>.kicker{color:#849871;margin-bottom:15px;font-weight:600}.page-title h1{font-size:clamp(32px,4vw,47px);font-weight:450;letter-spacing:-1.8px;line-height:1.15;margin:0 0 15px}.subtitle{font-size:13px;color:#8c9b80;margin:0;line-height:1.8}.panel{border:1px solid #fff;border-radius:25px;background:linear-gradient(125deg,#ffffffbd,#ffffff60);box-shadow:inset 0 1px #fff,0 12px 40px #314d2b05}.tag{display:inline-block;font-size:9px;letter-spacing:.4px;color:#69815a;background:#e3eadc;padding:6px 9px;border-radius:7px}h2{font-size:22px;letter-spacing:-.6px;font-weight:500;margin:0 0 10px}h3{font-size:15px;font-weight:550;margin:0 0 10px}p{line-height:1.7}.actions{display:flex;gap:8px;flex-wrap:wrap}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #dfe5d5;max-width:1104px;padding:25px 0 31px;margin:0 auto;font-size:10px;color:#9eac90}.site-footer .brand{font-size:21px;color:#6f8660}.site-footer small{font-size:9px}.toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);padding:14px 22px;max-width:calc(100% - 40px);color:#fff;background:#3d5c48;border-radius:15px;box-shadow:0 8px 30px #314d2b22;font-size:12px;opacity:0;pointer-events:none;z-index:10;transition:opacity .2s}.toast.visible{opacity:1}.courseAudio{display:none}@media(max-width:800px){.site-header{padding:23px}.header-right{gap:12px}.language-badge{font-size:9px}main{padding:0 23px 40px}.site-footer{margin:0 23px}.page-title{padding-top:31px;padding-bottom:30px}}@media(max-width:500px){.site-header{padding:20px 18px}.brand{font-size:26px}.brand>span{width:34px;height:34px}.language-badge{max-width:98px;text-align:right;line-height:1.6;font-size:8px}.header-right{gap:10px}#showPath{font-size:10px;min-height:39px;padding:10px 12px}main{padding:0 16px 35px}.page-title{text-align:left;padding:25px 5px 30px}.page-title h1{font-size:36px;letter-spacing:-1.5px}.page-title>.kicker{font-size:8px;letter-spacing:1.1px}.subtitle{font-size:12px}.site-footer{margin:0 20px;align-items:flex-start}.site-footer>small:last-child{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:500px){.header-right .language-badge{display:none}}

.learning-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;align-items:start}.curriculum{padding:20px 0 12px;overflow:hidden}.curriculum-heading{padding:3px 20px 20px}.curriculum-heading .kicker{font-size:7px;letter-spacing:1px;display:block;line-height:1.8}.curriculum-heading h2{font-size:20px;margin:8px 0}.curriculum-sub{font-size:9px;color:#91a083}.tree-scroll{max-height:690px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c9d7bd transparent;overscroll-behavior:contain}.ger-level{border-top:1px solid #e1e7d9}.ger-level>summary{display:flex;gap:12px;align-items:center;cursor:pointer;padding:17px 18px;list-style:none}.ger-level summary::-webkit-details-marker,.ger-module summary::-webkit-details-marker{display:none}.level-code{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#e4ecdc;font-size:12px;color:#6d865c;flex-shrink:0}.ger-level>summary strong{display:block;font-size:11px;font-weight:550}.ger-level>summary small{display:block;font-size:9px;color:#98a68a;margin-top:5px}.tree-chevron{margin-left:auto;color:#9bac8a;font-size:17px;transition:transform .2s}.ger-level[open]>summary .tree-chevron{transform:rotate(180deg)}.can-do{font-size:9px;color:#8c9c7b;line-height:1.8;margin:0 18px 17px 66px}.ger-module{margin:0 9px 4px 18px;border-left:1px solid #d6e0cb}.ger-module>summary{padding:10px 11px 10px 15px;display:flex;justify-content:space-between;font-size:9px;color:#7f936c;cursor:pointer;list-style:none}.ger-module>summary>span{font-size:8px;color:#a3b195}.tree-lesson{display:flex;align-items:center;gap:9px;width:calc(100% - 8px);margin:3px 4px;padding:11px 8px;border:1px solid transparent;background:transparent;border-radius:10px;text-align:left;color:#889b75;font-size:10px;line-height:1.5}.tree-lesson.selected{background:linear-gradient(125deg,#fff,#f9fbf3);border-color:#fff;box-shadow:0 3px 10px #36522709;color:#3f6349}.tree-lesson:hover{background:#fff8}.tree-lesson small{display:block;font-size:8px;color:#a1af93;margin-top:4px}.tree-index{font-size:8px;align-self:flex-start;margin-top:2px;color:#a3b294}.tree-state{margin-left:auto;font-size:13px;color:#8ca573}.ger-source{display:block;padding:16px 18px 4px;font-size:8px;color:#a0ad92;line-height:1.7}.learning-main{min-width:0}.listening-dashboard{padding:26px 30px 16px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#e4edda55,transparent 65%),linear-gradient(135deg,#ffffffd9,#ffffff69)}.listening-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.session-length{font-size:8px;letter-spacing:1px;color:#98a58b}.listening-dashboard h2{font-size:28px;letter-spacing:-1px;font-weight:500;margin:27px 0 9px}.listening-sub{font-size:11px;color:#95a287;margin:0}.hourglass-stage{padding:12px 0 15px;position:relative}.sandglass{height:230px;max-width:100%;display:block;margin:auto;filter:drop-shadow(0 9px 18px #66814a09)}.sand-stream{opacity:0}.is-playing .sand-stream{opacity:.75;animation:sandFall .65s linear infinite}.session-counter{margin-top:5px}.session-counter>span{font-variant-numeric:tabular-nums;font-size:43px;letter-spacing:-1.6px;font-weight:350;color:#436548}.session-counter>small{display:block;font-size:7px;letter-spacing:1.9px;color:#9ba98d;margin-top:8px}.listening-status{font-size:10px;color:#8c9d7c;min-height:18px;margin:10px 0 20px}.listening-progress input{width:100%;height:5px;accent-color:#769462;margin:0;cursor:pointer}.listening-progress>div{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:9px;color:#9da992;margin-top:10px}.listening-controls{display:flex;align-items:center;justify-content:center;gap:22px;padding:24px 0}.listen-play.btn{min-width:185px;min-height:51px;border-radius:20px;font-size:12px;gap:11px}.listen-small{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffff8c;border:1px solid #fff;border-radius:50%;width:43px;height:43px;box-shadow:inset 0 1px #fff,0 4px 10px #34532d08;font-size:22px;line-height:17px;color:#8b9e7a}.listen-small small{font-size:7px;line-height:9px}.listening-bottom{border-top:1px solid #e0e8d6;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 0 0}.listening-bottom label{display:flex;gap:7px;align-items:center;color:#8b9c7b;font-size:9px}.listening-bottom input{width:13px;height:13px;padding:0;accent-color:#70905a}.text-link{background:none;padding:5px 0;font-size:9px;color:#95a487}.learning-foot{display:flex;align-items:flex-start;justify-content:center;gap:7px;font-size:9px;color:#a0ad92;padding:17px 8px;line-height:1.7}.storage-dot{width:5px;height:5px;border-radius:50%;background:#9baf84;flex-shrink:0;margin-top:6px}.lesson-companion{margin-top:7px;padding:22px;display:flex;flex-direction:column;gap:12px}.lesson-companion h3{font-size:15px;margin:9px 0}.lesson-companion p{font-size:11px;color:#92a082;margin:0}.lesson-companion .btn{font-size:10px;padding:10px 13px}.learning-disclaimer{font-size:9px;color:#a7b199;line-height:1.8;margin:20px 7px 0}#courseAudio{display:none}.small-meta{font-size:10px;color:#8e9b80}@keyframes sandFall{to{stroke-dashoffset:-6}}
@media(max-width:1200px){.learning-layout{grid-template-columns:245px minmax(0,1fr);gap:16px}.listening-dashboard{padding:23px 22px 16px}.session-length{font-size:7px;letter-spacing:.5px}.curriculum-heading{padding-left:17px;padding-right:17px}.listening-dashboard h2{font-size:25px}.can-do{margin-left:18px}.ger-level>summary{padding:15px}.ger-module{margin-left:12px}.listening-bottom label{font-size:8px}.listening-controls{gap:13px}.listen-play.btn{min-width:165px}}@media(max-width:700px){.learning-layout{grid-template-columns:1fr}.learning-main{grid-row:1}.curriculum{grid-row:2}.tree-scroll{max-height:500px}.listening-dashboard h2{font-size:27px}.hourglass-stage{padding-top:15px}.sandglass{height:220px}.learning-disclaimer{margin-bottom:10px}.ger-level>summary{padding:15px 20px}.can-do{margin-left:69px}.ger-module{margin-left:32px}.tree-lesson{padding:12px}.session-length{font-size:8px}.listen-play.btn{min-width:180px}.listening-bottom label{font-size:9px}}@media(max-width:400px){.session-length{font-size:7px}.listening-dashboard{padding:22px 18px 14px}.listening-dashboard h2{font-size:24px}.listen-play.btn{min-width:160px}.listening-controls{gap:14px}.listening-bottom{gap:5px}.listening-bottom label{font-size:8px}.session-counter>small{letter-spacing:1.3px}}
/* Refined curriculum icons and glass navigation */
.tree-icon{display:block;width:20px;height:20px;flex-shrink:0}.curriculum-heading h2{display:flex;align-items:center;gap:9px}.curriculum-heading h2>.tree-icon{width:21px;height:21px;color:#829a6c}.ger-level>summary{gap:11px}.level-code{border:1px solid #ffffffc9;background:linear-gradient(140deg,#edf3e5,#dfe9d6);box-shadow:inset 0 1px #fff,0 3px 8px #4f6b3707;font-weight:600;color:#688450}.level-description{min-width:0;flex:1}.tree-chevron{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff8;border:1px solid #fff9;flex-shrink:0;transition:transform .2s,background .2s}.tree-chevron .tree-icon{width:11px;height:11px}.ger-level[open]>summary .tree-chevron{transform:rotate(90deg);background:#e7efdf}.ger-module{border-left:0;margin:0 9px 6px 12px}.ger-module>summary{gap:8px;justify-content:initial;padding:10px 7px 10px 5px;min-height:58px;border-radius:12px;transition:background .2s}.ger-module>summary:hover{background:#fff7}.ger-module>summary>.module-icon{display:grid;place-items:center;width:31px;height:31px;flex-shrink:0;border-radius:10px;border:1px solid #fff;background:linear-gradient(145deg,#ffffffd9,#eaf0e27d);box-shadow:0 3px 9px #4b683209,inset 0 1px #fff;color:#7b9467}.module-icon .tree-icon{width:17px;height:17px}.ger-module[open]>summary>.module-icon{background:linear-gradient(145deg,#edf4e5,#dfead6);color:#62804f}.ger-module>summary>.module-label{flex:1;min-width:0;font-size:10px;line-height:1.5;color:#6e855c;font-weight:500}.module-label>small{display:block;font-size:6px;letter-spacing:1.1px;color:#a4b294;margin-bottom:3px;font-weight:500}.ger-module>summary>.module-count{display:grid;place-items:center;width:18px;height:18px;flex-shrink:0;border-radius:6px;background:#e6eddd99;font-size:8px;color:#96a982}.ger-module>summary>.module-chevron{color:#9bae89;transition:transform .2s}.module-chevron .tree-icon{width:10px;height:10px}.ger-module[open]>summary>.module-chevron{transform:rotate(90deg)}.tree-lesson{gap:9px;padding:12px 9px;margin:3px 0 3px 7px;width:calc(100% - 7px);border-radius:13px;position:relative;transition:background .18s,box-shadow .18s,border-color .18s}.tree-lesson.selected{background:linear-gradient(125deg,#fff,#f8fbf4);box-shadow:0 5px 15px #4b683210,inset 0 1px #fff;border-color:#fff}.tree-index{width:25px;height:29px;display:grid;place-items:center;align-self:center;margin:0;flex-shrink:0;font-size:8px;border-radius:9px;color:#9caf8a;background:#e8eee13d}.tree-index .tree-icon{width:15px;height:15px}.is-ready .tree-index{background:linear-gradient(140deg,#e5eedc,#d6e4c9);border:1px solid #e0ebd4;color:#75925d}.is-complete .tree-index{background:#e2edd8;color:#698954}.tree-lesson-copy{min-width:0;flex:1}.tree-lesson-name{display:block;font-size:10px;line-height:1.55}.tree-lesson small{font-size:7px;line-height:1.6;margin-top:4px;color:#a0af90}.is-ready .tree-lesson-name{font-weight:500}.is-ready small{color:#88a171}.tree-state{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;margin-left:0;color:#b3c1a5}.tree-state .tree-icon{width:11px;height:11px;stroke-width:1.4}.is-ready .tree-state{background:#ebf2e3;border:1px solid #e0ead5;border-radius:50%;color:#72905a}.is-ready .tree-state .tree-icon{width:10px;height:10px;fill:#8ca575;stroke-width:1}.is-complete .tree-state{color:#7c9863}.ger-module[open]{padding-bottom:7px}.ger-source{color:#98a88a}@media(max-width:700px){.ger-module{margin-left:20px;margin-right:15px}.ger-module>summary{padding:11px 8px;gap:11px}.ger-module>summary>.module-icon{width:34px;height:34px}.ger-module>summary>.module-label{font-size:11px}.module-label>small{font-size:7px}.tree-lesson{padding:13px 12px;gap:11px}.tree-index{width:29px;height:32px}.tree-lesson-name{font-size:11px}.tree-lesson small{font-size:8px}.tree-state{width:25px;height:25px}}
/* Optional synchronized transcript */
.playback-options{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.subtitle-panel{margin:0 0 21px;padding:16px 19px;border:1px solid #fff;border-radius:17px;background:linear-gradient(135deg,#fff9,#edf4e380);box-shadow:inset 0 1px #fff;text-align:center;transition:background .2s}.subtitle-panel[hidden]{display:none}.subtitle-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:7px;letter-spacing:1px;color:#9aaa8c}.subtitle-meta>span:last-child{font-size:8px;letter-spacing:.1px;color:#91a580}.subtitle-panel p{margin:12px 0 1px;font-size:15px;line-height:1.8;letter-spacing:.05px;color:#4c6941;max-height:145px;overflow:auto;scrollbar-width:thin;scrollbar-color:#c9d8ba transparent;text-wrap:pretty}.subtitle-panel p[lang="pt-BR"]{color:#476c4c;font-weight:500}.subtitle-panel.is-speaking-pause{background:linear-gradient(135deg,#f4f8edb0,#e8f0df90)}@media(max-width:1100px){.playback-options{gap:9px 14px}.listening-bottom{align-items:flex-start}.listening-bottom>.text-link{flex-shrink:0}}@media(max-width:500px){.playback-options{gap:12px}.subtitle-panel{padding:15px}.subtitle-panel p{font-size:14px}.subtitle-meta{font-size:6px}.subtitle-meta>span:last-child{font-size:7px}.listening-bottom{gap:8px}.playback-options label{font-size:8px}.listening-bottom>.text-link{padding-top:0}}
/* Vocabulary progress per GER level */
.ger-level>summary .level-stats{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 5px;line-height:1.65;font-size:8px;margin-top:5px;color:#91a181}.vocabulary-separator{color:#b3c0a5}.vocabulary-count{white-space:nowrap;color:#8e9f7b}.vocabulary-count b{font-weight:550;color:#708a5c}.vocabulary-note{font-size:8px;line-height:1.8;color:#a0ae91;margin:14px 18px 0}.curriculum .ger-source{padding-top:10px}@media(max-width:700px){.ger-level>summary .level-stats{font-size:9px;gap:3px 6px}.vocabulary-note{font-size:9px;margin-left:21px;margin-right:21px}}
/* Clear open branches and level/module hierarchy. */
.tree-hint{display:block;margin-top:10px;font-size:10px;line-height:1.6;color:#6d8064}
.tree-scroll{padding:0 9px;scroll-padding-block:12px}
.ger-level{border:1px solid transparent;border-top-color:#dde5d6;border-radius:14px;margin:3px 0;transition:background .18s,border-color .18s}
.ger-level>summary{padding:15px 11px;border-radius:13px;min-height:74px}
.ger-level>summary strong{color:#43573d}
.ger-level[open]{background:#edf2e8;border-color:#c4d2b8;box-shadow:inset 3px 0 #78946a;margin-block:7px;padding-bottom:7px}
.ger-level[open]>summary{background:#e3ecd9}
.ger-level[open]>summary .level-code{background:#4f7048;border-color:#4f7048;color:#fff;box-shadow:inset 0 1px #ffffff26}
.ger-level[open]>summary .level-description>strong::after{content:'GEÖFFNET';display:block;color:#5c764e;font-size:7px;font-weight:600;letter-spacing:1px;margin-top:5px}
.tree-chevron{width:27px;height:27px;color:#526e46;background:#fff;border-color:#d8e2cf;box-shadow:0 2px 5px #3c58320a}
.tree-chevron .tree-icon{width:13px;height:13px;stroke-width:2}
.ger-level[open]>summary .tree-chevron{background:#55764b;color:#fff;border-color:#55764b}
.can-do{margin:12px 14px 15px 18px;color:#6c805f;font-size:10px}
.ger-module{margin:5px 8px 5px 13px;border:1px solid transparent;border-radius:12px;background:#ffffff60}
.ger-module>summary{padding:10px 8px;gap:8px;border-radius:11px;min-height:61px}
.ger-module>summary>.module-label{color:#536e46}
.module-label>small{font-size:7px;color:#849677}
.ger-module>summary>.module-count{color:#6e855f;background:#e7eedf}
.ger-module>summary>.module-chevron{display:grid;place-items:center;width:24px;height:24px;border:1px solid #d8e2ce;border-radius:8px;background:#fff;color:#5a754d;flex-shrink:0}
.module-chevron .tree-icon{width:12px;height:12px;stroke-width:2}
.ger-module[open]{background:#ffffffa8;border-color:#b9cbaa;box-shadow:0 3px 10px #3d5f2e09;padding-bottom:8px}
.ger-module[open]>summary{background:#e1ebd7;border-bottom:1px solid #cad9bd;border-radius:11px 11px 0 0}
.ger-module[open]>summary>.module-label{font-weight:650;color:#3d5e32}
.ger-module[open]>summary .module-label>small::after{content:' · OFFEN';color:#526f43;font-weight:650;letter-spacing:.7px}
.ger-module[open]>summary>.module-chevron{color:#fff;background:#668654;border-color:#668654}
.ger-module[open]>summary>.module-icon{background:#f4f8ed;color:#53733f}
.tree-lesson{margin:5px 7px 5px 12px;width:calc(100% - 19px);border-radius:10px;border-left:2px solid #d7e2cd;color:#6f815f;padding:11px 8px}
.tree-lesson:hover{background:#f0f5e9;border-color:#ccdabc}
.tree-lesson.selected{background:#f0f6e9;border:1px solid #c6d7b5;border-left:3px solid #557b42;box-shadow:0 2px 7px #3b5b2c09}
.tree-lesson.selected .tree-lesson-name{color:#34582b;font-weight:650}
.tree-lesson.selected .tree-index{background:#557b42;color:#fff;border-color:#557b42}
.tree-lesson small{color:#7d8f6f}
@media(max-width:700px){.tree-scroll{max-height:620px}.ger-level>summary{padding:15px 12px}.ger-module{margin-left:17px;margin-right:10px}.ger-module>summary{padding:11px 9px}.tree-lesson{padding:13px 10px}.tree-hint{font-size:11px}}
.ger-level[open]>summary{position:sticky;top:0;z-index:2;box-shadow:0 3px 8px #47633a0a}

/* Filled lesson clock */
.circle-stage{display:flex;justify-content:center;padding:28px 0 22px}.lesson-circle{width:258px;height:258px;border-radius:50%;position:relative;isolation:isolate;overflow:hidden;background:#fff;border:5px solid #fff;box-shadow:0 0 0 1px #c7e4df,0 16px 40px #075d8820,inset 0 2px 10px #156d8410}.circle-fill{position:absolute;inset:auto 0 0;height:var(--fill);background:linear-gradient(160deg,#40e69d,#08b96c);transition:height .5s linear;z-index:-1}.circle-content{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#064b38}.circle-caption{font-size:9px;letter-spacing:1.4px;font-weight:650}.circle-content strong{font-size:51px;letter-spacing:-2px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1}.circle-location{font-size:12px;font-weight:650;line-height:1.8}.speed-button{border:1px solid #b9dce9;border-radius:13px;padding:9px 12px;background:linear-gradient(145deg,#ffffffed,#dbf2ffb0);box-shadow:inset 0 1px 0 #fff,0 3px 9px #0b527c10;color:#08618e;font-size:11px;font-weight:650;cursor:pointer}.speed-button:hover{background:#e3f6ff}.playback-options{flex-wrap:wrap}.listening-top .tag{line-height:1.7}@media(max-width:400px){.lesson-circle{width:230px;height:230px}.listening-top{flex-wrap:wrap}.circle-content strong{font-size:45px}}

/* Segmented sand ring, transparent centre; begins at twelve o'clock. */
.lesson-circle{width:280px;height:280px;background:transparent;border:0;box-shadow:none;overflow:visible}.sand-ring{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 3px 5px #075d8818)}.circle-content{position:relative;margin:auto;width:218px;height:100%;gap:12px}.circle-caption{font-size:8px;letter-spacing:1.1px}.circle-content strong{font-size:47px}.circle-location{font-size:11px}#ringProgress{transition:stroke-dasharray .35s linear}@media(max-width:400px){.lesson-circle{width:250px;height:250px}.circle-content{width:196px}.circle-content strong{font-size:43px}.circle-caption{font-size:7px}}

/* Whole segments fill with clean green colour. */
#ringProgress{transition:none}

/* Continuous ring follows actual audio progress clockwise. */
#ringProgress{transition:stroke-dasharray .25s linear}

.curriculum-vocabulary{display:block;margin-top:8px;color:#24536f;font-size:10px;line-height:1.7;font-weight:500}.curriculum-vocabulary strong{color:#007b58;font-weight:700;font-variant-numeric:tabular-nums}

/* Meaning below the original and its pronunciation, inside the same transcript. */
.subtitle-panel .subtitle-translation{margin:10px auto 0;max-width:66ch;font-size:clamp(14px,1.2vw,17px);line-height:1.55;color:#25465b;font-weight:500;text-wrap:pretty;}
.subtitle-panel .subtitle-translation[hidden]{display:none;}
.playback-options{flex-wrap:wrap;justify-content:center;row-gap:10px;}

/* Keep the two subtitle controls side by side, below autoplay. */
.playback-options{display:grid;grid-template-columns:repeat(2,max-content);gap:10px 16px;justify-content:start;}
.playback-options>label:first-child{grid-column:1 / -1;}
@media(max-width:420px){.playback-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.playback-options label{white-space:normal;}}

/* Talkbacki: white glass, fresh Brazilian green and blue. */
:root{color:#203d52;background:#f6faff;--green:#009b68;--blue:#1766c4;--muted:#687f90;--border:#dce8ef;--paper:#ffffffd9}
body{background:radial-gradient(ellipse at 95% 5%,#d9ebff95,transparent 47%),radial-gradient(ellipse at 4% 38%,#dcf7ed70,transparent 42%),#f9fcff}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#2879d4}
.brand,.logo,.site-footer .brand{color:#164c74}.brand>span,.logo>span{background:linear-gradient(145deg,#13b77e,#009768);box-shadow:inset 0 1px 1px #ffffff8c,0 5px 12px #009b6820}
.language-badge,.subtitle,.tree-hint,.small-meta,.listening-sub,.listening-status,.lesson-companion p,.can-do,.ger-source,.curriculum .ger-source,.tree-lesson small,.is-ready small,.learning-foot,.learning-disclaimer,.vocabulary-note,.site-footer,.site-footer small{color:#6b8191}
.kicker,.page-title>.kicker,.curriculum-heading .kicker,.session-length,.eyebrow{color:#4b83ad}
.panel{background:linear-gradient(135deg,#fffffff5,#ffffffc4);border:1px solid #fff;box-shadow:inset 0 1px 1px #fff,0 12px 35px #2b5a8210,0 0 0 1px #dceaf066}
.btn,.listen-small,.mini,.connection-badge,.tree-chevron,.ger-module>summary>.module-chevron{background:linear-gradient(165deg,#ffffffed 0%,#ffffff70 48%,#e5f1fc65 100%);border:1px solid #ffffffee;color:#26618d;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #8cbbda25,0 4px 12px #22577b15,0 0 0 1px #bcd6e249;backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);transition:box-shadow .18s,background .18s,transform .18s}
.btn:hover,.listen-small:hover,.mini:hover{background:linear-gradient(165deg,#fff,#eaf5ffb8);box-shadow:inset 0 1px 2px #fff,0 6px 17px #22577b20,0 0 0 1px #b7d4e580}
.btn.primary{color:#1251a0;background:linear-gradient(165deg,#f5fbffed 0%,#c6e2fcbb 48%,#b3d7f2a8 100%);border-color:#ffffffee;box-shadow:inset 0 2px 2px #fff,inset 0 -2px 3px #4084c52b,0 7px 18px #2367ab20,0 0 0 1px #a5cbe67a;text-shadow:0 1px #ffffffa6}
.btn.primary:hover{background:linear-gradient(165deg,#fff,#c2e3ffcc);box-shadow:inset 0 2px 2px #fff,0 9px 21px #2367ab29,0 0 0 1px #8bbde3}
.btn:active:not(:disabled),.listen-small:active:not(:disabled){box-shadow:inset 0 2px 5px #5389ad25,0 1px 5px #22577b10}
.listen-play.btn{border-radius:22px}.listen-small{color:#3675a2}.text-link{color:#2670aa}.tag{background:#e8f3ff;color:#2566a2;border:1px solid #d4e8fb}
.listening-dashboard{background:radial-gradient(ellipse at 15% 35%,#ddf8ed66,transparent 57%),radial-gradient(ellipse at 90% 15%,#e1efff99,transparent 65%),linear-gradient(135deg,#fffffff5,#ffffffd9)}
.session-counter>span{color:#176e9d}.session-counter>small,.listening-progress>div{color:#7590a1}.listening-progress input{accent-color:#2677c9}.listening-bottom{border-color:#e0edf3}.listening-bottom label{color:#617e91}.listening-bottom input{accent-color:#00a16c}.storage-dot{background:#0cba80}.toast{background:#1766a0}
.subtitle-panel{background:linear-gradient(135deg,#ffffffc9,#e9f5ff80);border-color:#fff}.subtitle-panel.is-speaking-pause{background:linear-gradient(135deg,#fff,#e5f8ef80)}.subtitle-panel p{color:#235c89}.subtitle-panel p[lang="pt-BR"]{color:#00845c}.subtitle-meta,.subtitle-meta>span:last-child{color:#6c8aa1}
.tree-scroll{scrollbar-color:#bdd9e7 transparent}.curriculum-heading h2>.tree-icon{color:#2781b8}.ger-level{border-top-color:#e0eaf1}.ger-level>summary strong{color:#355a74}.ger-level>summary .level-stats,.vocabulary-count{color:#6c8594}.vocabulary-count b{color:#27748e}.vocabulary-separator{color:#a3bccb}
.level-code{color:#008b60;background:linear-gradient(145deg,#f3fff9,#daf5e9);border-color:#fff;box-shadow:inset 0 1px #fff,0 3px 9px #0698670b}
.ger-level[open]{background:#f3f9fd;border-color:#c2deef;box-shadow:inset 3px 0 #3888c5}
.ger-level[open]>summary{background:linear-gradient(120deg,#edf7ff,#f7fcff);box-shadow:0 3px 8px #3477a512}
.ger-level[open]>summary .level-code{background:linear-gradient(145deg,#19b97e,#009c68);border-color:#fff;color:#fff}
.ger-level[open]>summary .level-description>strong::after{color:#2773b2}
.tree-chevron{color:#397cac}.ger-level[open]>summary .tree-chevron{color:#1765a4;background:linear-gradient(160deg,#fff,#cce7fcaa);border-color:#fff}
.ger-module{background:#ffffffb3}.ger-module>summary:hover{background:#f0f8ff}.ger-module>summary>.module-label{color:#426881}.module-label>small{color:#7794a5}
.ger-module>summary>.module-icon{color:#139671;background:linear-gradient(145deg,#fff,#e9f9f2a3);border-color:#fff;box-shadow:inset 0 1px #fff,0 3px 9px #0e92620a}
.ger-module>summary>.module-count{color:#54819d;background:#edf5fa}.ger-module[open]{border-color:#b7dfd0;background:#fffffff0;box-shadow:0 4px 13px #158f6810}
.ger-module[open]>summary{background:linear-gradient(125deg,#e4f8ee,#f1fbf6);border-color:#cbe9da}.ger-module[open]>summary>.module-label{color:#167553}.ger-module[open]>summary .module-label>small::after{color:#00875b}.ger-module[open]>summary>.module-icon{background:linear-gradient(145deg,#fff,#d8f5e7);color:#009567}
.ger-module[open]>summary>.module-chevron{background:linear-gradient(160deg,#f8fffc,#bcebd6b3);color:#00865a;border-color:#fff}
.tree-lesson{color:#608195;border-left-color:#d6e6ee}.tree-lesson:hover{background:#f0f8ff;border-color:#d4e7f5}.tree-index{color:#7e9baa;background:#edf5f9}.is-ready .tree-index{color:#008b60;background:linear-gradient(145deg,#edfff6,#d6f3e5);border-color:#d9f2e6}.is-ready .tree-state{background:linear-gradient(145deg,#fff,#def4eacc);border-color:#e1f1e9;color:#009b68}.is-ready .tree-state .tree-icon{fill:#00a570}.tree-state{color:#a2b8c5}
.tree-lesson.selected{background:linear-gradient(115deg,#eaf5ff,#f6fbff);border-color:#bfdcf1;border-left-color:#237ac0}.tree-lesson.selected .tree-lesson-name{color:#1b649d}.tree-lesson.selected .tree-index{color:#fff;background:linear-gradient(145deg,#3997d7,#146bb0);border-color:#fff;box-shadow:inset 0 1px 1px #ffffff70}.is-complete .tree-index{color:#00855b;background:#ddf8eb}.is-complete .tree-state{color:#009c68}
.site-footer{border-color:#e0eaf1}.sidebar{background:#f3f9fbd9;border-color:#e1ecf2}.shell{background:radial-gradient(ellipse at 95% 0%,#e1efff99,transparent 55%)}header{border-color:#dfebf2}.nav{color:#668598}.nav.active{color:#1e6cac;background:linear-gradient(135deg,#fff,#e6f4ff99)}.nav:hover{background:#fff9}.connection-badge.connected{color:#009b68}.connection-badge.connected::before,.local-badge i{background:#0ab680}.header-sub,.workspace-label,.sidebar-bottom p,.local-badge,.stat>span,.stat small,.card-meta,.card-bottom,.voice-summary,footer{color:#7891a1}input,select,textarea{border-color:#d6e5ef;background:#ffffffbf}.lesson-card p{color:#6c8495}
/* Stronger chroma and readable controls, retaining a white glass surface. */
.brand>span,.logo>span{background:linear-gradient(145deg,#05c47c,#009650)}
.btn.primary{color:#fff;background:linear-gradient(165deg,#72baff 0%,#2785e7 40%,#1262bf 100%);border-color:#e9f6ff;box-shadow:inset 0 2px 2px #ffffffb3,inset 0 -2px 3px #074b9d55,0 7px 18px #1266c135,0 0 0 1px #1c73c54d;text-shadow:0 1px 1px #094e9d55}
.btn.primary:hover{color:#fff;background:linear-gradient(165deg,#8ac9ff,#328ff1 42%,#0b58b1);box-shadow:inset 0 2px 2px #ffffffc7,0 9px 22px #1266c144,0 0 0 1px #1c73c566}
.playback-icon{display:block;flex-shrink:0;width:20px;height:20px}.listen-play.btn{gap:10px;font-weight:600}
.listen-small{color:#155d9d;border-color:#fff;background:linear-gradient(160deg,#fff,#d7edffb3);box-shadow:inset 0 1px #fff,0 4px 12px #1c6ca424,0 0 0 1px #a9d0eb80}
.tag{background:#d7ecff;color:#105a9e;border-color:#b3d6f4}.session-counter>span{color:#0869ad}
.kicker,.page-title>.kicker,.curriculum-heading .kicker,.session-length,.eyebrow{color:#3575a6}
.language-badge,.subtitle,.tree-hint,.listening-sub,.listening-status,.lesson-companion p,.can-do{color:#526f83}
.ger-level[open]{border-color:#96c6e8;box-shadow:inset 3px 0 #1678cc}.ger-level[open]>summary{background:linear-gradient(120deg,#dcefff,#f0f8ff)}
.ger-level[open]>summary .level-code{background:linear-gradient(145deg,#0cbd78,#009650)}
.ger-module[open]{border-color:#8bceb0}.ger-module[open]>summary{background:linear-gradient(125deg,#cef3df,#e6faee);border-color:#abdcc1}.ger-module[open]>summary>.module-label{color:#086b41}
.ger-module[open]>summary>.module-chevron{color:#006a3f;background:linear-gradient(160deg,#f0fff5,#8edcb8c9)}
.tree-lesson.selected{background:linear-gradient(115deg,#d6ecff,#edf7ff);border-color:#8abde6;border-left-color:#126fc0}.tree-lesson.selected .tree-lesson-name{color:#125893}.tree-lesson.selected .tree-index{background:linear-gradient(145deg,#248de2,#075da9)}
.is-ready .tree-index{color:#007044;background:linear-gradient(145deg,#d9ffe9,#b8edd1);border-color:#b9e7cd}.is-ready .tree-state{background:#d5f5e5;border-color:#b6e6cc}.is-ready .tree-state .tree-icon{fill:#009b58}
.subtitle-panel p{color:#1d5683}.subtitle-panel p[lang="pt-BR"]{color:#007f4d}.listening-bottom label{color:#4e708a}
@media(prefers-reduced-transparency:reduce){.btn,.listen-small,.mini,.connection-badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:#f2f9ff}.btn.primary{background:#176bc3}}

.curriculum-sub{display:block;color:#245d79;font-size:10px;font-weight:500;line-height:1.8}.curriculum-total{display:block;width:fit-content;margin-top:9px;padding:5px 10px;border-radius:10px;background:#e3f7ed;border:1px solid #b7e7cf;color:#087443;font-size:11px;font-weight:650}

/* Distinct player surface against the pale page background. */
.panel.listening-dashboard{background:linear-gradient(145deg,#d7edff 0%,#e4f2ff 55%,#d1e8fb 100%);border:1px solid #a8cfe9;box-shadow:inset 0 1px 0 #ffffffed,0 16px 42px #15567b18}.listening-dashboard .listening-sub,.listening-dashboard .listening-status{color:#285777}.listening-dashboard .session-length{color:#326887}.listening-dashboard .subtitle-panel{background:#ffffffb8;border-color:#ffffff}.listening-dashboard .listening-bottom{border-top-color:#a8cce4}

/* Clear glass player with edge highlights and depth. */
.panel.listening-dashboard{background:linear-gradient(135deg,rgba(255,255,255,.64) 0%,rgba(255,255,255,.16) 46%,rgba(218,239,252,.22) 100%);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);border:1px solid rgba(255,255,255,.92);box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffb3,inset 0 -1px 0 #b2d5e44d,0 18px 45px #20546d20,0 2px 5px #20546d0c}.listening-dashboard::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(120deg,#ffffff45,transparent 36%,transparent 72%,#ffffff24);z-index:0}.listening-dashboard>*{position:relative}.listening-dashboard .subtitle-panel{background:rgba(255,255,255,.34);border:1px solid #ffffffb3;box-shadow:inset 0 1px 0 #ffffffa6}.listening-dashboard .listening-bottom{border-top-color:#c0d9e48c}

/* Pearl glass lens inspired by the reference, preserving the player layout. */
.lesson-circle::before{content:"";position:absolute;inset:14%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 29% 22%,#ffffffd9 0%,#ffffff48 17%,transparent 43%),radial-gradient(ellipse at 76% 78%,#8cc9f54d,transparent 61%),linear-gradient(140deg,#dbeeff5c,#bec5f238 52%,#b8e7f347);border:1px solid #ffffffcf;box-shadow:inset 3px 4px 14px #ffffffb3,inset -5px -7px 20px #7398d136,0 5px 18px #447da51c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.lesson-circle::after{content:"";position:absolute;inset:16% 23% 61% 23%;border-radius:50%;pointer-events:none;background:linear-gradient(180deg,#ffffff9c,#ffffff00);transform:rotate(-20deg)}.lesson-circle .circle-content{z-index:1}.sand-ring{filter:drop-shadow(0 3px 5px #4267a326) drop-shadow(0 0 2px #fff)}.panel.listening-dashboard{background:radial-gradient(ellipse at 94% 4%,#b7bcf02b,transparent 48%),radial-gradient(ellipse at 4% 92%,#9bdbf124,transparent 50%),linear-gradient(135deg,#ffffff91,#ffffff24 48%,#cbdaf336);border-color:#fffffff0;box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffb3,inset 0 -1px 0 #b9bde54d,0 18px 45px #384c7b24,0 2px 5px #20546d0c}

/* Sharper crystal contrast and a true seven-segment clock. */
.lesson-circle::before{background:radial-gradient(ellipse at 28% 18%,#fffffff2, #ffffff57 23%,transparent 48%),radial-gradient(ellipse at 76% 80%,#649edb78,transparent 65%),linear-gradient(145deg,#c2d8f5aa,#aebce57d 52%,#8fc6e0b3);border:1px solid #ffffff;box-shadow:inset 3px 4px 12px #ffffffdc,inset -6px -9px 20px #426ba752,0 0 0 1px #7da5cf6b,0 8px 22px #305c8d30}.sand-ring{filter:drop-shadow(0 3px 4px #375f9442) drop-shadow(0 0 1px #6388b56b)}.circle-content strong{line-height:1;letter-spacing:0}

.circle-content strong{line-height:1.1;letter-spacing:-2px;font-variant-numeric:tabular-nums}

/* Soft frosted glass playback tile. */
.panel.listening-dashboard{background:linear-gradient(135deg,rgba(255,255,255,.83),rgba(250,253,255,.65) 55%,rgba(235,245,252,.73));backdrop-filter:blur(34px) saturate(110%);-webkit-backdrop-filter:blur(34px) saturate(110%);border:1px solid rgba(255,255,255,.96);box-shadow:inset 0 2px 2px #ffffffed,inset 0 -1px 3px #bfd4e52e,0 18px 45px #3458751c,0 2px 8px #4460790b}.listening-dashboard::before{background:linear-gradient(125deg,#ffffff52,transparent 46%,#ffffff1f)}

/* Keep the lens reflection strictly inside the inner sphere. */
.lesson-circle::after{inset:14%;border-radius:50%;transform:none;background:radial-gradient(ellipse 62% 28% at 38% 12%,rgba(255,255,255,.72),rgba(255,255,255,.12) 65%,transparent 100%);clip-path:circle(49% at 50% 50%);pointer-events:none}

/* Give both glass surfaces a visible backdrop to refract. */
body:has(.learning-layout){background:radial-gradient(ellipse 440px 360px at 13% 56%,#56d3ad55,transparent 76%),radial-gradient(ellipse 580px 440px at 78% 32%,#79a7ed60,transparent 76%),radial-gradient(ellipse 440px 360px at 87% 86%,#b7b1ef42,transparent 74%),#edf5fb;background-attachment:fixed}.panel.curriculum,.panel.listening-dashboard,.panel.lesson-companion{background:linear-gradient(135deg,#ffffff70,#ffffff30 55%,#e7f3ff38);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border:1px solid #ffffffdf;box-shadow:inset 0 1px 1px #fff,inset 1px 0 0 #ffffff8c,inset 0 -1px 1px #93b4cc38,0 18px 45px #214b7324,0 0 0 1px #bbd4e330}.listening-dashboard::before{background:linear-gradient(115deg,#ffffff24,transparent 34%,transparent 76%,#ffffff16)}.curriculum .ger-level[open]>summary{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* Lift the glass cards off the background with layered exterior shadows. */
.panel.curriculum,.panel.listening-dashboard,.panel.lesson-companion{box-shadow:inset 0 1px 1px #ffffff,inset 1px 0 0 #ffffff8c,inset 0 -1px 1px #93b4cc38,0 3px 6px #173e5714,0 12px 22px -5px #173e5733,0 30px 52px -12px #173e573b,0 0 0 1px #bbd4e330}

/* Angular blue landscape behind the glass, growing darker toward the bottom. */
body:has(.learning-layout){position:relative;isolation:isolate;background:linear-gradient(180deg,#eef7ff 0%,#d8eafb 26%,#92b9de 62%,#356b9b 100%);background-attachment:scroll}body:has(.learning-layout)::before,body:has(.learning-layout)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}body:has(.learning-layout)::before{background:linear-gradient(160deg,#a7cce990,#5186b2c9 65%,#234f7b);clip-path:polygon(0 37%,8% 32%,17% 40%,27% 30%,39% 42%,49% 34%,61% 44%,73% 29%,84% 38%,94% 31%,100% 36%,100% 100%,0 100%)}body:has(.learning-layout)::after{background:linear-gradient(165deg,#79a6cc99,#386e9dc9 60%,#183e66);clip-path:polygon(0 65%,11% 56%,21% 63%,34% 52%,46% 66%,59% 57%,72% 67%,86% 54%,100% 63%,100% 100%,0 100%)}body:has(.learning-layout) .site-footer{border-top-color:#ffffff40;color:#e1eef9}body:has(.learning-layout) .site-footer a,body:has(.learning-layout) .site-footer small{color:#e1eef9}body:has(.learning-layout) .learning-disclaimer,body:has(.learning-layout) .learning-foot{color:#e4eff8;text-shadow:0 1px 2px #153c6066}

/* Soft mountain silhouettes and calmer card corners. */
body:has(.learning-layout)::before{clip-path:none;background:linear-gradient(180deg,#6f9fc000,#4d82ae33);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 430 C80 430 110 320 190 365 S300 440 375 350 S480 270 560 360 S680 430 760 340 S880 270 960 350 S1070 430 1160 340 S1330 330 1440 380 V1000 H0Z'/%3E%3C/svg%3E");mask-size:100% 100%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 430 C80 430 110 320 190 365 S300 440 375 350 S480 270 560 360 S680 430 760 340 S880 270 960 350 S1070 430 1160 340 S1330 330 1440 380 V1000 H0Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%}body:has(.learning-layout)::after{clip-path:none;background:linear-gradient(180deg,#79a6cc55,#386e9db3 65%,#183e66);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 650 C100 640 155 535 245 570 S390 665 475 600 S600 505 690 575 S815 680 915 610 S1050 530 1145 590 S1320 630 1440 560 V1000 H0Z'/%3E%3C/svg%3E");mask-size:100% 100%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 650 C100 640 155 535 245 570 S390 665 475 600 S600 505 690 575 S815 680 915 610 S1050 530 1145 590 S1320 630 1440 560 V1000 H0Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%}.panel.curriculum,.panel.listening-dashboard,.panel.lesson-companion{border-radius:14px}

/* Reference: low, irregular layered mountain ridgelines. */
body:has(.learning-layout)::before{clip-path:none;background:linear-gradient(180deg,#91b6d7 0%,#5d8db8 70%,#315b85 100%);mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%20568%20L22%20558%2043%20564%2067%20547%2086%20553%20104%20572%20126%20581%20149%20570%20172%20559%20195%20566%20217%20589%20240%20581%20262%20596%20284%20587%20307%20570%20330%20577%20352%20559%20375%20548%20397%20562%20420%20554%20442%20573%20465%20567%20487%20584%20510%20576%20532%20561%20555%20570%20577%20552%20600%20558%20622%20541%20645%20532%20667%20546%20690%20539%20712%20557%20735%20572%20757%20566%20780%20582%20802%20573%20825%20591%20847%20583%20870%20563%20892%20571%20915%20555%20937%20565%20960%20549%20982%20541%201005%20553%201027%20545%201050%20563%201072%20557%201095%20576%201117%20568%201140%20581%201162%20572%201185%20556%201207%20565%201230%20549%201252%20560%201275%20546%201297%20553%201320%20539%201342%20550%201365%20542%201387%20556%201410%20548%201440%20565%20V1000%20H0Z%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%20568%20L22%20558%2043%20564%2067%20547%2086%20553%20104%20572%20126%20581%20149%20570%20172%20559%20195%20566%20217%20589%20240%20581%20262%20596%20284%20587%20307%20570%20330%20577%20352%20559%20375%20548%20397%20562%20420%20554%20442%20573%20465%20567%20487%20584%20510%20576%20532%20561%20555%20570%20577%20552%20600%20558%20622%20541%20645%20532%20667%20546%20690%20539%20712%20557%20735%20572%20757%20566%20780%20582%20802%20573%20825%20591%20847%20583%20870%20563%20892%20571%20915%20555%20937%20565%20960%20549%20982%20541%201005%20553%201027%20545%201050%20563%201072%20557%201095%20576%201117%20568%201140%20581%201162%20572%201185%20556%201207%20565%201230%20549%201252%20560%201275%20546%201297%20553%201320%20539%201342%20550%201365%20542%201387%20556%201410%20548%201440%20565%20V1000%20H0Z%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;-webkit-mask-size:100% 100%;}
body:has(.learning-layout)::after{clip-path:none;background:linear-gradient(180deg,#5e8bb6 0%,#325d88 72%,#163b62 100%);mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%20608%20L27%20600%2052%20613%2077%20607%20103%20621%20129%20615%20155%20632%20181%20625%20207%20638%20233%20629%20259%20643%20285%20632%20311%20639%20337%20621%20363%20630%20389%20611%20415%20622%20441%20615%20467%20634%20493%20627%20519%20641%20545%20635%20571%20620%20597%20628%20623%20611%20649%20622%20675%20608%20701%20616%20727%20603%20753%20615%20779%20609%20805%20627%20831%20617%20857%20635%20883%20627%20909%20641%20935%20630%20961%20644%20987%20633%201013%20640%201039%20624%201065%20633%201091%20615%201117%20626%201143%20619%201169%20636%201195%20627%201221%20643%201247%20634%201273%20620%201299%20629%201325%20612%201351%20623%201377%20615%201403%20629%201440%20618%20V1000%20H0Z%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%20608%20L27%20600%2052%20613%2077%20607%20103%20621%20129%20615%20155%20632%20181%20625%20207%20638%20233%20629%20259%20643%20285%20632%20311%20639%20337%20621%20363%20630%20389%20611%20415%20622%20441%20615%20467%20634%20493%20627%20519%20641%20545%20635%20571%20620%20597%20628%20623%20611%20649%20622%20675%20608%20701%20616%20727%20603%20753%20615%20779%20609%20805%20627%20831%20617%20857%20635%20883%20627%20909%20641%20935%20630%20961%20644%20987%20633%201013%20640%201039%20624%201065%20633%201091%20615%201117%20626%201143%20619%201169%20636%201195%20627%201221%20643%201247%20634%201273%20620%201299%20629%201325%20612%201351%20623%201377%20615%201403%20629%201440%20618%20V1000%20H0Z%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;-webkit-mask-size:100% 100%;}

/* Fine frosted edges instead of a bright rounded outline. */
.panel.curriculum,.panel.listening-dashboard,.panel.lesson-companion{border-radius:7px;border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 1px 0 0 rgba(255,255,255,.08),0 3px 7px #173e5724,0 13px 25px -5px #173e573b,0 30px 52px -12px #173e5742}.listening-dashboard::before{border-radius:inherit;background:linear-gradient(125deg,#ffffff10,transparent 42%)}

/* Soft glass perimeter without a sharp frame. */
.panel.curriculum,.panel.listening-dashboard,.panel.lesson-companion{border-radius:11px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 3px rgba(255,255,255,.19),inset 1px 0 3px rgba(255,255,255,.07),0 5px 12px #173e571b,0 16px 30px -7px #173e5736,0 30px 55px -12px #173e573b}

/* Match the calm landing-page background. */
body:has(.learning-layout){background:radial-gradient(ellipse at 95% 5%,#d9ebff95,transparent 47%),radial-gradient(ellipse at 4% 38%,#dcf7ed70,transparent 42%),#f9fcff;background-attachment:scroll}body:has(.learning-layout)::before,body:has(.learning-layout)::after{display:none}body:has(.learning-layout) .site-footer,body:has(.learning-layout) .site-footer a,body:has(.learning-layout) .site-footer small,body:has(.learning-layout) .learning-disclaimer,body:has(.learning-layout) .learning-foot{color:#617e91;text-shadow:none}body:has(.learning-layout) .site-footer{border-top-color:#dce8ef}body:has(.learning-layout) .site-footer .brand{color:#164c74}

/* Portuguese-only photographic backdrop, gently out of focus. */
body[data-course="portugiesisch"]:has(.learning-layout){background:#eaf1f6;isolation:isolate}body[data-course="portugiesisch"]:has(.learning-layout)::before{display:block;content:"";position:fixed;inset:-12px;z-index:-1;pointer-events:none;clip-path:none;mask-image:none;-webkit-mask-image:none;background:linear-gradient(#edf5fc52,#edf5fc33),url("assets/background/Gemeinsamer%20Sonnenuntergang%20%C3%BCber%20der%20Skyline.png") center 56% / cover no-repeat;filter:blur(6px);transform:none}body[data-course="portugiesisch"]:has(.learning-layout)::after{display:block;content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;clip-path:none;mask-image:none;-webkit-mask-image:none;background:linear-gradient(180deg,#eef6ff80,#eef6ff2b 48%,#dbe9f54d)}body[data-course="portugiesisch"] .page-title,body[data-course="portugiesisch"] .site-header{ text-shadow:0 1px 6px #ffffffb3}body[data-course="portugiesisch"] .panel.curriculum,body[data-course="portugiesisch"] .panel.listening-dashboard,body[data-course="portugiesisch"] .panel.lesson-companion{background:linear-gradient(135deg,#ffffffad,#ffffff85 55%,#edf5ff8c)}

/* Destination photography, softly blurred behind frosted cards. */
body.home-page{--destination-image:url("assets/background/talkbacki-home.png")}body[data-course="deutsch"]{--destination-image:url("assets/background/talkbacki-de.png")}body[data-course="englisch"]{--destination-image:url("assets/background/talkbacki-en.png")}body[data-course="italienisch"]{--destination-image:url("assets/background/talkbacki-it.png")}body[data-course="japanisch"]{--destination-image:url("assets/background/talkbacki-ja.png")}body[data-course="spanisch"]{--destination-image:url("assets/background/talkbacki-es.png")}body[data-course="portugiesisch"]{--destination-image:url("assets/background/Gemeinsamer%20Sonnenuntergang%20%C3%BCber%20der%20Skyline.png")}
body.home-page,body[data-course]:has(.learning-layout){background:#eaf1f6;position:relative;isolation:isolate}body.home-page::before,body[data-course]:has(.learning-layout)::before{display:block;content:"";position:fixed;inset:-12px;z-index:-1;pointer-events:none;clip-path:none;mask-image:none;-webkit-mask-image:none;background:var(--destination-image) center / cover no-repeat;filter:blur(6px)}body.home-page::after,body[data-course]:has(.learning-layout)::after{display:block;content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;clip-path:none;mask-image:none;-webkit-mask-image:none;background:linear-gradient(180deg,#eef6ffad,#eef6ff61 48%,#dbe9f57d)}body[data-course] .panel.curriculum,body[data-course] .panel.listening-dashboard,body[data-course] .panel.lesson-companion,.home-page .language-card,.home-page .home-about .panel{background:linear-gradient(135deg,#ffffffb8,#ffffff94 55%,#edf5ff9e)}.home-page .home-hero,.home-page .language-filter,.home-page .home-facts{text-shadow:0 1px 6px #ffffffb3}

/* Homepage sunset; people-free destination photographs on course pages. */
body.home-page{--destination-image:url("assets/background/Gemeinsamer%20Sonnenuntergang%20%C3%BCber%20der%20Skyline.png")}body[data-course="portugiesisch"]{--destination-image:url("assets/background/talkbacki-br-rio.png")}body[data-course="italienisch"]{--destination-image:url("assets/background/talkbacki-it-colosseum.png")}

body.home-page{--destination-image:url("assets/background/talkbacki-home-conversation-v2.png")}

body.home-page{--destination-image:url("assets/background/talkbacki-home-conversation-v3.png")}

body.home-page{--destination-image:url("assets/background/talkbacki-home-conversation-v4.png")}

body.home-page{--destination-image:url("assets/background/talkbacki-home-conversation-v5.png")}

body.home-page{--destination-image:url("assets/background/talkbacki-home-conversation-v6.png")}

body.home-page{--destination-image:url("assets/background/talkbacki-home-conversation-v5.png")}

/* Contemporary curriculum: quiet list hierarchy, one clear active state. */
.curriculum{padding-top:21px}.curriculum-heading{padding:0 20px 19px}.curriculum-heading h2{font-size:21px;letter-spacing:-.6px;gap:10px}.curriculum-heading .kicker{font-size:8px;letter-spacing:.9px}.curriculum-sub{font-size:10px;line-height:1.7}.curriculum-total{border:0;background:#dff5ec80;color:#08734d;padding:4px 9px;border-radius:7px;margin-top:8px}.tree-hint{font-size:10px;line-height:1.6;margin-top:11px}.tree-scroll{padding:0 12px 8px;scrollbar-width:thin;scrollbar-color:#87b6cd66 transparent;scroll-padding-top:94px}.ger-level,.ger-level[open]{margin:0 0 5px;padding:0;border:0;border-radius:10px;background:transparent;box-shadow:none}.ger-level>summary{padding:13px 8px;gap:11px;min-height:76px;border-radius:10px;border:0}.ger-level>summary:hover{background:#ffffff45}.ger-level[open]>summary{top:0;background:#edf7fcf2;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 6px 12px -9px #244e7370;border-radius:10px;z-index:3}.level-code{width:35px;height:35px;border-radius:10px;background:#e4eff580;border:0;color:#386482;font-size:12px;font-weight:650}.ger-level[open]>summary .level-code{background:#08a873;color:#fff;border:0;box-shadow:none}.ger-level>summary strong{font-size:12px;font-weight:650;letter-spacing:-.15px;color:#254f69}.ger-level[open]>summary .level-description>strong::after{display:none}.level-description{flex:1;min-width:0}.ger-level>summary .level-stats{font-size:9px;line-height:1.8;color:#5b7a8d;margin-top:3px;gap:4px;flex-wrap:wrap}.vocabulary-count,.vocabulary-count b{font-weight:450;color:#4b7188}.vocabulary-separator{opacity:.55}.tree-chevron,.ger-level[open]>summary .tree-chevron{width:21px;height:25px;flex-shrink:0;border:0;background:transparent;box-shadow:none;color:#4c7894;backdrop-filter:none}.tree-chevron .tree-icon{width:14px;height:14px}.level-progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:3px;border:0;border-radius:3px;overflow:hidden;margin-top:7px;background:#cfe3eb80}.level-progress::-webkit-progress-bar{background:#cfe3eb80;border-radius:3px}.level-progress::-webkit-progress-value{background:#0bb17b;border-radius:3px}.level-progress::-moz-progress-bar{background:#0bb17b;border-radius:3px}.can-do{font-size:10px;line-height:1.7;margin:10px 10px 13px;color:#57788e}.ger-module,.ger-module[open]{margin:2px 0;padding:0;border:0;border-radius:9px;background:transparent;box-shadow:none}.ger-module>summary,.ger-module[open]>summary{gap:9px;padding:11px 8px;min-height:50px;border-radius:9px;border:0;background:transparent}.ger-module>summary:hover{background:#ffffff52}.ger-module[open]>summary{background:#dcefe985}.ger-module>summary>.module-icon,.ger-module[open]>summary>.module-icon{width:25px;height:29px;flex-shrink:0;border:0;border-radius:0;background:none;box-shadow:none;color:#527e95}.module-icon .tree-icon{width:18px;height:18px;stroke-width:1.7}.ger-module[open]>summary>.module-icon{color:#00956b}.ger-module>summary>.module-label{font-size:11px;line-height:1.45;font-weight:550;color:#365f78}.module-label>small{font-size:7px;line-height:1.4;letter-spacing:.7px;color:#608397;margin-bottom:3px}.ger-module[open]>summary .module-label>small::after{display:none}.ger-module[open]>summary>.module-label{color:#136d55;font-weight:650}.ger-module>summary>.module-count{font-size:10px;white-space:nowrap;background:none;color:#8095a3;border-radius:0;padding:0;font-variant-numeric:tabular-nums;min-width:24px}.module-count>span{opacity:.65}.ger-module>summary>.module-count.has-audio{color:#00875f;font-weight:650}.ger-module>summary>.module-chevron,.ger-module[open]>summary>.module-chevron{width:17px;height:22px;border:0;background:transparent;box-shadow:none;color:#7392a5;border-radius:0;backdrop-filter:none}.module-chevron .tree-icon{width:12px;height:12px}.ger-module[open]>summary>.module-chevron{color:#00875f}.tree-lesson{position:relative;margin:2px 0 2px 18px;width:calc(100% - 18px);padding:11px 8px 11px 11px;gap:9px;border:0;border-radius:8px;border-left:1px solid #b3d2df80;background:transparent;box-shadow:none;color:#55768b;min-height:56px}.tree-lesson:hover{border:0;border-left:1px solid #9ac7da;background:#ffffff60}.tree-lesson.selected{border:0;border-left:2px solid #168ac3;background:#e1f1ffb3;box-shadow:none;padding-left:10px}.tree-lesson-name{font-size:10px;line-height:1.55;font-weight:450}.tree-lesson.selected .tree-lesson-name{color:#155d8b;font-weight:650}.tree-index,.tree-lesson.selected .tree-index,.is-ready .tree-index{width:20px;min-width:20px;height:23px;display:grid;place-items:center;align-self:center;margin:0;border:0;border-radius:5px;background:transparent;color:#88a3b4;font-size:9px;box-shadow:none}.tree-lesson.selected .tree-index{background:#157bb7;color:#fff}.is-ready:not(.selected) .tree-index{color:#008764}.tree-lesson small{font-size:8px;line-height:1.6;color:#7892a2;margin-top:3px}.tree-lesson.selected small{color:#3d81a7}.tree-state,.is-ready .tree-state{width:20px;height:24px;min-width:20px;background:transparent;border:0;box-shadow:none;border-radius:0;color:#a1b7c3}.is-ready .tree-state{color:#008e68}.tree-state .tree-icon{width:12px;height:12px}.tree-lesson.selected .tree-state{color:#157bb7}.is-ready .tree-state .tree-icon{fill:currentColor}.vocabulary-note{font-size:8px;line-height:1.7;margin:13px 18px 0;color:#6c8798}.curriculum .ger-source{font-size:8px;padding:10px 18px 4px;color:#7290a1}@media(max-width:700px){.tree-scroll{max-height:570px;padding-inline:14px}.ger-level>summary{padding:14px 10px}.ger-module,.ger-module[open]{margin:3px 0}.ger-module>summary{padding:12px 10px}.tree-lesson{padding-block:13px}.tree-lesson-name{font-size:11px}.ger-module>summary>.module-label{font-size:12px}.can-do{font-size:11px}}

.ger-module>summary>.module-count{display:inline-flex;align-items:center;justify-content:center;gap:1px;width:auto;height:auto;line-height:1.5}

/* Tinted glass badges retain their green and blue identities. */
.level-code,.tree-index{position:relative;overflow:hidden}.ger-level[open]>summary .level-code{background:linear-gradient(150deg,#b4ffe9b8 0%,#28c796de 40%,#009d70ec 75%,#007e61ed 100%);border:1px solid #caffefcf;box-shadow:inset 0 1px 2px #ffffffb3,inset 0 -2px 4px #006c6538,0 3px 8px #008b6833,0 0 0 1px #008b6812;color:#fff;text-shadow:0 1px 2px #006c6570;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.ger-level[open]>summary .level-code::before,.tree-lesson.selected .tree-index::before{content:"";position:absolute;inset:1px 2px 49%;border-radius:8px 8px 45% 45%;background:linear-gradient(180deg,#ffffff7a,#ffffff08);pointer-events:none}.tree-lesson.selected .tree-index{background:linear-gradient(150deg,#b9eaffc4 0%,#3c9fdfe3 40%,#177dbbeb 78%,#12649fe8 100%);border:1px solid #cceeffc9;box-shadow:inset 0 1px 2px #ffffffb3,inset 0 -2px 3px #084b7a40,0 2px 6px #126da52b;color:#fff;text-shadow:0 1px 2px #084b7a66;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.tree-lesson.selected .tree-index::before{inset:1px 1px 49%;border-radius:4px 4px 45% 45%}.ger-level:not([open])>summary .level-code{background:linear-gradient(145deg,#ffffffad,#d3eaf4a3 55%,#b7d6e88c);border:1px solid #ffffffc9;box-shadow:inset 0 1px 2px #ffffffdc,0 2px 6px #33688512}

.subtitle-panel #subtitleText[lang="ja-JP"]{font-size:19px;line-height:1.8;margin-bottom:2px}.subtitle-panel .subtitle-romaji{font-size:14px;line-height:1.65;color:#35677f;letter-spacing:.15px;margin:3px 0 2px;font-weight:450;max-height:none}.subtitle-panel .subtitle-romaji[hidden]{display:none}@media(max-width:500px){.subtitle-panel #subtitleText[lang="ja-JP"]{font-size:17px}.subtitle-panel .subtitle-romaji{font-size:13px}}

/* Keep speed at the actual center of the player, independently of adjacent controls. */
.listening-dashboard .listening-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.listening-dashboard .playback-options{min-width:0;justify-content:flex-start;gap:10px 14px}
.listening-dashboard #learningSpeed{grid-column:2;justify-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:40px;line-height:1.2;text-align:center;white-space:nowrap;padding:10px 16px}
.listening-dashboard .listening-bottom>.text-link{justify-self:end}
@media(max-width:700px){.listening-dashboard .listening-bottom{grid-template-columns:1fr;gap:14px}.listening-dashboard .playback-options{justify-content:center}.listening-dashboard #learningSpeed{grid-column:1}.listening-dashboard .listening-bottom>.text-link{justify-self:center}}

body:has(.learning-layout) .learning-disclaimer{color:#24485e;background:linear-gradient(135deg,#ffffff70,#ffffff30 55%,#e7f3ff38);text-shadow:none;border-radius:10px;padding:11px 15px;font-size:11px;line-height:1.7;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
body:has(.learning-layout) .learning-foot{color:#24485e;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;font-size:11px;line-height:1.7;text-shadow:0 1px 5px #ffffffc9;backdrop-filter:none;-webkit-backdrop-filter:none}