/* The existing illustration becomes a living scene, with independently moving parts. */
.motion-control { position: relative; flex-shrink: 0; }
html:not([data-motion]) .motion-control { display: none; }
.motion-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 44px; padding: 7px 13px; border: 1px solid var(--line);
    border-radius: 13px; background: var(--surface); color: var(--ink); text-align: left;
}
.motion-button strong, .motion-button small { display: block; line-height: 1.3; }
.motion-button strong { font-size: .76rem; font-weight: 750; }
.motion-button small { color: var(--muted); font-size: .65rem; }
.motion-button .icon { width: 18px; height: 18px; }
.motion-button:hover, .motion-button:focus-visible { background: var(--red-soft); border-color: var(--red); }
.motion-play { display: none; }
[data-motion="off"] .motion-play { display: inline-flex; }
[data-motion="off"] .motion-pause { display: none; }
[data-motion="off"] .motion-button { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.motion-help {
    position: absolute; z-index: 50; top: calc(100% + 12px); right: 0;
    width: 250px; padding: 15px 17px; border: 1px solid var(--line);
    border-radius: 14px; background: var(--ink); color: var(--surface);
    box-shadow: 0 12px 32px #17203925; font-size: .8rem; line-height: 1.5;
    visibility: hidden; opacity: 0; pointer-events: none;
}
.motion-control:hover .motion-help, .motion-control:focus-within .motion-help { visibility: visible; opacity: 1; }
.motion-feedback {
    position: fixed; z-index: 90; bottom: 24px; right: 24px;
    max-width: min(380px, calc(100vw - 32px)); padding: 17px 21px;
    border: 1px solid #ffffff30; border-radius: 17px; background: #20283d; color: #fff;
    box-shadow: 0 10px 45px #11182730; font-size: .86rem;
}
.discovery-home .welcome-row { margin-bottom: 24px; }
.discovery-home .welcome-row h1 { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.discovery-home .welcome-row .eyebrow { font-size: .59rem; letter-spacing: .15em; }
.discovery-home .discovery-hero {
    grid-template-columns: 1.08fr 1fr; gap: 12px; min-height: 460px; padding: 44px 44px 35px;
    border-radius: 30px; background: radial-gradient(ellipse at 86% 45%, #ed626360, transparent 57%), linear-gradient(120deg, #9d1838, #cb3044 62%, #b72e4b);
    box-shadow: 0 18px 40px #a9273824;
}
.discovery-home .discovery-hero::after { width: 700px; height: 700px; border: 1px solid #fff; opacity: .12; top: -330px; right: -275px; }
.discovery-home .discovery-hero::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: 3%; top: 6%; border-radius: 50%; background: #ffd38609; border: 1px solid #ffffff0d; }
.discovery-home .hero-tag { font-size: .58rem; letter-spacing: .12em; gap: 9px; margin-bottom: 22px; }
.hero-tag-dot { display: inline-block; width: 7px; height: 7px; background: #ffda86; box-shadow: 0 0 0 5px #ffda861b; border-radius: 50%; }
.discovery-home .hero-copy h2 { font-size: clamp(2rem, 3.35vw, 3.35rem); line-height: 1.08; max-width: 620px; letter-spacing: -.05em; }
.discovery-home .hero-copy em { color: #ffe29c; }
.discovery-home .hero-copy p { max-width: 420px; font-size: .98rem; line-height: 1.8; margin: 23px 0 27px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 21px; }
.hero-actions .button { min-height: 52px; padding-inline: 21px; border-radius: 15px; box-shadow: 0 6px 0 #750c283d, 0 10px 25px #64072620; }
.hero-family-link { display: inline-flex; align-items: center; min-height: 44px; gap: 7px; font-size: .78rem; font-weight: 600; color: #fff1eb; }
.hero-family-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-family-link .icon { width: 15px; height: 15px; }
.hero-promise { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 27px; color: #ffdfd8; font-size: .65rem; }
.hero-promise > span { display: inline-flex; align-items: center; gap: 6px; }
.hero-promise .icon { width: 14px; height: 14px; color: #ffdc8d; }
.hero-scene { position: relative; min-width: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.discovery-home .hero-art { width: 100%; flex: 1; min-height: 320px; }
.learning-world { width: 120%; max-width: 610px; height: auto; overflow: visible; flex-shrink: 0; }
.discovery-home .hero-art .learning-world { position: absolute; left: -10%; }
.discovery-home .label-top { right: -8px; top: 15px; font-size: .62rem; transform: rotate(6deg); animation: world-label 6s ease-in-out infinite; }
.math-float { position: absolute; display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid #ffffff60; border-radius: 15px; box-shadow: 0 12px 23px #62152b20; font: 700 31px/1 "Trebuchet MS", sans-serif; }
.math-infinity { right: -2%; bottom: 22%; background: #e7dbff; color: #7552a3; animation: world-infinity 7s ease-in-out infinite; }
.math-fraction { left: 1%; top: 11%; width: 43px; height: 43px; background: #fff1c8; color: #a4682e; font-size: 25px; animation: world-fraction 6s ease-in-out infinite; }
.hello-robot { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; margin-top: 7px; border: 1px solid #ffffff65; border-radius: 999px; color: #fff7eb; background: #6c15334d; font-size: .71rem; font-weight: 650; }
.hello-robot .icon { width: 16px; height: 16px; color: #ffe199; }
.hello-robot:hover { background: #5f163878; border-color: #ffe199; }
html:not([data-motion]) .hello-robot { display: none; }
.robot-greeting { position: absolute; bottom: 56px; left: 50%; z-index: 3; width: max-content; max-width: 100%; padding: 10px 16px; border-radius: 14px 14px 3px 14px; background: #fff8e9; color: #743149; font-size: .78rem; font-weight: 650; text-align: center; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.robot-greeting.is-visible { opacity: 1; transform: translate(-50%, 0); }
.hero-constellation { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.hero-constellation span { position: absolute; color: #ffd997; opacity: .28; animation: world-twinkle 6s ease-in-out infinite; }
.hero-constellation span:nth-child(1) { left: 43%; top: 8%; font-size: 29px; }
.hero-constellation span:nth-child(2) { left: 49%; bottom: 9%; font-size: 19px; animation-delay: -2s; }
.hero-constellation span:nth-child(3) { right: 5%; top: 7%; font-size: 32px; animation-delay: -4s; }
.hero-constellation span:nth-child(4) { left: 3%; bottom: 8%; font-size: 14px; animation-delay: -1s; }
.club-profile { display: flex; gap: 17px; align-items: center; padding: 21px 24px; margin-bottom: 25px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); scroll-margin-top: 100px; }
.club-profile-avatar { display: grid; place-items: center; flex: 0 0 50px; height: 54px; border-radius: 18px; background: #f7e4e9; color: #92304c; font-size: 1.45rem; font-weight: 750; transform: rotate(-5deg); }
.club-profile-copy { flex: 1; min-width: 0; }
.club-profile-copy .eyebrow { font-size: .58rem; margin-bottom: 4px; }
.club-profile-copy h2 { font-size: 1rem; overflow-wrap: anywhere; }
.club-profile-copy p { color: var(--muted); font-size: .77rem; margin-top: 5px; }
.club-profile .button { font-size: .8rem; }
.club-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1100px) { .club-profile { flex-wrap: wrap; } .club-profile-actions { flex-basis: 100%; } }
@media (max-width: 640px) { .club-profile { flex-wrap: wrap; padding: 18px; gap: 12px; } .club-profile-copy { flex-basis: calc(100% - 70px); } .club-profile .button { width: 100%; } }
.world-robot { animation: world-hover 5s ease-in-out infinite; }
.world-wave { transform-origin: 310px 206px; animation: world-wave 5.4s ease-in-out infinite; }
.world-head { transform-origin: 246px 203px; animation: world-nod 6s ease-in-out infinite; }
.world-eyes { transform-box: fill-box; transform-origin: center; animation: world-blink 5.7s linear infinite; }
.world-antenna { transform-box: fill-box; transform-origin: center; animation: world-antenna 3s ease-in-out infinite; }
.world-planet { transform-origin: 379px 251px; animation: world-planet 8s ease-in-out infinite; }
.world-book { transform-origin: 149px 300px; animation: world-book 6.3s ease-in-out infinite; }
.world-pages { transform-origin: 149px 300px; animation: world-pages 6.3s ease-in-out infinite; }
.world-letter { transform-origin: 382px 92px; animation: world-letter 7s ease-in-out infinite; }
.world-plus { transform-origin: 104px 152px; animation: world-plus 9s ease-in-out infinite; }
.world-orbit { transform-origin: 273px 183px; animation: world-orbit 60s linear infinite; }
.world-star { transform-box: fill-box; transform-origin: center; animation: world-twinkle 4s ease-in-out infinite; }
.world-star-two { animation-delay: -2s; }
.world-shadow { transform-origin: 270px 339px; animation: world-shadow 5s ease-in-out infinite; }
.is-waving .world-wave { animation: world-hello .8s ease-in-out 3; }
[data-scene-paused="true"] *, [data-scene-paused="true"] *::before { animation-play-state: paused !important; }
@keyframes world-hover { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-10px); } }
@keyframes world-wave { 0%, 12%, 40%, 100% { transform: rotate(0); } 18%, 30% { transform: rotate(19deg); } 24%, 36% { transform: rotate(-13deg); } }
@keyframes world-hello { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(24deg); } }
@keyframes world-nod { 0%, 70%, 100% { transform: rotate(0); } 35% { transform: rotate(4deg); } }
@keyframes world-blink { 0%, 44%, 48%, 82%, 86%, 100% { transform: scaleY(1); } 46%, 84% { transform: scaleY(.12); } }
@keyframes world-antenna { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes world-planet { 0%, 100% { transform: translateY(7px) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(7deg); } }
@keyframes world-book { 0%, 100% { transform: translateY(4px) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(4deg); } }
@keyframes world-pages { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(-4deg); } }
@keyframes world-letter { 0%, 100% { transform: translateY(-5px) rotate(-4deg); } 50% { transform: translateY(9px) rotate(7deg); } }
@keyframes world-plus { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-11px) rotate(24deg); } 65% { transform: translateY(-6px) rotate(12deg); } }
@keyframes world-orbit { to { transform: rotate(360deg); } }
@keyframes world-twinkle { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.13); } }
@keyframes world-shadow { 0%, 100% { transform: scaleX(1); opacity: .17; } 50% { transform: scaleX(.86); opacity: .1; } }
@keyframes world-infinity { 0%, 100% { transform: translateY(0) rotate(10deg); } 50% { transform: translateY(-12px) rotate(-8deg); } }
@keyframes world-fraction { 0%, 100% { transform: translateY(4px) rotate(-12deg); } 50% { transform: translateY(-8px) rotate(8deg); } }
@keyframes world-label { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.discovery-welcome-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 22px; padding: 19px 3px 0; color: var(--muted); font-size: .69rem; }
.discovery-welcome-note > span:first-child { display: inline-flex; gap: 7px; align-items: center; }
.discovery-welcome-note .icon { width: 15px; height: 15px; color: #418773; }
.family-section { display: grid; grid-template-columns: 1.1fr 1fr; gap: 45px; padding: 40px; margin-top: 42px; border: 1px solid var(--line); border-radius: 27px; background: linear-gradient(120deg, var(--surface), var(--soft)); }
.family-copy .eyebrow { font-size: .57rem; color: var(--red); }
.family-copy h2 { font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.22; }
.family-copy h2 em { color: var(--red); font-style: normal; }
.family-copy > p { color: var(--muted); font-size: .86rem; line-height: 1.85; margin: 18px 0 12px; }
.family-copy > small { display: block; color: var(--muted); font-size: .67rem; margin-top: 9px; }
.family-copy .text-link { font-size: .82rem; }
.family-benefits { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.family-benefits article { display: flex; gap: 15px; align-items: flex-start; }
.family-benefits .tip-icon { width: 43px; height: 43px; }
.family-benefits .icon { width: 21px; height: 21px; }
.family-benefits h3 { font-size: .97rem; line-height: 1.4; letter-spacing: -.02em; }
.family-benefits p { margin-top: 5px; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.study-help h2 { font-size: 1.3rem; }
.study-help p { color: var(--muted); font-size: .86rem; margin-top: 12px; }
@media (max-width: 1190px) {
    .discovery-home .discovery-hero { padding: 33px 29px 28px; min-height: 440px; }
    .discovery-home .hero-copy h2 { font-size: 2.7rem; }
    .discovery-home .hero-copy p { font-size: .88rem; }
    .discovery-home .hero-tag { font-size: .5rem; }
    .hero-actions { gap: 8px 15px; }
    .hero-actions .button { font-size: .82rem; padding-inline: 16px; }
    .discovery-home .label-top { font-size: .52rem; right: -5px; top: 30px; }
    .family-section { padding: 30px; gap: 28px; }
}
@media (max-width: 760px) {
    .discovery-home .discovery-hero { grid-template-columns: 1fr; padding: 30px 29px 25px; gap: 12px; }
    .discovery-home .hero-copy { max-width: 560px; }
    .discovery-home .hero-copy h2 { font-size: clamp(2.15rem, 6.2vw, 3.15rem); }
    .discovery-home .hero-copy p { max-width: 480px; margin: 18px 0 19px; }
    .discovery-home .hero-art { min-height: 0; width: min(100%, 410px); height: 295px; margin: 0 auto; flex: none; }
    .discovery-home .hero-art .learning-world { width: 112%; max-width: 475px; left: -6%; }
    .discovery-home .label-top { top: 24px; right: 0; }
    .hero-promise { margin-top: 18px; }
    .hello-robot { margin-top: 0; }
    .math-infinity { right: 0; }
    .family-section { grid-template-columns: 1fr; gap: 26px; }
    .family-copy h2 { font-size: 1.85rem; }
}
@media (max-width: 640px) {
    .topbar { flex-wrap: wrap; }
    .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
    .motion-button { gap: 6px; border-radius: 11px; padding: 6px 10px; }
    .motion-button strong { font-size: .69rem; }
    .motion-button small { font-size: .6rem; }
    .motion-help { right: auto; left: -50px; width: 230px; }
    .motion-feedback { bottom: 16px; right: 16px; }
    .discovery-home .welcome-row h1 { font-size: 1.43rem; }
    .discovery-home .welcome-row .eyebrow { font-size: .53rem; }
    .discovery-home .discovery-hero { border-radius: 25px; padding-inline: 25px; }
    .discovery-home .hero-tag { font-size: .49rem; letter-spacing: .08em; margin-bottom: 19px; }
    .discovery-home .hero-copy h2 { font-size: clamp(2.05rem, 7.8vw, 2.8rem); }
    .hero-actions { gap: 6px 16px; }
    .hero-actions .button { font-size: .85rem; }
    .hero-family-link { font-size: .74rem; }
    .hero-promise { font-size: .61rem; gap: 14px; }
    .discovery-home .hero-art { height: 260px; }
    .math-float { width: 39px; height: 39px; border-radius: 12px; font-size: 27px; }
    .math-fraction { width: 34px; height: 34px; font-size: 22px; }
    .discovery-welcome-note { font-size: .67rem; gap: 8px; padding-inline: 2px; }
    .family-section { padding: 28px 23px; margin-top: 30px; }
    .family-copy h2 { font-size: 1.68rem; }
    .family-benefits { gap: 20px; }
}
@media (max-width: 420px) {
    .topbar-title { display: none; }
    .topbar-left { flex: 0 0 auto; }
    .topbar-actions { gap: 6px; }
    .discovery-home .hero-art { height: 235px; }
    .discovery-home .hero-copy h2 { font-size: 2.08rem; }
}
@media (max-width: 360px) {
    .discovery-home .discovery-hero { padding-inline: 22px; }
    .discovery-home .hero-copy h2 { font-size: 1.88rem; }
    .discovery-home .hero-tag { font-size: .43rem; }
    .discovery-home .hero-art { height: 215px; }
    .hero-promise { gap: 10px; font-size: .55rem; }
    .hero-promise .icon { width: 12px; }
    .hello-robot { padding-inline: 12px; font-size: .65rem; }
    .motion-button { padding-inline: 8px; }
}
html:not([data-motion]) .discovery-home * { animation: none !important; }
@media (forced-colors: active) {
    .discovery-home .discovery-hero, .family-section { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .hero-copy p, .hero-tag, .hero-family-link, .hero-promise, .discovery-home .hero-copy em { color: CanvasText; }
    .hero-art { forced-color-adjust: none; }
}