:root {
  color-scheme: dark;
  --canvas: #0b1220;
  --ink: #eaf2ff;
  --muted: #a6b7d1;
  --line: #2a3b56;
  --accent: #9bbfff;
  --accent-hover: #b9d3ff;
  --button-ink: #102344;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }
figure, h1, h2, h3, p { margin: 0; }
a { color: inherit; text-underline-offset: .25em; }
:where(a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.container { width: min(100% - 96px, 1160px); margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: -60px; padding: 10px; background: #162944; z-index: 3; }
.skip-link:focus { top: 12px; }

.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
}
.site-header { border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 670; letter-spacing: -.04em; text-decoration: none; }
.site-header nav, .site-footer nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 550; }
.site-header nav a, .site-footer nav a { text-decoration: none; }
.site-header nav a:hover, .site-footer nav a:hover { text-decoration: underline; }
.site-header nav span, .hero-link span { color: var(--muted); font-size: .9em; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  padding-block: 46px 40px;
}
.hero-copy { padding-bottom: 20px; }
h1, h2 {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-weight: 650;
  letter-spacing: -.057em;
  text-wrap: balance;
}
h1 { max-width: 9ch; font-size: clamp(64px, 7.3vw, 106px); line-height: .96; }
.hero-description { max-width: 34ch; margin-top: 22px; color: var(--muted); font-size: clamp(18px, 1.65vw, 22px); line-height: 1.55; }
.hero-license { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.hero-license strong { color: var(--accent); font-size: 16px; font-weight: 650; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 20px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 17px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--button-ink);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}
.button:hover { background: var(--accent-hover); }
.hero-link { padding-block: 10px; font-size: 15px; font-weight: 650; text-decoration-thickness: 1px; text-decoration-color: #718aaf; }
.hero-link:hover { text-decoration-color: currentColor; }
.download-meta { margin-top: 14px; color: var(--muted); font-size: 13px; }
.release-note { max-width: 42ch; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.preview { overflow: hidden; border: 1px solid #334d73; border-radius: 20px; background: #101e35; scroll-margin-top: 16px; }
.preview-stage {
  position: relative;
  isolation: isolate;
  background: #111f37;
}
.wallpaper { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.app-preview { display: block; width: 100%; height: 640px; border: 0; }
.app-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 10px;
  padding: 12px 16px;
  border-top: 1px solid #94baff38;
  color: #bfcee7;
  font-size: 12px;
}
figcaption strong { color: var(--ink); font-weight: 650; }

.subscriptions {
  display: flex;
  align-items: center;
  gap: 25px 46px;
  padding-block: 22px;
  border-block: 1px solid var(--line);
}
.subscriptions p { color: var(--muted); font-size: 14px; }
.subscriptions ul { display: flex; flex-wrap: wrap; gap: 13px clamp(20px, 4.5vw, 58px); margin: 0; padding: 0; list-style: none; }
.subscriptions li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 630; }
.subscriptions li span { color: var(--muted); font-size: 12px; font-weight: 500; }
.codex-mark { filter: invert(1); }

.guide, .features, .questions {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(28px, 5vw, 76px);
  padding-block: 67px;
}
h2 { font-size: clamp(34px, 4.1vw, 56px); line-height: 1.04; }
.guide-intro p { max-width: 40ch; margin-top: 15px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.steps { padding: 0 0 0 1.5em; margin: 0; }
.steps li { padding: 15px 0 15px 8px; border-bottom: 1px solid var(--line); }
.steps li:first-child { padding-top: 0; }
.steps li::marker { color: var(--accent); font-weight: 650; }
.steps h3, .feature-list h3 { font-size: 17px; font-weight: 660; }
.steps p, .feature-list p, .questions details p { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.58; }
.features, .questions { padding-top: 0; }
.features { scroll-margin-top: 16px; }
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 18px clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-list li { border-top: 1px solid var(--line); padding-top: 12px; }
.questions h2 { font-size: clamp(30px, 3.4vw, 44px); }
.questions details { border-bottom: 1px solid var(--line); padding-block: 13px; }
.questions details:first-child { border-top: 1px solid var(--line); }
.questions summary { width: fit-content; font-size: 16px; font-weight: 650; cursor: pointer; }
.questions details p { padding-block: 5px 3px; }
.questions details a { font-weight: 620; }
.site-footer { min-height: 76px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.site-footer > span { color: var(--ink); font-weight: 650; }
.footer-license { color: var(--muted); font-weight: 500; }

.install-guide { max-width: 820px; padding-block: clamp(38px, 6vw, 70px); }
.install-guide h1 { max-width: none; font-size: clamp(44px, 6.5vw, 76px); text-wrap: initial; }
.install-guide h2 { font-size: clamp(24px, 3vw, 32px); }
.install-guide p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.install-section { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.install-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.install-command {
  margin: 16px 0 0;
  padding: 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101e35;
  font-size: 13px;
  line-height: 1.65;
}
.install-command code { font-family: "Cascadia Mono", Consolas, monospace; }
.copy-button {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid #334d73;
  border-radius: 8px;
  color: var(--ink);
  background: #101e35;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.copy-button:hover { background: #1b3152; }
.copy-button:focus-visible, .install-command:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.install-guide .copy-status { font-size: 14px; }
.copy-status:empty { margin: 0; }

@media (max-width: 950px) {
  .container { width: min(100% - 64px, 1160px); }
  .hero { gap: 26px; }
  h1 { font-size: clamp(56px, 8vw, 76px); }
}

@media (max-width: 680px) {
  .container { width: calc(100% - 36px); }
  .site-header { min-height: 64px; }
  .site-header nav, .site-footer nav { gap: 14px; }
  .hero, .guide, .features, .questions { grid-template-columns: 1fr; }
  .hero { gap: 30px; padding-block: 35px 26px; }
  .hero-copy { padding: 0; }
  h1 { max-width: 9ch; font-size: clamp(58px, 13vw, 76px); }
  .hero-description { margin-top: 15px; }
  .hero-actions { gap: 7px 12px; margin-top: 18px; }
  .subscriptions { flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 18px; }
  .guide, .features, .questions { gap: 22px; padding-block: 38px; }
  .features, .questions { padding-top: 3px; }
  .site-footer { flex-wrap: wrap; justify-content: flex-start; gap: 8px 18px; padding-block: 14px; }
}

@media (max-width: 370px) {
  .app-preview { height: 675px; }
}