.class-page { background: #001b42; color: #fff; }
.class-shell { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.class-header { display: flex; align-items: center; gap: 32px; min-height: 94px; border-bottom: 1px solid rgba(255,255,255,.17); }
.class-header .brand { margin-right: auto; }
.class-header__back { font-size: 12px; color: #c4d0df; }
.class-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; padding: 19px 26px; border: 1px solid #047c89; border-radius: 999px; background: #047c89; color: #fff; font-size: 13px; font-weight: 750; cursor: pointer; transition: background .2s, transform .2s; text-decoration: none; }
.class-button:hover { background: #046976; transform: translateY(-2px); }
.class-button:disabled { opacity: .65; cursor: wait; transform: none; }
.class-button--small { padding: 13px 20px; font-size: 11px; }
.class-button span { font-size: 20px; line-height: 1; }
.class-eyebrow { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.class-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: #50d5d7; box-shadow: 0 0 18px #02909d; }
.class-hero { position: relative; isolation: isolate; overflow: hidden; }
.class-aura { position: absolute; z-index: -1; width: 950px; height: 950px; right: -270px; top: -160px; border: 1px solid rgba(100,205,216,.16); border-radius: 48%; background: radial-gradient(ellipse at 40% 50%, rgba(2,144,157,.2), transparent 60%); transform: rotate(-24deg); }
.class-aura::before, .class-aura::after { content: ''; position: absolute; inset: 45px; border: 1px solid rgba(100,205,216,.14); border-radius: 43%; transform: rotate(22deg); }
.class-aura::after { inset: 90px; transform: rotate(43deg); }
.class-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px,6vw,90px); align-items: center; padding-block: 70px 90px; }
.class-hero h1 { margin: 26px 0; font-size: clamp(50px,5.5vw,82px); line-height: .98; letter-spacing: -.025em; font-weight: 760; }
.class-page h1 em, .class-page h2 em { color: #65d3d7; font-family: Georgia, serif; font-weight: 400; }
.class-lede { max-width: 530px; color: #cad5e3; font-size: 17px; line-height: 1.65; margin: 0; }
.class-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 30px 0; }
.class-hero__actions > span { font-size: 11px; color: #c4d0df; }
.class-time { display: grid; gap: 4px; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.18); max-width: 440px; }
.class-time time { font-size: 15px; }
.class-time strong { font-size: 23px; font-weight: 650; }
.class-time > span { color: #bdcbdd; font-size: 12px; }
.class-hero__visual { position: relative; }
.class-portrait { margin: 0; }
.class-portrait > img { display: block; width: 100%; height: clamp(280px,26vw,380px); object-fit: cover; object-position: 50% 32%; border-radius: 24px; box-shadow: 0 36px 75px rgba(0,0,0,.24); }
.class-portrait figcaption { position: static; margin-top: 20px; display: grid; gap: 5px; }
.class-portrait figcaption > span { font-size: 9px; letter-spacing: .17em; color: #c4d0df; }
.class-portrait figcaption strong { font-size: 26px; letter-spacing: -.025em; }
.class-portrait figcaption small { font-size: 11px; color: #d4dfe9; }
.class-countdown { position: relative; margin-top: 24px; padding: 26px 30px; border: 1px solid rgba(159,222,232,.35); border-radius: 22px; background: linear-gradient(135deg,rgba(18,65,95,.93),rgba(0,35,66,.95)); box-shadow: 0 24px 50px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.class-countdown > p:first-child { margin: 0 0 18px; font-size: 9px; font-weight: 750; letter-spacing: .18em; color: #bbe4e9; }
.class-countdown__digits { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.class-countdown__digits > div { display: grid; gap: 8px; }
.class-countdown strong { font-size: clamp(27px,3.3vw,47px); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.025em; }
.class-countdown__digits span { font-size: 8px; letter-spacing: .14em; color: #c4d0df; }
.class-local-time { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.14); color: #cfdae7; font-size: 10px; }
.class-context { display: grid; grid-template-columns: .6fr 1fr 1.25fr; gap: 36px; align-items: start; border-top: 1px solid rgba(255,255,255,.2); padding-block: 56px 90px; }
.class-context h2 { margin: 0; font-size: 37px; font-weight: 620; letter-spacing: -.025em; line-height: 1.1; }
.class-context p:not(.class-eyebrow) { font-size: 15px; line-height: 1.7; color: #cad5e3; margin: 0 0 16px; }
.class-curriculum { background: #f2efea; color: #001b42; padding-block: 84px; }
.class-section-heading { display: grid; grid-template-columns: .7fr 1.3fr 1fr; align-items: start; gap: 36px; margin-bottom: 50px; }
.class-section-heading h2 { margin: 0; font-size: clamp(35px,3.5vw,54px); letter-spacing: -.025em; line-height: 1.04; }
.class-curriculum h2 em { color: #047c89; }
.class-section-heading > p:last-child { font-size: 14px; line-height: 1.75; margin: 0; }
.class-topic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.class-topic { position: relative; min-width: 0; padding: 26px 30px 30px; border: 1px solid rgba(0,27,66,.12); border-radius: 22px; background: linear-gradient(140deg,rgba(255,255,255,.92),rgba(255,255,255,.45)); box-shadow: 0 12px 30px rgba(0,27,66,.035), inset 0 1px #fff; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.class-topic:hover { transform: translateY(-5px); border-color: rgba(2,144,157,.36); box-shadow: 0 20px 35px rgba(0,27,66,.08), inset 0 1px #fff; }
.class-topic__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; min-height: 58px; }
.class-topic__number { font-size: 30px; color: #047c89; font-family: Georgia,serif; font-style: italic; }
.class-topic__icon { position: relative; width: 58px; height: 58px; perspective: 220px; }
.class-topic__icon i, .class-topic__icon b { position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 13px; transform: rotateX(16deg) rotateY(-20deg) rotateZ(-8deg); transition: transform .55s var(--ease); }
.class-topic__icon i { background: #02909d; box-shadow: 5px 9px 15px rgba(0,27,66,.14); transform: translate(-6px,6px) rotateX(16deg) rotateY(-20deg) rotateZ(-8deg); }
.class-topic__icon b { border: 1px solid rgba(255,255,255,.95); color: #001b42; background: linear-gradient(135deg,rgba(255,255,255,.88),rgba(210,236,237,.55)); box-shadow: inset 0 0 0 1px rgba(2,144,157,.13), 0 4px 8px rgba(0,27,66,.06); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.class-topic__icon svg { width: 25px; height: 25px; }
.class-topic:hover .class-topic__icon b { transform: translate(3px,-4px) rotateX(8deg) rotateY(-8deg) rotateZ(-3deg); }
.class-topic:hover .class-topic__icon i { transform: translate(-9px,9px) rotateX(16deg) rotateY(-20deg) rotateZ(-8deg); }
.class-topic h3 { font-size: 23px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; margin: 0 0 15px; max-width: 300px; }
.class-topic p { margin: 0; color: #4a5a72; font-size: 13px; line-height: 1.75; }
.class-topic[data-seen] { animation: class-card-settle .7s var(--ease) backwards; }
@keyframes class-card-settle { from { transform: translateY(18px); } to { transform: translateY(0); } }
.class-learning-scene { min-width: 0; min-height: 300px; margin: 0; display: flex; flex-direction: column; border: 1px solid rgba(2,144,157,.18); border-radius: 22px; overflow: hidden; background: #f2efea; }
.class-learning-scene__stage { position: relative; flex: 1; min-height: 205px; isolation: isolate; }
.class-learning-scene__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; opacity: 0; }
.class-learning-scene[data-ready] canvas { opacity: 1; }
.class-learning-scene__fallback { width: 100%; height: 205px; padding: 6px 22px; }
.class-learning-scene[data-ready] .class-learning-scene__fallback { visibility: hidden; }
.class-learning-scene figcaption { position: relative; padding: 12px 24px 22px; }
.class-learning-scene figcaption > .class-eyebrow { color: #047c89; font-size: 8px; margin-bottom: 8px; }
.class-learning-scene figcaption > strong { font-size: 23px; letter-spacing: -.025em; font-weight: 650; }
.class-learning-scene__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.class-learning-scene__controls > span { flex: 1; font-size: 9px; color: #4a5a72; }
.class-learning-scene__controls button { border: 1px solid rgba(2,144,157,.3); border-radius: 999px; background: rgba(255,255,255,.5); padding: 6px 9px; font-size: 9px; font-weight: 650; cursor: pointer; color: #001b42; }
.class-learning-scene__controls button:hover { background: #fff; }
.class-learning-scene__controls [hidden] { display: none; }
.class-learning-scene__controls [data-scene-pause] { width: 28px; height: 28px; padding: 0; }
.class-learning-scene__controls [aria-pressed=true] { background: #001b42; color: #fff; }
.class-teaching { margin-top: 40px; }
.class-teaching video { width: 100%; max-height: 680px; background: #001b42; margin-top: 20px; border-radius: 18px; }
.class-register { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,8vw,110px); padding-block: 100px; scroll-margin-top: 24px; }
.class-register h2 { font-size: clamp(46px,4.5vw,66px); letter-spacing: -.03em; line-height: 1.02; margin: 24px 0; }
.class-register > div > p:not(.class-eyebrow) { max-width: 440px; color: #cad5e3; font-size: 16px; line-height: 1.7; }
.class-register ul { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.class-register li::before { content: '↗'; margin-right: 14px; color: #65d3d7; }
.class-register > div > p.class-privacy { font-size: 11px; color: #b1c4d9; }
.class-form-wrap { padding: 32px; border: 1px solid #dfdad3; border-radius: 22px; background: #f8f6f2; color: #001b42; }
.class-form-wrap h3 { font-size: 30px; margin: 16px 0 24px; letter-spacing: -.025em; }
.class-form-wrap label:not(.class-checkbox) { display: grid; gap: 7px; margin-bottom: 18px; font-size: 11px; font-weight: 700; }
.class-form-wrap label > span:not(:only-child) { font-weight: 400; }
.class-form-wrap input:not([type=checkbox]), .class-form-wrap select, .class-form-wrap textarea { width: 100%; padding: 12px 14px; border: 1px solid #c9cbd1; border-radius: 9px; background: #fff; color: #001b42; font-size: 15px; font-weight: 400; min-width: 0; }
.class-form-wrap textarea { resize: vertical; }
.class-checkbox { display: flex; align-items: start; gap: 10px; font-size: 12px; line-height: 1.55; }
.class-checkbox input { flex-shrink: 0; width: 18px; height: 18px; accent-color: #02909d; }
.class-form-note { color: #4a5a72; font-size: 11px; line-height: 1.6; margin: 16px 0; }
.class-form-note a { text-decoration: underline; }
.class-form-wrap .class-button { width: 100%; }
.class-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.class-success[hidden] { display: none; }
.class-success__mark { color: #02909d; font-size: 72px; }
.class-success p { font-size: 15px; line-height: 1.7; }
.class-form-wrap .form-status { color: #a22b2b; font-size: 13px; margin-bottom: 0; }
.class-community { padding-block: 80px; background: #092c4c; border-block: 1px solid rgba(255,255,255,.12); }
.class-community__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.class-community__grid article { border-top: 1px solid rgba(255,255,255,.25); padding-top: 20px; }
.class-community__grid span { font-size: 9px; letter-spacing: .12em; color: #7bd6dc; }
.class-community__grid h3 { font-size: 20px; font-weight: 600; }
.class-community__grid p, .class-community__note { color: #c4d0df; font-size: 13px; line-height: 1.75; }
.class-community__note { margin: 34px 0 0; }
.class-faq { max-width: 820px; padding-block: 80px; }
.class-faq h2 { font-size: 37px; line-height: 1.1; letter-spacing: -.025em; margin: 24px 0 36px; }
.class-faq details { border-top: 1px solid rgba(255,255,255,.2); padding-block: 20px; }
.class-faq summary { font-size: 16px; cursor: pointer; }
.class-faq details p { color: #cad5e3; font-size: 14px; line-height: 1.75; }
.class-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: 32px; border-top: 1px solid rgba(255,255,255,.2); }
.class-footer > p { font-family: Georgia,serif; font-style: italic; font-size: 24px; }
.class-footer > a:not(.brand), .class-footer small { font-size: 11px; color: #c4d0df; }
@media(max-width: 900px) {
  .class-hero__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .class-hero h1 { font-size: 51px; }
  .class-context, .class-section-heading { grid-template-columns: 90px 1fr 1fr; gap: 24px; }
  .class-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .class-topic { padding: 24px; }
  .class-countdown { padding: 24px; }
  .class-community__grid { grid-template-columns: repeat(2,1fr); }
  .class-header__back { display: none; }
}
@media(max-width: 650px) {
  .class-shell { width: calc(100% - 40px); }
  .class-header { gap: 18px; min-height: 78px; }
  .class-button--small { padding: 12px 14px; gap: 12px; font-size: 10px; }
  .class-hero__grid { grid-template-columns: 1fr; padding-block: 44px 55px; gap: 38px; }
  .class-hero h1 { font-size: clamp(32px,10.1vw,57px); }
  .class-lede { font-size: 16px; }
  .class-hero__actions .class-button { width: 100%; }
  .class-hero__actions > span { width: 100%; text-align: center; }
  .class-hero__visual { max-width: 450px; width: 100%; margin-inline: auto; }
  .class-portrait > img { height: auto; aspect-ratio: 1; }
  .class-countdown strong { font-size: 35px; }
  .class-context { grid-template-columns: 1fr; gap: 24px; padding-block: 36px 52px; }
  .class-context h2 { font-size: 36px; }
  .class-section-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
  .class-curriculum, .class-community { padding-block: 54px; }
  .class-topic-grid { grid-template-columns: 1fr; gap: 16px; }
  .class-learning-scene { min-height: 320px; }
  .class-learning-scene__stage { min-height: 220px; }
  .class-topic { padding: 22px 24px 26px; }
  .class-topic__top { margin-bottom: 18px; }
  .class-topic h3 { font-size: 23px; }
  .class-topic p { font-size: 14px; }
  .class-register { grid-template-columns: 1fr; padding-block: 58px; gap: 30px; }
  .class-register h2 { font-size: 48px; }
  .class-form-wrap { padding: 24px; }
  .class-form-wrap input:not([type=checkbox]), .class-form-wrap select, .class-form-wrap textarea { font-size: 16px; }
  .class-community__grid { gap: 25px 20px; }
  .class-community__grid h3 { font-size: 19px; }
  .class-faq { padding-block: 54px; }
  .class-footer > p { margin: 0; }
  .class-footer small { width: 100%; }
}
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .class-button { transition: none; }
  .class-button:hover { transform: none; }
  .class-topic, .class-topic__icon i, .class-topic__icon b { transition: none; }
  .class-topic[data-seen] { animation: none; }
  .class-topic:hover { transform: none; }
  .class-topic:hover .class-topic__icon b { transform: rotateX(16deg) rotateY(-20deg) rotateZ(-8deg); }
  .class-topic:hover .class-topic__icon i { transform: translate(-6px,6px) rotateX(16deg) rotateY(-20deg) rotateZ(-8deg); }
}