:root {
  --night: #031322;
  --ink: #f4f7fa;
  --quiet: #c0ced9;
  --blue: #1e73be;
  --line: rgba(218, 232, 241, .24);
  --display: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--night) url('../assets/eczoswallpaper_web.jpeg') center / cover fixed no-repeat; font: 16px/1.55 var(--body); }
button, a { font: inherit; }
button { color: inherit; }
.site { position: relative; min-height: 100svh; isolation: isolate; overflow-x: clip; }
.site > [hidden] { display: none !important; }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 8; display: flex; align-items: center; min-height: 92px; padding: 18px clamp(24px, 5vw, 72px); border-bottom: 1px solid rgba(197, 225, 241, .14); background: linear-gradient(180deg, rgba(2, 13, 24, .94), rgba(2, 13, 24, .69)); backdrop-filter: blur(15px); }
.site-header-brand { display: block; flex: 0 0 auto; width: clamp(145px, 11vw, 188px); }
.site-header-brand img { display: block; width: 100%; }
.site-header-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(13px, 1.55vw, 25px); min-width: 0; margin-left: auto; white-space: nowrap; }
.site-header-nav a { color: #b9cbd6; font: 600 .66rem/1.2 var(--mono); letter-spacing: .025em; text-decoration: none; transition: color .2s ease; }
.site-header-nav a:hover, .site-header-nav a:focus-visible, .site-header-nav a[aria-current="page"] { color: #fff; }
.site-header-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: #78c8f5; text-underline-offset: 7px; }
.site-header-nav .language-control { position: relative; top: auto; right: auto; bottom: auto; left: auto; flex: 0 0 auto; margin-left: clamp(2px, .5vw, 8px); }
.site-header-nav .language-menu { z-index: 3; }
.has-site-header .brand-corner, .has-site-header .subpage-brand, .has-site-header .subpage-nav { display: none; }
.page-loading .spa-page { opacity: .5; }
.spa-page { position: relative; z-index: 1; min-height: 100svh; opacity: 1; transition: opacity .2s ease; }
.spa-page .subpage-main { padding-top: clamp(155px, 15vw, 205px); }
.spa-lightbox-image { cursor: zoom-in; }
.cinema { position: fixed; inset: 0; z-index: 0; background: transparent; pointer-events: none; }
.still-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.background-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 1.6s ease; }
.experience-pending .background-video { opacity: 0; }
.video-failed .background-video { opacity: 0; }
.video-failed .cinema { background: transparent; }
.video-wash { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(1, 11, 21, .86) 0%, rgba(1, 11, 21, .44) 37%, rgba(1, 11, 21, .05) 69%), linear-gradient(0deg, rgba(1, 11, 21, .78) 0%, rgba(1, 11, 21, .05) 43%, rgba(1, 11, 21, .22) 100%); }
.edge-vignette { position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 170px rgba(0, 4, 10, .64); }
.experience-gate { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 28px; text-align: center; transition: opacity .7s ease, visibility .7s ease; }
.experience-gate[hidden] { display: none; }
.experience-invitation { display: flex; flex-direction: column; align-items: center; max-width: 760px; }
.experience-mark { margin: 0 0 18px; color: #9bd6fa; font: 600 .68rem/1 var(--mono); letter-spacing: .28em; }
.experience-invitation h2 { max-width: 760px; margin: 0 0 34px; font: 500 clamp(2.5rem, 5.4vw, 5.9rem)/1.02 var(--display); letter-spacing: -.06em; text-wrap: balance; text-shadow: 0 8px 45px rgba(0, 0, 0, .4); }
.experience-start { display: inline-flex; align-items: center; gap: 22px; padding: 13px 16px 13px 19px; border: 1px solid rgba(231, 242, 247, .48); border-radius: 2px; background: rgba(3, 19, 34, .38); color: #f4f7fa; cursor: pointer; font: 600 .7rem/1 var(--mono); letter-spacing: .08em; backdrop-filter: blur(8px); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.experience-start:hover, .experience-start:focus-visible { border-color: #9bd6fa; background: rgba(7, 40, 63, .7); outline: 0; transform: translateY(-2px); }
.experience-running .experience-gate, .experience-revealed .experience-gate { opacity: 0; visibility: hidden; pointer-events: none; }
.hero, .utility, .audio-control { transition: opacity 1.4s ease, transform 1.4s ease, visibility 1.4s ease; }
.experience-pending .hero, .experience-running .hero, .experience-pending .utility, .experience-running .utility, .experience-pending .audio-control, .experience-running .audio-control { opacity: 0; visibility: hidden; pointer-events: none; }
.experience-pending .hero, .experience-running .hero { transform: translateY(18px); }
.utility { position: absolute; top: clamp(22px, 4vw, 48px); right: clamp(22px, 5vw, 72px); z-index: 5; }
.utility-button { min-height: 38px; padding: 9px 12px; border: 1px solid rgba(231, 242, 247, .35); border-radius: 2px; background: rgba(3, 19, 34, .32); color: var(--ink); cursor: pointer; font: 600 .73rem/1 var(--mono); letter-spacing: .06em; backdrop-filter: blur(8px); }
.utility-button:hover, .utility-button:focus-visible { border-color: rgba(231, 242, 247, .78); background: rgba(3, 19, 34, .58); }
.utility-button:focus-visible, .language-menu button:focus-visible, .audio-control:focus-visible { outline: 2px solid #91d4ff; outline-offset: 4px; }
.chevron { display: inline-block; width: 7px; height: 7px; margin-left: 9px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.language-menu { position: absolute; top: calc(100% + 9px); right: 0; width: 184px; padding: 6px; border: 1px solid rgba(231, 242, 247, .23); background: rgba(3, 19, 34, .86); box-shadow: 0 15px 35px rgba(0, 0, 0, .26); backdrop-filter: blur(12px); }
.language-menu button { display: flex; justify-content: space-between; width: 100%; padding: 10px 9px; border: 0; background: transparent; color: var(--quiet); cursor: pointer; text-align: left; font-size: .86rem; }
.language-menu button:hover, .language-menu button[aria-checked="true"] { color: var(--ink); background: rgba(255, 255, 255, .08); }
.language-menu b { color: #8ecaf2; font: 600 .68rem var(--mono); }

.hero { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: clamp(112px, 13vh, 150px) clamp(24px, 6vw, 96px) clamp(28px, 4vh, 46px); }
.brand-corner { position: absolute; top: clamp(20px, 3.3vw, 38px); left: clamp(24px, 5vw, 72px); z-index: 5; display: block; width: clamp(158px, 12vw, 205px); opacity: .94; transition: opacity .2s; }
.brand-corner:hover { opacity: .74; }
.brand-corner img { display: block; width: 100%; height: auto; }
.usp-slider { position: relative; z-index: 2; width: min(1280px, 100%); margin: 0 auto; }
.usp-slides { display: grid; }
.usp-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr); gap: clamp(42px, 7vw, 108px); align-items: center; visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(18px); transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.usp-slide.is-active { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
.slide-copy { max-width: 675px; padding-right: clamp(0px, 2vw, 28px); }
.final-slide { grid-template-columns: minmax(0, 760px); }
.final-slide-link { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid rgba(167, 215, 244, .6); color: #a7d7f4; font: 600 .74rem/1.4 var(--mono); letter-spacing: .02em; text-decoration: none; }
.final-slide-link:hover, .final-slide-link:focus-visible { border-color: #fff; color: #fff; outline: 0; }
.kicker { margin: 0 0 18px; color: #91cff6; font: 600 .68rem/1 var(--mono); letter-spacing: .19em; }
h1, h2, h3, p { margin-top: 0; }
h1, .slide-copy h2 { max-width: 730px; margin-bottom: 25px; font: 500 clamp(2.65rem, 4.8vw, 5.25rem)/1.02 var(--display); letter-spacing: -.06em; }
.slide-copy h2 { font-size: clamp(2.35rem, 4vw, 4.45rem); }
.lead { max-width: 575px; margin-bottom: 17px; color: #eff5f9; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.7; text-shadow: 0 2px 22px rgba(0, 0, 0, .28); }
.statement { max-width: 560px; margin-bottom: 25px; color: var(--quiet); font-size: .9rem; line-height: 1.7; }
.arrival { margin: 0; color: #96d4fa; font: 500 .81rem var(--mono); letter-spacing: .02em; }
.hero-download { display: inline-flex; align-items: center; gap: 12px; margin-top: 25px; padding: 12px 15px; border: 1px solid rgba(151, 211, 245, .72); color: #f6fbff; background: rgba(4, 28, 46, .4); font: 600 .72rem/1 var(--mono); letter-spacing: .05em; text-decoration: none; width: fit-content; }
.hero-download:hover, .hero-download:focus-visible { border-color: #fff; background: rgba(17, 70, 101, .7); outline: 0; }
.slide-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 650px; margin: 30px 0 0; padding: 15px 0 0; border-top: 1px solid var(--line); list-style: none; }
.slide-points li { min-height: 48px; padding: 0 14px; border-left: 1px solid var(--line); color: #d7e5ed; font: .7rem/1.45 var(--mono); }
.slide-points li:first-child { padding-left: 0; border-left: 0; }
.slide-visual { width: 100%; margin: 0; align-self: center; }
.slide-visual img { display: block; width: 100%; height: auto; }
.slide-visual figcaption { margin: 9px 0 0; color: rgba(238, 247, 252, .72); font: .65rem/1.3 var(--mono); text-align: right; }
.slide-visual-pair { display: grid; gap: 14px; }
.slide-visual-pair figure { margin: 0; }
.screenshot-button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid rgba(231, 242, 247, .35); background: transparent; cursor: zoom-in; }
.slide-visual .screenshot-button { box-shadow: 0 24px 64px rgba(0, 0, 0, .36); }
.screenshot-button::after { content: '+'; position: absolute; right: 8px; bottom: 7px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(3, 19, 34, .7); color: #fff; font: 400 1rem/1 var(--body); opacity: 0; transition: opacity .2s ease; }
.screenshot-button:hover::after, .screenshot-button:focus-visible::after { opacity: 1; }
.screenshot-button:hover img { opacity: .82; }
.screenshot-button:focus-visible { outline: 2px solid #91d4ff; outline-offset: 3px; }
.slide-controls { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px 42px; gap: 9px; align-items: center; width: min(720px, 100%); margin-top: clamp(28px, 4vh, 46px); }
.slide-arrow, .slide-pause { display: grid; place-items: center; width: 42px; height: 36px; padding: 0; border: 1px solid rgba(226, 239, 247, .3); background: rgba(3, 19, 34, .34); color: #eaf4fa; cursor: pointer; font: .9rem var(--mono); }
.slide-arrow:hover, .slide-pause:hover, .slide-arrow:focus-visible, .slide-pause:focus-visible { border-color: #91d4ff; background: rgba(9, 42, 65, .72); outline: 0; }
.slide-index { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.slide-index button { position: relative; height: 36px; padding: 0 0 7px; border: 0; border-bottom: 1px solid rgba(226, 239, 247, .24); background: transparent; color: rgba(226, 239, 247, .52); cursor: pointer; font: .59rem/1 var(--mono); text-align: left; }
.slide-index button::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; background: #91cff6; transition: right .3s ease; }
.slide-index button[aria-current="true"] { color: #fff; }
.slide-index button[aria-current="true"]::after { right: 0; }
.slide-index button:hover, .slide-index button:focus-visible { color: #fff; outline: 0; border-color: rgba(145, 207, 246, .7); }
.hero-foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; width: min(1280px, 100%); margin: 25px auto 0; color: rgba(238, 247, 252, .75); font: .68rem var(--mono); letter-spacing: .05em; }.hero-foot .slash { color: var(--blue); }.site-link { display: inline-flex; gap: 6px; margin-left: 8px; color: #a7d7f4; text-decoration: none; border-bottom: 1px solid rgba(167, 215, 244, .45); }.site-link:hover { color: #fff; border-color: #fff; }
.audio-control { position: fixed; right: clamp(22px, 5vw, 72px); bottom: clamp(23px, 4vw, 48px); z-index: 5; display: inline-flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid rgba(231, 242, 247, .3); border-radius: 2px; background: rgba(3, 19, 34, .38); cursor: pointer; color: rgba(244, 247, 250, .88); font: .68rem var(--mono); backdrop-filter: blur(8px); }.audio-control:hover { border-color: rgba(231, 242, 247, .75); background: rgba(3, 19, 34, .66); }.audio-bars { display: inline-flex; align-items: center; gap: 2px; width: 15px; height: 14px; }.audio-bars i { display: block; width: 2px; height: 5px; background: #91cff6; }.audio-bars i:nth-child(2) { height: 10px; }.audio-bars i:nth-child(3) { height: 14px; }.audio-bars i:nth-child(4) { height: 8px; }.audio-control.is-muted .audio-bars i { height: 2px; background: #a8b8c3; }
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: clamp(18px, 4vw, 56px); }
.lightbox-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 8, 16, .9); cursor: zoom-out; backdrop-filter: blur(8px); }
.lightbox-panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: min(94vw, 1600px); max-height: 91vh; }
.lightbox-panel img { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; border: 1px solid rgba(228, 240, 248, .38); box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.lightbox-panel p { margin: 12px 52px 0; color: #d9e7f0; font: .72rem var(--mono); text-align: center; }
.lightbox-close { position: absolute; top: -16px; right: -16px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .48); border-radius: 50%; background: #071827; color: #fff; cursor: pointer; font: 300 1.8rem/1 var(--body); }
.lightbox-close:hover, .lightbox-close:focus-visible { background: #123b59; outline: 2px solid #91d4ff; outline-offset: 3px; }
.lightbox-open { overflow: hidden; }

.content-section { position: relative; z-index: 1; width: min(1280px, calc(100% - clamp(48px, 12vw, 192px))); margin: 0 auto; padding: clamp(90px, 13vw, 180px) 0; }
.section-intro { max-width: 720px; }
.section-label { margin: 0 0 18px; color: #91cff6; font: 600 .68rem/1 var(--mono); letter-spacing: .18em; }
.section-intro h2, .split-copy h2, .support-section h2 { max-width: 900px; margin: 0; font: 500 clamp(2.2rem, 4.5vw, 4.7rem)/1.04 var(--display); letter-spacing: -.055em; }
.release-section { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.05fr); gap: clamp(36px, 9vw, 150px); align-items: start; border-top: 1px solid rgba(213, 234, 246, .18); }
.release-copy { max-width: 650px; color: #dce8ef; font-size: clamp(1.05rem, 1.55vw, 1.28rem); line-height: 1.7; }
.release-copy p { margin-bottom: 24px; }
.text-link, .feature-row a, .quiet-link { color: #a7d7f4; font: 600 .73rem/1.4 var(--mono); letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid rgba(167, 215, 244, .5); padding-bottom: 4px; }
.text-link:hover, .text-link:focus-visible, .feature-row a:hover, .feature-row a:focus-visible, .quiet-link:hover, .quiet-link:focus-visible { color: #fff; border-color: #fff; outline: 0; }
.feature-section { border-top: 1px solid rgba(213, 234, 246, .18); }
.feature-list { margin-top: clamp(50px, 8vw, 110px); border-top: 1px solid rgba(213, 234, 246, .21); }
.feature-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) 185px; gap: 24px; align-items: start; padding: 31px 0; border-bottom: 1px solid rgba(213, 234, 246, .18); }
.feature-number { margin: 6px 0 0; color: #8dcaef; font: .67rem var(--mono); }
.feature-row h3 { margin: 0 0 9px; font: 500 clamp(1.45rem, 2.3vw, 2.3rem)/1.12 var(--display); letter-spacing: -.035em; }
.feature-row div p { max-width: 650px; margin: 0; color: #bdccd7; font-size: .96rem; line-height: 1.7; }
.feature-row a { justify-self: end; margin-top: 9px; }
.split-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(360px, .86fr); gap: clamp(44px, 9vw, 150px); align-items: center; border-top: 1px solid rgba(213, 234, 246, .18); }
.reverse-section .split-copy { order: 2; }.reverse-section .section-shot { order: 1; }
.split-copy p:not(.section-label) { max-width: 570px; color: #c8d6df; line-height: 1.75; }
.split-copy h2 { margin-bottom: 27px; }.split-copy .text-link { display: inline-flex; margin-top: 12px; }
.section-shot { margin: 0; }.section-shot img { display: block; width: 100%; height: auto; }.section-shot figcaption, .release-gallery figcaption { margin-top: 10px; color: rgba(238, 247, 252, .67); font: .66rem var(--mono); }
.gallery-section { border-top: 1px solid rgba(213, 234, 246, .18); }.release-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(44px, 6vw, 84px); }.release-gallery figure { margin: 0; }.release-gallery img { display: block; width: 100%; height: auto; }
.support-section { max-width: 100%; padding: clamp(100px, 13vw, 190px) clamp(24px, 8vw, 120px); border: 1px solid rgba(184, 221, 242, .25); background: linear-gradient(115deg, rgba(8, 42, 65, .7), rgba(2, 15, 28, .26)); box-shadow: 0 30px 100px rgba(0, 3, 10, .28); }.support-section h2 { margin-bottom: 23px; }.support-section > p:not(.section-label) { max-width: 690px; margin: 0; color: #c7d7e0; font-size: clamp(1rem, 1.45vw, 1.2rem); line-height: 1.7; }.support-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin-top: 36px; }.button-link { display: inline-flex; gap: 14px; padding: 13px 16px; border: 1px solid rgba(151, 211, 245, .72); background: rgba(2, 22, 37, .32); color: #fff; font: 600 .72rem/1 var(--mono); letter-spacing: .04em; text-decoration: none; }.button-link:hover, .button-link:focus-visible { background: rgba(21, 80, 112, .75); outline: 0; }
.site-footer { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px 24px; width: min(1280px, calc(100% - clamp(48px, 12vw, 192px))); margin: 0 auto; padding: 38px 0 48px; color: rgba(227, 241, 248, .66); border-top: 1px solid rgba(213, 234, 246, .18); font: .68rem var(--mono); }.site-footer a { color: #a7d7f4; text-decoration: none; }.site-footer a:hover { color: #fff; }
.subpage { min-height: 100svh; }.subpage-main { position: relative; z-index: 1; width: min(1120px, calc(100% - clamp(48px, 12vw, 192px))); margin: 0 auto; padding: clamp(150px, 18vw, 220px) 0 100px; }.subpage-brand { position: fixed; top: clamp(20px, 3.3vw, 38px); left: clamp(24px, 5vw, 72px); z-index: 5; display: block; width: clamp(158px, 12vw, 205px); }.subpage-brand img { display: block; width: 100%; }.subpage-nav { position: fixed; top: clamp(27px, 4vw, 48px); right: clamp(24px, 5vw, 72px); z-index: 5; display: flex; gap: 18px; font: .68rem var(--mono); }.subpage-nav a { color: #c8dce8; text-decoration: none; }.subpage-nav a:hover, .subpage-nav a[aria-current="page"] { color: #fff; border-bottom: 1px solid #9bd6fa; }.subpage-hero { max-width: 850px; padding-bottom: clamp(75px, 11vw, 150px); }.subpage-hero h1 { margin: 0 0 25px; font-size: clamp(3rem, 6vw, 6.8rem); }.subpage-hero .lead { max-width: 690px; }.detail-list { border-top: 1px solid rgba(213, 234, 246, .22); }.detail-item { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 25px; padding: 38px 0; border-bottom: 1px solid rgba(213, 234, 246, .18); }.detail-item > span { color: #91cff6; font: .68rem var(--mono); }.detail-item h2 { margin: 0 0 13px; font: 500 clamp(1.65rem, 2.6vw, 2.65rem)/1.12 var(--display); letter-spacing: -.035em; }.detail-item p, .download-panel p { max-width: 700px; margin: 0; color: #c7d6df; line-height: 1.75; }.download-panel { padding: clamp(35px, 6vw, 70px); border: 1px solid rgba(184, 221, 242, .28); background: rgba(3, 24, 39, .46); }.download-panel h2 { margin: 0 0 16px; font: 500 clamp(1.8rem, 3.1vw, 3rem)/1.1 var(--display); }.download-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 30px; }.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 64px; border-top: 1px solid rgba(213, 234, 246, .2); }.facts div { padding: 20px 22px 0 0; border-right: 1px solid rgba(213, 234, 246, .18); }.facts div + div { padding-left: 22px; }.facts div:last-child { border-right: 0; }.facts b { display: block; margin-bottom: 7px; color: #f2f8fb; font: .78rem var(--mono); }.facts span { color: #aebfca; font-size: .85rem; line-height: 1.5; }
.requirements-list { border-top: 1px solid rgba(213, 234, 246, .24); }
.requirements-list article { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); padding: clamp(28px, 4vw, 48px) 0; border-bottom: 1px solid rgba(213, 234, 246, .18); }
.requirement-label { margin: 6px 0 0; color: #91cff6; font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.requirements-list h2 { margin: 0 0 12px; font: 500 clamp(1.55rem, 2.7vw, 2.65rem)/1.12 var(--display); letter-spacing: -.035em; }
.requirements-list article p:not(.requirement-label), .requirements-note p { max-width: 720px; margin: 0; color: #c7d6df; line-height: 1.75; }
.requirements-note { margin-top: clamp(70px, 10vw, 130px); padding-top: clamp(36px, 6vw, 70px); border-top: 1px solid rgba(213, 234, 246, .24); }
.requirements-note h2 { margin: 0 0 18px; font: 500 clamp(2rem, 4vw, 4rem)/1.05 var(--display); letter-spacing: -.045em; }
.download-guides { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 34px; padding-top: 25px; border-top: 1px solid rgba(213, 234, 246, .17); }
.download-guides a { color: #b9d7e8; font: 600 .7rem/1.5 var(--mono); text-decoration: none; }
.download-guides a:hover, .download-guides a:focus-visible { color: #fff; }
.product-story { display: grid; grid-template-columns: minmax(0, .85fr) minmax(360px, 1fr); gap: clamp(42px, 8vw, 120px); align-items: start; padding-top: 20px; }.product-copy h2 { margin: 0 0 17px; font: 500 clamp(1.75rem, 3vw, 3rem)/1.1 var(--display); letter-spacing: -.04em; }.product-copy p { color: #c7d6df; line-height: 1.75; }.shot-stack { display: grid; gap: 24px; margin: 0; }.shot-stack figure { margin: 0; }.shot-stack img { display: block; width: 100%; height: auto; }.shot-stack figcaption { margin-top: 10px; color: rgba(238, 247, 252, .68); font: .66rem var(--mono); }.related-pages { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(213, 234, 246, .18); }.related-pages a { color: #a7d7f4; font: .7rem var(--mono); text-decoration: none; }.related-pages a:hover { color: #fff; }

/* Editorial product stories: restrained, image-led and deliberately not card based. */
.visual-hero { display: grid; grid-template-columns: minmax(0, .72fr) minmax(440px, 1fr); gap: clamp(45px, 7vw, 105px); align-items: center; max-width: none; padding-bottom: clamp(85px, 12vw, 165px); }
.visual-hero-copy h1 { margin: 0 0 25px; font-size: clamp(3rem, 6vw, 6.5rem); }
.visual-hero-copy .lead { max-width: 650px; }
.hero-screen, .chapter-media, .wide-screen { position: relative; margin: 0; }
.hero-screen::before, .chapter-media::before, .wide-screen::before { content: ""; position: absolute; inset: -16px; z-index: -1; border: 1px solid rgba(151, 211, 245, .17); background: rgba(4, 25, 41, .34); box-shadow: 0 28px 90px rgba(0, 5, 13, .42); }
.hero-screen img, .chapter-media img, .wide-screen img { display: block; width: 100%; height: auto; }
.hero-screen figcaption, .chapter-media figcaption, .wide-screen figcaption { margin-top: 14px; color: rgba(230, 242, 249, .66); font: .65rem/1.5 var(--mono); }
.visual-index { border-top: 1px solid rgba(213, 234, 246, .22); }
.visual-index article { display: grid; grid-template-columns: 56px minmax(230px, .72fr) minmax(300px, 1fr); gap: clamp(22px, 4vw, 64px); align-items: center; padding: clamp(34px, 5vw, 66px) 0; border-bottom: 1px solid rgba(213, 234, 246, .18); }
.visual-index .index-number { align-self: start; padding-top: 8px; color: #91cff6; font: .68rem var(--mono); }
.visual-index h2 { margin: 0 0 12px; font: 500 clamp(1.8rem, 3vw, 3.1rem)/1.08 var(--display); letter-spacing: -.04em; }
.visual-index p { max-width: 590px; margin: 0 0 18px; color: #c7d6df; line-height: 1.7; }
.index-image { position: relative; min-height: 220px; overflow: hidden; background: rgba(5, 27, 44, .6); }
.index-image img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; object-position: center; transition: transform .45s ease; }
.visual-index article:hover .index-image img { transform: scale(1.018); }
.visual-story { border-top: 1px solid rgba(213, 234, 246, .22); }
.story-chapter { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(430px, 1.18fr); gap: clamp(48px, 8vw, 125px); align-items: center; padding: clamp(80px, 12vw, 165px) 0; border-bottom: 1px solid rgba(213, 234, 246, .18); }
.story-chapter:nth-child(even) .chapter-copy { order: 2; }
.story-chapter:nth-child(even) .chapter-media { order: 1; }
.chapter-kicker { margin: 0 0 15px; color: #91cff6; font: 600 .66rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.chapter-copy h2 { margin: 0 0 20px; font: 500 clamp(2rem, 3.9vw, 4.25rem)/1.03 var(--display); letter-spacing: -.045em; }
.chapter-copy p { max-width: 590px; color: #c7d6df; line-height: 1.75; }
.chapter-copy ul { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(213, 234, 246, .17); }
.chapter-copy li { padding: 12px 0; border-bottom: 1px solid rgba(213, 234, 246, .13); color: #dce8ee; font-size: .88rem; }
.wide-screen { margin: clamp(85px, 12vw, 160px) 0; }
.wide-screen img { max-height: 720px; object-fit: cover; object-position: center top; }
.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: clamp(70px, 10vw, 125px) 0; border-top: 1px solid rgba(213, 234, 246, .2); border-bottom: 1px solid rgba(213, 234, 246, .2); }
.proof-strip div { padding: 25px clamp(15px, 2.5vw, 34px); border-right: 1px solid rgba(213, 234, 246, .16); }
.proof-strip div:last-child { border-right: 0; }
.proof-strip b { display: block; margin-bottom: 8px; color: #f4f9fc; font: 600 .72rem var(--mono); }
.proof-strip span { color: #afc2ce; font-size: .84rem; line-height: 1.55; }
.release-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 38px; background: rgba(196, 226, 243, .18); border: 1px solid rgba(196, 226, 243, .18); }
.release-choice article { padding: clamp(28px, 4vw, 48px); background: rgba(3, 21, 35, .86); }
.release-choice h2 { margin: 0 0 12px; font: 500 clamp(1.7rem, 3vw, 2.8rem)/1.08 var(--display); }
.release-choice p { color: #c7d6df; line-height: 1.7; }
.release-state { display: inline-block; margin-bottom: 18px; color: #91cff6; font: 600 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.resource-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; }
.resource-links a { color: #a7d7f4; font: .7rem var(--mono); text-decoration: none; }
.resource-links a:hover { color: #fff; }
.media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 30px); margin: clamp(70px, 10vw, 125px) 0; }
.media-duo figure { margin: 0; }
.media-duo img { display: block; width: 100%; height: clamp(240px, 32vw, 430px); object-fit: cover; object-position: center; }
.media-duo figcaption { margin-top: 12px; color: rgba(230, 242, 249, .66); font: .65rem/1.5 var(--mono); }
.detail-crop { overflow: hidden; }
.detail-crop img { height: clamp(310px, 42vw, 560px); object-fit: cover; }
.focus-left img { object-position: left top; }
.focus-right img { object-position: right top; }
.focus-top img { object-position: center top; }
.process-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: clamp(65px, 9vw, 110px) 0; background: rgba(196, 226, 243, .18); border: 1px solid rgba(196, 226, 243, .18); }
.process-line div { padding: clamp(24px, 3vw, 38px); background: rgba(3, 21, 35, .86); }
.process-line b { display: block; margin-bottom: 11px; color: #91cff6; font: 600 .68rem var(--mono); letter-spacing: .08em; }
.process-line span { color: #d2dfe6; font-size: .9rem; line-height: 1.6; }

@media (max-width: 900px) { .video-wash { background: linear-gradient(0deg, rgba(1, 11, 21, .95) 0%, rgba(1, 11, 21, .63) 60%, rgba(1, 11, 21, .22) 100%); }.hero { justify-content: flex-start; min-height: 100svh; padding: 125px 24px 96px; }.usp-slide { grid-template-columns: 1fr; gap: 36px; align-content: start; }.slide-copy { max-width: 680px; padding-right: 0; }.slide-visual { width: min(100%, 680px); }.slide-controls { margin-top: 34px; }.hero-foot { margin-top: 27px; }.content-section { width: min(100% - 48px, 760px); padding: 90px 0; }.release-section, .split-section, .product-story, .visual-hero, .story-chapter { grid-template-columns: 1fr; gap: 42px; }.story-chapter:nth-child(even) .chapter-copy, .story-chapter:nth-child(even) .chapter-media { order: initial; }.reverse-section .split-copy, .reverse-section .section-shot { order: initial; }.feature-row { grid-template-columns: 48px minmax(0, 1fr); }.feature-row a { grid-column: 2; justify-self: start; margin-top: 0; }.release-gallery { grid-template-columns: 1fr; max-width: 680px; }.support-section { width: min(100% - 48px, 760px); padding: 80px 28px; }.site-footer { width: min(100% - 48px, 760px); }.visual-index article { grid-template-columns: 44px minmax(0, 1fr); }.visual-index .index-image { grid-column: 2; }.proof-strip { grid-template-columns: 1fr 1fr; }.proof-strip div:nth-child(2) { border-right: 0; }.proof-strip div:nth-child(-n+2) { border-bottom: 1px solid rgba(213, 234, 246, .16); }.release-choice, .media-duo, .process-line { grid-template-columns: 1fr; } }
@media (max-width: 1400px) { .site-header-nav { gap: 14px; }.site-header-nav .nav-install, .site-header-nav .nav-repository { display: none; } }
@media (max-width: 1100px) { .site-header-nav .nav-github { display: none; }.visual-hero, .story-chapter { grid-template-columns: 1fr; gap: 46px; }.story-chapter:nth-child(even) .chapter-copy, .story-chapter:nth-child(even) .chapter-media { order: initial; }.hero-screen { width: min(100%, 780px); }.visual-hero-copy { max-width: 760px; } }
@media (max-width: 680px) { .site-header { min-height: 116px; align-items: flex-start; padding: 17px 18px 43px 20px; }.site-header-brand { width: 142px; }.site-header-nav { position: absolute; left: 20px; right: 18px; bottom: 11px; justify-content: flex-start; gap: 16px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; }.site-header-nav::-webkit-scrollbar { display: none; }.site-header-nav a { font-size: .62rem; }.site-header-nav .nav-install { display: block; }.site-header-nav .language-control { margin-left: 0; }.site-header-nav .utility-button { min-height: 30px; padding: 6px 9px; }.site-header-nav .language-menu { position: fixed; top: 106px; right: 18px; }.hero { padding-top: 145px; }.subpage-main, .spa-page .subpage-main { width: min(100% - 48px, 680px); padding-top: 165px; }.subpage-nav { top: auto; bottom: 22px; right: 24px; padding: 9px 11px; background: rgba(3, 19, 34, .68); backdrop-filter: blur(8px); }.detail-item { grid-template-columns: 1fr; gap: 11px; }.facts { grid-template-columns: 1fr; gap: 20px; }.facts div, .facts div + div { padding: 0; border: 0; }.subpage-hero { padding-bottom: 70px; }.requirements-list article { grid-template-columns: 1fr; gap: 12px; }.visual-index article { grid-template-columns: 1fr; }.visual-index .index-number, .visual-index .index-image { grid-column: 1; }.index-image, .index-image img { min-height: 170px; }.proof-strip { grid-template-columns: 1fr; }.proof-strip div, .proof-strip div:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(213, 234, 246, .16); }.proof-strip div:last-child { border-bottom: 0; }.hero-screen::before, .chapter-media::before, .wide-screen::before { inset: -8px; } }
@media (max-width: 520px) { .brand-corner { width: 170px; }.site-header-nav { gap: 13px; }.site-header-nav a { font-size: .56rem; }.hero { padding: 122px 24px 104px; } h1, .slide-copy h2 { font-size: clamp(2.35rem, 12vw, 3.45rem); }.lead { font-size: .98rem; line-height: 1.62; }.statement { font-size: .84rem; }.slide-points { grid-template-columns: 1fr; padding-top: 8px; }.slide-points li, .slide-points li:first-child { min-height: 0; padding: 8px 0; border-left: 0; border-top: 1px solid rgba(218, 232, 241, .15); }.slide-points li:first-child { border-top: 0; }.slide-controls { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 7px; }.slide-arrow { width: 38px; }.slide-pause { grid-column: 1 / -1; width: 38px; justify-self: end; }.slide-index { gap: 4px; }.slide-index button { font-size: .53rem; }.hero-foot { margin-top: 22px; gap: 9px; }.site-link { margin-left: 0; }.audio-control { bottom: 22px; }.lightbox { padding: 14px; }.lightbox-close { top: -10px; right: -8px; width: 38px; height: 38px; }.lightbox-panel img { max-height: 78vh; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.background-video, .experience-gate, .hero, .utility, .audio-control { transition: none; }.usp-slide { transition: none; }.screenshot-button::after, .slide-index button::after { transition: none; } }