@font-face { font-family: Inter; src: url('./InterVariable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: light;
  --theme-accent: #7c6bff;
  --accent: var(--theme-accent);
  --accent-text: color-mix(in srgb, var(--accent) 80%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 65%, white);
  --secondary-accent: #70a4ff;
  --header: #c9c9c9;
  --background: #9ea1aa;
  --title-background: #d9d9d9;
  --footer: #d9e3ff;
  --text: #202129;
  --card: #15161b;
  --card-border: #2b2d36;
  --card-text: #f0f0f4;
  --muted: #858894;
  --divider: #292b34;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--text); background: var(--background); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
button:hover, a:hover { filter: brightness(1.07); }
p, h1, h2 { margin: 0; }
.skip-link { position: fixed; top: -70px; left: 16px; z-index: 5; padding: 12px; background: white; }
.skip-link:focus { top: 8px; }
.site-header { height: 82px; background: var(--header); }
.header-inner { position: relative; max-width: 1440px; height: 100%; margin: auto; }
.brand { position: absolute; left: 64px; top: 20px; width: 250px; height: 42px; display: flex; align-items: center; gap: 10.587px; }
.brand-logo { flex: 0 0 38.413px; }
.brand-copy { position: relative; display: flex; flex-direction: column; height: 40px; padding-top: 0; }
.brand-copy strong { font-size: 16px; line-height: 22px; font-weight: 600; color: #191a1f; }
.brand-copy small { margin-top: 1px; font-size: 11px; font-weight: 500; line-height: 14px; color: #6c6f78; }
.registered { position: absolute; left: 88px; top: -3px; }
.site-nav { position: absolute; left: calc(50% - 245px); top: 23px; width: 520px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.site-nav > * { display: flex; align-items: center; justify-content: center; flex: 0 0 72px; height: 20px; font-size: 13px; line-height: 16px; font-weight: 500; color: #626570; background: transparent; padding: 0; }
.site-nav [aria-current] { font-size: 20px; }
.account-actions { position: absolute; right: 64px; top: 19px; display: flex; gap: 10px; }
.account-actions button { height: 44px; border-radius: 22px; font-size: 13px; font-weight: 600; }
.register { width: 80px; background: #f7f8fb; border: 1px solid #d9dce5; color: #3a3d46; }
.login { width: 124px; background: #17171c; color: white; }
main { overflow: clip; background: var(--background); }
.main-inner { position: relative; max-width: 1440px; min-height: max(1112px, calc(100svh - 151px)); margin: auto; isolation: isolate; }
.title-band { position: relative; height: 188px; background: var(--title-background); z-index: 1; }
.title-band::before { content: ""; position: absolute; inset: 0; left: calc((1440px - 100vw) / 2); right: calc((1440px - 100vw) / 2); background: inherit; z-index: -1; }
h1 { position: absolute; left: 33px; top: 100px; font-size: 47.386px; font-weight: 600; line-height: 56.499px; letter-spacing: -1.1px; }
.glow { position: absolute; pointer-events: none; z-index: -1; }
.glow-mac { left: -138px; top: 117px; width: 520px; height: 520px; background: var(--accent); mask: url('./glow-mac.svg') center / contain no-repeat; }
.glow-windows { left: 1084px; top: 747px; width: 620px; height: 620px; background: var(--secondary-accent); mask: url('./glow-windows.svg') center / contain no-repeat; }
.download-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin: 118px 72px 0; }
.download-card { position: relative; height: 364px; border: 1px solid var(--card-border); border-radius: 24px; background: var(--card); color: var(--card-text); }
.platform { position: absolute; right: 27px; top: 27px; width: 104px; height: 30px; display: grid; place-items: center; border-radius: 15px; background: #36363b; font-size: 12px; font-weight: 600; color: var(--accent-text); }
.windows .platform { width: 112px; color: var(--secondary-accent); }
.download-card h2 { position: absolute; left: 27px; top: 81px; font-size: 30px; line-height: 40px; font-weight: 600; }
.description { position: absolute; left: 27px; right: 27px; top: 125px; font-size: 13px; line-height: 20px; color: var(--muted); }
.divider { position: absolute; top: 173px; left: 27px; right: 27px; height: 1px; background: var(--divider); }
.release-status { position: absolute; top: 197px; left: 27px; right: 27px; font-size: 11px; line-height: 16px; color: #bfc1ca; font-weight: 500; }
.card-actions { position: absolute; left: 27px; right: 27px; top: 279px; display: flex; align-items: center; gap: 28px; }
.download-button { display: flex; align-items: center; justify-content: center; width: 220px; height: 48px; flex-shrink: 0; border-radius: 24px; background: var(--accent); color: white; font-size: 13px; font-weight: 600; }
.download-button[aria-disabled] { cursor: not-allowed; }
.windows .download-button { width: 232px; background: #eef2ff; color: #17181d; }
.guide { background: transparent; color: var(--accent-soft); padding: 0; font-size: 12px; line-height: 20px; white-space: nowrap; }
.windows .guide { color: #aeb7d8; }
.site-footer { height: 69px; background: var(--footer); }
.footer-inner { max-width: 1440px; margin: auto; padding: 18px 17px 0; display: flex; flex-direction: column; align-items: flex-end; }
.footer-inner strong { font-size: 13px; line-height: 18px; color: #363840; font-weight: 600; display: flex; align-items: flex-start; gap: 3px; }
.footer-inner strong img { margin-top: 1px; }
.footer-inner small { margin-right: 12px; margin-top: -4px; font-size: 11px; line-height: 15px; color: #9a9ca5; }
.notice-dialog { width: min(440px, calc(100% - 32px)); padding: 28px; color: var(--card-text); background: var(--card); border: 1px solid var(--card-border); border-radius: 24px; }
.notice-dialog::backdrop { background: rgb(0 0 0 / .35); }
.notice-dialog h2 { font-size: 22px; margin-bottom: 16px; }
.notice-dialog p { font-size: 15px; line-height: 1.8; white-space: pre-line; }
.notice-dialog form { margin-top: 24px; text-align: right; }
.close-notice { border-radius: 24px; padding: 12px 24px; background: var(--accent); color: white; }
@media (max-width: 1199px) {
  .brand { left: 32px; width: 200px; }
  .account-actions { right: 32px; }
  .site-nav { width: 420px; left: calc(50% - 210px); gap: 4px; }
  .download-grid { margin-left: 32px; margin-right: 32px; gap: 32px; }
  .card-actions { gap: 20px; }
  .download-button, .windows .download-button { width: 190px; }
}
@media (max-width: 900px) {
  .site-header { height: 128px; }
  .site-nav { top: 87px; left: 0; width: 100%; }
  .brand { left: 24px; }
  .account-actions { right: 24px; }
  .download-grid { grid-template-columns: 1fr; max-width: 620px; margin: 64px auto 96px; }
  .main-inner { min-height: calc(100svh - 197px); }
  .glow-windows { left: 60%; top: 690px; }
  h1 { left: 24px; font-size: 40px; }
}
@media (max-width: 680px) {
  .brand { width: 180px; left: 20px; }
  .account-actions { right: 20px; gap: 8px; }
  .account-actions button { width: 64px; height: 40px; }
  .site-nav { gap: 0; }
  .site-nav > * { flex-basis: 19%; }
  h1 { font-size: clamp(28px, 7vw, 40px); left: 20px; top: 66px; line-height: 1.3; letter-spacing: -.5px; }
  .title-band { height: 144px; }
  .download-grid { margin: 48px 20px 72px; gap: 24px; }
  .download-card { height: 364px; }
  .card-actions { gap: 16px; left: 23px; right: 23px; }
  .download-button, .windows .download-button { flex: 1; width: auto; min-width: 0; font-size: 12px; }
  .download-card h2, .description, .release-status { left: 23px; }
  .divider { left: 23px; right: 23px; }
  .brand-copy strong { font-size: 14px; }
  .brand-copy small { font-size: 9px; }
  .brand-copy .registered { left: 79px; }
}