:root { --ink:#17243f; --blue:#2055a6; --blue-dark:#163e7b; --soft:#edf3fc; --paper:#fbfcff; --line:#d8e1ee; --muted:#657187; --disabled:#a0a9b7; --max:1080px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px; line-height:1.6; }
a { color:inherit; }
.site-header, main, footer { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; }
.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:750; }
.mark { display:grid; place-items:center; width:36px; height:36px; color:white; background:var(--blue); border-radius:50%; font:1.25rem Georgia,serif; }
.back-link { color:var(--blue); font-weight:650; text-underline-offset:5px; }
.intro { padding:88px 0 66px; max-width:820px; }
.intro.compact { padding-bottom:48px; }
.eyebrow { margin:0 0 14px; color:var(--blue); font-weight:750; letter-spacing:.09em; text-transform:uppercase; font-size:.78rem; }
h1 { margin:0; font:500 clamp(2.8rem,7vw,5.5rem)/1 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }
.lead { max-width:680px; margin:28px 0 0; color:var(--muted); font-size:1.18rem; }
.library, .exercise-section { padding:46px 0 88px; border-top:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:28px; }
.section-heading h2 { margin:0; font:500 clamp(2rem,5vw,3.4rem)/1.1 Georgia,serif; }
.section-heading>p { max-width:460px; margin:0; color:var(--muted); }
.key { display:inline-block; width:9px; height:9px; margin:0 6px 1px 14px; border-radius:50%; }
.active-key { background:var(--blue); } .future-key { background:#c2c9d3; }
.title-list { list-style-position:inside; margin:0; padding:0; border-top:1px solid var(--line); }
.title-list li { display:grid; grid-template-columns:1fr auto; gap:24px; padding:24px 4px; color:var(--disabled); border-bottom:1px solid var(--line); font:500 clamp(1.25rem,3vw,1.8rem) Georgia,serif; }
.title-list li.available { color:var(--ink); font-weight:700; }
.title-list li.available a { display:contents; text-decoration:none; }
.title-list li.available:hover { background:var(--soft); }
.status { align-self:center; color:var(--disabled); font:650 .82rem -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.available .status { color:var(--blue); }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:0 0 82px; }
.choice { min-height:260px; padding:32px; border:1px solid var(--line); border-radius:16px; text-decoration:none; }
.active-choice { background:var(--blue); color:white; box-shadow:0 16px 40px rgba(32,85,166,.16); transition:.2s ease; }
.active-choice:hover { background:var(--blue-dark); transform:translateY(-2px); }
.disabled-choice { color:var(--disabled); background:#f3f5f8; }
.choice-number { font-size:.78rem; font-weight:750; letter-spacing:.08em; }
.choice h2 { margin:34px 0 8px; font:500 2.5rem Georgia,serif; }
.choice p { margin:0; max-width:380px; }
.choice-action { display:block; margin-top:34px; font-weight:750; }
.exercise-section { scroll-margin-top:20px; }
.worksheet-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.worksheet-grid a { display:flex; justify-content:space-between; gap:16px; padding:20px; background:white; border:1px solid var(--line); border-radius:10px; text-decoration:none; font-weight:700; }
.worksheet-grid a:hover, .worksheet-grid a:focus-visible { border-color:var(--blue); color:var(--blue); box-shadow:0 7px 20px rgba(23,36,63,.07); }
.worksheet-grid small { color:var(--blue); font-size:.8rem; }
.print-note { margin:24px 0 0; padding:18px 20px; background:var(--soft); border-left:4px solid var(--blue); color:var(--muted); }
footer { padding:26px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
@media (max-width:720px) {
  .site-header, main, footer { width:min(calc(100% - 28px),var(--max)); }
  .intro { padding:60px 0 48px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .choice-grid, .worksheet-grid { grid-template-columns:1fr; }
  .title-list li { grid-template-columns:1fr; gap:4px; padding:20px 2px; }
  .status { font-size:.74rem; }
  .choice { min-height:230px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .active-choice:hover { transform:none; } }