:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #f3f3f5;
  background: #0b0c0f;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #0b0c0f;
  --panel: #111216;
  --panel-soft: #15161b;
  --line: #282930;
  --text: #f3f3f5;
  --muted: #a0a1aa;
  --subtle: #71737d;
  --red: #e92342;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { min-width: 320px; margin: 0; background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header, .site-footer {
  width: min(1100px, calc(100% - 48px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header { border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; background: var(--red); color: white; font-size: 16px; }
.brand-light { color: #999aa3; font-size: .8em; letter-spacing: .08em; }

nav { display: flex; align-items: center; gap: 27px; }
nav a { color: #b5b6bd; font-size: 11px; transition: color .15s ease; }
nav a:hover, .text-link:hover, .inline-link:hover { color: #ff687e; }
nav .nav-download { color: white; padding: 9px 13px; border: 1px solid #383940; border-radius: 5px; }
nav .nav-download span { margin-left: 5px; color: #ff536c; }

.hero {
  width: min(1100px, calc(100% - 48px));
  min-height: 475px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 45px;
  padding: 62px 0 52px;
}

.eyebrow { margin: 0 0 19px; color: #ff657b; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--red); vertical-align: 1px; }
.beta { display: inline-block; margin-left: 7px; padding: 3px 6px; border: 1px solid #63303a; border-radius: 3px; color: #ff8b9b; font-size: 8px; }

h1 { margin: 0; font-size: clamp(38px, 5vw, 61px); line-height: 1.08; letter-spacing: -.065em; }
h1 span { color: #a2a1a8; }
.lead { max-width: 470px; margin: 19px 0 0; color: #aaabb3; font-size: 13px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 25px; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 15px; border: 1px solid transparent; border-radius: 5px; font-size: 11px; font-weight: 700; transition: background .15s ease, border-color .15s ease; }
.button-primary { border-color: #f13b57; background: var(--red); color: white; }
.button-primary:hover:not(.is-disabled) { background: #fb3453; }
.button-primary span:last-child { font-size: 17px; }
.button-secondary { border-color: #34353c; background: #14151a; color: #d2d2d7; }
.button-secondary:hover { border-color: #60616a; }
.button.is-disabled { border-color: #33343a; background: #25262b; color: #a6a7ad; cursor: not-allowed; }
.compatibility { max-width: 420px; margin: 13px 0 0; color: var(--subtle); font-size: 9px; line-height: 1.7; }

.product-card { overflow: hidden; border: 1px solid #32333a; border-radius: 8px; background: #101115; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.window-bar { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #25262c; background: #131419; }
.mini-brand { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; }
.brand-mark.small { width: 20px; height: 20px; border-radius: 5px; font-size: 12px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #494a52; }
.window-dots i:first-child { background: #d94156; }
.preview-content { min-height: 245px; display: grid; grid-template-columns: 48px 1fr; }
.preview-sidebar { display: flex; flex-direction: column; align-items: center; gap: 15px; padding-top: 20px; border-right: 1px solid #25262c; }
.preview-sidebar span { width: 14px; height: 14px; border: 1px solid #4a4b53; border-radius: 4px; }
.preview-sidebar .active { border-color: #a51d34; background: #762033; }
.preview-main { padding: 20px 19px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; color: #e5e5e9; font-size: 9px; font-weight: 700; letter-spacing: .07em; }
.preview-badge { padding: 4px 6px; border: 1px solid #31323a; border-radius: 3px; color: #868791; font-size: 7px; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.metric { padding: 12px; border: 1px solid #292a31; border-radius: 5px; background: #15161b; }
.metric > span, .metric strong { display: block; }
.metric > span { color: #868791; font-size: 7px; letter-spacing: .1em; }
.metric strong { margin-top: 9px; font-size: 11px; }
.meter { display: block; height: 3px; margin-top: 12px; border-radius: 5px; background: #33343b; }
.meter b { display: block; height: 100%; border-radius: inherit; background: var(--red); }
.preview-list { display: grid; gap: 9px; margin-top: 15px; color: #b0b1b8; font-size: 8px; }
.preview-list span { display: flex; align-items: center; gap: 8px; }
.preview-list i { width: 5px; height: 5px; border-radius: 50%; background: #e73752; }
.preview-caption { margin: 0; padding: 9px 14px; border-top: 1px solid #25262c; color: #777984; font-size: 8px; text-align: right; }

.release-strip {
  width: min(1100px, calc(100% - 48px));
  min-height: 68px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #101115;
}
.release-strip div { display: grid; gap: 6px; }
.strip-label { color: var(--subtle); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.release-strip strong { color: #d7d7dc; font-size: 10px; font-weight: 600; }
.release-strip > a { color: #ff7385; font-size: 10px; }

.section { width: min(1000px, calc(100% - 48px)); margin: 0 auto; padding: 86px 0 10px; }
.section-heading { max-width: 580px; }
.section-heading .eyebrow { margin-bottom: 12px; }
h2 { margin: 0; font-size: clamp(25px, 3.4vw, 36px); letter-spacing: -.055em; }
.section-heading > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 26px; }
.feature-card { position: relative; min-height: 184px; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: linear-gradient(145deg, #121318, #0f1014); }
.feature-number { position: absolute; top: 21px; right: 20px; color: #60616b; font-family: Consolas, monospace; font-size: 9px; }
.feature-icon { color: #ff526c; font-size: 21px; }
.feature-card h3 { margin: 18px 0 8px; font-size: 13px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.75; }

.library-section { padding-top: 72px; }
.library-section .section-heading > p:last-child strong { color: #e9e9ec; }
.library-notice { display: flex; gap: 11px; margin-top: 20px; padding: 13px 15px; border: 1px solid #403039; border-radius: 5px; background: rgba(82, 22, 39, .16); }
.library-notice > span { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border: 1px solid #78414d; border-radius: 50%; color: #ff7184; font-size: 10px; }
.library-notice p { margin: 0; color: #b5aeb1; font-size: 10px; line-height: 1.7; }
.library-notice strong { color: #f0dce0; }
.library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; align-items: start; }
.library-category { overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #101115; }
.library-category summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; cursor: pointer; list-style: none; color: #e2e2e6; font-size: 10px; font-weight: 650; }
.library-category summary::-webkit-details-marker { display: none; }
.library-category summary::after { content: "+"; margin-left: auto; color: #ff7184; font-size: 16px; font-weight: 400; }
.library-category[open] summary::after { content: "−"; }
.library-category summary b { flex: 0 0 auto; color: #ff7889; font-size: 8px; font-weight: 500; }
.library-category ul { display: grid; gap: 8px; margin: 0; padding: 12px 15px 7px 28px; border-top: 1px solid var(--line); color: #b9bac1; font-size: 9px; line-height: 1.45; }
.library-category li::marker { color: #eb3652; }
.library-category > p { margin: 0; padding: 8px 12px 12px; color: #777984; font-size: 8px; line-height: 1.65; }
.library-total { margin: 14px 0 0; color: #aaaab2; font-family: Consolas, monospace; font-size: 9px; line-height: 1.7; text-align: right; }
.library-total span { padding: 0 5px; color: #f05a70; }

.update-section { padding-top: 83px; }
.release-card { display: flex; align-items: center; gap: 15px; margin-top: 25px; padding: 17px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.release-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid #59303a; border-radius: 5px; color: #ff6479; }
.release-card-copy { flex: 1; }
.release-card-copy strong { font-size: 11px; }
.release-card-copy p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; white-space: pre-line; }
.text-link, .inline-link { color: #ff7588; font-size: 10px; }
.text-link { white-space: nowrap; }

.download-section { width: min(1000px, calc(100% - 48px)); margin: 80px auto 0; display: grid; grid-template-columns: 1fr 310px; align-items: center; gap: 48px; padding: 32px; border: 1px solid #3b282e; border-radius: 7px; background: linear-gradient(110deg, rgba(104, 18, 38, .18), rgba(17, 18, 22, .9) 55%); }
.download-copy .eyebrow { margin-bottom: 12px; }
.download-copy h2 { font-size: 29px; }
.download-copy > p:not(.eyebrow) { max-width: 570px; margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.safety-note { display: flex; gap: 9px; margin-top: 17px; color: #b9aeb0; font-size: 9px; line-height: 1.7; }
.safety-note > span:first-child { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border: 1px solid #78424c; border-radius: 50%; color: #ff8090; font-size: 10px; }
.download-box { padding: 17px; border: 1px solid #33343b; border-radius: 6px; background: #111216; }
.download-box-head { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.file-icon { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #54313a; border-radius: 5px; color: #ff7083; font-family: Consolas, monospace; font-size: 9px; }
.download-box-head strong, .download-box-head small { display: block; }
.download-box-head strong { font-size: 10px; }
.download-box-head small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.download-box .button { width: 100%; }
.small-note { margin: 10px 0 0; color: var(--subtle); font-size: 8px; line-height: 1.6; }
.checksum { overflow-wrap: anywhere; color: #b6a8ac; font-family: Consolas, monospace; }

.faq-section { padding-top: 83px; }
.faq-list { margin-top: 20px; border-top: 1px solid var(--line); }
.faq-list details { padding: 14px 2px; border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; color: #e2e2e6; font-size: 11px; font-weight: 600; }
.faq-list details p { max-width: 760px; margin: 10px 0 2px; color: var(--muted); font-size: 10px; line-height: 1.8; }
code { color: #dddde1; font-family: Consolas, monospace; font-size: .95em; }

.community-section { width: min(1000px, calc(100% - 48px)); margin: 70px auto 0; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); }
.community-section .eyebrow { margin-bottom: 10px; }
.community-section h2 { font-size: 21px; }
.community-section p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.community-links { display: flex; gap: 20px; }
.site-footer { min-height: 75px; margin-top: 24px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 9px; }
.site-footer .brand { color: var(--text); }
.site-footer .brand-mark { width: 23px; height: 23px; font-size: 13px; }

a:focus-visible, summary:focus-visible { outline: 2px solid #ff7788; outline-offset: 3px; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 55px; }
  .hero-copy { max-width: 600px; }
  .product-card { width: min(100%, 520px); }
  .feature-grid, .library-grid { grid-template-columns: repeat(2, 1fr); }
  .download-section { grid-template-columns: 1fr; gap: 22px; }
  .download-box { width: min(100%, 380px); }
}

@media (max-width: 560px) {
  .site-header, .site-footer, .hero, .release-strip, .section, .download-section, .community-section { width: calc(100% - 32px); }
  .site-header { min-height: 65px; }
  nav { gap: 12px; }
  nav a { font-size: 9px; }
  nav a:nth-child(2), nav a:nth-child(3) { display: none; }
  nav .nav-download { padding: 8px 9px; }
  .hero { padding-top: 44px; }
  h1 { font-size: clamp(35px, 10vw, 48px); }
  .release-strip { grid-template-columns: 1fr 1fr; gap: 12px; }
  .release-strip > a { grid-column: 1 / -1; }
  .feature-grid, .library-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 155px; }
  .section { padding-top: 65px; }
  .download-section { margin-top: 58px; padding: 22px; }
  .community-section { align-items: flex-start; flex-direction: column; margin-top: 52px; }
  .community-links { flex-wrap: wrap; }
  .site-footer { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}