.site-home { --topic-color: #ff6574; --text-dim: #acb4c2; --text-faint: #a0a9b7; --border: #29313b; --hover: #ffffff08; }
.site-home .top { background: #090d15d9; border-bottom-color: color-mix(in srgb, var(--topic-color) 32%, #26303e); }
.site-home .top .nav-station { display: grid; grid-template-columns: minmax(0, 1fr) 156px minmax(0, 1fr); height: 148px; gap: 32px; }
.nav-context { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.nav-position { font: 11px var(--mono); color: var(--topic-color); }
.nav-current { font: 27px Bahnschrift, 'Segoe UI Variable Display', sans-serif; color: var(--text-bright); line-height: 1.3; }
.nav-context > a { font-size: 12px; margin-top: 9px; color: var(--text); }
.nav-context > a:hover { color: var(--text-bright); }
.nav-rotor { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 156px; height: 144px; padding: 4px; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rotor-images { display: block; position: relative; width: 108px; height: 108px; transform: scale(0.91); transition: transform 360ms ease; }
body[data-topic="overview"] .rotor-images { transform: scale(1.04); }
.rotor-mark { position: absolute; inset: 0; width: 108px; height: 108px; object-fit: contain; transform-origin: center; will-change: transform, opacity; }
.rotor-previous { opacity: 0; }
.rotor-word { width: 144px; height: auto; max-height: 20px; object-fit: contain; }
.rotor-index { position: absolute; top: 4px; left: calc(50% - 2px); width: 4px; height: 7px; background: var(--topic-color); border-radius: 1px; box-shadow: 0 0 13px color-mix(in srgb, var(--topic-color) 45%, transparent); }
.nav-rotor:hover .rotor-images { filter: brightness(1.12); }
.nav-rotor:active .rotor-images { filter: brightness(1.25); }
.site-home .top .nav-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 22px; width: min(100%, 330px); justify-self: end; font-size: 13px; letter-spacing: 0; margin: 0; padding: 0; min-width: 0; overflow: visible; }
.nav-index [data-finish="redline"] { --stop-color: #ff6574; }
.nav-index [data-finish="arctic"] { --stop-color: #69dae9; }
.nav-index [data-finish="ultraviolet"] { --stop-color: #b69af3; }
.nav-index [data-finish="emerald"] { --stop-color: #72dea7; }
.nav-index [data-finish="ion"] { --stop-color: #87bfff; }
.nav-index [data-finish="gold"] { --stop-color: #f0c36d; }
.site-home .nav-index a { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 4px 0; color: #abb3c0; border-bottom: 1px solid transparent; white-space: nowrap; }
.site-home .nav-index a i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--stop-color); background: transparent; flex: 0 0 auto; }
.site-home .nav-index a.here { color: var(--text-bright); border-bottom-color: color-mix(in srgb, var(--stop-color) 50%, transparent); }
.site-home .nav-index a.here i { background: var(--stop-color); box-shadow: 0 0 10px color-mix(in srgb, var(--stop-color) 45%, transparent); }
.site-home .nav-index a:hover { color: var(--stop-color, var(--text-bright)); }
.site-home .nav-index .nav-mobile-download { display: none; }
.topic-transition { position: fixed; left: 0; width: 100%; z-index: 30; pointer-events: none; }
.topic-transition[hidden] { display: none; }
.site-home main { overflow-x: clip; }
.site-home h1, .site-home h2, .site-home h3 { font-family: Bahnschrift, 'Segoe UI Variable Display', sans-serif; letter-spacing: 0; }
.site-home .hero-copy h1 { font-size: 62px; line-height: 1.05; }
.site-home .hero-copy .lede { font-size: 19px; line-height: 1.55; max-width: 65ch; }
.site-home .topic > section { padding: 78px 0; }
.site-home .topic > section + section { border-top: 1px solid #ffffff0c; }
.site-home .section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 40px; margin-bottom: 26px; }
.site-home .section-heading h2 { font-size: 38px; margin: 0; color: var(--text-bright); line-height: 1.15; }
.site-home .section-heading > p { max-width: 34ch; font-size: 16px; margin: 0 0 4px auto; color: #aeb9c7; }
.site-home .section-heading .kicker { margin: 0 0 10px; color: var(--topic-color); }
.hydro-fallback { min-height: 480px; color: var(--dim); display: grid; place-content: center; }
.site-home .pro { border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.site-home .pro::before, .site-home .pro::after { display: none; }
.site-home .pro-head { padding: 0 0 26px; border-bottom: 1px solid #f0c36d44; align-items: flex-start; }
.site-home .pro-head h2 { font-size: 43px; line-height: 1.08; }
.site-home .pro-body { padding: 0; }
.site-home .pro-lede { max-width: 72ch; margin: 26px 0 30px; font-size: 18px; }
.pro-workspace-lead { margin: 24px 0 48px; border-block: 1px solid #ffffff1c; }
.pro-workspace-lead > img { width: 100%; height: auto; }
.pro-workspace-lead > span { display: block; color: var(--dim); font-size: 12px; padding: 12px 0; }
.site-home .pro-themes { margin-top: 40px; padding-top: 26px; border-top: 1px solid #ffffff16; }
.site-home .theme-grid figure { border-radius: 6px; }
.site-home .intro.spread { gap: 40px; }
.site-home .topic.arriving > section:first-child, .site-home .hero-copy.arriving { animation: topic-arrive 560ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes topic-arrive { from { opacity: 0.3; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .site-home .top .nav-station { grid-template-columns: 116px minmax(0, 1fr); gap: 18px; height: 144px; width: calc(100% - 32px); }
  .nav-context { display: none; }
  .nav-rotor { width: 116px; height: 126px; }
  .rotor-images, .rotor-mark { width: 87px; height: 87px; }
  .rotor-word { width: 111px; }
  .site-home .top .nav-index { gap: 1px 14px; width: 100%; font-size: 11px; }
  .site-home .nav-index a { gap: 7px; min-height: 30px; }
  .site-home .nav-index .nav-mobile-download { display: block; grid-column: 1 / -1; font-size: 10px; color: var(--text-bright); }
  .site-home .hero-copy h1 { font-size: 43px; }
  .site-home .hero-copy .lede { font-size: 16px; }
  .site-home .section-heading { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .site-home .section-heading h2 { font-size: 31px; }
  .site-home .section-heading > p { margin: 0; max-width: 100%; }
  .site-home .pro-head h2 { font-size: 34px; }
  .site-home .pro-head { gap: 14px; }
  .site-home .topic > section { padding: 54px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rotor-images { transition: none; }
  .site-home .topic.arriving > section:first-child, .site-home .hero-copy.arriving { animation: none; }
}