:root {
  color-scheme: light;
  --paper: #f6f4ed; --surface: #fffcf6; --edge: #dedfd2; --ink: #20352a; --muted: #526459;
  --green: #27483a; --green-dark: #203f32; --sage: #e5ebda; --peach: #f4dfd0; --gold: #f4ebcc;
  --serif: Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans); color: var(--ink); background: var(--paper);
}
* { box-sizing:border-box; }
body { margin:0; min-width:280px; -webkit-text-size-adjust:100%; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-family:var(--serif); font-weight:normal; }
h1 { font-size:clamp(2.25rem,5vw,4.125rem); letter-spacing:-.052em; line-height:1.03; }
h2 { font-size:clamp(1.45rem,2.75vw,2.1rem); line-height:1.12; letter-spacing:-.027em; }
h3 { font-size:1.07rem; line-height:1.3; }
p { line-height:1.55; }
button,input,a { font:inherit; }
button,a,input,label.file-label { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { opacity:.65; cursor:wait; }
:focus-visible { outline:3px solid #a3623e; outline-offset:3px; }
[tabindex="-1"]:focus { outline:none; }
.skip { position:fixed; z-index:20; top:10px; left:10px; padding:12px; color:white; background:var(--green); transform:translateY(-150%); }
.skip:focus { transform:none; }
.shell { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100svh; }
.sidebar { position:sticky; top:0; height:100svh; overflow-y:auto; background:#edf0e6; border-right:1px solid var(--edge); padding:32px 15px 22px; display:flex; flex-direction:column; }
.desktop-brand,.mobile-brand,.entry-brand { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.15rem; font-weight:700; letter-spacing:-.04em; white-space:nowrap; }
.desktop-brand { margin:0 0 36px 4px; }
.brand-mark { display:grid; place-items:center; flex:none; }
.brand-mark img { border-radius:12px; }
.desktop-brand small,.mobile-brand small,.entry-brand small { display:block; margin-top:4px; font:700 .55rem/1.2 var(--sans); letter-spacing:.15em; }
.sidebar nav { display:grid; gap:3px; }
.nav-item { display:flex; align-items:center; gap:12px; width:100%; border:0; border-radius:11px; background:none; text-align:left; padding:0 13px; min-height:46px; font-weight:550; color:#3e5448; }
.nav-item.active { background:#dce6d5; color:#233e2f; font-weight:750; }
.sidebar-foot { margin-top:auto; padding:24px 12px 0; display:grid; gap:5px; font:italic 1.1rem var(--serif); }
.sidebar-foot span+span,.desktop-context { color:var(--muted); font:700 .66rem/1.4 var(--sans); letter-spacing:.14em; }
.mobile-brand,.bottom-nav { display:none; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:15px clamp(24px,4vw,56px); min-height:72px; border-bottom:1px solid var(--edge); }
.account-tools { display:flex; align-items:center; gap:12px; }
.avatar { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid #c7d4be; background:#e5ecdb; color:#294a39; font-weight:750; flex:none; }
.status { display:flex; align-items:center; gap:7px; font-size:.79rem; color:#365442; background:#e9eee3; padding:7px 10px; border-radius:99px; line-height:1.2; }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:#577a5e; flex:none; }
.page { max-width:1260px; margin-inline:auto; padding:36px clamp(24px,4vw,56px) 54px; }
.page-title { margin:0 0 24px; }
.page-title > p:last-child:not(.eyebrow) { color:var(--muted); margin-top:12px; max-width:61ch; }
.eyebrow { color:#4e6658; font:750 .69rem/1.4 var(--sans); letter-spacing:.13em; text-transform:uppercase; margin-bottom:8px; }
.hero { background:var(--green); color:#fffdf0; border-radius:22px; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(175px,1fr); align-items:center; overflow:hidden; position:relative; min-height:278px; }
.hero-copy { position:relative; z-index:1; padding:30px clamp(22px,4vw,42px); }
.tag { display:inline-flex; align-items:center; gap:6px; background:var(--sage); color:#315140; font-size:.72rem; font-weight:700; padding:6px 9px; border-radius:99px; line-height:1.3; }
.hero-tag { color:#e7efde; background:#365949; border:1px solid #608171; letter-spacing:.085em; }
.hero h2 { max-width:18ch; margin:13px 0 9px; font-size:clamp(1.8rem,3.5vw,3.25rem); }
.hero p { color:#e4ecd8; max-width:38ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px 15px; align-items:center; margin-top:20px; }
.hero-actions > span { display:inline-flex; align-items:center; gap:5px; color:#e4ecd8; font-size:.85rem; }
.hero-art { width:100%; height:auto; max-width:350px; align-self:end; justify-self:end; margin-right:8px; }
.section-lead { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:28px 0 12px; }
.stats,.insights,.settings-grid { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.insights,.settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.insights { margin-top:14px; }
.card { background:var(--surface); border:1px solid var(--edge); border-radius:17px; padding:19px; min-width:0; }
.card p:not(.eyebrow) { color:var(--muted); margin-top:6px; font-size:.94rem; }
.card h2 { margin:0 0 4px; }
.card .button:not(.file-label) { margin-top:12px; }
.tile-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#385640; background:var(--sage); flex:none; }
.stats .tile-icon { margin-bottom:12px; }
.tile-icon.peach { background:var(--peach); color:#79492d; }
.tile-icon.gold { background:var(--gold); color:#6b551d; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:9px 15px; border:1px solid transparent; border-radius:11px; text-decoration:none; font-weight:700; line-height:1.25; text-align:center; }
.primary { background:var(--green); color:white; }
.light { background:#f7f6e7; color:#27483a; }
.secondary { background:var(--sage); border-color:#d0dcc8; color:#244536; }
.plain { padding-inline:5px; background:none; color:#315643; }
.button svg,.nav-item svg { flex:none; }
@media (hover:hover) {
  .primary:hover { background:var(--green-dark); }
  .secondary:hover,.nav-item:hover { background:#dce6d5; }
  .light:hover { background:#e8efd8; }
  .plain:hover { text-decoration:underline; }
}
.entry { min-height:100svh; display:grid; grid-template-columns:minmax(280px,1fr) minmax(280px,1fr); }
.entry-art { position:relative; display:grid; align-content:center; justify-items:center; min-height:420px; padding:105px 24px 35px; background:var(--green); color:#f6f4ed; }
.entry-brand { position:absolute; top:max(25px, env(safe-area-inset-top)); left:clamp(18px,4vw,48px); }
.entry-brand .brand-mark img { outline:1px solid #73947b; }
.entry-art > img { width:min(83%,435px); height:auto; }
.entry-art > p { font:italic clamp(1.5rem,4vw,3rem) var(--serif); margin-top:8px; color:#e6ecd6; }
.entry-panel { align-self:center; width:min(100%,530px); padding:clamp(25px,5vw,64px); margin:auto; }
.entry-options,.stack,.module-list { display:grid; gap:12px; }
.learner-choice { display:grid; grid-template-columns:auto 1fr auto; text-align:left; align-items:center; gap:12px; width:100%; min-height:68px; padding:10px 14px; border:1px solid var(--edge); border-radius:15px; background:var(--surface); }
.learner-choice small,.module-list summary small { display:block; color:var(--muted); font-size:.87rem; margin-top:4px; font-weight:normal; }
.checkpoint,.history { display:flex; gap:13px; align-items:center; flex-wrap:wrap; }
.checkpoint > div,.history > div { flex:1 1 160px; }
.checkpoint h2 { font-size:1.55rem; }
.checkpoint .button,.history .button { margin-top:0 !important; }
.module-list details { padding:0; }
details > summary { cursor:pointer; min-height:58px; padding:13px 40px 13px 15px; display:flex; align-items:center; gap:13px; position:relative; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:16px; font-weight:700; color:#456451; }
details[open] > summary::after { content:"−"; }
.module-no { flex:none; background:var(--sage); border-radius:8px; width:34px; height:34px; display:grid; place-items:center; font-size:.76rem; font-weight:750; color:#3f6250; }
.module-lessons { margin:0 15px 11px; padding:0; list-style:none; }
.module-lessons li { border-top:1px solid var(--edge); padding:10px 0; display:flex; gap:12px; justify-content:space-between; align-items:baseline; font-size:.93rem; }
.muted { color:var(--muted); font-size:.86rem; }
.skill-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:15px; }
.skill { background:#edf0e7; padding:11px; border-radius:10px; font-size:.86rem; display:grid; gap:4px; }
progress { display:block; width:100%; height:8px; border:0; border-radius:99px; overflow:hidden; background:#dde5d7; accent-color:#53745e; }
progress::-webkit-progress-bar { background:#dde5d7; border-radius:99px; }
progress::-webkit-progress-value { background:#53745e; border-radius:99px; }
progress::-moz-progress-bar { background:#53745e; }
.narrow { width:min(100%,670px); margin:auto; }
.narrow > .plain { margin-bottom:12px; }
.question-progress { display:grid; gap:8px; margin:0 0 14px; color:#4e6658; font-size:.75rem; font-weight:750; letter-spacing:.1em; }
.question h1 { font-size:clamp(1.8rem,4vw,2.7rem); }
.question .passage { margin:14px 0 0 !important; padding:13px; background:#f1f3e9; border-radius:10px; color:#203c2e !important; font-size:1.15rem !important; }
.question form { margin-top:17px; }
.stack label { display:grid; gap:6px; font-weight:650; }
input:not([type="radio"],[type="file"]) { width:100%; min-height:48px; font-size:1rem; border:1px solid #899c8d; border-radius:9px; padding:9px 11px; background:white; color:var(--ink); }
fieldset { border:0; padding:0; margin:0; display:grid; gap:8px; min-width:0; }
.stack .choice { display:flex; align-items:center; gap:10px; padding:9px 12px; min-height:46px; border:1px solid #becbbb; border-radius:10px; cursor:pointer; }
.choice:has(:checked) { background:var(--sage); border-color:#64806a; }
.choice input { width:18px; height:18px; flex:none; accent-color:var(--green); }
.answer-actions { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; }
.answer-actions .button { margin-top:0 !important; }
.settings-grid .answer-actions { margin-top:12px; }
.file-label { position:relative; cursor:pointer; }
.file-label input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.file-label:focus-within { outline:3px solid #a3623e; outline-offset:3px; }
.result-summary { background:#e9eee1; }
.answer-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 5px; }
.answer-comparison > div { border-radius:10px; background:var(--paper); padding:10px 12px; }
.answer-comparison > div+div { background:var(--sage); }
.answer-comparison dt { font-size:.78rem; font-weight:700; color:var(--muted); }
.answer-comparison dd { margin:5px 0 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.result-question details > summary { min-height:44px; padding:5px 35px 5px 0; color:#315643; font-weight:700; }
.notice { background:#f4e6d3; color:#573923; border-radius:10px; padding:10px 12px; margin-bottom:15px; font-size:.94rem; }
@media(max-width:800px) {
  .shell { display:block; }
  .sidebar,.desktop-context { display:none; }
  .mobile-brand { display:flex; font-size:1.12rem; }
  .mobile-brand .brand-mark img { width:37px; height:37px; border-radius:10px; }
  .topbar { min-height:63px; padding:calc(8px + env(safe-area-inset-top)) max(15px, env(safe-area-inset-right)) 8px max(15px, env(safe-area-inset-left)); }
  .page { padding:24px max(16px,env(safe-area-inset-right)) calc(98px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .bottom-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; position:fixed; bottom:0; left:0; right:0; z-index:5; background:var(--surface); border-top:1px solid var(--edge); padding:5px max(6px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
  .bottom-nav .nav-item { min-height:48px; padding:3px 1px; flex-direction:column; justify-content:center; gap:3px; font-size:clamp(.64rem,2.2vw,.75rem); text-align:center; }
  .shell:has(input[type="text"]:focus) .bottom-nav { visibility:hidden; }
}
@media(max-width:550px) {
  .hero { display:block; min-height:0; }
  .hero-copy { padding:21px 18px; }
  .hero h2 { max-width:16ch; }
  .hero-art { display:none; }
  .stats,.insights,.settings-grid { grid-template-columns:1fr; gap:10px; }
  .stats .card { display:grid; grid-template-columns:auto 1fr; gap:1px 12px; align-items:center; }
  .stats .tile-icon { grid-row:span 3; margin:0; }
  .stats .eyebrow { margin-bottom:0; }
  .stats .card p:not(.eyebrow) { margin:1px 0 0; }
  .stats .card .tag { justify-self:start; }
  .card { padding:15px; }
  .entry { display:block; }
  .entry-art { padding:82px 18px 14px; min-height:206px; }
  .entry-art > img { width:155px; }
  .entry-art > p { font-size:1.25rem; margin:0; }
  .entry-panel { padding:24px 17px calc(26px + env(safe-area-inset-bottom)); }
  .skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .avatar { width:44px; height:44px; }
  .account-tools { gap:6px; }
  .status { font-size:.69rem; padding:6px 7px; }
}
@media(max-width:365px) {
  .mobile-brand { font-size:.97rem; gap:5px; }
  .mobile-brand small { font-size:.5rem; }
  .status { max-width:84px; }
}