:root {
  color-scheme: dark;
  font: 16px/1.55 system-ui, sans-serif;
  background: #15161a;
  color: #f4f2ed;
  --panel: #202128;
  --border: #393a43;
  --accent: #ffd185;
  --muted: #b7b7c2;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: .2em; }
main, .top { width: min(100% - 2rem, 980px); margin: auto; }
.top { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.top > a:last-child { margin-left: auto; }
.wordmark { color: #fff; text-decoration: none; font-weight: 850; letter-spacing: .05em; }
.top span, .muted, small { color: var(--muted); }
.hero { padding: 2.8rem 0 2rem; }
h1 { margin: .15rem 0 1rem; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.08; }
h2 { margin: 0 0 .6rem; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; font-weight: 750; }
.card, .facts > div { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.card { padding: clamp(1rem, 3vw, 1.5rem); margin-bottom: 1rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.facts > div { padding: 1rem; }
.facts strong { display: block; font-size: 1.7rem; }
button, .primary { display: inline-block; border: 1px solid var(--border); background: #282933; border-radius: 8px; padding: .55rem .8rem; font: inherit; color: inherit; cursor: pointer; }
.primary { color: #201504; background: var(--accent); border-color: var(--accent); font-weight: 750; text-decoration: none; }
button:hover, .primary:hover { filter: brightness(1.13); }
:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.links, .lessons { padding-left: 1.5rem; }
.links li, .lessons li { padding: .25rem 0; }
.lessons { columns: 3 145px; }
.screen { display: grid; grid-template-columns: minmax(0, 2fr) minmax(170px, 1fr); gap: 1rem; align-items: start; }
video { display: block; width: 100%; max-height: 64vh; background: #090a0c; border-radius: 8px; }
.screen aside { border: 1px solid var(--border); border-radius: 8px; padding: .75rem; }
.screen aside h3 { margin: 0; }
#stage-cues, .plan { padding: 0; list-style: none; }
#stage-cues { margin: .4rem 0 0; max-height: 22rem; overflow: auto; }
#stage-cues li { padding: .3rem 0; overflow-wrap: anywhere; }
.offer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid var(--border); margin-top: 1rem; padding: 1rem; border-radius: 8px; }
.offer[hidden] { display: none; }
.offer small { display: block; }
.plan li { display: grid; grid-template-columns: 6.5rem 1fr minmax(6rem, 30%); gap: .65rem; border-top: 1px solid var(--border); padding: .45rem 0; }
.plan time, .plan span { color: var(--muted); }
.lesson { margin-top: 1.5rem; }
.lesson section { margin-top: 1.5rem; }
@media (max-width: 630px) {
  .screen { grid-template-columns: 1fr; }
  .offer { align-items: flex-start; flex-direction: column; }
  .plan li { grid-template-columns: 5.25rem 1fr; }
  .plan span { grid-column: 2; }
}

.webinar-room {
  --gold: #ffe164;
  margin-bottom: 1rem;
  padding: clamp(.85rem, 3vw, 1.65rem);
  background: radial-gradient(ellipse at 100% 0, #3b3020 0, transparent 48%), #18191d;
  border: 1px solid #454038;
  border-radius: 24px;
}
.room-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.webinar-room .eyebrow { color: var(--gold); margin: 0 0 .45rem; }
.room-heading h2 { font-size: clamp(1.4rem, 3.3vw, 2.1rem); line-height: 1.16; margin: 0; }
.room-clock { background: #111114; border: 1px solid #574b32; border-radius: 14px; padding: .6rem 1rem; }
.room-clock span { display: block; font-size: .75rem; color: var(--muted); }
.room-clock time { display: block; font-weight: 800; font-size: 1.35rem; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.room-player { overflow: hidden; border: 1px solid #39383b; border-radius: 15px; background: #090a0c; }
.room-player video { aspect-ratio: 16 / 9; object-fit: contain; border-radius: 0; }
.webinar-room .screen {
  grid-template-columns: minmax(0, 3fr) minmax(170px, 1fr);
  grid-template-areas: "video chat" "offer offer";
}
.room-player { grid-area: video; }
.webinar-room .screen aside { grid-area: chat; }
.webinar-room .room-offer { grid-area: offer; margin-top: 0; }
.room-wait { grid-column: 1 / -1; }
.webinar-room .screen:not(:has(.room-offer:not([hidden]))) { grid-template-rows: auto 0; row-gap: 0; }
.webinar-room aside { background: #111114; border-radius: 15px; }
.room-wait { background: #111114; border: 1px dashed #574b32; border-radius: 15px; text-align: center; padding: 2rem 1rem; }
.room-wait h3, .room-offer h3 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.room-wait p:last-child, .room-offer p:last-child { margin: .35rem 0 0; color: #d2cbbb; }
.room-offer { background: linear-gradient(135deg, #332918, #211e18); border: 1px solid #756037; border-radius: 16px; padding: clamp(1rem, 3vw, 1.4rem); }
.offer-checkout { width: min(100%, 18rem); }
.offer-checkout small { text-align: center; margin-top: .4rem; }
.offer-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: .65rem; margin-bottom: .45rem; }
.offer-prices del { color: #c0b8a9; }
.offer-prices strong { font-size: 1.65rem; color: #fff3c9; }
.gold-cta { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: .7rem; min-height: 3rem; border: 1px solid #ffea95; border-radius: 11px; text-align: left; background: linear-gradient(110deg, #ffbf35 0%, #ffe66c 38%, #fff4b2 50%, #ffe66c 62%, #ffbf35 100%); background-size: 240% 100%; box-shadow: 0 5px 22px #ffc83e38; animation: gold-sweep 5s ease-in-out infinite; }
@keyframes gold-sweep { 0%, 18% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.stage-controls summary { cursor: pointer; color: var(--muted); }
.stage-controls .actions { margin-top: .8rem; }
@media (max-width: 630px), (max-width: 1024px) and (orientation: portrait) {
  .webinar-room .screen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "video" "offer" "chat";
  }
  .webinar-room .screen:not(:has(.room-offer:not([hidden]))) {
    grid-template-areas: "video" "chat";
    grid-template-rows: auto auto;
    row-gap: 1rem;
  }
  .room-offer .offer-checkout { width: 100%; }
  .webinar-room #stage-cues { max-height: 10rem; }
}
@media (prefers-reduced-motion: reduce) { .gold-cta { animation: none; } }

.room-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.room-offer h3 { line-height: 1.15; }
.offer-benefits { list-style: none; padding: 0; margin: .85rem 0 0; display: grid; gap: .35rem; color: #e0d8c8; }
.offer-benefits li { display: grid; grid-template-columns: .75rem 1fr; gap: .35rem; }
.offer-benefits li::before { content: "•"; color: var(--gold); }
.room-offer .offer-checkout { width: 100%; }
.offer-clock { background: #15130e; border: 1px solid #65532f; border-radius: 10px; padding: .45rem .7rem; margin-bottom: .5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .15rem .6rem; }
.offer-clock[hidden] { display: none; }
.offer-clock span { font-size: .77rem; color: #e0d8c8; }
.offer-clock time { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
@media (max-width: 630px) {
  .room-offer { grid-template-columns: minmax(0, 1fr); }
  .room-offer h3 { font-size: clamp(1.3rem, 5vw, 1.7rem); }
}

.bunny-webinar {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 64vh;
  border: 0;
  border-radius: 8px;
  background: #090a0c;
}
.room-player .bunny-webinar { border-radius: 0; }