@charset "UTF-8";
:root { color-scheme: dark; --bg:#111c22; --panel:#19282f; --ink:#f6f3e8; --muted:#b4c3c5; --line:#32434a; --mint:#b9f2d0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; color:var(--ink); background:radial-gradient(ellipse at 85% 15%, #223a3c 0, transparent 43%),var(--bg); font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-underline-offset:5px; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--mint); outline-offset:6px; }
.shell { width:min(1120px,calc(100% - 64px)); margin:auto; }
header { min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.wordmark { font-size:17px; font-weight:700; letter-spacing:.22em; text-decoration:none; white-space:nowrap; }
.mark { display:inline-grid; place-items:center; border:1px solid #86c4b3; border-radius:50%; width:32px; height:32px; margin-right:10px; font-size:17px; letter-spacing:0; color:var(--mint); transform:rotate(-25deg); }
.guide-link { font-size:14px; color:var(--muted); text-decoration:none; padding:12px 0; }
.guide-link span { margin-left:12px; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:center; padding:70px 0 72px; }
.eyebrow { font-size:11px; font-weight:750; letter-spacing:.18em; color:var(--mint); margin:0 0 18px; }
.signal { display:inline-block; width:7px; height:7px; background:var(--mint); border-radius:50%; margin-right:8px; box-shadow:0 0 14px #b9f2d060; }
h1 { font-size:clamp(38px,4.7vw,62px); font-weight:550; line-height:1.1; letter-spacing:-.055em; margin:0 0 24px; }
h1 em { font-style:normal; color:var(--mint); }
.intro { color:var(--muted); font-size:18px; max-width:365px; margin:0 0 30px; }
.download { display:flex; width:fit-content; min-height:58px; min-width:300px; align-items:center; justify-content:space-between; gap:36px; padding:14px 24px; background:var(--mint); color:#122b27; font-weight:750; text-decoration:none; border-radius:8px; box-shadow:0 5px 22px #0002; }
.download:hover { background:#d0ffdf; transform:translateY(-1px); }
.download span { font-size:24px; line-height:1; }
.download-meta { font-size:13px; color:var(--muted); margin:12px 0; }
.download-meta span { margin:0 9px; color:#627c83; }
.availability { color:#9eafb3; font-size:12px; max-width:340px; margin:0; }
.whisp-world { position:relative; height:430px; max-width:470px; width:100%; margin:auto; border-radius:50%; background:radial-gradient(ellipse at 50% 55%,#66846b24,transparent 68%); }
.orbit { position:absolute; border:1px solid #53685c50; border-radius:50%; pointer-events:none; }
.orbit-one { inset:62px 7px 25px; transform:rotate(-23deg); }
.orbit-two { inset:110px 63px 80px; border-style:dashed; transform:rotate(23deg); }
.world-caption { position:absolute; top:5px; left:0; right:0; text-align:center; }
.world-caption span { display:block; color:#a7bcb6; letter-spacing:.25em; font-size:10px; }
.world-caption strong { font-family:Georgia,serif; font-weight:400; font-size:24px; }
.whisp { position:absolute; width:132px; height:126px; margin:0; text-align:center; }
.whisp img { width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 12px 10px #0005); }
.whisp figcaption { position:absolute; left:0; right:0; bottom:9px; font-size:10px; letter-spacing:.07em; color:#c7d3cc; }
.earth { width:222px; height:200px; left:calc(50% - 111px); top:145px; }
.earth figcaption { bottom:20px; color:var(--mint); }
.fire { left:12%; top:54px; }.water { right:10%; top:64px; }
.air { right:-2%; top:186px; }.electricity { right:8%; top:295px; }
.light { left:12%; top:304px; }.shadow { left:-2%; top:183px; }
.release { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; padding:35px 40px; border:1px solid #3a4b50; border-radius:14px; background:#1c2b31b0; }
.release .eyebrow { margin-bottom:8px; font-size:10px; }
h2 { font-size:27px; font-weight:550; line-height:1.25; letter-spacing:-.035em; margin:0; }
.version { display:inline-block; color:#becacb; font-size:12px; margin-top:15px; padding:3px 10px; border:1px solid #43575a; border-radius:5px; }
.changes { list-style:none; padding:0; margin:0; color:#d1dbd8; font-size:14px; }
.changes li { padding:6px 0 6px 24px; position:relative; }
.changes li::before { content:"✓"; position:absolute; left:0; color:var(--mint); }
.install { padding:75px 0 45px; }
.section-heading .eyebrow { margin-bottom:10px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:32px 0; padding:0; list-style:none; }
.steps li { border-top:1px solid var(--line); padding-top:21px; }
.step-number { font-size:12px; color:var(--mint); letter-spacing:.1em; }
h3 { font-size:17px; font-weight:600; margin:10px 0 8px; }
.steps p { font-size:14px; color:var(--muted); margin:0; }
.steps strong { color:#dfe9e5; font-weight:500; }
.update-note { border-left:2px solid #93cbb2; padding:5px 0 5px 22px; margin:38px 0; }
.update-note>strong { font-size:15px; }
.update-note p { margin:5px 0 0; font-size:14px; color:var(--muted); max-width:800px; }
details { border-top:1px solid var(--line); padding:16px 0; color:var(--muted); font-size:14px; }
summary { color:var(--ink); cursor:pointer; padding:6px 0; }
details p { max-width:800px; }
details a { color:var(--mint); }
dl { display:grid; grid-template-columns:100px 1fr; gap:9px 20px; }
dt { color:var(--ink); }dd { margin:0; min-width:0; }
.hash { overflow-wrap:anywhere; font-family:ui-monospace,monospace; font-size:12px; }
footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:28px 0 35px; border-top:1px solid var(--line); color:#9db0b5; font-size:12px; }
footer .wordmark { font-size:12px; }footer p { margin:0; }footer a { padding:8px 0; }
.skip { position:absolute; top:-100px; left:20px; padding:12px; background:var(--mint); color:var(--bg); z-index:2; }.skip:focus { top:10px; }
@media(max-width:800px) {
  .shell { width:calc(100% - 40px); }.hero { gap:0; padding:45px 0; grid-template-columns:1fr; }
  .hero-copy { max-width:520px; }.intro { max-width:390px; }.whisp-world { margin-top:30px; max-width:410px; }
  .release { gap:25px; padding:27px; grid-template-columns:1fr; }.steps { gap:22px; }.install { padding-top:45px; }
}
@media(max-width:500px) {
  header { min-height:78px; }.wordmark { font-size:14px; letter-spacing:.16em; }.mark { width:25px; height:25px; margin-right:5px; font-size:14px; }.guide-link { font-size:12px; }.guide-link span { margin-left:3px; }
  .hero { padding-top:34px; }h1 { font-size:43px; }.intro { font-size:17px; }.download { width:100%; min-width:0; }.availability { max-width:100%; }
  .whisp-world { height:400px; margin-top:35px; }.whisp { width:115px; }.earth { width:210px; left:calc(50% - 105px); }.fire { left:8%; }.water { right:5%; }.air { right:-4%; top:169px; }.shadow { left:-4%; top:168px; }.electricity { right:5%; top:272px; }.light { left:9%; top:281px; }.earth figcaption { bottom:22px; }
  .steps { grid-template-columns:1fr; gap:25px; }.steps li { padding-top:14px; }.steps p { max-width:360px; }h2 { font-size:25px; }.release { padding:25px 22px; }.release .eyebrow { letter-spacing:.12em; }
  footer { flex-direction:column; align-items:flex-start; gap:10px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.download:hover { transform:none; } }