:root {
  --ink: #0a2540; --muted: #526678; --paper: #fffefd; --canvas: #f5f2ec;
  --theory-accent: #705494; --theory-soft: #f3eff6; --line: #ddd8ce;
  --shadow: 0 14px 36px rgba(22, 43, 54, .055);
}
* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: hidden; }
body {
  min-height: 100%; margin: 0; padding: 18px 18px 56px; overflow-x: hidden;
  color: var(--ink); background: var(--canvas);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.notalix-skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 9px 13px; border-radius: 8px; color: #fff; background: var(--ink); transform: translateY(calc(-100% - 16px)); transition: transform .12s ease; }
.notalix-skip-link:focus { transform: translateY(0); }
.theory-hub { width: min(1120px, 100%); margin: 0 auto; }
.theory-intro { margin: 40px 4px 25px; }
.theory-kicker, .method-kicker { display: block; margin-bottom: 8px; color: var(--theory-accent); font-size: .71rem; font-weight: 850; letter-spacing: .15em; }
.theory-intro h1 { margin: 0; font-size: clamp(2.45rem, 5vw, 3.65rem); line-height: 1; letter-spacing: -.05em; }
.theory-intro p { margin: 10px 0 0; color: var(--muted); font-size: 1rem; }
.catalog-heading { display: flex; align-items: center; gap: 12px; margin: 0 4px 12px; color: #687887; font-size: .72rem; font-weight: 760; letter-spacing: .03em; }
.catalog-heading i { height: 1px; flex: 1; background: var(--line); }
.theory-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chapter-card { position: relative; min-width: 0; padding: 23px 23px 50px; border: 1px solid var(--line); border-radius: 21px; background: var(--paper); box-shadow: var(--shadow); }
.chapter-card::before { position: absolute; top: 0; left: 22px; width: 52px; height: 3px; border-radius: 0 0 3px 3px; background: #b6a7c7; content: ""; }
.chapter-ready::before { background: var(--theory-accent); }
.chapter-header { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: start; margin-bottom: 17px; }
.chapter-number { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--theory-accent); background: var(--theory-soft); font-size: .76rem; font-weight: 850; letter-spacing: .06em; }
.chapter-header h2 { margin: 1px 0 0; font-size: 1.35rem; line-height: 1.12; letter-spacing: -.025em; }
.chapter-header p { margin: 5px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.35; }
.chapter-list { margin: 0; padding: 0; list-style: none; }
.chapter-list li { border-top: 1px solid #ebe7df; }
.chapter-list li:last-child { border-bottom: 1px solid #ebe7df; }
.chapter-list li > span, .chapter-list a { display: flex; min-height: 40px; align-items: center; padding: 9px 4px; color: #2d455b; font-size: .9rem; line-height: 1.25; }
.chapter-list li > span::before { width: 5px; height: 5px; flex: 0 0 auto; margin: 0 11px 0 2px; border-radius: 50%; background: #bdc4c8; content: ""; }
.chapter-list a { justify-content: space-between; gap: 12px; padding-left: 11px; color: var(--ink); font-weight: 720; text-decoration: none; transition: color .15s ease, background .15s ease, padding .15s ease; }
.chapter-list a b { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--theory-accent); background: var(--theory-soft); font-size: .85rem; }
.chapter-list a:hover, .chapter-list a:focus-visible { padding-left: 15px; color: var(--theory-accent); background: #faf8fb; }
.chapter-list a:focus-visible { outline: 3px solid rgba(112, 84, 148, .16); outline-offset: 1px; }
.chapter-status { position: absolute; right: 23px; bottom: 18px; color: #7a858d; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.chapter-status.is-ready { color: var(--theory-accent); }
.page-method { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 2fr); gap: 28px; align-items: center; margin-top: 16px; padding: 25px 27px; border: 1px solid var(--line); border-radius: 21px; background: #faf8f4; }
.page-method h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.page-method ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.page-method li { display: flex; min-width: 0; gap: 9px; align-items: flex-start; }
.page-method li > b { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--theory-accent); background: var(--theory-soft); font-size: .72rem; }
.page-method strong, .page-method small { display: block; }
.page-method strong { font-size: .82rem; line-height: 1.25; }
.page-method small { margin-top: 3px; color: var(--muted); font-size: .72rem; line-height: 1.3; }
@media (max-width: 760px) { .theory-catalog { grid-template-columns: 1fr; } .page-method { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 520px) {
  body { padding: 10px 7px 32px; }
  .theory-intro { margin: 21px 7px 18px; }
  .theory-intro h1 { font-size: 2.35rem; }
  .catalog-heading { align-items: flex-start; margin-inline: 7px; }
  .catalog-heading i { margin-top: 7px; }
  .catalog-heading span:last-child { max-width: 190px; text-align: right; line-height: 1.3; }
  .theory-catalog { gap: 9px; }
  .chapter-card { padding: 19px 14px 45px; border-radius: 18px; }
  .chapter-card::before { left: 18px; }
  .chapter-header { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
  .chapter-number { width: 36px; height: 36px; border-radius: 11px; }
  .chapter-header h2 { font-size: 1.18rem; }
  .chapter-list li > span, .chapter-list a { min-height: 38px; padding-block: 8px; font-size: .86rem; }
  .chapter-status { right: 17px; bottom: 15px; }
  .page-method { margin-top: 9px; padding: 21px 17px; border-radius: 18px; }
  .page-method ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }
