
html[data-ui="v3"][data-season]{
  --t-bg:var(--sx-bg);--t-bg-glow:var(--sx-bg-glow);--t-panel:var(--sx-panel);--t-panel-2:var(--sx-panel-2);--t-line:var(--sx-line);
  --t-text:var(--sx-text);--t-muted:var(--sx-muted);--t-accent:var(--sx-accent);--t-on-accent:var(--sx-on-accent);
  --t-accent-soft:var(--sx-accent-soft);--t-accent-line:var(--sx-accent-line);--t-teal:var(--sx-teal)
}
html[data-season] .home-site-header{background:var(--sx-header)!important;border-bottom-color:var(--sx-header-line)!important}
html[data-ui="v3"][data-season] .site-footer{background:var(--sx-header)!important}

html[data-season] .hero .hero-copy{
  overflow:hidden;isolation:isolate;
  padding-bottom:calc(var(--sx-strip-h,0px) + clamp(22px,2.5vw,32px))!important;
  background:var(--sx-card-bg)!important;border-color:var(--sx-card-line)!important;
  box-shadow:var(--sx-card-shadow,0 24px 60px -24px #0009)!important;
  --t-text:var(--sx-card-ink);--t-muted:var(--sx-card-text);--t-accent:var(--sx-card-accent);--t-teal:var(--sx-card-kicker);
  --t-panel-2:#ffffff14;--t-line:#ffffff2e;--t-accent-soft:#ffffff1f;--t-accent-line:var(--sx-card-accent)
}
html[data-season] .hero .hero-copy>:not(.sx-hero){position:relative;z-index:2}
html[data-season] .hero .hero-copy h1{text-shadow:var(--sx-h1-glow,none)!important}
html[data-season] .hero .hero-copy .home-hero-features a{color:var(--sx-card-ink)!important;backdrop-filter:blur(4px)}
html[data-season] .hero .hero-copy .btn{background:var(--sx-cta)!important;color:var(--sx-cta-ink)!important;box-shadow:0 10px 22px -10px var(--sx-cta-shadow,#0009)!important}
.sx-hero{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit}
.sx-hero.is-paused *{animation-play-state:paused!important}
.sx-strip{position:absolute;left:0;right:0;bottom:0;height:var(--sx-strip-h,0px);background:var(--sx-strip) left bottom/auto 100% repeat-x}

.season-banner{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:0 0 16px!important;padding:6px 16px 6px 8px;border-radius:999px;
  background:var(--sx-banner-bg)!important;color:var(--sx-banner-fg)!important;font-size:14px!important;font-weight:800;line-height:1.3!important;box-shadow:0 8px 18px -10px #0009;transform:rotate(-1.2deg)}
.season-banner::before{content:"";width:26px;height:26px;flex:none;background:var(--sx-banner-icon) center/contain no-repeat}
.season-count{display:inline-grid;place-items:center;min-width:1.9em;padding:0 .3em;border-radius:8px;background:#ffffff33;font-size:1.15em}

html[data-season] .hero-image{isolation:isolate}
html[data-season] .hero-image::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:var(--sx-photo-tint)}
html[data-season] .hero-image.is-season-photo::after{display:none}
.sx-photo{position:absolute;inset:0;z-index:2;pointer-events:none}

html[data-season] :is(.achievement-result,.achievement-score) h3>span:first-child{color:transparent!important;background:var(--sx-title-icon) center/76% no-repeat,var(--t-panel-2)!important}
html[data-season] .achievement-intro::before{content:"";position:absolute;right:18px;top:16px;z-index:2;width:44px;height:52px;pointer-events:none;
  background:var(--sx-mascot) center/contain no-repeat;animation:sx-float 3.8s ease-in-out infinite}
@keyframes sx-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
html[data-season] .achievement-year-card:hover{border-color:var(--sx-hover-line)!important}

.sx-twinkle{animation:sx-twinkle var(--tw,2.4s) ease-in-out var(--td,0s) infinite alternate}
@keyframes sx-twinkle{0%,15%{opacity:.35;filter:saturate(.6)}60%,100%{opacity:1;filter:none}}

.season-fx{position:fixed;left:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:60;width:58px;height:58px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--sx-fx-bg);box-shadow:0 0 0 3px var(--sx-fx-ring),0 10px 22px -6px #0009;transition:transform .2s,filter .2s;-webkit-tap-highlight-color:transparent}
.season-fx svg{width:40px;height:40px;overflow:visible}
.season-fx-body{fill:var(--sx-fx-body,#fff);stroke:var(--sx-fx-stroke,#c9b6e6);stroke-width:1.4;stroke-linejoin:round}
.season-fx-eye{fill:#2b1d3a}
.season-fx-lid{fill:none;stroke:#2b1d3a;stroke-width:1.6;stroke-linecap:round}
.season-fx-cheek{fill:#ff9fb3}
.season-fx-z{font:800 9px/1 "Be Vietnam Pro",system-ui,sans-serif;fill:var(--sx-fx-z,#fff)}
.season-fx-z.is-2{font-size:7px}
.season-fx[aria-pressed="true"] .season-fx-off,.season-fx[aria-pressed="false"] .season-fx-on{display:none}
.season-fx[aria-pressed="true"] svg{animation:season-fx-float 3s ease-in-out infinite}
.season-fx[aria-pressed="true"] .season-fx-eye{transform-box:fill-box;transform-origin:center;animation:season-fx-blink 4.6s infinite}
.season-fx[aria-pressed="false"]{filter:saturate(.45) brightness(.97)}
.season-fx[aria-pressed="false"] .season-fx-z{animation:season-fx-z 2.4s ease-in-out infinite}
.season-fx[aria-pressed="false"] .season-fx-z.is-2{animation-delay:-1.2s}
@keyframes season-fx-float{0%,100%{transform:translateY(1px)}50%{transform:translateY(-3px)}}
@keyframes season-fx-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes season-fx-z{0%{transform:translate(0,4px);opacity:0}30%{opacity:1}100%{transform:translate(3px,-5px);opacity:0}}
.season-fx.is-pop{animation:season-fx-pop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes season-fx-pop{0%{transform:scale(.85)}100%{transform:none}}
.season-fx-tip{position:absolute;left:calc(100% + 14px);top:50%;padding:7px 12px;border:1.5px solid var(--t-line,#dbe3ee);border-radius:14px;background:var(--t-panel,#fff);
  color:var(--t-text,#14213d);font:700 13px/1.2 "Be Vietnam Pro",system-ui,sans-serif;white-space:nowrap;box-shadow:0 10px 24px -8px #0007;
  opacity:0;transform:translate(-8px,-50%);transition:opacity .2s,transform .2s;pointer-events:none}
.season-fx-tip::before{content:"";position:absolute;left:-6px;top:50%;width:10px;height:10px;margin-top:-5px;border:inherit;border-right:0;border-top:0;background:inherit;transform:rotate(45deg)}
.season-fx.is-hint .season-fx-tip{opacity:1;transform:translate(0,-50%)}
@media (hover:hover){
  .season-fx:hover{transform:scale(1.08) rotate(-6deg)}
  .season-fx:hover .season-fx-tip{opacity:1;transform:translate(0,-50%)}
}
.season-fx:active{transform:scale(.94)}
.season-fx:focus-visible{outline:3px solid var(--sx-fx-ring);outline-offset:4px}
body:has(.cms-bar) .season-fx{bottom:calc(84px + env(safe-area-inset-bottom))}

@media (max-width:640px){
  .season-fx{left:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:52px;height:52px}
  .season-fx svg{width:36px;height:36px}
  .season-banner{font-size:12.5px!important}
  html[data-season] .achievement-intro::before{width:34px;height:40px;right:12px;top:12px}
}

html[data-fx="off"] .sx-hero *,html[data-fx="off"] .sx-photo *,html[data-fx="off"] .sx-twinkle,html[data-season][data-fx="off"] .achievement-intro::before{animation:none}
html[data-fx="off"] .sx-twinkle{opacity:1}
html[data-fx="off"] .sx-moving{display:none}
@media print{.sx-hero,.sx-photo,.sx-moving,.season-fx{display:none}}
