:root{color-scheme:dark}
html[data-theme="dark"] .light{background:#14222d;color:#F4F0E9}
html[data-theme="dark"] .light .section-head p,html[data-theme="dark"] .category p,html[data-theme="dark"] .category-foot{color:#BFC4C9}
html[data-theme="dark"] .light .eyebrow,html[data-theme="dark"] .category-number{color:#64c9ef}
html[data-theme="dark"] .category-grid{background:#314b5c;border-color:#314b5c;box-shadow:0 20px 50px rgba(0,0,0,.12)}
html[data-theme="dark"] .category{background-color:#1b2d39;background-image:radial-gradient(220px circle at var(--glow-x,-300px) var(--glow-y,-300px),rgba(100,201,239,.13),transparent 80%)}
html[data-theme="dark"] .category:hover{background-color:#223b4c}
html[data-theme="dark"] .category .tag{color:#b9d8e9;border-color:#446679;background:rgba(100,201,239,.04)}
html[data-theme="dark"] .category svg{color:#34586b}
html[data-motion="on"]{scroll-behavior:smooth}
body,header,.category,.support,.course,.light,footer{transition:background-color .5s,color .5s,border-color .5s}
.wordmark{order:1}.navlinks{order:2;margin-left:auto}.theme-toggle{order:3}.nav-toggle{order:4}
.theme-toggle{position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid rgba(100,201,239,.32);border-radius:30px;color:#dbf3ff;background:rgba(100,201,239,.06);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .3s,box-shadow .3s,transform .3s}
.theme-toggle>span:first-child{font-size:21px;line-height:1;color:var(--ocean)}
.theme-toggle:hover{background:rgba(100,201,239,.15);box-shadow:0 0 22px rgba(100,201,239,.13)}
.hero::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:0;background:radial-gradient(350px circle at var(--glow-x,50%) var(--glow-y,30%),rgba(100,201,239,.09),transparent 80%);transition:opacity .4s}
.hero:hover::after{opacity:1}
.category{background-image:radial-gradient(220px circle at var(--glow-x,-300px) var(--glow-y,-300px),rgba(64,171,219,.1),transparent 80%)}
.water-ripple{position:absolute!important;display:block!important;width:25px;height:25px;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.65);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:water-ripple .7s ease-out forwards}
@keyframes water-ripple{to{transform:translate(-50%,-50%) scale(14);opacity:0}}
.hero-art{animation:banner-arrive 1.1s var(--ease-water) both}
@keyframes banner-arrive{from{clip-path:inset(0 0 12% 0 round 8px)}to{clip-path:inset(0 round 8px)}}
.category-strip{background-size:220% 100%;animation:sea-current 14s ease-in-out infinite}
@keyframes sea-current{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
html[data-theme="light"]{color-scheme:light;--ivory:#153144;--silver:#4b6170;--line:#c4d5df;--ocean:#075e9f;--ocean-deep:#075e9f;--gold:#79552b}
html[data-theme="light"] body{background:#f3f7fa;color:#153144}
html[data-theme="light"] header{background:rgba(247,251,253,.92);border-bottom-color:#c4d5df}
html[data-theme="light"] .hero::before{background:radial-gradient(ellipse at 88% 20%,rgba(55,160,221,.18),transparent 53%),radial-gradient(ellipse at 12% 63%,rgba(111,201,239,.12),transparent 54%)}
html[data-theme="light"] .hero::after{background:radial-gradient(350px circle at var(--glow-x,50%) var(--glow-y,30%),rgba(7,94,159,.08),transparent 80%)}
html[data-theme="light"] .water-lines{opacity:.3}
html[data-theme="light"] .theme-toggle{color:#16415b;background:#e4eff7;border-color:#b8cfdf}
html[data-theme="light"] .navcontact{border-color:#b8cfdf}
html[data-theme="light"] .navcontact:hover,html[data-theme="light"] .nav-toggle:hover{background:#e4eff7}
html[data-theme="light"] .btn-gold{background:#075e9f;color:#fff;box-shadow:0 7px 24px rgba(7,94,159,.15)}
html[data-theme="light"] .btn-gold:hover{background:#064b7f;color:#fff}
html[data-theme="light"] .btn-outline{color:#153144;border-color:#a9c6d8}
html[data-theme="light"] .btn-outline:hover{background:#dbeaf3;border-color:#075e9f}
html[data-theme="light"] .hero-art{border-color:#bed6e4;box-shadow:0 20px 50px rgba(22,62,87,.15)}
html[data-theme="light"] .category-strip{background:linear-gradient(90deg,#dfedf6,#cee6f4,#dfedf6);border-color:#b9d4e5;background-size:220% 100%}
html[data-theme="light"] .light{background:#eaf1f5;color:#153144}
html[data-theme="light"] .category{background-color:#f8fbfc}
html[data-theme="light"] .category:hover{background-color:#deedf6}
html[data-theme="light"] .category h3{color:#153144}
html[data-theme="light"] .category svg{color:#163d53}
html[data-theme="light"] .category-grid{border-color:#bed2df;background:#bed2df}
html[data-theme="light"] .support{background:radial-gradient(ellipse at 100% 0,rgba(105,187,232,.2),transparent 65%),#e6f0f7;border-color:#b7d3e3;box-shadow:0 16px 45px rgba(29,65,91,.07)}
html[data-theme="light"] .story-row:hover{background:#e8f1f7}
html[data-theme="light"] .course{background:linear-gradient(120deg,#e1eef6,#edf5fa);border-color:#bfd6e4}
html[data-theme="light"] .contact::before{background:radial-gradient(ellipse at 15% 70%,rgba(98,183,230,.18),transparent 65%)}
html[data-theme="light"] .product a:hover,html[data-theme="light"] .source-link:hover,html[data-theme="light"] .socials a:hover{color:#043d67}
html[data-theme="light"] .draft-label{color:#075e9f;border-color:#9abfd5}
html[data-theme="light"] .motion-toggle{border-color:#a9c6d8;color:#075e9f}
html[data-theme="light"] .skip{background:#075e9f;color:#fff}
html[data-theme="light"] .scene-transition{background:linear-gradient(145deg,rgba(224,241,250,.98),rgba(182,222,245,.98))}
html[data-theme="light"] .scene-label{color:#153144}
@media(max-width:1100px){.nav{gap:16px}.navlinks{gap:18px}.wordmark{font-size:20px}.theme-toggle{font-size:11px;padding:8px 10px}}
@media(min-width:641px) and (max-width:800px){.navlinks{gap:10px;font-size:11px}.navcontact{padding:8px 10px}.theme-toggle{gap:5px}.wordmark{font-size:18px;letter-spacing:1px}.wordmark span{letter-spacing:2px}}
@media(max-width:640px){.nav{gap:0;justify-content:space-between}.wordmark{font-size:19px;letter-spacing:1.1px}.wordmark span{letter-spacing:3px}.theme-toggle{order:2;font-size:10px;padding:7px 9px;gap:6px;margin-left:auto;margin-right:10px}.theme-toggle>span:first-child{font-size:18px}.nav-toggle{order:3;padding:7px 9px;font-size:13px}.navlinks{order:4;margin-left:0}.hero-art{animation:none}}