@font-face { font-family: "Manrope"; src: url("/download/assets/manrope-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 800; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/download/assets/dm-mono-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/download/assets/dm-mono-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }

:root {
  --ink: #f4f1ea;
  --muted: #a4a6ae;
  --dim: #676b76;
  --bg: #0f1117;
  --panel: #171a22;
  --line: rgba(244, 241, 234, .14);
  --lime: #d4fa78;
  --violet: #9f8cff;
  --orange: #ff8e65;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Manrope, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
.page-shell { width: min(1180px, 100%); margin: 0 auto; padding: 0 38px; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 800; letter-spacing: 0; }
.brand-mark { display: inline-flex; gap: 3px; align-items: end; height: 18px; }
.brand-mark span { display: block; width: 4px; border-radius: 4px; background: var(--lime); }
.brand-mark span:nth-child(1) { height: 9px; opacity: .75; }.brand-mark span:nth-child(2) { height: 15px; }.brand-mark span:nth-child(3) { height: 12px; opacity: .84; }
.availability, .back-link { color: var(--muted); font: 500 11px/1.2 "DM Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }
.availability i, .status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 100%; background: var(--lime); box-shadow: 0 0 0 4px rgba(212, 250, 120, .1); }
.hero { min-height: 570px; position: relative; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 64px; padding: 76px 0 80px; }
.hero-art { order: 2; min-height: 440px; border-radius: 2px; background: linear-gradient(180deg, rgba(15,17,23,.1), rgba(15,17,23,.73)), url("/download/assets/hero.jpg") center/cover; filter: saturate(.83); box-shadow: 28px 28px 0 rgba(159, 140, 255, .15); }
.hero-copy { order: 1; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 19px; color: var(--lime); font: 500 11px/1.3 "DM Mono", monospace; letter-spacing: .14em; }
.eyebrow span { color: var(--dim); margin-left: 12px; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 600px; margin-bottom: 25px; font-size: 82px; line-height: .94; letter-spacing: 0; }
h1 em, h2 em { color: var(--violet); font-style: normal; }
.lede { max-width: 380px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 19px; margin-top: 36px; }
.button { min-height: 57px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 18px 0 21px; border: 1px solid transparent; font-size: 13px; font-weight: 800; letter-spacing: 0; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }.button-primary { min-width: 210px; color: var(--bg); background: var(--lime); }.button-primary:hover { background: #e1ff9a; }.button-arrow { font-size: 20px; font-weight: 400; }
.microcopy { color: var(--dim); font: 10px/1.4 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }
.hero-stamp { position: absolute; right: 47%; bottom: 65px; display: grid; gap: 8px; color: var(--orange); font: 500 10px/1 "DM Mono", monospace; transform: rotate(-8deg); }.hero-stamp strong { font: 400 30px/1 Manrope, sans-serif; }
.signal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 23px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.signal-row div { display: flex; flex-direction: column; gap: 8px; }.signal-label { color: var(--dim); font: 500 10px/1 "DM Mono", monospace; letter-spacing: .1em; }.signal-row strong { font-size: 12px; letter-spacing: .02em; }
.preview-section { padding: 120px 0 125px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 52px; }.section-heading h2, .steps h2 { max-width: 520px; margin-bottom: 0; font-size: 54px; line-height: 1; letter-spacing: 0; }.section-heading > p { max-width: 278px; margin-bottom: 3px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr .82fr; gap: 20px; align-items: start; }.preview-card { min-height: 410px; padding: 22px; background: var(--panel); overflow: hidden; }.preview-card-offset { margin-top: 74px; }.phone-frame { width: min(100%, 220px); margin: 0 auto; padding: 8px; border-radius: 26px; background: #0c0d10; box-shadow: 10px 10px 0 rgba(0,0,0,.22); }.phone-screen { position: relative; height: 298px; padding: 20px 16px; overflow: hidden; border-radius: 19px; }.phone-frame-purple .phone-screen { color: #f8f7ff; background: radial-gradient(circle at 65% 20%, #c3a4ff 0, transparent 23%), linear-gradient(150deg, #2c254a, #6f5bc7 55%, #120f21); }.phone-frame-lime .phone-screen { color: #222718; background: linear-gradient(165deg, #a5c46a, #e4f28f 53%, #a7a7ff); }.screen-time { font: 10px/1 "DM Mono", monospace; opacity: .7; }.screen-chip { float: right; font: 8px/1 "DM Mono", monospace; letter-spacing: .08em; }.screen-orbit { width: 170px; height: 170px; position: absolute; right: -35px; top: 68px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.08), 0 0 0 48px rgba(255,255,255,.06); }.phone-screen strong { position: absolute; bottom: 55px; left: 16px; font-size: 25px; line-height: .9; letter-spacing: 0; }.phone-screen small { position: absolute; bottom: 18px; left: 16px; font: 9px/1 "DM Mono", monospace; letter-spacing: .08em; }.screen-bars { position: absolute; right: 18px; bottom: 25px; display: flex; align-items: end; gap: 4px; }.screen-bars i { width: 8px; background: #313a1b; }.screen-bars i:nth-child(1) { height: 22px; opacity: .45; }.screen-bars i:nth-child(2) { height: 38px; }.screen-bars i:nth-child(3) { height: 29px; opacity: .65; }.screen-bars i:nth-child(4) { height: 51px; }.card-caption { display: flex; justify-content: space-between; margin-top: 20px; color: var(--muted); font: 10px/1 "DM Mono", monospace; text-transform: uppercase; }.card-caption strong { color: var(--ink); font: 600 12px/1 Manrope, sans-serif; text-transform: none; }.download-note { min-height: 335px; align-self: end; padding: 22px 0 16px 24px; border-left: 1px solid var(--line); }.note-number { color: var(--orange); font: 500 11px/1 "DM Mono", monospace; }.download-note p { max-width: 200px; margin: 105px 0 27px; color: var(--muted); font-size: 14px; line-height: 1.65; }.text-link { color: var(--lime); font-size: 12px; font-weight: 800; }.text-link span { margin-left: 8px; font-size: 18px; font-weight: 400; }
.steps { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; padding: 0 0 125px; }.steps ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }.steps li { display: grid; grid-template-columns: 57px 1fr; gap: 20px; padding: 23px 0; border-bottom: 1px solid var(--line); }.steps li > span { color: var(--lime); font: 500 11px/1 "DM Mono", monospace; }.steps strong { display: block; margin-bottom: 6px; font-size: 17px; }.steps p { margin-bottom: 0; color: var(--muted); font-size: 13px; }.footer { display: flex; justify-content: space-between; gap: 20px; padding: 21px 0 35px; border-top: 1px solid var(--line); color: var(--dim); font: 10px/1.4 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.floating-download { display: none; }
.install-shell { min-height: 100vh; display: flex; flex-direction: column; }.install-main { width: min(680px, 100%); margin: auto; padding: 88px 0 105px; }.install-kicker { margin-bottom: 25px; color: var(--lime); font: 500 11px/1 "DM Mono", monospace; letter-spacing: .1em; }.install-main h1 { font-size: 82px; }.install-intro { max-width: 520px; color: var(--muted); font-size: 15px; line-height: 1.75; }.file-panel { display: flex; align-items: center; gap: 16px; margin: 42px 0 19px; padding: 16px; border: 1px solid var(--line); background: var(--panel); }.file-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--bg); background: var(--lime); font: 500 10px/1 "DM Mono", monospace; }.file-details { flex: 1; display: flex; flex-direction: column; gap: 5px; }.file-details strong { font-size: 14px; }.file-details span, .install-footnote { color: var(--muted); font: 11px/1.5 "DM Mono", monospace; }.file-check { color: var(--lime); font-size: 22px; }.install-button { width: 100%; }.install-footnote { margin: 17px 0 0; text-align: center; }.help-details { margin-top: 52px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.help-details summary { padding: 17px 0; color: var(--muted); cursor: pointer; font-size: 13px; }.help-details p { max-width: 570px; padding-bottom: 18px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.back-link span { color: var(--lime); margin-left: 7px; font-size: 16px; }
@media (max-width: 820px) { .page-shell { padding: 0 20px; }.topbar { height: 72px; }.availability { display: none; }.hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 28px 0 32px; }.hero-art { order: 1; min-height: 225px; box-shadow: 14px 14px 0 rgba(159,140,255,.15); }.hero-copy { order: 2; }.hero-copy h1 { font-size: 54px; }.hero-stamp { right: 12px; bottom: 25px; }.hero-actions { align-items: stretch; flex-direction: column; gap: 11px; margin-top: 25px; }.button-primary { width: 100%; }.microcopy { align-self: center; }.signal-row { grid-template-columns: 1fr 1fr; gap: 22px 12px; }.signal-row div:last-child { grid-column: 1 / -1; }.preview-section { padding: 84px 0 90px; }.section-heading { display: block; margin-bottom: 38px; }.section-heading h2, .steps h2 { font-size: 38px; }.section-heading > p { margin-top: 22px; }.preview-grid { grid-template-columns: 1fr 1fr; gap: 12px; }.preview-card { min-height: 350px; padding: 12px; }.preview-card-offset { margin-top: 35px; }.phone-frame { border-radius: 20px; padding: 6px; }.phone-screen { height: 245px; border-radius: 15px; padding: 13px 11px; }.phone-screen strong { bottom: 43px; left: 11px; font-size: 20px; }.phone-screen small { left: 11px; bottom: 14px; font-size: 7px; }.screen-orbit { width: 120px; height: 120px; top: 59px; right: -31px; }.screen-time { font-size: 8px; }.screen-chip { font-size: 6px; }.download-note { grid-column: 1 / -1; min-height: 0; margin-top: 25px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }.download-note p { max-width: none; margin: 22px 0 20px; }.steps { display: block; padding-bottom: 85px; }.steps ol { margin-top: 45px; }.footer { padding-bottom: 88px; font-size: 8px; }.floating-download { position: fixed; right: 14px; bottom: 14px; left: 14px; z-index: 4; display: flex; align-items: center; justify-content: space-between; min-height: 53px; padding: 0 16px 0 20px; color: var(--bg); background: var(--lime); box-shadow: 0 8px 28px rgba(0,0,0,.3); font-size: 13px; font-weight: 800; opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .2s ease, transform .2s ease; }.floating-download.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }.floating-download b { font-size: 20px; font-weight: 400; }.install-main { padding: 60px 0 70px; }.install-main h1 { font-size: 54px; }.file-panel { align-items: flex-start; }.file-check { display: none; }.file-details span { overflow-wrap: anywhere; }.install-shell .footer { margin-top: auto; padding-bottom: 30px; } }
@media (max-height: 720px) and (max-width: 820px) { .topbar { height: 64px; }.hero-art { min-height: 120px; }.hero { gap: 14px; padding: 14px 0; }.hero-copy h1 { margin-bottom: 14px; font-size: 42px; }.eyebrow { margin-bottom: 12px; }.lede { margin-bottom: 0; font-size: 13px; line-height: 1.5; }.hero-actions { margin-top: 12px; }.hero-stamp { display: none; }.button { min-height: 53px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button, .floating-download { transition: none; } }
