
.site-header .brand-gm{background:#4e9a70}.kind-hero{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:24px;margin:40px 0 26px}.kind-hero h1{font-size:clamp(42px,7vw,80px);line-height:.96;margin:.15em 0}.ripple-art{position:relative;display:grid;place-items:center;min-height:250px}.ripple-art span{font-size:72px;color:var(--orange);z-index:2}.ripple-art i{position:absolute;width:90px;aspect-ratio:1;border:4px solid var(--orange);border-radius:50%;opacity:.6}.ripple-art i:nth-of-type(2){width:160px;opacity:.35}.ripple-art i:nth-of-type(3){width:230px;opacity:.18}.mission{padding:24px;border-left:7px solid var(--gold);margin-bottom:44px}.mission h2{font-size:clamp(25px,4vw,42px);margin:.2em 0}.mission-meta,.status{color:var(--muted)}.maker-top{display:flex;align-items:end;justify-content:space-between;gap:20px}.filters{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.filter{border:1px solid var(--line);background:var(--panel);color:var(--cream);font:inherit;font-weight:700;padding:8px 11px;border-radius:99px;cursor:pointer}.filter.active{background:var(--orange);color:var(--accent-ink);border-color:var(--orange)}.act-card{margin:16px 0 26px;padding:clamp(22px,5vw,44px);text-align:center;overflow:hidden}.act-category{display:inline-block;text-transform:capitalize;color:var(--muted);font-weight:800;letter-spacing:.08em}.act-card>p:first-of-type{font-weight:850;font-size:clamp(28px,5vw,52px);line-height:1.1;max-width:900px;margin:24px auto}.act-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.community-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}.community-grid .card{padding:22px}.community-grid strong{display:block;font-size:48px;line-height:1;color:var(--orange)}.community-grid h2{font-size:20px;margin:5px 0}.reward-seal{float:right;display:grid;place-items:center;width:72px;aspect-ratio:1;border:3px solid var(--gold);border-radius:16px;color:var(--gold);font-weight:900;text-align:center;transform:rotate(3deg)}.classroom-callout{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:34px 0;padding:26px}.classroom{min-height:68vh;display:flex;flex-direction:column;justify-content:center;text-align:center;max-width:1100px;margin:auto}.classroom h1{font-size:clamp(44px,8vw,104px);line-height:1.05;margin:.25em 0}.classroom-category{font-size:24px;text-transform:capitalize;color:var(--muted)}.classroom-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.privacy-note{color:var(--muted);margin-top:32px}@media(max-width:760px){.kind-hero{grid-template-columns:1fr;margin-top:24px}.ripple-art{min-height:150px}.ripple-art i:nth-of-type(3){width:150px}.ripple-art i:nth-of-type(2){width:110px}.maker-top{display:block}.filters{justify-content:flex-start}.community-grid{grid-template-columns:1fr}.classroom-callout{display:block}.classroom-callout .btn{margin-top:10px}}

/* ---------- Day / night (theme.py) ---------- */
html[data-site="kind"][data-theme="dark"] { color-scheme: dark;
  --bg: #17131d; --panel: #221c2b; --panel2: #2a2235; --line: #372e44; --cream: #efeaf6; --muted: #aaa0bb; --soft: #8b819c;
  --orange: #f2a582; --accent-ink: #2a1626; --gold: #b8bff0; --shadow: #6f78bf;
  --ok: #72d49a; --warn: #f5c967; --info: #8fb6ef; --purple: #9d6bcc; --green: #72d49a; --pink: #ef8faa; --sky: #8fb6ef;
  --glow1: color-mix(in srgb, var(--shadow) 18%, var(--bg)); --glow2: color-mix(in srgb, var(--orange) 8%, var(--bg));
  --spot1: color-mix(in srgb, var(--shadow) 40%, var(--panel)); --spot2: color-mix(in srgb, var(--shadow) 14%, var(--panel2));
  --footer: color-mix(in srgb, black 30%, var(--bg));
  --orange:#ef8c66; --shadow:#679d7b; --gold:#efc95d; }
html.theme-anim body, html.theme-anim .card, html.theme-anim .faq, html.theme-anim .chip-btn, html.theme-anim .site-footer, html.theme-anim .policy,
html.theme-anim .btn, html.theme-anim .spot, html.theme-anim .tile, html.theme-anim .mood, html.theme-anim input, html.theme-anim select,
html.theme-anim .step, html.theme-anim .ill { transition: background-color .7s ease, color .7s ease, border-color .7s ease, background .7s ease; }

.site-header .theme-toggle { order: 3; }
.theme-toggle { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cream); background: var(--panel); border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 14px 5px 5px; cursor: pointer; box-shadow: 2px 2px 0 var(--shadow); }
.theme-toggle:hover { border-color: var(--orange); }
.theme-toggle:focus-visible, .sky-stage:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.tt-track { position: relative; width: 52px; height: 28px; border-radius: 99px; background: linear-gradient(180deg, #9fd6ff, #ffe7b0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 15%, transparent); transition: background .6s ease; }
html[data-theme="dark"] .tt-track { background: linear-gradient(180deg, #1b2350, #3b2a5c); }
.tt-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fffaf0;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .55s cubic-bezier(.6,-0.4,.35,1.4), background .5s ease; overflow: hidden; }
html[data-theme="dark"] .tt-knob { transform: translateX(24px) rotate(360deg); background: #2b2440; }
.tt-knob svg { position: absolute; inset: 3px; width: 16px; height: 16px; transition: opacity .35s ease, transform .5s ease; }
.tt-knob .mini-moon { opacity: 0; transform: scale(.4) rotate(-90deg); }
html[data-theme="dark"] .tt-knob .mini-sun { opacity: 0; transform: scale(.4) rotate(90deg); }
html[data-theme="dark"] .tt-knob .mini-moon { opacity: 1; transform: none; }

.sky-stage { position: relative; display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; border-radius: 24px;
  -webkit-tap-highlight-color: transparent; }
.sky-stage .cat { position: relative; z-index: 1; display: block; }
.sky { position: absolute; z-index: 0; left: 52%; top: 17%; width: 66%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.sky .sun, .sky .moon { position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform .9s cubic-bezier(.55,-0.25,.35,1.25), opacity .7s ease, filter .9s ease; }
.sky .sun { filter: drop-shadow(0 0 18px rgba(255, 196, 64, .65)); animation: sun-spin 40s linear infinite; }
.sky .moon { opacity: 0; transform: translateY(55%) rotate(-50deg) scale(.6); filter: drop-shadow(0 0 16px rgba(240, 232, 200, .45)); }
html[data-theme="dark"] .sky .sun { opacity: 0; transform: translateY(60%) rotate(140deg) scale(.5); animation: none; }
html[data-theme="dark"] .sky .moon { opacity: 1; transform: translate(9%, -4%); }
.stars i { position: absolute; width: 5%; aspect-ratio: 1; background: #fff7d6; opacity: 0; transform: scale(.2);
  transition: opacity .5s ease calc(.45s + var(--d)), transform .5s ease calc(.45s + var(--d)); box-shadow: 0 0 6px #fff1b8; }
html[data-theme="dark"] .stars i { opacity: 1; transform: scale(1); animation: twinkle 2.6s ease-in-out infinite var(--d); }
.cat.boop { animation: boop .6s ease; }
@keyframes boop { 0% { transform: translateY(0); } 30% { transform: translateY(-9px) rotate(-2deg); } 60% { transform: translateY(2px); } 100% { transform: none; } }
@keyframes sun-spin { to { rotate: 360deg; } }
@keyframes twinkle { 50% { opacity: .35; } }
@media (max-width: 760px) {
  .site-header .theme-toggle { order: 2; margin-left: auto; }
  .site-header .site-nav { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sky .sun, .sky .moon, .stars i, .tt-knob, .tt-knob svg, .tt-track { transition: none !important; animation: none !important; }
  .cat.boop { animation: none; }
}
