:root {
  color-scheme: dark;
  --bg: #071122;
  --panel: #101e34;
  --ink: #f6f0e8;
  --muted: #aebbcf;
  --gold: #efc592;
  --line: #c4a47a3d;
  --serif: Georgia, "Times New Roman", serif;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; isolation: isolate; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible, .scene-toggle:focus-visible { outline: 2px solid #f5c68e; outline-offset: 5px; }
img { display: block; max-width: 100%; }
figure, h1, h2, h3, p { margin: 0; }
p { line-height: 1.68; color: var(--muted); }
em { font-weight: inherit; color: var(--gold); }
section[id] { scroll-margin-top: 28px; }
.wrap { width: min(100% - 84px, 1220px); margin-inline: auto; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 4; padding: .8rem; background: var(--panel); transform: translateY(-160%); }
.skip:focus { transform: none; }
.top { border-bottom: 1px solid var(--line); background: #07101e; }
.top-inner { min-height: 78px; display: flex; align-items: center; gap: 35px; }
.brand { display: inline-flex; align-items: center; gap: 11px; line-height: 1.15; font-weight: 700; font-size: 17px; letter-spacing: .14em; }
.brand small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .15em; margin-top: 5px; white-space: nowrap; }
nav { display: flex; align-items: center; gap: clamp(16px, 3.5vw, 54px); margin-inline: auto; font-size: 14px; }
nav a, .footer-inner > a:last-child { color: var(--muted); }
nav a:hover, .footer-inner a:hover, .fine a:hover { color: var(--gold); }
.top-download { display: inline-flex; gap: 12px; align-items: center; border: 1px solid var(--line); padding: 10px 15px; border-radius: 4px; color: var(--gold); font-size: 13px; white-space: nowrap; }
.top-download:hover { border-color: var(--gold); }
.astronomy-background { z-index: -1; }
.astronomy-background::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #050c1661; }
.hero { background: linear-gradient(90deg, #071122de, #07112259 57%, transparent 84%); }
.hero-inner { min-height: 600px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 74px 70px; }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 680; display: inline-flex; align-items: center; gap: 12px; }
.eyebrow > span { display: inline-block; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 17px #efc59299; }
.eyebrow i { width: 24px; height: 1px; background: var(--line); }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.05em; }
h1 { font-size: clamp(54px, 6.9vw, 107px); line-height: .96; margin-block: 26px 24px; }
h2 { font-size: clamp(48px, 6vw, 83px); line-height: .99; margin-block: 17px 15px; }
.hero p { max-width: 460px; color: #c3cde0; font-size: clamp(16px, 2vw, 19px); }
.hero strong { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 29px; }
.button { display: inline-flex; min-height: 49px; padding: 10px 17px; align-items: center; justify-content: space-between; gap: 18px; border-radius: 4px; border: 1px solid transparent; font-size: 14px; font-weight: 650; }
.button.primary { color: #20170e; background: linear-gradient(120deg, #ffdfb5, #d3a574); border-color: #ecc693; }
.button.primary:hover { background: #ffdfb5; }
.button.ghost { background: #0b162ac2; color: var(--ink); border-color: var(--line); }
.button.ghost:hover { border-color: var(--gold); }
.hero-meta, .plate, .download-meta, .demo-head { font: 11px/1.3 Consolas, monospace; letter-spacing: .09em; }
.hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 17px; margin-top: 35px; color: var(--muted); }
.hero-meta span + span { border-left: 1px solid var(--line); padding-left: 17px; }
.scene-toggle { border: 1px solid var(--line); border-radius: 4px; background: #0b162acc; color: var(--gold); padding: 7px 9px; font: inherit; cursor: pointer; }
.scene-toggle:hover { border-color: var(--gold); }
.plate { padding-block: 15px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; color: #b5a48d; }
.section { padding-block: clamp(70px, 9vw, 128px); }
.section-intro { margin-bottom: 39px; }
.section-intro p { font-size: 17px; max-width: 570px; }
.product-grid { display: grid; grid-template-columns: 1.07fr 1fr; gap: clamp(26px, 5.2vw, 74px); align-items: center; }
.feature-list article { display: grid; grid-template-columns: 45px 1fr; gap: 12px; border-top: 1px solid var(--line); padding-block: 19px; }
.feature-list article > span { font: 12px Consolas, monospace; color: var(--gold); padding-top: 5px; }
h3 { font-size: 21px; font-weight: 650; margin-bottom: 7px; }
.feature-list p { font-size: 15px; }
.demo { min-width: 0; padding: clamp(22px, 3vw, 39px); background: radial-gradient(ellipse at 80% 0%, #213b59, #111f35 68%); border: 1px solid #829ab64d; border-radius: 16px; box-shadow: 0 20px 56px #02091698; }
.demo-head, .download-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--gold); }
.badge { font-size: 9px; background: #dfbe9330; color: #ffe0ba; padding: 5px 7px; border-radius: 4px; }
.demo-kicker { margin-top: 30px; }
.reading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.reading strong { font: 700 clamp(35px, 4.2vw, 58px)/1.3 var(--serif); letter-spacing: -.04em; }
.reading strong span { color: var(--gold); }
.reading small { color: var(--muted); font-size: 11px; }
.pulse { margin-left: auto; color: #c2e8fe; white-space: nowrap; }
.chart { display: block; width: 100%; margin-block: 18px 7px; }
.periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.periods span { text-align: center; font: 10px Consolas, monospace; padding: 9px 2px; border-radius: 4px; background: #16365b; }
.periods span:nth-child(2) { background: #f3c74a; color: #192539; }
.periods span:nth-child(3) { background: #a34508; }
.demo figcaption { margin-top: 14px; font-size: 11px; color: var(--muted); }
.downloads { border-block: 1px solid var(--line); background: radial-gradient(ellipse at 76% 0%, #132845, #0a1527 66%); }
.download-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 19px; }
.download { padding: clamp(22px, 3vw, 39px); border: 1px solid var(--line); background: #121e33; border-radius: 9px; }
.download h3 { font: 400 clamp(30px, 3vw, 43px)/1.1 var(--serif); margin-top: 21px; }
.download p { max-width: 480px; margin-block: 9px 23px; }
.download small { display: block; font-size: 12px; color: var(--muted); margin-top: 11px; }
.fine { margin-top: 19px; font-size: 13px; }
.fine a, .text-link { text-decoration: underline; text-underline-offset: 4px; }
.guide { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(25px, 6vw, 84px); }
.guide-list { border-bottom: 1px solid var(--line); }
details { border-top: 1px solid var(--line); padding: 17px 0; }
summary { color: var(--ink); font-size: 17px; cursor: pointer; list-style: none; display: flex; gap: 13px; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary > span { color: var(--gold); font: 12px Consolas, monospace; }
summary::after { content: "+"; color: var(--gold); margin-left: auto; }
details[open] summary::after { content: "−"; }
details p { padding: 9px 30px 2px; font-size: 15px; }
details code { color: var(--gold); overflow-wrap: anywhere; }
.author { background: radial-gradient(ellipse at 25% 40%, #132f59, #0b1d38 58%, #071324); border-block: 1px solid var(--line); }
.author-grid { display: grid; grid-template-columns: 1.03fr 1fr; align-items: center; gap: clamp(28px, 6vw, 88px); }
.portrait { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #809abb61; border-radius: 10px; background: #0e294e; box-shadow: 0 25px 70px #010b1a80; }
.portrait img { width: 100%; height: auto; }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0a307e4d, transparent 30% 72%, #10377569), linear-gradient(0deg, #071429ad, transparent 32%); pointer-events: none; }
.portrait figcaption { z-index: 2; position: absolute; bottom: 17px; left: 17px; border: 1px solid #dab98965; color: #ffe3bd; background: #07152ad4; font: 10px Consolas, monospace; letter-spacing: .11em; padding: 7px 9px; border-radius: 4px; }
.code { position: absolute; width: 29%; top: 0; bottom: 0; overflow: hidden; color: #a6d8fc; opacity: .53; mask-image: linear-gradient(0deg, transparent, #000 22% 85%, transparent); }
.code-left { left: 0; }
.code-right { right: 0; color: #a5c8ff; }
.code pre { margin: 0; padding: 8px; font: clamp(6px, 1.04vw, 12px)/1.75 Consolas, monospace; white-space: pre; animation: scroll-code 22s linear infinite; }
.code-right pre { animation-duration: 28s; animation-direction: reverse; }
@keyframes scroll-code { to { transform: translateY(-50%); } }
.author p { max-width: 390px; font-size: 18px; margin-top: 19px; }
.text-link { display: inline-block; color: var(--gold); margin-top: 21px; font-size: 14px; }
footer { background: #081223; }
.footer-inner { min-height: 91px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-block: 12px; color: var(--muted); font-size: 13px; }
.footer-inner .brand { color: var(--ink); }
@media (max-width: 800px) {
  .wrap { width: calc(100% - 42px); }
  .hero-inner { min-height: 535px; }
  .product-grid, .guide, .author-grid { grid-template-columns: 1fr; }
  .guide { gap: 0; }
  .demo, .portrait { max-width: 580px; }
}
@media (max-width: 550px) {
  .top-inner { gap: 11px; flex-wrap: wrap; padding-block: 12px; }
  .top-download { margin-left: auto; }
  nav { order: 3; width: 100%; margin: 0; justify-content: space-between; gap: 7px; padding-top: 4px; }
  nav a { padding-block: 7px; }
  .hero-inner { min-height: 540px; padding-block: 98px 48px; }
  h1 { font-size: clamp(41px, 11vw, 57px); }
  .hero { background: linear-gradient(0deg, #071122db 18%, #07112273 72%, transparent); }
  .plate { font-size: 9px; }
  .download-grid { grid-template-columns: 1fr; }
  .footer-inner > a:last-child { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .code pre { animation: none; } }