:root { color-scheme:light; --ink:#253239; --body:#253239; --muted:#687277; --paper:#fff; --line:#ded7ca; --accent:#41617c; --blue:#41617c; --blue-dark:#2d4559; --tint:#f1f5f7; --highlight:#e8f0f4; font-family:'DM Sans',Arial,sans-serif; font-size:16px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; padding-bottom:5.5rem; color:var(--body); background:#fff; font-size:1rem; line-height:1.55; }
button,input { font:inherit; } button { cursor:pointer; } a { color:#41617c; text-underline-offset:.16em; } a:hover { color:#2d4559; }
:focus-visible { outline:3px solid #41617c; outline-offset:3px; }
.skip-link { position:absolute; z-index:200; top:-4rem; left:.8rem; padding:.65rem 1rem; background:#fff; }
.skip-link:focus { top:.5rem; }
h1,h2,h3 { color:var(--ink); font-family:Newsreader,Georgia,serif; line-height:1.2; }
h1 { font-size:clamp(2rem,3.7vw,3.1rem); letter-spacing:-.025em; margin:.2rem 0 1.15rem; }
h2 { font-size:clamp(1.55rem,2.7vw,2rem); margin:.2rem 0 .7rem; }
.eyebrow { margin:0 0 .4rem; color:var(--accent); font-size:.82rem; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.header-inner,.main,.footer-inner { width:min(100%,1180px); margin:auto; }
.header-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 1.25rem; }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--ink); text-decoration:none; line-height:1.2; }
.brand:hover { color:var(--ink); }
.mark { display:grid; place-items:center; width:2.5rem; height:2.5rem; flex:none; border:1px solid var(--blue); border-radius:50%; background:#fff; color:var(--ink); font:bold 1rem Georgia,serif; letter-spacing:-.08em; }
.brand strong { display:block; font:700 .95rem/1.15 'DM Sans',Arial,sans-serif; letter-spacing:.01em; }
.brand small { display:block; color:var(--muted); font-size:.7rem; }
.site-nav { display:flex; gap:.35rem; align-items:center; white-space:nowrap; }
.site-nav a { display:inline-block; padding:.55rem .7rem; border-bottom:2px solid transparent; color:var(--muted); font-size:.86rem; font-weight:600; text-decoration:none; }
.site-nav a:hover { color:var(--blue); }
.site-nav a[aria-current] { border-bottom-color:var(--blue); color:var(--ink); }
.main { padding:1.7rem 1.25rem 4rem; }
.welcome { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(17rem,.78fr); gap:clamp(2rem,5vw,5rem); align-items:center; padding:3.2rem 1rem 3.7rem; }
.welcome-copy { max-width:40rem; }
.welcome-copy .hero-subtitle { margin:-.5rem 0 1.3rem; color:var(--muted); font:500 clamp(1.3rem,2.2vw,1.7rem)/1.3 Newsreader,Georgia,serif; }
.welcome-copy p:not(.eyebrow) { max-width:37rem; font-size:1.17rem; line-height:1.58; margin:0 0 1rem; }
.primary-link { display:inline-flex; align-items:center; gap:.8rem; min-height:3rem; margin-top:.8rem; padding:.65rem 1.2rem; border-radius:.3rem; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; }
.primary-link:hover { background:#2d4559; color:#fff; }
.layer-panel { max-width:26rem; width:100%; justify-self:end; }
.layer-panel > p { margin:0 0 1.25rem .7rem; font-weight:700; color:var(--muted); }
.layer-stack { padding:.1rem 1.2rem 1.3rem .2rem; }
.layer-stack span { position:relative; display:block; width:91%; min-height:3.55rem; margin-top:-.35rem; padding:.85rem 1.1rem; border:1px solid #ded7ca; border-radius:.7rem; background:#fff; box-shadow:0 .45rem 1.1rem #2532391c; color:var(--ink); font-size:1.13rem; font-weight:700; }
.layer-stack span:nth-child(2) { transform:translateX(.65rem); background:#f2f5f7; }
.layer-stack span:nth-child(3) { transform:translateX(1.3rem); background:#f7f9fa; }
.layer-stack span:nth-child(4) { transform:translateX(1.95rem); background:#e8f0f4; }
.how { padding:2.5rem 1rem 1rem; border-top:1px solid var(--line); }
.section-intro { max-width:44rem; }
.section-intro > p:last-child { margin:0; font-size:1.08rem; }
.how-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; list-style:none; padding:0; margin:1.8rem 0 0; }
.how-list li { padding:1.3rem; border:1px solid var(--line); border-radius:.8rem; background:#fff; }
.how-number { display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:50%; background:var(--highlight); color:var(--blue-dark); font-weight:700; }
.how-list h3 { margin:.9rem 0 .3rem; font-size:1.25rem; }.how-list p { margin:0; }
.page-intro { max-width:46rem; margin:.3rem 0 1.7rem; }.page-intro > p:last-child { margin:0; font-size:1.1rem; }
.type-nav { position:relative; z-index:20; margin-bottom:2rem; max-width:40rem; }
.type-picker > summary { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:4.3rem; padding:.65rem 1rem; border:1px solid var(--line); border-radius:.8rem; background:#fff; box-shadow:0 .2rem .7rem #2532390d; cursor:pointer; list-style:none; }
.type-picker > summary::-webkit-details-marker { display:none; }
.type-picker summary small { display:block; color:var(--muted); font-size:.82rem; font-weight:600; }
.type-picker summary strong { display:block; color:var(--ink); font-size:1.1rem; }
.picker-chevron { color:var(--accent); font-size:1.5rem; line-height:1; transition:transform .2s; }
.type-picker[open] .picker-chevron { transform:rotate(180deg); }
.type-list { position:absolute; top:calc(100% + .35rem); left:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; width:100%; max-height:min(24rem,65vh); overflow:auto; padding:.6rem; border:1px solid var(--line); border-radius:.85rem; background:#fff; box-shadow:0 1rem 2rem #25323921; }
.type-button { display:flex; align-items:center; gap:.7rem; min-height:3.3rem; padding:.7rem; border:1px solid transparent; border-radius:.55rem; background:#fff; color:var(--ink); text-align:left; }
.type-button:hover,.type-button:focus-visible { background:#f1f5f7; }.type-button[aria-pressed="true"] { border-color:#9fb6c6; background:#f1f5f7; }
.type-button span { display:grid; place-items:center; width:1.6rem; height:1.6rem; flex:none; border-radius:50%; background:var(--tint); color:var(--accent); font-size:.82rem; font-weight:700; }
.type-button strong { font-size:.98rem; line-height:1.2; }
.lesson { --accent:#41617c; --tint:#f1f5f7; }
.lesson-heading { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:1rem; }.number-badge { display:grid; place-items:center; width:2.5rem; height:2.5rem; flex:none; border-radius:.7rem; background:var(--accent); color:#fff; font-weight:700; }
.lesson-heading h2 { margin:0; font-size:1.7rem; }.lesson-heading p { margin:.25rem 0 0; color:var(--muted); }
.keyword-strip { margin:0 0 1.1rem; padding:.75rem 1rem; border-left:4px solid var(--accent); border-radius:0 .5rem .5rem 0; background:var(--tint); font-size:1rem; }
.mode-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; max-width:43rem; margin-bottom:1.3rem; }
.mode-button { min-height:3rem; padding:.6rem .4rem; border:1px solid var(--line); border-radius:.6rem; background:#fff; color:var(--ink); font-weight:700; line-height:1.2; }
.mode-button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); color:#fff; }
.activity { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:1.2rem; align-items:start; }
.question-card,.work-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:.85rem; background:#fff; box-shadow:0 .3rem 1.2rem #2532390a; }
.question-head { padding:1.1rem 1.2rem .7rem; border-top:4px solid var(--accent); }
.question-kind { display:block; margin-bottom:.35rem; color:var(--accent); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.question-head h3 { margin:0 0 .4rem; font-size:1.3rem; }.question-head p { margin:0; color:var(--muted); font-size:.86rem; }
.question-content { padding:0 1.2rem 1.2rem; }.passage { max-width:68ch; padding:.1rem 0; }.passage p { margin:0 0 1rem; font-size:1.12rem; line-height:1.62; }
.passage p:last-child { margin-bottom:.5rem; }
mark { color:inherit; background:var(--highlight); border-bottom:2px solid #41617c; border-radius:.1rem; padding:0 .08em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.visual { overflow:hidden; margin:1rem 0 .55rem; border:1px solid var(--line); border-radius:.7rem; background:#fff; }.visual a { display:block; padding:.6rem; }.visual img { display:block; width:100%; height:auto; margin:auto; }
.visual figcaption { padding:0 .8rem .5rem; color:var(--muted); font-size:.82rem; }.visual-focus { display:grid; gap:.25rem; margin:0; padding:.7rem .85rem; background:var(--highlight); font-size:.96rem; }
.visual-focus strong { color:var(--blue-dark); font-size:.76rem; letter-spacing:.03em; text-transform:uppercase; }
.source-note { margin:.65rem 0 1.1rem; color:var(--muted); font-size:.82rem; line-height:1.4; }
.command { margin:1rem 0 1.1rem; padding:.85rem 1rem; border-left:4px solid var(--accent); border-radius:0 .5rem .5rem 0; background:var(--tint); }.command span { display:block; color:var(--accent); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }.command p { margin:.3rem 0 0; color:var(--ink); font-size:1.2rem; font-weight:700; line-height:1.47; }
.alternatives { display:grid; gap:.55rem; }.alternative { display:flex; align-items:flex-start; gap:.65rem; min-width:0; padding:.7rem .8rem; border:1px solid var(--line); border-radius:.55rem; background:#fff; font-size:1.05rem; line-height:1.42; }
.alternative:has(input) { cursor:pointer; }.alternative input { flex:none; width:1.1rem; height:1.1rem; margin:.24rem 0 0; accent-color:var(--accent); }.letter { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; flex:none; border-radius:.45rem; background:var(--tint); color:var(--accent); font-weight:700; }.alternative-text { flex:1; min-width:0; }
.alternative.is-selected,.alternative.is-correct { border-width:2px; padding:calc(.7rem - 1px) calc(.8rem - 1px); }.alternative.is-selected { border-color:var(--accent); }.alternative.is-correct { border-color:#1d805e; background:#eaf6ef; }.alternative.is-correct .letter { color:#fff; background:#1d805e; }.alternative.is-wrong { border-color:#b85b41; background:#fff5ef; }.correct-tag { align-self:center; color:#176246; font-size:.78rem; font-weight:700; }
.work-title { padding:1.1rem 1.2rem; border-top:4px solid var(--accent); background:var(--tint); }.work-title h3 { margin:0 0 .25rem; font-size:1.28rem; }.work-title p { margin:0; }
.path-strip { display:flex; gap:.35rem; list-style:none; margin:1rem 0 0; padding:0; }.path-strip li { flex:1; min-width:0; padding:.35rem .2rem; border:1px solid #c6d2da; border-radius:.45rem; background:#fff; color:var(--ink); font-size:.79rem; font-weight:700; text-align:center; }.path-strip b { display:inline-grid; place-items:center; width:1.2rem; height:1.2rem; margin-right:.1rem; border-radius:50%; background:var(--accent); color:#fff; }
.stages { display:grid; gap:.8rem; padding:.9rem; }.stage { padding:.95rem; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:.65rem; background:#fff; }.stage:nth-child(2) { background:#fafbfa; }
.stage-heading { display:flex; align-items:center; gap:.6rem; margin-bottom:.65rem; }.stage-number { display:grid; place-items:center; width:2rem; height:2rem; flex:none; border-radius:.5rem; background:var(--accent); color:#fff; font-weight:700; }.stage h4 { margin:0; color:var(--accent); font-size:1.03rem; letter-spacing:.02em; }.stage > p { margin:0 0 .55rem; font-size:1.04rem; line-height:1.55; }.stage > p:last-child { margin-bottom:0; }
.result-line { display:inline-block; margin:.45rem 0; padding:.4rem .7rem; border-radius:.4rem; background:#e8f6ef; color:#176246; font-weight:700; }.why { margin-top:.4rem; padding-top:.65rem; border-top:1px solid var(--line); }.why strong { color:var(--accent); }.why p { margin:.3rem 0 0; }
.mini-options { min-width:0; margin:0; padding:0; border:0; }.mini-options legend { width:100%; margin-bottom:.5rem; padding:0; color:var(--ink); font-size:1.04rem; font-weight:700; line-height:1.45; }.mini-choice { display:flex; align-items:flex-start; gap:.65rem; width:100%; min-height:3rem; margin:.45rem 0 0; padding:.65rem .7rem; border:1px solid var(--line); border-radius:.55rem; background:#fff; cursor:pointer; line-height:1.4; }.mini-choice input { flex:none; width:1.1rem; height:1.1rem; margin:.2rem 0 0; accent-color:var(--accent); }.mini-choice:has(input:checked),.mini-choice.is-correct { border:2px solid var(--accent); padding:calc(.65rem - 1px) calc(.7rem - 1px); }.mini-choice:has(input:checked) { background:var(--tint); }.mini-choice.is-correct { border-color:#1d805e; background:#eaf6ef; }.mini-choice.is-wrong { border-color:#b85b41; background:#fff5ef; }
.check-button { width:100%; min-height:3rem; margin-top:.8rem; padding:.65rem 1rem; border:0; border-radius:.55rem; background:var(--accent); color:#fff; font-weight:700; }.check-button:disabled { opacity:.5; cursor:not-allowed; }.stage.is-right { border-left-color:#1d805e; }.stage.is-try { border-left-color:#b85b41; }.stage-feedback { margin-top:.8rem; padding-top:.75rem; border-top:1px solid var(--line); font-size:.98rem; }.stage-feedback strong { color:#9c4c51; }.stage.is-right .stage-feedback strong { color:#176246; }.stage-feedback p { margin:.3rem 0 0; }.stage-feedback .next-hint { margin-top:.6rem; color:var(--accent); font-weight:700; }
.stage.is-locked { border-left-color:var(--line); background:#f8f9f8; }.stage.is-locked .stage-number { background:#718084; }.stage.is-locked h4,.stage.is-locked p { color:var(--muted); }.check-area { padding:0 .9rem .9rem; }.score { margin:0; padding:.7rem; border-radius:.5rem; background:var(--tint); font-weight:700; }.loading { color:var(--muted); }
.about-main { max-width:850px; padding-top:3rem; }.about-main .lead { max-width:63ch; margin:0 0 2.1rem; font-size:1.2rem; line-height:1.65; }.about-section { padding:1.6rem 0; border-top:1px solid var(--line); }.about-section h2 { font-size:1.6rem; }.about-section p { max-width:66ch; margin:.4rem 0; font-size:1.06rem; }.credits { margin:.5rem 0 0; }.credits div { display:grid; grid-template-columns:12rem 1fr; gap:1rem; padding:.7rem 0; border-bottom:1px solid #e8e5dd; }.credits dt { color:var(--muted); font-weight:700; }.credits dd { margin:0; }.source-list { padding-left:1.2rem; }.source-list li { padding:.25rem 0; }
.data-details { max-width:44rem; margin-top:1.2rem; }.data-details summary { width:fit-content; padding:.6rem .85rem; border:1px solid var(--line); border-radius:.55rem; color:var(--accent); font-weight:700; cursor:pointer; }.data-details[open] summary { margin-bottom:1rem; background:var(--tint); }.data-scroll { overflow-x:auto; }.data-details table { width:100%; border-collapse:collapse; font-size:.96rem; }.data-details caption { margin-bottom:.55rem; color:var(--muted); text-align:left; }.data-details th,.data-details td { padding:.55rem .6rem; border-bottom:1px solid var(--line); text-align:left; }.data-details th { color:var(--ink); background:var(--tint); }.data-details td:not(:first-child),.data-details th:not(:first-child) { text-align:right; white-space:nowrap; }.data-details > p { margin-top:.85rem; color:var(--muted); font-size:.9rem; }
.site-footer { border-top:1px solid var(--line); background:#fff; }.footer-inner { display:flex; justify-content:space-between; gap:1rem; padding:1.3rem 1.25rem; color:var(--muted); font-size:.86rem; }
.font-control { position:fixed; right:max(.85rem,env(safe-area-inset-right)); bottom:max(.85rem,env(safe-area-inset-bottom)); z-index:100; display:flex; align-items:center; gap:.25rem; padding:.27rem; border:1px solid #bdcbd3; border-radius:2rem; background:#fff; box-shadow:0 .25rem 1rem #25323929; }.font-control span { padding:0 .3rem 0 .45rem; color:var(--muted); font-size:.86rem; font-weight:700; }.font-control button { width:2.6rem; height:2.6rem; border:0; border-radius:50%; background:#edf2f5; color:var(--accent); font-size:1.4rem; font-weight:700; line-height:1; }.font-control button:hover:not(:disabled) { background:#dce7dc; }.font-control button:disabled { color:#9b9693; background:#f5f5f4; cursor:default; }
@media (max-width:850px) { .activity { grid-template-columns:1fr; }.welcome { grid-template-columns:minmax(0,1fr) minmax(13rem,.65fr); gap:1rem; } }
@media (max-width:650px) {
  .header-inner { flex-wrap:wrap; gap:.65rem; padding:.7rem .9rem; }.brand small { font-size:.7rem; }.site-nav { width:100%; flex-wrap:wrap; justify-content:space-between; gap:.15rem; }.site-nav a { flex:1 1 auto; padding:.45rem .5rem; text-align:center; }
  .main { padding:1rem .9rem 3rem; }.welcome { grid-template-columns:1fr; padding:2rem .2rem 2.5rem; }.welcome-copy p:not(.eyebrow) { font-size:1.08rem; }.layer-panel { justify-self:start; max-width:25rem; margin-top:1rem; }.layer-panel > p { margin-left:.2rem; }.layer-stack { max-width:22rem; }.layer-stack span { min-height:3.2rem; font-size:1.06rem; }
  .how { padding:2rem .2rem .3rem; }.how-list { grid-template-columns:1fr; gap:.65rem; margin-top:1.2rem; }.how-list li { display:grid; grid-template-columns:2.1rem 1fr; column-gap:.9rem; padding:.8rem; }.how-number { grid-row:span 2; }.how-list h3 { margin:0; }.how-list p { margin:.1rem 0 0; }
  .page-intro { margin:.5rem 0 1.3rem; }.type-list { grid-template-columns:1fr; }.type-nav { margin-bottom:1.5rem; }.lesson-heading h2 { font-size:1.45rem; }.mode-list { gap:.3rem; }.mode-button { font-size:.88rem; }.question-head { padding:1rem .95rem .7rem; }.question-content { padding:0 .95rem 1rem; }.stages { padding:.7rem; }.stage { padding:.8rem; }.path-strip li { font-size:.72rem; }.passage p { font-size:1.1rem; }
  .about-main { padding-top:2.2rem; }.credits div { grid-template-columns:1fr; gap:.1rem; }.footer-inner { flex-direction:column; gap:.35rem; padding:1.1rem .9rem; }
  .font-control { right:max(.55rem,env(safe-area-inset-right)); bottom:max(.55rem,env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.picker-chevron { transition:none; } }