@charset "UTF-8";

:root {
  --paper: #f4f2f7;
  --surface: #fff;
  --ink: #202839;
  --muted: #696670;
  --line: #e0dde6;
  --violet: #6548ac;
  --violet-dark: #4f368e;
  --lilac: #e8e2ff;
  --mint: #e2dcee;
  --green: #3a295c;
  --peach: #f5e2d2;
  --yellow: #f0eabf;
  --radius: 22px;
  --shadow: 0 10px 40px rgb(32 40 57 / 5%);
  font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; }
button, input, select, textarea { font:inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
a { color:inherit; text-decoration:none; }
a.text-link, .text-link { color:var(--violet); text-decoration:underline; text-underline-offset:3px; }
button, input, select, textarea, a { outline-offset:4px; }
:focus-visible { outline:3px solid var(--focus); }
img, svg { max-width:100%; }
svg { display:inline-block; vertical-align:middle; flex-shrink:0; }
button svg, .nav-link svg, .button svg { width:19px; height:19px; }
h1, h2, h3, h4, p { margin-top:0; }
h1, h2, h3, h4 { letter-spacing:-.04em; }
p { line-height:1.65; }
ul, ol { line-height:1.65; }
small { line-height:1.5; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:12px 20px; background:var(--ink); color:var(--on-brand); transform:translateY(-150%); border-radius:8px; }
.skip-link:focus { transform:translateY(0); }
.demo-banner { min-height:31px; display:flex; justify-content:center; align-items:center; gap:8px; background:var(--surface-raised); color:var(--ink); text-align:center; padding:7px 18px; font-size:10px; font-weight:550; line-height:1.45; letter-spacing:.015em; border-bottom:1px solid var(--line); }
.app-shell { display:grid; grid-template-columns:224px minmax(0, 1fr); min-height:calc(100vh - 31px); }
.sidebar { display:flex; flex-direction:column; padding:30px 20px 22px; background:var(--surface); border-right:1px solid var(--line); height:calc(100vh - 31px); position:sticky; top:0; align-self:start; }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:23px; letter-spacing:-.065em; padding:0 12px; }
.brand-mark { width:30px; height:32px; display:grid; place-items:center; background:var(--ink); color:var(--on-brand); border-radius:9px; transform:rotate(-5deg); font-size:25px; line-height:1; font-weight:500; }
.brand-mark svg { width:21px; height:21px; }
.brand span:last-child { display:inline-block; }
.brand small { font-size:10px; font-weight:550; letter-spacing:.06em; text-transform:uppercase; }
.nav { display:flex; flex-direction:column; gap:7px; margin-top:54px; }
.nav-label { padding:0 15px; margin:24px 0 5px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.nav-link { display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; border-radius:11px; font-weight:550; font-size:12px; color:var(--muted); background:transparent; border:1px solid transparent; text-align:left; transition:background .18s, color .18s; }
.nav-link svg { width:18px; height:18px; stroke-width:1.8; }
.nav-link:hover { background:var(--surface-raised); color:var(--ink); }
.nav-link.active { background:var(--surface-soft); color:var(--ink); border-color:var(--line); }
.nav-link .badge { margin-left:auto; min-height:19px; padding:1px 6px; font-size:10px; }
.sidebar-bottom { margin-top:auto; padding:42px 9px 0; }
.sidebar-note { background:var(--surface-soft); padding:17px 14px; border-radius:13px; font-size:11px; line-height:1.55; color:var(--ink); }
.sidebar-note strong { display:block; margin-bottom:6px; color:var(--ink); font-size:12px; }
.sidebar-bottom > small, .sidebar-bottom > p { display:block; color:var(--muted); font-size:10px; line-height:1.65; margin:16px 2px 0; }
.main-wrap { min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:85px; padding:16px 40px; border-bottom:1px solid var(--line); background:var(--glass); }
.breadcrumb { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; }
.breadcrumb > span:last-child { color:var(--ink); font-weight:600; }
.topbar-actions { display:flex; align-items:center; gap:16px; }
.topbar-actions .button { font-size:11px; min-height:36px; }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; background:var(--surface-soft); color:var(--ink); font-size:11px; font-weight:700; flex-shrink:0; }
.user-name { font-size:11px; font-weight:600; }
.page { max-width:1450px; padding:35px 40px 55px; margin:0 auto; animation:enter .28s ease-out; }
.page-heading { display:flex; align-items:flex-end; gap:18px; justify-content:space-between; margin-bottom:29px; }
.eyebrow { color:var(--ink); font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:10px; line-height:1.4; }
.page-title { font-size:clamp(27px, 3vw, 38px); font-weight:650; line-height:1.15; margin-bottom:10px; letter-spacing:-.055em; }
.page-heading .muted { margin-bottom:0; font-size:12px; max-width:620px; }
.muted { color:var(--muted); }
.text-small { font-size:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:43px; padding:11px 18px; border:1px solid transparent; border-radius:9px; font-size:12px; font-weight:650; line-height:1.3; letter-spacing:-.01em; text-align:center; transition:transform .15s, background .15s, box-shadow .15s; }
.button:hover { transform:translateY(-1px); }
.button:active { transform:translateY(0); }
.button.primary, button.primary, a.primary { background:var(--ink); color:var(--on-brand); border-color:var(--ink); }
.button.primary:hover { background:var(--accent-fill); box-shadow:0 5px 12px var(--shadow-color); }
.button.secondary, button.secondary, a.secondary { background:var(--surface); color:var(--ink); border-color:var(--line); }
.button.secondary:hover { background:var(--surface-raised); }
.button.ghost, button.ghost, a.ghost { color:var(--ink); background:transparent; border-color:transparent; }
.button.ghost:hover { background:var(--surface-soft); }
.button.small { min-height:33px; padding:8px 12px; font-size:11px; border-radius:7px; }
.button.danger { color:var(--ink); background:var(--surface-raised); border-color:var(--line); }
.button.wide, .wide { width:100%; }
.button.icon-button { width:38px; min-height:38px; padding:9px; border:1px solid var(--line); background:var(--surface); }
.hero { display:grid; grid-template-columns:1.07fr 1fr; position:relative; overflow:hidden; min-height:350px; background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--radius); }
.hero-copy { padding:38px 40px 31px; position:relative; z-index:2; }
.hero-pill { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:30px; padding:6px 10px; color:var(--ink); font-size:9px; line-height:1.3; font-weight:650; letter-spacing:.035em; margin-bottom:21px; }
.hero-pill::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-fill); }
.hero-title { max-width:440px; font-weight:650; font-size:clamp(32px, 3.6vw, 49px); letter-spacing:-.065em; line-height:1.08; margin-bottom:17px; }
.hero-title em { font-style:normal; color:var(--muted); }
.hero-subtitle { color:var(--muted); font-size:12px; line-height:1.75; max-width:345px; margin-bottom:22px; }
.hero-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero-actions .button.secondary { background:transparent; border-color:var(--line-strong); }
.hero-footnote { margin:13px 0 0; color:var(--muted); font-size:9px; line-height:1.55; }
.hero-visual { position:relative; min-height:330px; overflow:hidden; isolation:isolate; }
.orbit { position:absolute; left:49%; top:50%; width:275px; height:275px; border:1px solid var(--line); border-radius:50%; transform:translate(-50%, -50%); }
.orbit-one { width:365px; height:365px; }
.orbit-two { width:445px; height:445px; opacity:.7; }
.hero-visual::before { content:""; position:absolute; width:190px; height:190px; left:48%; top:49%; transform:translate(-50%, -50%); border-radius:50%; background:var(--surface-soft); box-shadow:0 0 70px var(--shadow-color); z-index:-1; }
.art-cross { position:absolute; width:122px; height:122px; left:48%; top:48%; transform:translate(-50%, -50%) rotate(-12deg); filter:drop-shadow(0 16px 10px var(--shadow-color)); }
.art-cross::before, .art-cross::after { content:""; position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:13px; }
.art-cross::before { width:45px; height:122px; left:39px; top:0; }
.art-cross::after { width:122px; height:45px; left:0; top:39px; }
.art-cross > svg { width:100%; height:100%; }
.art-card { position:absolute; background:var(--glass); border:1px solid var(--line); box-shadow:0 10px 28px var(--shadow-color); border-radius:15px; padding:15px; font-size:10px; line-height:1.5; width:165px; }
.art-card-one { top:45px; left:7%; transform:rotate(-9deg); }
.art-card-two { bottom:43px; right:3%; transform:rotate(7deg); width:174px; }
.art-card strong { display:block; font-size:12px; margin:8px 0 3px; letter-spacing:-.03em; }
.art-card p { margin-bottom:0; color:var(--muted); font-size:9px; line-height:1.6; }
.art-card svg { width:23px; height:23px; color:var(--muted); }
.art-card .mini-progress { height:5px; border-radius:10px; background:var(--surface-raised); margin-top:10px; overflow:hidden; }
.art-card .mini-progress::before { content:""; display:block; width:68%; height:100%; background:var(--accent-fill); border-radius:inherit; }
.art-spark { position:absolute; width:30px; height:30px; border-radius:50%; background:var(--accent-fill); top:70%; left:17%; display:grid; place-items:center; color:var(--ink); font-size:18px; }
.art-caption { position:absolute; bottom:24px; left:26px; color:var(--muted); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:33px 0 18px; }
.section-header h2 { font-size:21px; font-weight:650; letter-spacing:-.045em; margin:0 0 5px; }
.section-header p { font-size:11px; color:var(--muted); margin:0; }
.section-header > a, .section-header > .button { font-size:11px; }
.catalog-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:17px; }
.module-card { overflow:hidden; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.module-card:hover { transform:translateY(-3px); box-shadow:0 8px 25px var(--shadow-color); }
.module-art { display:flex; align-items:center; justify-content:center; position:relative; height:133px; background:var(--lilac); color:var(--muted); overflow:hidden; }
.module-art::before { content:""; width:115px; height:115px; border:1px solid currentColor; opacity:.13; position:absolute; border-radius:50%; }
.module-art::after { content:""; width:164px; height:164px; border:1px solid currentColor; opacity:.11; position:absolute; border-radius:50%; }
.module-icon { width:62px; height:62px; display:grid; place-items:center; position:relative; z-index:1; border:1px solid var(--line); border-radius:17px; background:var(--glass); transform:rotate(-8deg); }
.module-icon svg { width:35px; height:35px; stroke-width:1.45; transform:rotate(8deg); }
.module-number { position:absolute; top:14px; left:15px; color:currentColor; font-size:9px; letter-spacing:.07em; opacity:.8; }
.module-tag { position:absolute; bottom:12px; right:12px; padding:4px 7px; border-radius:5px; background:var(--glass); font-size:8px; font-weight:600; }
[data-theme="sale"] .module-art, .module-art[data-theme="sale"] { background:var(--surface-soft); color:var(--ink); }
[data-theme="lilac"] .module-art, .module-art[data-theme="lilac"] { background:var(--surface-soft); color:var(--muted); }
[data-theme="mint"] .module-art, .module-art[data-theme="mint"] { background:var(--surface-soft); color:var(--ink); }
[data-theme="peach"] .module-art, .module-art[data-theme="peach"] { background:var(--surface-soft); color:var(--muted); }
.module-body { padding:18px 16px 15px; display:flex; flex-direction:column; flex:1; }
.module-title { font-size:15px; font-weight:650; line-height:1.3; letter-spacing:-.035em; margin:0 0 9px; min-height:39px; }
.module-description { color:var(--muted); font-size:10px; line-height:1.7; margin:0 0 16px; }
.module-meta { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:var(--muted); font-size:9px; margin-top:auto; }
.module-meta span { display:inline-flex; gap:4px; align-items:center; }
.module-meta svg { width:12px; height:12px; }
.module-footer { margin-top:15px; border-top:1px solid var(--line); padding-top:13px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.module-footer .price { font-size:16px; font-weight:650; letter-spacing:-.04em; }
.module-footer .price small { font-weight:400; color:var(--muted); font-size:9px; letter-spacing:0; }
.module-footer .button { min-height:32px; padding:7px 10px; font-size:9px; }
.module-card .progress-track { margin-top:12px; }
.module-card .badge { margin-bottom:8px; align-self:flex-start; }
.panel { border:1px solid var(--line); background:var(--surface); padding:25px; border-radius:17px; min-width:0; }
.panel h2 { font-size:20px; font-weight:650; margin-bottom:16px; }
.panel h3 { font-size:16px; font-weight:650; }
.panel > p { font-size:12px; }
.panel + .panel { margin-top:18px; }
.stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:15px; margin-bottom:26px; }
.stat-card { border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:20px; min-width:0; }
.stat-card .stat-icon { display:grid; place-items:center; width:33px; height:33px; border-radius:10px; background:var(--surface-raised); color:var(--muted); margin-bottom:16px; }
.stat-card .stat-icon svg { width:18px; height:18px; }
.stat-card strong, .stat-value { display:block; font-size:27px; line-height:1.2; font-weight:650; letter-spacing:-.055em; margin-bottom:5px; }
.stat-card > span, .stat-label { color:var(--muted); font-size:10px; }
.stat-card > p { color:var(--muted); font-size:10px; margin:7px 0 0; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(260px, 1fr); gap:21px; }
.dashboard-grid .panel + .panel { margin-top:0; }
.learning-card { display:flex; align-items:center; gap:15px; padding:17px 0; border-bottom:1px solid var(--line); }
.learning-card:last-child { border-bottom:0; padding-bottom:0; }
.learning-card:first-child { padding-top:0; }
.learning-card .module-icon { width:43px; height:43px; border-radius:12px; background:var(--surface-raised); color:var(--muted); transform:none; }
.learning-card .module-icon svg { width:23px; height:23px; transform:none; }
.learning-card > div:nth-child(2) { flex:1; min-width:0; }
.learning-card h3 { font-size:13px; line-height:1.4; margin:0 0 5px; }
.learning-card p { font-size:10px; color:var(--muted); margin:0 0 7px; }
.progress-track { height:5px; overflow:hidden; border-radius:20px; background:var(--surface-soft); }
.progress-track > span { display:block; height:100%; background:var(--accent-fill); border-radius:inherit; transition:width .35s; min-width:0; }
.progress-caption { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:7px; }
.badge, .pill { display:inline-flex; align-items:center; gap:5px; font-size:9px; line-height:1.4; font-weight:600; border-radius:30px; padding:5px 9px; background:var(--surface-raised); color:var(--muted); width:fit-content; }
.badge.success, .pill.success { background:var(--surface-soft); color:var(--ink); }
.badge.warning, .pill.warning { background:var(--surface-raised); color:var(--muted); }
.badge.neutral, .pill.neutral { background:var(--surface-raised); color:var(--muted); }
.badge.danger { background:var(--surface-raised); color:var(--muted); }
.lesson-layout { display:grid; grid-template-columns:235px minmax(0, 1fr); align-items:start; gap:24px; }
.lesson-path { background:var(--surface); border:1px solid var(--line); padding:22px 17px; border-radius:17px; position:sticky; top:20px; }
.lesson-path h2 { font-size:14px; line-height:1.45; margin-bottom:20px; }
.lesson-path .unit-title { color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; margin:20px 0 10px; }
.path-item { display:flex; align-items:flex-start; gap:10px; width:100%; border:1px solid transparent; background:transparent; border-radius:10px; padding:12px 9px; font-size:11px; color:var(--muted); text-align:left; line-height:1.5; }
.path-item + .path-item { margin-top:4px; }
.path-item.active { background:var(--surface-raised); color:var(--ink); border-color:var(--line); }
.path-item.done { color:var(--ink); }
.path-item > .path-dot { display:grid; place-items:center; width:23px; height:23px; background:var(--surface-raised); border:1px solid var(--line); border-radius:50%; flex-shrink:0; font-size:9px; }
.path-item.active > .path-dot { background:var(--accent-fill); color:var(--on-brand); border-color:var(--line-strong); }
.path-item.done > .path-dot { background:var(--surface-soft); color:var(--ink); border-color:var(--line); }
.path-item small { display:block; color:var(--muted); font-size:9px; margin-top:2px; }
.lesson-stage { min-width:0; }
.lesson-stage .stage-header { margin-bottom:22px; }
.lesson-stage h2 { font-size:26px; font-weight:650; line-height:1.25; margin-bottom:12px; }
.lesson-stage h3 { font-size:17px; font-weight:600; }
.lesson-stage > p, .lesson-stage .lesson-intro p { color:var(--muted); font-size:12px; line-height:1.8; }
.lesson-stage .panel { margin-bottom:20px; }
.flashcard { display:flex; align-items:center; justify-content:center; text-align:center; width:100%; min-height:255px; padding:37px; border:1px solid var(--line); border-radius:20px; color:var(--ink); background:var(--surface-raised); position:relative; cursor:pointer; transition:background .25s, transform .25s; }
.flashcard:hover { transform:translateY(-2px); }
.flashcard.flipped { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
.card-front, .card-back { display:flex; flex-direction:column; align-items:center; width:100%; }
.card-front h3, .card-back h3, .flashcard strong { font-size:22px; line-height:1.45; font-weight:600; max-width:500px; margin:13px 0; letter-spacing:-.035em; }
.flashcard p { max-width:520px; margin:10px 0; font-size:16px; line-height:1.7; }
.flashcard small { color:inherit; font-size:10px; opacity:.82; }
.flashcard .card-label { font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.card-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin:17px 0; flex-wrap:wrap; }
.card-counter { text-align:center; color:var(--muted); font-size:10px; margin:12px 0; }
.answer-options { display:grid; gap:10px; margin:21px 0; }
.answer-option { display:flex; align-items:center; gap:12px; width:100%; padding:15px 17px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:11px; text-align:left; font-size:12px; line-height:1.5; transition:border-color .15s, background .15s; }
.answer-option:hover:not(:disabled) { background:var(--surface-raised); border-color:var(--line-strong); }
.answer-option .option-letter { display:inline-grid; place-items:center; flex-shrink:0; width:25px; height:25px; border:1px solid var(--line); border-radius:7px; font-size:10px; color:var(--muted); }
.answer-option.selected { background:var(--surface-raised); border-color:var(--line-strong); color:var(--ink); }
.answer-option.correct { background:var(--surface-raised); border-color:var(--line-strong); color:var(--ink); opacity:1; }
.answer-option.incorrect { background:var(--surface-raised); border-color:var(--line-strong); color:var(--muted); opacity:1; }
.answer-option.correct .option-letter { background:var(--accent-fill); color:var(--on-brand); border-color:var(--line-strong); }
.answer-option.incorrect .option-letter { background:var(--accent-fill); color:var(--on-brand); border-color:var(--line-strong); }
.feedback { padding:17px 19px; background:var(--surface-raised); color:var(--ink); border:1px solid var(--line); border-radius:12px; margin:18px 0; font-size:12px; line-height:1.7; }
.feedback strong { display:block; margin-bottom:5px; }
.feedback p { margin:0; }
.feedback.correct, .feedback .correct { color:var(--ink); background:var(--surface-raised); border-color:var(--line); }
.feedback.incorrect, .feedback .incorrect { color:var(--muted); background:var(--surface-raised); border-color:var(--line); }
.order-list { display:grid; gap:9px; padding:0; list-style:none; counter-reset:order; margin:20px 0; }
.order-item { display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface); padding:11px 13px; border-radius:10px; font-size:12px; line-height:1.5; }
.order-item::before { counter-increment:order; content:counter(order); display:grid; place-items:center; width:24px; height:24px; background:var(--surface-raised); color:var(--muted); border-radius:7px; font-size:10px; flex-shrink:0; }
.order-item > span { flex:1; }
.order-item .button { min-height:29px; min-width:29px; padding:5px; font-size:13px; }
.quiz-progress { height:5px; border-radius:10px; background:var(--surface-soft); overflow:hidden; margin-bottom:27px; }
.quiz-progress > span { display:block; height:100%; background:var(--accent-fill); border-radius:inherit; transition:width .2s; }
.quiz-header { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:10px; color:var(--muted); margin-bottom:16px; }
.quiz-question { font-size:21px; line-height:1.5; font-weight:600; letter-spacing:-.035em; }
.result-score { display:grid; place-items:center; margin:15px auto 25px; width:132px; height:132px; border-radius:50%; border:8px solid var(--line); background:var(--surface-raised); font-size:34px; font-weight:650; letter-spacing:-.06em; color:var(--muted); }
.result-score small { display:block; font-size:11px; font-weight:500; letter-spacing:0; }
.practice-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:17px; margin:20px 0; }
.choice-card { text-align:left; padding:24px; border:1px solid var(--line); background:var(--surface); border-radius:16px; color:var(--ink); transition:transform .2s, border-color .2s; }
.choice-card:hover { transform:translateY(-3px); border-color:var(--line-strong); }
.choice-card > svg { width:30px; height:30px; color:var(--muted); margin-bottom:18px; }
.choice-card h3 { font-size:17px; font-weight:600; margin-bottom:9px; }
.choice-card p { font-size:11px; color:var(--muted); line-height:1.8; margin:0; }
.choice-card .badge { margin-top:15px; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:55px 25px; text-align:center; border:1px dashed var(--line); border-radius:17px; background:var(--surface); }
.empty-state > svg { width:42px; height:42px; color:var(--muted); margin-bottom:17px; }
.empty-state h2, .empty-state h3 { font-size:21px; font-weight:600; margin:0 0 9px; }
.empty-state p { color:var(--muted); max-width:400px; font-size:12px; margin-bottom:20px; }
.notice { display:flex; align-items:flex-start; gap:11px; background:var(--surface-soft); color:var(--ink); border:1px solid var(--line); border-radius:11px; padding:14px 16px; font-size:11px; line-height:1.7; margin:18px 0; }
.notice > svg { width:17px; height:17px; margin-top:2px; flex-shrink:0; }
.notice.warning { background:var(--surface-raised); color:var(--muted); border-color:var(--line); }
.notice p { margin:0; }
.notice a { text-decoration:underline; text-underline-offset:3px; }
.inline-form { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin:20px 0; }
.inline-form .field { flex:1; min-width:150px; margin-bottom:0; }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:17px; }
.form-grid .field { margin-bottom:0; }
.form-grid .full { grid-column:1 / -1; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; min-width:0; }
.field label, label.field { font-size:11px; font-weight:600; line-height:1.5; color:var(--ink); }
.field input, .field select, .field textarea, input.input, select.input, textarea.input { display:block; width:100%; min-height:43px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); padding:11px 13px; font-size:12px; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder { color:var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color:var(--line-strong); }
.field textarea { resize:vertical; min-height:90px; }
.field small { font-size:10px; color:var(--muted); font-weight:400; }
.field.checkbox { flex-direction:row; align-items:flex-start; gap:9px; }
.field.checkbox input, input[type="checkbox"] { width:17px; min-height:17px; accent-color:var(--focus); flex-shrink:0; margin:2px 0 0; }
.field.checkbox label { font-weight:400; }
.form-actions { display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:wrap; margin-top:23px; }
.form-error { color:var(--ink); background:var(--surface-raised); border:1px solid var(--line); border-radius:9px; padding:12px; font-size:11px; margin:15px 0; line-height:1.6; }
.auth-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:65px; max-width:950px; margin:20px auto; }
.auth-intro h1 { font-size:43px; font-weight:650; letter-spacing:-.06em; line-height:1.13; margin-bottom:20px; }
.auth-intro p { color:var(--muted); font-size:13px; line-height:1.9; }
.auth-card { border:1px solid var(--line); background:var(--surface); border-radius:22px; padding:32px; }
.auth-card h2 { font-size:25px; font-weight:650; margin-bottom:10px; }
.auth-card > p { font-size:11px; color:var(--muted); margin-bottom:26px; }
.auth-card .button.primary { width:100%; }
.auth-card .auth-switch { text-align:center; font-size:11px; margin:20px 0 0; }
.demo-options { display:grid; gap:8px; margin-top:17px; }
.demo-options .button { justify-content:flex-start; font-size:11px; background:var(--surface-raised); border-color:var(--line); }
.demo-options .button svg { color:var(--muted); }
.divider { display:flex; align-items:center; gap:12px; margin:24px 0 18px; color:var(--muted); font-size:9px; }
.divider::before, .divider::after { content:""; height:1px; background:var(--line); flex:1; }
.table-wrap { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:13px; margin:20px 0; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; white-space:nowrap; }
th { background:var(--surface-raised); color:var(--ink); font-size:11px; font-weight:650; letter-spacing:.035em; padding:13px 16px; border-bottom:1px solid var(--line); }
td > strong, td > small { display:block; }
td > small { margin-top:4px; }
td > .badge { margin-top:6px; }
td { padding:15px 16px; border-bottom:1px solid var(--line); line-height:1.5; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface); }
td .muted { display:block; font-size:9px; margin-top:3px; }
td .progress-track { min-width:80px; margin:5px 0; }
.tabs { display:flex; align-items:center; gap:5px; border-bottom:1px solid var(--line); margin:18px 0 25px; overflow-x:auto; }
.tab { padding:12px 17px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:11px; font-weight:550; white-space:nowrap; }
.tab.active { border-bottom-color:var(--line-strong); color:var(--ink); }
.rank-row { display:flex; align-items:center; gap:16px; padding:16px 12px; border-bottom:1px solid var(--line); font-size:12px; }
.rank-row:last-child { border-bottom:0; }
.rank-row.self { background:var(--surface-raised); border-radius:10px; border-bottom-color:transparent; }
.rank-position { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:var(--surface-raised); color:var(--muted); font-weight:650; font-size:11px; flex-shrink:0; }
.rank-row:first-child .rank-position { background:var(--surface-raised); color:var(--muted); }
.rank-row .avatar { width:32px; height:32px; background:var(--surface-soft); font-size:10px; }
.rank-alias { flex:1; min-width:0; font-weight:550; }
.rank-alias small { display:block; color:var(--muted); font-size:9px; font-weight:400; margin-top:2px; }
.rank-score { color:var(--muted); font-weight:650; font-size:13px; white-space:nowrap; }
.rank-score small { font-size:9px; font-weight:400; }
.mobile-nav { display:none; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--accent-fill); color:var(--on-brand); font-size:12px; padding:15px 21px; border-radius:11px; box-shadow:0 8px 25px var(--shadow-color); max-width:calc(100vw - 30px); z-index:100; line-height:1.6; animation:toast-enter .2s ease-out; }
.toast.error { background:var(--accent-fill); }
.dialog-backdrop { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--glass); backdrop-filter:blur(3px); padding:25px; z-index:90; }
.dialog { width:100%; max-width:520px; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:32px; position:relative; max-height:calc(100vh - 50px); overflow-y:auto; box-shadow:0 20px 70px var(--shadow-color); }
.dialog.large { max-width:760px; }
.dialog h2 { font-size:25px; line-height:1.3; font-weight:650; margin-bottom:15px; padding-right:30px; }
.dialog h3 { font-size:16px; }
.dialog > p, .dialog li { font-size:12px; line-height:1.8; color:var(--muted); }
.dialog-close { position:absolute; right:20px; top:20px; background:var(--surface-raised); color:var(--muted); border:0; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font-size:17px; }
.editor-grid { display:grid; grid-template-columns:280px minmax(0, 1fr); gap:22px; }
.editor-list { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:10px; max-height:650px; overflow-y:auto; }
.editor-item { display:block; width:100%; text-align:left; padding:14px 12px; color:var(--ink); border-radius:9px; border:1px solid transparent; background:transparent; font-size:11px; line-height:1.55; }
.editor-item + .editor-item { margin-top:4px; }
.editor-item.active { color:var(--muted); background:var(--surface-raised); border-color:var(--line); }
.editor-item strong { display:block; font-weight:600; margin-bottom:6px; }
.editor-item .badge { font-size:8px; padding:3px 7px; }
.editor-actions { display:flex; gap:8px; justify-content:flex-end; margin-bottom:14px; flex-wrap:wrap; }
.skeleton { background:linear-gradient(90deg, var(--surface-soft) 25%, var(--surface-raised) 50%, var(--surface-soft) 75%); background-size:200% 100%; border-radius:13px; min-height:100px; animation:shimmer 1.5s infinite; }
.loading-page { padding:35px; }
.loading-page .skeleton + .skeleton { margin-top:20px; }
.footer-note { color:var(--muted); font-size:9px; margin:28px 0 0; line-height:1.8; }
.two-columns { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.flex { display:flex; align-items:center; gap:12px; }
.flex-between { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wrap { flex-wrap:wrap; }
.mt-0 { margin-top:0 !important; }
.mb-0 { margin-bottom:0 !important; }
.mt-2 { margin-top:16px; }
.mt-3 { margin-top:24px; }
.mb-2 { margin-bottom:16px; }
.center { text-align:center; }

/* Interactive application components. */
.brand > span:last-child { line-height:1.05; white-space:nowrap; }
.brand .brand-accent { display:inline; color:var(--muted); }
.brand small { display:block; font-size:6.5px; line-height:1.5; letter-spacing:.09em; margin-top:5px; color:var(--ink); }
.nav-caption { font-size:8px; font-weight:650; letter-spacing:.13em; color:var(--muted); margin:27px 14px 4px; }
.version-label { display:block; font-size:8px; color:var(--muted); margin:19px 3px 0; }
.sidebar-note > svg { width:20px; height:20px; color:var(--muted); margin-bottom:13px; }
.sidebar-note p { font-size:10px; margin-bottom:0; line-height:1.75; }
.mobile-brand { display:none; }
.icon-button { width:34px; min-height:34px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; padding:7px; }
.icon-button:hover { background:var(--surface-raised); }
.icon-button svg { width:17px; height:17px; }
.full-width { width:100%; }
.circle-button { width:31px; height:31px; min-height:31px; padding:6px; border:1px solid var(--line); border-radius:50%; background:var(--surface); }
.circle-button svg { width:15px; height:15px; }
.page-footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:var(--muted); font-size:8px; line-height:1.75; margin-top:34px; padding-top:19px; }
.page-footer > span:first-child { flex-shrink:0; }
.small { font-size:10px; line-height:1.7; }
.points-pill { font-size:10px; background:var(--surface-raised); color:var(--muted); }
.points-pill svg { width:12px; height:12px; }
.hero-title > span { color:var(--muted); }
.hero-footnote { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.hero-footnote svg { width:11px; height:11px; }
.hero-footnote > span { margin:0 3px; }
.hero-pill .live-dot { display:none; }
.hero-visual .art-cross > svg { display:none; }
.art-card .mini-label { font-size:7px; letter-spacing:.08em; color:var(--muted); }
.art-card .mini-check { display:flex; align-items:center; gap:5px; padding-top:10px; margin-top:11px; border-top:1px solid var(--line); font-size:8px; color:var(--muted); }
.art-card .mini-check svg { width:13px; height:13px; color:var(--muted); }
.art-card-two { display:flex; align-items:center; gap:10px; }
.art-card-two > svg { width:32px; height:32px; padding:6px; color:var(--muted); background:var(--surface-raised); border-radius:10px; }
.art-card-two strong { margin:0; font-size:23px; line-height:1; }
.art-card-two span { display:block; font-size:8px; color:var(--muted); margin-top:5px; }
.feature-strip { display:flex; justify-content:space-between; gap:14px; padding:21px 5px; border-bottom:1px solid var(--line); margin-bottom:2px; }
.feature-strip > span { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:9px; font-weight:500; }
.feature-strip svg { width:16px; height:16px; color:var(--muted); }
.module-art[data-theme="rose"], [data-theme="rose"] .module-art { background:var(--surface-soft); color:var(--muted); }
.module-footer > span > strong { font-size:17px; font-weight:650; letter-spacing:-.045em; }
.module-footer > span > small { font-size:9px; color:var(--muted); }
.module-overview { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(270px, 1fr); gap:22px; align-items:stretch; }
.module-overview .panel + .panel { margin-top:0; }
.module-summary > .badge { margin-left:12px; vertical-align:middle; }
.module-summary > h2 { margin-top:25px; }
.module-summary[data-theme="lilac"] { background:var(--surface-raised); border-color:var(--line); }
.module-summary[data-theme="mint"] { background:var(--surface-raised); border-color:var(--line); }
.module-summary[data-theme="peach"] { background:var(--surface-raised); border-color:var(--line); }
.module-summary[data-theme="rose"] { background:var(--surface-raised); border-color:var(--line); }
.objective-list { list-style:none; padding:0; margin-bottom:24px; }
.objective-list li { display:flex; align-items:flex-start; gap:10px; color:var(--ink); font-size:12px; line-height:1.75; margin:12px 0; }
.objective-list svg { width:16px; height:16px; margin-top:3px; color:var(--muted); }
.access-panel { display:flex; flex-direction:column; align-items:flex-start; }
.access-panel > h2 { font-size:23px; }
.access-panel > p { font-size:11px; }
.access-panel > .button { margin:5px 0 11px; width:100%; }
.access-panel > .text-link { margin-top:auto; padding-top:14px; font-size:10px; }
.access-panel > .progress-track { width:100%; margin:10px 0 12px; }
.price-large { font-size:37px; font-weight:600; letter-spacing:-.065em; margin:6px 0 17px; }
.price-large small { font-size:11px; font-weight:400; letter-spacing:0; color:var(--muted); }
.lesson-path > article.path-item, .mission-unit-items > article.path-item { padding:21px 8px; align-items:center; border-bottom:1px solid var(--line); border-radius:0; }
.lesson-path > article.path-item:last-child, .mission-unit-items > article.path-item:last-child { border-bottom:0; }
.lesson-path > article.path-item > div, .mission-unit-items > article.path-item > div { flex:1; }
.path-item h3 { font-size:16px; font-weight:600; line-height:1.5; margin:5px 0; }
.path-item p { font-size:11px; color:var(--muted); margin:5px 0 9px; }
.path-number { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface-soft); color:var(--muted); font-size:12px; font-weight:600; margin-right:7px; flex-shrink:0; }
.path-number > svg { width:20px; height:20px; }
.locked-label { display:inline-flex; align-items:center; gap:5px; font-size:9px; white-space:nowrap; color:var(--muted); }
.locked-label svg { width:14px; height:14px; }
.lesson-sidebar { padding:21px 16px; position:sticky; top:20px; }
.lesson-stage-nav { display:flex; flex-direction:column; gap:7px; margin:16px 0 23px; }
.stage-tab { display:flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:9px; text-align:left; background:transparent; color:var(--muted); padding:12px 9px; font-size:10px; line-height:1.6; }
.stage-tab.active { background:var(--surface-raised); border-color:var(--line); color:var(--muted); }
.stage-tab svg { width:15px; height:15px; }
.lesson-key { border-top:1px solid var(--line); padding-top:20px; margin:20px 0; }
.lesson-key strong { font-size:11px; font-weight:600; }
.lesson-key p { font-size:10px; line-height:1.9; color:var(--muted); margin:10px 0 0; }
.lesson-stage > .quiz-header + h2 { margin-top:25px; }
.flashcard { flex-direction:column; gap:16px; margin-top:22px; }
.flashcard > .card-label { font-size:8px; letter-spacing:.14em; line-height:1.6; }
.flashcard > strong { font-size:22px; font-weight:550; line-height:1.6; margin:0; }
.card-tap { display:inline-flex; align-items:center; gap:7px; font-size:9px; color:var(--muted); margin-top:12px; }
.flipped .card-tap { color:var(--muted); }
.card-tap svg { width:13px; height:13px; }
.card-helper { text-align:center; font-size:10px; margin:18px 0; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; font-size:10px; color:var(--muted); margin-top:22px; }
.card-bottom .button { min-height:28px; font-size:10px; }
.order-item::before { display:none; }
.order-item::marker { content:""; }
.achievement-strip { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:-5px 0 24px; }
.achievement-strip .eyebrow { margin:0 3px 0 0; }
.achievement-strip .badge { font-size:11px; padding:7px 11px; }
.achievement-strip svg { width:14px; height:14px; }
.upcoming-reviews { margin-top:26px; border-top:1px solid var(--line); padding-top:22px; }
.upcoming-reviews > h3 { margin:7px 0 10px; }
.upcoming-reviews > .small { margin:15px 0 0; }
.order-number { display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:var(--surface-raised); color:var(--muted); font-size:10px; flex:0 0 26px !important; }
.order-item strong { font-weight:500; flex:1; }
.question-prompt { margin:25px 0 20px; }
.source-note { font-size:9px; color:var(--muted); line-height:1.8; margin-top:24px; }
.source-note a { text-decoration:underline; text-underline-offset:2px; }
.exam-panel { max-width:810px; margin:0 auto; padding:35px; }
.results-summary { display:flex; align-items:center; gap:22px; margin-bottom:24px; background:var(--surface-raised); border-color:var(--line); }
.results-summary > div { flex:1; }
.results-summary h2 { margin-bottom:8px; }
.results-summary p { margin-bottom:0; font-size:12px; color:var(--muted); }
.results-summary .eyebrow { font-size:9px; margin-bottom:7px; }
.results-summary .round-icon { background:var(--surface-soft); color:var(--muted); }
.results-list { display:grid; gap:18px; }
.results-list .panel + .panel { margin-top:0; }
.result-card > h3 { margin:15px 0; line-height:1.7; }
.result-card > p { font-size:12px; }
.result-card .feedback { margin-bottom:0; }
.round-icon { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:13px; background:var(--surface-soft); color:var(--muted); flex-shrink:0; }
.round-icon svg { width:24px; height:24px; }
.review-promo > .round-icon, .practice-config > .round-icon { margin-bottom:20px; }
.review-promo > .eyebrow { margin-top:0; }
.review-promo p { font-size:11px; }
.dashboard-grid > .learning-card { display:block; border:1px solid var(--line); border-radius:17px; padding:29px; background:var(--surface-raised); }
.dashboard-grid > .learning-card h2 { font-size:27px; line-height:1.25; font-weight:600; margin:12px 0; }
.dashboard-grid > .learning-card p { color:var(--muted); font-size:12px; line-height:1.8; max-width:450px; }
.dashboard-grid > .learning-card .button { margin-top:24px; }
.dashboard-grid > .learning-card .eyebrow { font-size:9px; margin:0 0 15px; }
.stat-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.stat-card > .icon { width:20px; height:20px; color:var(--muted); float:right; }
.stat-card > span { display:block; margin:0 0 15px; }
.stat-card > strong { margin-bottom:8px; }
.stat-card > small, .stat-card > a { font-size:9px; color:var(--muted); }
.stat-card > a { display:inline-flex; align-items:center; gap:5px; }
.stat-card > a svg { width:12px; height:12px; }
.practice-grid { grid-template-columns:minmax(280px, 1fr) minmax(0, 1.1fr); gap:22px; }
.practice-grid .panel + .panel { margin-top:0; }
.practice-config > p { font-size:11px; }
.practice-config > form { margin-top:24px; }
.practice-config .form-grid { gap:12px; margin-bottom:18px; }
.due-panel > .section-header { margin-top:0; }
.due-panel > .section-header h2 { font-size:19px; }
.due-panel .empty-state { padding:35px 20px; }
.review-list { margin:17px 0; }
.review-item { display:flex; align-items:flex-start; gap:13px; padding:16px 0; border-bottom:1px solid var(--line); }
.review-item > svg { width:17px; height:17px; color:var(--muted); margin-top:3px; }
.review-item strong { display:block; font-size:11px; font-weight:500; line-height:1.65; }
.review-item small { display:block; font-size:9px; color:var(--muted); margin-top:6px; }
.demo-options { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-top:27px; background:var(--surface-raised); }
.demo-options h2 { margin-bottom:9px; font-size:20px; }
.demo-options p { margin-bottom:0; font-size:11px; }
.demo-buttons { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.demo-buttons .button { min-width:215px; }
.auth-intro > h1 > span { color:var(--muted); }
.auth-illustration { position:relative; height:160px; display:flex; align-items:center; gap:22px; }
.auth-illustration svg:nth-child(1) { width:96px; height:96px; color:var(--muted); transform:rotate(-10deg); }
.auth-illustration svg:nth-child(2) { width:61px; height:61px; color:var(--muted); transform:rotate(14deg); margin-top:35px; }
.auth-illustration svg:nth-child(3) { width:33px; height:33px; color:var(--muted); margin-top:-39px; }
.auth-switch { font-size:11px; text-align:center; color:var(--muted); margin-top:21px; }
.auth-switch a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.form-error:empty { display:none; }
.checkbox-field { display:flex; align-items:flex-start; gap:10px; font-size:11px; color:var(--ink); line-height:1.7; margin:17px 0 23px; }
.assignment { min-width:210px; max-width:290px; padding:8px 0; }
.assignment > strong { display:block; font-size:11px; margin-bottom:8px; }
.assignment > small { display:block; font-size:9px; color:var(--muted); }
.subscription-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 0; border-bottom:1px solid var(--line); }
.subscription-row:last-child { border-bottom:0; }
.subscription-row strong { font-size:13px; font-weight:600; }
.subscription-row p { font-size:10px; margin:7px 0 0; }
.payment-history td > small { display:block; color:var(--muted); font-size:9px; }
.member-details { border:1px solid var(--line); border-radius:11px; padding:17px 19px; background:var(--surface); }
summary { font-size:12px; line-height:1.7; color:var(--ink); cursor:pointer; }
details[open] > summary { margin-bottom:15px; }
.member-details > form { margin-top:20px; }
.assign-form { margin:0; min-width:225px; gap:7px; flex-wrap:nowrap; }
.assign-form select { font-size:10px; width:170px; border:1px solid var(--line); background:var(--surface); padding:8px 9px; border-radius:7px; color:var(--ink); }
.completion-medal { display:grid; place-items:center; width:85px; height:85px; border-radius:50%; background:var(--surface-soft); color:var(--muted); margin:20px auto 24px; }
.completion-medal svg { width:44px; height:44px; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.editor-list { border:0; padding:0; margin-top:17px; max-height:620px; }
.editor-item small { color:var(--muted); font-size:9px; }
#editor-json { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; line-height:1.75; min-height:400px; }
#editor-feedback { display:inline-block; font-size:11px; color:var(--ink); margin-left:13px; }

/* Small informational text keeps a readable contrast on light surfaces. */
.module-description, .module-meta, .progress-caption, .stat-card > span, .stat-card > p,
.card-counter, .quiz-header, .field small, .table-wrap td .muted, .editor-item small,
.footer-note, .section-header p, .choice-card p, .rank-alias small { color:var(--muted); }
.module-number { color:var(--ink); }
.module-tag { color:var(--ink); }
.art-caption { color:var(--muted); }
.breadcrumb { color:var(--muted); }

@keyframes enter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes toast-enter { from { opacity:0; margin-bottom:-8px; } to { opacity:1; margin-bottom:0; } }
@keyframes shimmer { to { background-position:-200% 0; } }

@media (min-width:1650px) {
  .page { padding-left:60px; padding-right:60px; }
  .topbar { padding-left:60px; padding-right:60px; }
  .hero-copy { padding:46px; }
  .hero { min-height:390px; }
  .hero-visual { min-height:390px; }
}

@media (max-width:1230px) {
  .app-shell { grid-template-columns:205px minmax(0, 1fr); }
  .sidebar { padding:28px 15px 20px; }
  .brand { font-size:22px; padding:0 9px; }
  .page { padding:29px 27px 45px; }
  .topbar { padding:14px 27px; min-height:76px; }
  .hero-copy { padding:33px 29px; }
  .hero-title { font-size:37px; }
  .hero-visual { min-height:345px; }
  .art-card { width:144px; }
  .art-card-one { left:0; top:48px; }
  .art-card-two { right:-9px; bottom:45px; }
  .catalog-grid { gap:13px; }
  .module-body { padding:16px 13px 13px; }
  .module-title { font-size:14px; }
  .module-footer { align-items:flex-start; }
  .module-footer .price { font-size:14px; }
  .module-art { height:120px; }
  .stat-card { padding:17px; }
  .dashboard-grid { grid-template-columns:1.4fr 1fr; gap:17px; }
}

@media (max-width:1050px) {
  .catalog-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
  .module-art { height:145px; }
  .module-body { padding:20px; }
  .module-title { min-height:auto; font-size:17px; }
  .module-description { font-size:11px; }
  .module-meta { font-size:10px; }
  .module-footer { align-items:center; }
  .module-footer .price { font-size:17px; }
  .module-footer .button { font-size:11px; }
  .hero { grid-template-columns:1.2fr .8fr; }
  .hero-title { font-size:35px; }
  .hero-visual { overflow:visible; }
  .art-card-one { left:-5%; width:138px; top:65px; }
  .art-card-two { right:-18px; width:140px; }
  .hero-copy { padding:32px 25px; }
  .hero-actions .button { font-size:11px; padding:10px 13px; }
  .art-caption { display:none; }
  .hero-subtitle { font-size:11px; }
  .orbit-one { width:320px; height:320px; }
  .orbit-two { width:390px; height:390px; }
  .dashboard-grid { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .lesson-layout { grid-template-columns:195px minmax(0, 1fr); gap:17px; }
  .lesson-path { padding:19px 12px; }
  .lesson-path h2 { font-size:12px; }
  .path-item { padding:10px 6px; font-size:10px; gap:7px; }
  .flashcard { min-height:240px; padding:28px; }
  .card-front h3, .card-back h3, .flashcard strong { font-size:19px; }
  .flashcard p { font-size:14px; }
  .practice-grid { grid-template-columns:1fr; }
  .choice-card { display:grid; grid-template-columns:40px 1fr; gap:0 13px; padding:20px; }
  .choice-card > svg { grid-row:span 3; margin:0; }
  .choice-card h3 { margin:0 0 5px; }
  .choice-card p { grid-column:2; }
  .choice-card .badge { grid-column:2; margin-top:9px; }
  .auth-layout { grid-template-columns:1fr; max-width:470px; gap:25px; }
  .auth-intro h1 { font-size:32px; }
  .auth-intro p { font-size:12px; margin-bottom:0; }
  .editor-grid { grid-template-columns:210px minmax(0, 1fr); gap:15px; }
  .form-grid { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .demo-banner { font-size:9px; padding:7px 13px; min-height:31px; }
  .app-shell { display:block; }
  .sidebar { display:none; }
  .topbar { min-height:66px; padding:13px 22px; }
  .breadcrumb { font-size:11px; }
  .topbar .brand { font-size:22px; padding:0; }
  .topbar .brand-mark { width:26px; height:28px; border-radius:7px; }
  .topbar-actions { gap:10px; }
  .topbar-actions .button { min-height:33px; padding:8px 12px; font-size:10px; }
  .topbar-actions .user-name { display:none; }
  .page { padding:26px 22px 102px; }
  .page-heading { margin-bottom:23px; align-items:flex-start; }
  .page-title { font-size:30px; }
  .page-heading .muted { font-size:11px; }
  .eyebrow { font-size:9px; margin-bottom:9px; }
  .hero { grid-template-columns:1.25fr 1fr; min-height:330px; border-radius:20px; }
  .hero-copy { padding:30px 25px; }
  .hero-title { font-size:35px; }
  .hero-pill { margin-bottom:19px; font-size:8px; }
  .hero-subtitle { margin-bottom:21px; }
  .hero-visual { min-height:340px; }
  .art-card-one { top:48px; left:0; width:145px; }
  .art-card-two { right:-10px; bottom:39px; width:145px; }
  .section-header { margin-top:29px; }
  .section-header h2 { font-size:20px; }
  .section-header p { font-size:10px; }
  .module-art { height:135px; }
  .module-title { font-size:16px; }
  .mobile-nav { display:flex; position:fixed; bottom:0; left:0; right:0; height:calc(66px + env(safe-area-inset-bottom)); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); background:var(--glass); border-top:1px solid var(--line); backdrop-filter:blur(10px); justify-content:space-around; z-index:50; }
  .mobile-nav a, .mobile-nav button { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:5px 2px; font-size:8px; line-height:1.3; font-weight:600; background:transparent; color:var(--muted); border:0; border-radius:8px; max-width:100px; }
  .mobile-nav svg { width:20px; height:20px; stroke-width:1.7; }
  .mobile-nav .active { background:var(--surface-raised); color:var(--muted); }
  .toast { bottom:83px; font-size:11px; }
  .lesson-layout { grid-template-columns:1fr; }
  .lesson-path { position:static; padding:17px; }
  .lesson-path h2 { margin-bottom:12px; font-size:14px; }
  .lesson-path .unit-title { margin-top:12px; }
  .lesson-path .path-items { display:flex; gap:8px; overflow-x:auto; }
  .path-item { font-size:11px; padding:10px; }
  .path-item + .path-item { margin-top:1px; }
  .lesson-stage h2 { font-size:24px; }
  .panel { padding:21px; border-radius:15px; }
  .panel h2 { font-size:19px; }
  .editor-grid { grid-template-columns:1fr; }
  .editor-list { max-height:240px; }
  .two-columns { grid-template-columns:1fr; }
  .dialog-backdrop { padding:17px; }
  .dialog { padding:27px 23px; max-height:calc(100dvh - 34px); border-radius:19px; }
  .dialog h2 { font-size:22px; }
  .auth-card { padding:27px; }
}

@media (max-width:500px) {
  .demo-banner { min-height:38px; font-size:8px; line-height:1.5; padding:6px 15px; }
  .topbar { min-height:63px; padding:12px 18px; }
  .page { padding:24px 17px 96px; }
  .page-heading { display:block; margin-bottom:21px; }
  .page-heading > .button, .page-heading > .badge { margin-top:14px; }
  .page-title { font-size:29px; }
  .hero { display:block; min-height:0; border-radius:18px; }
  .hero-copy { padding:26px 25px 10px; }
  .hero-pill { font-size:8px; margin-bottom:19px; }
  .hero-title { max-width:310px; font-size:39px; line-height:1.05; margin-bottom:17px; }
  .hero-subtitle { font-size:12px; max-width:300px; line-height:1.7; margin-bottom:19px; }
  .hero-actions { gap:8px; }
  .hero-actions .button { min-height:40px; font-size:11px; padding:10px 14px; }
  .hero-footnote { font-size:8px; max-width:280px; }
  .hero-visual { height:225px; min-height:225px; overflow:hidden; margin-top:7px; }
  .hero-visual::before { width:145px; height:145px; left:52%; top:50%; }
  .orbit { left:52%; width:210px; height:210px; }
  .orbit-one { width:280px; height:280px; }
  .orbit-two { width:350px; height:350px; }
  .art-cross { width:97px; height:97px; left:52%; top:48%; }
  .art-cross::before { width:36px; height:97px; left:30px; border-radius:10px; }
  .art-cross::after { width:97px; height:36px; top:30px; border-radius:10px; }
  .art-card { padding:11px; border-radius:12px; }
  .art-card-one { width:124px; top:22px; left:24px; }
  .art-card-two { width:133px; right:17px; bottom:27px; }
  .art-card strong { font-size:10px; margin-top:6px; }
  .art-card p { font-size:8px; }
  .art-card svg { width:20px; height:20px; }
  .art-spark { top:73%; left:20%; width:25px; height:25px; font-size:15px; }
  .section-header { margin-top:26px; gap:10px; }
  .section-header h2 { font-size:19px; }
  .section-header > a, .section-header > .button { font-size:9px; padding-right:0; }
  .section-header p { font-size:10px; max-width:240px; line-height:1.65; }
  .catalog-grid { grid-template-columns:1fr; gap:18px; }
  .module-card { border-radius:16px; }
  .module-art { height:143px; }
  .module-number { top:15px; left:18px; font-size:10px; }
  .module-tag { font-size:9px; right:16px; bottom:14px; }
  .module-icon { width:65px; height:65px; }
  .module-icon svg { width:37px; height:37px; }
  .module-body { padding:21px; }
  .module-title { font-size:19px; margin-bottom:10px; }
  .module-description { font-size:12px; margin-bottom:17px; }
  .module-meta { font-size:10px; gap:13px; }
  .module-footer { margin-top:18px; padding-top:17px; }
  .module-footer .price { font-size:19px; }
  .module-footer .price small { font-size:10px; }
  .module-footer .button { min-height:35px; padding:8px 13px; }
  .stat-grid { gap:10px; margin-bottom:20px; }
  .stat-card { padding:16px; border-radius:12px; }
  .stat-card .stat-icon { width:29px; height:29px; margin-bottom:14px; }
  .stat-card strong, .stat-value { font-size:25px; }
  .stat-card > span, .stat-label { font-size:9px; }
  .dashboard-grid { gap:15px; }
  .learning-card { gap:11px; }
  .learning-card .module-icon { width:36px; height:36px; border-radius:9px; }
  .learning-card .module-icon svg { width:20px; height:20px; }
  .learning-card h3 { font-size:12px; }
  .learning-card .button { padding:7px 9px; min-height:31px; font-size:9px; }
  .panel { padding:20px; }
  .panel > p { font-size:11px; }
  .flashcard { min-height:260px; padding:27px 24px; border-radius:17px; }
  .card-front h3, .card-back h3, .flashcard strong { font-size:21px; }
  .flashcard p { font-size:14px; }
  .card-controls { gap:8px; }
  .card-controls .button { font-size:11px; padding:10px 13px; }
  .quiz-question { font-size:19px; }
  .answer-option { padding:14px 12px; gap:10px; font-size:12px; }
  .answer-option .option-letter { width:24px; height:24px; }
  .order-item { padding:10px; gap:7px; font-size:11px; }
  .order-item .button { min-width:30px; min-height:32px; }
  .feedback { padding:15px; font-size:11px; }
  .notice { padding:13px; font-size:10px; gap:8px; }
  .inline-form { display:block; }
  .inline-form .field { margin-bottom:14px; }
  .inline-form > .button { width:100%; }
  .form-actions { gap:9px; }
  .form-actions > .button { flex:1; font-size:11px; }
  .auth-layout { margin:0; gap:22px; }
  .auth-intro h1 { font-size:32px; margin-bottom:12px; }
  .auth-card { padding:25px 23px; border-radius:17px; }
  .auth-card h2 { font-size:24px; }
  .field { gap:7px; margin-bottom:17px; }
  .field label { font-size:11px; }
  .field input, .field select, .field textarea { font-size:16px; padding:10px 12px; }
  .tabs { margin-bottom:20px; }
  .tab { padding:12px 13px; font-size:11px; }
  .rank-row { padding:14px 5px; gap:12px; }
  .rank-alias { font-size:11px; }
  .rank-score { font-size:12px; }
  .dialog { padding:26px 21px; }
  .dialog h2 { font-size:22px; }
  .dialog .form-actions > .button { min-width:120px; }
  .footer-note { font-size:9px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@media print {
  .sidebar, .mobile-nav, .topbar-actions, .toast, .hero-visual, .dialog-backdrop { display:none !important; }
  .app-shell { display:block; }
  .page { padding:20px; }
  .topbar { min-height:auto; padding:12px 20px; }
  .panel, .module-card, .stat-card { break-inside:avoid; box-shadow:none; }
}

/* Final typography and responsive rules shared with the actual application. */
.nav-link { font-size:13px; }
.module-title { font-size:16px; }
.module-description { font-size:12px; }
.module-meta { font-size:10px; }
.field input, .field select, .field textarea { font-size:14px; }
.source-note { font-size:12px; }
.stat-card > span { padding-right:20px; line-height:1.6; }
.demo-options .eyebrow { font-size:9px; margin-bottom:9px; }
.module-card .badge { font-size:10px; }
.page-footer { font-size:10px; }

@media (max-width:1050px) {
  .module-overview { grid-template-columns:minmax(0, 1.2fr) minmax(235px, 1fr); gap:18px; }
  .practice-grid { grid-template-columns:1fr; }
  .demo-options { align-items:flex-start; }
  .demo-buttons .button { min-width:195px; font-size:10px; }
  .lesson-sidebar { padding:19px 13px; }
  .stage-tab { padding:10px 7px; font-size:9px; }
  .results-summary { flex-wrap:wrap; gap:18px; }
  .results-summary > .button { margin-left:66px; }
  .stat-card > span { font-size:10px; }
}

@media (max-width:760px) {
  .mobile-brand { display:inline-flex; align-items:center; gap:5px; font-size:20px; font-weight:750; letter-spacing:-.065em; }
  .mobile-brand > svg { width:23px; height:23px; color:var(--muted); }
  .topbar > .breadcrumb { display:none; }
  .feature-strip { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:15px 13px; padding:21px 4px; }
  .feature-strip > span { font-size:10px; gap:8px; }
  .feature-strip svg { width:17px; height:17px; }
  .module-overview { grid-template-columns:1fr; }
  .lesson-sidebar { position:static; padding:20px; }
  .lesson-stage-nav { flex-direction:row; gap:7px; margin-bottom:0; }
  .stage-tab { flex:1; flex-direction:column; justify-content:center; text-align:center; font-size:9px; padding:12px 5px; line-height:1.6; }
  .stage-tab svg { width:19px; height:19px; }
  .lesson-key { margin-top:20px; }
  .lesson-key p { font-size:11px; }
  .lesson-sidebar > .small { margin-bottom:0; font-size:10px; }
  .lesson-path > article.path-item, .mission-unit-items > article.path-item { align-items:flex-start; flex-wrap:wrap; padding:20px 0; gap:12px; }
  .lesson-path > article.path-item > div, .mission-unit-items > article.path-item > div { flex:1; min-width:calc(100% - 65px); }
  .lesson-path > article.path-item > .button, .mission-unit-items > article.path-item > .button, .lesson-path > article.path-item > .locked-label, .mission-unit-items > article.path-item > .locked-label { margin-left:59px; }
  .path-item h3 { font-size:16px; }
  .path-item p { font-size:12px; }
  .path-number { width:38px; height:38px; margin-top:4px; }
  .demo-options { display:block; }
  .demo-options h2 { font-size:21px; }
  .demo-buttons { margin-top:20px; }
  .demo-buttons .button { min-height:43px; font-size:12px; }
  .demo-options .eyebrow { margin-bottom:10px; }
  .page-footer { display:block; font-size:9px; }
  .page-footer > span { display:block; margin-bottom:9px; }
  .auth-intro > h1 { font-size:35px; }
  .auth-illustration { display:none; }
  .dashboard-grid > .learning-card { padding:26px; }
  .dashboard-grid > .learning-card h2 { font-size:27px; }
  .dashboard-grid > .learning-card > .button { font-size:12px; min-height:43px; padding:11px 17px; }
  .subscription-row { align-items:flex-start; flex-wrap:wrap; }
  .results-summary > div { min-width:calc(100% - 70px); }
  .results-summary h2 { font-size:21px; line-height:1.35; }
  .exam-panel { padding:25px; }
  .field input, .field select, .field textarea { font-size:16px; }
}

@media (max-width:500px) {
  .topbar-actions > .button.ghost { display:none; }
  .topbar-actions .points-pill { padding:5px 7px; font-size:8px; gap:3px; }
  .topbar-actions .avatar { width:29px; height:29px; font-size:9px; }
  .topbar-actions .icon-button { width:28px; min-height:29px; padding:6px; }
  .topbar-actions { gap:7px; }
  .mobile-brand { font-size:20px; }
  .feature-strip > span { font-size:9px; gap:7px; }
  .module-title { font-size:19px; }
  .module-description { font-size:12px; }
  .module-meta { font-size:10px; gap:12px; }
  .module-footer > span > strong { font-size:19px; }
  .module-footer > span > small { font-size:10px; }
  .circle-button { width:35px; height:35px; min-height:35px; padding:8px; }
  .circle-button svg { width:18px; height:18px; }
  .art-card .mini-label { font-size:6px; }
  .art-card .mini-check { font-size:7px; margin-top:8px; padding-top:8px; }
  .art-card-two { gap:8px; }
  .art-card-two > svg { width:29px; height:29px; }
  .art-card-two strong { font-size:21px; }
  .art-card-two span { font-size:7px; line-height:1.5; }
  .stat-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px; }
  .stat-card { padding:14px 11px; }
  .stat-card > .icon { float:none; display:block; margin-bottom:14px; width:18px; height:18px; }
  .stat-card > span { min-height:28px; font-size:9px; padding-right:0; margin-bottom:7px; }
  .stat-card > strong { font-size:24px; }
  .stat-card > small, .stat-card > a { font-size:8px; }
  .stat-card > a { line-height:1.5; }
  .stat-card > a svg { display:none; }
  .dashboard-grid > .learning-card { padding:24px; }
  .dashboard-grid > .learning-card p { font-size:12px; }
  .module-summary > .badge { font-size:9px; margin-left:8px; }
  .objective-list li { font-size:12px; }
  .price-large { font-size:37px; }
  .path-item .small { font-size:10px; }
  .path-item h3 { font-size:16px; }
  .card-bottom .button { font-size:9px; padding:6px 0; }
  .lesson-stage { padding:22px 19px; }
  .lesson-stage h2 { font-size:22px; }
  .lesson-stage-nav { gap:4px; }
  .stage-tab { padding:10px 3px; font-size:8px; }
  .lesson-sidebar { padding:20px 17px; }
  .flashcard > strong { font-size:20px; }
  .flashcard { min-height:255px; }
  .source-note { font-size:11px; }
  .exam-panel { padding:23px 19px; }
  .results-summary { padding:23px 20px; gap:15px; }
  .results-summary > div { min-width:calc(100% - 60px); }
  .results-summary > .round-icon { width:40px; height:40px; }
  .results-summary h2 { font-size:20px; }
  .results-summary p { font-size:11px; }
  .results-summary > .button { margin-left:0; width:100%; }
  .member-details { padding:16px 13px; }
  .assignment { min-width:190px; }
  .dialog-actions > .button { flex:1; min-width:120px; font-size:11px; }
  .subscription-row .button { margin-top:6px; }
}

/* Pricing:configurable commercial offers, separate from brand styling. */
.pricing-section { margin-top:40px; }
.pricing-section .pricing-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; align-items:stretch; }
.pricing-grid > .panel + .panel { margin-top:0; }
.offer-card { display:flex; flex-direction:column; gap:0; padding:25px 22px; min-width:0; }
.offer-card > .round-icon { margin-bottom:22px; }
.offer-card > .badge { margin-bottom:22px; align-self:flex-start; }
.offer-card > .eyebrow { line-height:1.65; margin-bottom:10px; }
.offer-card h3 { font-size:22px; line-height:1.2; letter-spacing:-.045em; margin:0 0 18px; }
.offer-card > p.muted { font-size:13px; line-height:1.8; margin-bottom:20px; }
.offer-card > .small { font-size:11px; line-height:1.8; margin:17px 0 0; }
.offer-card > .button { margin-top:auto; width:100%; white-space:normal; }
.flagship-offer { background:var(--surface-raised); border-color:var(--line); }
.full-offer { background:var(--surface-raised); border-color:var(--line); }
.offer-price { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin:0 0 18px; line-height:1.3; }
.offer-price > strong { font-size:clamp(30px, 2.8vw, 38px); font-weight:650; letter-spacing:-.06em; color:var(--ink); }
.offer-price > small { font-size:12px; font-weight:400; letter-spacing:0; color:var(--muted); }
.offer-features { display:grid; gap:13px; list-style:none; padding:0; margin:4px 0 22px; }
.offer-features > li { display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.75; color:var(--ink); }
.offer-features > li > svg { width:15px; height:15px; margin-top:3px; flex-shrink:0; }
.offer-features .text-link { display:inline; line-height:1.8; font-size:12px; }
.offer-features .text-link svg { width:13px; height:13px; margin-left:3px; }
.annual-offer { margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.annual-offer > p { font-size:12px; margin-bottom:13px; }
.annual-offer .offer-choice { padding:0; border:0; background:transparent; }
.annual-offer .offer-choice > div:first-child > strong { display:none; }
.offer-choice { padding:20px 0; border-top:1px solid var(--line); }
.offer-choice > div:first-child { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; flex-wrap:wrap; margin-bottom:12px; }
.offer-choice > div:first-child > strong { font-size:13px; line-height:1.6; }
.offer-choice .offer-price { margin:9px 0; }
.offer-choice .offer-price > strong { font-size:30px; }
.offer-choice > .small { font-size:11px; line-height:1.75; margin:8px 0; }
.offer-choice > .button { width:100%; margin-top:9px; min-width:0; white-space:normal; }
.offer-choice .badge { font-size:10px; padding:5px 8px; }
.module-offers { width:100%; margin-top:23px; }
.module-offers > .eyebrow { margin-bottom:14px; }
.module-offers > .badge { margin-bottom:15px; }
.proposed-price { color:var(--ink); background:var(--surface-raised); padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:11px; line-height:1.75; }
.offer-card > .proposed-price { margin:0 0 17px; }
.entitlement-row { align-items:flex-start; }
.entitlement-row > div { min-width:0; }
.entitlement-row > .badge { flex-shrink:0; }
@media (max-width:1050px) {
  .pricing-section .pricing-grid { gap:13px; }
  .offer-card { padding:23px 18px; }
  .offer-card h3 { font-size:20px; }
  .offer-card > p.muted { font-size:12px; }
  .offer-price > strong { font-size:31px; }
}
@media (max-width:760px) {
  .pricing-section { margin-top:30px; }
  .pricing-section .pricing-grid { grid-template-columns:minmax(0, 1fr); gap:18px; }
  .offer-card { padding:25px 23px; }
  .offer-card h3 { font-size:25px; }
  .offer-card > p.muted, .offer-features > li, .offer-features .text-link { font-size:13px; }
  .offer-price > strong { font-size:36px; }
  .offer-card > .button { margin-top:10px; min-height:45px; }
  .offer-choice > .button { min-height:45px; }
  .offer-choice > div:first-child { align-items:center; }
  .entitlement-row { flex-wrap:wrap; gap:13px; }
}

/* PwrFarma identity:refined from the user-owned Canva logo. */
:root { --brand-indigo: #343f75; --brand-teal: #61d5d0; --brand-teal-ink: #321767; --ink: #28345f; --violet: #343f75; --violet-dark: #28345f; }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:0 8px; letter-spacing:normal; }
.brand .brand-wordmark { display:block; width:178px; height:auto; max-width:100%; }
.brand .brand-tagline { font-size:7px; font-weight:700; letter-spacing:.2em; color:var(--ink); margin:0 0 0 48px; line-height:1.5; white-space:nowrap; }
.mobile-brand img { display:block; width:145px; height:auto; }
.auth-brand-logo { width:290px; max-width:100%; height:auto; margin:0 0 28px; }
.nav-link.active { color:var(--ink); background:var(--surface-soft); border-color:var(--line); }
:focus-visible { outline-color:var(--focus); }
.button.ghost, button.ghost, a.ghost { color:var(--ink); }
.avatar { background:var(--surface-soft); color:var(--ink); }
.hero-title > span { color:var(--ink); }
.hero { background:var(--surface-raised); }
.art-cross { color:var(--muted); background:var(--accent-fill); }
@media (max-width:640px) { .mobile-brand img { width:138px; } .auth-brand-logo { width:240px; } }

.hero-visual .art-cross { background:transparent; color:inherit; }
.hero-visual .art-cross::before, .hero-visual .art-cross::after { display:none; }
.hero-visual .art-cross > img { display:block; width:100%; height:100%; filter:drop-shadow(0 12px 14px var(--shadow-color)); }


/* Final user-approved UI correction:lilac surfaces, indigo text and aligned lockups.
   Turquoise is retained only within the supplied logo artwork. */
:root {
  --paper: #f8f7fc;
  --surface: #ffffff;
  --ink: #29315a;
  --muted: #665e78;
  --line: #e4deed;
  --violet: #6952a8;
  --violet-dark: #4e3985;
  --lilac: #e8e2f7;
  --mint: #eee7f8;
  --green: #5c467f;
}
body { background:var(--paper); }
.demo-banner { background:var(--surface-raised); border-color:var(--line); color:var(--muted); }
.sidebar { padding-top:0; background:var(--surface); border-color:var(--line); }
.sidebar > .brand {
  width:100%; height:85px; min-height:85px; flex:0 0 85px;
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:2px; padding:0 8px; margin:0;
  line-height:1; letter-spacing:normal;
}
.sidebar .brand-wordmark { display:block; width:100%; max-width:178px; height:auto; margin:0; }
.sidebar .brand-tagline {
  display:block; flex:none; margin:0 0 0 25.7534%; padding:0;
  font-size:6.7px; line-height:1.5; font-weight:700; letter-spacing:.18em;
  white-space:nowrap; color:var(--ink);
}
.sidebar > .nav { margin-top:32px; }
.topbar { background:var(--glass); border-color:var(--line); }
.mobile-brand { flex:0 0 auto; align-items:center; justify-content:flex-start; padding:0; margin:0; line-height:0; letter-spacing:normal; }
.mobile-brand > img { display:block; width:145px; max-width:100%; height:auto; margin:0; }
.auth-brand-logo { display:block; width:280px; max-width:100%; height:auto; margin:0 0 25px; vertical-align:top; }
.nav-link.active { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
.avatar { background:var(--surface-soft); color:var(--ink); }
.sidebar-note { background:var(--surface-raised); color:var(--muted); }
.sidebar-note strong { color:var(--ink); }
.hero { background:var(--surface-soft); border-color:var(--line); }
.hero-title > span { color:var(--muted); }
.hero-pill { color:var(--ink); border-color:var(--line-strong); }
.art-spark { background:var(--surface-soft); color:var(--ink); }
.feature-strip > span, .feature-strip svg { color:var(--muted); }
.full-offer { background:var(--surface-raised); border-color:var(--line); }
.flagship-offer { background:var(--surface-raised); border-color:var(--line); }
.notice { background:var(--surface-raised); border-color:var(--line); color:var(--ink); }
.badge.success, .pill.success { background:var(--surface-soft); color:var(--ink); }
.points-pill { background:var(--surface-raised); color:var(--ink); }
.icon-button { color:var(--ink); border-color:var(--line); }
.icon-button:hover { background:var(--surface-raised); }
.button.secondary:hover { background:var(--surface-raised); }
.toast { background:var(--accent-fill); }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
@media (max-width:760px) {
  .topbar { align-items:center; }
  .mobile-brand { display:flex; min-width:0; }
  .mobile-brand > img { width:138px; }
  .mobile-nav { background:var(--glass); border-color:var(--line); }
  .mobile-nav .active { background:var(--surface-soft); color:var(--ink); }
  .mobile-nav a, .mobile-nav button { color:var(--muted); }
  .auth-brand-logo { width:250px; margin-bottom:22px; }
}

/* Documentary context and local sandbox administration. */
.price-purpose { display:block; margin-bottom:3px; color:var(--muted); font-size:11px; font-weight:500; }
.documentary-note { color:var(--muted); font-size:12px; line-height:1.6; margin:18px 0 10px; }
.documentary-sources { border-top:1px solid var(--line); margin:17px 0; padding-top:13px; font-size:13px; }
.documentary-sources summary { color:var(--ink); font-weight:650; cursor:pointer; line-height:1.6; }
.mission-filters { display:grid; grid-template-columns:minmax(210px, 2fr) minmax(180px, 1.5fr) minmax(130px, 1fr); gap:14px; margin-bottom:20px; }
.mission-filters .field { margin:0; }
.mission-filters input, .mission-filters select { width:100%; min-width:0; }
.mission-filters #mission-count { grid-column:1 / -1; margin:0; }
.mission-unit { border:1px solid var(--line); border-radius:15px; background:var(--surface); margin-bottom:13px; overflow:hidden; }
.mission-unit > summary { padding:18px 21px; cursor:pointer; color:var(--ink); font-weight:650; line-height:1.5; }
.mission-unit > summary small { display:block; margin:4px 0 0 19px; font-weight:400; color:var(--muted); }
.mission-unit > summary:focus-visible { outline:3px solid var(--focus); outline-offset:-4px; }
.mission-unit[open] > summary { border-bottom:1px solid var(--line); background:var(--surface-raised); }
.mission-unit .path-item { border:0; border-radius:0; margin:0; border-bottom:1px solid var(--line); }
.mission-unit .path-item:last-child { border-bottom:0; }
.mission-unit[hidden], .path-item[hidden] { display:none; }
.curriculum-scope { font-size:11px; color:var(--ink); background:var(--surface-raised); border-left:3px solid var(--line-strong); padding:10px 12px; line-height:1.6; }
@media (max-width:740px) { .mission-filters { grid-template-columns:1fr; padding:17px; } .mission-unit > summary { padding:16px; } }
.documentary-sources ul { padding-left:18px; margin:13px 0; }
.documentary-sources li { margin-bottom:15px; overflow-wrap:anywhere; }
.documentary-sources li p { margin:5px 0; font-size:12px; }
.documentary-sources li small { display:block; color:var(--muted); font-size:11px; }
.documentary-sources .text-link { text-decoration:underline; text-underline-offset:3px; }
.content-update-queue { margin-bottom:22px; }
.content-update-queue > summary { cursor:pointer; font-weight:700; color:var(--ink); }
.content-update-queue > p { margin-top:13px; }
.content-update { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:15px 0; border-top:1px solid var(--line); }
.content-update p { margin:5px 0 0; }
.content-update > div { min-width:0; overflow-wrap:anywhere; }
.content-update > button { flex:0 0 auto; }
.flow-setup-grid { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(240px, 1fr); gap:24px; align-items:start; }
.flow-setup-grid > .panel { min-width:0; }
.flow-setup-grid .field { margin:18px 0; }
.flow-advanced { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; margin:20px 0; }
.flow-advanced > summary { cursor:pointer; font-weight:650; line-height:1.5; }
.flow-advanced > p:first-of-type { margin-top:16px; }
.flow-advanced textarea { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; width:100%; }
.flow-connection-state dl { margin:20px 0; }
.flow-connection-state dl > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.flow-connection-state dt { color:var(--muted); font-size:13px; }
.flow-connection-state dd { margin:0; }
#flow-config-feedback { margin:12px 0; overflow-wrap:anywhere; }
@media (max-width:1050px) { .flow-setup-grid { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:640px) { .content-update { align-items:flex-start; flex-direction:column; gap:12px; } .flow-connection-state dl > div { flex-wrap:wrap; } }

/* PwrFarma: blue and calipso, with semantic colors for every screen and state. */
:root,html[data-color-mode="dark"]{
 color-scheme:dark;--paper:#0b1425;--surface:#101e33;--surface-raised:#14253d;--surface-soft:#182e49;--surface-hover:#203b59;--ink:#edf4ff;--muted:#afbed2;--line:#2a3e58;--line-strong:#6c87a5;--accent:#75ded9;--accent-fill:#163e52;--primary:#61d5d0;--primary-hover:#90e5df;--primary-ink:#082c36;--on-brand:#fff;--focus:#8de9e2;--glass:#101e33f2;--shadow-color:#02081340;--shadow:0 12px 36px #02081326;--success-bg:#123c3c;--success-ink:#9be6d5;--success-border:#35796e;--danger-bg:#422936;--danger-ink:#ffb8bf;--danger-border:#a46576;--warning-bg:#342f21;--warning-ink:#e9cf91;--warning-border:#71613c;--hero-start:#112b49;--hero-end:#12233c;--blue-text:#a7ceff;--brand-indigo:#343f75;--brand-teal:#61d5d0;--brand-teal-ink:var(--accent);--violet:var(--accent);--violet-dark:var(--primary-hover);--lilac:var(--surface-soft);--mint:var(--accent-fill);--green:var(--success-ink);--peach:var(--surface-soft);--yellow:var(--warning-bg);--radius:18px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif
}
:root,html[data-color-mode="light"]{color-scheme:light;--paper:#f2f6fc;--surface:#fff;--surface-raised:#f7faff;--surface-soft:#e8f0fa;--surface-hover:#dce9f6;--ink:#152b48;--muted:#51647c;--line:#d6e1ed;--line-strong:#647c98;--accent:#126a73;--accent-fill:#dcf3f1;--primary:#174c7d;--primary-hover:#103a62;--primary-ink:#fff;--focus:#126a73;--glass:#fffffff2;--shadow-color:#173b6514;--shadow:0 12px 36px #173b650a;--success-bg:#e1f4ee;--success-ink:#146355;--success-border:#6cae9e;--danger-bg:#fff0f0;--danger-ink:#94374b;--danger-border:#ca8592;--warning-bg:#fbf3df;--warning-ink:#765615;--warning-border:#c4a557;--hero-start:#e6f0fc;--hero-end:#e3f3f2;--blue-text:#235f93}
html,body{background:var(--paper);color:var(--ink)}body{font-size:14px}::selection{background:var(--accent-fill);color:var(--ink)}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.skip-link{background:var(--primary);color:var(--primary-ink)}
.brand-logo-dark{display:none!important}html[data-color-mode="dark"] .brand-logo-light{display:none!important}html[data-color-mode="dark"] .brand-logo-dark{display:block!important}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 10px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-raised);color:var(--ink);font-size:12px;font-weight:600;line-height:1.3}.theme-toggle:hover{background:var(--surface-hover);border-color:var(--accent)}.theme-toggle svg{width:18px;height:18px}.theme-sun{display:none}html[data-color-mode="light"] .theme-sun{display:block}html[data-color-mode="light"] .theme-moon{display:none}
.demo-banner{font-size:11px;background:var(--paper);color:var(--muted);padding-block:8px}.sidebar{background:var(--paper)}.sidebar>.brand{height:85px;min-height:85px}.sidebar>.brand{width:calc(100% + 12px);margin-inline:-6px;padding-inline:0}.sidebar .brand-wordmark{width:206px;max-width:100%}.sidebar>.nav{margin-top:27px;gap:8px}.nav-link{color:var(--muted);font-size:13px;min-height:45px;border-radius:9px}.nav-link:hover{background:var(--surface-raised);color:var(--ink)}.nav-link.active{color:var(--accent);background:var(--surface-soft);border-color:var(--line);box-shadow:inset 3px 0 var(--accent)}.nav-caption,.version-label{font-size:10px;color:var(--muted)}.sidebar-note{background:transparent;border-top:1px solid var(--line);border-radius:0;padding:22px 3px 0}.sidebar-note strong{color:var(--ink);font-size:13px}.sidebar-note p{color:var(--muted);font-size:12px}.sidebar-note>svg{color:var(--accent)}
.topbar{background:var(--glass);min-height:85px;padding-block:16px}.topbar-actions{gap:12px}.breadcrumb,.user-name{font-size:12px}.breadcrumb{color:var(--muted)}.topbar .button.small{min-height:40px}.topbar .icon-button{min-height:40px;width:40px}.avatar,.points-pill{color:var(--accent);background:var(--accent-fill)}.points-pill{font-size:11px}.page{padding-top:32px;max-width:1480px}.page-title{font-weight:650;letter-spacing:-.04em}.page-heading .muted{font-size:14px}.eyebrow{color:var(--accent);font-size:11px;letter-spacing:.1em}.section-header h2{font-size:24px;letter-spacing:-.035em}.section-header p{font-size:13px}
.button{min-height:44px;font-size:13px;padding:11px 17px}.button.small{min-height:40px;font-size:12px}.button.primary,button.primary,a.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.button.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:none}.button.secondary,button.secondary,a.secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}.button.secondary:hover{background:var(--surface-hover)}.button.ghost,button.ghost,a.ghost{color:var(--accent)}.button.ghost:hover{background:var(--surface-soft)}.button.danger{color:var(--danger-ink);background:var(--danger-bg);border-color:var(--danger-border)}.icon-button,.button.icon-button,.circle-button{background:var(--surface-raised);color:var(--ink);border-color:var(--line-strong)}.icon-button:hover,.circle-button:hover{background:var(--surface-hover);color:var(--accent)}.circle-button{width:44px;height:44px;min-height:44px;padding:11px}
.hero{background:linear-gradient(115deg,var(--hero-start),var(--hero-end));border-color:var(--line);min-height:324px}.hero-copy{padding:34px}.hero-title{font-size:clamp(32px,3.35vw,47px);font-weight:650;letter-spacing:-.05em}.hero-title>span,.hero-title em{color:var(--accent)}.hero-pill{color:var(--blue-text);border-color:var(--line-strong);font-size:10px;margin-bottom:19px}.hero-pill::before{background:var(--accent)}.hero-subtitle{font-size:14px;color:var(--muted);max-width:390px;line-height:1.7}.hero-footnote{font-size:11px;color:var(--muted)}.hero-actions .button.secondary{border-color:var(--line-strong)}.hero-visual{min-height:324px}.hero-visual::before{background:var(--accent-fill);box-shadow:0 0 70px var(--accent-fill)}.orbit{border-color:var(--line-strong);opacity:.35}.art-card{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--shadow)}.art-card-one{transform:rotate(-5deg)}.art-card-two{transform:rotate(4deg)}.art-card strong{font-size:13px}.art-card .mini-label,.art-card .mini-check{font-size:9px;color:var(--muted)}.art-card-two>svg,.art-spark{color:var(--accent);background:var(--accent-fill)}.art-caption{color:var(--muted);font-size:10px}.feature-strip{padding-block:23px}.feature-strip>span{font-size:11px;color:var(--muted)}.feature-strip svg{color:var(--accent)}
.module-card,.panel,.stat-card,.choice-card{background:var(--surface);border-color:var(--line);border-radius:14px;box-shadow:none}.module-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-2px)}.module-art,[data-theme] .module-art{height:115px;background:var(--surface-soft);color:var(--blue-text)}[data-theme="mint"] .module-art{background:var(--accent-fill);color:var(--accent)}[data-theme="peach"] .module-art{background:var(--hero-start);color:var(--blue-text)}[data-theme="rose"] .module-art{background:var(--hero-end);color:var(--accent)}.module-icon{background:transparent;border-color:var(--line-strong);border-radius:12px;width:54px;height:54px;transform:none}.module-icon svg{transform:none}.module-number{color:var(--muted);font-size:10px}.module-tag{color:var(--ink);background:var(--surface);font-size:10px}.module-body{padding:20px 18px 17px}.module-title{font-size:18px;line-height:1.35;letter-spacing:-.025em;margin-top:12px}.module-description{font-size:13px}.module-meta{font-size:11px;gap:8px}.module-footer>span>strong{font-size:22px}.module-footer>span>small{font-size:11px}.module-footer{align-items:center}.badge,.pill{background:var(--surface-soft);color:var(--muted);font-size:11px;line-height:1.5}.badge.success,.pill.success{background:var(--success-bg);color:var(--success-ink)}.badge.warning{background:var(--warning-bg);color:var(--warning-ink)}.badge.neutral{background:var(--surface-soft);color:var(--muted)}.badge.error{background:var(--danger-bg);color:var(--danger-ink)}.progress-track,.quiz-progress{background:var(--surface-soft)}.progress-track>span,.quiz-progress>span{background:var(--primary)}.progress-caption{font-size:12px}
.notice,.curriculum-scope{background:var(--surface-raised);color:var(--muted);border-color:var(--line);font-size:13px}.notice strong{color:var(--ink)}.notice.warning,.proposed-price{background:var(--warning-bg);color:var(--warning-ink);border-color:var(--warning-border)}.proposed-price{font-size:12px}.flagship-offer{background:var(--hero-start);border-color:var(--line-strong)}.full-offer{background:var(--surface-raised)}.offer-features>li{color:var(--muted)}.offer-price>strong{color:var(--ink)}.offer-card>.small,.offer-choice>.small,.annual-offer>p{font-size:12px}
.auth-intro p,.auth-card>p{color:var(--muted);font-size:14px}.auth-intro>h1>span{color:var(--accent)}.auth-brand-logo{width:290px}.auth-illustration svg{color:var(--accent)!important;opacity:.65}.auth-switch,.auth-card .auth-switch{font-size:13px}.auth-switch a{color:var(--accent)}.demo-options{background:var(--surface-raised)}.demo-options p{font-size:13px}.demo-options .button{background:var(--surface);border-color:var(--line-strong);font-size:13px}
.field label,label.field,.checkbox-field{color:var(--ink);font-size:13px}.field input,.field select,.field textarea,input.input,select.input,textarea.input,.assign-form select{background:var(--paper);color:var(--ink);border-color:var(--line-strong);min-height:44px;font-size:14px}.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}.field small{color:var(--muted);font-size:12px}.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent)}.form-error{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border);font-size:13px}input[type="checkbox"]{accent-color:var(--primary)}
.module-summary[data-theme]{background:var(--hero-start);border-color:var(--line)}.objective-list li,.access-panel>p{color:var(--muted);font-size:14px}.objective-list svg{color:var(--accent)}.access-panel>.text-link{font-size:13px}.mission-filters{padding:22px}.mission-filters #mission-count{font-size:13px}.mission-unit{background:var(--surface);border-color:var(--line);border-radius:12px}.mission-unit>summary{color:var(--ink);font-size:14px;padding:18px 20px}.mission-unit>summary small{color:var(--muted);font-size:12px}.mission-unit>summary:focus-visible{outline-color:var(--focus);outline-offset:-4px}.mission-unit[open]>summary{background:var(--surface-raised);border-color:var(--line)}.mission-unit .path-item{border-color:var(--line)}.path-item h3{font-size:16px}.path-item p{font-size:13px;color:var(--muted)}.path-item .small{font-size:12px}.path-item .button.small{min-height:44px}.path-number{color:var(--accent);background:var(--surface-soft);border-color:var(--line)}.locked-label{color:var(--muted);font-size:12px}
.stage-tab{font-size:12px;color:var(--muted);min-height:44px}.stage-tab.active{color:var(--accent);background:var(--surface-soft);border-color:var(--line)}.lesson-key strong{font-size:13px}.lesson-key p{font-size:13px;color:var(--muted);line-height:1.75}.lesson-sidebar>.small{font-size:12px}.flashcard{color:var(--ink);background:var(--hero-start);border-color:var(--line-strong)}.flashcard.flipped{background:var(--accent-fill);color:var(--ink);border-color:var(--accent)}.flashcard>.card-label{font-size:11px;color:var(--accent)}.flashcard>strong{font-size:23px;font-weight:550}.card-tap,.flipped .card-tap{color:var(--accent);font-size:12px}.card-helper,.card-bottom{font-size:12px}.card-bottom .button{min-height:44px;font-size:12px}.answer-option{background:var(--surface-raised);color:var(--ink);border-color:var(--line-strong);font-size:14px;padding:15px;min-height:54px}.answer-option:hover:not(:disabled){background:var(--surface-hover);border-color:var(--accent)}.answer-option .option-letter{background:var(--surface-soft);color:var(--muted);border-color:var(--line-strong)}.answer-option.selected,.answer-option.selected:hover:not(:disabled){background:var(--accent-fill);border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}.answer-option.correct,.feedback.correct{background:var(--success-bg);color:var(--success-ink);border-color:var(--success-border)}.answer-option.incorrect,.feedback.incorrect{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}.answer-option:disabled{opacity:1}.answer-option.correct .option-letter{color:var(--success-ink);background:transparent;border-color:var(--success-border)}.answer-option.incorrect .option-letter{color:var(--danger-ink);background:transparent;border-color:var(--danger-border)}.feedback{font-size:14px}.feedback p,.feedback small{color:inherit;font-size:13px}.order-item{background:var(--surface-raised);border-color:var(--line);font-size:14px}.order-number{background:var(--surface-soft);color:var(--accent);font-size:12px}.question-prompt{font-size:24px;line-height:1.45}
.documentary-note,.source-note,.documentary-sources{color:var(--muted);font-size:13px}.documentary-sources summary{color:var(--accent);font-size:13px}.documentary-sources li p,.documentary-sources li small{color:var(--muted);font-size:12px}.curriculum-scope{border-left-color:var(--accent);font-size:12px}.round-icon,.results-summary .round-icon,.completion-medal{background:var(--accent-fill);color:var(--accent)}.results-summary{background:var(--hero-start);border-color:var(--line)}.results-summary p{color:var(--muted);font-size:14px}.result-card>p{font-size:14px}.result-score{background:var(--surface-soft);color:var(--accent);border-color:var(--line-strong)}.dashboard-grid>.learning-card{background:var(--hero-start);border-color:var(--line)}.dashboard-grid>.learning-card p{color:var(--muted);font-size:14px}.stat-card>span,.stat-card>small,.stat-card>a{color:var(--muted);font-size:12px}.stat-card>.icon{color:var(--accent)}.practice-config>p,.review-promo p,.empty-state p{font-size:14px}.review-item strong{font-size:14px}.review-item small{font-size:12px}.empty-state{background:var(--surface-raised);border-color:var(--line-strong)}
.table-wrap{border-color:var(--line)}table{font-size:13px}th{background:var(--surface-raised);color:var(--muted);font-size:12px;border-color:var(--line)}td{border-color:var(--line)}tbody tr:hover{background:var(--surface-raised)}td .muted,.payment-history td>small,.assignment>small{color:var(--muted);font-size:12px}.assignment>strong,.subscription-row p{font-size:13px}.member-details{background:var(--surface-raised);border-color:var(--line)}summary{color:var(--ink);font-size:13px}.tab{color:var(--muted);font-size:13px;min-height:44px}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.rank-row{border-color:var(--line)}.rank-row.self{background:var(--surface-soft)}.rank-position{background:var(--surface-raised);color:var(--muted)}.rank-row:first-child .rank-position{background:var(--warning-bg);color:var(--warning-ink)}.rank-score{color:var(--accent)}.rank-alias small,.rank-score small{font-size:12px}.editor-item{color:var(--muted);font-size:13px}.editor-item.active{background:var(--surface-soft);color:var(--accent);border-color:var(--line-strong)}.editor-item small,.editor-item .badge{color:var(--muted);font-size:11px}#editor-json,.flow-advanced textarea{font-size:13px}#editor-feedback{color:var(--accent);font-size:13px}.dialog-backdrop{background:#030b18b8}.dialog{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--shadow)}.dialog>p,.dialog li{color:var(--muted);font-size:14px}.dialog-close{background:var(--surface-soft);color:var(--ink);width:40px;height:40px}.toast{background:var(--ink);color:var(--paper);border:1px solid var(--line-strong)}.toast.error{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}.page-footer{color:var(--muted);font-size:11px}.small{font-size:12px}
@media(max-width:1050px){.topbar-actions{gap:8px}.topbar-actions .user-name{display:none}.hero{grid-template-columns:1.3fr 1fr}.hero-copy{padding:29px}}
@media(max-width:760px){.topbar{padding:14px 20px;min-height:77px}.mobile-brand>img{width:168px}.topbar-actions{gap:8px}.topbar-actions .points-pill{display:none}.theme-toggle{min-height:40px}.topbar-actions .avatar{width:32px;height:32px;font-size:11px}.topbar-actions .icon-button{width:40px;min-height:40px}.page{padding:24px 20px 95px}.hero{display:block;min-height:0}.hero-copy{padding:27px}.hero-title{font-size:36px}.hero-subtitle{max-width:100%;font-size:14px;margin-bottom:19px}.hero-visual{display:none}.hero-pill{font-size:9px;line-height:1.6;margin-bottom:18px}.hero-actions{gap:8px}.hero-actions .button{width:100%;min-height:44px}.hero-footnote{font-size:11px;line-height:1.7}.feature-strip{padding-block:20px;gap:15px 12px}.feature-strip>span{font-size:11px;line-height:1.5}.module-title{font-size:21px}.module-description{font-size:14px}.module-meta{font-size:12px}.module-art,[data-theme] .module-art{height:105px}.module-card .badge{font-size:11px}.section-header{align-items:flex-start}.section-header>.pill{flex-shrink:0;font-size:10px}.section-header h2{font-size:23px}.section-header p{font-size:13px}.mobile-nav{background:var(--glass);border-color:var(--line);padding-bottom:max(8px,env(safe-area-inset-bottom))}.mobile-nav a,.mobile-nav button{color:var(--muted);font-size:10px;min-height:48px}.mobile-nav .active{color:var(--accent);background:var(--surface-soft)}.mission-filters{padding:18px}.mission-unit>summary{padding:17px;font-size:14px}.path-item .small{font-size:12px}.lesson-stage-nav{gap:6px}.stage-tab{font-size:11px;padding:10px 5px;line-height:1.45}.lesson-key p{font-size:13px}.lesson-sidebar>.small{font-size:12px}.lesson-stage h2{font-size:23px}.flashcard>strong{font-size:22px}.card-bottom .button{font-size:12px}.order-item{gap:10px;padding:14px 10px;font-size:13px}.order-buttons{flex-direction:column}.results-summary p{font-size:13px}.field input,.field select,.field textarea{font-size:16px}.page-footer{font-size:11px}.stat-card>span{font-size:11px;min-height:35px}.stat-card>small,.stat-card>a{font-size:10px}}
@media(max-width:420px){.topbar{padding-inline:16px}.mobile-brand>img{width:145px}.topbar-actions .theme-toggle{padding-inline:9px}.topbar-actions .theme-toggle>span{display:none}.topbar-actions .button.primary{padding-inline:10px;font-size:11px}.topbar-actions .button.primary>svg{display:none}.topbar-actions{gap:7px}.hero-copy{padding:24px}.hero-title{font-size:34px}.demo-banner{font-size:10px}.section-header{flex-wrap:wrap;gap:12px}}
@media print{html[data-color-mode]{--paper:#fff;--surface:#fff;--ink:#152b48;--muted:#51647c;--surface-raised:#f2f6fc;--surface-soft:#e8f0fa;--line:#d6e1ed}.theme-toggle{display:none}}

/* Color modes switch atomically, preserving contrast during the change. */
html[data-color-mode] *,html[data-color-mode] *::before,html[data-color-mode] *::after { transition-property: transform, box-shadow, opacity; }

/* Practice comes first; extended reading remains available after the activity. */
.lesson-content { max-width:1040px; margin-inline:auto; }
.lesson-heading { margin-bottom:20px; }
.lesson-heading .lesson-back { display:inline-block; margin-bottom:12px; font-size:12px; }
.lesson-heading .page-title { margin:0 0 10px; font-size:clamp(25px,3vw,35px); line-height:1.16; }
.lesson-heading > p { margin:0; font-size:14px; }
.lesson-content .lesson-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
.lesson-content .lesson-stage-nav { flex-direction:row; margin:0 0 20px; gap:8px; }
.lesson-content .stage-tab { flex:1; flex-direction:row; align-items:center; justify-content:center; text-align:center; padding:10px 8px; font-size:12px; line-height:1.35; }
.lesson-content .lesson-sidebar { position:static; padding:18px 22px; }
.lesson-safety { margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.6; }
.lesson-reference > summary { min-height:44px; display:list-item; align-content:center; color:var(--accent); font-size:14px; cursor:pointer; }
.lesson-reference-body { padding-top:12px; }
.lesson-reference .lesson-key { margin:14px 0; padding-top:14px; }

/* Drag from the right edge with a finger or mouse; keyboard ordering remains available. */
.order-instructions { color:var(--muted); font-size:13px; line-height:1.6; }
.order-list { position:relative; gap:12px; }
.order-list .order-item,.order-drag-ghost { display:grid; grid-template-columns:minmax(0,1fr)44px; align-items:center; gap:12px; padding:14px; border-radius:12px; }
.order-list .order-item::before,.order-drag-ghost::before { content:none; }
.order-copy { min-width:0; }
.order-copy .order-number { display:block; width:auto; height:auto; padding:0; margin:0 0 4px; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.04em; }
.order-copy > strong { display:block; font-size:14px; font-weight:550; line-height:1.55; overflow-wrap:anywhere; }
.order-drag-handle { display:grid; place-items:center; align-self:stretch; width:58px; min-height:52px; margin:-14px -14px -14px 0; padding:8px; border:0; border-left:1px solid var(--line); border-radius:0 12px 12px 0; background:var(--surface-soft); color:var(--muted); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.order-drag-handle:hover { border-color:var(--accent); color:var(--accent); background:var(--surface-hover); }
.order-drag-handle > svg { width:22px; height:22px; }
.order-drop-placeholder { border:2px dashed var(--accent)!important; background:var(--accent-fill)!important; }
.order-drop-placeholder > * { visibility:hidden; }
.order-drag-ghost { list-style:none; position:fixed; left:0; top:0; z-index:1000; margin:0!important; box-sizing:border-box; pointer-events:none; user-select:none; border:1px solid var(--accent); background:var(--surface); color:var(--ink); box-shadow:0 16px 36px var(--shadow-color),0 3px 12px #0002; will-change:transform; }
.order-drag-ghost .order-drag-handle { color:var(--accent); border-color:var(--accent); background:var(--accent-fill); }
.order-is-dragging,.order-is-dragging * { cursor:grabbing!important; }
.order-landed { animation:order-settle .18s ease-out; }
@keyframes order-settle { from{transform:scale(1.012);border-color:var(--accent)} to{transform:scale(1)} }
@media(prefers-reduced-motion:reduce) { .order-landed { animation:none; } }
@media(max-width:760px) {
  .lesson-content .lesson-heading { margin-bottom:16px; }
  .lesson-content .lesson-heading .page-title { font-size:25px; }
  .lesson-content .lesson-stage { padding:18px 16px; }
  .lesson-content .lesson-stage-nav { gap:5px; margin-bottom:16px; }
  .lesson-content .stage-tab { flex-direction:column; padding:8px 3px; font-size:11px; min-height:48px; }
  .lesson-content .stage-tab svg { width:17px; height:17px; }
  .lesson-content .lesson-sidebar { padding:16px; }
}

/* Private access screens keep theme changes presentation-only. */
.auth-card input, .auth-card select, .auth-card .button, #invitation-form input, #invitation-form select, #invitation-form .button { min-height:44px; }
.auth-switch a { display:inline-flex; align-items:center; min-height:44px; padding:4px 2px; color:var(--ink); }
.auth-card .notice { font-size:12px; }
.auth-card [role="status"]:focus, .auth-card [role="alert"]:focus { outline:3px solid var(--focus); outline-offset:4px; }
#invitation-form .form-error { margin:0; }
.auth-screen .mobile-nav { display:none; }