:root {
  --ink: #17221d;
  --muted: #6d7772;
  --paper: #f5f3ed;
  --cream: #fbfaf6;
  --green: #196b4c;
  --green-dark: #103d30;
  --mint: #dcebe3;
  --coral: #ec735d;
  --line: #dedfd8;
  --shadow: 0 18px 50px rgba(27, 47, 38, .10);
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); }
button, input { font: inherit; }
button { color: inherit; }
.bionic-word strong { color: inherit; font-weight: 750; }
.page { min-height: 100vh; }
.eyebrow { margin: 0; font: 700 11px/1.3 "Manrope", sans-serif; letter-spacing: .16em; }
.label { font: 700 10px/1.2 "Manrope", sans-serif; letter-spacing: .13em; color: #6f7873; }
.muted { color: var(--muted); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 20px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.logo__mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid currentColor; border-radius: 50% 50% 45% 55%; font-size: 15px; transform: rotate(-8deg); }
.logo--light { color: white; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #dce8df; color: var(--green-dark); font-weight: 700; cursor: pointer; text-decoration: none; }
.avatar.dark { background: var(--green-dark); color: white; }
.universal-search { position: fixed; z-index: 50; top: 14px; right: 96px; width: 280px; }
.universal-search__input { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid #ced7d1; border-radius: 9px; background: rgba(255,255,255,.96); box-shadow: 0 5px 18px rgba(19,43,33,.08); backdrop-filter: blur(10px); }
.universal-search.is-open .universal-search__input { border-color: #6b9a84; box-shadow: 0 0 0 3px rgba(25,107,76,.11), 0 8px 26px rgba(19,43,33,.13); }
.universal-search__input > span { flex: none; color: var(--green); font-size: 18px; }
.universal-search__input input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }
.universal-search__input input::placeholder { color: #8d9892; }
.universal-search__input input::-webkit-search-cancel-button { display: none; }
.universal-search__input kbd { flex: none; padding: 3px 5px; border: 1px solid #d9dfdb; border-radius: 5px; color: #87908b; background: #f4f5f2; font: 600 10px "Manrope", sans-serif; }
.universal-search__results { position: absolute; top: calc(100% + 8px); right: 0; width: min(520px, calc(100vw - 28px)); max-height: min(520px, calc(100vh - 90px)); padding: 6px; overflow-y: auto; border: 1px solid #d5ddd7; border-radius: 12px; background: rgba(255,255,255,.99); box-shadow: 0 20px 55px rgba(20,43,33,.2); }
.universal-search__results > button { display: grid; grid-template-columns: 57px minmax(0,1fr) 18px; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.universal-search__results > button:hover, .universal-search__results > button:focus-visible { outline: 0; background: #eef5f1; }
.search-part { display: inline-flex; justify-content: center; padding: 4px 6px; border-radius: 99px; color: #476258; background: #e6eee9; font-size: 10px; font-weight: 800; }
.search-part.is-part-2 { color: #8b513b; background: #f7e9df; }
.search-part.is-part-3 { color: #555184; background: #eceaf8; }
.search-result__body { min-width: 0; }
.search-result__body b, .search-result__body small { display: block; }
.search-result__body b { overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.search-result__body small { margin-top: 3px; overflow: hidden; color: #7c8781; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.universal-search__results > button > span:last-child { color: #789086; }
.universal-search__results > p { margin: 0; padding: 24px 14px; color: #7d8882; font-size: 14px; text-align: center; }

/* Variant A — guided course */
.guided { display: grid; grid-template-columns: 292px minmax(0, 1fr); transition: grid-template-columns .22s ease; }
.guided.is-sidebar-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
.study-sidebar { position: fixed; inset: 0 auto 0 0; width: 292px; display: flex; flex-direction: column; padding: 34px 26px 28px; color: white; background: var(--green-dark); overflow: auto; z-index: 2; transition: width .22s ease, padding .22s ease; }
.sidebar-toggle { position: absolute; top: 18px; right: 14px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; color: white; background: rgba(255,255,255,.08); font-size: 16px; cursor: pointer; }
.sidebar-toggle:hover { background: rgba(255,255,255,.16); }
.sidebar-toggle:focus-visible { outline: 2px solid #e7b468; outline-offset: 2px; }
.study-sidebar.is-collapsed { width: 48px; padding: 0; overflow: hidden; }
.study-sidebar.is-collapsed > :not(.sidebar-toggle) { display: none; }
.study-sidebar.is-collapsed .sidebar-toggle { right: 9px; }
.sidebar-label { margin-top: 54px; color: #8fbaaa; }
.study-sidebar h2 { margin: 6px 0 7px; font: 700 30px/1.2 "Manrope", sans-serif; }
.sidebar-copy { margin: 0; max-width: 210px; color: #adc5bb; font-size: 13px; line-height: 1.5; }
.topic-list { display: grid; gap: 5px; margin: 28px -10px 0; }
.topic-link { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 10px; color: #c0d1ca; background: transparent; border: 0; border-radius: 10px; text-align: left; cursor: pointer; }
.topic-link:hover { background: rgba(255,255,255,.06); }
.topic-link.is-active { color: white; background: rgba(255,255,255,.11); }
.topic-link__icon { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; }
.topic-link__body { min-width: 0; }
.topic-link b { display: block; font-size: 13px; font-weight: 600; }
.topic-link__number { display: inline-block; min-width: 24px; color: #78968a; font-size: 9px; letter-spacing: .08em; }
.topic-link.is-active .topic-link__number { color: #acc6bb; }
.topic-link small { display: block; margin-top: 2px; color: #829f93; font-size: 10px; }
.topic-progress { display: block; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.13); }
.topic-progress i { display: block; height: 100%; border-radius: inherit; background: #e7b468; transition: width .3s; }
.topic-link__count { font-size: 10px; color: #8aa298; }
.sidebar-progress { margin-top: auto; padding-top: 30px; }
.sidebar-progress > div:first-child { display: flex; justify-content: space-between; font-size: 11px; }
.progress-track { height: 4px; margin: 10px 0 7px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.13); }
.progress-track i { display: block; height: 100%; background: #e7b468; border-radius: inherit; transition: width .3s; }
.sidebar-progress small { color: #829f93; font-size: 10px; }
.lesson { grid-column: 2; min-width: 0; background: var(--cream); }
.lesson-header { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-bottom: 1px solid #e4e4de; }
.lesson-header > div { display: flex; align-items: center; gap: 13px; font-size: 14px; }
.part-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 7px; background: #e4e8e3; }
.part-tabs button { padding: 6px 10px; border: 0; border-radius: 5px; color: #6e7973; background: transparent; font: 700 10px "Manrope", sans-serif; cursor: pointer; }
.part-tabs button.is-active { color: white; background: var(--green); box-shadow: 0 2px 5px rgba(16,61,48,.16); }
.lesson-body { max-width: 780px; margin: 0 auto; padding: 30px 34px 88px; }
.topic-page-heading { margin: 24px 0 20px; }
.topic-page-heading .eyebrow { color: var(--green); }
.topic-page-heading h1 { margin: 7px 0 5px; font: 700 clamp(30px, 4vw, 44px)/1.12 "Manrope", sans-serif; letter-spacing: -.045em; }
.topic-page-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.topic-question-list { display: grid; gap: 22px; }
.topic-question-card { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 8px 28px rgba(27,47,38,.06); scroll-margin-top: 20px; }
.topic-question-card .lesson-title { margin-top: 0; }
.topic-question-card .lesson-title h2 { max-width: 610px; margin: 8px 0 0; font: 700 clamp(23px, 3vw, 32px)/1.2 "Manrope", sans-serif; letter-spacing: -.035em; }
.topic-question-card .feedback-card { box-shadow: none; }
.lesson-breadcrumb { display: flex; align-items: center; gap: 10px; color: #78817d; font-size: 11px; }
.lesson-breadcrumb i { width: 3px; height: 3px; border-radius: 50%; background: #aab0ac; }
.part3-source-link { margin-left: auto; color: var(--green); font-size: 14px; font-weight: 700; text-decoration: none; }
.part3-source-link:hover { text-decoration: underline; }
.difficulty-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; padding: 9px 11px; border: 1px solid #e0c7aa; border-radius: 9px; color: #766654; background: #fffaf2; font-size: 14px; }
.difficulty-toolbar > div { display: flex; gap: 3px; padding: 3px; border-radius: 7px; background: #f1e7d9; }
.difficulty-toolbar button { padding: 7px 10px; border: 0; border-radius: 5px; color: #796b5a; background: transparent; font-size: 14px; cursor: pointer; }
.difficulty-toolbar button.is-active { color: white; background: #a85d3f; font-weight: 700; }
.difficulty-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.difficulty-empty { margin: 20px 10px; color: #a9beb5; font-size: 14px; line-height: 1.5; }
.question-progress { margin-top: 13px; }
.question-progress__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: #7c8681; font: 700 9px "Manrope", sans-serif; letter-spacing: .1em; }
.question-progress__label > div { display: flex; align-items: center; gap: 10px; }
.question-progress__label b { color: var(--green); font-size: 10px; letter-spacing: 0; }
.question-progress__label button { padding: 5px 8px; border: 1px solid #b8c8c0; border-radius: 5px; color: var(--green); background: white; font: 700 9px "Manrope", sans-serif; letter-spacing: 0; cursor: pointer; }
.question-progress__label button:hover { border-color: var(--green); background: #edf5f0; }
.question-progress__segments { position: relative; display: flex; gap: 3px; }
.question-progress__segment { position: relative; flex: 1; min-width: 7px; height: 12px; padding: 0; border: 0; border-radius: 3px; background: #d8ddd9; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s; }
.question-progress__segment.is-learning { background: #e7b468; }
.question-progress__segment.is-familiar { background: #6f9e89; }
.question-progress__segment.is-confident { background: var(--green); }
.question-progress__segment.is-difficult:not(.is-current) { box-shadow: inset 0 0 0 2px #b75f41; }
.question-progress__segment:hover { transform: translateY(-1px); }
.question-progress__segment.is-current { z-index: 2; box-shadow: inset 0 0 0 2px white, 0 0 0 2px var(--ink); transform: translateY(-1px); }
.question-progress__segment::after { content: attr(data-tooltip); position: absolute; z-index: 20; top: calc(100% + 9px); left: 50%; width: max-content; max-width: min(320px, 70vw); padding: 8px 10px; border-radius: 7px; color: white; background: #172e26; box-shadow: 0 8px 24px rgba(17,36,29,.2); font: 500 11px/1.4 "DM Sans", sans-serif; text-align: left; white-space: normal; transform: translateX(-50%) translateY(-2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s, visibility .15s; }
.question-progress__segment:hover::after, .question-progress__segment:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.question-progress__segment:first-child::after { left: 0; transform: translateY(-2px); }
.question-progress__segment:first-child:hover::after, .question-progress__segment:first-child:focus-visible::after { transform: translateY(0); }
.question-progress__segment:last-child::after { right: 0; left: auto; transform: translateY(-2px); }
.question-progress__segment:last-child:hover::after, .question-progress__segment:last-child:focus-visible::after { transform: translateY(0); }
.question-progress__segment:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.lesson-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; margin: 16px 0 17px; }
.lesson-title .eyebrow { color: var(--green); }
.lesson-title h1 { max-width: 610px; margin: 8px 0 0; font: 700 clamp(28px, 4vw, 42px)/1.13 "Manrope", sans-serif; letter-spacing: -.045em; }
.time-badge { flex: none; margin-top: 17px; padding: 7px 10px; border: 1px solid #d7dad5; border-radius: 6px; color: #76807b; background: white; font-size: 10px; }
.familiarity-picker { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.familiarity-picker > .label { color: #707b75; }
.familiarity-picker > div { display: flex; gap: 4px; padding: 3px; border-radius: 7px; background: #edf0ec; }
.familiarity-picker button { padding: 7px 10px; border: 0; border-radius: 5px; color: #747d78; background: transparent; font-size: 10px; cursor: pointer; }
.familiarity-picker button:hover { color: var(--green); }
.familiarity-picker button.is-active { color: white; background: var(--green); font-weight: 700; box-shadow: 0 2px 5px rgba(16,61,48,.18); }
.familiarity-picker .difficulty-mark { border: 1px solid #d5b79f; color: #97573e; background: #fff9f3; font-size: 14px; font-weight: 700; }
.familiarity-picker .difficulty-mark:hover { color: #7f3e29; background: #fff0e5; }
.familiarity-picker .difficulty-mark.is-active { border-color: #a85d3f; color: white; background: #a85d3f; box-shadow: 0 2px 5px rgba(115,54,33,.18); }
.model-card > div { display: flex; justify-content: space-between; align-items: center; }
.feedback-card em { color: #c55847; font-style: normal; border-bottom: 1px dashed #dc8c7f; }
.reveal-button { width: 100%; margin-top: 10px; padding: 12px; border: 1px dashed #91aa9d; border-radius: 9px; color: var(--green); background: #f6faf7; font-weight: 700; cursor: pointer; }
.reveal-button span { margin-right: 6px; }
.coach-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; margin-top: 14px; }
.feedback-card, .model-card { padding: 16px 18px; border-radius: 10px; }
.feedback-card { background: #fff0eb; }
.model-card { background: var(--green-dark); color: white; }
.coral { color: #c14e3e; }.green { color: #94c5af; }
.feedback-card p, .model-card p { margin: 12px 0 0; font-size: 14px; line-height: 1.65; }
.model-card p { color: #deebe5; }
.listen-button { width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: white; background: transparent; font-size: 9px; cursor: pointer; }
.improved-answer-card { margin-top: 10px; padding: 18px 20px; border-radius: 12px; color: white; background: var(--green-dark); box-shadow: var(--shadow); }
.improved-answer-card > div { display: flex; align-items: center; justify-content: space-between; }
.improved-answer-actions { display: flex; align-items: center; gap: 7px; }
.improved-answer-card p { margin: 10px 0 0; color: #e1eee8; font: 400 15px/1.65 "DM Sans", sans-serif; }
.improved-answer-toggle { padding: 5px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 7px; color: white; background: transparent; font: 700 14px/1.2 "DM Sans", sans-serif; cursor: pointer; }
.improved-answer-toggle:hover { background: rgba(255,255,255,.1); }
.improved-answer-editor { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.improved-answer-editor textarea { width: 100%; min-height: 180px; margin-top: 9px; padding: 11px 13px; resize: vertical; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; outline: none; color: #eff7f3; background: rgba(255,255,255,.08); font: 400 14px/1.55 "DM Sans", sans-serif; }
.improved-answer-editor textarea::placeholder { color: #9bb2a8; }
.improved-answer-editor textarea:focus { border-color: #94c5af; box-shadow: 0 0 0 3px rgba(148,197,175,.14); }
.improved-answer-editor > button { display: block; margin: 9px 0 0 auto; padding: 9px 14px; border: 1px solid #94c5af; border-radius: 7px; color: var(--green-dark); background: #b9dbc9; font-size: 11px; font-weight: 700; cursor: pointer; }
.improved-answer-editor > button:hover:not(:disabled) { background: #d2e9dd; }
.improved-answer-editor > button:disabled { opacity: .4; cursor: default; }
.lesson-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.secondary-button, .primary-button { padding: 13px 18px; border-radius: 7px; font-size: 14px; font-weight: 700; cursor: pointer; }
.secondary-button { border: 1px solid #d9dcd7; background: white; }
.secondary-button:disabled { opacity: .4; cursor: default; }
.primary-button { border: 1px solid var(--green); color: white; background: var(--green); }

/* Part 2 — Core Story workspace */
.part2-sidebar { gap: 18px; }
.part2-sidebar .sidebar-label { margin-top: 42px; }
.add-story-button { width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; color: white; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 700; cursor: pointer; }
.add-story-button:hover { background: rgba(255,255,255,.14); }
.core-story-list { display: grid; gap: 6px; min-height: 0; overflow-y: auto; }
.core-story-list-item { width: 100%; display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 10px; border: 1px solid transparent; border-radius: 8px; color: #abc2b8; background: rgba(255,255,255,.04); text-align: left; text-decoration: none; cursor: pointer; }
.core-story-list-item:hover { color: white; background: rgba(255,255,255,.08); }
.core-story-list-item.is-linked { color: white; background: rgba(255,255,255,.11); }
.core-story-list-item.is-selected { border-color: #e8a276; box-shadow: inset 3px 0 0 #e8a276; }
.core-story-list-item > span { padding-top: 2px; color: #76998a; font-size: 9px; }
.core-story-list-item b, .core-story-list-item small { display: block; }
.core-story-list-item b { font-size: 11px; line-height: 1.35; }
.core-story-list-item small { margin-top: 3px; color: #7f9d91; font-size: 9px; }
.story-list-empty { color: #86a397; font-size: 11px; }
.part2-body { max-width: 940px; }
.part2-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.part2-heading .eyebrow { color: var(--green); }
.part2-heading > span { padding: 7px 10px; border-radius: 99px; color: var(--green); background: var(--mint); font-size: 10px; }
.core-story-reader { margin-bottom: 16px; padding: 19px 20px; border: 1px solid #d4dbd6; border-radius: 11px; background: white; box-shadow: 0 8px 22px rgba(31,56,45,.05); }
.core-story-reader > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.core-story-reader .label { color: var(--green); }
.core-story-reader__meta { display: flex; align-items: center; gap: 10px; }
.core-story-word-count { color: #7d8882; font-size: 14px; font-weight: 500; }
.core-story-reader button { padding: 8px 11px; border: 1px solid #9bb6a9; border-radius: 7px; color: var(--green); background: #f2f7f4; font-size: 10px; font-weight: 700; cursor: pointer; }
.core-story-reader button:hover { border-color: var(--green); background: #e8f1eb; }
.core-story-reader__actions { display: flex; align-items: center; gap: 7px; }
.core-story-reader .danger-button { border-color: #d7aaa1; color: #a64538; background: #fff5f2; }
.core-story-reader .danger-button:hover { border-color: #b95d4e; color: #8e3025; background: #ffebe6; }
.core-story-reader h2 { margin: 12px 0 8px; font: 700 20px/1.3 "Manrope", sans-serif; letter-spacing: -.02em; }
.core-story-reader p { margin: 0; color: #4f5c56; font-size: 16px; line-height: 1.75; white-space: pre-wrap; }
.core-story-inline-editor input, .core-story-inline-editor textarea { width: 100%; border: 1px solid #cbd6cf; border-radius: 7px; outline: none; color: var(--ink); background: #fbfcfa; font-family: "DM Sans", sans-serif; }
.core-story-inline-editor input:focus, .core-story-inline-editor textarea:focus { border-color: #6b9a84; box-shadow: 0 0 0 3px rgba(25,107,76,.1); background: white; }
.core-story-inline-editor__title { display: block; margin-top: 12px; }
.core-story-inline-editor__title input { padding: 8px 10px; font: 700 20px/1.3 "Manrope", sans-serif; letter-spacing: -.02em; }
.core-story-inline-editor__content { display: block; margin-top: 8px; }
.core-story-inline-editor__content textarea { min-height: 300px; padding: 11px 12px; resize: vertical; font-size: 16px; line-height: 1.75; }
.core-story-inline-editor button:disabled { opacity: .5; cursor: default; }
.core-sentences { margin-top: 15px; padding: 13px 15px; border-left: 3px solid #e7b468; border-radius: 7px; background: #f8f6ee; }
.core-sentences .label, .core-sentences small { display: block; }
.core-sentences small { margin-top: 3px; color: #7e7868; font-size: 10px; }
.core-sentences ol { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 22px; color: #4f5c56; font-size: 14px; line-height: 1.55; }
.core-sentences li::marker { color: #b47c31; font-weight: 700; }
.core-sentences--editing textarea { min-height: 150px; margin-top: 9px; padding: 9px 10px; resize: vertical; font-size: 14px; line-height: 1.55; }
.core-story-form { display: grid; gap: 12px; margin-bottom: 16px; padding: 18px; border: 1px solid #cdd8d1; border-radius: 11px; background: white; box-shadow: 0 8px 22px rgba(31,56,45,.06); }
.core-story-form > div, .core-story-form footer { display: flex; align-items: center; justify-content: space-between; }
.core-story-form > div button { width: 27px; height: 27px; border: 0; border-radius: 50%; color: #6e7772; background: #eef0ed; cursor: pointer; }
.core-story-form label { display: grid; gap: 6px; color: #66716b; font-size: 10px; font-weight: 700; }
.core-story-form label > small { color: #87908b; font-size: 10px; font-weight: 400; }
.core-story-form input, .core-story-form textarea, .part2-topic-picker select, .story-link-panel select { width: 100%; padding: 10px 12px; border: 1px solid #d5dad5; border-radius: 7px; outline: none; color: var(--ink); background: #fbfcfa; font: 400 13px/1.55 "DM Sans", sans-serif; }
.core-story-form textarea { resize: vertical; }
.core-story-form input:focus, .core-story-form textarea:focus, .part2-topic-picker select:focus, .story-link-panel select:focus { border-color: #6b9a84; box-shadow: 0 0 0 3px rgba(25,107,76,.1); }
.core-story-form footer span { color: #bd5c4d; font-size: 10px; }
.core-story-form footer button, .derived-response-editor footer button { padding: 9px 14px; border: 1px solid var(--green); border-radius: 7px; color: white; background: var(--green); font-size: 11px; font-weight: 700; cursor: pointer; }
.core-story-topic-links { min-width: 0; margin: 0 0 16px; padding: 16px 18px; border: 1px solid #d9dfda; border-radius: 10px; background: #f8faf7; }
.core-story-topic-links__header { display: flex; align-items: center; justify-content: space-between; color: var(--green); }
.core-story-topic-links__header small { color: #728078; font: 600 9px "DM Sans", sans-serif; }
.core-story-topic-links > p { margin: 0 0 10px; color: #77817c; font-size: 10px; }
.core-story-topic-links__header + p { margin-top: 5px; }
.core-story-topic-search { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; padding: 0 10px; border: 1px solid #d5dad5; border-radius: 7px; color: #7a8580; background: white; }
.core-story-topic-search input { width: 100%; padding: 9px 0; border: 0; outline: none; color: var(--ink); background: transparent; font: 400 14px "DM Sans", sans-serif; }
.core-story-topic-links select { width: 100%; min-height: 0; padding: 10px 12px; border: 1px solid #d5dad5; border-radius: 7px; outline: none; color: #4d5953; background: white; font: 500 11px/1.4 "DM Sans", sans-serif; }
.core-story-topic-links select:focus { border-color: #6b9a84; box-shadow: 0 0 0 3px rgba(25,107,76,.1); }
.core-story-topic-links option { padding: 7px 8px; border-radius: 4px; }
.core-story-topic-links option:checked { color: white; background: linear-gradient(var(--green), var(--green)); }
.core-story-topic-links__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.core-story-topic-links__actions span { color: #728078; font-size: 10px; }
.core-story-topic-links__actions button { padding: 8px 12px; border: 1px solid var(--green); border-radius: 6px; color: white; background: var(--green); font-size: 10px; font-weight: 700; cursor: pointer; }
.core-story-topic-links__actions button:disabled { opacity: .5; cursor: default; }
.core-story-derived-stories { margin-bottom: 16px; padding: 16px 18px; border: 1px solid #d5ddd8; border-radius: 10px; background: white; }
.core-story-derived-stories__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.core-story-derived-stories__header .label { color: var(--green); }
.core-story-derived-stories__header p { margin: 4px 0 0; color: #77817c; font-size: 10px; }
.core-story-derived-stories__header > strong { flex: none; padding: 5px 8px; border-radius: 99px; color: var(--green); background: var(--mint); font-size: 9px; }
.core-story-derived-stories__list { display: grid; gap: 10px; margin-top: 12px; }
.story-derived-item { padding: 15px 16px; border: 1px solid #dce1dd; border-radius: 9px; background: #fafbf9; }
.story-derived-item > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.story-derived-item > header > div:first-child { display: grid; gap: 4px; }
.story-derived-item > header span { color: var(--coral); font: 700 8px "Manrope", sans-serif; letter-spacing: .1em; }
.story-derived-item > header a { color: var(--ink); font: 700 13px/1.4 "Manrope", sans-serif; text-decoration: none; }
.story-derived-item > header a:hover { color: var(--green); text-decoration: underline; }
.story-derived-item__tools { flex: none; display: flex; align-items: center; gap: 8px; }
.story-derived-item__tools small { color: #89928d; font-size: 9px; }
.story-derived-item__tools button, .story-derived-item__actions button { padding: 7px 9px; border: 1px solid #9db6aa; border-radius: 6px; color: var(--green); background: white; font-size: 9px; font-weight: 700; cursor: pointer; }
.story-derived-item__tools .story-derived-toggle { min-width: 75px; }
.story-derived-item__body { padding-top: 10px; border-top: 1px solid #e1e5e2; margin-top: 11px; }
.story-derived-item__actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.story-derived-item__actions .unlink-button { border-color: #d7aaa1; color: #a64538; background: #fff7f5; }
.story-derived-item__actions .unlink-button:hover { border-color: #b95d4e; background: #ffebe6; }
.story-derived-item__body > ul { display: grid; gap: 3px; margin: 10px 0 0; padding-left: 18px; color: #737d78; font-size: 10px; line-height: 1.45; }
.story-derived-readable { margin-top: 11px; padding: 12px 13px; border-left: 3px solid #8eae9f; border-radius: 6px; background: white; }
.story-derived-readable > span { color: var(--green); font: 700 9px "Manrope", sans-serif; letter-spacing: .09em; }
.story-derived-readable > p { margin: 7px 0 0; color: #4f5c56; font-size: 16px; line-height: 1.75; white-space: pre-wrap; }
.story-derived-item__body > label { display: grid; gap: 6px; margin-top: 11px; color: var(--green); font: 700 9px "Manrope", sans-serif; letter-spacing: .09em; }
.story-derived-item textarea { width: 100%; min-height: 125px; padding: 11px 12px; resize: vertical; border: 1px solid #d2d9d4; border-radius: 7px; outline: none; color: var(--ink); background: white; font: 400 13px/1.6 "DM Sans", sans-serif; letter-spacing: 0; }
.story-derived-item textarea:focus { border-color: #6b9a84; box-shadow: 0 0 0 3px rgba(25,107,76,.1); }
.story-derived-item__body > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.story-derived-item__body > footer span { color: #7b8680; font-size: 9px; }
.story-derived-item__body > footer button { padding: 8px 11px; border: 1px solid var(--green); border-radius: 6px; color: white; background: var(--green); font-size: 10px; font-weight: 700; cursor: pointer; }
.story-derived-item button:disabled { opacity: .5; cursor: default; }
.part2-topic-picker { display: grid; gap: 6px; margin-bottom: 10px; }
.part2-topic-picker select { background: white; font-weight: 600; }
.cue-card { padding: 20px 22px; border-radius: 11px; color: white; background: var(--green-dark); box-shadow: var(--shadow); }
.cue-card h2 { margin: 8px 0 14px; font: 700 24px/1.25 "Manrope", sans-serif; letter-spacing: -.025em; }
.cue-card > p { margin: 0 0 7px; color: #a7c3b7; font-size: 11px; }
.cue-card ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: #deebe5; font-size: 14px; line-height: 1.5; }
.part3-questions { margin-top: 10px; padding: 17px 18px; border: 1px solid #d7ddd8; border-radius: 10px; background: #f8faf7; }
.part3-questions__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.part3-questions__header .label { color: var(--coral); }
.part3-questions__header p { margin: 4px 0 0; color: #77817c; font-size: 10px; }
.part3-questions__header strong { flex: none; padding: 5px 8px; border-radius: 99px; color: var(--green); background: var(--mint); font-size: 9px; }
.part3-questions ol { display: grid; gap: 7px; margin: 12px 0 0; padding-left: 24px; color: #44514b; font-size: 14px; line-height: 1.5; }
.part3-questions li::marker { color: var(--coral); font: 700 10px "Manrope", sans-serif; }
.story-link-panel { margin-top: 10px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.story-link-panel__header { display: grid; grid-template-columns: 1fr minmax(220px, 310px); align-items: end; gap: 20px; }
.story-link-panel__header p, .derived-response-editor > div p { margin: 4px 0 0; color: #77817c; font-size: 10px; }
.linked-story-preview { margin-top: 14px; padding: 15px 16px; border-left: 3px solid #e7b468; border-radius: 7px; background: #f4f3eb; }
.linked-story-preview > div { display: flex; align-items: center; gap: 9px; }
.linked-story-preview > div:first-child span { color: #9a702f; font: 700 8px "Manrope"; letter-spacing: .1em; }
.linked-story-preview > div b { font-size: 14px; }
.linked-story-preview p { margin: 9px 0 0; color: #5a625e; font-size: 16px; line-height: 1.75; white-space: pre-wrap; }
.link-empty-state { margin-top: 13px; padding: 20px; border: 1px dashed #c7cec9; border-radius: 7px; color: #838c87; background: #fafbf9; font-size: 11px; text-align: center; }
.derived-response-editor { margin-top: 10px; padding: 18px; border-radius: 10px; background: #eaf2ec; }
.derived-response-editor > div, .derived-response-editor footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.derived-response-editor > div > button { padding: 8px 11px; border: 1px solid #8caf9f; border-radius: 7px; color: var(--green); background: white; font-size: 10px; font-weight: 700; cursor: pointer; }
.derived-response-editor button:disabled { opacity: .4; cursor: default; }
.derived-response-editor textarea { width: 100%; min-height: 250px; margin-top: 12px; padding: 13px 14px; resize: vertical; border: 1px solid #cbd8d0; border-radius: 8px; outline: none; color: var(--ink); background: white; font: 400 14px/1.65 "DM Sans", sans-serif; }
.derived-response-editor textarea:focus { border-color: #6b9a84; box-shadow: 0 0 0 3px rgba(25,107,76,.1); }
.derived-response-editor footer { margin-top: 9px; }
.derived-response-editor footer span { color: #708078; font-size: 10px; }

/* Variant B — editorial notebook */
.notebook { padding-bottom: 120px; background: #f1eee5; }
.notebook-header { max-width: 1180px; height: 86px; margin: auto; padding: 0 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.notebook-header nav { display: flex; gap: 31px; }
.notebook-header nav a { position: relative; padding: 34px 0 28px; color: #747871; font-size: 14px; text-decoration: none; }
.notebook-header nav a.is-current { color: var(--ink); font-weight: 700; }
.notebook-header nav a.is-current::after { content: ""; position: absolute; right: 0; bottom: 20px; left: 0; height: 2px; background: var(--coral); }
.notebook-header .avatar { justify-self: end; }
.notebook-hero { max-width: 1125px; margin: 43px auto 50px; padding: 0 28px; display: flex; align-items: flex-end; justify-content: space-between; }
.notebook-hero .eyebrow { color: var(--green); }
.notebook-hero h1 { margin: 13px 0 0; font: 700 clamp(46px, 7vw, 79px)/.98 "Manrope", sans-serif; letter-spacing: -.065em; }
.notebook-hero h1 em { color: var(--coral); font-family: Georgia, serif; font-weight: 400; }
.score-ring { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) var(--progress), #d9d7cf 0); }
.score-ring::before { content: ""; grid-area: 1/1; width: 94px; height: 94px; border-radius: 50%; background: #f1eee5; }
.score-ring span { grid-area: 1/1; z-index: 1; text-align: center; }
.score-ring b, .score-ring small { display: block; }.score-ring b { font: 700 25px "Manrope"; }.score-ring small { color: #7c8078; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.notebook-panel { max-width: 1125px; margin: auto; padding: 0 28px; }
.notebook-tools { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid #cfcfc8; }
.search-box { flex: 1; max-width: 390px; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid #d2d2cb; border-radius: 6px; background: rgba(255,255,255,.5); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }
.filter-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 6px; background: #e2dfd6; }
.filter-tabs button { padding: 7px 11px; border: 0; border-radius: 4px; color: #6b706a; background: transparent; font-size: 10px; cursor: pointer; }
.filter-tabs button.is-active { color: var(--ink); background: white; box-shadow: 0 2px 6px rgba(0,0,0,.06); font-weight: 700; }
.result-count { margin-left: auto; color: #7b7f78; font-size: 11px; }
.notebook-list { display: grid; }
.note-row { display: grid; grid-template-columns: 40px 1fr 35px; gap: 20px; align-items: start; padding: 27px 3px; border-bottom: 1px solid #d7d5cd; transition: background .2s; }
.note-row:hover { background: rgba(255,255,255,.34); }
.note-index { padding-top: 3px; color: #a1a49e; font: 500 14px "Manrope"; }
.note-meta { display: flex; align-items: center; gap: 8px; }
.note-meta > span { color: var(--coral); font: 700 9px "Manrope"; letter-spacing: .13em; text-transform: uppercase; }
.note-meta b { padding: 3px 7px; border-radius: 99px; color: #6d756f; background: #e0e1dc; font: 700 8px "Manrope"; letter-spacing: .08em; text-transform: uppercase; }
.note-meta b.is-learning { color: #855f22; background: #f5e6c8; }
.note-meta b.is-familiar { color: #336b56; background: #dcece4; }
.note-meta b.is-confident { color: white; background: var(--green); }
.note-content h3 { margin: 5px 0 8px; font: 700 17px/1.35 "Manrope"; letter-spacing: -.02em; }
.note-content p { max-width: 780px; margin: 0; color: #6d726c; font: 400 14px/1.6 "DM Sans"; }
.open-note { width: 31px; height: 31px; border: 1px solid #cbcfc8; border-radius: 50%; background: transparent; cursor: pointer; }
.empty-state { padding: 80px 20px; color: var(--muted); text-align: center; }

/* Variant C — immersive mock exam */
.exam { min-height: 100vh; color: white; background: radial-gradient(circle at 65% 30%, #275d4a 0, #153c31 30%, #0b2821 80%); }
.exam::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.exam-header { position: relative; height: 82px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); }
.exam-header > div { display: flex; align-items: center; gap: 8px; color: #a9c4b9; font-size: 11px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #e97962; box-shadow: 0 0 0 4px rgba(233,121,98,.12); }
.exit-button { padding: 9px 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; color: #dbe7e2; background: transparent; font-size: 10px; cursor: pointer; }
.exam-stage { position: relative; width: min(700px, calc(100% - 38px)); margin: auto; padding: 42px 0 120px; }
.exam-meta { display: flex; align-items: center; gap: 11px; color: #86aa9b; font: 700 10px "Manrope"; letter-spacing: .14em; }
.exam-meta i { width: 3px; height: 3px; border-radius: 50%; background: #709586; }.exam-meta b { margin-left: auto; color: #b0c8be; font-weight: 600; }
.examiner-card { display: flex; align-items: center; gap: 13px; margin: 24px 0 34px; }
.examiner-portrait { position: relative; display: grid; place-items: center; width: 49px; height: 49px; border-radius: 50%; background: linear-gradient(145deg, #dfb28f, #826252); font: 700 13px "Manrope"; }
.examiner-portrait i { position: absolute; right: 0; bottom: 2px; width: 11px; height: 11px; border: 2px solid var(--green-dark); border-radius: 50%; background: #6ac497; }
.examiner-card > div:nth-child(2) span, .examiner-card > div:nth-child(2) b { display: block; }.examiner-card > div:nth-child(2) span { color: #7fa293; font-size: 8px; letter-spacing: .14em; }.examiner-card > div:nth-child(2) b { margin-top: 3px; font: 600 14px "Manrope"; }
.sound-wave { display: flex; align-items: center; gap: 2px; margin-left: auto; }.sound-wave i { width: 2px; height: 11px; border-radius: 4px; background: #6ea08b; }.sound-wave i:nth-child(2),.sound-wave i:nth-child(4) { height: 20px; }.sound-wave i:nth-child(3) { height: 14px; }
.prompt-card { position: relative; min-height: 220px; padding: 45px 55px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: 0 26px 80px rgba(0,0,0,.15); text-align: center; backdrop-filter: blur(8px); }
.quote-mark { position: absolute; top: 17px; left: 25px; color: #e8a073; font: 70px/1 Georgia; opacity: .8; }
.prompt-card h1 { max-width: 570px; margin: 16px auto 13px; font: 600 clamp(27px, 4.3vw, 42px)/1.2 "Manrope"; letter-spacing: -.045em; }
.prompt-card p { margin: 0; color: #94b2a6; font-size: 11px; }
.record-zone { margin-top: 30px; text-align: center; }
.record-time { height: 35px; }.record-time span, .record-time b { display: block; }.record-time span { color: #e69a7c; font: 700 8px "Manrope"; letter-spacing: .15em; }.record-time b { margin-top: 3px; font: 600 15px "Manrope"; font-variant-numeric: tabular-nums; }
.record-button { width: 68px; height: 68px; display: grid; place-items: center; margin: 12px auto; border: 1px solid rgba(255,255,255,.33); border-radius: 50%; background: rgba(255,255,255,.06); cursor: pointer; box-shadow: 0 0 0 8px rgba(255,255,255,.025); }
.record-button i { width: 21px; height: 21px; border-radius: 50%; background: #ec735d; transition: border-radius .2s, transform .2s; }.record-button.is-recording i { border-radius: 4px; transform: scale(.75); }.record-button.is-recording { animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 15px rgba(236,115,93,.08); } }
.record-zone > p { color: #86a79a; font-size: 10px; }
.exam-model { margin: 25px 0 0; padding: 17px 20px; border-left: 2px solid #e79b76; background: rgba(0,0,0,.1); }.exam-model span { color: #e79b76; font: 700 8px "Manrope"; letter-spacing: .16em; }.exam-model p { margin: 8px 0 0; color: #c2d5cd; font-size: 11px; line-height: 1.65; }
.exam-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; }.exam-controls button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #bdd1c9; background: transparent; cursor: pointer; }.exam-progress { display: flex; gap: 5px; }.exam-progress i { width: 18px; height: 2px; background: rgba(255,255,255,.13); }.exam-progress i.is-active { background: #db997b; }

/* Preparation mode switcher */
.switcher { position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; padding: 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: white; background: #111a16; box-shadow: 0 12px 34px rgba(0,0,0,.24); }
.switcher button { height: 32px; padding: 0 14px; border: 0; border-radius: 99px; color: #aeb9b4; background: transparent; font-size: 10px; cursor: pointer; }.switcher button:hover { color: white; background: #28332e; }
.switcher button.is-active { color: #17221d; background: #f2b786; font-weight: 700; }
.load-error { width: min(500px, calc(100% - 40px)); margin: 120px auto; padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: white; text-align: center; }.load-error p { color: var(--muted); }

@media (max-width: 820px) {
  .universal-search { right: 74px; width: 220px; }
  .guided { display: block; }.study-sidebar { position: relative; width: 100%; height: auto; padding: 22px; }.study-sidebar.is-collapsed { width: 100%; height: 54px; min-height: 54px; padding: 0; }.study-sidebar.is-collapsed .sidebar-toggle { top: 12px; right: 18px; }.study-sidebar > div:first-child .sidebar-label, .study-sidebar > div:first-child h2, .study-sidebar > div:first-child .sidebar-copy, .sidebar-progress { display: none; }.topic-list { display: flex; margin: 22px -4px 0; padding-bottom: 5px; overflow-x: auto; }.topic-link { min-width: 160px; grid-template-columns: 28px 1fr; }.topic-link__count { display: none; }.topic-link__icon { width: 27px; height: 27px; }.lesson-header { padding: 0 22px; }.lesson-body { padding: 26px 22px 88px; }.coach-grid { grid-template-columns: 1fr; }
  .notebook-header { grid-template-columns: 1fr auto; padding: 0 20px; }.notebook-header nav { display: none; }.notebook-hero { margin-top: 24px; }.score-ring { width: 88px; height: 88px; }.score-ring::before { width: 73px; height: 73px; }.notebook-tools { flex-wrap: wrap; }.search-box { min-width: 100%; }.result-count { margin-left: auto; }.note-row { grid-template-columns: 1fr 30px; gap: 12px; }.note-index { display: none; }
  .part2-sidebar { gap: 10px; }.part2-sidebar .core-story-list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-height: 150px; }.part2-heading { margin-top: 5px; }.story-link-panel__header { grid-template-columns: 1fr; }.part2-body { max-width: 760px; }
}

@media (max-width: 520px) {
  .universal-search { right: 70px; width: 130px; transition: top .18s, right .18s, width .18s; }.universal-search__input kbd { display: none; }.universal-search.is-open { top: 68px; right: 22px; width: calc(100% - 44px); }.universal-search__results { width: 100%; max-height: calc(100vh - 125px); }
  .lesson-header { height: 62px; }.lesson-header .muted { display: none; }.topic-question-card { padding: 17px; }.lesson-title { display: block; }.time-badge { display: inline-block; }.lesson-title h1 { font-size: 30px; }.familiarity-picker { align-items: flex-start; flex-direction: column; }.familiarity-picker > div { width: 100%; }.familiarity-picker button { flex: 1; padding-right: 5px; padding-left: 5px; }.improved-answer-editor > button { width: 100%; }.lesson-actions { flex-direction: column-reverse; }.lesson-actions button { width: 100%; }.part2-heading { align-items: flex-start; flex-direction: column; }.cue-card h2 { font-size: 20px; }.core-story-topic-links__actions { align-items: stretch; flex-direction: column; }.core-story-topic-links__actions button { width: 100%; }.story-derived-item > header { flex-direction: column; }.story-derived-item__tools { width: 100%; flex-wrap: wrap; }.story-derived-item__actions { justify-content: flex-start; }.derived-response-editor > div, .derived-response-editor footer { align-items: stretch; flex-direction: column; }.derived-response-editor > div > button, .derived-response-editor footer button { width: 100%; }.notebook-hero { align-items: center; }.notebook-hero h1 { font-size: 43px; }.score-ring { display: none; }.filter-tabs { width: 100%; }.filter-tabs button { flex: 1; }.exam-header { padding: 0 18px; }.exam-header > div { display: none; }.prompt-card { padding: 40px 24px; }.exam-stage { padding-top: 28px; }.switcher { bottom: 12px; }
}

/* shadcn/ui visual system -------------------------------------------------- */
:root {
  --ink: #17251f;
  --muted: #66736d;
  --paper: #f7f8f6;
  --cream: #fafbf9;
  --green: #285f4c;
  --green-dark: #18382d;
  --mint: #e7f0eb;
  --coral: #b85c48;
  --line: #dde3df;
  --shadow: 0 1px 2px rgba(20, 35, 28, .04), 0 8px 24px rgba(20, 35, 28, .06);
}
body { background: var(--paper); }
button, input, textarea, select { outline: none; }
button { transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: 0 0 0 3px rgba(40,95,76,.16); }
.study-sidebar { border-right: 1px solid rgba(255,255,255,.08); background: #19382e; }
.sidebar-toggle, .topic-link, .add-story-button, .core-story-list-item { border-radius: 7px; }
.topic-link.is-active { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.lesson { background: var(--paper); }
.lesson-header { height: 64px; border-color: var(--line); background: rgba(255,255,255,.82); backdrop-filter: blur(12px); }
.part-tabs, .filter-tabs, .familiarity-picker > div, .difficulty-toolbar > div { border: 1px solid var(--line); border-radius: 8px; background: #f1f3f1; }
.part-tabs button, .filter-tabs button, .familiarity-picker button, .difficulty-toolbar button { border-radius: 6px; }
.part-tabs button.is-active, .filter-tabs button.is-active { color: var(--ink); background: white; box-shadow: 0 1px 2px rgba(20,35,28,.09); }
.lesson-body { max-width: 860px; padding-top: 34px; }
.topic-page-heading h1, .lesson-title h1, .topic-question-card .lesson-title h2 { font-weight: 650; }
.topic-question-list { gap: 16px; }
.topic-question-card, .core-story-reader, .story-link-panel, .part3-questions, .notebook-panel, .prompt-card { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.topic-question-card { padding: 24px; }
.time-badge, .part2-heading > span, .core-story-derived-stories__header > strong, .part3-questions__header strong { border: 1px solid var(--line); border-radius: 999px; background: #f7f8f7; }
.familiarity-picker { border-radius: 10px; }
.familiarity-picker button.is-active { background: var(--green); box-shadow: 0 1px 2px rgba(20,35,28,.12); }
.reveal-button { border-style: solid; border-color: #b9cbc2; border-radius: 8px; background: #f6faf8; }
.reveal-button:hover { border-color: var(--green); background: #edf5f1; }
.improved-answer-card, .cue-card { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: var(--shadow); }
.improved-answer-toggle, .secondary-button, .primary-button, .core-story-reader button, .story-derived-item__tools button, .story-derived-item__actions button, .derived-response-editor button { border-radius: 7px; }
.secondary-button { border-color: var(--line); box-shadow: 0 1px 2px rgba(20,35,28,.05); }
.primary-button { box-shadow: 0 1px 2px rgba(20,35,28,.12); }
.universal-search__input, .search-box { border-color: var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(20,35,28,.05); }
.universal-search__results { border-radius: 12px; box-shadow: 0 16px 40px rgba(20,35,28,.14); }
.notebook { background: var(--paper); }
.notebook-header { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.72); }
.note-row { border-color: var(--line); }
.score-ring::before { background: var(--paper); }
.switcher { border-color: #34463f; border-radius: 10px; background: #17231e; }
.switcher button { border-radius: 7px; }
.switcher button.is-active { color: #173126; background: #e7f0eb; }