:root {
  --bg: #e8edf4;
  --bg-raised: #f3f6fa;
  --surface: rgba(244, 247, 251, 0.78);
  --surface-strong: #eef2f7;
  --text: #17202d;
  --muted: #606d7f;
  --faint: #8995a6;
  --line: rgba(25, 38, 57, 0.12);
  --line-strong: rgba(25, 38, 57, 0.2);
  --accent: #4b81ff;
  --accent-soft: #dce6f7;
  --accent-strong: #2963ec;
  --green: #37bd82;
  --danger: #e35c68;
  --shadow: 0 24px 70px rgba(42, 61, 91, 0.14);
  --shadow-soft: 0 10px 32px rgba(42, 61, 91, 0.11);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --max-width: 1200px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f15;
    --bg-raised: #121822;
    --surface: rgba(18, 24, 34, 0.76);
    --surface-strong: #141c28;
    --text: #f4f6fa;
    --muted: #a2adbd;
    --faint: #738096;
    --line: rgba(230, 239, 255, 0.12);
    --line-strong: rgba(230, 239, 255, 0.2);
    --accent: #8eb2ff;
    --accent-soft: #192742;
    --accent-strong: #b1c8ff;
    --green: #60d39c;
    --danger: #ff8f9a;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
    --shadow-soft: 0 12px 38px rgba(0, 0, 0, 0.2);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] { --bg:#0b0f15; --bg-raised:#121822; --surface:rgba(18,24,34,.76); --surface-strong:#141c28; --text:#f4f6fa; --muted:#a2adbd; --faint:#738096; --line:rgba(230,239,255,.12); --line-strong:rgba(230,239,255,.2); --accent:#8eb2ff; --accent-soft:#192742; --accent-strong:#b1c8ff; --green:#60d39c; --danger:#ff8f9a; --shadow:0 30px 80px rgba(0,0,0,.28); --shadow-soft:0 12px 38px rgba(0,0,0,.2); color-scheme:dark; }
:root[data-theme="light"] { color-scheme:light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; color: var(--text); background: var(--bg); line-height: 1.68; letter-spacing: 0; overflow-x: hidden; font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background: radial-gradient(circle at 50% -20%, rgba(109,149,207,.11), transparent 42%), radial-gradient(circle at 100% 52%, rgba(143,181,190,.08), transparent 32%); z-index:-3; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button { color: inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 20; padding: 10px 14px; border-radius: 999px; color: #fff; background: var(--accent-strong); transform: translateY(-140%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.ambient { position: fixed; width: 500px; height: 500px; filter: blur(90px); border-radius: 50%; pointer-events:none; opacity:.28; z-index:-2; }
.ambient-one { background:#bdcce2; top:-240px; left:-160px; }
.ambient-two { background:#bfd9d6; top:40%; right:-320px; }
[data-theme="dark"] .ambient-one { background:#1c3157; opacity:.27; } [data-theme="dark"] .ambient-two { background:#173e46; opacity:.2; }
.section-frame { width: min(var(--max-width), calc(100% - 48px)); margin-inline:auto; }
.site-header { position: sticky; top: 14px; z-index: 10; padding: 0 0 2px; }
.nav-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 10px 13px 10px 17px; display:flex; align-items:center; gap:26px; background: color-mix(in srgb, var(--surface) 90%, transparent); border:1px solid var(--line); border-radius: 18px; backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 8px 28px rgba(20,40,70,.05); transition: transform .3s ease, background .3s ease; }
.brand { display:inline-flex; align-items:center; gap:8px; flex:none; font-weight: 700; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; color:var(--accent-strong); font-size:24px; line-height:1; }
.brand-name { font-size:14px; }
.primary-nav { display:flex; justify-content:center; align-items:center; gap:24px; flex:1; }
.primary-nav a { font-size:12px; color:var(--muted); transition: color .2s ease; white-space:nowrap; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--text); }
.theme-picker { display:flex; align-items:center; gap:5px; padding:7px 8px 7px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); flex:none; }
.theme-icon { color:var(--muted); font-size:14px; }
.theme-picker select { appearance:none; border:0; outline:0; color:var(--muted); background:transparent; font-size:12px; cursor:pointer; padding-right:3px; }
.menu-toggle { display:none; border:0; background:transparent; padding:7px; }
.menu-toggle span:not(.sr-only) { display:block; width:18px; height:1.5px; background:var(--text); margin:4px; transition:transform .2s ease; }
.hero { min-height: 690px; padding: 125px 40px 88px; display:grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); align-items:center; gap:50px; position:relative; }
.hero-copy { position:relative; z-index:1; max-width:610px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); margin-bottom:24px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px color-mix(in srgb, var(--green) 17%, transparent); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size: clamp(52px, 7.2vw, 93px); letter-spacing:-.045em; line-height:1.08; margin-bottom:25px; font-weight:700; }
h1 em, h1 .hero-title-accent { font-style:normal; font-weight:inherit; background: linear-gradient(135deg, var(--text), #6d83a7); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; transform:none; }
.cloud-emoji { font-size:.69em; margin-left:.04em; vertical-align:top; filter:saturate(.9); }
.hero-lede { color:var(--accent-strong); font-size:clamp(20px, 2.1vw, 28px); letter-spacing:-.045em; font-weight:550; margin-bottom:13px; }
.hero-description { max-width:500px; color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 18px; border:1px solid transparent; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform:translateY(-2px); }
.button-primary { color:#fff; background:var(--accent-strong); box-shadow:0 9px 24px color-mix(in srgb, var(--accent-strong) 26%, transparent); }
.button-primary:hover, .button-primary:focus-visible { box-shadow:0 13px 30px color-mix(in srgb, var(--accent-strong) 35%, transparent); }
.button-quiet { color:var(--muted); background:var(--surface); border-color:var(--line); }
.server-address-line { display:flex; align-items:center; gap:10px; color:var(--faint); font-size:12px; }
code { font-family:"SFMono-Regular", Consolas, monospace; font-size:.9em; letter-spacing:0; }
.server-address-line code { color:var(--text); padding:4px 8px; background:var(--surface); border-radius:7px; border:1px solid var(--line); }
.separator { color:var(--line-strong); }
.hero-visual { min-height:460px; position:relative; display:grid; place-items:center; isolation:isolate; }
.hero-orbit { position:absolute; border:1px solid var(--line); border-radius:50%; transform-origin:50% 50%; }
.orbit-a { width:430px; height:220px; }
.orbit-b { width:300px; height:430px; transform:rotate(40deg); opacity:.55; }
.orbit-a { animation:hero-orbit-a-drift 16s ease-in-out -2s infinite; }
.orbit-b { animation:hero-orbit-b-drift 21s ease-in-out -6s infinite; }
.hero-cloud { width:250px; height:250px; border-radius:46% 54% 50% 50%; display:grid; place-items:center; color:var(--accent-strong); background: radial-gradient(circle at 36% 24%, #fff, transparent 39%), linear-gradient(150deg, color-mix(in srgb, var(--accent) 45%, #fff), color-mix(in srgb, #b9e4ff 45%, var(--accent-soft))); box-shadow: inset -18px -24px 46px rgba(67,112,180,.14), 0 30px 70px rgba(77,128,215,.24); transform:rotate(-7deg); position:relative; animation:hero-cloud-float 8s ease-in-out -1.5s infinite; }
.hero-cloud::after { content:""; position:absolute; inset:13px; border:1px solid rgba(255,255,255,.6); border-radius:inherit; }
.cloud-core { font-size:122px; line-height:1; color:rgba(255,255,255,.82); text-shadow:0 11px 20px rgba(40,91,164,.17); transform:translateY(-4px); }
.cloud-spark { position:absolute; color:#fff; text-shadow:0 0 12px rgba(255,255,255,.8); font-size:17px; animation:hero-spark-twinkle 3.8s ease-in-out infinite; }
.spark-one { top:24px; right:36px; } .spark-two { left:28px; bottom:52px; font-size:32px; } .spark-three { right:27px; bottom:38px; }
.spark-two { animation-delay:-1.5s; } .spark-three { animation-delay:-2.6s; }
.hero-note-orbit { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:0; transform:scale(.16); animation:hero-notes-in 1.55s cubic-bezier(.2,.8,.2,1) .2s both; }
.hero-note-spin { position:relative; width:430px; height:220px; transform:rotate(-18deg); transform-origin:50% 50%; animation:hero-notes-spin 34s linear 1.72s infinite; }
.hero-note-label { position:absolute; animation:hero-note-counter 34s linear 1.72s infinite; will-change:transform; }
.hero-note { position:relative; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(14px) saturate(135%); box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:1px; font-size:10px; line-height:1.35; color:var(--muted); opacity:0; transform:translateY(10px) scale(.72); animation:hero-note-pop .88s cubic-bezier(.2,.75,.2,1) var(--note-delay, .2s) both; white-space:nowrap; }
.hero-note strong { color:var(--text); font-size:13px; letter-spacing:0; line-height:1.25; }
.note-one { left:18px; top:-7px; --note-delay:.35s; }
.note-two { right:-2px; top:calc(50% - 25px); --note-delay:.5s; }
.note-three { left:48px; bottom:-7px; --note-delay:.65s; }
.scroll-cue { position:absolute; bottom:22px; left:40px; display:flex; align-items:center; gap:9px; color:var(--faint); font-size:11px; }
.scroll-line { width:34px; height:1px; background:var(--line-strong); }
.kicker { font-size:11px; font-weight:700; color:var(--accent-strong); letter-spacing:.17em; margin-bottom:17px; }
.section-heading { margin-bottom:48px; } .split-heading { display:grid; grid-template-columns:1fr .75fr; gap:70px; align-items:end; }
h2 { font-size:clamp(38px,5vw,67px); line-height:1.1; letter-spacing:-.04em; margin-bottom:0; }
h2 span { color:var(--muted); }
.section-intro { color:var(--muted); font-size:15px; line-height:1.8; max-width:410px; margin:0 0 5px; }
.server-section { padding:126px 40px 112px; }
.spec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.spec-card { min-height:255px; padding:25px 23px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); display:flex; flex-direction:column; }
.spec-card-large { grid-column:span 2; background:linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 67%, var(--surface)), var(--surface)); }
.spec-icon { font-size:24px; color:var(--accent-strong); margin-bottom:34px; }
.spec-label { color:var(--faint); font-size:11px; margin-bottom:8px; letter-spacing:.08em; text-transform:uppercase; }
.spec-card h3 { font-size:24px; line-height:1.14; letter-spacing:-.06em; margin-bottom:16px; }
.spec-card p:last-child { color:var(--muted); font-size:13px; line-height:1.65; margin-top:auto; margin-bottom:0; }
.emphasis-card { grid-column:span 4; min-height:205px; display:grid; grid-template-columns:140px minmax(0,1fr) minmax(250px,.78fr); align-items:center; gap:28px; padding:28px 32px; position:relative; overflow:hidden; background:linear-gradient(112deg, color-mix(in srgb, var(--accent-strong) 92%, #5279d5), color-mix(in srgb, var(--accent) 72%, #91b8ff)); color:white; border-color:transparent; }
.emphasis-card::after { content:""; position:absolute; width:310px; height:310px; right:-80px; top:-165px; border-radius:50%; background:rgba(255,255,255,.14); filter:blur(1px); pointer-events:none; }
.emphasis-card .emphasis-badge { position:relative; z-index:1; align-self:start; font-size:11px; letter-spacing:.08em; opacity:.76; margin:2px 0 0; }
.emphasis-card h3 { position:relative; z-index:1; color:white; font-size:clamp(26px,3vw,38px); line-height:1.12; margin:0; }
.emphasis-card h3 span { color:rgba(255,255,255,.66); }
.emphasis-card p { position:relative; z-index:1; color:rgba(255,255,255,.8)!important; font-size:13px; line-height:1.7; margin:0; }
.advantages-section { padding:110px 40px 124px; } .centered-heading { text-align:center; display:flex; flex-direction:column; align-items:center; } .centered-heading .section-intro { max-width:470px; }
.advantage-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.advantage-card { min-height:285px; padding:22px 20px; border-top:1px solid var(--line-strong); position:relative; transition:transform .3s ease, border-color .3s ease; }
.advantage-card:hover { transform:translateY(-6px); border-color:var(--accent); } .advantage-number { color:var(--faint); font-size:11px; letter-spacing:.08em; } .line-icon { font-size:26px; color:var(--accent-strong); margin:36px 0 53px; } .advantage-card h3 { font-size:16px; letter-spacing:-.045em; margin-bottom:10px; } .advantage-card p { color:var(--muted); font-size:13px; line-height:1.7; margin-bottom:0; }
.scenery-section { padding:112px 40px 126px; } .gallery-tabs { display:flex; align-items:center; gap:7px; padding-bottom:15px; border-bottom:1px solid var(--line); margin-bottom:28px; } .gallery-tab { border:0; background:transparent; color:var(--faint); font-size:13px; padding:7px 14px; border-radius:999px; cursor:pointer; transition:color .2s ease, background .2s ease; } .gallery-tab:hover { color:var(--text); } .gallery-tab.is-active { color:var(--text); background:var(--surface-strong); box-shadow:0 3px 12px rgba(35,58,95,.08); }
.gallery-meta { display:flex; gap:20px; align-items:baseline; margin-bottom:22px; } .gallery-meta h3 { font-size:20px; letter-spacing:-.05em; margin:0; } .gallery-meta p { color:var(--muted); font-size:13px; margin:0; }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:150px; gap:13px; } .gallery-card { position:relative; padding:0; overflow:hidden; border:0; border-radius:var(--radius-lg); background:var(--surface); cursor:pointer; text-align:left; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; } .gallery-card:nth-child(1) { grid-column:span 7; grid-row:span 3; } .gallery-card:nth-child(2) { grid-column:span 5; grid-row:span 2; } .gallery-card:nth-child(3) { grid-column:span 5; grid-row:span 1; } .gallery-card:nth-child(4) { grid-column:span 5; grid-row:span 2; } .gallery-card:hover { transform:scale(.99); box-shadow:var(--shadow); }
.gallery-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; background:radial-gradient(circle at 25% 15%, rgba(255,255,255,.85), transparent 24%), linear-gradient(145deg, #deebff, #c6d4e8 45%, #b3c6dd); color:#314b6f; overflow:hidden; } .gallery-placeholder::before { content:""; position:absolute; width:70%; aspect-ratio:1; top:-37%; right:-10%; border-radius:50%; background:rgba(255,255,255,.31); filter:blur(2px); } .gallery-placeholder::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,13,26,.72), transparent 63%); } .gallery-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transform:scale(1.035); transition:opacity .8s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), filter .8s ease; filter:saturate(.9) contrast(.96); } .gallery-card:hover .gallery-image { transform:scale(1.075); filter:saturate(1.04) contrast(1.02); } .gallery-image:not([src=""]) { opacity:1; } .gallery-placeholder::before { z-index:0; } .gallery-placeholder::after { z-index:1; } .gallery-placeholder:has(.gallery-image:not([src=""])) .placeholder-symbol, .gallery-placeholder:has(.gallery-image:not([src=""])) strong, .gallery-placeholder:has(.gallery-image:not([src=""])) small { color:white; } .placeholder-symbol, .gallery-placeholder strong, .gallery-placeholder small { z-index:2; } .placeholder-symbol { position:absolute; top:24px; left:25px; font-size:26px; opacity:.65; } .gallery-placeholder strong { position:relative; z-index:2; font-size:17px; letter-spacing:-.04em; } .gallery-placeholder small { position:relative; z-index:2; font-size:11px; opacity:.74; } .gallery-placeholder.image-failed .gallery-image { display:none; }
.play-section { padding:115px 40px 126px; } .play-grid { display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:13px; } .play-card { overflow:hidden; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-soft); } .play-art { height:222px; display:grid; place-items:center; position:relative; overflow:hidden; } .play-art::before { content:""; position:absolute; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.3); top:-125px; right:-60px; } .play-art span { font-size:72px; color:rgba(255,255,255,.78); text-shadow:0 14px 22px rgba(38,72,130,.22); } .art-market { background:linear-gradient(145deg, #b7d5f1, #e1eef9 54%, #9bbcdf); } .art-combat { background:linear-gradient(145deg, #173455, #4f7197 50%, #b3c5d7); } .art-games { background:linear-gradient(145deg, #d8e8de, #9ecdc9 56%, #6bafa9); } .play-content { padding:22px 22px 25px; } .play-tag { font-size:10px; letter-spacing:.15em; color:var(--accent-strong); font-weight:700; } .play-content h3 { margin:11px 0 8px; font-size:23px; letter-spacing:-.06em; } .play-content p { min-height:53px; color:var(--muted); font-size:13px; margin-bottom:18px; } .play-content a { font-size:12px; color:var(--accent-strong); }
.guide-section { padding:120px 40px 128px; } .steps-list { border-top:1px solid var(--line-strong); } .step-item { display:grid; grid-template-columns:100px 1fr; gap:24px; padding:29px 0; border-bottom:1px solid var(--line); } .step-index { color:var(--accent-strong); font: 600 13px/1 monospace; padding-top:5px; } .step-body h3 { font-size:20px; letter-spacing:-.05em; margin-bottom:7px; } .step-body p { color:var(--muted); font-size:14px; margin-bottom:8px; } .step-body strong { color:var(--text); } .step-body code { color:var(--text); padding:3px 7px; border:1px solid var(--line); background:var(--surface); border-radius:6px; } .inline-addresses { display:flex; flex-wrap:wrap; gap:8px; } .text-copy { border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:12px; padding:8px 10px; cursor:pointer; } .text-copy code { color:var(--text); background:transparent; border:0; padding:0; } .warning-copy { color:var(--danger)!important; font-size:12px!important; } .underlined { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.rules-section { padding:122px 40px 128px; } .rules-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; } .rule-card { min-height:337px; padding:23px 23px 26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); } .rule-top { display:flex; justify-content:space-between; align-items:center; color:var(--faint); font:12px monospace; margin-bottom:31px; } .rule-icon { color:var(--accent-strong); font:24px sans-serif; } .rule-card h3 { font-size:21px; letter-spacing:-.055em; margin-bottom:17px; } .rule-card ul { padding-left:17px; margin:0; color:var(--muted); font-size:12.5px; line-height:1.8; } .rule-card li + li { margin-top:5px; } .permission-row { display:flex; align-items:flex-start; gap:11px; margin-top:18px; } .permission-row > span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:14px; font-weight:700; } .permission-row strong, .permission-row small { display:block; } .permission-row strong { font-size:12px; margin-bottom:3px; } .permission-row small { color:var(--muted); font-size:11px; line-height:1.45; } .allowed > span { color:#123f31; background:#8fe0b7; } .blocked > span { color:#542a31; background:#ff9da9; } .penalty > span { color:#574423; background:#f4d28d; } .rule-subtitle { color:var(--muted); font-size:12px; line-height:1.72; } .danger-text { color:var(--danger); }
.community-section { padding:18px 40px 120px; } .community-card { min-height:280px; padding:41px 46px; display:flex; align-items:center; justify-content:space-between; gap:30px; position:relative; overflow:hidden; border-radius:var(--radius-xl); color:white; background:linear-gradient(115deg, #3569ce, #779fe5 72%, #bad5f7); box-shadow:var(--shadow); } .community-card .kicker { color:rgba(255,255,255,.7); } .community-card h2 { font-size:clamp(37px,4.5vw,59px); } .community-card h2 span { color:rgba(255,255,255,.65); } .community-card p:not(.kicker) { color:rgba(255,255,255,.75); font-size:14px; margin-top:17px; } .community-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; position:relative; z-index:1; } .community-actions .button { white-space:nowrap; } .community-card .button { color:var(--accent-strong); background:white; position:relative; z-index:1; } .community-card .community-button-secondary { color:white; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.38); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(23,52,107,.12); backdrop-filter:blur(14px) saturate(130%); } .community-card .community-button-secondary:hover, .community-card .community-button-secondary:focus-visible { color:white; background:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 14px 30px rgba(23,52,107,.2); } .community-button-number { font:600 11px/1 "SFMono-Regular", Consolas, monospace; letter-spacing:.03em; opacity:.78; } .community-cloud { position:absolute; right:11%; bottom:-47px; color:rgba(255,255,255,.16); font-size:260px; line-height:.8; transform:rotate(-8deg); }
.site-footer { padding:54px 40px 26px; } .footer-main { display:flex; justify-content:space-between; gap:30px; padding-bottom:39px; border-bottom:1px solid var(--line); } .footer-brand { margin-bottom:12px; } .footer-main p { color:var(--muted); font-size:13px; margin:0; } .footer-address { display:grid; grid-template-columns:repeat(2, auto); gap:8px 32px; align-content:start; color:var(--muted); font-size:12px; } .footer-address code { color:var(--text); } .footer-bottom { display:flex; justify-content:space-between; gap:15px; color:var(--faint); font-size:11px; padding-top:18px; }
.toast { position:fixed; z-index:30; left:50%; bottom:25px; display:flex; align-items:center; gap:9px; padding:11px 15px; color:var(--text); background:var(--surface-strong); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); transform:translate(-50%, 140%); opacity:0; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease; pointer-events:none; font-size:12px; } .toast.is-visible { transform:translate(-50%,0); opacity:1; } .toast-check { display:grid; place-items:center; width:18px; height:18px; background:var(--green); color:#fff; border-radius:50%; font-size:11px; }
.gallery-modal[hidden] { display:none; } .gallery-modal { position:fixed; inset:0; z-index:25; display:grid; grid-template-columns:70px minmax(0,820px) 70px; justify-content:center; align-items:center; gap:20px; padding:30px; background:rgba(8,14,24,.82); backdrop-filter:blur(22px); animation:modal-in .35s ease both; } .modal-content { text-align:center; color:#fff; } .modal-image { position:relative; overflow:hidden; width:min(76vw,820px); aspect-ratio:16/9; margin:auto; border-radius:var(--radius-lg); background:linear-gradient(145deg,#dceafe,#afc4df); box-shadow:0 25px 80px rgba(0,0,0,.34); } .modal-image img { width:100%; height:100%; display:block; object-fit:contain; background:#111927; } .modal-image-caption { position:absolute; left:17px; bottom:14px; color:rgba(255,255,255,.68); font-size:11px; letter-spacing:.08em; } .modal-image.image-failed img { display:none; } .modal-category { margin:22px 0 4px; font:11px monospace; letter-spacing:.13em; color:#a8c3ff; } .modal-content h2 { font-size:34px; letter-spacing:-.06em; } .modal-counter { color:#aab4c3; font:12px monospace; margin:0; } .modal-close, .modal-nav { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.09); color:#fff; cursor:pointer; transition:background .2s ease, transform .2s ease; } .modal-close:hover, .modal-nav:hover { background:rgba(255,255,255,.18); transform:scale(1.06); } .modal-close { position:absolute; top:24px; right:28px; width:38px; height:38px; border-radius:50%; font-size:26px; line-height:1; } .modal-nav { width:52px; height:52px; border-radius:50%; font-size:22px; }
.reveal { opacity:1; transform:none; } .js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .js .reveal.is-visible { opacity:1; transform:none; }

/* Typography: 保持中文标题的字距、基线与换行节奏一致，避免不同系统字体出现拥挤或歪斜。 */
h1, h2, h3 { font-synthesis:none; text-wrap:balance; }
h1 { letter-spacing:-.045em; line-height:1.08; }
h1 .hero-title-accent { letter-spacing:inherit; white-space:nowrap; }
h2 { letter-spacing:-.04em; line-height:1.1; }
h3 { letter-spacing:-.025em; line-height:1.28; }
p, li { text-wrap:pretty; }
/* 中文正文与卡片标题统一使用稳定字距，英文标签保留适度追踪以维持层级。 */
.brand, .hero-note strong, .spec-card h3, .advantage-card h3, .gallery-meta h3, .gallery-placeholder strong, .play-content h3, .step-body h3, .rule-card h3, .modal-content h2 { letter-spacing:0; }
.hero-lede { letter-spacing:-.015em; }
@media (max-width: 1020px) { .nav-shell { gap:14px; } .primary-nav { gap:15px; } .hero { grid-template-columns:1fr 1fr; padding-inline:20px; } .hero-visual { transform:scale(.86); } .section-frame { width:min(var(--max-width), calc(100% - 32px)); } .server-section,.advantages-section,.scenery-section,.play-section,.guide-section,.rules-section,.community-section,.site-footer { padding-inline:20px; } .spec-grid { grid-template-columns:repeat(2,1fr); } .spec-card-large { grid-column:span 2; } .advantage-grid { grid-template-columns:repeat(3,1fr); } .advantage-card:nth-child(4),.advantage-card:nth-child(5) { grid-column:span 1; } .rules-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 760px) { .site-header { top:8px; } .nav-shell { width:calc(100% - 20px); position:relative; padding:9px 11px 9px 14px; } .menu-toggle { display:block; margin-left:auto; order:2; } .theme-picker { order:3; } .primary-nav { position:absolute; display:none; left:0; right:0; top:calc(100% + 8px); flex-direction:column; align-items:stretch; gap:2px; padding:8px; background:var(--surface-strong); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); } .primary-nav.is-open { display:flex; } .primary-nav a { padding:11px 12px; border-radius:9px; font-size:13px; } .primary-nav a:hover { background:var(--surface); } .hero { min-height:800px; grid-template-columns:1fr; padding:94px 20px 78px; gap:15px; } .hero-copy { max-width:100%; } h1 { font-size:clamp(48px,14vw,77px); } .hero-visual { min-height:330px; transform:scale(.77); margin-top:-13px; } .scroll-cue { left:20px; } .split-heading { grid-template-columns:1fr; gap:15px; } .section-heading { margin-bottom:34px; } h2 { font-size:clamp(38px,11vw,57px); } .spec-grid { gap:10px; } .spec-card { min-height:230px; padding:19px 17px; } .spec-card-large { grid-column:span 2; } .spec-card h3 { font-size:20px; } .advantage-grid { grid-template-columns:repeat(2,1fr); } .advantage-card { min-height:250px; } .advantage-card:last-child { grid-column:span 2; } .line-icon { margin:30px 0 32px; } .gallery-tabs { overflow-x:auto; scrollbar-width:none; } .gallery-tabs::-webkit-scrollbar { display:none; } .gallery-meta { display:block; } .gallery-meta h3 { margin-bottom:5px; } .gallery-grid { grid-auto-rows:105px; gap:9px; } .gallery-card:nth-child(1) { grid-column:span 12; grid-row:span 3; } .gallery-card:nth-child(2) { grid-column:span 7; grid-row:span 2; } .gallery-card:nth-child(3) { grid-column:span 5; grid-row:span 1; } .gallery-card:nth-child(4) { grid-column:span 5; grid-row:span 1; } .gallery-card:nth-child(5) { grid-column:span 7; grid-row:span 2; } .gallery-placeholder { padding:13px; } .gallery-placeholder strong { font-size:14px; } .play-grid { grid-template-columns:1fr; } .play-card-wide { grid-row:auto; } .play-art { height:170px; } .step-item { grid-template-columns:44px 1fr; gap:12px; } .step-body h3 { font-size:18px; } .rules-grid { grid-template-columns:1fr; } .rule-card { min-height:0; } .community-card { padding:33px 25px; display:block; } .community-actions { justify-content:flex-start; margin-top:26px; } .community-card .community-actions .button { margin-top:0; } .community-cloud { right:-2%; font-size:180px; } .footer-main { display:block; } .footer-address { grid-template-columns:1fr 1fr; margin-top:28px; gap:9px 16px; } .footer-bottom { display:block; } .footer-bottom span { display:block; margin-top:6px; } .gallery-modal { grid-template-columns:42px minmax(0,1fr) 42px; gap:7px; padding:15px; } .modal-image { width:100%; aspect-ratio:4/3; } .modal-nav { width:38px; height:38px; font-size:17px; } .modal-close { top:15px; right:15px; } }
@media (max-width: 430px) { .section-frame { width:calc(100% - 24px); } .hero { padding-inline:12px; } .hero-actions .button { flex:1; } .server-address-line { flex-wrap:wrap; gap:6px; } .server-section,.advantages-section,.scenery-section,.play-section,.guide-section,.rules-section,.community-section,.site-footer { padding-inline:12px; } .spec-card { min-height:214px; } .spec-icon { margin-bottom:24px; } .advantage-card { min-height:265px; padding-inline:15px; } .gallery-card:nth-child(2),.gallery-card:nth-child(3),.gallery-card:nth-child(4),.gallery-card:nth-child(5) { grid-column:span 6; } .gallery-card:nth-child(5) { grid-row:span 2; } .footer-address { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .js .reveal { opacity:1; transform:none; } }

/* macOS 深色毛玻璃基线：默认深色，仍保留浅色与跟随系统选项。 */
:root,
:root[data-theme="dark"] {
  --bg: #101720;
  --bg-raised: #18212c;
  --surface: rgba(32, 43, 58, 0.72);
  --surface-strong: #202b3a;
  --text: #f5f7fb;
  --muted: #a1aabc;
  --faint: #6f7b8f;
  --line: rgba(234, 241, 255, 0.16);
  --line-strong: rgba(234, 241, 255, 0.26);
  --accent: #87aaff;
  --accent-soft: #1a2741;
  --accent-strong: #8eb2ff;
  --green: #5ed49a;
  --danger: #ff929d;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 14px 42px rgba(0, 0, 0, 0.18);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #e8edf4;
  --bg-raised: #f3f6fa;
  --surface: rgba(244, 247, 251, 0.78);
  --surface-strong: #eef2f7;
  --text: #17202d;
  --muted: #606d7f;
  --faint: #8995a6;
  --line: rgba(25, 38, 57, 0.12);
  --line-strong: rgba(25, 38, 57, 0.2);
  --accent: #4b81ff;
  --accent-soft: #dce6f7;
  --accent-strong: #2963ec;
  --green: #37bd82;
  --danger: #e35c68;
  --shadow: 0 24px 70px rgba(42, 61, 91, 0.14);
  --shadow-soft: 0 10px 32px rgba(42, 61, 91, 0.11);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --bg:#e8edf4; --bg-raised:#f3f6fa; --surface:rgba(244,247,251,.78); --surface-strong:#eef2f7; --text:#17202d; --muted:#606d7f; --faint:#8995a6; --line:rgba(25,38,57,.12); --line-strong:rgba(25,38,57,.2); --accent:#4b81ff; --accent-soft:#dce6f7; --accent-strong:#2963ec; --green:#37bd82; --danger:#e35c68; --shadow:0 24px 70px rgba(42,61,91,.14); --shadow-soft:0 10px 32px rgba(42,61,91,.11); color-scheme:light; }
}
body { background: var(--bg); }
.brand-logo { width:34px; height:34px; flex:none; border-radius:11px; object-fit:cover; object-position:center; box-shadow:0 4px 14px rgba(104,161,245,.2); border:1px solid rgba(255,255,255,.22); }
.footer-brand .brand-logo { width:42px; height:42px; border-radius:13px; }
.brand:hover .brand-logo { transform:translateY(-1px) rotate(-2deg); box-shadow:0 8px 20px rgba(104,161,245,.27); }
.brand-logo { transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.mac-window { isolation: isolate; transition: width .35s ease, margin .35s ease, border-radius .35s ease; }
.mac-window-body { position: relative; background: var(--bg); }
.mac-window.is-minimized .mac-window-body { display: none; }
.mac-window.is-maximized { width: min(1600px, calc(100% - 8px)) !important; margin-top: 4px; margin-bottom: 4px; border-radius: 16px; }
.mac-titlebar button { outline: none; }
.mac-titlebar button:focus-visible { box-shadow: 0 0 0 3px rgba(142, 178, 255, .45); }
.dark .site-header { top: 10px; }
.dark .nav-shell { background: rgba(22, 28, 39, .68); border-color: rgba(255,255,255,.12); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.dark .spec-card, .dark .advantage-card, .dark .rule-card, .dark .play-card, .dark .step-body code, .dark .text-copy { box-shadow: none; }
.mac-window { background:rgba(28,38,52,.78) !important; border-color:rgba(225,238,255,.14) !important; box-shadow:0 30px 100px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); }
.mac-titlebar { background:rgba(255,255,255,.075) !important; }
.mac-window-body { backdrop-filter:blur(24px) saturate(130%); }
.site-header .nav-shell { backdrop-filter:blur(28px) saturate(150%); }
.spec-card, .advantage-card, .rule-card, .play-card, .step-item { backdrop-filter:blur(22px) saturate(125%); }
body, .mac-window, .mac-window-body, .nav-shell, .spec-card, .advantage-card, .rule-card, .play-card, .step-item, .theme-controls { transition-property:background-color,color,border-color,box-shadow; transition-duration:.48s; transition-timing-function:cubic-bezier(.2,.7,.2,1); }
.hero::after { content:""; position:absolute; inset:12% 2% 10%; pointer-events:none; background:radial-gradient(circle at 80% 15%, rgba(120,166,255,.09), transparent 32%), radial-gradient(circle at 20% 84%, rgba(106,225,197,.06), transparent 26%); filter:blur(20px); z-index:-1; }
.section-heading h2, .hero h1, .spec-card h3, .play-content h3, .rule-card h3, .step-body h3 { text-wrap:balance; }
.gallery-image { opacity:0; }
.gallery-image.is-ready { opacity:1; }
.modal-image img { opacity:0; transition:opacity .6s ease; }
.modal-image img.is-ready { opacity:1; }
.site-header::after { content:""; position:absolute; left:1px; right:1px; bottom:-1px; height:2px; border-radius:999px; background:linear-gradient(90deg, var(--accent-strong), #86d9d0); transform:scaleX(var(--scroll-progress, 0)); transform-origin:left center; transition:transform .18s linear; opacity:.72; }
.gallery-placeholder.has-image { color:#fff; }
.site-header { transition:transform .32s cubic-bezier(.2,.7,.2,1); }
.site-header.is-scrolled { transform:translateY(-4px) scale(.985); }
.site-header.is-scrolled .nav-shell { box-shadow:0 16px 42px rgba(0,0,0,.24); }
.theme-changing *, .theme-changing *::before, .theme-changing *::after { transition-duration:.48s !important; }
.cursor-aurora { position:fixed; z-index:-1; width:320px; height:320px; pointer-events:none; border-radius:50%; background:radial-gradient(circle, rgba(109,151,255,.12), transparent 67%); filter:blur(20px); transform:translate3d(-160px,-160px,0); will-change:transform; }
@keyframes modal-in { from { opacity:0; } to { opacity:1; } }
@keyframes hero-notes-in {
  0% { opacity:0; transform:scale(.16); filter:blur(5px); }
  62% { opacity:1; transform:scale(1.045); filter:blur(0); }
  82% { transform:scale(.975); }
  100% { opacity:1; transform:scale(1); filter:blur(0); }
}
@keyframes hero-orbit-a-drift {
  0%, 100% { opacity:.8; transform:rotate(-18deg) scale(1); }
  50% { opacity:.48; transform:rotate(-14deg) scale(1.025); }
}
@keyframes hero-orbit-b-drift {
  0%, 100% { opacity:.5; transform:rotate(40deg) scale(1); }
  50% { opacity:.78; transform:rotate(44deg) scale(.98); }
}
@keyframes hero-cloud-float {
  0%, 100% { transform:rotate(-7deg) translate3d(0, 0, 0) scale(1); }
  50% { transform:rotate(-5deg) translate3d(0, -6px, 0) scale(1.015); }
}
@keyframes hero-spark-twinkle {
  0%, 100% { opacity:.48; transform:scale(.86) rotate(0deg); }
  50% { opacity:1; transform:scale(1.12) rotate(12deg); }
}
@keyframes hero-notes-spin {
  from { transform:rotate(-18deg); }
  to { transform:rotate(342deg); }
}
@keyframes hero-note-counter {
  from { transform:rotate(18deg); }
  to { transform:rotate(-342deg); }
}
@keyframes hero-note-pop {
  0% { opacity:0; transform:translateY(10px) scale(.72); }
  65% { opacity:1; transform:translateY(-2px) scale(1.035); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-a, .orbit-b, .hero-cloud, .cloud-spark { animation:none; }
  .orbit-a { opacity:.8; transform:rotate(-18deg); }
  .orbit-b { opacity:.55; transform:rotate(40deg); }
  .hero-cloud { transform:rotate(-7deg); }
  .cloud-spark { opacity:.8; transform:none; }
  .hero-note-orbit { opacity:1; transform:none; animation:none; }
  .hero-note-spin { animation:none; }
  .hero-note-label { transform:rotate(18deg); animation:none; }
  .hero-note { opacity:1; transform:none; animation:none; }
}
.theme-controls { display:flex; align-items:center; gap:4px; padding:3px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb, var(--surface) 88%, transparent); }
.theme-toggle, .theme-system { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 9px; border:0; border-radius:999px; color:var(--muted); background:transparent; cursor:pointer; font-size:11px; transition:background .2s ease, color .2s ease, transform .2s ease; }
.theme-toggle:hover, .theme-toggle:focus-visible, .theme-system:hover, .theme-system:focus-visible { color:var(--text); background:var(--surface-strong); outline:none; }
.theme-system.is-active { color:var(--accent-strong); background:var(--accent-soft); }
.mac-window::before { content:""; position:absolute; inset:48px 0 0; pointer-events:none; background:radial-gradient(circle at 50% -12%, rgba(117,151,232,.12), transparent 32%), linear-gradient(180deg, rgba(255,255,255,.018), transparent 24%); z-index:-1; }
.mac-window-body::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom, rgba(0,0,0,.18), transparent 44%); }
.hero, .server-section, .advantages-section, .scenery-section, .play-section, .guide-section, .rules-section { position:relative; }
.hero::before { content:""; position:absolute; left:40px; right:40px; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.spec-card:hover, .rule-card:hover, .play-card:hover { border-color:color-mix(in srgb, var(--accent) 48%, var(--line)); transform:translateY(-3px); transition:transform .28s ease, border-color .28s ease; }
.spec-card, .rule-card, .play-card { transition:transform .28s ease, border-color .28s ease; }
@media (max-width: 760px) { .theme-controls { order:3; } .theme-state { display:none; } .theme-toggle, .theme-system { padding-inline:8px; } }

/* Gallery: 原图直接展示，并根据每个分类的图片数量自动保持均衡版式。 */
@media (min-width: 761px) {
  .gallery-card { grid-column:span 4; grid-row:span 2; min-width:0; }
  .gallery-grid[data-count="8"] .gallery-card:nth-child(1) { grid-column:span 7; grid-row:span 3; }
  .gallery-grid[data-count="8"] .gallery-card:nth-child(2) { grid-column:span 5; grid-row:span 2; }
  .gallery-grid[data-count="8"] .gallery-card:nth-child(3) { grid-column:span 5; grid-row:span 1; }
  .gallery-grid[data-count="8"] .gallery-card:nth-child(4), .gallery-grid[data-count="8"] .gallery-card:nth-child(5) { grid-column:span 6; grid-row:span 2; }
  .gallery-grid[data-count="4"] .gallery-card:nth-child(1) { grid-column:span 8; grid-row:span 3; }
  .gallery-grid[data-count="4"] .gallery-card:nth-child(2) { grid-column:span 4; grid-row:span 2; }
  .gallery-grid[data-count="4"] .gallery-card:nth-child(3) { grid-column:span 4; grid-row:span 1; }
  .gallery-grid[data-count="4"] .gallery-card:nth-child(4) { grid-column:span 12; grid-row:span 2; }
  .gallery-grid[data-count="3"] .gallery-card:nth-child(1) { grid-column:span 8; grid-row:span 3; }
  .gallery-grid[data-count="3"] .gallery-card:nth-child(2) { grid-column:span 4; grid-row:span 2; }
  .gallery-grid[data-count="3"] .gallery-card:nth-child(3) { grid-column:span 4; grid-row:span 1; }
}
@media (max-width: 760px) {
  .gallery-card { grid-column:span 6 !important; grid-row:span 2 !important; }
  .gallery-card:first-child { grid-column:span 12 !important; grid-row:span 3 !important; }
}
@media (max-width: 480px) { .gallery-card { grid-column:span 12 !important; } }

/* 各区块的统一玻璃层级与精细悬停反馈。 */
.advantage-grid { gap:14px; }
.advantage-card { padding:24px 21px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface) 72%, transparent)); backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.advantage-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow:0 18px 46px rgba(0,0,0,.16); }
.steps-list { display:grid; gap:11px; border-top:0; }
.step-item { padding:24px; border:1px solid var(--line); border-radius:21px; background:linear-gradient(135deg, color-mix(in srgb, var(--surface) 95%, transparent), color-mix(in srgb, var(--surface) 70%, transparent)); backdrop-filter:blur(18px); transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease; }
.step-item:hover { transform:translateX(5px); border-color:color-mix(in srgb, var(--accent) 44%, var(--line)); box-shadow:0 16px 42px rgba(0,0,0,.13); }
.step-index { width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:13px; background:var(--accent-soft); }
.button, .gallery-tab, .text-copy, .theme-toggle, .theme-system, .modal-nav, .modal-close { -webkit-tap-highlight-color:transparent; }
.button:active, .gallery-tab:active, .text-copy:active, .theme-toggle:active, .theme-system:active { transform:scale(.97); }

/* 滚动渐入：标题、正文分组与卡片依次上浮并由模糊过渡为清晰。 */
.js .reveal-item { opacity:0; transform:translate3d(0, 22px, 0) scale(.992); filter:blur(5px); will-change:opacity, transform, filter; transition:opacity .76s ease var(--reveal-delay, 0ms), transform .82s cubic-bezier(.2,.72,.2,1) var(--reveal-delay, 0ms), filter .76s ease var(--reveal-delay, 0ms), border-color .3s ease, box-shadow .3s ease; }
.js .reveal-item.is-visible { opacity:1; transform:translate3d(0, 0, 0) scale(1); filter:blur(0); }
.js .spec-card.reveal-item.is-visible:hover, .js .rule-card.reveal-item.is-visible:hover, .js .play-card.reveal-item.is-visible:hover { transform:translateY(-3px); }
.js .advantage-card.reveal-item.is-visible:hover { transform:translateY(-6px); }
.js .gallery-card.reveal-item.is-visible:hover { transform:scale(.99); }
.js .step-item.reveal-item.is-visible:hover { transform:translateX(5px); }
@media (prefers-reduced-motion: reduce) { .js .reveal-item { opacity:1; transform:none; filter:none; transition:none; will-change:auto; } }

/* 信息卡片在中小屏保持完整行宽，避免横向承诺卡溢出或挤压文字。 */
@media (max-width: 1020px) {
  .emphasis-card { grid-column:span 2; }
}
@media (max-width: 760px) {
  .emphasis-card { display:flex; min-height:230px; padding:19px 17px; }
  .emphasis-card .emphasis-badge { align-self:auto; margin:0 0 34px; }
  .emphasis-card h3 { font-size:20px; }
}

/* Tailwind CDN 的 preflight 会重置标题字号；用页面作用域恢复稳定的排版层级。 */
.mac-window-body h1 { font-size:clamp(52px, 7.2vw, 93px); font-weight:700; line-height:1.08; letter-spacing:-.045em; margin:0 0 25px; }
.mac-window-body h2 { font-size:clamp(38px, 5vw, 67px); font-weight:700; line-height:1.1; letter-spacing:-.04em; margin:0; }
.mac-window-body h3 { font-weight:650; line-height:1.28; }
@media (max-width: 760px) {
  .mac-window-body h1 { font-size:clamp(48px, 14vw, 77px); }
  .mac-window-body h2 { font-size:clamp(38px, 11vw, 57px); }
}

/* 玩法卡片使用真实服务器截图，图片铺满顶部并保留柔和的阅读遮罩。 */
.play-art { isolation:isolate; background:var(--surface-strong); }
.play-art .play-image { position:absolute; z-index:0; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; transform:scale(1.012); filter:saturate(.92) contrast(.98); transition:transform 1.1s cubic-bezier(.2,.72,.2,1), filter .8s ease; }
.play-art::before { display:none; }
.play-art::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(10,20,36,.04), rgba(10,20,36,.18) 52%, rgba(10,20,36,.34)); }
.play-card:hover .play-art .play-image { transform:scale(1.065); filter:saturate(1.06) contrast(1.02); }