:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090a12;
  color: #f0efff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; min-width: 320px; background: #090a12; }

.update-canvas {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 0 clamp(1.25rem, 6vw, 7rem) 2.5rem;
  background:
    radial-gradient(72rem 48rem at 82% -12%, rgba(96, 63, 179, .21), transparent 60%),
    radial-gradient(54rem 45rem at 2% 78%, rgba(18, 50, 100, .18), transparent 62%),
    linear-gradient(125deg, #0a0b13 0%, #0b0d17 48%, #111124 100%);
}

.aurora { position: absolute; pointer-events: none; filter: blur(42px); opacity: .38; border-radius: 50%; z-index: -1; }
.aurora-one { width: 28rem; height: 20rem; top: 8rem; right: -8rem; background: #7046d6; }
.aurora-two { width: 18rem; height: 18rem; bottom: -5rem; left: 8%; background: #195184; }

.topbar {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(196, 181, 253, .13);
}

.brand { display: inline-flex; gap: .75rem; align-items: center; color: inherit; text-decoration: none; }
.vyb { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; color: #ded8ff; background: linear-gradient(145deg, #413274, #231943); border: 1px solid rgba(200, 182, 255, .35); border-radius: 1.1rem; box-shadow: 0 0 24px rgba(151, 113, 255, .22); font-size: 1rem; letter-spacing: -3px; padding-right: 3px; }
.brand-copy { display: grid; gap: .14rem; }
.wordmark { font-size: 1.1rem; font-weight: 750; letter-spacing: -.05em; }
.wordmark span { color: #c6b7ff; }
.status, .eyebrow, .file-meta { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; font-size: .65rem; color: #afa4d5; }
.status i, .release-state i { display: inline-block; vertical-align: 1px; width: .38rem; height: .38rem; margin-right: .27rem; border-radius: 50%; background: #a77bff; box-shadow: 0 0 10px #a77bff; }
.build-chip, .release-state { padding: .48rem .7rem; border: 1px solid rgba(196, 181, 253, .18); background: rgba(25, 24, 43, .72); border-radius: .7rem; color: #d9d3f5; font: 650 .7rem "SFMono-Regular", Consolas, monospace; }

.hero { max-width: 800px; padding: clamp(4.5rem, 10vw, 8rem) 0 3rem; }
.hero h1 { margin: .75rem 0 1rem; font-size: clamp(3.1rem, 7.4vw, 6.8rem); line-height: .89; letter-spacing: -.085em; font-weight: 690; }
.intro { max-width: 630px; color: #c0bfd0; font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.65; }
.prototype-note { display: flex; align-items: flex-start; gap: .6rem; max-width: 670px; margin-top: 1.7rem; padding: .8rem 1rem; border: 1px solid rgba(165, 127, 252, .24); background: rgba(47, 29, 75, .25); border-radius: .9rem; color: #cec4ee; line-height: 1.5; font-size: .88rem; }
.prototype-note span { color: #b594ff; }.prototype-note p { margin: 0; }.prototype-note strong { color: #f1edff; }

.release-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; max-width: 1280px; }
.release-card { border: 1px solid rgba(190, 174, 240, .19); border-radius: 1.35rem; padding: clamp(1.2rem, 2.6vw, 1.9rem); background: linear-gradient(140deg, rgba(31, 29, 52, .92), rgba(15, 17, 29, .83)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 48px rgba(0, 0, 0, .16); backdrop-filter: blur(14px); }
.primary-card { grid-column: span 7; background: linear-gradient(140deg, rgba(49, 39, 86, .94), rgba(19, 21, 35, .92)); }
.safety-card { grid-column: span 5; }.changes-card { grid-column: span 7; }.roadmap-card { grid-column: span 5; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.release-card h2 { margin: .35rem 0 .75rem; font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.06em; }.release-summary { max-width: 36rem; color: #c7c4d5; line-height: 1.6; }
.release-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.download-button { display: inline-flex; gap: .7rem; align-items: center; padding: .8rem 1rem; border-radius: .8rem; color: #fbf9ff; text-decoration: none; font-size: .88rem; font-weight: 720; background: linear-gradient(135deg, #6b42bd, #3f2c70); border: 1px solid rgba(211, 194, 255, .38); box-shadow: 0 9px 22px rgba(76, 43, 148, .26); transition: transform .16s ease, filter .16s ease; }.download-button:hover { transform: translateY(-2px); filter: brightness(1.12); }.download-button span { font-size: 1.1rem; }
.safety-card ul { display: grid; gap: .75rem; padding: 0; margin: 1rem 0 0; list-style: none; color: #c4c0d3; font-size: .9rem; line-height: 1.46; }.safety-card li { padding-left: 1.1rem; position: relative; }.safety-card li::before { content: "•"; position: absolute; left: 0; color: #a879ff; }
.change-list { display: grid; gap: 1rem; margin-top: 1.2rem; }.change-list > div { display: grid; grid-template-columns: 2.25rem 1fr; gap: .8rem; align-items: start; }.change-list p { margin: 0; color: #c0bdcf; font-size: .9rem; line-height: 1.5; }.change-list strong { color: #f0ecff; }.change-icon { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: .65rem; background: #322557; color: #c7b2ff; font-size: 1rem; }
.roadmap-card ol { display: grid; gap: .72rem; padding: 0; margin: 1.1rem 0 0; counter-reset: list; list-style: none; }.roadmap-card li { display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; color: #c6c2d2; line-height: 1.4; font-size: .9rem; }.roadmap-card li span { color: #ab8efb; font: .7rem "SFMono-Regular", Consolas, monospace; padding-top: .12rem; }
footer { max-width: 1280px; display: flex; gap: .8rem; justify-content: space-between; padding-top: 3rem; color: #9994ad; font: .72rem "SFMono-Regular", Consolas, monospace; } footer a { color: #c1adff; text-decoration: none; } footer a:hover { text-decoration: underline; }

@media (max-width: 780px) { .topbar { min-height: 80px; }.build-chip { display: none; }.hero { padding-top: 4.4rem; }.primary-card, .safety-card, .changes-card, .roadmap-card { grid-column: 1 / -1; } footer { flex-direction: column; } }