:root {
  color-scheme: light;
  --canvas: #f9f9f6;
  --ink: #242623;
  --muted: #686d62;
  --line: #e6e7df;
  --focus: #3a6453;
  --motion-quick: 160ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-padding-top: 24px; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a, button, input, select, summary { touch-action: manipulation; }
button, a { transition: color var(--motion-quick) ease, background-color var(--motion-quick) ease, border-color var(--motion-quick) ease, box-shadow var(--motion-quick) ease, transform var(--motion-quick) var(--motion-ease), opacity var(--motion-quick) ease; }
button:active:not(:disabled) { transform: translateY(1px); }
.skip-link { position: absolute; top: -80px; left: 20px; z-index: 2; padding: 12px 18px; background: white; border-radius: 8px; }
.skip-link:focus { top: 14px; }

.site-header { min-height: 96px; margin: 0 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 22px; font-weight: 550; letter-spacing: -.7px; border-radius: 4px; }
.brand-mark { width: 33px; height: 33px; }
.brand-dot { color: #7c8c72; }
.header-label { font-size: 12px; color: var(--muted); }
.account-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 20px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.account-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 0; text-decoration: none; white-space: nowrap; }
.account-nav form { margin: 0; }
.account-nav button { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid var(--line); border-radius: 9px; background: transparent; padding: 9px 13px; margin: 0; font: inherit; color: inherit; white-space: nowrap; cursor: pointer; }
.account-nav a:hover, .account-nav button:hover { color: var(--ink); }
.account-nav button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.main-content { width: min(100%, 1032px); margin: 0 auto; padding: 86px 32px 54px; flex: 1; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: #73776b; margin-bottom: 22px; }
.eyebrow-line { width: 19px; height: 1px; background: #879079; }
h1 { margin: 0 0 18px; font-size: clamp(36px, 4.7vw, 56px); font-weight: 500; letter-spacing: -2.3px; line-height: 1.08; }
.intro-description { margin: 0; color: #686d62; font-size: 17px; line-height: 1.65; letter-spacing: -.15px; }
.subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 46px; }
.subject-card { display: flex; flex-direction: column; min-height: 340px; padding: 30px; border: 1px solid #e3e5dc; border-radius: 20px; background: #fff; text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.subject-card:hover { transform: translateY(-3px); border-color: #b9c1ad; box-shadow: 0 10px 28px #28351c08; }
.subject-card.is-selected { border-color: #708b77; box-shadow: 0 0 0 1px #708b77; }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
.subject-symbol { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: #edf2e7; color: #547044; font-family: Georgia, "Times New Roman", serif; font-size: 30px; line-height: 1; }
.algebra .subject-symbol { background: #f0edf7; color: #75608e; font-size: 34px; font-style: italic; padding-bottom: 4px; }
.subject-index { color: #a6aa9f; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.subject-card h2 { margin: 0 0 11px; font-size: 24px; font-weight: 500; letter-spacing: -.65px; }
.subject-description { color: #686d62; font-size: 14px; line-height: 1.7; margin: 0; max-width: 335px; }
.subject-topics { margin: 17px 0 26px; color: #686d62; font-size: 12px; line-height: 1.8; }
.card-action { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 21px; border-top: 1px solid #eef0e9; margin-top: auto; font-size: 12px; font-weight: 500; }
.arrow-circle { display: grid; place-items: center; height: 30px; width: 30px; border: 1px solid #e5e8df; border-radius: 50%; transition: background 160ms ease, border-color 160ms ease; }
.arrow-circle svg { height: 17px; width: 17px; }
.subject-card:hover .arrow-circle { background: #edf2e7; border-color: #d2ddc8; }
.algebra:hover .arrow-circle { background: #f0edf7; border-color: #dcd5e7; }
.closing-note { display: flex; justify-content: center; align-items: center; gap: 19px; margin-top: 44px; }
.closing-note p { margin: 0; font-size: 12px; color: #6e7466; text-align: center; line-height: 1.6; }
.note-line { width: 25px; height: 1px; background: #dcded4; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 48px; padding: 24px 0; border-top: 1px solid var(--line); color: #6e7466; font-size: 11px; }

.lesson-area { margin-top: 42px; scroll-margin-top: 24px; }
/* The fragment target is a reading region, not an interactive control.
   Keep it focusable for navigation; links retain their keyboard focus rings. */
.lesson-area:focus { outline: none; }
.lesson-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.lesson-heading h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.5px; }
.text-link { color: #69715f; font-size: 12px; text-underline-offset: 4px; }
.empty-state { display: flex; align-items: center; flex-direction: column; padding: 36px 24px; border: 1px dashed #cfd5c5; border-radius: 16px; text-align: center; }
.empty-state svg { color: #87947b; width: 30px; height: 30px; margin-bottom: 14px; }
.empty-state h3 { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.empty-state p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lesson-card { display: flex; align-items: center; gap: 22px; padding: 25px 28px; background: white; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.lesson-card:hover { border-color: #b6aac7; box-shadow: 0 5px 20px #35264606; }
.lesson-number { display: grid; place-items: center; width: 50px; height: 58px; flex: 0 0 auto; border-radius: 12px; background: #f0edf7; color: #75608e; font: 25px Georgia, serif; }
.lesson-card-copy { flex: 1; }
.lesson-kicker { font-size: 9px; font-weight: 600; letter-spacing: 1.4px; color: #81718f; }
.lesson-card h3 { margin: 7px 0; font-size: 19px; font-weight: 500; letter-spacing: -.4px; }
.lesson-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.lesson-card .arrow-circle { flex: 0 0 auto; }

.lecture-content { width: min(100%, 960px); padding-top: 32px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 54px; font-size: 12px; color: var(--muted); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs span[aria-hidden] { color: #b1b5aa; }
.breadcrumbs [aria-current] { color: var(--ink); }
.lecture-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 44px; }
.lecture-toolbar .breadcrumbs { min-width: 0; margin: 0; }
.lecture-edit-link { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; line-height: 1.5; white-space: nowrap; }
.lecture-edit-link:hover { background: #fff; border-color: #b6aac7; }
.lecture-intro .eyebrow { color: #81718f; margin-bottom: 18px; }
.lecture-intro .eyebrow-line { background: #9d8dac; }
.lecture-intro h1 { font-size: clamp(34px, 4.5vw, 48px); letter-spacing: -1.8px; }
.lecture-intro .intro-description { max-width: 760px; font-size: 15px; line-height: 1.85; }
.materials-section { margin-top: 45px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.section-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.4px; }
.section-heading > span { font-size: 11px; color: var(--muted); }
.materials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.material-card { display: flex; align-items: center; gap: 14px; padding: 22px 19px; border: 1px solid var(--line); border-radius: 15px; background: #fff; text-decoration: none; transition: border-color 160ms ease; }
.material-card:hover { border-color: #b6aac7; }
.material-icon { display: grid; place-items: center; width: 40px; height: 44px; flex: 0 0 auto; background: #f6f5f1; color: #7d8075; border-radius: 9px; }
.material-icon svg { height: 23px; width: 23px; }
.material-copy { flex: 1; min-width: 0; }
.material-copy h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.material-copy p { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.solution-label { background: #f8f1e6; color: #8c6a36; border-radius: 4px; padding: 2px 5px; font-size: 9px; }
.material-arrow { color: #93958c; font-size: 18px; }
.problems-section { margin-top: 46px; padding-top: 31px; border-top: 1px solid var(--line); }
.count-badge { display: grid; place-items: center; min-width: 23px; height: 23px; background: #efeee8; border-radius: 8px; color: #76786e; font-size: 11px; font-weight: 400; }
.section-description { margin: -4px 0 24px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.problem-list { display: grid; gap: 10px; }
.problem-card { min-width: 0; padding: 19px 22px; background: #fff; border: 1px solid var(--line); border-radius: 15px; scroll-margin-top: 24px; }
.problem-card h3 { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 14px; font-weight: 550; }
.problem-number { display: grid; place-items: center; width: 29px; height: 29px; background: #f4f1f8; color: #8a799a; border-radius: 9px; font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.problem-math > p { margin: 10px 0; font-size: 14px; line-height: 1.9; }
.problem-math .stored-problem-text { white-space: pre-line; overflow-wrap: anywhere; }
.formula { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 6px 2px; border-radius: 5px; }
.formula:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.formula .katex-display { margin: 12px 0; text-align: left; }
.formula .katex-display > .katex { text-align: left; }
.problem-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.problem-link:hover { border-color: #b6aac7; box-shadow: 0 5px 24px #35264608; }
.problem-open { display: flex; align-items: center; gap: 14px; color: #81718f; font-size: 11px; }
.problem-open > span { font-size: 17px; }
.math-fallback { color: var(--muted); font-size: 13px; }
.lecture-end { display: flex; align-items: center; gap: 13px; margin-top: 35px; }
.lecture-end p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.lecture-end a { margin-left: auto; white-space: nowrap; }

.is-submitting [data-submitting] { opacity: .68; cursor: progress; }
.is-submitting select, .is-submitting input { cursor: progress; }
.brand, .site-header { flex-shrink: 0; }
.subject-card:active, .lesson-card:active, .problem-link:active, .material-card:active { transform: translateY(0); border-color: #9d8dac; }

/* Supporting browsers cross-fade native navigations; other browsers navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; animation-timing-function: ease-out; }

@media (min-width: 1500px) { .main-content:not(.lecture-content) { padding-top: 110px; } }
@media (max-width: 700px) {
  .site-header { min-height: 80px; margin: 0 24px; gap: 12px; }
  .header-label { display: none; }
  .account-nav { gap: 12px; font-size: 11px; }
  .main-content { padding: 53px 24px 44px; }
  h1 { letter-spacing: -1.4px; }
  .intro-description { font-size: 15px; }
  .subjects { grid-template-columns: 1fr; margin-top: 32px; gap: 16px; }
  .subject-card { min-height: 305px; padding: 25px; }
  .card-top { margin-bottom: 22px; }
  .subject-description { max-width: 100%; }
  .closing-note { gap: 10px; margin-top: 32px; }
  .note-line { width: 15px; flex-shrink: 0; }
  .site-footer { margin: 0 24px; padding: 22px 0; flex-wrap: wrap; font-size: 11px; }
  .lesson-card { padding: 22px 18px; gap: 15px; }
  .lesson-card h3 { font-size: 17px; }
  .lesson-number { width: 39px; height: 49px; font-size: 21px; }
  .lecture-content { padding-top: 25px; }
  .breadcrumbs { margin-bottom: 38px; font-size: 11px; gap: 9px; }
  .lecture-toolbar { gap: 12px 20px; margin-bottom: 30px; }
  .lecture-intro h1 { letter-spacing: -1.1px; }
  .lecture-intro .intro-description { font-size: 14px; }
  .materials-grid { grid-template-columns: 1fr; }
  .materials-section { margin-top: 34px; }
  .section-heading > span { display: none; }
  .material-card { padding: 18px; }
  .problems-section { margin-top: 32px; padding-top: 26px; }
  .problem-card { padding: 17px 18px; border-radius: 14px; }
  .problem-math > p { font-size: 13px; }
  .formula { font-size: 14px; }
  .lecture-end { flex-wrap: wrap; }
  .lecture-end a { flex-basis: 100%; margin: 8px 0 0; }
}
@media (max-width: 560px) {
  .site-header { min-height: 94px; align-items: flex-start; flex-wrap: wrap; column-gap: 16px; row-gap: 7px; padding: 17px 0 13px; }
  .site-header .brand { font-size: 19px; }
  .site-header .brand-mark { width: 29px; height: 29px; }
  .account-nav { width: 100%; justify-content: flex-start; column-gap: 16px; row-gap: 4px; font-size: 11px; }
  .account-nav a { min-height: 32px; padding: 6px 0; }
  .account-nav form { margin-left: auto; }
  .account-nav button { min-height: 32px; padding: 6px 10px; }
  .account-page .site-header { min-height: 70px; }
}
@media (max-width: 380px) {
  .site-header { margin: 0 16px; gap: 8px; }
  .site-header .brand { font-size: 17px; gap: 6px; }
  .site-header .brand-mark { width: 27px; height: 27px; }
  .account-nav { gap: 9px; font-size: 10px; }
  .account-nav button { padding: 8px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .subject-card:hover { transform: none; }
  button:active:not(:disabled) { transform: none; }
}