/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5
 * Hallmark · genre: modern-minimal · macrostructure: Split Studio · theme: Cobalt
 * nav: N10 Floating-on-scroll-morph · footer: Ft5 Statement · enrichment: real-game-screenshots
 * axes: paper=light cool · display=grotesk-sans · accent=ink-blue
 * audience: 中文剧情向玩家 · use: 了解并下载 · tone: utilitarian-dramatic
 * H2 knobs: ratio=6/6 · right=photo · divider=negative-space
 */
:root {
  --color-paper: oklch(97% 0.01 250);
  --color-paper-2: oklch(94% 0.015 250);
  --color-ink: oklch(22% 0.03 255);
  --color-muted: oklch(45% 0.02 255);
  --color-accent: oklch(52% 0.14 255);
  --color-accent-2: oklch(62% 0.12 230);
  --color-panel: oklch(100% 0 0);
  --color-rule: oklch(88% 0.015 250);
  --color-dark: oklch(18% 0.03 255);
  --color-focus: oklch(52% 0.14 255);
  --font-display: "Space Grotesk", "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius: 8px; --measure: 62ch;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 160ms;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0; background:linear-gradient(180deg, oklch(96% 0.02 250), var(--color-paper) 280px), var(--color-paper);
  color:var(--color-ink); font-family:var(--font-body); line-height:1.75;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--color-accent)}
h1,h2,h3,h4{font-family:var(--font-display);font-style:normal;font-weight:700;line-height:1.12;overflow-wrap:anywhere;min-width:0;margin:0 0 var(--space-3)}
h1{font-size:clamp(2.2rem,5.5vw,3.8rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:1.15rem}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);margin:0 0 var(--space-3)}
.lede{font-size:1.08rem;color:var(--color-muted);max-width:var(--measure)}
.wrap{width:min(1140px,calc(100% - 2rem));margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.75rem 1.25rem;border:1px solid var(--color-accent);background:var(--color-accent);color:#fff;font-weight:700;text-decoration:none;cursor:pointer;border-radius:var(--radius);transition:transform var(--dur) var(--ease-out),filter var(--dur) var(--ease-out)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);color:#fff}
.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--color-ink);border-color:var(--color-rule)}
.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn-glow{position:relative;overflow:hidden;box-shadow:0 8px 24px oklch(52% 0.14 255 / .28)}
.btn-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,oklch(100% 0 0 / .35) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 2.8s var(--ease-out) infinite}
@keyframes sheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.btn-glow::after{animation:none}html{scroll-behavior:auto}}
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding:0;transition:padding .25s var(--ease-out)}
.nav-shell{background:oklch(97% 0.01 250 / .88);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-rule);transition:all .25s var(--ease-out)}
.nav-inner{width:min(1140px,calc(100% - 2rem));margin:0 auto;min-height:64px;display:flex;align-items:center;gap:1rem}
.nav.is-compact{padding:var(--space-2) var(--space-3) 0}
.nav.is-compact .nav-shell{width:min(980px,calc(100% - 1.5rem));margin:0 auto;border:1px solid var(--color-rule);border-radius:999px;box-shadow:0 10px 30px oklch(22% 0.03 255 / .08)}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;text-decoration:none;white-space:nowrap}
.brand img{border-radius:6px}
.nav-links{display:flex;flex:1;justify-content:center;gap:1.1rem;font-size:.95rem}
.nav-links a{text-decoration:none;color:var(--color-muted);white-space:nowrap}
.nav-links a:hover{color:var(--color-ink)}
section{padding:var(--space-8) 0}
.section-head{margin-bottom:var(--space-5)}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}
.hero{position:relative;min-height:100svh;display:grid;align-items:end;padding:calc(80px + var(--space-6)) 0 var(--space-8);overflow:clip}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(18% 0.03 255 / .25),oklch(18% 0.03 255 / .72) 55%, oklch(18% 0.03 255 / .9))}
.hero-inner{position:relative;z-index:1;color:#fff}
.hero .lede{color:oklch(92% 0.02 250)}
.hero-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-4)}
.tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:.35rem .65rem;border:1px solid oklch(100% 0 0 / .28);border-radius:999px;background:oklch(18% 0.03 255 / .35)}
.hero h1 span{display:block;font-size:clamp(1rem,2vw,1.25rem);font-weight:500;margin-top:.45rem;color:oklch(85% 0.04 230)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin:var(--space-5) 0}
.metric{border-top:1px solid oklch(100% 0 0 / .28);padding-top:var(--space-3)}
.metric strong{display:block;font-family:var(--font-mono);font-size:.95rem}
.metric span{color:oklch(85% 0.02 250);font-size:.9rem}
.info-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);margin-top:calc(-1 * var(--space-6));position:relative;z-index:2}
.info-card{background:var(--color-panel);border:1px solid var(--color-rule);padding:var(--space-4);border-radius:var(--radius);box-shadow:0 8px 24px oklch(22% 0.03 255 / .04)}
.info-card dt{font-family:var(--font-mono);font-size:11px;color:var(--color-muted);letter-spacing:.08em;text-transform:uppercase}
.info-card dd{margin:.4rem 0 0;font-weight:700}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:center}
.split.reverse{direction:rtl}
.split.reverse > *{direction:ltr}
.split figure{margin:0;border:1px solid var(--color-rule);border-radius:var(--radius);overflow:hidden;background:var(--color-panel)}
.split img{width:100%;aspect-ratio:16/10;object-fit:cover}
.split p{color:var(--color-muted)}
.grid-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.feat{padding:var(--space-4);border:1px solid var(--color-rule);background:var(--color-panel);border-radius:var(--radius);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.feat:hover{transform:translateY(-3px);box-shadow:0 12px 28px oklch(22% 0.03 255 / .08)}
.feat p{margin:0;color:var(--color-muted)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.gallery button{border:1px solid var(--color-rule);padding:0;background:transparent;cursor:pointer;border-radius:var(--radius);overflow:hidden;transition:transform var(--dur) var(--ease-out),filter var(--dur) var(--ease-out)}
.gallery button:hover{transform:scale(1.015);filter:brightness(1.04)}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cta-band{background:var(--color-paper-2);border-block:1px solid var(--color-rule);text-align:center}
.cta-band .lede{margin:0 auto var(--space-4)}
.timeline details{border-left:2px solid var(--color-accent);padding:var(--space-4) 0 var(--space-4) var(--space-4);margin-left:.5rem}
.timeline summary{cursor:pointer;font-weight:700;list-style:none}
.timeline summary::-webkit-details-marker{display:none}
.timeline p{color:var(--color-muted);margin:var(--space-2) 0 0}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.review-card{border:1px solid var(--color-rule);background:var(--color-panel);padding:var(--space-4);border-radius:var(--radius);opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.review-card.in{opacity:1;transform:none}
.review-card p{margin:0 0 var(--space-3);color:var(--color-muted)}
.review-card .src{font-family:var(--font-mono);font-size:12px;color:var(--color-accent)}
.faq details{border-top:1px solid var(--color-rule);padding:var(--space-4) 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--color-accent)}
.faq details[open] summary::after{content:"-"}
.faq p{color:var(--color-muted);margin:var(--space-3) 0 0}
.footer{padding:var(--space-8) 0 var(--space-5);border-top:1px solid var(--color-rule);background:var(--color-dark);color:oklch(94% 0.01 250)}
.footer-statement{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);margin:0 0 var(--space-6);max-width:18ch}
.footer a{color:inherit;text-decoration:none}
.footer .tiny{color:oklch(78% 0.02 250)}
.footer-row{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-4)}
.footer-links{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem}
.tiny{font-size:.85rem;color:var(--color-muted)}
.lightbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:oklch(0% 0 0 / .86);padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1080px,92vw);max-height:86vh;border:1px solid oklch(100% 0 0 / .2)}
.lightbox button{position:absolute;top:50%;translate:0 -50%}
.lightbox .prev{left:18px}.lightbox .next{right:18px}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-4)}
.tabs button{min-height:40px;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--color-rule);background:transparent;color:var(--color-muted);cursor:pointer}
.tabs button.active,.tabs button:hover{border-color:var(--color-accent);color:var(--color-ink);background:oklch(52% 0.14 255 / .08)}
.platform-grid,.req-grid,.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.platform-card,.guide-card{border:1px solid var(--color-rule);background:var(--color-panel);padding:var(--space-5);border-radius:var(--radius)}
.platform-card .badge{display:inline-block;font-family:var(--font-mono);font-size:11px;color:#fff;background:var(--color-accent);padding:.2rem .5rem;border-radius:999px;margin-bottom:.75rem}
.steps{display:grid;gap:var(--space-4)}
.step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-3);border-left:2px solid var(--color-rule);padding-left:var(--space-4)}
.step-num{font-family:var(--font-mono);color:var(--color-accent);font-size:1.2rem}
.guide-card{text-align:left;cursor:pointer;color:inherit;font:inherit;width:100%;transition:transform var(--dur) var(--ease-out)}
.guide-card:hover{transform:translateY(-2px);border-color:var(--color-accent)}
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:24px;background:oklch(0% 0 0 / .75)}
.modal.open{display:flex}
.modal-panel{width:min(720px,100%);max-height:86vh;overflow:auto;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius);padding:var(--space-5)}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid var(--color-rule);padding:12px;text-align:left}
th{background:var(--color-paper-2)}
.article-body{padding:calc(88px + var(--space-6)) 0 var(--space-8);max-width:70ch}
.article-body ol,.article-body ul{color:var(--color-muted);padding-left:1.2rem}
.toc{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-bottom:var(--space-5);font-size:.92rem}
.page-hero{padding:calc(88px + var(--space-6)) 0 var(--space-5)}
@media (max-width:900px){
  .nav-links{display:none}
  .metrics,.info-grid,.grid-feats,.gallery,.reviews,.platform-grid,.req-grid,.guide-grid,.split{grid-template-columns:1fr}
  .split.reverse{direction:ltr}
}
@media (max-width:640px){
  .metrics,.info-grid{grid-template-columns:1fr 1fr}
  .hero{min-height:auto}
  .brand span{max-width:10ch;overflow:hidden;text-overflow:ellipsis}
}