:root {
  --help-cream: #fffaf0;
  --help-cream-deep: #f5ecd4;
  --help-ink: #173d3f;
  --help-muted: #586b67;
  --help-purple: #5d2878;
  --help-gold: #bd8e24;
  --help-red: #9b342d;
  --help-line: #ded6c2;
}

html { scroll-padding-top: 1.5rem; }
body.help-site { overflow-x: hidden; background: #fdf9ed; color: var(--help-ink); }
.help-shell, .article-shell { width: min(68rem, calc(100% - 2rem)); margin-inline: auto; }
.help-site a { text-underline-offset: .18em; }

.help-hero {
  background:
    radial-gradient(circle at 85% 10%, rgb(189 142 36 / 18%), transparent 18rem),
    radial-gradient(circle at 10% 80%, rgb(93 40 120 / 10%), transparent 22rem),
    repeating-linear-gradient(120deg, rgb(116 88 34 / 1.2%) 0 1px, transparent 1px 10px),
    linear-gradient(145deg, #fffaf0, #f5f1df 72%, #e9f1e8);
}
.help-hero__inner { padding-block: clamp(3.2rem, 9vw, 6.4rem); text-align: center; }
.help-hero h1 { max-width: 13ch; margin-inline: auto; font-size: clamp(2.65rem, 10vw, 6.2rem); }
.help-lead { max-width: 38rem; margin: 1.2rem auto 0; color: var(--help-muted); font-size: clamp(1.1rem, 3vw, 1.4rem); }

.help-search { max-width: 38rem; margin: 2rem auto 0; text-align: left; }
.help-search label { display: block; margin-bottom: .45rem; font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.help-search__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: .35rem; border: 1px solid rgb(23 61 63 / 18%); border-radius: 1rem; background: rgb(255 255 255 / 82%); box-shadow: 0 14px 34px rgb(42 45 29 / 9%); }
.help-search input { min-width: 0; min-height: 3.2rem; padding: .65rem .85rem; border: 0; outline: 0; color: var(--help-ink); background: transparent; font: inherit; }
.help-search button { min-height: 3.2rem; padding-inline: 1.15rem; border: 0; border-radius: .75rem; color: #fff; background: var(--help-purple); font: inherit; font-weight: 750; cursor: pointer; }
.help-search button:focus-visible, .help-search input:focus-visible { outline: 3px solid #d5aa39; outline-offset: 2px; }
.search-results { margin-top: .55rem; padding: .45rem; border: 1px solid var(--help-line); border-radius: .85rem; background: #fffdf7; box-shadow: 0 14px 30px rgb(28 45 39 / 12%); }
.search-results p { margin: .4rem .55rem; color: var(--help-muted); }
.search-results a { display: block; min-height: 2.75rem; padding: .65rem .7rem; border-radius: .6rem; color: var(--help-ink); font-weight: 700; text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: var(--help-cream-deep); }
.search-results small { display: block; color: var(--help-muted); font-weight: 500; }

.quick-help, .help-streams { padding-block: clamp(3.4rem, 8vw, 6rem); }
.help-streams { background: #eef3e9; }
.section-heading--help { max-width: 38rem; margin-bottom: 1.6rem; }
.section-heading--help h2 { font-size: clamp(2rem, 7vw, 3.5rem); }
.quick-links { display: grid; gap: .75rem; }
.quick-links a { display: flex; min-height: 4.1rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--help-line); border-radius: .9rem; color: var(--help-ink); background: #fffdf7; box-shadow: 0 8px 20px rgb(44 52 34 / 6%); font-weight: 720; line-height: 1.35; gap: .8rem; text-decoration: none; }
.quick-links a:hover, .quick-links a:focus-visible { border-color: #c2a452; background: #fff7db; transform: translateY(-1px); }
.quick-links span { width: 2rem; flex: 0 0 2rem; color: var(--help-purple); font-size: 1.2rem; text-align: center; }
.quick-links .quick-link--voice { min-height: 4.8rem; padding-block: 1.15rem; line-height: 1.45; text-wrap: balance; }

.stream-grid { display: grid; gap: 1rem; }
.stream-card { position: relative; display: block; min-height: 15rem; padding: 1.5rem; border: 1px solid rgb(23 61 63 / 12%); border-radius: 1.2rem; color: var(--help-ink); background: #fffaf0; box-shadow: 0 15px 35px rgb(31 55 48 / 8%); text-decoration: none; }
.stream-card:hover, .stream-card:focus-visible { box-shadow: 0 20px 44px rgb(31 55 48 / 14%); transform: translateY(-2px); }
.stream-card__number { display: grid; width: 2.25rem; height: 2.25rem; margin-bottom: 1.4rem; border-radius: 50%; color: #fff; background: var(--help-purple); font-weight: 800; place-items: center; }
.stream-card h3 { font-size: clamp(1.65rem, 6vw, 2.25rem); }
.stream-card p { margin: .75rem 0 1.25rem; color: var(--help-muted); }
.text-link { color: var(--help-purple); font-weight: 800; }
.stream-card--parents .stream-card__number { background: #9b5e28; }
.stream-card--teachers .stream-card__number { background: #27645f; }
.article-hero { padding-block: 2.8rem 2.4rem; background: linear-gradient(145deg, #fff7df, #e8f1e8); }
.article-hero--parents { background: linear-gradient(145deg, #fff2dd, #f0eadc 58%, #e6f0e6); }
.article-hero--teachers { background: linear-gradient(145deg, #eaf2e8, #edf0dc 58%, #f5ead7); }
.article-hero h1 { max-width: 14ch; margin-top: .35rem; font-size: clamp(2.5rem, 9vw, 5.6rem); }
.article-hero p:last-child { max-width: 42rem; margin: 1rem 0 0; color: var(--help-muted); font-size: 1.16rem; }
.back-link { display: inline-block; min-height: 2.75rem; color: var(--help-purple); font-weight: 750; text-decoration: none; }
.topic-jumps { display: flex; overflow-x: auto; padding-block: .9rem; border-bottom: 1px solid var(--help-line); gap: .55rem; scrollbar-width: thin; }
.topic-jumps a { min-height: 2.75rem; padding: .58rem .85rem; border: 1px solid var(--help-line); border-radius: 99rem; color: var(--help-ink); background: #fffdf7; font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.article-layout { display: grid; gap: 2rem; padding-block: 1rem 4rem; }
.help-article section { padding-block: 2.5rem; border-bottom: 1px solid var(--help-line); scroll-margin-top: 1rem; }
.help-article section:last-child { border-bottom: 0; }
.help-article h2 { font-size: clamp(1.9rem, 7vw, 3rem); }
.help-article h3 { margin-top: 1.75rem; font-size: clamp(1.35rem, 4vw, 1.7rem); }
.help-article p, .help-article li { max-width: 44rem; }
.help-article p { margin: .9rem 0 0; }
.section-kicker { margin: 0 0 .45rem !important; color: var(--help-gold); font-size: .74rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.friendly-steps, .check-list { display: grid; margin: 1.2rem 0 0; padding: 0; list-style: none; gap: .85rem; }
.friendly-steps { counter-reset: steps; }
.friendly-steps li { position: relative; min-height: 2.5rem; padding-left: 3rem; counter-increment: steps; }
.friendly-steps li::before { position: absolute; left: 0; display: grid; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: #fff; background: var(--help-purple); content: counter(steps); font-weight: 800; place-items: center; }
.check-list li { position: relative; padding-left: 1.65rem; }
.check-list li::before { position: absolute; left: .12rem; color: var(--help-gold); content: "✦"; }
.tip { max-width: 44rem; margin-top: 1.3rem; padding: 1rem 1.1rem; border-left: .28rem solid var(--help-gold); border-radius: 0 .8rem .8rem 0; background: #fff3cd; }
.symbol-pair { display: grid; margin-top: 1.2rem; gap: .75rem; }
.symbol-pair div { padding: 1rem; border: 1px solid var(--help-line); border-radius: .9rem; background: #fffdf8; }
.symbol-pair b, .symbol-pair span { display: block; }
.symbol-pair b { color: var(--help-purple); font-family: Georgia, serif; font-size: 1.35rem; }
.media-placeholder { display: grid; min-height: 12rem; margin-top: 1.4rem; padding: 1rem; border: 2px dashed #bba96e; border-radius: 1rem; color: var(--help-muted); background: #f5efdd; text-align: center; place-content: center; }
.media-placeholder span { color: var(--help-gold); font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.media-placeholder p { margin-top: .45rem; }
.activity-list { display: grid; margin-top: 1rem; gap: .75rem; }
.activity-list div { padding: 1rem; border: 1px solid var(--help-line); border-radius: .85rem; background: #fffdf8; }
.activity-list h3, .activity-list p { margin: 0; }
.activity-list p { margin-top: .4rem; }
.learning-path { display: flex; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; gap: .55rem; }
.learning-path span { padding: .65rem .8rem; border-radius: .7rem; background: #ece8f2; font-weight: 720; }
.learning-path b { color: var(--help-gold); }
.article-aside { align-self: start; padding: 1.2rem; border-radius: 1rem; color: #fff; background: #2a514f; }
.article-aside p { margin-bottom: .5rem; font-family: Georgia, serif; font-size: 1.2rem; }
.article-aside a { color: #ffe499; font-weight: 750; }

@media (min-width: 42rem) {
  .help-shell, .article-shell { width: min(68rem, calc(100% - 3rem)); }
  .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-links a:last-child { grid-column: 1 / -1; }
  .stream-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .symbol-pair, .activity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 58rem) {
  .quick-links { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .quick-links a { grid-column: span 2; }
  .quick-links a:nth-child(n + 4) { grid-column: span 3; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 15rem; gap: 4rem; }
  .article-aside { position: sticky; top: 1rem; margin-top: 2rem; }
}

@media (max-width: 46rem) {
  .help-site .nav-shell { display: block; width: calc(100% - 2rem); padding-block: .75rem; }
  .help-site .site-nav { margin-top: .55rem; gap: .45rem 1rem; }
  .help-site .site-nav a { min-height: 2rem; }
  .help-search__row { grid-template-columns: 1fr; }
  .help-search button { width: 100%; }
  .topic-jumps { width: 100%; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .quick-links a, .stream-card { transition: none; }
}

.help-gameplay{margin:24px 0}.help-gameplay img{display:block;width:100%;height:auto;border-radius:14px}.help-gameplay figcaption{font-size:15px;line-height:1.6;margin-top:10px}