:root{font-size:20px;--ink:#183d39;--green:#216452;--blue:#184f73;--pale:#eaf4ef;--line:#abc5bd}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:1rem}body{margin:0;background:#fff;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65}header,main,footer{max-width:1160px;margin:auto;padding:1.4rem 2rem}header{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;border-bottom:1px solid var(--line)}a{color:var(--blue);text-underline-offset:.2em}a:hover{text-decoration-thickness:3px}.brand{color:var(--green);font-size:1.3rem;font-weight:800;text-decoration:none}nav{display:flex;flex-wrap:wrap;gap:1rem}nav a{padding:.3rem 0}.text-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;width:100%;font-size:.85rem}button,.button{min-height:48px;font:inherit;font-weight:650;cursor:pointer;border:2px solid var(--green);border-radius:10px;padding:.6rem 1rem;background:white;color:var(--green)}button:hover,.button:hover{background:#e2eee8}.button{display:inline-block;background:var(--green);color:white;text-decoration:none;margin:.4rem .4rem .4rem 0}.button:hover{background:#174c3e;color:white}.urgent{background:var(--blue);border-color:var(--blue)}.secondary{background:white;color:var(--green)}button:disabled{opacity:.55;cursor:default}:focus-visible{outline:4px solid #a54c00;outline-offset:4px}section{padding:2.3rem 0;scroll-margin-top:1rem}.hero{background:var(--pale);border-radius:22px;padding:2.2rem}.hero p{max-width:760px}h1{font-size:2.35rem;line-height:1.22;letter-spacing:-.035em;margin:.6rem 0 1rem}h2{font-size:1.75rem;line-height:1.3;margin:.4rem 0 1rem}h3{font-size:1.15rem}.eyebrow{font-size:.75rem;font-weight:750;letter-spacing:.08em}.reassurance{text-align:center}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem}.card{border:1px solid var(--line);border-radius:15px;padding:1.2rem;display:flex;flex-direction:column;align-items:flex-start}.card h3{margin:.5rem 0}.card p{flex:1}.card .button{font-size:.9rem}.panel{padding:1.8rem;border:1px solid var(--line);border-radius:18px;margin:1rem 0 2rem}.help{background:#eff6fb;border-color:#adc8d9}.audio{background:var(--pale);padding:1rem;border-radius:12px;display:flex;align-items:center;flex-wrap:wrap;gap:.6rem}.audio p{width:100%;margin:0;font-size:.85rem}.scenario{background:#f0f5fa;border-left:5px solid var(--blue);padding:1rem 1.3rem;margin:1.3rem 0}fieldset{border:0;padding:0;margin:1rem 0}legend{font-weight:750;margin-bottom:.8rem}.answer{display:flex;align-items:flex-start;gap:.7rem;border:2px solid var(--line);border-radius:10px;padding:.9rem;margin:.7rem 0;cursor:pointer}.answer:has(input:checked){border-color:var(--blue);background:#eff6fb}input[type=radio]{width:24px;height:24px;flex-shrink:0;margin-top:.25rem;accent-color:var(--blue)}.feedback{padding:1rem;background:var(--pale);border-left:5px solid var(--green);margin:1rem 0}.steps li,.resources li{padding-left:.35rem;margin-bottom:1rem}.note{border-top:1px solid var(--line);padding-top:1rem}footer{font-size:.8rem;border-top:1px solid var(--line);padding-bottom:2rem}.skip{position:absolute;top:-100px;left:1rem;background:white;padding:1rem;z-index:2}.skip:focus{top:1rem}[hidden]{display:none!important}@media(max-width:760px){header,main,footer{padding:1rem}.cards{grid-template-columns:1fr}.hero,.panel{padding:1.2rem}h1{font-size:1.9rem}.hero .button{display:block;text-align:center;margin:.8rem 0}nav{gap:.8rem}section{padding:1.5rem 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.lesson-term {
  font-style: normal;
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

/* Optional practice uses the existing colors, controls and responsive sizing. */
.practice { border: 1px solid var(--line); border-radius: 12px; margin: 1rem 0; padding: .75rem; min-width: 0; }
.practice summary, .browser-help summary { cursor: pointer; min-height: 48px; padding: .5rem; font-weight: 650; overflow-wrap: anywhere; }
.practice summary:focus-visible, .browser-help summary:focus-visible { outline: 4px solid #a54c00; outline-offset: 4px; }
.practice fieldset, .practice legend { min-width: 0; max-width: 100%; }
.practice .answer span { min-width: 0; overflow-wrap: anywhere; }
.practice-scenario, .practice-feedback { white-space: pre-line; }
.practice input[type=checkbox] { width: 24px; height: 24px; flex-shrink: 0; margin-top: .25rem; accent-color: var(--blue); }
.practice-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.practice button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.browser-help { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .5rem; }
.browser-help li { margin-bottom: .8rem; }
.lesson-progress { font-size: .85rem; font-weight: 650; }