/* Quiet, reference-led learner screens. All colors follow the selected appearance. */
.learning-home,.learning-library { max-width:1000px; min-width:0; }
.learning-home .discovery-header { margin-bottom:26px; }
.learning-home .discovery-feed { margin-top:34px; }
.learning-header-pill { display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:9px 13px; min-height:42px; }
.learning-header-pill .icon { width:19px; height:19px; color:var(--primary); }
.learning-header-pill small { font-size:10px; color:var(--muted); }
.learning-home .discovery-header__actions { gap:8px; }
.learning-home .discovery-card { padding:16px; }
.learning-home .discovery-card__image { border-radius:20px; overflow:hidden; }
.learning-home .discovery-card__image img { aspect-ratio:1.9; object-fit:cover; }
.learning-home .discovery-card__body { padding:18px 0 0; }
.learning-home .discovery-card__body h2 { font-size:clamp(22px,3vw,30px); line-height:1.25; margin:17px 0 13px; }
.learning-home .discovery-card__body p { font-size:17px; line-height:1.6; margin:0 0 19px; }
.learning-home .discovery-card__meta { font-size:11px; }
.learning-home .discovery-start { min-height:50px; }
.learning-page-heading { display:flex; align-items:center; justify-content:space-between; margin:0 0 24px; gap:15px; }
.learning-page-heading h1 { font-size:34px; margin:0; color:var(--ink); }
.learning-page-heading .icon-btn { flex:none; }
.learning-library .search-wrap { margin-bottom:30px; }
.learning-library .search { border-radius:18px; min-height:50px; }
.learning-library-group { display:grid; gap:16px; min-width:0; }
.learning-library-group + .learning-library-group { margin-top:24px; }
.learning-library-group h2 { margin:0; color:var(--ink); font-size:22px; }
.learning-library-group>p { margin:0 0 4px; color:var(--muted); font-size:14px; }
.learning-featured>h2,.learning-shelf h2 { font-size:21px; font-weight:600; color:var(--ink); margin:0; }
.learning-featured>h2 { margin-bottom:17px; }
.learning-daily-feature { overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--surface); box-shadow:var(--shadow-sm); }
.learning-daily-feature__image { position:relative; }
.learning-daily-feature__image img { display:block; width:100%; height:auto; aspect-ratio:2.2; object-fit:cover; }
.learning-daily-label { position:absolute; top:15px; left:15px; display:flex; align-items:center; gap:8px; background:var(--primary); color:var(--button-ink); border:0; border-radius:999px; padding:8px 13px; font-size:12px; letter-spacing:.05em; }
.learning-daily-label .icon { width:17px; height:17px; }
.learning-daily-feature__body { padding:21px; }
.learning-daily-feature__body>small,.learning-shelf-card__copy>small,.learning-course-row small { color:var(--primary); text-transform:uppercase; font-size:11px; font-weight:650; letter-spacing:.08em; }
.learning-daily-feature__body h3 { font-size:25px; line-height:1.3; margin:12px 0 18px; color:var(--ink); }
.learning-daily-feature__body p { color:var(--muted); line-height:1.55; margin:0 0 17px; }
.learning-daily-feature footer { display:flex; align-items:center; justify-content:space-between; }
.learning-daily-feature footer>span { display:flex; align-items:center; gap:7px; border-radius:999px; background:var(--surface-2); padding:7px 11px; color:var(--muted); font-size:12px; }
.learning-daily-feature footer .icon { width:18px; height:18px; }
.learning-round-arrow { background:var(--primary); color:var(--button-ink); border:none; display:grid; place-items:center; border-radius:50%; width:44px; height:44px; }
.learning-shelf { margin-top:32px; min-width:0; }
.learning-shelf>header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:16px; }
.learning-shelf h2 { display:flex; gap:9px; align-items:center; min-width:0; }
.learning-shelf h2>.icon { color:var(--primary); flex:none; width:21px; height:21px; }
.learning-shelf h2>button { background:transparent; border:0; color:inherit; font:inherit; padding:0; text-align:left; }
.learning-shelf .link-btn { color:var(--primary); font-size:12px; flex:none; padding:4px 0; display:flex; gap:3px; align-items:center; }
.learning-shelf .link-btn .icon { width:16px; }
.learning-shelf-track { display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:0 0 12px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.learning-shelf-card { flex:0 0 235px; min-width:0; border:1px solid var(--line); border-radius:22px; background:var(--surface); overflow:hidden; scroll-snap-align:start; }
.learning-shelf-card__image { position:relative; }
.learning-cover-link { display:block; width:100%; padding:0; border:0; background:var(--surface-2); }
.learning-cover-link img { width:100%; height:auto; display:block; aspect-ratio:1.65; object-fit:cover; }
.learning-shelf-card .discovery-bookmark { top:10px; right:10px; width:34px; height:34px; }
.learning-shelf-card .discovery-bookmark .icon { width:18px; }
.learning-shelf-state { position:absolute; bottom:9px; left:9px; background:var(--glass); color:var(--ink); border:1px solid var(--glass-border); border-radius:999px; padding:4px 8px; display:flex; gap:4px; align-items:center; font-size:10px; }
.learning-shelf-state .icon { width:12px; height:12px; }
.learning-shelf-card__copy { padding:16px; width:100%; border:0; background:transparent; text-align:left; color:var(--ink); }
.learning-shelf-card h3 { font-size:18px; line-height:1.35; margin:10px 0 0; min-height:49px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.learning-results-count { color:var(--muted); font-size:13px; margin-bottom:18px; }
.learning-course-list { display:grid; gap:12px; }
.learning-course-row { display:flex; align-items:center; gap:15px; width:100%; min-width:0; background:var(--surface); color:var(--ink); border:1px solid var(--line); padding:12px; border-radius:22px; text-align:left; }
.learning-course-row>img { width:72px; height:76px; object-fit:cover; flex:none; border-radius:15px; }
.learning-course-row>span { flex:1; min-width:0; }
.learning-course-row strong { display:block; font-size:17px; line-height:1.35; margin:6px 0; overflow-wrap:anywhere; }
.learning-course-row em { font-style:normal; color:var(--muted); font-size:11px; }
.learning-course-row>.icon { width:18px; color:var(--muted); flex:none; }
.learning-course-row.is-locked { opacity:.74; }
.learning-course-tabs { display:flex; gap:8px; margin-bottom:22px; }
.learning-course-tabs>button { flex:1; min-height:46px; border:1px solid var(--line); border-radius:17px; background:var(--surface); color:var(--muted); font-size:14px; }
.learning-course-tabs>button[aria-selected=true] { background:var(--primary); color:var(--button-ink); border-color:var(--primary); }
.learning-empty { text-align:center; padding:40px 16px; color:var(--muted); }
.learning-empty>h2 { font-size:22px; }
.learning-finish,.learning-quiz-result,.learning-xp-summary,.learning-streak { min-height:calc(100svh - 40px); max-width:610px; display:flex; flex-direction:column; color:var(--ink); }
.learning-finish { padding-top:45px; }
.learning-finish-main { flex:1; display:flex; flex-direction:column; justify-content:center; padding:20px 0 40px; text-align:center; }
.learning-finish-cover { position:relative; width:150px; margin:0 auto 25px; }
.learning-finish-cover>img { width:150px; height:150px; border-radius:25px; object-fit:cover; box-shadow:var(--shadow-sm); display:block; }
.learning-finish-cover>span { position:absolute; bottom:-5px; right:-5px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:var(--button-ink); border:3px solid var(--bg); }
.learning-finish h1 { font-size:34px; margin:0 0 25px; }
.learning-xp-card { text-align:left; padding:20px; background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:24px; width:100%; margin:0; }
.learning-xp-card>div:first-child { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.learning-xp-card>div:first-child>span { width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:var(--primary-3); color:var(--primary); }
.learning-xp-card>div:first-child>div { flex:1; min-width:0; }
.learning-xp-card strong { color:var(--ink); font-size:17px; }
.learning-xp-card small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
.learning-xp-card b { background:var(--primary-3); color:var(--primary); border-radius:999px; padding:7px 10px; font-size:11px; white-space:nowrap; }
.learning-xp-card .lesson-xp-card__bar { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.learning-xp-card .lesson-xp-card__bar i { display:block; height:100%; background:var(--primary); border-radius:999px; }
.learning-xp-card mark,.learning-xp-pill { display:inline-flex; align-items:center; gap:6px; background:var(--primary-3); color:var(--primary); border-radius:999px; font-size:12px; padding:6px 11px; margin-top:13px; }
.learning-xp-card mark .icon,.learning-xp-pill .icon { width:15px; height:15px; }
.learning-pending { font-size:12px; color:var(--muted); line-height:1.5; text-align:center; }
.learning-finish-actions { display:flex; align-items:center; gap:13px; padding:16px 0 max(16px,env(safe-area-inset-bottom)); }
.learning-finish-actions>.btn { flex:1; }
.learning-finish-actions .icon-btn { width:52px; height:52px; }
.learning-exam { --danger:#ad4d40; --danger-soft:#f8e9e5; padding-top:22px; padding-bottom:28px; }
:root[data-theme="dark"] .learning-exam { --danger:#f1a29b; --danger-soft:#382025; }
.learning-exam-top { margin-bottom:22px; }
.learning-exam-top>.icon-btn { margin-bottom:18px; width:40px; height:40px; background:var(--surface); color:var(--muted); }
.learning-exam-progress { display:flex; gap:12px; align-items:center; }
.learning-exam-progress>div { height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; flex:1; }
.learning-exam-progress>div>span { height:100%; display:block; background:var(--primary); border-radius:999px; transition:width .3s ease; }
.learning-exam-progress>small { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.learning-question-card { padding:21px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow-sm); margin-bottom:22px; }
.learning-category-pill { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:999px; background:var(--primary-3); color:var(--primary); padding:6px 10px; font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.learning-category-pill .icon { width:14px; height:14px; }
.learning-question-card h1 { font-size:23px; line-height:1.4; margin:16px 0 0; letter-spacing:-.45px; color:var(--ink); }
.learning-exam .quiz-options { display:grid; gap:11px; }
.learning-exam .quiz-option { min-height:62px; padding:14px; border-radius:20px; display:flex; align-items:center; gap:13px; background:var(--surface); color:var(--ink); border:1px solid var(--line); text-align:left; font-size:16px; box-shadow:none; transform:none; }
.learning-exam .quiz-option__letter { flex:none; width:34px; height:34px; border-radius:50%; background:var(--primary-3); color:var(--primary); display:grid; place-items:center; font-size:14px; }
.learning-exam .quiz-option>span:nth-child(2) { flex:1; line-height:1.4; }
.learning-exam .quiz-option>.icon { width:20px; height:20px; flex:none; }
.learning-exam .quiz-option.is-correct { background:var(--success-soft); border:2px solid var(--success); color:var(--success); opacity:1; }
.learning-exam .quiz-option.is-wrong { background:var(--danger-soft); border:2px solid var(--danger); color:var(--danger); opacity:1; }
.learning-exam .quiz-option.is-correct .quiz-option__letter { background:var(--success); color:white; }
.learning-exam .quiz-option.is-wrong .quiz-option__letter { background:var(--danger); color:white; }
.learning-exam .quiz-option.is-muted { opacity:.55; }
.learning-answer-footer { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:18px; margin-top:26px; animation:learning-rise .28s ease both; }
.learning-answer-footer .answer-feedback { background:transparent; border:0; padding:0; margin:0 0 17px; }
.learning-answer-footer .answer-feedback__title { font-size:16px; }
.learning-answer-footer .answer-feedback p { font-size:14px; color:var(--muted); line-height:1.5; margin:10px 0 0; }
.learning-boolean-options { grid-template-columns:1fr 1fr; }
.learning-exam .learning-boolean-options>.quiz-option { display:flex; flex-direction:column; min-height:120px; justify-content:center; }
.learning-number-card { background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:25px 20px; }
.learning-number-card output { display:block; text-align:center; font-size:44px; font-weight:600; color:var(--ink); margin:0 0 28px; }
.learning-number-card input[type=range] { width:100%; accent-color:var(--primary); min-height:30px; }
.learning-number-limits { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin:8px 0 25px; }
.learning-number-comparison { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.learning-number-comparison>div { text-align:center; padding:13px; border-radius:17px; background:var(--surface-2); }
.learning-number-comparison small { display:block; color:var(--muted); font-size:10px; margin-bottom:5px; }
.learning-number-comparison strong { font-size:20px; color:var(--primary); }
.learning-number-comparison>div:last-child strong { color:var(--success); }
.learning-quiz-result { text-align:center; justify-content:center; padding-top:40px; padding-bottom:40px; }
.learning-result-ring { position:relative; border-radius:50%; width:160px; height:160px; display:grid; place-items:center; margin:0 auto 24px; animation:learning-rise .4s ease both; }
.learning-result-ring__svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.learning-result-ring__svg circle { fill:none; stroke-width:7; }
.learning-result-ring__track { stroke:var(--surface-2); }
.learning-result-ring__progress { stroke:var(--primary); stroke-linecap:round; stroke-dasharray:100; animation:learning-ring-fill .9s cubic-bezier(.2,.65,.3,1) both; }
.learning-result-ring>span { width:125px; height:125px; background:var(--bg); border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 10px var(--primary-3); }
.learning-result-ring .icon { width:48px; height:48px; color:var(--primary); }
.learning-quiz-result h1 { font-size:28px; margin:0 0 22px; }
.learning-result-count { font-size:24px; color:var(--muted); }
.learning-result-count>strong { font-size:48px; color:var(--ink); margin-right:7px; }
.learning-quiz-result>p { margin:10px 0 13px; color:var(--muted); }
.learning-result-summary { display:flex; justify-content:center; gap:18px; color:var(--muted); font-size:12px; }
.learning-quiz-result>.learning-xp-pill { align-self:center; margin-top:16px; }
.learning-result-stars { display:flex; gap:15px; justify-content:center; margin:25px 0 38px; }
.learning-result-stars .icon { width:31px; height:31px; color:var(--line); }
.learning-result-stars .is-earned .icon { fill:var(--primary); color:var(--primary); }
.learning-result-stars .is-earned { animation:learning-star .45s ease backwards; animation-delay:calc(var(--star-order)*100ms); }
.learning-result-actions { display:grid; gap:12px; }
.learning-xp-summary { text-align:center; padding-top:40px; padding-bottom:25px; gap:20px; justify-content:center; }
.learning-xp-summary>.learning-category-pill { align-self:center; }
.learning-xp-summary .learning-finish-cover { margin:0 auto; }
.learning-xp-summary h1 { font-size:27px; margin:0; }
.learning-summary-value { font-size:20px; color:var(--muted); }
.learning-summary-value strong { font-size:39px; color:var(--ink); }
.learning-reward-rows { display:grid; gap:10px; }
.learning-reward-rows>div { display:flex; gap:12px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:20px; background:var(--surface); text-align:left; font-size:14px; }
.learning-reward-rows>div>.icon { color:var(--primary); width:22px; height:22px; }
.learning-reward-rows>div>span { flex:1; }
.learning-reward-rows strong { color:var(--primary); font-size:13px; }
.learning-streak { text-align:center; align-items:center; padding-top:40px; padding-bottom:25px; justify-content:space-around; gap:20px; }
.learning-streak-flame { width:125px; height:125px; border-radius:50%; background:var(--primary-3); color:var(--primary); display:grid; place-items:center; animation:learning-star .5s ease; }
.learning-streak-flame .icon { width:62px; height:62px; fill:var(--primary); }
.learning-streak-number { font-size:68px; margin-bottom:-20px; }
.learning-streak h1 { font-size:23px; margin:0; }
.learning-streak>p { color:var(--muted); font-size:15px; line-height:1.6; margin:0; }
.learning-streak-week { display:flex; justify-content:space-between; width:100%; gap:5px; }
.learning-streak-week>div { display:grid; justify-items:center; gap:11px; }
.learning-streak-week small { font-size:10px; color:var(--muted); }
.learning-streak-week span { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:var(--primary-3); }
.learning-streak-week .is-active { color:var(--button-ink); background:var(--primary); }
.learning-streak-week .icon { width:18px; height:18px; }
.learning-streak-note { font-size:15px; font-weight:550; }
.learning-streak>.btn { align-self:stretch; }
.learning-timeline { list-style:none; padding:22px; margin:28px 0; background:var(--surface); border:1px solid var(--line); border-radius:25px; }
.learning-timeline li { position:relative; border-left:1px solid var(--line); padding:0 0 23px 18px; margin:0; }
.learning-timeline li:last-child { padding-bottom:0; border-color:transparent; }
.learning-timeline li:before { content:''; position:absolute; top:3px; left:-4px; width:7px; height:7px; background:var(--primary); border-radius:50%; }
.learning-timeline time { display:block; color:var(--primary); font-size:14px; margin-bottom:4px; }
.learning-timeline strong { display:block; color:var(--ink); font-size:17px; }
.learning-timeline p { color:var(--muted); font-size:14px; line-height:1.5; margin:7px 0 0; }
.page--reader .reader__title { font-size:clamp(29px,4vw,38px); line-height:1.2; }
.page--reader .reader__lead { font-size:18px; font-weight:500; }
.page--reader .reader__body { font-size:17px; line-height:1.75; }
.page--reader .extra-disclosure { background:var(--surface); border-radius:25px; }
@keyframes learning-rise { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes learning-star { 0% { opacity:0; transform:scale(.75); } 70% { transform:scale(1.08); } 100% { opacity:1; transform:scale(1); } }
@keyframes learning-ring-fill { from { stroke-dashoffset:100; } }

/* The reader is a quiet page, not a card nested inside another card. */
.page--reader .reader-intro { margin-bottom:24px; }
.reader-intro__category { display:inline-block; color:var(--primary); font-size:12px; font-weight:650; letter-spacing:.08em; margin-bottom:12px; }
.page--reader .reader__course-title { margin:0; overflow-wrap:anywhere; text-wrap:balance; }
.page--reader .reader__section-title { color:var(--ink); font-size:clamp(23px,3vw,29px); line-height:1.3; margin:0 0 20px; text-wrap:balance; }
.reader-course-context { color:var(--muted); font-size:12px; line-height:1.5; margin:0 0 12px; }
.page--reader .reader__body { text-align:start; }
.page--reader .reader__body p { letter-spacing:.005em; overflow-wrap:break-word; }
.page--reader .reader-paragraph { margin-bottom:26px; }
.reader-diagram { border:1px solid var(--line); border-radius:22px; background:var(--surface); padding:20px; margin:28px 0; color:var(--ink); }
.reader-diagram h2 { font-size:12px; font-weight:650; letter-spacing:.04em; color:var(--primary); margin:0 0 16px; }
.reader-diagram ul,.reader-diagram ol { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.reader-diagram li { min-width:0; padding:14px; border-radius:14px; background:var(--surface-2); }
.reader-diagram strong { font-size:15px; line-height:1.4; }
.reader-diagram p { color:var(--muted); font-size:14px; line-height:1.65; margin:6px 0 0; }
.reader-diagram--steps ol { counter-reset:reader-step; }
.reader-diagram--steps li { counter-increment:reader-step; position:relative; padding-inline-start:46px; }
.reader-diagram--steps li::before { content:counter(reader-step); position:absolute; inset-inline-start:14px; top:14px; width:22px; height:22px; display:grid; place-items:center; background:var(--primary-3); color:var(--primary); border-radius:50%; font-size:12px; font-weight:650; }
@media(min-width:600px) { .reader-diagram--compare ul { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:360px) { .reader-diagram { padding:16px; } .page--reader .reader__course-title { font-size:28px; } }
.page--reader .reader { margin:24px 0 0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.page--reader .reader-head { background:var(--bg); }
.page--reader .reader__figure { margin:0 0 27px; border-radius:23px; background:var(--surface); }
.page--reader .reader__image { width:100%; height:auto; max-height:none; aspect-ratio:1.7; object-fit:cover; }
.page--reader .reader__figure figcaption { font-size:9px; background:var(--surface); }
.page--reader .reader__lead { color:var(--muted); font-weight:400; line-height:1.55; }
.page--reader .reader__body p { font-size:17px; line-height:1.8; color:var(--ink); }
.page--reader .reader__body strong { font-weight:650; }
.page--reader .reader-attention { padding:22px; border-radius:25px; background:var(--primary-3); display:block; }
.page--reader .reader-attention>.icon { display:none; }
.page--reader .reader-attention strong { font-size:12px; margin-bottom:12px; }
.page--reader .reader-attention p { color:var(--ink); font-size:17px; line-height:1.65; }
.is-reading .view { animation:none; transform:none; }
.is-exam .view { animation:none; transform:none; }
.learning-answer-footer .answer-feedback.is-near .answer-feedback__title>.icon { background:var(--primary); }
.answer-feedback.is-correct .answer-feedback__title>.icon { animation:answer-check .42s ease-out; }
.answer-feedback.is-wrong .answer-feedback__title>.icon { animation:answer-shake .32s ease-out; }
.answer-feedback.is-near .answer-feedback__title>.icon { animation:answer-near .55s ease-out; }
.review-option.is-correct,.quiz-option.is-correct { animation:answer-check .38s ease-out; }
@keyframes answer-check { 0% { transform:scale(.78); } 65% { transform:scale(1.06); } 100% { transform:scale(1); } }
@keyframes answer-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
@keyframes answer-near { 0% { transform:scale(.8); } 60% { transform:scale(1.08); } 100% { transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .answer-feedback .answer-feedback__title>.icon,.review-option.is-correct,.quiz-option.is-correct { animation:none; } }
.page--reader { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
.page--reader .reader-actions--sticky { margin:28px 0 0; padding:14px 0 max(14px,env(safe-area-inset-bottom)); bottom:0; background:var(--bg); }
.page--reader .reader-actions--sticky .btn { min-height:54px; border-radius:999px; }
.page--reader .extra-disclosure__toggle { min-height:76px; padding:18px; }
.page--reader .extra-disclosure__toggle strong { display:block; font-size:13px; }
.page--reader .extra-disclosure__toggle small { display:block; text-align:left; font-size:12px; color:var(--muted); margin-top:4px; }
.page--reader .extra-disclosure__toggle>span>i { width:40px; height:40px; border-radius:50%; }
.page--reader .extra-disclosure__inner p { font-size:16px; line-height:1.75; }

/* Authored story lessons: a clear reading rhythm, with images inside the narrative. */
.page--reader-story .reader { margin-top:28px; }
.page--reader-story .reader-head { margin-inline:0; padding-inline:0; }
.page--reader-story .reader__title { font-size:clamp(28px,4.5vw,38px); line-height:1.2; font-weight:600; letter-spacing:-.025em; margin:0 0 24px; text-wrap:balance; }
.page--reader-story .reader__course-title { margin:0; }
.page--reader-story .reader-intro { margin-bottom:14px; }
.page--reader-story .reader-intro__category { margin-bottom:12px; letter-spacing:.1em; }
.page--reader-story .reader__lead { font-size:clamp(18px,2.8vw,21px); line-height:1.55; margin:0 0 26px; }
.page--reader-story .reader__body p { font-size:17px; line-height:1.75; letter-spacing:0; }
.page--reader-story .reader-paragraph { margin-bottom:26px; }
.page--reader-story .reader__figure { margin:4px 0 28px; overflow:hidden; border:1px solid var(--line); border-radius:20px; }
.page--reader-story .reader__image { display:block; aspect-ratio:1.6; object-fit:cover; }
.page--reader-story .reader__figure--document { background:#eee5d5; }
.page--reader-story .reader__figure--document .reader__image { aspect-ratio:auto; height:420px; max-height:65svh; object-fit:contain; }
.page--reader-story .extra-disclosure { margin-block:28px; }
.page--reader-story .reader-attention { margin-top:28px; }
.page--reader-story .reader-attention strong { text-transform:uppercase; letter-spacing:.08em; }
.page--reader-story .reader-attention p { font-weight:550; }
@media(min-width:600px) { .page--reader-story .reader__body p { font-size:18px; } }

.learning-featured-track { position:relative; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; padding-bottom:4px; }
.learning-featured-track::-webkit-scrollbar { display:none; }
.learning-featured-track>.learning-daily-feature { flex:0 0 100%; min-width:0; max-width:none; scroll-snap-align:start; display:flex; flex-direction:column; }
.learning-featured-track .learning-daily-feature__body { flex:1; display:flex; flex-direction:column; }
.learning-featured-track .learning-daily-feature__body p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.learning-featured-track .learning-daily-feature__body h3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.learning-featured-track .learning-daily-feature__body footer { margin-top:auto; }
.learning-featured-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:9px; }
.learning-featured-controls>.icon-btn { width:34px; height:34px; color:var(--muted); background:transparent; border:0; }
.learning-featured-controls>.icon-btn:disabled { opacity:.3; cursor:default; }
.learning-featured-dots { display:flex; gap:1px; align-items:center; }
.learning-featured-dots>button { width:30px; height:32px; display:grid; place-items:center; background:transparent; border:0; padding:0; }
.learning-featured-dots span { display:block; width:6px; height:6px; background:var(--line); border-radius:999px; transition:width .2s ease,background .2s ease; }
.learning-featured-dots [aria-current=true] span { width:22px; background:var(--primary); }
.learning-level-up { display:flex; align-items:center; justify-content:center; gap:7px; margin:14px 0 0; padding:10px; border:0; border-radius:14px; background:var(--primary-3); color:var(--primary); font-size:12px; font-weight:600; animation:none; }
.learning-level-up .icon { width:17px; height:17px; }
.learning-xp-summary .learning-xp-card { background:transparent; border:0; padding:0; box-shadow:none; }
.learning-xp-summary .learning-xp-card>div:first-child { margin-bottom:10px; }
.learning-xp-summary .learning-xp-card>div:first-child>span,.learning-xp-summary .learning-xp-card>div:first-child strong,.learning-xp-summary .learning-xp-card mark { display:none; }
.learning-xp-summary .learning-xp-card small { font-size:12px; margin:0; }
.learning-xp-summary .learning-level-up { padding:7px; margin-top:9px; }
.learning-exam { display:flex; flex-direction:column; min-height:calc(100svh - 40px); }
.learning-answer-footer { position:sticky; z-index:12; bottom:0; margin:28px -18px -28px; padding:18px 18px max(18px,env(safe-area-inset-bottom)); border-radius:0; border-inline:0; border-bottom:0; background:var(--surface); box-shadow:0 -8px 22px color-mix(in srgb,var(--ink) 4%,transparent); }
.learning-answer-footer .btn { border-radius:999px; }
.learning-answer-footer .answer-feedback__title { display:flex; align-items:center; gap:10px; color:var(--ink); }
.learning-answer-footer .answer-feedback__title>.icon { width:27px; height:27px; padding:5px; border-radius:50%; background:var(--success); color:var(--surface); }
.learning-answer-footer .is-wrong .answer-feedback__title>.icon { background:var(--danger); }
@media(min-width:761px) { .learning-featured { max-width:680px; } .learning-answer-footer { margin-inline:-24px; padding-inline:24px; } }
@media(max-width:760px) { .page--reader .reader-actions--sticky { position:fixed; left:50%; transform:translateX(-50%); width:calc(100% - 36px); max-width:562px; margin:0; z-index:21; } }
@media(max-width:760px) {
  .learning-exam,.learning-finish,.learning-quiz-result,.learning-xp-summary,.learning-streak,.learning-courses { width:calc(100% + 32px); max-width:none; margin-inline:-16px; }
  .learning-courses { padding-inline:20px; }
  .learning-exam.has-answer { padding-bottom:290px; }
  .learning-answer-footer { position:fixed; left:0; right:0; bottom:0; width:auto; margin:0; padding:18px 18px max(18px,env(safe-area-inset-bottom)); }
  .learning-answer-footer .answer-feedback p { max-height:6.5em; overflow-y:auto; }
}
@media(prefers-reduced-motion:reduce) { .learning-result-ring__progress { animation:none; } .learning-featured-dots span { transition:none; } }
@media(min-width:900px) { .learning-home .discovery-feed { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; } .learning-home .discovery-card { margin:0; } .learning-home .discovery-card__body h2 { font-size:23px; } .learning-home .discovery-card__body p { font-size:15px; } .learning-daily-feature { max-width:680px; } }
@media(max-width:760px) { .learning-home,.learning-library { padding-inline:0; } .learning-home .discovery-feed { display:block; } .learning-home .discovery-card { width:100%; max-width:100%; margin-bottom:28px; } .learning-home .discovery-header { gap:8px; } .learning-home .discovery-brand strong { font-size:21px; } .learning-home .discovery-brand { gap:8px; } .learning-home .brand-mark { width:30px; height:30px; } .learning-home .discovery-header__actions { gap:6px; } .learning-header-pill { padding:8px 10px; } .learning-header-pill .icon { width:16px; } .learning-shelf-card { flex-basis:clamp(156px,44vw,230px); } .learning-shelf h2 { font-size:18px; } .learning-shelf .link-btn { font-size:11px; } .learning-daily-feature__body h3 { font-size:23px; } .learning-finish,.learning-quiz-result,.learning-xp-summary,.learning-streak { min-height:calc(100svh - 20px); padding-inline:20px; } .learning-question-card h1 { font-size:21px; } .learning-exam { padding-inline:18px; } }
@media(max-width:360px) { .learning-header-pill small { display:none; } .learning-shelf h2 { font-size:16px; } .learning-shelf h2>.icon { width:16px; } .learning-course-row>img { width:60px; height:66px; } .learning-course-row strong { font-size:15px; } .learning-course-tabs>button { font-size:12px; } .learning-exam .quiz-option { font-size:15px; } .learning-question-card h1 { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { .learning-result-ring,.learning-result-stars .is-earned,.learning-streak-flame,.learning-answer-footer { animation:none; } .learning-exam-progress>div>span { transition:none; } }