:root {
  color-scheme: dark;
  --bg: #101216;
  --panel: #191c22;
  --line: #333740;
  --text: #f3f2ee;
  --muted: #b1b4bd;
  --red: #e23839;
  --gold: #eaca83;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-width: 320px;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
}
button,
a,
input {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
[hidden] {
  display: none !important;
}
.sitebar {
  min-height: 84px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px max(24px, calc((100vw - 1180px) / 2));
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 800;
  white-space: nowrap;
}
.brand img {
  border-radius: 9px;
}
.divider {
  width: 1px;
  height: 22px;
  background: var(--line);
}
.section-brand {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.sitebar nav {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  min-height: 72vh;
}
h1 {
  font-size: clamp(34px, 5vw, 62px);
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 18px 0 24px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
h2 {
  font-size: 25px;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}
h3 {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 14px 0;
}
p {
  line-height: 1.65;
  color: var(--muted);
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.17em;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
}
.hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 25px 0 65px;
}
.hero p {
  max-width: 530px;
  font-size: 17px;
}
.hero h1 span {
  color: var(--gold);
}
.primary,
.secondary,
.quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 650;
  padding: 14px 20px;
  min-height: 46px;
}
.primary {
  background: var(--red);
  color: #fff;
}
.secondary {
  background: #242831;
  color: var(--text);
  border: 1px solid #424751;
}
.quiet {
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
}
.primary:hover {
  background: #f24748;
}
.secondary:hover {
  background: #303641;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 26px;
}
.fine {
  font-size: 12px !important;
  color: var(--muted);
}
.source-demo {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 70px #0003;
  transform: rotate(1deg);
}
.source-demo .paper {
  background: #ece9e0;
  color: #242728;
  padding: 24px;
  border-radius: 7px;
  margin: 24px 0;
}
.paper p {
  color: #353b3c;
  font-family: Georgia, serif;
  font-size: 19px;
}
.source-demo .caption {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  gap: 15px;
}
.source-demo .tag {
  background: #eaca8315;
  color: var(--gold);
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 11px;
  white-space: nowrap;
}
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  gap: 38px;
  padding-top: 35px;
}
.features p {
  font-size: 14px;
}
.number {
  color: var(--gold);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 40px;
}
.page-head h1 {
  font-size: 44px;
  margin-bottom: 10px;
}
.page-head p {
  margin: 0;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 24px;
  min-width: 0;
}
.card h3 {
  overflow-wrap: anywhere;
}
.card p {
  font-size: 13px;
}
.card a {
  display: block;
}
.card:hover {
  border-color: #5c626d;
}
.card .pill {
  font-size: 11px;
  color: var(--gold);
  background: #eaca8312;
  padding: 6px 9px;
  border-radius: 5px;
  display: inline-block;
}
.card .card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 44px 0 20px;
}
.section-heading h2 {
  margin: 0;
  font-size: 22px;
}
.empty {
  border: 1px dashed #41454d;
  border-radius: 12px;
  padding: 28px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}
.continue-card {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(110deg, #24231f, #1c2027);
  border: 1px solid #514a38;
  border-radius: 15px;
  padding: 30px;
}
.continue-card h2 {
  margin: 8px 0;
}
.continue-card p {
  margin: 0;
  font-size: 14px;
}
.form-panel {
  max-width: 600px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
}
.form-panel h1 {
  font-size: 34px;
}
.form-panel label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 24px 0 9px;
}
input {
  width: 100%;
  background: #111419;
  color: var(--text);
  border: 1px solid #535864;
  border-radius: 8px;
  padding: 14px;
}
input[type="file"] {
  padding: 24px;
  line-height: 1.6;
}
form .primary {
  margin-top: 24px;
}
.error {
  color: #ffb6b5;
  font-size: 14px;
}
.crumb {
  display: inline-block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 25px;
}
.upload-box {
  padding: 30px;
  background: var(--panel);
  border: 1px dashed #6a624d;
  border-radius: 14px;
  margin: 25px 0;
}
.upload-box label {
  display: block;
  font-weight: 650;
  margin-bottom: 12px;
}
.upload-box p {
  font-size: 13px;
}
.source-list {
  display: grid;
  gap: 12px;
}
.source-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.source-row strong {
  overflow-wrap: anywhere;
  display: block;
  font-size: 14px;
}
.source-row p {
  font-size: 12px;
  margin: 8px 0 0;
}
.source-row .secondary {
  flex-shrink: 0;
}
.source-reader {
  background: #ece9e0;
  color: #22282a;
  border-radius: 12px;
  padding: 28px;
  margin-top: 28px;
}
.source-block {
  scroll-margin-top: 35px;
  position: relative;
  border-bottom: 1px solid #d1cec5;
  padding: 15px 0;
}
.source-block pre {
  font:
    17px/1.75 Georgia,
    serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 10px 0;
}
.source-block a {
  font:
    11px system-ui,
    sans-serif;
  color: #596366;
}
.source-block:target {
  background: #fae8b5;
  outline: 10px solid #fae8b5;
}
.progress {
  margin: 14px 0;
  font-size: 13px;
  color: var(--gold);
}
.notice {
  padding: 18px 22px;
  border-radius: 9px;
  background: #eaca8310;
  border: 1px solid #6a6040;
  color: #ddd1ae;
  font-size: 13px;
  line-height: 1.6;
}
.preview-notice {
  background: #4d3d1c;
  text-align: center;
  padding: 10px 20px;
  font-size: 12px;
}
.loading {
  padding: 50px 0;
}
footer {
  max-width: 1180px;
  margin: auto;
  padding: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 20px;
  font-size: 11px;
  color: var(--muted);
}
footer span:last-child {
  margin-left: auto;
}
#status {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  padding: 0;
  background: #30353f;
  border-radius: 9px;
  z-index: 10;
  font-size: 13px;
}
#status:not(:empty) {
  padding: 14px 20px;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  max-width: 440px;
  padding: 30px;
}
dialog::backdrop {
  background: #0009;
}
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .source-demo {
    max-width: 520px;
  }
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features {
    gap: 22px;
  }
  .back-site {
    display: none;
  }
  .sitebar {
    gap: 15px;
    padding: 16px 24px;
  }
}
@media (max-width: 520px) {
  main {
    padding: 38px 20px 64px;
  }
  .sitebar {
    padding: 14px 20px;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 74px;
  }
  .brand {
    font-size: 10px;
    gap: 7px;
  }
  .brand img {
    width: 28px;
    height: 28px;
  }
  .section-brand {
    font-size: 14px;
  }
  .sitebar nav {
    font-size: 11px;
  }
  .sitebar nav button {
    font-size: 11px;
    min-height: 32px;
    padding: 6px;
  }
  .divider {
    height: 18px;
  }
  .hero {
    padding: 0 0 40px;
  }
  .hero p {
    font-size: 15px;
  }
  .source-demo {
    padding: 20px;
    transform: none;
  }
  .features,
  .cards {
    grid-template-columns: 1fr;
  }
  .features {
    gap: 18px;
  }
  .page-head {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 28px;
  }
  .page-head h1 {
    font-size: 36px;
  }
  .continue-card {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }
  .form-panel {
    padding: 23px;
  }
  .source-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .source-reader {
    padding: 20px;
  }
  .upload-box {
    padding: 20px;
  }
  .section-heading {
    gap: 15px;
  }
  footer {
    flex-wrap: wrap;
  }
  footer span:last-child {
    margin-left: 0;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
main:focus {
  outline: none;
}
.cards > .empty:only-child {
  grid-column: 1/-1;
}

.source-page { width: 100%; background: white; overflow: hidden; margin-top: .75rem; }
.source-page canvas { display: block; width: 100%; height: auto; }
.lesson-controls { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; align-items: center; }
.lesson-controls select { max-width: 100%; padding: .8rem; background: #202329; color: #fff; border: 1px solid #555; border-radius: .5rem; }
.source-reference { display: inline-block; margin-top: .75rem; color: #343638; }

/* Native Learn experience: source pages live only in the source reader. */
.learn-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.learn-top .crumb { margin:0; }
.learn-mode { color:var(--gold); font-size:12px; letter-spacing:.16em; font-weight:750; }
.learn-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:44px; align-items:start; }
.learn-path { padding:24px 0; }
.learn-path h2 { font-size:22px; margin:12px 0 24px; }
.learn-path progress { width:100%; height:6px; accent-color:var(--red); border:0; border-radius:20px; overflow:hidden; }
.learn-path progress::-webkit-progress-bar { background:#30343b; }
.learn-path progress::-webkit-progress-value { background:var(--red); }
.learn-progress-label { font-size:12px; color:var(--muted); margin:10px 0 24px; }
.learn-jump { width:100%; padding:12px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; font:inherit; font-size:13px; }
.learn-jump:focus-visible { outline:3px solid var(--gold); }
.learn-path-items { display:grid; gap:6px; margin-top:18px; }
.learn-path-step { display:flex; gap:12px; text-align:left; align-items:center; padding:12px 10px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font:inherit; font-size:13px; line-height:1.5; }
.learn-path-step[aria-current] { background:#242126; border-color:#583438; color:var(--text); }
.learn-path-number { flex:none; display:grid; place-items:center; border:1px solid #45454e; width:26px; height:26px; border-radius:50%; font-size:11px; }
.learn-path-step[aria-current] .learn-path-number { background:var(--red); border-color:var(--red); color:white; }
.learn-preview-note { color:var(--muted); font-size:11px; line-height:1.6; margin-top:26px; }
.learn-main { min-width:0; }
.learn-step { display:flex; justify-content:space-between; align-items:center; margin:20px 0; }
.learn-read-state { font-size:12px; color:var(--muted); }
.learn-card { background:linear-gradient(135deg,#20242b,#181b21); border:1px solid #363c46; border-radius:20px; padding:32px 38px 38px; box-shadow:0 15px 55px #0002; }
.learn-card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:26px; }
.learn-card-label { font-size:10px; letter-spacing:.15em; color:var(--muted); font-weight:700; }
.learn-source-link { font-size:12px; color:var(--gold); }
.learn-title { font-size:clamp(26px,3.1vw,38px); line-height:1.2; letter-spacing:-.035em; margin:0 0 28px; max-width:100%; overflow-wrap:anywhere; }
.learn-copy { font-size:18px; line-height:1.8; color:#dedfe4; }
.learn-copy p { white-space:pre-wrap; margin:18px 0; }
.learn-copy strong { color:#fff; font-weight:700; }
.learn-copy h3 { font-size:20px; color:#fff; line-height:1.4; margin:26px 0 14px; }
.learn-copy hr { border:0; border-top:1px solid #353b45; margin:26px 0; }
.learn-list { padding-left:24px; margin:16px 0; }
.learn-list li { padding-left:8px; margin:8px 0; white-space:pre-wrap; }
.learn-list li::marker { color:var(--gold); }
.learn-detail { color:var(--gold); font-size:13px; }
.learn-table-wrap { overflow:auto; }
.learn-table { border-collapse:collapse; width:100%; font-size:15px; }
.learn-table td { border:1px solid var(--line); padding:12px; vertical-align:top; }
.learn-actions { display:flex; justify-content:space-between; gap:16px; margin:24px 0; }
@media(max-width:800px) {
 .learn-layout { grid-template-columns:1fr; gap:4px; }
 .learn-path { padding:0; }
 .learn-path h2 { margin:8px 0 12px; }
 .learn-path-items,.learn-preview-note,.learn-path>.eyebrow { display:none; }
 .learn-progress-label { margin:6px 0 12px; }
 .learn-card { padding:24px; border-radius:16px; }
 .learn-copy { font-size:17px; }
 .learn-title { font-size:29px; }
 .learn-actions { gap:10px; }
 .learn-actions button { padding:13px 16px; font-size:13px; }
}

.question-card { border-color:#837042; background:radial-gradient(ellipse at top right,#54422044,transparent 60%),#1b1e25; position:relative; overflow:hidden; }
.question-card::before { content:''; display:block; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#eaca83,#edab4d,#e23839); }
.question-card .learn-card-label { color:#f5d68c; letter-spacing:.11em; }
.question-card .learn-title { margin-bottom:22px; }
.question-card .question-prompt { color:var(--text); font-size:clamp(23px,2.2vw,30px); line-height:1.4; margin:0 0 20px; letter-spacing:-.02em; }
.question-guidance { color:var(--muted); font-size:14px; line-height:1.6; }
.question-options { border:0; padding:0; margin:24px 0; display:grid; gap:12px; min-width:0; }
.question-option { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:17px; border:1px solid #49515f; background:#20252e; border-radius:12px; cursor:pointer; transition:border-color .15s,background .15s,transform .15s; }
.question-option:hover { border-color:var(--gold); background:#2c2c30; }
.question-option:focus-within { outline:3px solid var(--gold); outline-offset:3px; }
.question-option input { position:absolute; width:1px; height:1px; opacity:0; }
.question-option-letter { display:grid; place-items:center; width:34px; height:34px; flex:none; border:1px solid #697080; border-radius:9px; font-size:14px; font-weight:750; }
.question-option-copy { flex:1; font-size:17px; line-height:1.5; min-width:100px; }
.question-option-result { font-size:12px; font-weight:700; }
.question-option.is-selected { background:#403729; border-color:var(--gold); }
.question-option.is-selected .question-option-letter { background:var(--gold); color:#171717; border-color:var(--gold); }
.question-option.is-correct { border-color:#67cfaa; background:#17392f; }
.question-option.is-incorrect { border-color:#ef9696; background:#42282c; }
.question-controls { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.question-check { background:var(--gold); color:#17191d; border-color:var(--gold); }
.question-feedback { margin-top:24px; border:1px solid #666052; border-radius:12px; padding:22px; background:#292a2e; }
.question-feedback.success { background:#17352d; border-color:#61caa5; }
.question-feedback-title { display:block; font-size:20px; }
.question-source-answer { font-size:17px; white-space:pre-wrap; }
.question-response-label { display:block; font-size:14px; margin:20px 0 8px; }
.question-response { width:100%; background:#12161d; border:1px solid #555f70; border-radius:12px; padding:16px; color:var(--text); font:inherit; font-size:17px; resize:vertical; }
.question-response:focus-visible { outline:3px solid var(--gold); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.celebrate { animation:answer-pop .45s ease-out; }
@keyframes answer-pop { 0% { transform:scale(.97); box-shadow:0 0 0 0 #61caa550; } 65% { transform:scale(1.015); } 100% { transform:scale(1); box-shadow:0 0 0 12px #61caa500; } }
@media(prefers-reduced-motion:reduce) { .celebrate { animation:none; } .question-option { transition:none; } }
@media(max-width:600px) { .question-card .learn-card-head { align-items:flex-start; } .question-card .learn-card-label { max-width:155px; line-height:1.6; } .question-option { padding:14px; gap:10px; } .question-controls button { width:100%; } }
.learn-title:focus { outline:none; }

.checkpoint-shell { max-width:820px; margin:20px auto 60px; }
.checkpoint-title { font-size:clamp(30px,4vw,48px); line-height:1.12; margin:18px 0; letter-spacing:-.04em; }
.checkpoint-description { color:var(--muted); font-size:18px; line-height:1.7; max-width:640px; }
.checkpoint-source,.checkpoint-note { color:var(--muted); font-size:13px; line-height:1.7; }
.checkpoint-formats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:32px 0; }
.checkpoint-format { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:14px; padding:26px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:16px; font:inherit; }
.checkpoint-format:hover { border-color:var(--gold); background:#29272a; }
.checkpoint-format strong { font-size:18px; }
.checkpoint-format>span:last-child { font-size:13px; line-height:1.6; color:var(--muted); }
.checkpoint-count { font-size:42px; font-weight:750; color:var(--gold); }
.checkpoint-progress { width:100%; height:7px; margin:8px 0 28px; accent-color:var(--gold); }
.checkpoint-shell .question-prompt { margin-top:0; }
.checkpoint-score { border:1px solid #5c826e; background:#183029; padding:32px; border-radius:18px; display:flex; flex-direction:column; gap:12px; margin:28px 0; }
.checkpoint-score strong { font-size:54px; color:#a7efcf; letter-spacing:-.04em; }
.checkpoint-score span { color:#c6d6ce; }
.checkpoint-review { padding:24px; margin:16px 0; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.checkpoint-review h3 { font-size:18px; line-height:1.6; margin:0 0 12px; }
@media(max-width:600px) { .checkpoint-formats { grid-template-columns:1fr; } .checkpoint-format { gap:8px; padding:22px; } .checkpoint-count { font-size:34px; } .checkpoint-description { font-size:16px; } .learn-top .learn-mode { font-size:10px; letter-spacing:.04em; } }
.checkpoint-score { background:#24262d; border-color:#55504a; }
.checkpoint-score strong { color:var(--gold); }
.checkpoint-score.perfect { background:#183029; border-color:#5c826e; }
.checkpoint-score.perfect strong { color:#a7efcf; }
.question-prompt:focus,.checkpoint-title:focus { outline:none; }

/* Lesson viewport: navigation never moves; material is paginated, not clipped. */
body.lesson-mode { height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.lesson-mode .sitebar { min-height:52px; height:52px; padding-top:8px; padding-bottom:8px; flex:none; }
.lesson-mode #preview-notice,.lesson-mode>footer { display:none; }
.lesson-mode #app { width:100%; flex:1; min-height:0; max-width:1180px; padding:16px 24px 12px; display:flex; flex-direction:column; }
.lesson-mode .learn-top { flex:none; margin-bottom:12px; min-height:24px; }
.lesson-mode .learn-layout { flex:1; min-height:0; align-items:stretch; }
.lesson-mode .learn-main { min-height:0; display:flex; flex-direction:column; }
.lesson-mode .learn-step { margin:0 0 12px; flex:none; }
.lesson-mode .learn-card { flex:1; min-height:0; display:flex; flex-direction:column; padding:22px 28px; }
.lesson-mode .learn-card-head { flex:none; margin-bottom:16px; }
.lesson-mode .learn-copy { flex:1; min-height:0; overflow:hidden; position:relative; }
.lesson-screen { height:100%; overflow:hidden; display:flow-root; }
.lesson-screen[hidden] { display:none; }
.lesson-screen p,.lesson-screen li { overflow-wrap:anywhere; }
.lesson-mode .learn-title { font-size:30px; margin:0 0 20px; }
.lesson-mode .learn-actions { flex:none; margin:12px 0 0; align-items:center; padding-bottom:env(safe-area-inset-bottom); }
.screen-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.lesson-mode .learn-path { min-height:0; overflow:hidden; padding-top:0; }
.lesson-mode #status:empty { display:none; }
.lesson-mode .question-options { margin:0; }
.lesson-mode .question-option { margin:0 0 12px; }
.lesson-mode .question-guidance { margin:8px 0; }
.lesson-mode .question-controls { margin:12px 0; }
.lesson-mode .question-feedback { margin-top:0; }
.lesson-detail-dialog { max-width:min(900px,94vw); width:94vw; max-height:85dvh; overflow:auto; }
.lesson-detail-dialog>button { position:sticky; top:0; z-index:2; margin-bottom:18px; }
@media(max-width:800px) {
 .lesson-mode #app { padding:10px 16px 10px; }
 .lesson-mode .sitebar { padding-left:16px; padding-right:16px; height:48px; min-height:48px; }
 .lesson-mode .brand span,.lesson-mode .divider { display:none; }
 .lesson-mode .learn-layout { display:flex; flex-direction:column; gap:10px; }
 .lesson-mode .learn-path { flex:none; }
 .lesson-mode .learn-path h2,.lesson-mode .learn-path progress,.lesson-mode .learn-progress-label { display:none; }
 .lesson-mode .learn-jump { padding:9px 12px; }
 .lesson-mode .learn-main { flex:1; }
 .lesson-mode .learn-card { padding:18px 20px; }
 .lesson-mode .learn-copy { font-size:17px; line-height:1.65; }
 .lesson-mode .learn-title { font-size:27px; }
 .lesson-mode .learn-card-head { margin-bottom:12px; }
 .lesson-mode .learn-actions button { padding:11px 13px; min-height:44px; }
}
@media(max-height:550px) {
 .lesson-mode .sitebar,.lesson-mode .learn-top,.lesson-mode .learn-path { display:none; }
 .lesson-mode .learn-layout { display:flex; }
 .lesson-mode .learn-main { width:100%; }
 .lesson-mode .learn-card { padding:12px 18px; }
 .lesson-mode .learn-card-head { margin-bottom:8px; }
}
/* Retain source context while progressing through a longer learning activity. */
.lesson-mode .screen-context { font-size:18px; line-height:1.35; margin:0 0 16px; color:#f5d68c; }
.processing-card{margin:1.5rem 0;padding:1.5rem;border:1px solid var(--line,#303b49);border-radius:1.25rem;background:var(--panel,#121c29)}
.processing-card h2{margin:.5rem 0}.processing-card p{max-width:65ch}.processing-card .primary{margin-top:.5rem}
.course-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; row-gap: .75rem; margin: 1.5rem 0; align-items: start; }
.course-action { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: .75rem; min-width: 0; text-align: left; }
.course-action > .primary, .course-action > .secondary { max-width: 100%; text-align: center; }
.course-action:only-child { grid-column: 1 / -1; }
.course-action.sharing-actions { justify-content: flex-end; text-align: right; }
.sharing-actions > [role="status"]:empty { display: none; }
.sharing-actions > [role="status"] { flex-basis: 100%; }
.sharing-actions input { width: 100%; }
/* Real status updates continue while this decorative activity cue runs. */
.is-working::before{content:"";display:inline-block;width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:study-spin 1s linear infinite;flex-shrink:0;margin-right:.6rem;vertical-align:middle;color:var(--accent,#e66036)}
.activity-track{height:4px;overflow:hidden;border-radius:8px;background:#ffffff18;margin:1rem 0}.activity-track::after{content:"";display:block;height:100%;width:35%;background:var(--accent,#e66036);border-radius:inherit;animation:study-progress 1.8s ease-in-out infinite}
@keyframes study-spin{to{transform:rotate(360deg)}}@keyframes study-progress{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
@media(prefers-reduced-motion:reduce){.is-working::before,.activity-track::after{animation:none}.activity-track::after{width:100%;opacity:.5}}
.question-panel .eyebrow{display:block;margin-bottom:12px}.question-panel .question-options{margin:16px 0;gap:10px}.question-panel .question-option{padding:12px 14px}.question-panel .question-prompt{font-size:clamp(20px,2vw,27px);line-height:1.35}
@media(max-width:650px){.question-panel .question-option-text{font-size:16px;line-height:1.35}.question-panel .question-option{padding:10px 12px;min-height:44px}.question-panel .question-options{gap:8px;margin:12px 0}}

/* Account-backed learning rewards; overlays never intercept lesson controls. */
.learning-rewards { display:flex; align-items:center; justify-content:flex-end; gap:12px; font-size:13px; white-space:nowrap; }
.learning-xp { color:var(--accent,#f4c86b); font-weight:800; }
.learning-streak { color:#a5ddc0; }
.learning-settings { background:transparent; color:var(--muted,#b9bbc3); border:1px solid #454952; border-radius:20px; padding:6px 12px; font:inherit; cursor:pointer; min-height:32px; }
.learning-celebration { position:fixed; z-index:100; top:max(12px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; max-width:calc(100vw - 32px); width:max-content; padding:16px 24px; color:#f7f6ef; background:#19352b; border:1px solid #77d6a6; border-radius:18px; box-shadow:0 12px 45px #0006; pointer-events:none; text-align:center; }
.learning-celebration[hidden] { display:none; }
.learning-celebration span { color:#f4d288; font-weight:800; }
.learning-celebration[data-kind=course] { background:#312a16; border-color:#f4c86b; padding:22px 30px; }
.learning-celebration.with-motion { animation:reward-arrive .35s ease-out; }
.learning-confetti { position:fixed; inset:0; pointer-events:none; z-index:99; overflow:hidden; }
.learning-confetti i { position:absolute; left:var(--x); top:-16px; width:8px; height:13px; background:var(--color); border-radius:2px; animation:reward-fall 1.8s var(--delay) ease-in both; }
.learning-settings-dialog { background:#181c22; color:#f5f5f2; border:1px solid #424753; border-radius:22px; padding:24px; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
.learning-settings-dialog::backdrop { background:#000a; }
.learning-settings-dialog h2 { margin-top:0; }
.learning-settings-dialog p { color:#bec3cb; }
.learning-setting { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; border-top:1px solid #343a44; }
.learning-setting small { display:block; color:#bbc1ca; font-size:13px; line-height:1.4; margin-top:5px; }
.learning-setting input { accent-color:#f4c86b; width:22px; height:22px; flex:none; }
@keyframes reward-arrive { from { opacity:0; translate:0 -14px; } to { opacity:1; translate:0 0; } }
@keyframes reward-fall { to { transform:translateY(105vh) rotate(var(--turn)); opacity:0; } }
@media(max-width:700px) { .learning-rewards { gap:8px; font-size:12px; } .lesson-mode .learn-top { gap:8px; flex-wrap:wrap; } .learning-celebration { font-size:14px; padding:12px 18px; } }
@media(prefers-reduced-motion:reduce) { .learning-confetti { display:none; } .learning-celebration.with-motion { animation:none; } }
@media(max-height:550px) { .lesson-mode .learn-top { display:flex; min-height:32px; margin-bottom:6px; } }
/* Coherent lessons take priority over artificial screen breaks. */
.lesson-mode .learn-copy.lesson-reader { overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#68615a transparent; padding-right:8px; scroll-padding-block:8px; }
.lesson-reader:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.lesson-reader .question-panel { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.lesson-reader .question-feedback { margin-top:20px; }
.lesson-reader p,.lesson-reader li,.lesson-reader .question-option-text { overflow-wrap:anywhere; }
.lesson-reader .source-policy-heading,.learn-copy .source-policy-heading { color:var(--gold); font-size:21px; line-height:1.4; margin:28px 0 14px; padding-top:14px; border-top:1px solid #514736; }
.source-policy-number,.source-list-marker { font-variant-numeric:tabular-nums; font-weight:700; }
.assessment-entry,.assessment-panel{max-width:850px;margin:28px auto;padding:28px;border:1px solid var(--border,#343941);border-radius:20px;background:var(--panel,#181c22)}.assessment-entry a{display:inline-block;margin:8px 16px 0 0}.assessment-field{display:flex;flex-direction:column;gap:8px;margin:20px 0}.assessment-field select{width:100%;max-width:100%;padding:14px;background:#242932;color:inherit;border:1px solid #555;border-radius:10px}.assessment-controls{display:flex;justify-content:space-between;gap:16px;margin:24px 0}.assessment-feedback{border-left:3px solid var(--gold,#e6bb64);padding:8px 18px;margin:20px 0}.assessment-feedback blockquote{margin:14px 0;white-space:pre-wrap}.assessment-review{padding:20px 0;border-bottom:1px solid #454a52}.assessment-panel h1{font-size:clamp(24px,4vw,36px);line-height:1.3}.assessment-panel [disabled]{opacity:.55}.assessment-panel fieldset{border:0;padding:0;min-width:0}.assessment-panel .question-option{display:flex;gap:12px}.assessment-notice{max-width:850px;margin:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.assessment-panel .question-option:has(input:checked){background:#403729;border-color:var(--gold,#e6bb64)}

/* A quiet chapter list: one reading destination and a secondary quiz action. */
.course-modules { margin:40px 0; }
.course-modules > h2 { font-size:22px; font-weight:650; margin:0 0 18px; }
.course-module-grid { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel); }
.course-module { display:flex; align-items:center; gap:24px; padding:0 26px 0 0; border-bottom:1px solid var(--line); }
.course-module:last-child { border-bottom:0; }
.module-open { flex:1; min-width:0; display:flex; align-items:center; gap:20px; padding:24px 0 24px 26px; }
.module-open:hover .module-title { color:var(--gold); }
.module-open:focus-visible { outline-offset:-4px; border-radius:10px; }
.module-badge { display:grid; place-items:center; flex:0 0 42px; height:42px; border:1px solid #42454d; border-radius:50%; font-size:16px; color:var(--muted); font-variant-numeric:tabular-nums; }
.is-complete .module-badge { background:#21382f; color:#aad8bd; border-color:#395449; }
.is-started .module-badge { color:var(--gold); border-color:#877349; }
.module-copy { flex:1; min-width:0; }
.module-eyebrow { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.module-title { margin:0; font-size:16px; font-weight:600; line-height:1.45; overflow-wrap:anywhere; transition:color .15s; }
.module-progress-copy { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px; font-size:12px; color:var(--muted); }
.module-state { color:var(--gold); }
.is-complete .module-state { color:#aad8bd; }
.module-progress-track { display:block; max-width:220px; height:3px; margin-top:10px; border-radius:9px; background:#333740; overflow:hidden; }
.module-progress-fill { display:block; height:100%; border-radius:inherit; background:var(--gold); }
.is-complete .module-progress-fill { background:#8fc4a5; }
.module-open-arrow { color:var(--muted); font-size:20px; margin-left:8px; }
.module-quiz { flex:0 0 auto; min-height:44px; padding:12px 18px; border:1px solid #41454e; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; }
.module-quiz:hover { border-color:var(--gold); color:var(--gold); }
@media(max-width:600px){
 .course-module { gap:8px; padding-right:14px; flex-wrap:wrap; }
 .module-open { gap:12px; padding:20px 0 20px 14px; }
 .module-badge { flex-basis:32px; height:32px; font-size:13px; }
 .module-title { font-size:14px; }
 .module-open-arrow { display:none; }
 .module-quiz { font-size:12px; padding:12px; }
 .module-progress-copy { font-size:11px; gap:5px 9px; }
 .module-progress-track { max-width:150px; }
}

.learn-source-name { color: var(--muted, #a9aeb8); font-size: .85rem; overflow-wrap: anywhere; margin: 0 0 1.25rem; }

/* Quizzes share the lesson viewport: only the content panel scrolls. */
.lesson-mode .assessment-scroll{flex:1;min-height:0;width:100%;max-width:850px;margin:0 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#68615a transparent;scroll-padding:20px;}
.lesson-mode .assessment-footer{flex:none;width:100%;max-width:850px;margin:12px auto 0;align-items:center;padding-bottom:env(safe-area-inset-bottom);}
.lesson-mode .assessment-notice{flex:none;width:100%;margin:8px auto 0;}
.lesson-mode .assessment-notice:empty{display:none;}
@media(max-width:700px){.lesson-mode .assessment-scroll{padding:18px 20px;}.lesson-mode .assessment-footer button{min-height:44px;padding:11px 13px;}}
.assessment-scroll{position:relative;overflow-wrap:anywhere;}
.assessment-scroll .question-option{position:relative;}

.deleted-courses{margin-top:2rem}.deleted-courses summary{cursor:pointer;color:var(--muted);padding:1rem 0}.deleted-courses .cards{margin-top:1rem}

/* Learning polish: text-first library, useful progress, and a visible course map. */
.course-library-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:26px; }
.course-library-card>.pill { align-self:flex-start; margin-right:36px; }
.course-card-title h3 { font-size:23px; line-height:1.35; margin:20px 0; overflow-wrap:anywhere; }
.course-card-title:hover { color:var(--gold); }
.course-card-progress,.resume-progress { display:block; width:100%; height:7px; border:0; border-radius:20px; overflow:hidden; accent-color:#f5c956; }
.course-card-progress::-webkit-progress-bar,.resume-progress::-webkit-progress-bar { background:#343842; }
.course-card-progress::-webkit-progress-value,.resume-progress::-webkit-progress-value { background:#f5c956; border-radius:20px; }
.course-card-count { font-size:13px; margin:10px 0; }
.course-card-next { font-size:14px; line-height:1.55; overflow-wrap:anywhere; margin:4px 0 22px; }
.course-library-card .card-bottom { margin-top:auto; padding-top:0; border:0; }
.course-library-card .primary { font-size:14px; text-align:center; width:100%; }
.course-card-menu { position:absolute; top:18px; right:18px; }
.course-card-menu>summary { display:grid; place-items:center; width:36px; height:36px; cursor:pointer; list-style:none; border-radius:10px; color:var(--muted); }
.course-card-menu>summary::-webkit-details-marker { display:none; }
.course-card-menu[open]>summary,.course-card-menu>summary:hover { background:#343842; color:white; }
.course-menu-actions { position:absolute; z-index:5; right:0; top:42px; min-width:160px; padding:8px; border:1px solid #535865; border-radius:12px; background:#232730; box-shadow:0 10px 25px #0007; }
.course-menu-actions button { display:block; width:100%; text-align:left; padding:12px; }
.continue-card { gap:30px; border-color:#635638; background:linear-gradient(115deg,#28251f,#191c22 75%); }
.continue-card>div { flex:1; min-width:0; }
.continue-card h2,.continue-card p { overflow-wrap:anywhere; }
.continue-card>.primary { flex:none; }
.resume-progress { max-width:430px; margin:20px 0 8px; }
.resume-caption { font-size:12px; color:#d2c6aa; }
.course-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:28px 0; }
.course-metric { padding:24px; border:1px solid var(--line); background:var(--panel); border-radius:16px; }
.course-metric strong { display:block; font-size:30px; color:#f8d16c; letter-spacing:-.04em; }
.course-metric span { display:block; margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); }
.course-map { display:grid; gap:10px; }
.map-module { border:1px solid #383e49; border-radius:14px; background:#191d24; min-width:0; }
.map-summary { display:flex; gap:16px; align-items:center; padding:20px; cursor:pointer; list-style:none; }
.map-summary::-webkit-details-marker { display:none; }
.map-summary::after { content:'+'; margin-left:auto; color:#eaca83; font-size:24px; flex:none; }
.map-module[open]>.map-summary::after { content:'−'; }
.map-number { flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#30333d; color:#f8d16c; font-size:13px; font-weight:800; }
.map-module.is-complete .map-number { color:#69efb3; background:#1d3c32; }
.map-copy { min-width:0; }
.map-copy strong { display:block; font-size:16px; line-height:1.45; overflow-wrap:anywhere; }
.map-status { display:block; font-size:12px; color:var(--muted); margin-top:5px; }
.map-lessons { list-style:none; margin:0; padding:0 12px 12px; }
.map-lesson { display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:9px; border:1px solid transparent; min-height:44px; }
.map-lesson:hover { background:#282d37; }
.map-lesson[aria-current] { border-color:#927331; background:#322b1e; }
.map-mark { color:#b7beca; flex:none; }
.map-lesson.is-complete .map-mark { color:#54eba5; }
.map-lesson-copy { min-width:0; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.map-lesson-state { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.map-lesson[aria-current] .map-lesson-state { color:#ffe091; }
.map-practice { display:inline-block; margin:0 24px 20px; font-size:13px; color:#ffe091; }
summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.lesson-mode .learn-layout { gap:28px; grid-template-columns:280px minmax(0,1fr); }
.lesson-mode .learn-path { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:8px; }
.learn-path .course-map { margin-top:20px; }
.learn-path .map-summary { padding:12px; gap:10px; }
.learn-path .map-copy strong { font-size:13px; }
.learn-path .map-number { width:26px; height:26px; border-radius:8px; font-size:11px; }
.learn-path .map-summary::after { font-size:19px; }
.learn-path .map-lessons { padding:0 5px 6px; }
.learn-path .map-lesson { padding:9px; gap:8px; }
.learn-path .map-lesson-copy { font-size:12px; }
.lesson-mode .learn-copy { color:#eeece7; line-height:1.8; }
.lesson-reader p { color:#d9dce2; }
.lesson-reader li { margin-block:8px; }
.question-option.is-correct { border-color:#43eea0; background:#143d30; box-shadow:inset 4px 0 #43eea0; }
.question-feedback.is-correct .question-feedback-title { color:#60f4ae; }
.question-option.is-incorrect { border-color:#ff8193; }
/* Bright milestone feedback; the content and Continue controls stay usable. */
.learning-experience { display:grid; grid-template-columns:auto auto; column-gap:12px; row-gap:4px; align-items:center; }
.learning-level { font-size:12px; color:#ffe18c; font-weight:750; }
.learning-xp { color:#ffe18c; }
.learning-level-meter { grid-column:1/-1; width:100%; height:4px; border:0; border-radius:8px; overflow:hidden; accent-color:#ffd557; }
.learning-level-meter::-webkit-progress-bar { background:#3c3b36; }
.learning-level-meter::-webkit-progress-value { background:#ffd557; }
.learning-celebration { --reward:#55f0a8; top:max(64px,env(safe-area-inset-top)); align-items:center; flex-wrap:nowrap; gap:14px; width:max-content; max-width:min(580px,calc(100vw - 24px)); padding:20px 26px; border:2px solid var(--reward); background:linear-gradient(125deg,#173f32,#17252b); box-shadow:0 16px 50px #0009,0 0 32px color-mix(in srgb,var(--reward) 22%,transparent); border-radius:20px; text-align:left; }
.celebration-icon { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; color:#10271c!important; background:var(--reward); font-size:27px; }
.celebration-copy { min-width:0; }
.celebration-copy strong { display:block; font-size:21px; line-height:1.3; }
.celebration-copy small { display:block; margin-top:5px; font-size:13px; line-height:1.45; color:#e4e6ec; }
.learning-celebration .celebration-earned { flex:none; border-radius:12px; padding:9px 12px; background:#ffffff15; color:#ffe285; font-size:17px; }
.learning-celebration[data-kind=lesson],.learning-celebration[data-kind=perfect] { --reward:#ffda55; background:linear-gradient(125deg,#47391c,#27231e); }
.learning-celebration[data-kind=module] { --reward:#62d3ff; background:linear-gradient(125deg,#193b54,#282c47); }
.learning-celebration[data-kind=level] { --reward:#c49aff; background:linear-gradient(125deg,#463061,#242743); }
.learning-celebration[data-kind=course] { --reward:#ffdc5e; background:linear-gradient(125deg,#53401d,#3e274d); padding:28px 30px; }
.learning-celebration[data-kind=course] .celebration-copy strong { font-size:27px; }
.learning-confetti i { width:var(--size); height:calc(var(--size)*1.5); opacity:1; animation:reward-fall var(--duration) var(--delay) cubic-bezier(.2,.5,.5,1) both; }
.learning-confetti i:nth-child(3n) { border-radius:50%; height:var(--size); }
@keyframes reward-fall { 0% { transform:translate3d(0,-20px,0) rotate(0); opacity:1; } 80% { opacity:1; } 100% { transform:translate3d(var(--drift),110dvh,0) rotate(var(--turn)); opacity:0; } }
@media(max-width:800px) {
 .continue-card { align-items:stretch; flex-direction:column; gap:20px; }
 .course-metrics { gap:8px; }
 .course-metric { padding:16px 10px; }
 .course-metric strong { font-size:24px; }
 .course-metric span { font-size:11px; }
 .map-summary { padding:16px; gap:12px; }
 .map-copy strong { font-size:15px; }
 .lesson-mode .learn-path { padding:0; overflow:visible; }
 .learn-path .course-map { display:none; }
 .lesson-mode .learn-copy { line-height:1.7; }
 .learning-celebration { gap:10px; padding:14px; flex-wrap:wrap; }
 .celebration-icon { width:32px; height:32px; font-size:22px; }
 .celebration-copy { flex:1; }
 .celebration-copy strong { font-size:17px; }
 .celebration-copy small { font-size:12px; }
 .learning-celebration .celebration-earned { padding:6px 10px; font-size:14px; }
 .learning-celebration[data-kind=course] { padding:20px; }
 .learning-celebration[data-kind=course] .celebration-copy strong { font-size:22px; }
 .learning-streak { font-size:11px; }
}
@media(max-height:550px) { .learning-celebration { top:8px; padding:10px 16px; } }
@media(prefers-reduced-motion:reduce) { .learning-confetti { display:none; } .learning-celebration.with-motion { animation:none; } }
.learn-navigation { display:flex; align-items:center; gap:8px; min-width:0; }
.learn-navigation select { min-width:0; flex:1; }
.course-contents-button { display:none; }
.course-contents-dialog { background:#12161c; color:var(--text); width:min(650px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #545b69; border-radius:20px; padding:20px; }
.course-contents-dialog::backdrop { background:#000b; }
.course-contents-dialog>.secondary { margin-bottom:18px; }
@media(max-width:800px) { .course-contents-button { display:block; padding:9px 12px; min-height:44px; font-size:12px; } .learn-navigation .learn-jump { margin:0; min-height:44px; } }
.course-heading h1 { font-size:clamp(30px,4vw,46px); line-height:1.16; max-width:1000px; }

/* Supplemental teaching stays visually distinct from exact source reading. */
.learn-source-passage { border-left: 3px solid var(--accent, #ff525e); padding: .25rem 0 .25rem 1rem; margin: 1rem 0; }
.learn-source-location, .learn-instructor-label { font-size: .8rem; opacity: .8; }
.learn-explanation, .learn-example { white-space: pre-wrap; overflow-wrap: anywhere; }