/* The same materials and hierarchy continue through every secondary screen. */
html body {--detail-leaf:#e8eed9;--detail-paper:#fffdf6;--detail-line:#dce4d0;--detail-muted:#69795c}
html body [hidden] {display:none!important}
html body .skip-link:not(:focus) {clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;padding:0}
html body .detail-heading {position:relative;padding:25px 0 30px;border-bottom:1px solid var(--detail-line);margin-bottom:28px;isolation:isolate}
html body .detail-heading .eyebrow {color:#738565;margin-bottom:12px}
html body .detail-heading :is(h1,h2) {font:400 clamp(2.2rem,3.8vw,3.3rem)/1.15 Fraunces,Georgia,serif;letter-spacing:-.05em;max-width:790px;margin:0 0 15px}
html body .detail-heading>p {max-width:690px;color:#697660;font-size:.9375rem!important}
html body .detail-heading .detail-mark {position:absolute;right:4px;top:16px;width:76px;height:76px;display:grid;place-items:center;border:1px solid #dce4cd;border-radius:50%;color:#8fa576;opacity:.8;z-index:-1}
html body .detail-mark svg {width:32px;height:32px}
html body .detail-heading:has(.detail-mark) :is(h1,h2,p) {max-width:calc(100% - 100px)}
html body .form-section {padding:28px 0;border-bottom:1px solid #e5e9dc}
html body .form-section:first-child {padding-top:0}
html body .form-section:last-child {border-bottom:0;padding-bottom:0}
html body .form-section-title {display:flex;gap:12px;align-items:center;margin-bottom:19px;font-size:1rem;font-weight:500}
html body .form-section-title>span {display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#e8efda;color:#6b8351;font-size:.875rem;font-variant-numeric:tabular-nums}
html body .form-section>label {display:block;margin:20px 0 9px;font-size:.9375rem;font-weight:500;color:#536b49}
html body .form-section>label:first-of-type {margin-top:0}
html body .field-help {color:#6c7d60;font-size:.875rem!important}
html body :is(input,textarea,select)[aria-invalid=true] {border-color:#b6654b;background:#fff9f3;box-shadow:0 0 0 3px #b6654b12}
html body .field-error {color:#a24935;font-size:.875rem!important;margin:8px 0 12px;line-height:1.6!important}
html body button:disabled {cursor:default}
html body button[aria-busy=true] {position:relative;cursor:wait}
html body button[aria-busy=true]::before {content:'';display:inline-block;flex:none;vertical-align:-2px;width:14px;height:14px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:7px;animation:ui-spin .85s linear infinite}
@keyframes ui-spin {to{transform:rotate(360deg)}}
/* Every async operation has a stable place for its feedback. */
html body .ui-notice {position:relative;display:block;background:#edf2e3;border:1px solid #dce6cd;border-radius:15px;padding:15px 18px 15px 43px;margin:15px 0;font-size:.875rem!important;line-height:1.7!important;color:#526b45;overflow-wrap:anywhere}
html body .ui-notice:empty {display:none}
html body .ui-notice::before {content:'i';position:absolute;left:17px;top:17px;display:grid;place-items:center;width:16px;height:16px;border:1px solid currentColor;border-radius:50%;font:500 .875rem/1 Inter,sans-serif}
html body .ui-notice[data-state=loading] {background:#f1f3e9;border-color:#e0e5d3;color:#6b7d57}
html body .ui-notice[data-state=loading]::before {content:'';border:1.5px solid currentColor;border-right-color:transparent;animation:ui-spin .85s linear infinite}
html body .ui-notice[data-state=success]::before {content:'✓';border:0;font-size:1rem}
html body .ui-notice[data-state=error] {background:#fbf0e7;border-color:#ecd3c2;color:#99543b}
html body .ui-notice[data-state=error]::before {content:'!'}
html body .ui-notice[data-state=offline] {background:#f5f0e3;border-color:#e7dcc0;color:#846c3f}
html body .ui-state {display:flex;flex-direction:column;align-items:center;gap:17px;text-align:center;padding:36px 28px;border:1px dashed #d5e0c8;border-radius:22px;background:#f4f6ed;color:#6b7d5a;margin:16px 0}
html body .ui-state-icon {display:grid;place-items:center;flex:none;width:66px;height:66px;background:#e8efda;border-radius:45% 45% 40% 40%;color:#809866}
html body .ui-state-icon svg {width:29px;height:29px}
html body .ui-state-copy h3 {font:400 1.65rem/1.3 Fraunces,Georgia,serif;letter-spacing:-.035em;color:#3c5638;margin-bottom:9px}
html body .ui-state-copy p {max-width:450px;margin:auto;font-size:.9375rem!important;color:#6b7b5f}
html body .ui-state[data-state=error] {background:#fbf4eb;border-color:#e7d7c4}
html body .ui-state[data-state=error] .ui-state-icon {background:#f1dfcd;color:#a27652}
html body .ui-state[data-state=offline] .ui-state-icon {background:#eee8d5;color:#a08759}
html body .ui-state[data-state=loading] .ui-state-icon svg {animation:ui-spin 1.3s linear infinite}
html body #connection-status {margin:0 0 24px}
html body.exercise-focus #connection-status {display:none}
html body #app-layout .product-status {display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;border:1px solid #dce6cd;border-radius:18px;background:#edf2e3;color:#526b45;padding:17px 21px;font-size:.875rem;line-height:1.7;box-shadow:none}
html body #app-layout .product-status:is(.sync,.auth,.error) {background:#fbf1e6;border-color:#e9d9c0;color:#86653e}
html body .product-status :is(button,a) {display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid currentColor;border-radius:100px;background:transparent;color:inherit;font:500 .875rem/1.5 Inter,sans-serif;padding:8px 16px;text-decoration:none}
html body .bubble.sys {border:1px solid #e6dbc4;background:#f7f2e5;color:#816e48;border-radius:16px;font-size:.875rem;max-width:100%;padding:15px 19px}
html body .reading-status:has(.ui-notice) {display:block;padding:0;margin:16px 0}
html body .reading-status:has(.ui-notice)>.dot {display:none}
html body #rd-label.ui-notice {margin:0;min-height:48px}
html body .reading-actions button[aria-busy=true]::before {animation:ui-spin .85s linear infinite}
html body .chart-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px;min-height:150px;border:1px dashed #dbe4cd;border-radius:18px;background:#f5f7ee;color:#758a61;text-align:center;margin:17px 0}
html body .chart-empty>span {font:400 2.6rem Fraunces,Georgia,serif;color:#9bb381;margin-bottom:10px}
html body .chart-empty p {font-size:.9375rem!important;margin-bottom:8px}
html body .chart-empty small {font-size:.875rem;color:#7b8e69}
html body #ai-debrief-text.ui-notice {white-space:pre-wrap;line-height:1.85!important}
html body .auth-body .ui-notice {margin-block:18px}
html body #scr-ex #ex-panel .ui-notice {background:#eff3ce0a;border-color:#dce6b533;color:#c3d2ad;max-width:620px;margin:18px auto;white-space:normal;text-align:left}
html body #scr-ex #ex-panel .ui-notice[data-state=error] {background:#e9c29c0b;border-color:#e1b78d38;color:#d1bda6}
html body #scr-ex #ex-panel .ui-notice[data-state=loading] {color:#bacba2}
/* Personalization and the language dialog. */
html body #scr-onboard .onboard {max-width:760px;padding:14px 0}
html body .onboard-kicker {color:#738565;font-size:.875rem;letter-spacing:.1em;font-weight:400;margin-bottom:15px}
html body .onboard-list {display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:28px 0}
html body .onboard-item {display:flex;align-items:center;gap:13px;text-align:left;min-height:80px;border:1px solid #dce4cf;padding:18px 21px;font-size:.9375rem;line-height:1.6;transition:background .2s,border-color .2s}
html body .onboard-item::before {content:'';display:grid;place-items:center;width:22px;height:22px;flex:none;border:1px solid #c5d2b4;border-radius:7px;background:#fafbf5}
html body .onboard-item.on::before {content:'✓';background:#6f8955;border-color:#6f8955;color:#fff}
html body .onboard-skip {text-align:center;margin-top:15px}
html body .onboard-skip .link-btn {color:#6b8057;padding:8px 14px;font-size:.875rem}
html body #lang-overlay {background:#203a2bc2;backdrop-filter:blur(10px)}
html body .lang-box {background:#fbfbf2;border:1px solid #dce4cf;border-radius:30px;padding:38px;max-width:500px;box-shadow:0 25px 100px #12231c2b}
html body .lang-box::before {content:'✳';display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:#e7edda;color:#8fa16e;font-size:2.5rem;margin:0 auto 24px}
html body .lang-box h2 {font:400 2rem/1.2 Fraunces,Georgia,serif;letter-spacing:-.05em;margin-bottom:18px}
html body .lang-box .muted {color:#6f7d61;font-size:.9375rem!important}
html body .lang-btns button {background:#eef2e4;color:#445d37;border:1px solid #d5e0c5;border-radius:15px;font-weight:500;min-height:55px}
html body .lang-btns button:hover {background:#e0e9cd;border-color:#a9bd91}
/* Lessons: a chapter header, a clear stepper and a single reading column. */
html body #scr-ders {max-width:1040px}
html body #dic-lesson {max-width:900px;margin:0 auto}
html body .dic-lesson-head {border-bottom:1px solid #dce4ce;padding:5px 0 28px;margin-bottom:28px}
html body .dic-kicker {font-size:.875rem;color:#748963;font-weight:400;letter-spacing:.07em;text-transform:uppercase}
html body .dic-lesson-head h2 {font:400 clamp(2.25rem,4vw,3.3rem)/1.16 Fraunces,Georgia,serif;letter-spacing:-.05em;margin:13px 0 23px}
html body .dic-stepper {display:flex;counter-reset:lesson-step;gap:8px;align-items:center;padding:0;list-style:none}
html body .dic-stepper li {display:flex;align-items:center;gap:8px;flex:1;border:0;background:transparent;color:#7a886b;white-space:normal;padding:8px 0;font-size:.875rem;font-weight:400;line-height:1.5;counter-increment:lesson-step}
html body .dic-stepper li::before {content:counter(lesson-step);display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:50%;border:1px solid #dce4ce;color:#81946c}
html body .dic-stepper li.on {color:#446135;background:transparent;font-weight:500}
html body .dic-stepper li.on::before {background:#dee9c9;border-color:#dee9c9;color:#4e6c37}
html body .dic-stepper li.past::before {content:'✓';border-color:#e1e8d5;background:#eaf0e1}
html body .dic-goal-line {background:#eaf0df;border:1px solid #dce5cb;border-radius:17px;padding:19px 23px;font-weight:400;color:#526e41;font-size:1rem!important;margin-bottom:24px}
html body #app-layout .dic-concept {position:relative;padding:28px 30px;margin-bottom:17px}
html body .dic-concept h3 {font:400 1.6rem/1.35 Fraunces,Georgia,serif;margin-bottom:13px;letter-spacing:-.035em}
html body .dic-concept p {color:#66765b;line-height:1.85!important;font-size:1rem!important;max-width:750px}
html body .dic-pws {background:#f3eddf;border:1px solid #e9dfcb;border-radius:20px;padding:23px 26px;margin-top:22px}
html body .dic-pws>b {font-size:.875rem;font-weight:500;letter-spacing:.04em;color:#91754f}
html body .dic-pws p {font-size:.9375rem!important;color:#82704f;margin-top:10px;line-height:1.8!important}
html body .dic-links {margin-top:22px;gap:12px}
html body .dic-nav {margin-top:30px;padding-top:22px;border-top:1px solid #e0e6d5;gap:12px;align-items:center}
html body .dic-nav :is(button,a) {white-space:normal;max-width:100%}
html body .dic-step>p:first-child {color:#6b7a5e;max-width:720px;margin-bottom:22px}
html body .dic-items {gap:14px}
html body .dic-item {display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;background:#fffdf6;border-color:#dfe6d3;border-radius:20px;padding:23px 24px;box-shadow:none}
html body .dic-item .grow {min-width:0;font-family:Fraunces,Georgia,serif;font-size:1.4rem;line-height:1.6;color:#425b37}
html body .dic-marked {line-height:1.9}
html body .dic-item-note {font:.875rem/1.65 Inter,sans-serif;color:#78886a;margin-top:8px}
html body .dic-stress {color:#ad6042;text-decoration-thickness:1px}
html body .dic-said {border-radius:100px;padding:10px 17px;color:#71835f;background:#f3f5eb;border-color:#dce4d0;font-weight:400}
html body .dic-said.on {color:#4e6b39;background:#e6eed7;border-color:#cbdab6}
html body .dic-play.playing {background:#e7efda;border-color:#a3b987;color:#4f6e38}
html body .dic-rec-studio {display:flex;flex-direction:column;align-items:center;text-align:center;background:#edf1e3;border:1px solid #dce5ce;border-radius:26px;padding:32px;margin-bottom:24px}
html body .dic-record-symbol {display:grid;place-items:center;width:80px;height:80px;color:#7d9665;background:#e0e9ce;border:1px solid #ceddba;border-radius:50%;margin-bottom:20px;box-shadow:0 0 0 12px #e6edda}
html body .dic-record-symbol svg {width:30px;height:30px}
html body .dic-rec-studio>p {max-width:600px;color:#5d7550;font-size:1.05rem!important;margin-bottom:20px}
html body .dic-rec-row {justify-content:center;width:100%;gap:15px}
html body .dic-rec-time {font:400 1.5rem Fraunces,Georgia,serif;color:#a96245;min-width:46px;font-variant-numeric:tabular-nums}
html body .dic-rec-studio:has(#dic-rec-time:not(:empty)) .dic-record-symbol {color:#b66c4a;background:#f1ddc6;border-color:#e0bc9b;box-shadow:0 0 0 12px #e9d7bd55}
html body .dic-passage {font-family:Fraunces,Georgia,serif;font-size:1.4rem;line-height:1.9;background:#fffdf2!important}
html body .dic-rec-out:not(:empty) {border:1px solid #dce5ce;border-radius:23px;background:#fffdf6;padding:24px;margin-top:22px}
html body .dic-rec-out audio {width:100%;border-radius:100px;margin-bottom:12px}
html body .dic-rec-out>p {font-size:.875rem!important;color:#708260;margin:12px 0 17px}
html body .dic-feedback {border:1px solid #dbe5cd;border-radius:18px;background:#f0f4e6;padding:23px;color:#506b3e;line-height:1.8}
html body #app-layout :is(.dic-q,.dic-card) {border-radius:25px;border:1px solid #dce4cf;padding:29px;margin:18px 0;min-inline-size:0}
html body :is(.dic-q legend,.dic-card-q) {font:400 1.6rem/1.45 Fraunces,Georgia,serif;letter-spacing:-.025em;float:left;margin:0 0 22px;width:100%;padding:0;color:#3b5432}
html body :is(.dic-q,.dic-card) .choice-row {display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
html body #app-layout :is(.dic-q,.dic-card) .choice-row button {position:relative;min-height:56px;width:100%;text-align:left;border-radius:14px;padding:16px 20px;background:#f6f7ef;border:1px solid #dfe6d3;color:#647a51;font-weight:400;white-space:normal}
html body #app-layout :is(.dic-q,.dic-card) .choice-row button.on {border-color:#a3b98a;background:#e9efdd;color:#435f32}
html body #app-layout :is(.dic-q,.dic-card) .choice-row button.dic-right {outline:2px solid #95ad7b;outline-offset:2px}
html body .dic-why:not(:empty) {clear:both;border-radius:17px;padding:18px 20px;background:#f0f4e7;color:#5c7645;margin-top:23px;font-size:.9375rem;line-height:1.8}
html body .dic-why.retry {background:#f7efe3;color:#94754c}
html body .dic-why .dic-nav {border-color:#dbe4cd;margin-top:14px;padding-top:16px}
html body #dic-cards {max-width:820px;margin:0 auto}
html body .dic-card>.dic-kicker {margin-bottom:14px}
html body #app-layout .dic-finish {background:#edf2e2;border:1px solid #dbe5c9;padding:38px;text-align:center;overflow:hidden;position:relative}
html body .dic-finish::before {content:'✓';display:grid;place-items:center;width:65px;height:65px;border:1px solid #cbdab2;border-radius:50%;background:#e0eacd;color:#739352;font-size:1.7rem;margin:0 auto 24px}
html body .dic-finish h3 {font:400 2.3rem/1.2 Fraunces,Georgia,serif;letter-spacing:-.045em;margin-bottom:20px}
html body .dic-finish>p {max-width:590px;margin:12px auto;color:#637a4f;font-size:.9375rem!important}
html body .dic-finish>div {border-top:1px solid #d7e2c6;margin-top:25px;padding-top:23px;text-align:left}
html body .dic-finish label {font-size:.9375rem;color:#5c7547}
html body #app-layout .dic-finish .seg {margin-top:14px;gap:9px}
html body .dic-intro {background:#eff3e6!important;border-color:#dce5cf!important}
html body .dic-intro p {max-width:800px;color:#657a54;font-size:.9375rem!important}
html body .dic-goal h3 {font:400 1.7rem Fraunces,Georgia,serif;margin-bottom:18px}
html body .dic-goal-seg {margin:10px 0 20px!important;gap:9px!important}
html body .dic-next {background:#eaf0df;border:1px solid #dbe5cb;border-radius:18px;padding:23px;margin-top:23px;gap:22px}
html body .dic-next-title {font:400 1.65rem/1.3 Fraunces,Georgia,serif;letter-spacing:-.035em;margin:10px 0}
html body .dic-next .muted {font-size:.875rem;line-height:1.7}
html body #app-layout .dic-tool {border-radius:23px;padding:26px;gap:7px;transition:transform .2s,border-color .2s}
html body #app-layout .dic-tool:hover {transform:translateY(-3px);border-color:#b9cba6}
html body .dic-tool b {font:400 1.6rem Fraunces,Georgia,serif;letter-spacing:-.035em}
html body .dic-tool .muted {font-size:.875rem;line-height:1.7}
html body .dic-tool-icon {background:#e8efdb;color:#809b63;border-radius:15px;width:52px;height:52px;margin-bottom:12px;font-size:1.7rem}
html body #dic-home .dic-unit-head {align-items:center;gap:17px}
html body #dic-home .dic-unit-head h3 {font:400 1.5rem/1.3 Fraunces,Georgia,serif;margin-bottom:7px}
html body #dic-home .dic-unit-head p {color:#758568}
html body #dic-home .dic-bar {height:3px;background:#e5eada;margin:24px 0 21px}
html body #dic-home .dic-lesson {background:#f5f7ee;border-color:#e0e7d5;padding:15px 18px;gap:13px}
html body #dic-home .dic-unit-fold {min-width:0}
html body .dic-warm {text-align:center;background:#edf2e3!important;display:flex;flex-direction:column;align-items:center;padding:35px!important}
html body .dic-warm-text {font:400 1.8rem/1.5 Fraunces,Georgia,serif;max-width:660px;color:#47643a;margin:20px 0!important}
html body .dic-warm .ex-count {display:grid;place-items:center;width:120px;height:120px;border-radius:50%;border:1px solid #ccdcb6;background:#e1eacd;font:400 3.5rem Fraunces,Georgia,serif;color:#789456;margin:15px auto 25px;font-variant-numeric:tabular-nums}
html body .dic-warm>p.muted {max-width:470px;font-size:.875rem!important}
/* Real-life tasks, rehearsal and their completion states. */
html body :is(#scr-mission-new,#scr-mission-done,#scr-mission-result,#scr-prova) {max-width:940px;margin:auto}
html body :is(#scr-mission-new,#scr-mission-done)>h2 {font:400 2.6rem/1.2 Fraunces,Georgia,serif;letter-spacing:-.045em;margin-bottom:16px}
html body #mission-sugg {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
html body #mission-sugg .lex-chip {display:flex;align-items:center;min-height:65px;white-space:normal;margin:0;border:1px solid #dce4d0;background:#f4f7ec;color:#677e51;border-radius:14px;padding:15px 17px;line-height:1.7;font-size:.875rem;cursor:pointer;transition:background .2s}
html body #mission-sugg .lex-chip:hover {background:#e7efda;border-color:#b9cda0}
html body #mn-zone {flex-wrap:wrap}
html body #mn-zone button {flex:1 1 150px;background:#f5f7ed;border-color:#dfe6d4;font-size:.875rem}
html body .task-actions {margin:23px 0 0}
html body .task-actions>p {font-size:.875rem!important;text-align:center;color:#718362;margin-top:13px}
html body .scale-labels {display:flex;justify-content:space-between;font-size:.875rem;color:#7a8a69;margin-bottom:10px}
html body :is(#scr-mission-new,#scr-mission-done) .slider-row {padding:17px 20px;background:#f0f4e7;border-radius:16px;gap:15px}
html body :is(#scr-mission-new,#scr-mission-done) .slider-val {font:400 2rem Fraunces,Georgia,serif;color:#6f8955}
html body #mission-result .topbar {display:none}
html body .mission-finish-heading {text-align:center;margin:15px auto 26px}
html body .mission-finish-heading .detail-mark {display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:#e5eed6;color:#7b985d;margin:0 auto 20px}
html body .mission-finish-heading svg {width:30px;height:30px}
html body .mission-finish-heading h1 {font:400 2.7rem/1.2 Fraunces,Georgia,serif;letter-spacing:-.045em;margin:14px 0}
html body #app-layout .mission-result-card {background:#f0f4e7;border-color:#d9e3c9;padding:30px;text-align:center}
html body .mission-result-card>.muted {font-size:1.05rem!important;max-width:650px;margin:auto}
html body .compare {gap:18px;margin:28px auto;max-width:620px}
html body .compare .cbox {background:#fffdf5;border:1px solid #dce4cd;border-radius:20px;padding:25px;min-width:0;flex:1}
html body .compare .cnum {font:400 3.5rem/1.1 Fraunces,Georgia,serif;color:#a77a51;margin-bottom:11px}
html body .compare .cbox:last-child .cnum {color:#6f8e50}
html body .compare .muted {font-size:.875rem!important;color:#718361}
html body .mission-result-note {max-width:650px;margin:22px auto!important;color:#597348;font-size:1.05rem!important}
html body .mission.done {background:#edf3e2;border:1px solid #dce7cb}
html body .mission {border:1px solid #e0e7d4;border-radius:18px;padding:20px;gap:15px;background:#f6f8ee;margin-bottom:12px}
html body .mission .meta {font-size:.875rem;color:#758865;line-height:1.7;margin-top:7px}
/* The map, personal insights, word deck and community. */
html body .journey-intro {display:flex;align-items:center;gap:18px;padding:25px 28px;background:#edf2e2;border:1px solid #dce5ce;border-radius:23px;margin-bottom:24px}
html body .journey-intro .detail-mark {display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;background:#e0eacd;color:#7b9660}
html body .journey-intro svg {width:26px;height:26px}
html body .journey-intro h2 {font:400 1.75rem/1.25 Fraunces,Georgia,serif;margin-bottom:7px;letter-spacing:-.035em}
html body .journey-intro p {color:#6b8058;font-size:.875rem!important;max-width:650px}
html body #scr-progress [role=tabpanel]>.card {margin-bottom:21px}
html body #scr-progress :is([role=tabpanel],.optional-body)>.card>h3 {font:400 1.65rem/1.3 Fraunces,Georgia,serif;letter-spacing:-.035em;margin-bottom:15px}
html body #scr-progress :is([role=tabpanel],.optional-body)>.card>p {font-size:.9375rem!important;color:#718263;margin-bottom:19px!important;max-width:750px}
html body #avoid-summary>p {margin-bottom:17px;font-size:.9375rem!important;color:#697f59}
html body .zone-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
html body .zone {position:relative;isolation:isolate;overflow:hidden;border:1px solid #dce5cf;background:#f4f7ed;border-radius:21px;padding:24px 20px;text-align:left;min-height:140px;box-shadow:none}
html body .zone .zfill {background:#b9cda0;z-index:-1}
html body .zone .zcount {font:400 2.7rem/1.1 Fraunces,Georgia,serif;color:#739155;margin-bottom:16px}
html body .zone .zname {font-size:.9375rem;font-weight:400;color:#5e784a}
html body #iceberg-wrap {max-width:620px;margin:15px auto 0;border-radius:24px;background:#eff3e8;border:1px solid #e1e8d6;padding:20px 8px;overflow:hidden}
html body #iceberg-wrap svg {max-width:100%!important;display:block;margin:auto}
html body .lex-chip {border:1px solid #d6e2c7;border-radius:100px;background:#edf3e3;color:#5b7746;font-size:.875rem;padding:9px 14px;line-height:1.6;white-space:normal;max-width:100%;overflow-wrap:anywhere}
html body .lex-chip .remove-word {color:#8a9b75;margin-left:8px;min-height:32px;min-width:32px;padding:0;background:#e1eacd;border-radius:50%}
html body #feared-card .row {align-items:stretch;gap:10px!important;margin:25px 0 18px}
html body #feared-input {min-width:0}
html body .medal {border:1px solid #e0e7d4;border-radius:20px;padding:22px 16px;background:#f0f5e5;box-shadow:none}
html body .medal.locked {background:#f6f7ee;filter:none}
html body .medal .m-ic {display:grid;place-items:center;width:44px;height:44px;background:#e2eccc;color:#7e985e;border-radius:50%;margin:0 auto 12px;font:400 1.4rem Fraunces,Georgia,serif}
html body .medal.locked .m-ic {background:#ecefe3;color:#8b987d}
html body .medal .m-name {font-size:.9375rem;font-weight:500;color:#536d40}
html body .medal .m-desc {font-size:.875rem;color:#778a64;margin-top:8px;line-height:1.6}
html body #wall-card {position:relative;background:#fffdf6}
html body .wall-compose {border:1px solid #dce5ce;border-radius:20px;background:#f3f6eb;padding:23px;margin:25px 0}
html body .wall-compose label {font-size:.875rem;color:#637c4f;font-weight:500;display:block;margin-bottom:12px}
html body .wall-compose .row {align-items:stretch;gap:10px!important}
html body #wall-input {min-width:0;background:#fffef8}
html body .wall-compose small {display:block;font-size:.875rem;color:#7c8d6b;margin-top:12px}
html body #wall-list {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px!important}
html body #wall-list>.ui-state {grid-column:1/-1;width:100%;margin:0}
html body #wall-list:has(>.ui-state)>* {grid-column:1/-1}
html body .wall-item {position:relative;background:#f1f5e7;border:1px solid #dfe7d2;border-radius:22px;padding:27px 25px;margin:0;display:flex;flex-direction:column;gap:24px}
html body .wall-item:nth-child(3n+2) {background:#f5f0e4;border-color:#e9dfcb}
html body .wall-item:nth-child(3n+3) {background:#f0edf3;border-color:#e2dbe9}
html body .wall-item>b {font:400 1.3rem/1.65 Fraunces,Georgia,serif;color:#536d43;overflow-wrap:anywhere}
html body .wall-meta {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;color:#7b8b6b}
html body .wall-meta .muted {font-size:.875rem}
html body .wall-action {border:1px solid #d8e1cd;border-radius:100px;min-height:44px;padding:8px 14px;color:#7b8c6a;background:transparent;font-size:.875rem}
html body #deck-history>p {margin-bottom:13px;font-size:.875rem!important;color:#748964}
/* Account settings, data controls and all consent dialogs. */
html body .settings-section-heading {font-size:.875rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#7e9169;padding:15px 4px;margin:17px 0 4px}
html body .account-card>details {margin-top:24px;border-top:1px solid #ead8c5;padding-top:18px}
html body .account-card>details>summary {color:#9b6648;font-size:.9375rem;cursor:pointer;min-height:44px;padding:8px 0}
html body .account-card>details>label {display:block;margin:19px 0 8px;color:#91694c;font-size:.875rem}
html body #account-delete-btn {margin-top:22px;border:1px solid #c58a69;color:#a45c40;background:#f8e9dc;border-radius:100px}
html body #account-delete-btn:hover {background:#aa5d40;color:#fff8ef}
html body .server-options {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
html body .server-option {border:1px solid #dce5ce;border-radius:16px;background:#f3f6eb;padding:18px 20px;color:#6c805a;font-size:.875rem}
html body .server-option b {display:block;color:#4e6940;font-weight:500;margin-bottom:6px}
html body .server-option[data-available=false] {background:#f7f3e8;border-color:#e7dec8;color:#8c7954}
html body .server-option[data-available=false] b {color:#897149}
html body .safety-panel {background:#1c3528c9;backdrop-filter:blur(8px)}
html body .safety-box {max-width:620px;max-height:calc(100svh - 40px);overflow:auto;background:#fffaf0;border:1px solid #e7d5bb;border-radius:28px;padding:35px;box-shadow:0 22px 80px #172c2140}
html body .safety-box h2 {font:400 2.5rem/1.2 Fraunces,Georgia,serif;letter-spacing:-.045em;color:#4f6040;margin-bottom:21px}
html body .safety-box p {font-size:.9375rem!important;line-height:1.85!important;color:#748061;margin-bottom:19px}
html body .safety-actions {gap:10px;flex-wrap:wrap;margin-top:23px}
html body .safety-actions :is(button,a) {border-radius:100px;font:500 .875rem Inter,sans-serif;padding:13px 21px;min-height:48px;white-space:normal}
html body .safety-actions .btn-primary {background:#49623b;color:#fff9ee;border-color:#49623b}
/* Authentication belongs to the same workspace, including submission errors. */
html body.auth-body {background:#f7f8f2;color:#263e35;--border:#dfe6d4;--muted:#6d7e60;font-family:Inter,system-ui,sans-serif}
html body.auth-body .auth-art {background:#284337;color:#eaf0d9;padding:40px 52px}
html body.auth-body .auth-art .logo {color:#f4f3df}
html body.auth-body .auth-art .logo-mark {order:-1;color:#ddac8b;width:34px;height:34px}
html body.auth-body .auth-art .beta-badge {background:#dce7bd20;color:#dce7bd;font-weight:500;letter-spacing:0;text-transform:none}
html body.auth-body .auth-art .eyebrow {color:#b2c69b;font-size:.875rem}
html body.auth-body .auth-art h1 {font:400 clamp(4rem,6vw,7rem)/1.05 Fraunces,Georgia,serif;letter-spacing:-.055em;color:#f0f0da}
html body.auth-body .auth-art h1 em {color:#cedcaf}
html body.auth-body .auth-art p {color:#b2c49f;font-size:1rem!important;line-height:1.85!important}
html body.auth-body .auth-flower {color:#bacd9a;opacity:.4}
html body.auth-body .auth-form {background:#f8f9f3;padding:38px 54px}
html body.auth-body .auth-inner {max-width:450px;padding-block:34px}
html body.auth-body .auth-inner>.eyebrow {color:#84956d;font-size:.875rem}
html body.auth-body .auth-inner h2 {font:400 3rem/1.14 Fraunces,Georgia,serif;letter-spacing:-.055em;color:#2c4536;margin:16px 0 17px}
html body.auth-body .auth-inner>p {font-size:.9375rem!important;color:#738363}
html body.auth-body :is(.auth-top,a) {color:#647e50}
html body.auth-body .auth-top {font-size:.875rem;line-height:1.8}
html body.auth-body form>label,html body.auth-body .password-label label {font-size:.875rem;font-weight:500;color:#536c42;margin-bottom:9px}
html body.auth-body input:not([type=checkbox]):not([type=hidden]) {border:1px solid #d5dfc8;background:#fffef7;color:#3e5634;border-radius:14px;padding:14px 17px;min-height:51px;font:1rem Inter,sans-serif;width:100%}
html body.auth-body input:focus {outline:3px solid #c3d4aa55;border-color:#9bb580}
html body.auth-body .submit {background:#2f4b39;color:#fff9ec;border-radius:100px;border-color:#2f4b39;min-height:53px;font-weight:500;margin-top:25px}
html body.auth-body .submit:hover {background:#46633e}
html body.auth-body .config-note,html body.auth-body .beta-note {border:1px solid #dce5ce;border-radius:15px;background:#eef3e4;color:#71835e;padding:14px 17px;font-size:.875rem;line-height:1.7}
html body.auth-body .form-error {background:#fbede1;border:1px solid #eccdb5;border-radius:15px;color:#a3603c;padding:16px 19px;font-size:.875rem;line-height:1.75;margin:20px 0}
html body.auth-body #privacy {border-top:1px solid #dfe6d4;margin-top:29px;padding-top:20px}
html body.auth-body #privacy summary {font-size:.875rem;color:#6e845c;min-height:44px;cursor:pointer}
html body.auth-body #privacy p {font-size:.875rem!important;line-height:1.85!important;color:#748762}
html body.auth-body .consent {gap:11px;align-items:flex-start;margin-top:22px;line-height:1.7}
html body.auth-body .consent input {accent-color:#708c54;width:17px;height:17px;margin-top:4px;flex:none}
@media(min-width:1024px) {
  html body:is([data-screen=scr-mission-new],[data-screen=scr-mission-done],[data-screen=scr-mission-result],[data-screen=scr-onboard],[data-screen=scr-ders],[data-screen=scr-kartlar]) #app-layout {grid-template-columns:228px minmax(0,1fr)}
}
@media(max-width:700px) {
  html body .detail-heading {padding:16px 0 24px;margin-bottom:23px}
  html body .detail-heading :is(h1,h2) {font-size:2.4rem;margin-bottom:16px}
  html body .detail-heading .detail-mark {width:56px;height:56px;top:20px;opacity:.6}
  html body .detail-heading:has(.detail-mark) :is(h1,h2,p) {max-width:100%}
  html body .detail-heading:has(.detail-mark)>.eyebrow {max-width:calc(100% - 66px);margin-bottom:24px}
  html body .detail-mark svg {width:26px;height:26px}
  html body .form-section {padding:24px 0}
  html body .form-section-title {font-size:.9375rem;gap:10px}
  html body .form-section-title>span {width:27px;height:27px}
  html body .ui-state {padding:28px 20px;border-radius:20px;gap:17px}
  html body .ui-state-copy h3 {font-size:1.5rem}
  html body .ui-state-copy p {font-size:.875rem!important}
  html body .ui-state>.btn-ghost {width:100%}
  html body .ui-notice {padding:15px 17px 15px 41px}
  html body #app-layout .product-status {padding:15px 18px;border-radius:16px}
  html body .onboard-list {grid-template-columns:1fr;gap:11px;margin-block:25px}
  html body .onboard-item {min-height:70px;padding:17px 19px;font-size:.9375rem}
  html body .onboard h1 {font-size:2.55rem}
  html body .lang-box {padding:30px 24px;border-radius:25px}
  html body .lang-box h2 {font-size:2rem}
  html body .lang-box::before {width:60px;height:60px;margin-bottom:22px}
  html body .dic-lesson-head {padding-bottom:24px;margin-bottom:23px}
  html body .dic-lesson-head h2 {font-size:2.5rem;margin:12px 0 19px}
  html body .dic-stepper {flex-wrap:wrap;gap:6px 14px}
  html body .dic-stepper li {flex:0 1 auto;font-size:.875rem;gap:6px;padding:5px 0}
  html body .dic-stepper li::before {width:24px;height:24px;font-size:.875rem}
  html body .dic-goal-line {padding:18px 20px;font-size:.9375rem!important}
  html body #app-layout .dic-concept {padding:23px}
  html body .dic-concept h3 {font-size:1.5rem}
  html body .dic-concept p {font-size:.9375rem!important}
  html body .dic-pws {padding:22px;margin-top:21px}
  html body .dic-pws p {font-size:.875rem!important}
  html body .dic-links {gap:10px}
  html body .dic-links>button {width:100%}
  html body .dic-nav {gap:11px;margin-top:24px;padding-top:20px}
  html body .dic-nav>button {min-width:0;flex:1 1 130px;white-space:normal;padding-inline:16px}
  html body .dic-item {grid-template-columns:1fr 1fr;padding:22px 19px;gap:17px 10px}
  html body .dic-item .grow {grid-column:1/-1;font-size:1.3rem}
  html body .dic-rec-studio {padding:27px 22px;border-radius:23px}
  html body .dic-rec-studio>p {font-size:1rem!important}
  html body .dic-rec-studio .btn-primary {min-width:180px}
  html body .dic-rec-out:not(:empty) {padding:21px}
  html body .dic-rec-out>button {width:100%}
  html body #app-layout :is(.dic-q,.dic-card) {padding:24px 21px;border-radius:23px}
  html body :is(.dic-q legend,.dic-card-q) {font-size:1.5rem;line-height:1.5}
  html body :is(.dic-q,.dic-card) .choice-row {grid-template-columns:1fr;gap:11px}
  html body #app-layout :is(.dic-q,.dic-card) .choice-row button {padding:15px 18px;min-height:54px}
  html body .dic-why:not(:empty) {padding:17px;font-size:.875rem}
  html body #app-layout .dic-finish {padding:30px 23px}
  html body .dic-finish h3 {font-size:2.2rem}
  html body .dic-finish>p {font-size:.9375rem!important}
  html body #app-layout .dic-finish .seg button {flex:1 1 130px;font-size:.875rem;white-space:normal;padding:11px 14px}
  html body .dic-next {padding:21px;gap:19px}
  html body .dic-next-title {font-size:1.6rem}
  html body #dic-home .dic-unit-head {gap:12px;flex-wrap:wrap}
  html body #dic-home .dic-unit-head>.grow {flex:1;min-width:140px}
  html body #dic-home .dic-unit-head h3 {font-size:1.35rem}
  html body #dic-home .dic-unit-head p {font-size:.875rem!important}
  html body #dic-home .dic-unit-head>.badge {margin-left:56px}
  html body #dic-home .dic-lesson {gap:10px;padding:14px}
  html body #dic-home .dic-lesson .grow {font-size:.9375rem}
  html body #dic-home .dic-lesson .muted {font-size:.875rem;white-space:nowrap}
  html body .dic-warm {padding:28px 23px!important}
  html body .dic-warm-text {font-size:1.6rem!important}
  html body #mission-sugg {grid-template-columns:1fr;gap:10px}
  html body #mn-zone button {flex:1 1 115px;padding:11px 14px;font-size:.875rem}
  html body .mission-finish-heading h1 {font-size:2.4rem}
  html body #app-layout .mission-result-card {padding:26px 20px}
  html body .compare {gap:11px;margin-block:24px}
  html body .compare .cbox {padding:21px 12px;border-radius:17px}
  html body .compare .cnum {font-size:3rem}
  html body .compare .muted {font-size:.875rem!important}
  html body .mission {padding:19px 17px;flex-wrap:wrap}
  html body .mission .grow {flex-basis:100%}
  html body .mission>button {width:100%}
  html body .journey-intro {padding:23px 20px;gap:13px;align-items:flex-start;border-radius:21px}
  html body .journey-intro h2 {font-size:1.6rem}
  html body .journey-intro .detail-mark {width:44px;height:44px}
  html body .zone-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html body .zone {padding:22px 17px;min-height:135px;border-radius:19px}
  html body .zone .zcount {font-size:2.5rem}
  html body .zone .zname {font-size:.875rem}
  html body #scr-progress :is([role=tabpanel],.optional-body)>.card>h3 {font-size:1.55rem}
  html body #scr-progress :is([role=tabpanel],.optional-body)>.card>p {font-size:.875rem!important}
  html body #iceberg-wrap {padding:20px 0;border-radius:17px}
  html body .wall-compose {padding:21px 17px;border-radius:18px}
  html body .wall-compose .row {flex-direction:column}
  html body .wall-compose button {width:100%}
  html body #wall-list {grid-template-columns:1fr;gap:14px}
  html body .wall-item {padding:25px 22px}
  html body #feared-card .row {flex-wrap:wrap}
  html body #feared-input {flex-basis:100%!important}
  html body #feared-card .row>button {width:100%}
  html body .server-options {grid-template-columns:1fr;gap:11px}
  html body .safety-box {padding:28px 24px;border-radius:25px}
  html body .safety-box h2 {font-size:2.1rem}
  html body .safety-actions {flex-direction:column}
  html body .safety-actions :is(button,a) {width:100%}
  html body.auth-body .auth-form {padding:25px 24px}
  html body.auth-body .auth-inner {padding-block:30px}
  html body.auth-body .auth-inner h2 {font-size:2.7rem}
  html body.auth-body .auth-art {padding:28px 26px;min-height:auto}
}
@media(prefers-reduced-motion:reduce) {
  html body button[aria-busy=true]::before,html body .ui-state[data-state=loading] svg,html body .ui-notice[data-state=loading]::before {animation:none;border-style:dotted}
}