:root{--bg:#f7f8fc;--card:#fff;--text:#171a22;--muted:#626978;--line:#e4e7ee;--blue:#0878d7}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.7}.top{height:68px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.86);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;text-decoration:none;font-size:0;width:176px;height:28px;background:url('img/teacherpalette-title.png') center/contain no-repeat}.brand img{display:block;width:auto;height:28px}.top a:not(.brand){color:var(--blue);text-decoration:none;font-size:14px}.article{max-width:780px;margin:0 auto;padding:76px 24px 88px}.eyebrow{margin:0 0 16px;color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}h1{font-size:clamp(36px,6vw,58px);line-height:1.08;letter-spacing:-.045em;margin:0 0 22px}h2{font-size:27px;letter-spacing:-.025em;line-height:1.25;margin:54px 0 14px}.lead{font-size:20px;color:var(--muted);margin:0 0 38px}.answer{padding:22px 24px;border-left:3px solid var(--blue);background:#edf6ff;border-radius:0 12px 12px 0}.answer strong{display:block;margin-bottom:5px}.media{margin:34px 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0b0e15}.media video,.media img{display:block;width:100%;height:auto}.related{margin-top:52px;padding-top:24px;border-top:1px solid var(--line)}.related a{color:var(--blue);text-decoration:none;font-weight:600}.cta{display:inline-block;margin-top:26px;padding:12px 18px;background:var(--blue);color:#fff!important;border-radius:10px;text-decoration:none;font-weight:700}@media(max-width:600px){.article{padding-top:50px}.top{padding:0 24px}.lead{font-size:18px}}

/* A quieter reading surface shared by the localized guides. */
:root { --bg: #faf7f2; --text: #363630; --muted: #7a756c; --line: #e6dfd5; --blue: #346a83; }
body { -webkit-font-smoothing: antialiased; }
.top { min-height: 72px; height: auto; gap: 20px; padding: 20px max(24px, calc((100vw - 1100px) / 2)); background: #fffdf9; }
.brand { flex-shrink: 0; width: 160px; }
.top a:not(.brand) { color: #65655e; }
.article-languages { max-width: 780px; margin: 28px auto 0; padding: 0 28px; display: flex; justify-content: flex-end; gap: 20px; }
.article-languages a { color: var(--muted); font-size: 12px; text-decoration: none; padding: 4px 0; }
.article-languages a[aria-current] { color: var(--text); border-bottom: 1px solid #a58c70; }
.article { max-width: 780px; padding: 52px 28px 100px; font-size: 17px; line-height: 1.95; }
.eyebrow { color: #8c765c; font-size: 12px; letter-spacing: .08em; margin-bottom: 20px; }
h1 { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.3; letter-spacing: -.035em; font-weight: 650; text-wrap: balance; }
.lead { font-size: 19px; line-height: 1.85; margin: 24px 0 36px; }
h2 { font-size: 25px; line-height: 1.5; margin: 48px 0 14px; font-weight: 600; }
.answer { padding: 24px 28px; background: #f0e9de; border: 0; border-radius: 12px; }
.answer strong { color: #826b50; font-size: 13px; margin-bottom: 8px; }
.media { margin: 38px 0; border-radius: 14px; box-shadow: 0 12px 32px #54452e0d; }
.cta { background: #386b77; border-radius: 9px; font-size: 14px; font-weight: 600; padding: 12px 22px; }
a:focus-visible { outline: 2px solid #346a83; outline-offset: 5px; }
@media (max-width: 600px) {
  .top { padding: 18px 20px; }
  .brand { width: 145px; }
  .top a:not(.brand) { font-size: 12px; }
  .article-languages { margin-top: 20px; padding: 0 22px; }
  .article { padding: 36px 22px 64px; font-size: 16px; }
  .lead { font-size: 17px; }
  .answer { padding: 22px; }
  h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* The help link doubles as a clear way back to the guide index. */
.top a:not(.brand) { color: #6d675f; border: 1px solid #e4ddd4; border-radius: 999px; padding: 7px 14px; transition: background .15s, color .15s, border-color .15s; }
.top a:not(.brand)::before { content: none; }
.top a:not(.brand):not(.back-link)::before { content: '←'; margin-right: 7px; color: #9a8065; }
.top a:not(.brand):hover { background: #f0e9de; color: #806145; border-color: #cdbba8; }