:root {
  color-scheme: dark;
  --bg: #071321;
  --panel: #0c1c2b;
  --ink: #f1f3f5;
  --muted: #a9b7c6;
  --gold: #e5c579;
  --line: #bdcddd20;
  --content: 1664px;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--ink);
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 32px}
body {margin: 0; min-width: 320px; line-height: 1.75}
a {color: inherit; text-decoration: none}
button {font: inherit}
h1,h2,h3,p,figure,dl,dd {margin: 0}
img,svg {display: block; max-width: 100%}
a:focus-visible,button:focus-visible,summary:focus-visible {outline: 2px solid var(--gold); outline-offset: 6px}
[hidden] {display: none!important}
.wrap {width: min(var(--content), calc(100% - 96px)); margin-inline: auto}
.skip {position: fixed; z-index: 100; top: -100px; left: 20px; padding: 10px 18px; background: var(--gold); color: var(--bg)}
.skip:focus {top: 12px}
.header {position: absolute; inset: 0 0 auto; z-index: 10; border-bottom: 1px solid #ffffff0c}
.nav {height: 104px; display: flex; justify-content: space-between; align-items: center; gap: 30px}
.brand {display: inline-flex; align-items: center; gap: 14px; font-size: 23px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap}
.brand img {width: 44px; height: 44px; border-radius: 14px}
.nav-links {display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 700}
.nav-links a {transition: color .18s}
.nav-links a:hover {color: var(--gold)}
.nav-download {padding: 12px 21px; border: 1px solid #e5c57960; border-radius: 999px; color: var(--gold); background: #07132155}
.nav-download span {margin-left: 15px}
.hero {isolation: isolate; position: relative; overflow: hidden; background: var(--bg)}
.hero-art {position: absolute; inset: 0 0 0 auto; z-index: -3; width: 86%; max-width: none; height: 100%; object-fit: cover; object-position: 65% 44%; opacity: .68}
.hero::before {content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #071321 0%, #071321ee 22%, #07132198 46%, #07132112 85%), linear-gradient(0deg,#071321 1%,#07132111 40%,#07132120 78%,#07132190)}
.hero-ring {position: absolute; width: min(48vw,780px); aspect-ratio: 1; border: 1px solid #e5c57922; border-radius: 50%; top: 17%; right: 3.5%; z-index: -1; box-shadow: 0 0 0 60px #e5c57904,0 0 0 120px #e5c57902; pointer-events: none}
.hero-content {position: relative; min-height: clamp(760px,94svh,1040px); display: flex; align-items: center; padding-top: 140px; padding-bottom: 150px}
.hero-copy {width: min(820px,67%)}
.eyebrow {font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: .16em; color: var(--gold)}
h1 {margin-top: 24px; font-size: clamp(62px,6.4vw,108px); font-weight: 700; line-height: 1.15; letter-spacing: -.055em}
h1 span {color: #eed48f}
.hero-intro {margin-top: 31px; font-size: 18px; line-height: 1.95; color: #c0cbd7}
.hero-download {margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap}
.mirror-download {color: var(--gold); font-size: 14px; line-height: 1.6; text-underline-offset: 4px}
.mirror-download:hover {text-decoration: underline}
.mirror-download span {color: #c1cad3; margin-left: 4px}
.button {display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 59px; padding: 15px 27px; background: var(--gold); border: 1px solid var(--gold); border-radius: 999px; color: #111c2a; font-size: 16px; line-height: 1.5; font-weight: 700; transition: transform .2s, background .2s; cursor: pointer}
.button:hover {background: #f1d99f; transform: translateY(-2px)}
.button svg {width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round}
.release-meta {margin-top: 17px; color: #9cabbc; font-size: 12px; letter-spacing: .01em}
.release-meta span {padding: 0 8px; opacity: .5}
.offer-pill {display: inline-flex; align-items: center; gap: 12px; color: #e0c47d; font-size: 13px; margin-top: 15px}
.offer-dot {width: 6px; height: 6px; background: var(--gold); border-radius: 50%}
.offer-pill span:last-child {margin-left: 12px}
.hero-credit {position: absolute; right: 0; bottom: 99px; text-align: right}
.hero-credit span {font-size: 10px; color: #c1c8d0; letter-spacing: .25em}
.hero-credit strong {display: block; font-size: 23px; color: #ddc994; font-weight: 400; letter-spacing: .2em; margin-top: 6px}
.scroll-cue {position: absolute; bottom: 40px; left: 0; display: flex; align-items: center; gap: 13px; color: #8e9cac; font-size: 11px; letter-spacing: .1em}
.scroll-cue span {font-size: 20px; color: var(--gold)}
.mode-band {background: #0a1826; border-block: 1px solid var(--line)}
.modes {display: grid; grid-template-columns: repeat(3,minmax(0,1fr))}
.mode {display: flex; align-items: center; gap: 23px; padding: 37px 30px; position: relative; transition: background .2s}
.mode:first-child {padding-left: 0}
.mode+ .mode {border-left: 1px solid var(--line)}
.mode:hover {background: #e5c57906}
.mode svg {width: 37px; height: 37px; flex: 0 0 37px; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round}
.mode small {display: block; font-size: 9px; letter-spacing: .15em; color: #a99769; margin-bottom: 5px}
.mode h2 {font-size: 22px; font-weight: 700; line-height: 1.5}
.mode p {font-size: 13px; color: #98aabb; margin-top: 5px}
.mode>span {font-size: 23px; color: #7f92a3; margin-left: auto}
.chapter {padding-block: clamp(96px,8vw,148px)}
.chapter-layout {display: grid; grid-template-columns: minmax(330px,.87fr) minmax(0,1.4fr); gap: clamp(40px,5vw,88px); align-items: center}
.chapter-copy {max-width: 580px}
.chapter h2,.help h2 {font-size: clamp(40px,3.6vw,64px); line-height: 1.24; font-weight: 700; letter-spacing: -.055em; margin-top: 20px}
.chapter-intro {font-size: 17px; color: var(--muted); line-height: 1.95; margin-top: 28px; max-width: 520px}
.feature-list {margin-top: 36px}
.feature-list>div {padding: 18px 0; border-top: 1px solid var(--line)}
.feature-list dt {font-size: 17px; font-weight: 700; color: #e1e7ed}
.feature-list dd {margin-top: 7px; font-size: 14px; line-height: 1.9; color: #9badbe}
.quiet-note {font-size: 11px; color: #788b9d; margin-top: 18px}
.product-figure {min-width: 0; position: relative}
.product-figure>a {display: block; overflow: hidden; border-radius: 16px; border: 1px solid #c3a86933; background: #0a1825; box-shadow: 0 40px 100px #00000040; transition: transform .25s,border-color .25s}
.product-figure>a:hover {transform: translateY(-4px); border-color: #e5c57988}
.product-figure img {width: 100%; height: auto}
.product-figure figcaption {display: flex; justify-content: space-between; gap: 15px; margin-top: 20px; color: #7f94a8; font-size: 11px; letter-spacing: .03em}
.product-figure figcaption span:last-child {white-space: nowrap; color: #c0ac78}
.intel {background: radial-gradient(ellipse at 100% 40%,#18365244,transparent 65%),var(--bg)}
.loadouts {background: #0c1c2b; border-block: 1px solid #ffffff09}
.reversed {grid-template-columns: minmax(0,1.4fr) minmax(330px,.87fr)}
.reversed .chapter-copy {grid-column: 2; grid-row: 1; justify-self: end}
.reversed .product-figure {grid-column: 1; grid-row: 1}
.loadouts h2 span {color: var(--gold)}
.section-heading {display: flex; justify-content: space-between; gap: 70px; align-items: end; margin-bottom: 58px}
.section-heading>p {font-size: 16px; line-height: 1.95; color: var(--muted); padding-bottom: 5px}
.aram-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 26px}
.aram-feature {position: relative; isolation: isolate; overflow: hidden; min-height: 650px; border: 1px solid #c4a97240; border-radius: 22px; display: flex; flex-direction: column; justify-content: space-between; padding: 34px 42px 43px; background: #102535}
.scene-art {position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 57% 35%; opacity: .57; transition: transform .7s}
.aram-feature::before {position: absolute; content: ''; inset: 0; z-index: -2; background: linear-gradient(0deg,#081726 2%,#081726e8 25%,#08172620 90%),linear-gradient(90deg,#08172655,transparent)}
.aram-feature:hover .scene-art {transform: scale(1.025)}
.scene-top {display: flex; justify-content: space-between; gap: 20px; font-size: 11px; color: #d2d8dc; letter-spacing: .05em}
.scene-top>span:last-child {color: var(--gold)}
.scene-copy {position: relative; z-index: 1; margin-top: 150px}
.scene-copy h3 {font-size: clamp(31px,2.6vw,46px); line-height: 1.3; letter-spacing: -.04em; margin-top: 14px}
.scene-copy>p:not(.eyebrow) {margin-top: 23px; font-size: 15px; line-height: 1.95; max-width: 490px; color: #bac8d4}
.scene-note {display: block; font-size: 11px; color: #8a9cad; margin-top: 22px}
.shortcut {display: flex; align-items: center; gap: 14px; margin: 53px 0 0; color: #e2d3ac}
.shortcut kbd {display: grid; place-items: center; width: 75px; height: 75px; border-radius: 17px; border: 1px solid #efd28680; border-bottom: 5px solid #7c724f; background: #0b2134cc; font-family: inherit; font-size: 48px; line-height: 1; box-shadow: 0 8px 30px #00000055}
.shortcut span {font-size: 12px; line-height: 1.9}
.mayhem-feature .scene-copy {margin-top: 37px}
.activity {background: #e0c689; color: #112131; padding-block: 102px; position: relative; overflow: hidden}
.activity::after {position: absolute; content: ''; width: 650px; height: 650px; border: 1px solid #07132112; border-radius: 50%; right: -230px; top: -350px; pointer-events: none; box-shadow: 0 0 0 55px #07132103,0 0 0 110px #07132103}
.activity-layout {display: grid; grid-template-columns: 1.15fr .85fr; gap: 45px 110px; position: relative; z-index: 1}
.activity .eyebrow {color: #695735}
.activity h2 {max-width: 780px; margin-top: 24px; font-size: clamp(40px,3.7vw,66px); line-height: 1.32; letter-spacing: -.04em; font-weight: 700}
.activity-copy>p:not(.eyebrow) {font-size: 16px; line-height: 1.95; color: #5e5645; margin-top: 23px}
.activity .button {margin-top: 32px}
.button-dark {color: #edcf83; background: #112131; border-color: #112131}
.button-dark:hover {background: #1b3044}
.activity-right {align-self: center; display: grid; grid-template-columns: 1fr; gap: 26px}
.quota {padding-bottom: 22px; border-bottom: 1px solid #11213125}
.quota strong {font-size: 108px; line-height: 1; font-weight: 700; letter-spacing: -.07em; font-variant-numeric: tabular-nums}
.quota>span {font-size: 25px; color: #6e6042; margin-left: 16px}
.quota p {font-size: 13px; margin-top: 12px; color: #64583f}
.trial-steps {list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 15px}
.trial-steps span {font-size: 11px; color: #6e6042; display: inline-block; width: 37px}
.rules {grid-column: 1/-1; padding-top: 25px; border-top: 1px solid #11213125; font-size: 13px; color: #4c4739}
.rules summary {display: inline-flex; align-items: center; gap: 30px; cursor: pointer; font-weight: 700; color: #26332f}
.rules ul {padding-left: 18px; margin-bottom: 0; line-height: 2}
.activity a:focus-visible,.activity summary:focus-visible {outline-color: #112131}
.help-layout {display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px}
.faq {border-top: 1px solid var(--line)}
.faq details {border-bottom: 1px solid var(--line)}
.faq summary {display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 17px; padding: 24px 0; cursor: pointer; font-weight: 700}
.faq summary span {color: var(--gold); font-size: 19px; font-weight: 400}
.faq details[open] summary span {transform: rotate(45deg)}
.faq details>p {font-size: 15px; line-height: 1.95; color: var(--muted); padding-bottom: 24px; max-width: 680px}
.footer {padding: 80px 0 35px; background: #040d17; border-top: 1px solid var(--line)}
.footer-grid {display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 65px}
.footer-brand .brand {font-size: 29px}
.footer-brand .brand img {width: 52px; height: 52px}
.footer-brand p {font-size: 14px; line-height: 1.9; color: #9badbf; margin-top: 21px}
.footer-domain {display: block; font-size: 11px; color: #63788d; margin-top: 20px; letter-spacing: .05em}
.footer h3 {font-size: 14px; font-weight: 700; color: #d8dfe6; margin-bottom: 22px}
.footer-links {display: flex; flex-direction: column; align-items: start; gap: 13px; font-size: 13px; color: #94a7b9}
.footer-links a:hover {color: var(--gold)}
.footer-bottom {margin-top: 72px; padding-top: 27px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 80px; color: #697e92; font-size: 11px; line-height: 1.9}
.footer-bottom p {max-width: 1020px; margin-top: 8px}
.footer-bottom p:first-child {margin-top: 0; color: #96a9b8}
.footer-contact {font-size: 13px; color: #96a9b8; overflow-wrap: anywhere}
.footer-contact a {color: var(--gold); text-decoration: underline; text-underline-offset: 3px}
.footer-contact a:hover {color: var(--ink)}
.footer-bottom>a {white-space: nowrap}
@media(min-width:1800px) {.chapter-layout{gap:90px}.hero-content{min-height:960px}.hero-art{width:82%}.scene-copy>p:not(.eyebrow){font-size:17px}.feature-list dd{font-size:15px}}
@media(max-width:1190px) {
  .wrap{width:calc(100% - 64px)}.nav-links{gap:20px}.nav-links>a:not(.nav-download){font-size:12px}.chapter-layout,.reversed{grid-template-columns:minmax(290px,.85fr) minmax(0,1fr);gap:40px}.reversed{grid-template-columns:minmax(0,1fr) minmax(290px,.85fr)}
  .chapter h2{font-size:40px}.chapter-intro{font-size:16px}.feature-list dt{font-size:16px}.feature-list dd{font-size:13px}.mode{gap:17px;padding:28px 19px}.mode h2{font-size:19px}.mode p{font-size:11px}.mode svg{width:28px;flex-basis:28px}.mode>span{font-size:18px}
  .aram-feature{padding:28px;min-height:630px}.section-heading{gap:40px}.section-heading>p{font-size:14px}.activity-layout{gap:45px 60px}.help-layout{gap:65px}.footer-grid{gap:35px}
}
@media(max-width:900px) {
  .nav-links>a:not(.nav-download){display:none}.hero-copy{width:85%;max-width:700px}.hero-art{width:125%;right:-30%;opacity:.55}.hero::before{background:linear-gradient(90deg,#071321ee,#07132180 65%,#07132125),linear-gradient(0deg,#071321,transparent 50%,#07132130)}
  .chapter-layout,.reversed{grid-template-columns:1fr;gap:45px}.chapter-copy{max-width:760px}.chapter-intro{max-width:680px}.reversed .chapter-copy,.reversed .product-figure{grid-column:auto;grid-row:auto;justify-self:stretch}.chapter h2{font-size:48px}.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature-list dd{font-size:13px}.product-figure{max-width:900px;width:100%}
  .section-heading{align-items:start;flex-direction:column;gap:25px}.aram-grid{gap:18px}.aram-feature{min-height:635px}.scene-copy h3{font-size:32px}.scene-copy>p:not(.eyebrow){font-size:14px}.scene-copy{margin-top:160px}.mayhem-feature .scene-copy{margin-top:25px}
  .mode{padding:25px 15px;gap:15px;align-items:start}.mode svg{display:none}.mode:first-child{padding-left:0}.mode h2{font-size:18px}.mode>span{display:none}.mode small{font-size:8px}.mode p{font-size:11px}
  .activity-layout{grid-template-columns:1.2fr .8fr;gap:35px}.activity h2{font-size:38px}.activity-copy>p:not(.eyebrow){font-size:14px}.quota strong{font-size:87px}.help-layout{grid-template-columns:1fr;gap:40px}.footer-grid{grid-template-columns:repeat(3,1fr);gap:45px}.footer-brand{grid-column:1/-1}
}
@media(max-width:600px) {
  .wrap{width:calc(100% - 40px)}.nav{height:84px;gap:15px}.brand{font-size:19px;gap:10px}.brand img{width:36px;height:36px;border-radius:11px}.nav-download{padding:8px 13px;font-size:11px}.nav-download span{margin-left:6px}
  .hero-content{min-height:800px;padding-top:165px;padding-bottom:160px;align-items:start}.hero-copy{width:100%}.hero-art{width:175%;right:-63%;opacity:.43;object-position:65% 38%}.hero::before{background:linear-gradient(90deg,#071321a8,#07132144),linear-gradient(0deg,#071321 5%,#0713210a 75%,#07132188)}
  .eyebrow{font-size:10px;letter-spacing:.13em}h1{font-size:clamp(42px,10.3vw,62px);letter-spacing:-.055em;line-height:1.24;margin-top:25px}.hero-intro{font-size:14px;line-height:2;margin-top:25px}.hero-download{margin-top:30px}.button{font-size:14px;min-height:53px;padding:13px 21px}.release-meta{font-size:10px}.release-meta span{padding:0 5px}.offer-pill{font-size:11px;gap:9px}.offer-pill span:last-child{margin-left:2px}.hero-credit{bottom:60px}.hero-credit strong{font-size:18px}.hero-credit span{font-size:9px}.scroll-cue{bottom:55px;font-size:10px}.hero-ring{width:440px;right:-210px;top:120px}
  .mode-band{padding-block:7px}.modes{grid-template-columns:1fr}.mode,.mode:first-child{padding:22px 0;gap:20px;align-items:center}.mode+.mode{border-left:0;border-top:1px solid var(--line)}.mode svg{display:block;flex-basis:28px}.mode>span{display:block;margin-left:auto;font-size:20px}.mode small{font-size:8px;margin:0}.mode h2{font-size:19px}.mode p{font-size:12px;margin-top:2px}
  .chapter{padding-block:76px}.chapter-layout,.reversed{gap:34px}.chapter h2,.help h2{font-size:clamp(32px,9vw,45px);line-height:1.28;margin-top:18px}.chapter-intro{font-size:15px;margin-top:23px}.feature-list{display:block;margin-top:27px}.feature-list>div{padding-block:18px}.feature-list dt{font-size:16px}.feature-list dd{font-size:13px;line-height:1.9}.quiet-note{font-size:10px;margin-top:11px}.product-figure>a{border-radius:10px}.product-figure figcaption{font-size:9px;gap:10px;margin-top:13px;letter-spacing:0}
  .section-heading{gap:20px;margin-bottom:31px}.section-heading>p{font-size:14px}.aram-grid{grid-template-columns:1fr;gap:20px}.aram-feature{min-height:570px;padding:26px;border-radius:15px}.scene-top{font-size:10px}.scene-copy{margin-top:150px}.scene-copy h3{font-size:32px}.scene-copy>p:not(.eyebrow){font-size:14px;margin-top:20px}.scene-note{font-size:10px}.shortcut{margin-top:45px}.shortcut kbd{width:62px;height:62px}.scene-art{object-position:60% 35%}
  .activity{padding-block:68px}.activity-layout{grid-template-columns:1fr;gap:34px}.activity h2{font-size:38px;margin-top:23px}.activity-copy>p:not(.eyebrow){font-size:14px}.activity-right{display:grid;grid-template-columns:.7fr 1fr;gap:27px;align-items:center}.quota{padding:0;border:0}.quota strong{font-size:78px}.quota>span{font-size:17px;margin-left:9px}.quota p{font-size:11px}.trial-steps{font-size:12px;gap:13px;border-left:1px solid #11213125;padding-left:19px}.trial-steps span{font-size:9px;width:24px}.rules{font-size:12px;padding-top:22px}.rules summary{font-size:12px}
  .help-layout{gap:30px}.faq summary{font-size:15px;padding:22px 0}.faq details>p{font-size:13px}.footer{padding-top:55px}.footer-grid{grid-template-columns:1fr 1fr;gap:35px 24px}.footer-brand .brand{font-size:27px}.footer-brand .brand img{width:47px;height:47px}.footer-brand p{font-size:13px}.footer h3{font-size:13px;margin-bottom:17px}.footer-links{font-size:12px;gap:11px}.footer-bottom{margin-top:40px;gap:22px;flex-direction:column;font-size:10px}.footer-bottom p{line-height:1.95}
}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
