:root {
  color-scheme: dark;
  --bg: #0c101d;
  --panel: #141b2d;
  --ink: #eff5ff;
  --muted: #a9b7cf;
  --line: #303d58;
  --mint: #76ead5;
  --violet: #adabff;
  --amber: #ffd18a;
  font-family: "Segoe UI", system-ui, sans-serif;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.skip { position: absolute; top: 10px; left: 12px; z-index: 10; padding: 10px 14px; background: var(--panel); transform: translateY(-150%); }
.skip:focus { transform: translateY(0); }
.frame { width: min(1160px, calc(100% - 72px)); margin-inline: auto; }
.bar { border-bottom: 1px solid #27324b; background: #0e1322; }
.bar-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.bar nav { display: flex; gap: clamp(14px, 4vw, 39px); color: var(--muted); font-size: .9rem; }
.bar nav a, .back { transition: color .18s ease; }
.bar nav a:hover, .back:hover { color: var(--mint); }
.release { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; color: var(--muted); font: .72rem ui-monospace, "Cascadia Code", monospace; }
.release span, .art-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px #76ead584; }

.hero { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: clamp(28px, 5vw, 70px); padding-block: 86px 84px; }
.eyebrow, .kicker, .feature-index, .art-top, .art-bottom, .preview-head > span {
  font: 600 .72rem/1.2 ui-monospace, "Cascadia Code", "Consolas", monospace;
  letter-spacing: .07em;
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--mint); border: 1px solid #3a5062; border-radius: 999px; padding: 9px 13px; }
.eyebrow span { width: 6px; height: 6px; background: var(--mint); transform: rotate(45deg); }
.eyebrow b { width: 1px; height: 10px; background: #52647e; }
h1 { margin: 10px 0 12px; font-size: clamp(4.4rem, 9.7vw, 8rem); line-height: .95; letter-spacing: -.095em; font-weight: 800; }
h1 span { color: var(--mint); background: linear-gradient(105deg, var(--mint) 10%, var(--violet) 92%); background-clip: text; -webkit-text-fill-color: transparent; }
.hero-lede { font-size: clamp(1.18rem, 2.5vw, 1.65rem); font-weight: 650; letter-spacing: -.025em; }
.lede { margin-top: 12px; color: var(--muted); font-size: clamp(.95rem, 1.7vw, 1.08rem); line-height: 1.65; max-width: 37ch; }
.hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 16px; border-radius: 8px; border: 1px solid transparent; font-size: .9rem; font-weight: 680; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.primary { background: linear-gradient(112deg, var(--mint), var(--violet)); color: #11182a; }
.secondary { border-color: var(--line); background: #131a2c; }
.secondary:hover { border-color: var(--mint); }
.hero-art {
  min-height: 340px;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1.22;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #3a4969;
  border-radius: 23px;
  background: radial-gradient(ellipse at 53% 46%, #334267 0%, #232e50 33%, #171e34 72%);
}
.hero-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, #6e8ac56b .75px, transparent .95px); background-size: 14px 14px; mask-image: linear-gradient(110deg, #000a, #000); }
.art-top, .art-bottom { position: absolute; z-index: 2; display: flex; justify-content: space-between; align-items: center; left: 20px; right: 20px; color: #bdcce7; }
.art-top { top: 20px; }
.art-bottom { bottom: 20px; }
.art-top span:last-child { display: flex; gap: 8px; align-items: center; color: var(--mint); }
.orbit-field { position: absolute; width: min(78%, 385px); aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; }
.halo { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle, #827afd4a, #576abd2c 43%, transparent 70%); filter: blur(8px); }
.orbit { position: absolute; border: 1px solid #b6bcf66e; border-radius: 50%; }
.orbit-outer { inset: 18%; }
.orbit-inner { inset: 25%; border-color: #8393d66b; }
.loop { inset: 34% 6%; }
.loop-one { rotate: -32deg; border-left-color: var(--mint); border-bottom-color: var(--mint); animation: orbit-tilt 9s ease-in-out infinite alternate; }
.loop-two { rotate: 28deg; border-color: #9f9cf057; border-right-color: #a9a7ff9c; }
.hero-mark { position: absolute; width: 28%; left: 36%; top: 36%; filter: drop-shadow(0 8px 20px #77efd76f); animation: float 5s ease-in-out infinite; }
.star { position: absolute; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.star-one { top: 26%; left: 72%; }
.star-two { top: 66%; left: 22%; width: 5px; background: var(--violet); box-shadow: 0 0 11px var(--violet); }
@keyframes orbit-tilt { to { rotate: -46deg; } }
@keyframes float { 50% { translate: 0 -7px; } }

.section { padding-block: 62px; border-top: 1px solid #27324b; scroll-margin-top: 14px; }
.kicker { display: flex; align-items: center; gap: 10px; color: var(--mint); margin-bottom: 10px; }
.kicker span { color: var(--violet); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.15rem); line-height: 1.04; letter-spacing: -.06em; }
.section-heading { margin-bottom: 27px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.feature { border: 1px solid var(--line); border-radius: 14px; padding: 17px; background: linear-gradient(145deg, #182238, #121a2c 78%); }
.esp-feature { background: linear-gradient(145deg, #212344, #131a2e 78%); }
.feature-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 24px; }
.symbol { display: grid; width: 35px; aspect-ratio: 1; place-items: center; font-size: 1.2rem; color: var(--mint); border: 1px solid #465978; background: #263653; border-radius: 8px; }
.feature-index { color: var(--muted); font-size: .64rem; white-space: nowrap; }
h3 { font-size: 1.13rem; letter-spacing: -.02em; }
.feature p, .steps p { margin-top: 8px; color: var(--muted); font-size: .91rem; line-height: 1.55; }
.interface { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(25px, 6vw, 90px); }
.key-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; color: var(--muted); font-size: .79rem; }
kbd { border: 1px solid #536480; border-bottom-width: 2px; border-radius: 5px; padding: 4px 6px; color: var(--ink); background: #252f46; font: .76rem ui-monospace, "Cascadia Code", "Consolas", monospace; white-space: nowrap; }
.preview { padding: 16px; border: 1px solid #435376; border-radius: 15px; background: linear-gradient(154deg, #1a233a, #11192b); box-shadow: 0 12px 35px #0508105e; }
.preview-head, .preview-head > div { display: flex; align-items: center; }
.preview-head { justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.preview-head > div { gap: 8px; }
.preview-head > span { color: var(--violet); }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 4px; background: #101729; border-radius: 8px; border: 1px solid #263650; }
.tabs button { border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 7px 4px; cursor: pointer; color: var(--muted); font-size: .83rem; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--mint); background: #283954; border-color: #445876; }
.preview-content { min-height: 146px; margin-top: 10px; }
.preview-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 7px 10px; margin-top: 5px; border: 1px solid #30405d; border-radius: 6px; color: var(--ink); font-size: .86rem; background: #1a263b; }
.preview-row span { display: flex; align-items: center; gap: 7px; }
.preview-row strong { color: var(--muted); text-align: right; font-size: .78rem; font-weight: 550; }
.preview-row .sample-nick { color: var(--mint); font: .84rem ui-monospace, monospace; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.mint { background: var(--mint); } .violet { background: var(--violet); } .amber { background: var(--amber); }
.profile-note { margin: 11px 10px 0; color: var(--muted); font-size: .87rem; line-height: 1.45; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps li { padding-top: 15px; border-top: 1px solid var(--line); }
.steps li > span { display: inline-block; color: var(--mint); margin-bottom: 10px; font: .78rem ui-monospace, "Cascadia Code", monospace; }
.footer { min-height: 77px; padding-block: 13px; border-top: 1px solid #27324b; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.footer p, .back { color: var(--muted); font-size: .82rem; }

@media (max-width: 980px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-art { min-height: 280px; }
}
@media (max-width: 730px) {
  .frame { width: calc(100% - 36px); }
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 52px 44px; gap: 25px; }
  .hero-art { min-height: 220px; aspect-ratio: 1.8; }
  .orbit-field { width: min(64%, 330px); }
  .section { padding-block: 42px; }
  .interface { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 420px) {
  .bar-inner { min-height: 62px; gap: 8px; }
  .brand { font-size: .92rem; gap: 5px; }
  .brand img { width: 23px; height: 23px; }
  .bar nav { gap: 10px; font-size: .72rem; }
  .release { padding: 5px 7px; font-size: .62rem; gap: 4px; }
  .release span { width: 4px; height: 4px; }
  .feature { padding: 12px; }
  .feature-top { margin-bottom: 15px; }
  .feature-index { font-size: .54rem; }
  .feature p { font-size: .85rem; }
  .footer { flex-wrap: wrap; }
  .footer p { order: 3; flex-basis: 100%; }
}
@media (max-width: 360px) {
  .bar .release { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}