:root {
  color-scheme: dark;
  --bg: #07080c;
  --bg-elevated: #0c0e14;
  --surface: #11141c;
  --surface-2: #161a24;
  --surface-3: #1c2130;
  --ink: #f5f7ff;
  --muted: #8991a5;
  --muted-2: #5e6679;
  --line: #252a36;
  --line-strong: #343b4c;
  --brand: #7c8cff;
  --brand-bright: #9ba6ff;
  --cyan: #45d8ff;
  --mint: #20d7b5;
  --coral: #ff6f91;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
  --radius-lg: 30px;
  --radius-md: 18px;
  --content: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 15% -10%, rgba(124, 140, 255, 0.13), transparent 31rem),
    radial-gradient(circle at 88% 12%, rgba(32, 215, 181, 0.08), transparent 28rem),
    linear-gradient(180deg, #08090e, #07080c 55%, #090a0f);
  color: var(--ink);
  font-family: Pretendard, "Noto Sans KR", Inter, system-ui, sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  content: "";
  pointer-events: none;
}
button, a, input { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid rgba(69, 216, 255, 0.38);
  outline-offset: 3px;
}
em { color: var(--brand-bright); font-style: normal; }

.boot-message {
  width: min(90%, 520px);
  margin: 18vh auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}

.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  border-bottom: 1px solid rgba(37, 42, 54, 0.78);
  background: rgba(7, 8, 12, 0.82);
  backdrop-filter: blur(20px) saturate(1.25);
}
.site-header__inner {
  width: min(calc(100% - 36px), var(--content));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand__mark {
  position: relative;
  width: 30px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #8997ff;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,140,255,.26), transparent 58%);
  box-shadow: 0 0 18px rgba(124, 140, 255, 0.42);
}
.brand__mark::before, .brand__mark::after {
  position: absolute;
  border: 1px solid rgba(69, 216, 255, .72);
  border-radius: 50%;
  content: "";
}
.brand__mark::before { inset: 5px; }
.brand__mark::after { inset: 11px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.brand__mark i { width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand), transparent); transform: rotate(-28deg); }
.brand__word { font-size: 1.02rem; font-weight: 950; letter-spacing: .16em; }
.brand small { color: var(--muted-2); font-size: .68rem; letter-spacing: .08em; }
.site-nav { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: .83rem; font-weight: 750; }
.site-nav a { text-decoration: none; transition: color .16s ease; }
.site-nav a:hover { color: var(--ink); }
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: #dfe4f4;
  font-variant-numeric: tabular-nums;
}
.live-pill::before { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,111,145,.12), 0 0 12px var(--coral); content: ""; animation: live-pulse 1.8s ease-in-out infinite; }

.main-shell { width: min(calc(100% - 36px), var(--content)); margin: 0 auto; padding: 64px 0 96px; }
.hero-heading { min-height: 390px; display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 52px; }
.hero-heading__copy { max-width: 850px; }
.eyebrow { margin: 0 0 14px; color: var(--brand-bright); font-size: .72rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 22px; height: 1px; margin: 0 9px 3px 0; background: currentColor; box-shadow: 0 0 8px currentColor; }
.hero-heading h1, .article-hero h1, .flow-hero h1, .error-page h1 { margin: 0; font-size: clamp(3rem, 7.5vw, 6.8rem); line-height: .96; letter-spacing: -.072em; }
.hero-heading__copy > p:last-child { max-width: 650px; margin: 25px 0 0; color: var(--muted); font-size: 1rem; }
.hero-status {
  position: relative;
  width: 190px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,140,255,.13), rgba(17,20,28,.7) 54%, transparent 55%);
  text-align: center;
}
.hero-status::before, .hero-status::after { position: absolute; inset: 12px; border: 1px dashed #333a4a; border-radius: 50%; content: ""; animation: orbit-spin 18s linear infinite; }
.hero-status::after { inset: -10px; border-color: rgba(69,216,255,.15); animation-direction: reverse; animation-duration: 25s; }
.hero-status__live { color: var(--mint); font-size: .62rem; font-weight: 900; letter-spacing: .14em; }
.hero-status__live i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.hero-status strong { display: block; margin: 5px 0 0; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-status small { color: var(--muted-2); font-size: .55rem; letter-spacing: .15em; }

.control-deck { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }
.group-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.group-tabs button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: .75rem; font-weight: 800; }
.group-tabs button[aria-pressed="true"] { border-color: #5967c8; background: rgba(124,140,255,.12); color: #c9cfff; }
.data-note { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: .7rem; }
.data-note span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; font-weight: 850; }
.data-note.is-live span { border-color: rgba(32,215,181,.26); background: rgba(32,215,181,.08); color: var(--mint); }
.data-note.is-fallback span { color: #ffb454; }
.data-note strong { color: #b8bfce; font-variant-numeric: tabular-nums; }

.channel-tabs { display: flex; gap: 8px; margin: 8px 0 16px; padding: 8px 0 4px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #303746 transparent; }
.channel-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: .76rem; font-weight: 800; transition: border-color .16s, background .16s, color .16s, transform .16s; }
.channel-chip > span { width: 6px; height: 6px; border-radius: 50%; background: var(--chip-accent); box-shadow: 0 0 8px var(--chip-accent); }
.channel-chip:hover { transform: translateY(-1px); color: var(--ink); }
.channel-chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--chip-accent), #fff 16%); background: color-mix(in srgb, var(--chip-accent) 14%, var(--surface)); color: #fff; box-shadow: inset 0 0 18px color-mix(in srgb, var(--chip-accent) 8%, transparent); }

.schedule-board { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(12,14,20,.92); box-shadow: var(--shadow); }
.schedule-board__bar { min-height: 58px; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); }
.schedule-board__brand, .schedule-board__meta { display: flex; align-items: center; gap: 11px; }
.schedule-board__brand { font-size: .74rem; font-weight: 900; letter-spacing: .13em; }
.schedule-board__meta { color: var(--muted-2); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,111,145,.09), 0 0 13px rgba(255,111,145,.72); }
.schedule-grid { display: grid; grid-template-columns: minmax(460px, 1.12fr) minmax(320px, .88fr); align-items: center; gap: clamp(28px, 5vw, 68px); padding: clamp(24px, 4.5vw, 56px); }
.wheel-column { min-width: 0; }
.schedule-wheel {
  --schedule-gradient: conic-gradient(from -90deg, #252a36 0 100%);
  position: relative;
  width: min(100%, 570px);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 1px solid #2d3341;
  border-radius: 50%;
  background: var(--schedule-gradient);
  box-shadow: inset 0 0 0 2px #0c0e14, inset 0 0 50px rgba(0,0,0,.32), 0 28px 80px rgba(0,0,0,.45), 0 0 60px color-mix(in srgb, var(--channel-accent) 12%, transparent);
}
.schedule-wheel::before { position: absolute; z-index: 1; inset: 22%; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #171b26, #0c0e14 72%); box-shadow: 0 0 42px rgba(0,0,0,.55); content: ""; }
.schedule-wheel::after { position: absolute; z-index: 3; inset: 48.6%; border: 2px solid #f2f5ff; border-radius: 50%; background: var(--channel-accent); box-shadow: 0 0 11px var(--channel-accent); content: ""; }
.wheel-ring { position: absolute; z-index: 2; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.wheel-ring--outer { inset: 6.5%; border-style: dashed; animation: orbit-spin 60s linear infinite; }
.wheel-ring--inner { inset: 27.5%; border-color: rgba(124,140,255,.14); }
.wheel-hand { position: absolute; z-index: 2; left: calc(50% - 1px); bottom: 50%; width: 2px; height: 43%; background: linear-gradient(to top, var(--channel-accent), #fff); box-shadow: 0 0 10px var(--channel-accent); transform: rotate(var(--hand-angle)); transform-origin: 50% 100%; transition: transform .2s ease; }
.wheel-center { position: absolute; z-index: 4; inset: 31%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; text-align: center; pointer-events: none; }
.wheel-center__status { color: var(--coral); font-size: clamp(.57rem, 1.3vw, .7rem); font-weight: 950; letter-spacing: .17em; }
.wheel-center strong { width: 100%; margin: 9px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.95rem, 2vw, 1.4rem); line-height: 1.25; letter-spacing: -.025em; }
.wheel-center small { color: var(--muted); font-size: clamp(.57rem, 1.2vw, .7rem); font-variant-numeric: tabular-nums; }
.wheel-label { position: absolute; z-index: 5; width: clamp(70px, 17%, 99px); padding: 6px 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(12,14,20,.86); color: #c8cede; cursor: pointer; transform: translate(-50%,-50%); box-shadow: 0 6px 17px rgba(0,0,0,.26); backdrop-filter: blur(8px); }
.wheel-label time { display: block; color: var(--muted-2); font-size: clamp(.49rem, 1.1vw, .6rem); font-variant-numeric: tabular-nums; }
.wheel-label span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.54rem, 1.3vw, .66rem); font-weight: 800; }
.wheel-label.is-current { border-color: var(--channel-accent); background: #f2f5ff; color: #0b0d13; box-shadow: 0 0 18px color-mix(in srgb, var(--channel-accent) 48%, transparent); }
.wheel-label.is-current time { color: #50576a; }
.time-explorer { width: min(100%, 540px); display: grid; gap: 10px; margin: 28px auto 0; }
.time-explorer__heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted-2); font-size: .65rem; font-weight: 850; letter-spacing: .12em; }
.time-explorer__heading > span:last-child { display: inline-flex; align-items: center; gap: 10px; }
.time-explorer__value { color: var(--ink); font-size: .79rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.time-range { width: 100%; accent-color: var(--brand); }
.reset-time { padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--brand-bright); cursor: pointer; font-size: .59rem; font-weight: 900; }

.now-column { min-width: 0; display: grid; gap: 14px; }
.panel-label { margin: 0 0 -4px; color: var(--muted-2); font-size: .62rem; font-weight: 900; letter-spacing: .16em; }
.now-card, .other-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.now-card { position: relative; overflow: hidden; padding: 27px; }
.now-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--channel-accent), transparent); content: ""; }
.now-card__kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: var(--brand-bright); font-size: .68rem; font-weight: 900; letter-spacing: .06em; }
.now-card__kicker span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.now-card h2 { margin: 0; font-size: clamp(1.55rem, 3.5vw, 2.35rem); line-height: 1.19; letter-spacing: -.045em; }
.now-card__meta { margin: 9px 0 19px; color: var(--muted); font-size: .82rem; }
.progress { height: 5px; overflow: hidden; border-radius: 999px; background: #252a36; }
.progress span { display: block; width: var(--progress,0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--channel-accent), #d8dcff); box-shadow: 0 0 11px var(--channel-accent); transition: width .2s; }
.flag-list { min-height: 25px; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 17px; }
.flag-list span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; color: #aab2c4; font-size: .59rem; font-weight: 750; }
.now-card__action { margin-top: 21px; }
.program-link { min-height: 50px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 11px 15px 11px 18px; border: 1px solid #4655aa; border-radius: 11px; background: linear-gradient(135deg, rgba(124,140,255,.22), rgba(69,216,255,.08)); color: #eef1ff; font-size: .77rem; font-weight: 900; text-decoration: none; transition: transform .16s, border-color .16s, box-shadow .16s; }
.program-link:hover { border-color: #7c8cff; box-shadow: 0 10px 24px rgba(56,70,172,.2); transform: translateY(-2px); }
.program-link i { color: var(--cyan); font-size: 1rem; font-style: normal; }
.unavailable-link { color: var(--muted-2); font-size: .72rem; }
.other-card { padding: 19px; }
.other-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.other-card h3 { margin: 0; font-size: .85rem; }
.other-card__heading span { color: var(--muted-2); font-size: .54rem; font-weight: 900; letter-spacing: .14em; }
.other-list { display: grid; gap: 5px; max-height: 288px; overflow: auto; scrollbar-width: thin; scrollbar-color: #303746 transparent; }
.other-row { display: grid; grid-template-columns: 63px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: var(--bg-elevated); color: #bdc4d3; font-size: .69rem; text-decoration: none; }
a.other-row:hover { border-color: var(--line-strong); color: #fff; }
.other-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; }
.other-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.other-row time { color: var(--muted-2); font-variant-numeric: tabular-nums; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 95px 0 24px; }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.06; letter-spacing: -.055em; }
.section-heading > p { max-width: 430px; margin: 0; color: var(--muted); font-size: .84rem; }
.live-program-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.live-program-card { position: relative; min-height: 185px; display: flex; flex-direction: column; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, var(--surface), #0d0f15); text-decoration: none; transition: transform .18s, border-color .18s; }
.live-program-card::before { position: absolute; top: -40px; right: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--card-accent); filter: blur(55px); opacity: .18; content: ""; }
.live-program-card:hover { border-color: color-mix(in srgb,var(--card-accent),#fff 12%); transform: translateY(-3px); }
.live-program-card__top { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .63rem; font-weight: 800; }
.live-program-card__top span { color: var(--card-accent); }
.live-program-card h3 { margin: 28px 0 7px; font-size: 1.14rem; line-height: 1.25; letter-spacing: -.035em; }
.live-program-card p { margin: 0; color: var(--muted-2); font-size: .66rem; }
.live-program-card__arrow { position: absolute; right: 17px; bottom: 14px; color: var(--card-accent); }

.system-panel { margin-top: 96px; padding: clamp(26px,5vw,52px); display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 60px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg, #10131c, #0b0d12); }
.system-panel h2 { margin: 0; font-size: clamp(1.8rem,4vw,3.15rem); line-height: 1.08; letter-spacing: -.05em; }
.system-flow { display: grid; gap: 9px; }
.system-flow > div { display: grid; grid-template-columns: 38px 1fr 1fr; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.015); }
.system-flow span { color: var(--brand-bright); font-size: .63rem; font-weight: 900; }
.system-flow strong { font-size: .8rem; }
.system-flow small { color: var(--muted); font-size: .66rem; }

.site-footer { border-top: 1px solid var(--line); background: #08090d; }
.site-footer__inner { width: min(calc(100% - 36px), var(--content)); margin: 0 auto; padding: 34px 0 44px; display: flex; align-items: end; justify-content: space-between; gap: 30px; color: var(--muted); }
.site-footer__inner > div { display: grid; gap: 3px; }
.site-footer strong { color: #fff; letter-spacing: .14em; }
.site-footer span { font-size: .68rem; }
.site-footer p { max-width: 590px; margin: 0; font-size: .65rem; text-align: right; }

/* Detail flow */
.article-shell, .flow-shell { width: min(calc(100% - 36px), 930px); margin: 0 auto; padding: 50px 0 100px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; color: var(--muted-2); font-size: .69rem; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs span::before { margin-right: 8px; color: #3f4657; content: "/"; }
.journey { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 0 24px; }
.journey__step { min-height: 49px; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted-2); font-size: .67rem; font-weight: 800; }
.journey__step > span { color: #555e74; font-size: .59rem; }
.journey__step.is-active { border-color: #5260b5; background: rgba(124,140,255,.1); color: #dfe3ff; }
.journey__step.is-active > span { color: var(--brand-bright); }
.journey__step.is-complete { color: var(--mint); }
.journey__step.is-complete > span { color: var(--mint); }
.article-hero, .flow-hero { position: relative; overflow: hidden; padding: clamp(30px,6vw,66px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, #151823, #0c0e14); box-shadow: var(--shadow); }
.article-hero::before, .flow-hero::before { position: absolute; top: -120px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: var(--article-accent,var(--brand)); filter: blur(125px); opacity: .17; content: ""; }
.article-hero::after, .flow-hero::after { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg,var(--article-accent,var(--brand)),transparent 72%); content: ""; }
.article-hero h1 { position: relative; font-size: clamp(2.6rem,7vw,5.9rem); }
.article-hero__meta { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.article-hero__meta span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.16); color: var(--muted); font-size: .65rem; }
.article-lead { position: relative; max-width: 670px; margin: 24px 0 0; color: #b7bece; font-size: 1rem; }
.article-content { padding: 10px clamp(4px,4vw,44px) 0; }
.article-section { margin-top: 64px; }
.article-index { margin: 0 0 9px !important; color: var(--brand-bright) !important; font-size: .61rem !important; font-weight: 900; letter-spacing: .16em; }
.article-section h2 { margin: 0 0 18px; font-size: clamp(1.5rem,3.5vw,2.2rem); letter-spacing: -.04em; }
.article-section p { margin: 0 0 17px; color: #a9b0c0; font-size: .92rem; line-height: 1.9; }
.fact-list { display: grid; gap: 7px; margin: 25px 0 0; padding: 0; list-style: none; }
.fact-list li { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.fact-list span { color: var(--muted); font-size: .7rem; }
.fact-list strong { font-size: .75rem; text-align: right; }
.source-link { display: inline-flex; gap: 7px; align-items: center; color: var(--cyan); font-size: .75rem; font-weight: 850; text-decoration: none; }
.article-cta, .flow-cta { margin-top: 74px; padding: clamp(28px,5vw,48px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg,#12151e,#0b0d12); text-align: center; }
.article-cta h2, .flow-cta h2 { margin: 0; font-size: clamp(1.6rem,4vw,2.65rem); letter-spacing: -.045em; }
.article-cta > p:not(.eyebrow), .flow-cta > p:not(.eyebrow) { max-width: 590px; margin: 10px auto 0; color: var(--muted); font-size: .81rem; }
.flow-hero { text-align: center; }
.flow-hero h1 { position: relative; font-size: clamp(2.4rem,6.5vw,5.2rem); }
.flow-hero > p:last-child { position: relative; max-width: 670px; margin: 22px auto 0; color: var(--muted); font-size: .9rem; }
.guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 20px; }
.guide-card { min-height: 205px; padding: 23px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.guide-card > span { color: var(--brand-bright); font-size: .62rem; font-weight: 900; }
.guide-card h2 { margin: 34px 0 8px; font-size: 1.12rem; }
.guide-card p { margin: 0; color: var(--muted); font-size: .72rem; }
.provider-panel { margin-top: 10px; padding: 21px 23px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.provider-panel p, .ready-card > p { margin: 0 0 4px; color: var(--muted-2); font-size: .57rem; font-weight: 900; letter-spacing: .15em; }
.provider-panel h2 { margin: 0; font-size: 1.15rem; }
.provider-badge { padding: 6px 9px; border: 1px solid rgba(32,215,181,.25); border-radius: 999px; background: rgba(32,215,181,.08); color: var(--mint); font-size: .62rem; font-weight: 900; }
.ready-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 20px; }
.ready-card { padding: 25px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.ready-card h2 { min-height: 58px; margin: 0 0 20px; font-size: 1.25rem; line-height: 1.25; }
.ready-card dl { display: grid; gap: 7px; margin: 0; }
.ready-card dl > div { display: flex; justify-content: space-between; gap: 15px; padding-top: 9px; border-top: 1px solid var(--line); font-size: .68rem; }
.ready-card dt { color: var(--muted); }
.ready-card dd { margin: 0; font-weight: 800; text-align: right; }
.rocket-cta { overflow: visible; }
.download-ready-stage { position: relative; width: min(100%,420px); min-height: 118px; margin: 24px auto -8px; }
.error-page { width: min(calc(100% - 36px),780px); margin: 0 auto; padding: 110px 0; text-align: center; }
.error-page h1 { font-size: clamp(2.2rem,6vw,4.8rem); }
.error-page > p:not(.eyebrow) { margin: 20px auto 28px; color: var(--muted); }

/* Webfile (2) electric button */
.blog-download-button {
  position: relative;
  display: grid;
  width: min(100%,420px);
  min-height: 76px;
  margin: 27px auto 0;
  grid-template-columns: 47px 1fr 25px;
  align-items: center;
  gap: 14px;
  padding: 12px 20px 12px 14px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: #06122f;
  box-shadow: 0 0 12px rgba(48,110,255,.48),0 0 30px rgba(69,102,255,.34),0 14px 30px rgba(3,17,59,.28);
  cursor: pointer;
  overflow: visible;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .2s,transform .2s,filter .2s;
  touch-action: manipulation;
  user-select: none;
}
.blog-download-button *, .download-final-layer__action, .download-final-layer__action * { user-select: none; -webkit-user-drag: none; }
.blog-download-button::after, .download-final-layer__action::after { position: absolute; inset: 2px; z-index: 0; border: 1px solid rgba(121,223,255,.12); border-radius: inherit; background: radial-gradient(circle at 18% 0%,rgba(48,119,255,.4),transparent 38%),linear-gradient(135deg,#102c73 0%,#091d51 54%,#101743 100%); content: ""; pointer-events: none; }
.blog-download-button:hover { filter: saturate(1.18) brightness(1.14); box-shadow: 0 0 15px rgba(59,220,255,.85),0 0 34px rgba(84,103,255,.68),0 18px 34px rgba(3,17,59,.34); transform: translateY(-2px); }
.blog-download-button > :not(.download-charged-electric), .download-final-layer__action > * { position: relative; z-index: 3; }
.blog-download-button__icon { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid rgba(255,255,255,.37); border-radius: 50%; background: radial-gradient(circle at 35% 28%,#d9fbff,#6ed9ff 36%,#2367db 72%); box-shadow: 0 0 14px rgba(140,239,255,.75); color: #04133f; font-size: 23px; line-height: 1; animation: download-icon-bounce 1.25s ease-in-out infinite; }
.blog-download-button strong, .blog-download-button small { display: block; }
.blog-download-button strong { font-size: 17px; letter-spacing: -.025em; }
.blog-download-button small { margin-top: 3px; color: rgba(255,255,255,.74); font-size: 11px; font-weight: 500; }
.blog-download-button__arrow { font-size: 24px; font-weight: 300; transition: transform .2s; }
.blog-download-button:hover .blog-download-button__arrow { transform: translateX(5px); }
.blog-download-button--charged { isolation: isolate; background: #07132f; box-shadow: 0 0 9px rgba(94,232,255,.68),0 0 22px rgba(114,119,255,.48),0 0 32px rgba(255,112,83,.16),0 16px 34px rgba(3,17,59,.34); }
.blog-download-button--charged::after { border-color: rgba(210,249,255,.34); background: radial-gradient(circle at 8% 58%,rgba(255,236,131,.28),transparent 20%),radial-gradient(circle at 87% 36%,rgba(255,80,123,.28),transparent 25%),linear-gradient(135deg,#102c73 0%,#132a79 52%,#271451 100%); }
.download-charged-electric { position: absolute; inset: -45px -48px; z-index: 2; display: block; width: calc(100% + 96px); height: calc(100% + 90px); overflow: visible; pointer-events: none; }
.download-charged-electric polyline { fill: none; stroke: #d9fbff; stroke-width: 4.4; stroke-linecap: butt; stroke-linejoin: miter; mix-blend-mode: screen; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px currentColor); }
.download-charged-electric polyline:nth-child(2) { stroke:#70cfff; }.download-charged-electric polyline:nth-child(3){stroke:#ac8bff}.download-charged-electric polyline:nth-child(4){stroke:#58eeff}.download-charged-electric polyline:nth-child(5){stroke:#fff1a6}.download-charged-electric polyline:nth-child(6){stroke:#f27dff}.download-charged-electric polyline:nth-child(7){stroke:#79a5ff}.download-charged-electric polyline:nth-child(8){stroke:#c4f8ff}
.download-charged-electric [data-current-fork] { fill:none; stroke:#f7ffff; stroke-linecap:square; stroke-linejoin:miter; mix-blend-mode:screen; filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px #6cecff) drop-shadow(0 0 17px #9876ff); }

/* Webfile (2) final dialog and rocket */
.download-final-layer { width:min(520px,calc(100vw - 32px)); margin:auto; padding:0; overflow:visible; border:1px solid #303748; border-radius:16px; box-shadow:0 28px 90px rgba(0,0,0,.68); background:#0f121a; color:var(--ink); }
.download-final-layer::backdrop { background:rgba(5,8,18,.76); backdrop-filter:blur(7px); }
.download-final-layer__panel { position:relative; overflow:visible; padding:39px 36px 34px; text-align:center; }
.download-final-layer__close { position:absolute; top:13px; right:14px; z-index:20; display:grid; width:32px; height:32px; place-items:center; border:1px solid #303748; border-radius:50%; background:#171b26; color:#9ea7ba; cursor:pointer; font-size:24px; line-height:1; }
.destination-orb { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 17px; border:1px solid #6673d7; border-radius:50%; background:radial-gradient(circle,rgba(124,140,255,.28),#101522 70%); box-shadow:0 0 28px rgba(124,140,255,.36); }
.destination-orb span { font-size:.65rem; font-weight:950; letter-spacing:.14em; }
.download-final-layer__eyebrow { margin:0; color:#6ea8ff; font-size:10px; font-weight:900; letter-spacing:.16em; }
.download-final-layer h2 { margin:7px 0 0; color:#f2f5ff; font-size:26px; letter-spacing:-.045em; }
.download-final-layer__copy { margin:12px 0 24px; color:#8f98aa; font-size:13px; }
.download-final-layer__ad { height:104px; display:grid; place-content:center; gap:5px; border:1px solid #272d3a; background:#0b0d13; color:#657086; }
.download-final-layer__ad span { font-size:9px; font-weight:900; letter-spacing:.16em; }.download-final-layer__ad strong{color:#aab2c4;font-size:12px}
.download-liquid-stage { position:relative; height:88px; margin-top:20px; overflow:visible; isolation:isolate; }
.download-shard-field { position:absolute; z-index:8; inset:0; display:block; overflow:visible; pointer-events:none; }
.download-button-shard { position:absolute; top:var(--shard-top); left:var(--shard-left); display:block; width:var(--shard-size); height:var(--shard-size); border:1px solid rgba(233,252,255,.88); border-radius:50%; background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.98) 0 8%,rgba(255,255,255,.35) 10% 20%,transparent 23%),radial-gradient(circle at 50% 62%,hsla(var(--bubble-hue),88%,70%,.48),rgba(83,198,255,.18) 56%,rgba(255,255,255,.06) 72%); box-shadow:inset -3px -4px 8px rgba(70,150,255,.14),inset 2px 2px 5px rgba(255,255,255,.78),0 0 9px rgba(151,227,255,.64),0 0 19px hsla(var(--bubble-hue),88%,74%,.42); opacity:0; transform:translate(-50%,-50%) scale(.35); }
.download-liquid-stage.is-shattering .download-button-shard { animation:button-shard-burst 2.35s cubic-bezier(.12,.58,.2,1) var(--shard-delay) forwards; }
.download-final-layer__action { position:absolute; top:0; left:50%; z-index:3; width:100%; height:68px; display:grid; grid-template-columns:40px 1fr 20px; align-items:center; gap:12px; padding:10px 18px 10px 12px; overflow:hidden; border-radius:14px; background:linear-gradient(135deg,#1686ff,#4169f5 58%,#2342c5); box-shadow:0 13px 27px rgba(40,91,232,.3); color:#fff; font-size:16px; text-align:left; text-decoration:none; transform:translateX(-50%); transition:transform .16s,filter .16s,box-shadow .16s; }
.download-final-layer__action:hover { filter:saturate(1.14) brightness(1.1); box-shadow:0 17px 32px rgba(40,91,232,.4); transform:translate(-50%,-1px); }
.download-final-layer__action::after { border:1px solid rgba(255,255,255,.18); background:linear-gradient(135deg,#1686ff,#4169f5 58%,#2342c5); }
.download-final-layer__action.is-launching { overflow:visible; color:transparent; pointer-events:none; transform-origin:center; animation:rocket-button-fold .58s cubic-bezier(.22,.7,.16,1) forwards; }
.download-final-layer__action.is-launching::after { animation:rocket-button-surface .58s ease-out forwards; }
.download-final-layer__action.is-launching > * { animation:rocket-content-fold .18s ease-out forwards; }
.download-final-layer__action > span { display:grid; width:40px; height:40px; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:radial-gradient(circle at 35% 28%,#d9fbff,#6ed9ff 36%,#2367db 72%); box-shadow:0 0 12px rgba(140,239,255,.72); color:#04133f; font-size:22px; }
.download-final-layer__action i { font-size:23px; font-style:normal; transition:transform .2s; }.download-final-layer__action:hover i{transform:translateX(5px)}
.download-rocket-field { --rocket-flight-path:path("M 0 0 L 0 0"); --rocket-emerge-stop:4%; --rocket-approach-stop:8%; --rocket-orbit-stop:68%; position:fixed; inset:0; z-index:7; display:block; overflow:visible; pointer-events:none; }
.rocket-orbit { position:absolute; z-index:5; top:0; left:0; width:0; height:0; opacity:0; offset-anchor:50% 50%; offset-distance:0%; offset-path:var(--rocket-flight-path); offset-rotate:auto 90deg; }
.rocket-craft { position:absolute; top:50%; left:50%; display:block; width:46px; height:70px; border:2px solid rgba(30,51,92,.82); border-radius:48% 48% 35% 35% / 62% 62% 38% 38%; background:linear-gradient(90deg,rgba(18,34,69,.18),transparent 24% 68%,rgba(18,34,69,.22)),linear-gradient(180deg,#fff 0%,#f3f8ff 56%,#c8d6ea 100%); box-shadow:inset 6px 0 7px rgba(255,255,255,.72),inset -6px 0 7px rgba(49,72,112,.16),0 0 8px rgba(255,255,255,.95),0 0 18px rgba(79,211,255,.72); opacity:0; transform:translate(-50%,-50%) scale(.08); }
.rocket-craft::before { position:absolute; top:-20px; left:50%; width:34px; height:25px; background:linear-gradient(135deg,#ff6b7f,#f12f55 58%,#b51d4d); clip-path:polygon(50% 0,100% 100%,0 100%); content:""; filter:drop-shadow(0 -2px 3px rgba(255,89,126,.46)); transform:translateX(-50%); }
.rocket-craft::after { position:absolute; bottom:1px; left:50%; width:70px; height:25px; background:linear-gradient(180deg,#ff6c7d,#e72f53 65%,#a71a47); clip-path:polygon(0 100%,13% 22%,35% 45%,65% 45%,87% 22%,100% 100%,68% 75%,32% 75%); content:""; transform:translateX(-50%); }
.rocket-window { position:absolute; top:18px; left:50%; z-index:2; width:21px; height:21px; border:4px solid #ff6578; border-radius:50%; background:radial-gradient(circle at 34% 29%,#bff9ff 0 10%,#43b9e8 32%,#173461 68%,#09172e 100%); box-shadow:0 0 0 2px rgba(19,42,78,.88),inset 2px 2px 3px rgba(255,255,255,.5); transform:translateX(-50%); }
.rocket-flame { position:absolute; bottom:-31px; left:50%; z-index:-1; width:18px; height:34px; border-radius:50% 50% 56% 44% / 18% 18% 82% 82%; background:radial-gradient(ellipse at 50% 8%,#fff 0 8%,#fff36c 22%,#ff9c25 46%,#ff3e70 68%,#9350ff 82%,transparent 84%); filter:drop-shadow(0 0 7px #fff36c) drop-shadow(0 0 13px #ff4f92); transform:translateX(-50%); transform-origin:50% 0; }
.rocket-flight-trail { position:absolute; bottom:-153px; left:50%; z-index:-2; width:20px; height:112px; background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(212,248,255,.82) 18%,rgba(166,205,219,.48) 48%,rgba(130,145,163,.2) 72%,transparent); clip-path:polygon(28% 0,72% 0,100% 100%,58% 84%,39% 100%,0 87%); filter:blur(2px) drop-shadow(0 0 7px rgba(181,237,255,.58)); opacity:.64; transform:translateX(-50%); transform-origin:50% 0; }
.download-liquid-stage.is-launching .rocket-orbit { animation:rocket-smooth-loop-and-away 2.2s linear forwards; }
.download-liquid-stage.is-launching .rocket-craft { animation:rocket-craft-form 2.2s cubic-bezier(.18,.72,.22,1) forwards; }
.download-liquid-stage.is-launching .rocket-flame { animation:rocket-flame-pulse .12s ease-in-out infinite alternate; }
.download-liquid-stage.is-launching .rocket-flight-trail { animation:rocket-flight-trail-pulse .2s ease-in-out infinite alternate; }
.download-final-layer.is-rocketing::backdrop { animation:rocket-backdrop-sky 2.15s ease-in-out both; }

@keyframes live-pulse { 50%{opacity:.5;box-shadow:0 0 0 7px rgba(255,111,145,0),0 0 5px var(--coral)} }
@keyframes orbit-spin { to{transform:rotate(360deg)} }
@keyframes download-icon-bounce { 50%{transform:translateY(3px)} }
@keyframes rocket-content-fold { to{opacity:0;filter:blur(5px);transform:scale(.12,.8)} }
@keyframes button-shard-burst { 0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}10%{opacity:.94;transform:translate(-50%,-50%) scale(.76) rotate(18deg)}52%{opacity:.88;transform:translate(calc(-50% + var(--shard-x) * .52),calc(-50% + var(--shard-y) * .52)) scale(1.08) rotate(calc(var(--shard-rotate) * .52))}80%{opacity:.64;transform:translate(calc(-50% + var(--shard-x)),calc(-50% + var(--shard-y))) scale(.92) rotate(var(--shard-rotate))}100%{opacity:0;filter:blur(1.5px);transform:translate(calc(-50% + var(--shard-x) * 1.14),calc(-50% + var(--shard-y) * 1.14 - 34px)) scale(.48) rotate(calc(var(--shard-rotate) * 1.16))} }
@keyframes rocket-button-fold { 0%{border-radius:14px;opacity:1;transform:translateX(-50%) scale(1)}28%{border-radius:21px;opacity:1;filter:brightness(1.22);transform:translateX(-50%) scale(.8,.9)}58%{border-radius:29px;opacity:.98;filter:brightness(1.65);transform:translateX(-50%) scale(.36,.84)}100%{border-radius:50%;opacity:0;filter:blur(6px) brightness(2.25);transform:translateX(-50%) scale(.04,.68)} }
@keyframes rocket-button-surface { 58%{background:linear-gradient(135deg,#4fd8ff,#6b7aff 48%,#ff5cc7);filter:brightness(1.55)}100%{opacity:0;filter:blur(6px) brightness(2)} }
@keyframes rocket-smooth-loop-and-away { 0%{opacity:0;offset-distance:0%}8%{opacity:1;offset-distance:var(--rocket-emerge-stop)}12%{opacity:1;offset-distance:var(--rocket-approach-stop)}72%{opacity:1;offset-distance:var(--rocket-orbit-stop)}100%{opacity:0;offset-distance:100%} }
@keyframes rocket-craft-form { 0%{opacity:0;filter:blur(3px) brightness(1.8);transform:translate(-50%,-50%) scale(.08)}7%{opacity:1;filter:none;transform:translate(-50%,-50%) scale(.72)}12%,74%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.86;filter:blur(.8px) brightness(1.32);transform:translate(-50%,-50%) scale(.84)} }
@keyframes rocket-flame-pulse { from{transform:translateX(-50%) scale(.82,.76) skewX(-2deg)}to{transform:translateX(-50%) scale(1.12,1.2) skewX(3deg)} }
@keyframes rocket-flight-trail-pulse { from{opacity:.54;transform:translateX(-50%) scale(.72,.86)}to{opacity:.76;transform:translateX(-50%) scale(1.08,1.13)} }
@keyframes rocket-backdrop-sky { 0%,100%{background:rgba(11,22,43,.68);backdrop-filter:blur(4px)}34%{background:rgba(17,27,68,.76);backdrop-filter:blur(5px) saturate(1.18)}72%{background:rgba(34,22,79,.74);backdrop-filter:blur(4px) saturate(1.26)} }

@media (max-width: 980px) {
  .hero-heading { min-height: 340px; grid-template-columns: 1fr 150px; }
  .hero-status { width: 145px; }
  .schedule-grid { grid-template-columns: 1fr; }
  .now-column { grid-template-columns: 1fr 1fr; align-items: start; }
  .panel-label { grid-column: 1/-1; }
  .live-program-grid { grid-template-columns: repeat(3,1fr); }
  .system-panel { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 720px) {
  .site-header__inner { min-height: 64px; }
  .brand small, .site-nav > a:not(.live-pill) { display: none; }
  .main-shell { padding-top: 32px; }
  .hero-heading { min-height: 420px; grid-template-columns: 1fr; gap: 35px; }
  .hero-status { width: 128px; }
  .control-deck { align-items: flex-start; flex-direction: column; }
  .schedule-grid { padding: 18px; }
  .now-column { grid-template-columns: 1fr; }
  .panel-label { grid-column: auto; }
  .live-program-grid { grid-template-columns: repeat(2,1fr); }
  .guide-grid { grid-template-columns: 1fr; }
  .ready-summary { grid-template-columns: 1fr; }
  .site-footer__inner { align-items: start; flex-direction: column; }
  .site-footer p { text-align: left; }
  .journey__step { padding: 9px; font-size: .59rem; }
  .article-hero, .flow-hero { border-radius: 22px; }
  .download-final-layer__panel { padding: 38px 20px 28px; }
}
@media (max-width: 470px) {
  .hero-heading h1 { font-size: clamp(2.8rem,17vw,4.6rem); }
  .schedule-board__meta span:last-child { display:none; }
  .wheel-label { width: 72px; }
  .wheel-label span { font-size: .54rem; }
  .live-program-grid { grid-template-columns: 1fr; }
  .live-program-card { min-height: 160px; }
  .system-flow > div { grid-template-columns: 28px 1fr; }
  .system-flow small { grid-column: 2; }
  .blog-download-button { grid-template-columns: 43px 1fr 20px; padding-right: 15px; }
  .download-charged-electric { inset-inline: -25px; width: calc(100% + 50px); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}