:root { --bg: #06091b; --bar: #121226; --surface: #161831; --surface-2: #1b1a3c; --line: rgba(176,164,255,.16); --ink: #f8f7ff; --soft: #b9b5c9; --muted: #807b9c; --accent: #9665ff; --accent-soft: #b499ff; --max: 1120px; color-scheme: dark; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; line-height: 1.62; } body::before { content: ""; position: fixed; z-index: -1; inset: 0; background: radial-gradient(800px 600px at 60% 25%, rgba(57,40,129,.16), transparent 72%), radial-gradient(600px 520px at 15% 75%, rgba(19,48,96,.11), transparent 72%); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input { font: inherit; } .frame { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar { height: 62px; background: var(--bar); border-bottom: 1px solid rgba(255,255,255,.035); } .nav { height: 100%; display: flex; align-items: center; justify-content: space-between; } .wordmark { color: #fff; font-weight: 800; letter-spacing: -.05em; font-size: 16px; } .nav-menu { height: 100%; display: flex; gap: 29px; align-items: center; } .nav-menu a { position: relative; display: flex; align-items: center; height: 100%; color: #aaa7bc; font-size: 12px; font-weight: 700; } .nav-menu a:hover, .nav-menu a.active { color: #fff; } .nav-menu a.active::after { content: ""; position: absolute; bottom: 11px; left: 50%; width: 21px; height: 2px; transform: translateX(-50%); background: var(--accent); } .nav-toggle { display: none; border: 1px solid var(--line); border-radius: 5px; padding: 5px 9px; color: var(--ink); background: #1a1a35; font-size: 12px; }
.home-hero { min-height: 540px; overflow: hidden; background: linear-gradient(116deg, #090c29, #11113b 65%, #28155a); } .hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 540px; align-items: center; gap: 35px; } .hero-copy h1 { margin: 0; font-size: clamp(37px, 4vw, 55px); line-height: 1.15; letter-spacing: -.07em; } .hero-copy > p { margin: 13px 0 10px; color: #d2cee1; font-size: 18px; font-weight: 700; } .hero-copy > strong { display: block; color: #f3e780; font-size: 13px; } .download-main { display: grid; gap: 1px; width: min(355px,100%); margin-top: 70px; padding: 16px 25px; border: 1px solid rgba(164,133,255,.64); border-radius: 10px; background: linear-gradient(125deg, #4036a2, #7040cf); color: #fff; font-size: 18px; font-weight: 800; box-shadow: 0 14px 26px rgba(49,22,138,.31); } .download-main small { color: #ddd5ff; font-size: 10px; font-weight: 500; } .platform-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; max-width: 500px; } .platform-row a { min-height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(18,18,53,.78); color: #d1cce3; font-size: 11px; font-weight: 700; } .platform-row a:hover { border-color: rgba(177,146,255,.65); } .client-visual { margin: 0; transform: translateY(7px); } .client-visual img { width: 100%; filter: drop-shadow(0 26px 34px rgba(0,0,0,.35)); }
.network-section { padding: 106px 0 90px; text-align: center; } .network-heading h2, .about-panel h2 { margin: 0; font-size: 31px; letter-spacing: -.06em; } .network-heading p { margin: 7px 0 26px; color: var(--muted); font-size: 13px; } .world-map { width: min(660px, 100%); margin: 0 auto; mix-blend-mode: screen; opacity: .92; } .network-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 660px; margin: 2px auto 0; } .network-points span { padding: 13px 0; border-bottom: 1px solid rgba(179,165,255,.15); color: #9994b2; font-size: 13px; font-weight: 700; } .network-points .selected { border-bottom-color: #6ed6ff; color: #fff; }
.about-panel { margin-bottom: 110px; padding: 34px; border: 1px solid var(--line); border-radius: 12px; background: rgba(18,20,47,.78); } .about-panel h2 { font-size: 26px; } .about-lead { max-width: 830px; margin: 10px 0 27px; color: #bbb7cd; font-size: 13px; } .about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 54px; } .about-grid h3 { margin: 0 0 5px; color: var(--accent-soft); font-size: 12px; } .about-grid p { margin: 0; color: #ada9bf; font-size: 12px; }
.updates { padding: 82px 0 96px; background: linear-gradient(104deg, #0a1133, #271435); } .title-center { margin-bottom: 31px; text-align: center; } .title-center p { margin: 0 0 3px; color: #b19bff; font-size: 11px; font-weight: 800; letter-spacing: .15em; } .title-center h2 { margin: 0; font-size: 30px; letter-spacing: -.06em; } .title-center span { color: var(--muted); font-size: 12px; } .update-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .update-box { padding: 24px; border: 1px solid rgba(164,159,255,.17); border-radius: 12px; background: rgba(16,24,56,.79); } .update-box h3 { margin: 0 0 13px; font-size: 17px; } .update-box > a { display: grid; grid-template-columns: 27px 1fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(179,165,255,.1); color: #c2bdd0; font-size: 12px; } .update-box > a:last-child { border-bottom: 0; } .update-box b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #282956; color: #c8beff; font-size: 10px; } .accent-box { background: rgba(57,23,64,.76); } .accent-box b { background: #632c61; color: #ffd2ef; }
.catalog-hero, .help-strip { position: relative; overflow: hidden; text-align: center; background: #12123a url("./images/hero-aurora.png") center 44% / cover no-repeat; } .catalog-hero::before, .help-strip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,40,.72), rgba(42,16,71,.43), rgba(10,12,40,.72)); } .catalog-hero .frame, .help-strip .frame { position: relative; } .catalog-hero { min-height: 362px; padding: 77px 0 50px; } .catalog-hero p, .help-strip > .frame > p { margin: 0 0 9px; color: #a9a5ff; font-size: 12px; font-weight: 800; letter-spacing: .13em; } .catalog-hero h1 { margin: 0; font-size: 41px; letter-spacing: -.065em; } .catalog-hero span { display: block; max-width: 600px; margin: 12px auto 26px; color: #bcb8ce; font-size: 14px; } .catalog-search, .compact-search { display: flex; max-width: 720px; margin: 0 auto; padding: 8px; border: 1px solid rgba(169,137,255,.38); border-radius: 10px; background: rgba(20,18,60,.81); } .catalog-search input, .compact-search input { width: 100%; min-width: 0; height: 38px; padding: 0 13px; border: 0; border-radius: 5px; outline: 0; background: #080a28; color: #fff; font-size: 13px; } .catalog-search input::placeholder, .compact-search input::placeholder { color: #777292; } .catalog-search button, .compact-search button { border: 0; border-radius: 6px; padding: 0 22px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; } .catalog { padding: 84px 0 112px; } .catalog-head { margin-bottom: 30px; } .catalog-head p { margin: 0 0 5px; color: #7fc6ff; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .catalog-head h2 { margin: 0; font-size: 29px; letter-spacing: -.055em; } .game-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 29px; } .game-card { text-align: center; } .game-card[hidden], .app-card[hidden] { display: none; } .game-card img { width: 100%; aspect-ratio: .66; border-radius: 13px; object-fit: cover; object-position: center; filter: saturate(.78) brightness(.85); } .game-card:nth-child(2) img { object-position: 28% center; } .game-card:nth-child(3) img { object-position: 70% center; } .game-card h3 { margin: 11px 0 0; font-size: 14px; line-height: 1.35; } .app-title { margin-top: 116px; } .app-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 25px; } .app-card { text-align: center; } .app-card span { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0 auto 11px; border-radius: 18px; background: linear-gradient(145deg, #f8a553, #f05c30); color: #fff; font-size: 28px; font-weight: 900; } .app-card:nth-child(2) span { background: linear-gradient(145deg,#6c8cff,#e8f4ff); } .app-card:nth-child(3) span { background: linear-gradient(145deg,#337af2,#9dc9ff); } .app-card:nth-child(4) span { background: linear-gradient(145deg,#f35742,#f0934a); } .app-card:nth-child(5) span { background: linear-gradient(145deg,#635dd6,#afb4ff); } .app-card:nth-child(6) span { background: linear-gradient(145deg,#ff8d21,#ff3c29); } .app-card h3 { margin: 0; color: #ded9e8; font-size: 13px; } .empty-state { padding: 45px; text-align: center; border: 1px dashed var(--line); border-radius: 9px; } .empty-state h2 { margin: 0 0 11px; font-size: 22px; } .empty-state a { color: var(--accent-soft); font-size: 13px; }
.help-strip { min-height: 266px; padding: 46px 0 26px; } .help-strip h1 { margin: 0 0 17px; font-size: 35px; letter-spacing: -.06em; } .compact-search { max-width: 630px; } .hot-links { display: flex; justify-content: center; gap: 8px; margin-top: 8px; } .hot-links a { padding: 3px 7px; border-radius: 4px; background: rgba(81,58,140,.35); color: #c2b8e3; font-size: 10px; } .reading { display: grid; grid-template-columns: minmax(0, 790px) 270px; gap: 18px; align-items: start; padding-top: 30px; padding-bottom: 90px; } .reading-paper, .detail-side section, .detail-side nav { border: 1px solid var(--line); border-radius: 10px; background: rgba(21,22,50,.85); } .reading-paper header { padding: 31px 34px 20px; border-bottom: 1px solid var(--line); } .reading-paper header p { margin: 0 0 7px; color: #a99aff; font-size: 11px; font-weight: 800; } .reading-paper h2 { margin: 0; font-size: 28px; line-height: 1.3; letter-spacing: -.055em; } .reading-paper time { display: block; margin-top: 17px; color: #827d97; font-size: 11px; } .prose { padding: 26px 34px 39px; color: #c0bbce; font-size: 14px; } .prose h3 { margin: 32px 0 10px; color: #fff; font-size: 19px; scroll-margin-top: 15px; } .prose h4 { margin: 24px 0 6px; color: #fff; font-size: 15px; } .prose p { margin: 0 0 13px; } .prose ul { margin: 0 0 13px; padding-left: 19px; } .prose li { margin: 5px 0; } .prose img { width: 100%; margin: 28px 0 4px; border-radius: 6px; opacity: .84; } .device-notes { margin: 18px 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .device-notes p { display: grid; grid-template-columns: 100px 1fr; gap: 10px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; } .device-notes p:last-child { border-bottom: 0; } .device-notes b { color: #d3c6ff; } .detail-side { position: sticky; top: 18px; display: grid; gap: 12px; } .detail-side section, .detail-side nav { padding: 18px; } .detail-side h3 { margin: 0 0 9px; font-size: 16px; } .detail-side p { margin: 0 0 12px; color: var(--soft); font-size: 12px; } .detail-side a { display: block; padding: 7px 0; border-bottom: 1px solid rgba(176,164,255,.1); color: #beb7d0; font-size: 12px; } .detail-side a:last-child { border-bottom: 0; } .detail-side section:first-child a { display: inline-flex; padding: 8px 11px; border: 0; border-radius: 5px; background: var(--accent); color: #fff; font-weight: 800; }
.footer { background: #121225; border-top: 1px solid rgba(255,255,255,.04); } .footer-inner { display: grid; grid-template-columns: .7fr 1.25fr 1.9fr; gap: 25px; align-items: center; padding: 34px 0; } .footer-inner > div { display: flex; flex-wrap: wrap; gap: 8px 16px; } .footer-inner > div a, .footer-inner p { color: #87819e; font-size: 11px; } .footer-inner p { margin: 0; }
@media (max-width: 800px) { .frame { width: min(100% - 32px, var(--max)); } .topbar { height: 58px; } .nav-toggle { display: block; } .nav-menu { display: none; position: absolute; z-index: 4; top: 58px; right: 16px; left: 16px; height: auto; padding: 8px 15px; border: 1px solid var(--line); border-radius: 8px; background: #17172e; } .nav-menu.open { display: grid; } .nav-menu a { height: 36px; } .nav-menu a.active::after { display: none; } .hero-grid { grid-template-columns: 1fr; padding: 64px 0 0; } .home-hero { min-height: 0; } .download-main { margin-top: 31px; } .client-visual { max-width: 600px; margin: 15px auto -15px; } .network-section { padding: 70px 0; } .about-panel { margin-bottom: 70px; } .game-grid { grid-template-columns: repeat(3, 1fr); } .app-grid { grid-template-columns: repeat(3, 1fr); } .reading { grid-template-columns: 1fr; } .detail-side { position: static; grid-template-columns: repeat(2, 1fr); } .detail-side nav { grid-row: span 2; } .footer-inner { grid-template-columns: 1fr; gap: 15px; } }
@media (max-width: 520px) { .hero-copy h1 { font-size: 37px; } .hero-copy > p { font-size: 16px; } .platform-row { grid-template-columns: 1fr; } .network-heading h2, .about-panel h2 { font-size: 26px; } .network-points { grid-template-columns: repeat(2, 1fr); } .about-panel { padding: 22px; } .about-grid, .update-grid { grid-template-columns: 1fr; } .catalog-hero { min-height: 326px; padding-top: 65px; } .catalog-hero h1 { font-size: 33px; } .catalog-search button, .compact-search button { padding: 0 15px; } .catalog { padding: 58px 0 75px; } .game-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } .game-card:nth-child(5) { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; } .app-grid { grid-template-columns: repeat(2, 1fr); gap: 25px 15px; } .app-title { margin-top: 72px; } .help-strip { min-height: 249px; padding-top: 43px; } .help-strip h1 { font-size: 28px; } .reading { padding-top: 17px; padding-bottom: 62px; } .reading-paper header, .prose { padding-left: 22px; padding-right: 22px; } .reading-paper h2 { font-size: 25px; } .detail-side { grid-template-columns: 1fr; } .detail-side nav { grid-row: auto; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.catalog-search button, .compact-search button { min-width: 72px; padding-inline: 18px; white-space: nowrap; }
.feature-carousel { width: min(760px, 100%); margin: 0 auto; }
.feature-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #0b1029; }
.feature-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s ease; }
.feature-stage img.active { opacity: 1; }
.network-points button { appearance: none; padding: 13px 0; border: 0; border-bottom: 1px solid rgba(179,165,255,.15); color: #9994b2; background: transparent; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.network-points button.selected { border-bottom-color: #6ed6ff; color: #fff; }
.network-points button:focus-visible { outline: 2px solid #83d7ff; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .feature-stage img { transition: none; } }
.article-list-page { background: #060a1c; }
.article-list-hero { position: relative; min-height: 350px; overflow: hidden; padding: 48px 0 34px; text-align: center; background: #171842 url("./images/hero-aurora.png") center 38% / cover no-repeat; }
.article-list-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,65,.72), rgba(73,25,95,.36), rgba(20,24,65,.72)); }
.article-list-hero .frame { position: relative; max-width: 720px; }
.help-kicker { display: inline-block; margin: 0 0 9px; padding: 3px 10px; border: 1px solid rgba(177,164,255,.34); border-radius: 99px; color: #c2b7ff; background: rgba(43,41,101,.37); font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.article-list-hero h1 { margin: 0; font-size: 38px; line-height: 1.2; letter-spacing: -.06em; }
.article-list-hero > .frame > span { display: block; max-width: 600px; margin: 11px auto 22px; color: #c4bfd6; font-size: 12px; }
.help-search { display: flex; padding: 7px; border: 1px solid rgba(177,151,255,.38); border-radius: 10px; background: rgba(17,17,57,.85); box-shadow: 0 10px 26px rgba(4,4,28,.26); }
.help-search input { width: 100%; min-width: 0; height: 38px; padding: 0 13px; border: 0; outline: 0; border-radius: 5px; color: var(--ink); background: #090b28; font-size: 12px; }
.help-search input::placeholder { color: #777390; }
.help-search button { min-width: 70px; border: 0; border-radius: 6px; color: #fff; background: var(--accent); font-size: 12px; font-weight: 800; white-space: nowrap; }
.help-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 8px; }
.help-tags a { padding: 3px 8px; border-radius: 4px; color: #b8afcf; background: rgba(49,44,105,.38); font-size: 10px; }
.support-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 890px; padding: 50px 0 42px; text-align: center; }
.support-stats div { min-height: 65px; display: grid; place-content: center; gap: 1px; border-right: 1px solid rgba(168,152,255,.14); }
.support-stats div:last-child { border-right: 0; }
.support-stats strong { color: #b283ff; font-size: 25px; letter-spacing: -.06em; }
.support-stats p { margin: 0; color: #9792af; font-size: 11px; }
.article-library { max-width: 960px; padding-bottom: 102px; }
.library-panel { margin-top: 28px; padding: 24px; border: 1px solid rgba(176,164,255,.14); border-radius: 13px; background: rgba(19,21,50,.86); }
.panel-heading { margin-bottom: 17px; }
.panel-heading p { margin: 0 0 4px; color: #a8a5ff; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.panel-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.05em; }
.panel-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.panel-heading-row > a { color: #bbb0f1; font-size: 11px; font-weight: 800; }
.article-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.article-tile { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(175,163,255,.12); border-radius: 8px; background: #0e1129; transition: border-color .2s ease, transform .2s ease; }
.article-tile:hover { transform: translateY(-2px); border-color: rgba(179,158,255,.42); }
.article-tile[hidden] { display: none; }
.article-tile img { width: 100%; aspect-ratio: 1.42; object-fit: cover; filter: saturate(.83) brightness(.9); }
.article-tile > div { display: flex; flex: 1; flex-direction: column; padding: 12px; }
.article-tile p { margin: 0 0 6px; color: #8bbff6; font-size: 10px; font-weight: 800; }
.article-tile h3 { margin: 0 0 7px; font-size: 14px; line-height: 1.4; letter-spacing: -.025em; }
.article-tile h3 a:hover, .tile-link:hover { color: #c8bbff; }
.article-tile span { color: #8e899f; font-size: 10px; line-height: 1.55; }
.article-tile time { display: block; margin-top: 9px; color: #777390; font-size: 10px; }
.article-tile--plain > div { min-height: 170px; padding-top: 21px; background: linear-gradient(135deg, rgba(58,42,118,.44), rgba(14,17,41,.96)); }
.article-hero-image { width: 100%; max-height: 470px; object-fit: cover; opacity: .92; }
.article-meta { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 34px 24px; border-top: 1px solid var(--line); color: #817c98; font-size: 11px; }
.tile-link { margin-top: auto; padding-top: 12px; color: #a99bdf; font-size: 10px; font-weight: 800; }
.faq-library { margin-top: 23px; padding-top: 26px; background: rgba(24,30,62,.92); }
.faq-card-grid .article-tile { background: #10142f; }
@media (max-width: 800px) { .article-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.article-list-hero { min-height: 326px; }.support-stats { padding-top: 37px; }.library-panel { padding: 17px; } }
@media (max-width: 520px) { .article-list-hero { min-height: 310px; padding-top: 43px; }.article-list-hero h1 { font-size: 31px; }.article-list-hero > .frame > span { padding-inline: 6px; font-size: 11px; }.support-stats { grid-template-columns: 1fr; gap: 12px; padding: 30px 0; }.support-stats div { min-height: 0; padding: 9px 0; border-right: 0; border-bottom: 1px solid rgba(168,152,255,.14); }.support-stats div:last-child { border-bottom: 0; }.article-library { padding-bottom: 62px; }.article-card-grid { grid-template-columns: 1fr; }.article-tile img { aspect-ratio: 1.65; }.panel-heading-row { align-items: flex-start; }.help-search button { min-width: 63px; } }