.encore-intro {
  --intro-ice: #85eaf8;
  --intro-cyan: #09f5ff;
  --intro-violet: #9474f5;
  --intro-navy: #070e17;
}
.intro-wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.intro-nav { border-bottom: 1px solid var(--line); }
.intro-nav .intro-wrap, .intro-footer .intro-wrap { min-height: 75px; }
.intro-skip { position: absolute; left: 16px; top: -100px; z-index: 3; background: var(--panel); padding: 10px; }
.intro-skip:focus { top: 12px; }
.intro-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--intro-navy); color: #f7fbff; }
.intro-field { position: absolute; inset: -28%; z-index: -1; background: radial-gradient(ellipse at 70% 42%, #274a744d, transparent 38%), radial-gradient(ellipse at 83% 64%, #9474f538, transparent 32%), radial-gradient(ellipse at 42% 88%, #09f5ff18, transparent 35%); animation: intro-current 17s ease-in-out infinite alternate; pointer-events: none; }
.intro-stage { min-height: min(680px, 82svh); display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 18px; padding-block: 74px 62px; }
.intro-copy { z-index: 1; animation: intro-enter .65s ease-out both; }
.intro-kicker { display: flex; gap: 9px; align-items: center; color: var(--accent); font: 500 11px/1.5 var(--mono); letter-spacing: .16em; margin-bottom: 19px; }
.intro-hero .intro-kicker { color: var(--intro-ice); }
.intro-kicker span, .intro-track-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--intro-cyan); box-shadow: 0 0 13px #09f5ff8c; flex: none; }
.intro-copy h1 { font-size: clamp(54px, 7.4vw, 108px); letter-spacing: -.08em; line-height: .95; margin-bottom: 25px; }
.intro-copy em { color: var(--intro-ice); font-style: normal; }
.intro-lede { max-width: 46ch; color: #c0cddb; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.65; }
.intro-cta { margin-top: 26px; gap: 17px; }
.intro-cta .primary { background: var(--intro-ice); border-color: var(--intro-ice); color: var(--intro-navy); gap: 12px; min-height: 50px; }
.intro-cta .primary:hover { background: var(--intro-cyan); }
.intro-tour { color: #dce8f2; padding-block: 10px; text-underline-offset: 5px; }
.intro-art { position: relative; width: min(100%, 480px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.intro-disc { width: 79%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid #85eaf854; background: repeating-radial-gradient(circle, transparent 0 5px, #85eaf81b 6px 7px), conic-gradient(from 45deg, #09131f, #223851, #0b1725, #332c53, #09131f); box-shadow: inset 0 0 55px #050a10, 0 0 85px #09f5ff16; animation: intro-spin 32s linear infinite; }
.intro-disc-core { width: 47%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #0b1827; border: 1px solid #85eaf86b; animation: intro-spin 32s linear infinite reverse; }
.intro-meter { display: flex; align-items: center; justify-content: center; gap: 3%; width: 74%; height: 43%; }
.intro-meter i { width: 4%; height: var(--bar); background: linear-gradient(var(--intro-ice), var(--intro-violet)); border-radius: 9px; animation: intro-beat 1.3s var(--beat) ease-in-out infinite alternate; }
.intro-orbit { position: absolute; width: 99%; height: 60%; border: 1px solid #85eaf87a; border-radius: 50%; transform: rotate(-29deg); }
.intro-orbit::after { content: ""; position: absolute; inset: 13% auto auto 10%; width: 7px; height: 7px; background: var(--intro-ice); border-radius: 50%; box-shadow: 0 0 15px var(--intro-cyan); }
.intro-orbit-cross { transform: rotate(37deg); border-color: #9474f55c; }
.intro-orbit-cross::after { inset: auto 11% 11% auto; background: var(--intro-violet); box-shadow: 0 0 14px var(--intro-violet); }
.intro-track { position: absolute; inset: auto 0 7% auto; display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: #09131ff2; border: 1px solid #304960; border-radius: 8px; box-shadow: 0 8px 24px #050a1060; }
.intro-track small, .intro-track-index { color: var(--intro-ice); font: 500 9px/1.5 var(--mono); letter-spacing: .09em; }
.intro-track strong { display: block; font-weight: 600; }
.intro-track-index { padding-left: 10px; border-left: 1px solid #304960; }
.intro-controls { display: flex; justify-content: flex-end; padding-bottom: 16px; }
.intro-controls button { background: #101e2c; border-color: #304960; color: #dce8f2; font-size: 12px; }
.intro-hero :focus-visible { outline-color: var(--intro-cyan); }
.intro-features { padding-block: 64px 74px; }
.intro-features h2 { font-size: clamp(33px, 5vw, 59px); line-height: 1; margin-bottom: 29px; }
.intro-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.intro-feature-grid article { padding-top: 19px; border-top: 1px solid var(--line); }
.intro-feature-grid article span { color: var(--accent); font: 500 10px/1.5 var(--mono); letter-spacing: .11em; }
.intro-feature-grid h3 { font: 500 23px/1.2 var(--heading); margin: 9px 0; }
.intro-footer { border-top: 1px solid var(--line); font-size: 13px; }
.intro-footer .intro-wrap { padding-block: 15px; }
@keyframes intro-current { to { transform: translate(-5%, 6%) rotate(-8deg); } }
@keyframes intro-enter { from { opacity: 0; transform: translateY(10px); } }
@keyframes intro-spin { to { transform: rotate(360deg); } }
@keyframes intro-beat { to { transform: scaleY(.43); } }
.encore-intro.motion-paused *, .encore-intro.motion-paused *::before { animation-play-state: paused !important; }
@media(prefers-reduced-motion: reduce) {
  .encore-intro *, .encore-intro *::before { animation: none !important; }
  .intro-controls { display: none; }
}
@media(max-width: 760px) {
  .intro-wrap { width: calc(100% - 36px); }
  .intro-stage { min-height: 0; grid-template-columns: 1fr; gap: 22px; padding-block: 42px 8px; }
  .intro-art { width: min(88%, 370px); }
  .intro-copy h1 { font-size: clamp(46px, 11vw, 77px); }
  .intro-feature-grid { grid-template-columns: 1fr; gap: 19px; }
  .intro-features { padding-block: 43px; }
  .intro-nav .theme-picker > span { display: none; }
}