:root{color-scheme:dark;--bg:#07131c;--gold:#f1ca79;--muted:#a9b7bf;--line:rgba(211,230,241,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:#f4f5f1;font-family:Arial,"Helvetica Neue",sans-serif;font-size:16px;line-height:1.65}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:5px}header{height:96px;position:absolute;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:0 5%;width:100%;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-weight:800;font-size:23px;letter-spacing:1px;line-height:1.2}.brand small{display:block;font-size:9px;letter-spacing:1.5px;color:#a6b9c4;margin-top:8px}.brandmark{display:flex;align-items:center;justify-content:center;border:1px solid #cda961;width:44px;height:49px;color:var(--gold);font-size:33px;font-family:Georgia,serif;transform:skewY(-5deg)}.brandmark span{font-size:22px;margin-left:-7px}.gold{color:var(--gold)}nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}nav a,nav button{transition:color .2s}nav a:hover,nav button:hover{color:var(--gold)}.donate-nav{border:1px solid #9b875f;border-radius:6px;padding:8px 20px;color:var(--gold)}.hero{position:relative;min-height:790px;overflow:hidden;display:flex;align-items:center;padding:150px 7% 85px}.hero-art{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 45%,#254552,#0b1829 65%);background-size:cover;background-position:center;animation:breathe 26s ease-in-out infinite alternate;transform:scale(1.02)}.hero-art.ready{background-image:none}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,15,25,.92),rgba(4,15,25,.65) 35%,rgba(4,15,25,.02) 75%),linear-gradient(0deg,var(--bg),transparent 25%)}.hero-content{position:relative;z-index:1;max-width:680px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--gold);margin:0 0 21px;display:flex;align-items:center;gap:12px}.eyebrow>span{height:1px;width:32px;background:var(--gold)}h1{font-size:clamp(42px,4.6vw,70px);line-height:1.16;letter-spacing:-1.7px;margin:0 0 25px;font-weight:800}em{font-style:normal;color:var(--gold)}.lead{font-size:18px;color:#c1cbd1;line-height:1.85;margin:0 0 28px}.primary{display:inline-flex;align-items:center;min-height:54px;padding:13px 26px;border:1px solid #ffe2a3;border-radius:5px;background:linear-gradient(120deg,#fae0a6,#cda654);color:#192024;font-size:15px;font-weight:700;box-shadow:0 5px 30px #d9ad4220;transition:box-shadow .2s,transform .2s}.primary:hover{transform:translateY(-3px);box-shadow:0 5px 38px #d9ad4250}.hero-note{display:flex;gap:18px;align-items:center;margin-top:40px;font-size:12px;color:#92a5b2}.hero-note span:first-child{color:var(--gold);letter-spacing:3px}.hero-caption{position:absolute;right:5%;bottom:80px;letter-spacing:3px;font-size:10px;color:#b8c4c7}.hero-caption span{color:var(--gold);padding:0 12px}.explore{position:relative;z-index:1;margin-top:-10px;padding:0 7% 70px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:30px}.section-head .eyebrow{margin-bottom:10px}h2{font-size:clamp(26px,2.7vw,38px);line-height:1.3;letter-spacing:-.6px;margin:0}.section-head>p{font-size:14px;color:var(--muted);margin-bottom:4px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.card{border:1px solid var(--line);border-radius:10px;background:linear-gradient(150deg,#142630,#0b1922);overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .35s}.card:hover{transform:translateY(-8px);border-color:#dcb86980;box-shadow:0 20px 45px #0005}.card-image{height:205px;position:relative;overflow:hidden;background:#172936}.card-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#10232c44,transparent 50%)}.card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s}.card:hover img{transform:scale(1.035)}.schedule img{object-position:center 40%}.race img{width:165%;max-width:none;object-position:right;transform:translateX(-38%)}.race:hover img{transform:translateX(-38%) scale(1.035)}.youtube img{object-position:center 0}.tag{position:absolute;z-index:1;bottom:14px;left:17px;background:#071a24e8;border:1px solid #ffffff30;color:#e9f1f3;font-size:10px;font-weight:700;letter-spacing:1px;padding:5px 10px;border-radius:4px}.card-body{padding:24px}.number{float:right;color:#536773;font-family:Georgia,serif;font-size:23px}h3{font-size:23px;line-height:1.35;margin:0 0 13px}.card-body>p{font-size:15px;color:#aabdc7;line-height:1.8;margin:0 0 24px;min-height:81px}.card-bottom{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:8px}.card-bottom>span{font-size:14px;font-weight:700;color:var(--gold)}.card-bottom small{font-size:11px;color:#8196a4}.about{margin:0 7%;padding:65px 0;display:grid;grid-template-columns:1fr 1fr;gap:90px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.about-heading h2{line-height:1.5}.about-copy p{margin-top:0;color:#a9bdc8;font-size:16px}.text-button{color:var(--gold);padding:0;font-size:15px;font-weight:600}footer{padding:32px 7% 110px;display:flex;gap:25px;align-items:center;justify-content:space-between;font-size:12px;color:#879ca8}.footer-brand{font-weight:800;font-size:18px;color:#fff}footer button{font-size:12px}.sound-bar{position:fixed;z-index:5;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:10px 18px;border-radius:9px;background:#091b25ed;border:1px solid #8c7e5866;box-shadow:0 7px 30px #0006;backdrop-filter:blur(16px);white-space:nowrap}.sound-bar button{display:flex;gap:8px;align-items:center;font-size:12px;padding:3px;color:var(--gold)}#sound-icon{font-size:22px;line-height:1}.sound-bar label{font-size:11px;color:#aec0c9}.sound-bar output{color:white;margin-left:3px}.sound-divider{width:1px;height:22px;background:var(--line)}input[type=range]{width:85px;accent-color:var(--gold);cursor:pointer}#motion{border-left:1px solid var(--line);padding-left:14px;color:#c2d5df}#dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}dialog{width:min(650px,calc(100% - 32px));max-height:90dvh;border:1px solid #b89a5a66;border-radius:14px;background:#0c1b27;color:#f1f3f5;padding:32px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#020810d9;backdrop-filter:blur(8px)}dialog h2{font-size:30px;margin-bottom:16px}dialog p,dialog li{color:#b7c5cc;font-size:16px}dialog li{margin-bottom:16px}dialog small{color:#9bb2be;font-size:12px}.close{position:absolute;top:8px;right:14px;font-size:30px;line-height:1.3}.donate-image{display:block;width:100%;height:auto;margin:24px 0 18px;border-radius:8px}.bank-details{text-align:center;padding:8px}.bank-details span{display:block;font-size:12px;color:#b5c6d0}.bank-details strong{font-size:26px;display:block;letter-spacing:2px;color:var(--gold)}.bank-details button{border:1px solid #bfa366;border-radius:5px;padding:8px 16px;margin-top:12px}.bank-details p{font-size:13px}.no-motion *{animation:none!important;scroll-behavior:auto!important;transition:none!important}@keyframes breathe{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.07) translateX(-.6%)}}@media(min-width:1600px){header{padding:0 max(5%,calc((100vw - 1450px)/2))}.hero{padding-left:max(7%,calc((100vw - 1400px)/2));min-height:850px}.explore{max-width:1640px;margin-left:auto;margin-right:auto}}@media(max-width:1000px){header{padding:0 4%;height:85px}nav{gap:18px}.hero{min-height:750px;padding-left:5%}.hero-caption{display:none}.explore{padding-left:5%;padding-right:5%}.cards{gap:15px}.card-body{padding:18px}h3{font-size:20px}.card-bottom{align-items:flex-start;flex-direction:column}.section-head>p{display:none}.about{gap:40px;margin:0 5%}.card-image{height:180px}}@media(max-width:650px){header{height:85px}.brand{font-size:18px;gap:8px}.brandmark{width:34px;height:40px;font-size:28px}.brand small{font-size:7px;letter-spacing:.6px}nav{gap:10px}nav>a,nav>button:not(.donate-nav){display:none}.donate-nav{padding:6px 12px;font-size:12px}.hero{min-height:710px;padding:145px 6% 65px;align-items:flex-start}.hero-art{background-position:65% center;opacity:.7}.hero-shade{background:linear-gradient(90deg,#07131ce8,#07131c66),linear-gradient(0deg,#07131c,transparent 45%)}h1{font-size:43px;line-height:1.2;letter-spacing:-1px}.eyebrow{font-size:10px;letter-spacing:1.3px}.lead{font-size:16px}.hero-note{font-size:10px;gap:12px}.primary{font-size:14px;padding:13px 18px}.explore{padding:0 6% 40px}.cards{grid-template-columns:1fr;gap:24px}.card-image{height:220px}.card-body{padding:23px}.card-body>p{min-height:0}.card-bottom{flex-direction:row;align-items:center}h3{font-size:24px}.about{grid-template-columns:1fr;gap:20px;margin:0 6%;padding:40px 0}.about-copy p{font-size:15px}footer{flex-wrap:wrap;padding:25px 6% 140px;gap:8px}footer p{width:100%;margin:5px 0}.sound-bar{bottom:12px;gap:9px;padding:10px 12px;max-width:calc(100% - 20px)}.sound-bar label{display:none}.sound-bar input{width:70px}.sound-bar button{font-size:11px}.sound-divider{display:none}#motion{padding-left:9px}dialog{padding:30px 20px}dialog .eyebrow{padding-right:10px}dialog h2{font-size:25px}.bank-details strong{font-size:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Bright school identity */
:root{color-scheme:light;--bg:#f4faff;--gold:#087ab9;--muted:#4e6879;--line:rgba(27,97,136,.16)}body{color:#163a51;background:var(--bg)}header{background:rgba(249,253,255,.86);border-color:#c5e3ef;backdrop-filter:blur(15px)}.brand small{color:#517486}.brandmark{border-color:#1892bb;color:#087ab9;background:#fff9}.donate-nav{background:white;border-color:#9fcddf;color:#087ab9}nav a:hover,nav button:hover{color:#0087c0}.hero{min-height:780px}.hero-art{background:linear-gradient(110deg,#effaff,#daf3fd);opacity:1;background-position:center center}.hero-art.ready{background-image:none}.hero-shade{background:linear-gradient(90deg,#f2fbfff7 0%,#f2fbfff0 25%,#f2fbffad 40%,#f2fbff00 59%),linear-gradient(0deg,#f4faff,transparent 23%)}.hero-content{max-width:650px}h1{color:#123e58;font-size:clamp(42px,4.3vw,66px);text-shadow:0 2px 20px #ffffff90}h1 em{color:#078ab5}.lead{color:#365d73}.hero .eyebrow{color:#126b98}.primary{color:white;background:linear-gradient(120deg,#0695c6,#076fae);border-color:#139fcd;box-shadow:0 9px 25px #007eac26}.primary:hover{box-shadow:0 9px 30px #007eac45}.hero-note{color:#426a81}.hero-note span:first-child{color:#097daa}.hero-caption{color:#1d607a;background:#faffffc9;padding:8px 14px;border-radius:5px;bottom:75px;font-weight:700;letter-spacing:1.4px}.section-head .eyebrow{color:#1487a4}.card{background:white;border-color:#cfe4ee;box-shadow:0 6px 22px #1c698b09}.card:hover{border-color:#63b2d2;box-shadow:0 18px 38px #2b789b20}.card-body>p{color:#536d7c}.card h3{color:#153e55}.number{color:#99bccb}.card-bottom small{color:#668394}.card-bottom>span{color:#087caf}.race .card-bottom>span{color:#188460}.youtube .card-bottom>span{color:#c44646}.tag{background:#ffffffed;color:#18526d;border-color:#ffffffa0;box-shadow:0 2px 12px #092a4222}.about-copy p{color:#4e6d80}.about-heading em{color:#088dac}.text-button{color:#097dac}footer{color:#56788c}.footer-brand{color:#163f59}.sound-bar{background:#fffffff2;border-color:#a2cbdc;box-shadow:0 7px 30px #174e6c25}.sound-bar button{color:#087dac}.sound-bar label{color:#476e82}.sound-bar output{color:#1b4057}#motion{color:#38758d}dialog{background:#f7fcff;color:#193f56;border-color:#a2d1e3;box-shadow:0 30px 100px #0b335155}dialog::backdrop{background:#09334d88}dialog p,dialog li{color:#4b6c7d}dialog small{color:#507286}.bank-details span{color:#4f7084}.bank-details button{border-color:#8ebed4;background:white}.close{color:#2b586d}.donate-image{border:1px solid #d3e3ec}@media(max-width:1000px){.hero{min-height:740px}.hero-shade{background:linear-gradient(90deg,#f2fbfff5,#f2fbffd9 35%,#f2fbff40 66%),linear-gradient(0deg,#f4faff,transparent 25%)}}@media(max-width:650px){.hero{min-height:940px;padding-top:125px;padding-bottom:410px}.hero-art{inset:auto 0 0;height:455px;background-position:68% center;background-size:auto 100%;animation:none;transform:none}.hero-shade{background:linear-gradient(180deg,#f4faff 0%,#f4faff 49%,#f4faff00 67%,#f4faff00 91%,#f4faff 100%)}.hero-content{width:100%}h1{font-size:42px;line-height:1.2}.hero-note{margin-top:23px}.hero .eyebrow{font-size:9px;letter-spacing:.9px}.hero .eyebrow>span{width:18px}.explore{margin-top:0}.hero-caption{display:none}}@media(min-width:1600px){.hero{min-height:850px}}
@media(min-width:651px){.hero-art{top:96px;background-position:center top}.hero-shade{pointer-events:none}}
/* Vietnamese typography and polished tactile controls */
body{font-family:'Be Vietnam Pro',Arial,sans-serif}h1,h2,h3{font-family:'Be Vietnam Pro',Arial,sans-serif}h1{font-weight:700;font-size:clamp(40px,4.05vw,62px);line-height:1.32;letter-spacing:-1.7px;text-shadow:0 2px 0 #fff,0 4px 0 #bfdce650,0 8px 18px #21769813}h1 em{display:inline-block;color:#098bb8;background:linear-gradient(180deg,#19add3 12%,#0688b8 58%,#036b9b 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #d2f2fa)}h2{font-weight:700;letter-spacing:-1px}h3{font-weight:700;letter-spacing:-.5px}.lead{font-size:17px;line-height:1.95}.hero-content{max-width:690px}.brand{font-size:22px;letter-spacing:.3px}.brand small{font-size:8px;letter-spacing:1px}.eyebrow{line-height:1.8}header{box-shadow:0 2px 0 #fff,0 9px 28px #38748c12}nav{gap:12px}nav>a,nav>button{position:relative;border:1px solid #bddded;border-radius:12px;padding:10px 17px;background:linear-gradient(180deg,#fff 0%,#f9fdff 45%,#e4f3fb 100%);color:#285971;box-shadow:inset 0 2px 0 #fff,inset 0 -1px 1px #ffffffb0,0 4px 0 #bbd7e4,0 7px 13px #236b8e17;font-weight:600;font-size:13px;transition:transform .18s,box-shadow .18s,filter .18s}nav .donate-nav{background:linear-gradient(180deg,#fff9d9,#ffe38d 52%,#f6cf63);color:#77520c;border-color:#e5c56a;box-shadow:inset 0 2px 0 #fffbea,0 4px 0 #c4a14b,0 8px 16px #bf963529}.primary{position:relative;overflow:hidden;border-radius:14px;border-color:#67d8f4;background:linear-gradient(180deg,#43c9eb 0%,#16a8d8 42%,#098bc2 46%,#087bb5 100%);box-shadow:inset 0 2px 0 #b6f1ff,inset 0 -2px 0 #0576a5,0 6px 0 #056491,0 13px 23px #007bad35;text-shadow:0 1px 1px #005b8c80;font-weight:600;letter-spacing:0;transition:transform .18s,box-shadow .18s}.primary:before{content:'';position:absolute;left:6px;right:6px;top:4px;height:43%;background:linear-gradient(#fff5,#fff0);border-radius:10px;pointer-events:none}.primary:hover{transform:translateY(-3px);box-shadow:inset 0 2px 0 #c9f8ff,0 8px 0 #056491,0 18px 28px #007bad40}.primary:active{transform:translateY(4px);box-shadow:inset 0 2px 0 #a7e9ff,0 2px 0 #056491,0 5px 10px #007bad25}nav>a:hover,nav>button:hover{transform:translateY(-2px);filter:brightness(1.025)}nav>a:active,nav>button:active{transform:translateY(3px);box-shadow:inset 0 1px 2px #bfd6df,0 1px 0 #bbd7e4}.cards{perspective:1400px}.card{border-radius:18px;background:linear-gradient(155deg,#fff 55%,#eaf7ff);border:1px solid #c4e2ef;box-shadow:inset 0 1px 0 white,0 5px 0 #c8e0eb,0 12px 25px #1a63851a;transform-origin:center;transition:transform .3s,box-shadow .3s,border-color .3s}.card:hover{transform:translateY(-8px) rotateX(1.5deg);box-shadow:inset 0 1px 0 #fff,0 8px 0 #b1d4e5,0 25px 35px #1c6a8b26}.card:active{transform:translateY(1px)}.card-image{border-bottom:1px solid #b7dcea}.card-bottom{padding-top:18px;align-items:center}.card-bottom>span{display:inline-flex;padding:9px 13px;border:1px solid #acd6e8;border-radius:9px;background:linear-gradient(#fff,#e1f3fc);box-shadow:inset 0 1px 0 #fff,0 3px 0 #b1d2e2,0 5px 9px #387aa214;font-size:12px}.card-bottom small{font-size:10px}.card-body>p{font-size:14px}.race .card-bottom>span{background:linear-gradient(#f7fff9,#dff4e9);border-color:#acd5bc;box-shadow:inset 0 1px 0 #fff,0 3px 0 #b2d4bf}.youtube .card-bottom>span{background:linear-gradient(#fff9f9,#ffe6e6);border-color:#efc7c7;box-shadow:inset 0 1px 0 #fff,0 3px 0 #deb7b7}.tag{box-shadow:inset 0 1px 0 #fff,0 3px 0 #bdd5e2,0 6px 12px #15384d22;border-radius:7px}.sound-bar{border-radius:15px;background:linear-gradient(180deg,#fffffff7,#e7f6ffed);box-shadow:inset 0 2px 0 white,0 4px 0 #b5d5e5,0 12px 28px #174e6c25;padding:10px 14px}.sound-bar button{border-radius:8px;padding:7px 10px;background:linear-gradient(#fff,#e1f3fc);box-shadow:inset 0 1px 0 #fff,0 2px 0 #b2d4e5;border:1px solid #bfdfee;transition:transform .15s}.sound-bar button:active{transform:translateY(2px);box-shadow:none}#motion{padding-left:10px}.music-playing #sound-icon{color:#0696bb;text-shadow:0 0 8px #3ec6e995}.music-playing #sound{background:linear-gradient(#f3fffa,#d5f3e8);border-color:#abd9c7;color:#157b61}.bank-details button,.text-button{border:1px solid #b3d8e8;border-radius:10px;background:linear-gradient(#fff,#e6f5fc);box-shadow:inset 0 1px 0 white,0 3px 0 #b4d2e1;padding:10px 16px;transition:transform .15s}.bank-details button:active,.text-button:active{transform:translateY(2px)}dialog{border-radius:20px;box-shadow:inset 0 2px 0 white,0 8px 0 #89b2c655,0 30px 100px #0b335155}#dust{opacity:.95}@media(max-width:1100px){nav{gap:8px}nav>a,nav>button{padding:9px 12px;font-size:12px}.card-bottom{flex-wrap:wrap;gap:12px}}@media(max-width:650px){h1{font-size:37px;letter-spacing:-1.25px;line-height:1.35}.lead{font-size:15px}.brand{font-size:17px}.brand small{font-size:7px}.hero{min-height:960px}.primary{font-size:12px;padding:13px 17px}.sound-bar{gap:7px;padding:9px 10px}.sound-bar button{padding:6px;font-size:10px}.sound-bar input{width:57px}#motion{padding-left:6px}.card-bottom{flex-direction:row}.card-bottom>span{font-size:12px}.hero-note{font-size:9px}.card:hover{transform:none}}@media(prefers-reduced-motion:reduce){.card:hover{transform:none}}
/* Channel branding and persistent light/dark palettes */
.brand-logo{width:60px;height:60px;object-fit:contain;border-radius:50%;background:white;box-shadow:0 2px 0 #a6bfce,0 5px 15px #123d5526;flex-shrink:0}.footer-brand{display:flex;align-items:center;gap:7px}.footer-brand img{border-radius:50%;background:white;margin-right:3px}.theme-toggle{display:inline-flex!important;align-items:center;gap:7px;min-width:79px;justify-content:center}#theme-icon{font-size:20px;line-height:1}.theme-toggle:focus-visible{outline:3px solid #f2bc55;outline-offset:5px}
html[data-theme=dark]{color-scheme:dark;--bg:#0d1c29;--gold:#62ccec;--muted:#adc3d0;--line:rgba(159,204,228,.18)}[data-theme=dark] body{background:#0d1c29;color:#eaf4fa}[data-theme=dark] header{background:#0e2030ee;border-color:#355163;box-shadow:0 2px 0 #263e4d,0 9px 28px #0003}[data-theme=dark] .brand{color:#f3faff}[data-theme=dark] .brand small{color:#b3cbd9}[data-theme=dark] .brand-logo{box-shadow:0 2px 0 #688495,0 5px 20px #0005}[data-theme=dark] nav>a,[data-theme=dark] nav>button{background:linear-gradient(#334e64,#263e52 48%,#1a3042);border-color:#486579;color:#e1f2fb;box-shadow:inset 0 2px 0 #617c8d66,0 4px 0 #081521,0 8px 15px #0004}[data-theme=dark] nav .donate-nav{background:linear-gradient(#e1b766,#bf9040 48%,#a8792d);border-color:#e1bc77;color:#142739;box-shadow:inset 0 2px 0 #fff3b766,0 4px 0 #73511b,0 8px 16px #0004}[data-theme=dark] nav .theme-toggle{border-color:#5e9db8;color:#8bdcf3;background:linear-gradient(#315c74,#203e53)}[data-theme=dark] .hero-art{background-color:#182f40;filter:brightness(.73) saturate(.88)}[data-theme=dark] .hero-shade{background:linear-gradient(90deg,#0d1c29ff 0%,#0d1c29f5 26%,#0d1c29b8 42%,#0d1c2908 66%),linear-gradient(0deg,#0d1c29,transparent 30%)}[data-theme=dark] h1{color:#edf7ff;text-shadow:0 2px 0 #091722,0 4px 0 #07151c66,0 10px 20px #0003}[data-theme=dark] h1 em{background-image:linear-gradient(180deg,#b2f4ff,#60cfee 55%,#37a9d0);filter:drop-shadow(0 2px 0 #073f59)}[data-theme=dark] .hero .eyebrow,[data-theme=dark] .section-head .eyebrow{color:#8adaf0}[data-theme=dark] .lead{color:#bfd4e2}[data-theme=dark] .hero-note{color:#a6c1d2}[data-theme=dark] .hero-note span:first-child{color:#75d4ed}[data-theme=dark] .hero-caption{background:#142d3be8;color:#d1e8f3;border:1px solid #53748866}[data-theme=dark] .primary{box-shadow:inset 0 2px 0 #a5edff,0 6px 0 #034865,0 13px 26px #0005}[data-theme=dark] .card{background:linear-gradient(145deg,#243d50,#142a3c);border-color:#3a5a6e;box-shadow:inset 0 1px 0 #69899c55,0 5px 0 #07131f,0 12px 25px #0004}[data-theme=dark] .card:hover{border-color:#70c1e0;box-shadow:inset 0 1px 0 #8bc3dd55,0 8px 0 #07131f,0 25px 35px #0005}[data-theme=dark] .card-image{border-color:#415f72}[data-theme=dark] .card-image img{filter:brightness(.86)}[data-theme=dark] .card h3{color:#edf7fd}[data-theme=dark] .card-body>p{color:#bed0dc}[data-theme=dark] .number{color:#8bb0c6}[data-theme=dark] .tag{background:linear-gradient(#365468,#213a4d);color:#e5f5ff;border-color:#7091a8;box-shadow:inset 0 1px 0 #a6d2e844,0 3px 0 #102435,0 6px 12px #0004}[data-theme=dark] .card-bottom>span{background:linear-gradient(#335c73,#204057);color:#90ddf4;border-color:#55859c;box-shadow:inset 0 1px 0 #9dcce344,0 3px 0 #0b2030}[data-theme=dark] .race .card-bottom>span{background:linear-gradient(#315e58,#1e413b);color:#a2e6ca;border-color:#528778}[data-theme=dark] .youtube .card-bottom>span{background:linear-gradient(#634752,#432e3a);color:#ffb9ba;border-color:#986775}[data-theme=dark] .card-bottom small{color:#aac7d8}[data-theme=dark] .about-copy p{color:#bacfdc}[data-theme=dark] .about-heading em{color:#78d3ee}[data-theme=dark] footer{color:#abc3d2}[data-theme=dark] .footer-brand{color:#edf7fc}[data-theme=dark] .text-button,[data-theme=dark] .bank-details button{background:linear-gradient(#335268,#20394c);color:#9ee5f6;border-color:#577d94;box-shadow:inset 0 1px 0 #8eb6cc44,0 3px 0 #0a1825}[data-theme=dark] .sound-bar{background:linear-gradient(#2a4458f7,#162d40f5);border-color:#4b7189;box-shadow:inset 0 2px 0 #9bbbd333,0 4px 0 #06131f,0 12px 28px #0005}[data-theme=dark] .sound-bar button,[data-theme=dark] #motion{background:linear-gradient(#36596e,#244154);color:#b7eafd;border-color:#5b8297;box-shadow:inset 0 1px 0 #aacde144,0 2px 0 #0c2130}[data-theme=dark] .sound-bar label{color:#b4cbd9}[data-theme=dark] .sound-bar output{color:#fff}[data-theme=dark] .music-playing #sound{background:linear-gradient(#286159,#194439);color:#aff3d7;border-color:#4d977f}[data-theme=dark] .music-playing #sound-icon{color:#98f2ce}[data-theme=dark] dialog{background:#142a3a;color:#edf7ff;border-color:#62859c;box-shadow:inset 0 2px 0 #a2c1d233,0 8px 0 #06152188,0 30px 100px #0009}[data-theme=dark] dialog p,[data-theme=dark] dialog li{color:#c0d3df}[data-theme=dark] dialog small,[data-theme=dark] .bank-details span{color:#aac6d7}[data-theme=dark] .close{color:#e1f2fc}[data-theme=dark] .donate-image{border-color:#4f7185}[data-theme=dark] #dust{opacity:1}
@media(max-width:1100px){.brand-logo{width:50px;height:50px}nav{gap:8px}nav>a,nav>button{padding:9px 10px}.brand{font-size:19px}.theme-toggle{min-width:72px}}
@media(max-width:850px) and (min-width:651px){nav>a{display:none}.brand{font-size:20px}}
@media(max-width:650px){.brand-logo{width:43px;height:43px}.brand{font-size:16px;gap:7px}.brand small{font-size:6px;letter-spacing:.6px}.theme-toggle{min-width:39px;padding:9px!important}#theme-label{display:none}nav{gap:9px}.donate-nav{padding:8px 10px!important;font-size:11px}header{padding:0 4%}[data-theme=dark] .hero-shade{background:linear-gradient(180deg,#0d1c29 0%,#0d1c29 49%,#0d1c2900 67%,#0d1c2900 91%,#0d1c29 100%)}[data-theme=dark] .hero-art{filter:brightness(.78) saturate(.9)}}
/* Local release: opaque accessible hero accent, without gradient clipping. */
html[data-theme] h1 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;filter:none;color:#08799f;text-shadow:0 1px 0 #ffffff80}
html[data-theme=dark] h1 em{color:#86e5ff;-webkit-text-fill-color:#86e5ff;background:none;filter:none;text-shadow:0 2px 2px #06162180}
/* Explicit sizing prevents background shorthand from restoring image tiling. */
.hero-art,.hero-art.ready{background-repeat:no-repeat!important;background-size:cover!important;background-position:center top}
@media(min-width:1800px){.hero-art,.hero-art.ready{background-size:auto 115%!important;background-position:right top;background-color:var(--bg)}}
@media(max-width:650px){.hero-art,.hero-art.ready{background-size:cover!important;background-position:68% center}}
.audio-notice{position:fixed;z-index:8;left:50%;bottom:100px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 30px);padding:16px 20px;background:#eefaff;color:#19465e;border:1px solid #8fc4da;border-radius:14px;box-shadow:0 12px 40px #0004;display:flex;align-items:center;gap:14px;font-size:14px}.audio-notice[hidden]{display:none}.audio-notice button{padding:9px 13px;border-radius:8px;border:1px solid #9bd5e9;background:linear-gradient(#36bbdf,#0a82b5);color:#fff;font-weight:600;white-space:nowrap}.audio-notice #skip-audio{background:none;color:inherit;border-color:transparent}[data-theme=dark] .audio-notice{background:#19394d;color:#e8f8ff;border-color:#4c9dba}@media(max-width:650px){.audio-notice{bottom:90px;flex-wrap:wrap;gap:9px;font-size:12px;justify-content:center}.audio-notice>span{width:100%;text-align:center}}#dust{pointer-events:none;z-index:4}


/* v1.4 — Zoom-safe hero composition.
   The classroom is one real image (never tiled). On large/zoomed-out
   desktops its width is tied to the viewport, not a fixed image height.
   This keeps the teacher/students in the same visual zone instead of
   drifting to the far-right when browser zoom changes CSS pixel width. */
.hero-art,.hero-art.ready{
  background-image:none!important;
  background-repeat:no-repeat!important;
  overflow:hidden;
  background-color:var(--bg);
}
.hero-art>img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center top;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
/* Desktop / browser zoom-out: keep a stable 73% visual stage.
   vw scales with the visible viewport, so 100%, 80%, 67% and 50% zoom
   preserve the composition instead of pushing the photo to the edge. */
@media(min-width:1600px){
  .hero-art>img{
    inset:0 0 auto auto;
    width:73vw;
    height:auto;
    object-fit:contain;
    object-position:right top;
  }
}
@media(max-width:650px){
  .hero-art>img{
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:68% center;
  }
}

/* =========================================================
   v1.5 — Adaptive viewport engine
   Layout responds to usable viewport, aspect ratio and device class.
   JS only adds data-* hints; CSS remains the source of truth.
   ========================================================= */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --app-vh:100svh;
  --hero-min:clamp(680px,78svh,900px);
  --page-gutter:clamp(22px,5vw,96px);
}
html,body{max-width:100%;overflow-x:hidden}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
header{padding-left:max(var(--page-gutter),var(--safe-left));padding-right:max(var(--page-gutter),var(--safe-right))}
.hero{
  min-height:var(--hero-min);
  padding-left:max(clamp(30px,7vw,160px),var(--safe-left));
  padding-right:max(clamp(30px,7vw,160px),var(--safe-right));
}
.hero-art{transform:none;animation:none;background:radial-gradient(ellipse at 72% 42%,#294a59 0%,#122736 43%,var(--bg) 78%)}
.hero-art>img{
  inset:0 0 0 auto;
  width:min(72vw,var(--hero-photo-max,2100px));
  min-width:min(880px,72vw);
  height:100%;
  object-fit:cover;
  object-position:52% center;
  transform:scale(1.015);
  transform-origin:70% 45%;
}
.hero-content{width:min(44vw,690px)}
.hero-shade{pointer-events:none}
.explore,.about,footer{content-visibility:auto;contain-intrinsic-size:auto 700px}
.card{contain:layout paint style}
.card-image img{content-visibility:auto}

/* Short-height displays such as 1366×768 / 1280×720. */
html[data-height="short"]{--hero-min:clamp(640px,92svh,720px)}
html[data-height="short"] .hero{padding-top:122px;padding-bottom:58px}
html[data-height="short"] h1{font-size:clamp(36px,3.8vw,54px);line-height:1.25;margin-bottom:18px}
html[data-height="short"] .lead{font-size:15px;line-height:1.75;margin-bottom:20px}
html[data-height="short"] .hero-note{margin-top:24px}
html[data-height="short"] .hero-caption{bottom:42px}

/* 16:9 / Full HD / QHD desktops. */
html[data-device="desktop"][data-aspect="wide"] .hero-art>img{width:min(68vw,var(--hero-photo-max,2100px));min-width:min(940px,68vw);object-position:50% center}

/* 21:9 and zoomed-out ultra-wide viewports: keep the photo as one stage,
   anchored to the right without stretching or drifting off-screen. */
html[data-aspect="ultrawide"] .hero-art>img{width:min(59vw,var(--hero-photo-max,2100px));min-width:min(1080px,59vw);object-position:50% center}
html[data-aspect="ultrawide"] .hero-content{width:min(38vw,690px)}
html[data-aspect="ultrawide"] .hero-shade{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 96%,transparent) 29%,color-mix(in srgb,var(--bg) 68%,transparent) 43%,transparent 68%),linear-gradient(0deg,var(--bg),transparent 28%)}

/* Very large 4K-class CSS viewports: cap reading line length and image size. */
html[data-resolution="uhd"] .hero-art>img{max-width:var(--hero-photo-max,2100px)}
html[data-resolution="uhd"] h1{font-size:clamp(50px,3.2vw,68px)}

/* Tablet: avoid three cramped cards and keep the hero focal point visible. */
@media (min-width:681px) and (max-width:980px){
  :root{--page-gutter:clamp(24px,4vw,46px);--hero-min:760px}
  .hero{padding-top:125px;align-items:flex-start}
  .hero-content{width:min(58vw,610px)}
  .hero-art>img{width:100%;height:100%;object-position:61% center;opacity:.82}
  .hero-shade{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 42%,color-mix(in srgb,var(--bg) 40%,transparent) 76%,transparent 100%),linear-gradient(0deg,var(--bg),transparent 35%)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards .youtube{grid-column:1/-1;max-width:calc(50% - 8px);width:100%;justify-self:center}
  .card-image{height:205px}
}

/* Phones: use dynamic viewport height, safe areas, larger tap targets,
   and a focal crop that retains teacher + students without horizontal overflow. */
@media (max-width:680px){
  :root{--page-gutter:clamp(16px,5vw,24px);--hero-min:clamp(760px,108svh,930px)}
  header{height:78px;padding-top:var(--safe-top)}
  .brand-logo{width:42px;height:42px}
  .hero{min-height:var(--hero-min);padding:118px var(--page-gutter) 62px;align-items:flex-start}
  .hero-content{width:min(100%,520px);max-width:none}
  .hero-art>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 34%;transform:none;opacity:.86}
  .hero-shade{background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 96%,transparent) 36%,color-mix(in srgb,var(--bg) 56%,transparent) 61%,color-mix(in srgb,var(--bg) 30%,transparent) 80%,var(--bg) 100%)}
  [data-theme=dark] .hero-shade{background:linear-gradient(180deg,#0d1c29 0%,#0d1c29f7 37%,#0d1c298f 62%,#0d1c2945 82%,#0d1c29 100%)}
  h1{font-size:clamp(34px,9.6vw,43px);line-height:1.26}
  .lead{max-width:34ch}
  .primary{min-height:48px}
  .cards{grid-template-columns:1fr}
  .cards .youtube{grid-column:auto;max-width:none}
  .sound-bar{bottom:max(12px,var(--safe-bottom));width:max-content;max-width:calc(100vw - 20px)}
  dialog{margin-top:max(10px,var(--safe-top));margin-bottom:max(10px,var(--safe-bottom))}
}

/* Small phones (360–390 CSS px). */
@media (max-width:390px){
  .brand span>small{display:none}
  .brand{font-size:15px}
  nav{gap:6px}
  .donate-nav{padding:7px 8px!important}
  .hero{padding-top:108px}
  h1{font-size:clamp(32px,9.3vw,36px)}
  .eyebrow{font-size:9px;letter-spacing:1px}
  .lead{font-size:14px;line-height:1.75}
  .hero-note span:last-child{display:none}
  .card-image{height:200px}
  .sound-bar #motion span{display:none}
}

/* Landscape phones / tiny-height browser windows. */
@media (max-height:560px) and (orientation:landscape){
  :root{--hero-min:590px}
  header{height:66px}
  .brand-logo{width:38px;height:38px}
  .brand small{display:none}
  .hero{padding-top:88px;padding-bottom:38px;align-items:flex-start}
  .hero-content{width:min(54vw,540px)}
  .hero-art>img{width:62vw;height:100%;object-position:58% center;opacity:.86}
  .hero-shade{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 94%,transparent) 42%,transparent 76%),linear-gradient(0deg,var(--bg),transparent 32%)}
  h1{font-size:clamp(31px,5.4vw,44px);line-height:1.14;margin-bottom:12px}
  .lead{font-size:13px;line-height:1.55;margin-bottom:14px}
  .hero-note{margin-top:14px}
  .sound-bar{bottom:max(8px,var(--safe-bottom))}
}

/* Touch devices should not spend GPU time on hover-only 3D states. */
@media (hover:none),(pointer:coarse){
  .card:hover,.primary:hover,nav>a:hover,nav>button:hover{transform:none}
  .card:hover img{transform:none}
  .race:hover img{transform:translateX(-38%)}
}

/* Save-data / low-power mode is applied by app.js. */
html[data-performance="low"] .hero-art>img{transform:none}
html[data-performance="low"] .card,html[data-performance="low"] .card-image img{transition:none}
html[data-performance="low"] #dust{opacity:.55}
@media (max-width:680px){.hero-art{inset:0;height:auto;background-position:center;transform:none}}

/* =========================================================
   v1.6 — Focal-safe adaptive hero
   Keep the teacher's face inside the safe area at every browser zoom.
   Important: crop from the BOTTOM, never from the TOP.
   ========================================================= */
@media (min-width:981px){
  .hero-art{inset:0!important;height:auto!important;overflow:hidden!important}
  .hero-art>img{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:auto!important;
    width:min(73vw,2300px)!important;
    min-width:0!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:50% top!important;
    transform:none!important;
    transform-origin:top right!important;
  }
  html[data-aspect="wide"] .hero-art>img,
  html[data-aspect="ultrawide"] .hero-art>img{
    width:min(73vw,2300px)!important;
    object-position:50% top!important;
  }
  html[data-height="short"] .hero-art>img{
    width:min(73vw,2300px)!important;
    object-position:50% top!important;
  }
  html[data-resolution="uhd"] .hero-art>img{max-width:none!important}
  .hero-content{width:min(43vw,690px)!important}
  html[data-aspect="ultrawide"] .hero-content{width:min(40vw,690px)!important}
}

/* Normal desktop/tablet: top-safe focal crop. */
@media (min-width:681px) and (max-width:980px){
  .hero-art>img{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:62% top!important;
    transform:none!important;
  }
}

/* Phones: preserve heads first; bottom desks may crop on very tall/narrow screens. */
@media (max-width:680px){
  .hero-art{inset:0!important;height:auto!important}
  .hero-art>img{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:66% top!important;
    transform:none!important;
    opacity:.86!important;
  }
}

/* Landscape phones: never center-crop vertically because that can cut heads. */
@media (max-height:560px) and (orientation:landscape){
  .hero-art>img{object-position:60% top!important}
}

/* Explicit ON states are visually unmistakable. */
#motion[aria-pressed="true"],#sound[aria-pressed="true"]{filter:none}
#motion[aria-pressed="true"]{box-shadow:inset 0 1px 0 #fff8,0 2px 0 #9dc9dc,0 0 18px #4fcff02b}
[data-theme=dark] #motion[aria-pressed="true"]{background:linear-gradient(#2d665f,#1d4943);color:#b8f4de;border-color:#579a86;box-shadow:inset 0 1px 0 #bff4dd44,0 2px 0 #0b2723,0 0 18px #5fe0bb22}