@font-face { font-family:Manrope; src:url("assets/fonts/manrope-variable.ttf") format("truetype"); font-style:normal; font-weight:200 800; font-display:swap; }
:root { color-scheme:light; --ink:#181b1b; --muted:#646d67; --line:#dce0dd; --lime:#d5f76c; --accent:#ec533d; --dark:#121416; font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif; color:var(--ink); background:#fafbf9; font-synthesis:none; }
:root.is-hosted { font-family:Manrope,"Microsoft YaHei","PingFang SC",sans-serif; }
* { box-sizing:border-box; letter-spacing:0; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; min-width:280px; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
img { display:block; max-width:100%; }
p { line-height:1.75; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-weight:550; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:10; padding:12px; background:#fff; border:1px solid var(--ink); }
.skip-link:focus { top:8px; }
.shell { width:100%; max-width:1440px; margin-inline:auto; padding-inline:64px; }
.site-header { border-bottom:1px solid var(--line); background:#fafbf9; }
.header-inner { min-height:88px; display:flex; align-items:center; gap:38px; }
.wordmark { display:flex; align-items:center; gap:12px; font-size:16px; font-weight:700; margin-right:auto; min-width:0; }
.brand-mark { width:29px; height:29px; object-fit:contain; }
.nav { display:flex; align-items:center; gap:30px; font-size:12px; }
.nav a { padding:14px 0; border-bottom:1px solid transparent; transition:border-color .2s ease,color .2s ease; }
.nav a:hover,.nav a[aria-current="page"] { border-color:currentColor; }
.language-switch { display:flex; gap:3px; flex-shrink:0; border-left:1px solid var(--line); padding-left:22px; }
.language-switch button { width:44px; height:44px; border:0; background:transparent; color:var(--muted); font-size:11px; transition:color .2s ease; }
.language-switch button:hover { color:var(--ink); }
.language-switch button[aria-pressed="true"] { color:var(--ink); font-weight:700; }
.is-home .site-header { background:var(--dark); color:#f8faf6; border-color:#ffffff1c; }
.is-home .brand-mark { filter:brightness(0) invert(1); }
.is-home .language-switch { border-color:#ffffff30; }
.is-home .language-switch button { color:#828887; }
.is-home .language-switch button:hover { color:#fafbf6; }
.is-home .language-switch button[aria-pressed="true"] { color:var(--lime); }
.hero { position:relative; height:min(650px,calc(100svh - 176px)); min-height:540px; isolation:isolate; overflow:hidden; background:var(--dark); color:#fafbf6; }
.hero-scene,.hero-fallback { position:absolute; inset:0; }
.hero-scene { z-index:-1; }
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; visibility:hidden; opacity:0; }
.hero-scene[data-ready="true"] .hero-canvas { visibility:visible; opacity:1; }
.hero-scene[data-ready="true"] .hero-fallback { visibility:hidden; }
.hero-art { width:100%; height:100%; object-fit:fill; }
.hero-content { position:relative; padding-top:52px; pointer-events:none; }
.eyebrow { font-size:11px; font-weight:500; text-transform:uppercase; margin-bottom:24px; color:var(--muted); }
.hero .eyebrow { display:flex; align-items:center; gap:10px; color:#aeb6ae; }
.hero .eyebrow > span { width:7px; height:7px; background:var(--lime); }
.hero h1 { font-size:102px; line-height:1.02; margin-bottom:25px; max-width:900px; font-weight:500; }
.hero h1 > span { display:block; }
.hero-dot { color:var(--lime); }
.hero .intro { font-size:15px; color:#b2b9b2; max-width:380px; margin-bottom:25px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:25px; }
.hero-actions a { pointer-events:auto; }
.hero .text-link { font-size:12px; border-color:#ffffff50; }
.hero .text-link img { filter:brightness(0) invert(1); }
.hero-bottom { position:absolute; inset:auto 0 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#939d96; font-size:11px; }
.scene-tools { display:flex; gap:8px; }
.scene-tools .icon-button { background:transparent; color:#fff; border-color:#ffffff30; border-radius:0; width:44px; height:44px; padding:12px; }
.scene-tools .icon-button img { filter:brightness(0) invert(1); }
.scene-tools .icon-button:hover { background:#ffffff18; border-color:#ffffff70; }
.collection-strip { border-bottom:1px solid var(--line); }
.collection-strip > div { min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:10px; text-transform:uppercase; }
.collection-strip span:nth-child(2) { color:var(--muted); }
.text-link { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:550; border-bottom:1px solid var(--ink); padding-bottom:6px; transition:color .2s ease,border-color .2s ease; }
.text-link img,.button img { width:17px; height:17px; flex-shrink:0; }
.text-link img,.button img,.product-art-arrow img { transition:transform .25s ease; }
.text-link:hover img,.button:hover img,.product-art:hover .product-art-arrow img { transform:translate(2px,-2px); }
.hero-button:hover img { transform:translateY(2px); }
.text-link:hover { color:var(--accent); border-color:var(--accent); }
.section { padding-block:76px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; }
.section-heading h2 { font-size:42px; line-height:1.1; margin:0; }
.section-heading .eyebrow { margin-bottom:18px; }
.section-heading > span { font-size:11px; color:var(--muted); padding-bottom:5px; }
.games-grid { display:grid; grid-template-columns:1fr; gap:64px; }
.game-card { min-width:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.15fr; gap:64px; padding-top:32px; align-items:center; }
.game-card:nth-child(2) { grid-template-columns:1.15fr 1fr; }
.game-card:nth-child(2) .game-summary { order:2; }
.game-summary { min-width:0; }
.project-label { display:flex; align-items:center; gap:24px; font-size:10px; color:var(--muted); text-transform:uppercase; margin-bottom:30px; }
.project-label > span:first-child { font-size:13px; color:var(--accent); }
.game-card h3 { font-size:48px; line-height:1.1; max-width:420px; margin-bottom:23px; }
.game-card p.game-tagline { font-size:19px; color:var(--ink); margin-bottom:14px; }
.game-card p.game-description { color:var(--muted); font-size:14px; max-width:365px; margin-bottom:28px; }
.product-art { display:block; position:relative; aspect-ratio:9/7; overflow:hidden; background:#eaeeeb; border-radius:0; }
.product-art > img { width:100%; height:100%; object-fit:contain; transition:transform .6s ease; }
.product-art:hover > img { transform:scale(1.035); }
.product-art-arrow { display:grid; place-items:center; position:absolute; bottom:20px; right:20px; width:40px; height:40px; border:1px solid #11111130; background:#ffffffd9; transition:background .2s ease; }
.product-art:hover .product-art-arrow { background:#fff; }
.product-art-arrow img { width:17px; height:17px; }
.status { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }
.status::before { content:""; width:5px; height:5px; background:var(--accent); }
.card-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.project-meta { display:flex; justify-content:space-between; gap:20px; max-width:365px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.version { font-size:10px; color:var(--muted); }
.studio-section { background:var(--lime); padding-block:90px; }
.studio-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.studio-section .eyebrow { color:#56632a; }
.studio-section h2 { font-size:58px; line-height:1.1; margin-bottom:0; }
.studio-story > p { font-size:17px; max-width:490px; margin-bottom:42px; }
.studio-numbers { display:flex; gap:70px; border-top:1px solid #161b1930; padding-top:30px; }
.studio-numbers strong { font-size:60px; line-height:1; font-weight:400; display:block; margin-bottom:12px; }
.studio-numbers span { font-size:11px; }
.support-band { display:flex; justify-content:space-between; gap:30px; align-items:center; padding-block:72px; }
.support-band h2 { font-size:36px; line-height:1.2; margin-bottom:14px; }
.support-band p:not(.eyebrow) { font-size:13px; color:var(--muted); margin:0; }
.support-band .eyebrow { margin-bottom:22px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:14px 20px; min-height:48px; border:1px solid var(--ink); border-radius:0; background:var(--ink); color:#fff; font-size:12px; font-weight:600; text-align:center; transition:background .2s ease,border-color .2s ease,color .2s ease; }
.button:hover { background:#343938; }
.button > img { filter:brightness(0) invert(1); }
.button.secondary { background:transparent; color:var(--ink); border-color:#aeb5ae; }
.button.secondary > img { filter:none; }
.button.secondary:hover { border-color:var(--ink); background:#ecefea; }
.button.hero-button { background:var(--lime); border-color:var(--lime); color:#182018; }
.button.hero-button img { filter:none; }
.button.hero-button:hover { background:#e6ff9a; }
.button.danger { background:#a43d2e; border-color:#a43d2e; }
.site-footer { background:var(--dark); color:#c2c8c2; padding-block:56px 28px; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; padding-bottom:48px; }
.footer-brand { font-size:48px; font-weight:500; color:#fafbf6; max-width:70%; }
.footer-top p { font-size:12px; margin-bottom:8px; color:#9aa399; }
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:18px; padding-top:26px; border-top:1px solid #ffffff22; font-size:10px; }
.footer-links { display:flex; gap:24px; }
.footer-links a:hover { color:var(--lime); }
.page-head { padding-block:60px 45px; border-bottom:1px solid var(--line); }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin-bottom:34px; }
.breadcrumbs img { width:12px; height:12px; }
.page-head h1 { font-size:48px; line-height:1.15; margin-bottom:20px; }
.page-head .lead { max-width:680px; font-size:16px; color:var(--muted); margin-bottom:0; }
.product-head { padding-block:52px 44px; }
.product-head h1 { font-size:64px; line-height:1.05; margin-block:16px 22px; }
.product-head .lead { font-size:16px; max-width:570px; color:var(--muted); }
.product-head .button { margin-top:12px; }
.product-head .button + .button { margin-left:12px; }
.product-wide { aspect-ratio:21/9; background:#eaeeeb; overflow:hidden; }
.product-wide picture { display:block; width:100%; height:100%; }
.product-wide img { width:100%; height:100%; object-fit:contain; }
.product-details { display:grid; grid-template-columns:1.2fr 1fr; gap:100px; }
.product-details h2 { font-size:32px; line-height:1.2; }
.product-details p { font-size:15px; color:var(--muted); max-width:540px; }
.facts { margin:0; }
.facts div { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding:17px 0; font-size:12px; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; text-align:right; }
.puzzle-list { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; list-style:none; padding:0; margin-bottom:0; }
.puzzle-list li { font-size:17px; border-bottom:1px solid var(--line); padding:24px 0; }
.puzzle-list span { color:var(--muted); font-size:12px; display:block; margin-top:8px; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.gallery-grid.gallery-single { grid-template-columns:1fr; width:min(100%,300px); margin-inline:auto; }
.shot { border:1px solid var(--line); border-radius:0; padding:0; background:#fff; aspect-ratio:390/844; overflow:hidden; }
.shot img { width:100%; height:100%; object-fit:contain; }
.shot:hover { outline:1px solid var(--ink); outline-offset:5px; }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.contact-section { border-bottom:1px solid var(--line); padding-bottom:35px; }
.contact-section h2,.data-section h2,.two-columns > section > h2 { font-size:26px; margin-bottom:18px; }
.contact-section p,.data-section p { font-size:14px; color:var(--muted); }
.contact-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.faq-search { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--ink); padding:16px 0; margin-bottom:15px; }
.faq-search img { width:18px; height:18px; }
.faq-search input { width:100%; min-width:0; border:0; outline:none; background:transparent; font-size:14px; color:var(--ink); }
.faq-search:focus-within { outline:2px solid var(--ink); outline-offset:6px; }
details { border-bottom:1px solid var(--line); }
summary { cursor:pointer; display:flex; justify-content:space-between; gap:18px; padding:24px 0; font-size:14px; font-weight:500; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary img { width:17px; height:17px; flex-shrink:0; transition:transform .2s ease; }
details[open] summary img { transform:rotate(45deg); }
details p { font-size:14px; color:var(--muted); padding-right:20px; margin-bottom:24px; }
.empty-results { font-size:14px; color:var(--muted); padding:24px 0; }
.data-section { padding-top:35px; }
.data-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); font-size:14px; }
.icon-button { width:44px; height:44px; padding:12px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); border-radius:0; flex-shrink:0; transition:background .2s ease,border-color .2s ease; }
.icon-button img { width:19px; height:19px; }
.icon-button:hover { background:#eef1eb; border-color:var(--ink); }
.privacy-layout { display:grid; grid-template-columns:205px 1fr; gap:85px; padding-block:52px 70px; align-items:start; }
.privacy-toc { display:flex; flex-direction:column; gap:20px; position:sticky; top:28px; font-size:12px; color:var(--muted); }
.privacy-toc a:hover { color:var(--ink); }
.policy-section { margin-bottom:40px; scroll-margin-top:30px; }
.policy-section h2 { font-size:25px; margin-bottom:16px; }
.policy-section p { font-size:15px; color:var(--muted); }
.policy-section a { color:var(--ink); text-decoration:underline; }
.policy-section ul { padding-left:22px; color:var(--muted); font-size:14px; line-height:1.9; }
.updated { font-size:11px; color:var(--muted); margin-top:24px; }
dialog { border:1px solid var(--line); border-radius:3px; box-shadow:0 16px 60px #10141135; color:var(--ink); background:#fafbf9; }
dialog::backdrop { background:#101411aa; }
.gallery-dialog { width:min(620px,calc(100% - 24px)); padding:58px 20px 16px; }
.dialog-close { position:absolute; right:12px; top:12px; }
.gallery-stage { display:flex; align-items:center; justify-content:space-between; gap:12px; touch-action:pan-y pinch-zoom; }
.gallery-image { height:min(65svh,660px); width:auto; max-width:calc(100% - 112px); object-fit:contain; touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; }
.gallery-dialog p { margin:18px 0 0; text-align:center; font-size:12px; color:var(--muted); }
.confirm-dialog { width:min(430px,calc(100% - 32px)); padding:30px; }
.confirm-dialog h2 { font-size:23px; }
.confirm-dialog p { font-size:14px; color:var(--muted); }
.confirm-check { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.6; }
.confirm-check input { flex-shrink:0; margin-top:4px; accent-color:var(--ink); }
.dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:24px; }
.notice { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:14px 20px; background:var(--ink); color:#fff; font-size:13px; z-index:5; box-shadow:0 4px 16px #181b1b30; }
.preview-note { font-size:12px; color:var(--muted); padding:13px 0; margin:0; }
@media(min-width:1700px) {
  .shell { max-width:1600px; padding-inline:80px; }
  .hero-content { padding-top:56px; }
  .hero h1 { font-size:108px; }
}
@media(max-width:1100px) {
  .shell { padding-inline:40px; }
  .header-inner { gap:26px; }
  .nav { gap:23px; }
  .hero h1 { font-size:88px; }
  .game-card,.game-card:nth-child(2) { gap:40px; }
  .game-card h3 { font-size:40px; }
  .studio-grid { gap:50px; }
  .studio-section h2 { font-size:48px; }
  .product-details,.two-columns { gap:60px; }
}
@media(max-width:760px) {
  .shell { padding-inline:28px; }
  .header-inner { min-height:80px; gap:20px; }
  .wordmark { font-size:13px; gap:8px; }
  .brand-mark { width:24px; height:24px; }
  .nav { gap:16px; font-size:11px; }
  .language-switch { padding-left:12px; }
  .hero { height:min(570px,calc(100svh - 160px)); min-height:470px; }
  .hero h1 { font-size:68px; }
  .hero-content { padding-top:42px; }
  .hero .intro { font-size:13px; max-width:300px; }
  .section { padding-block:56px; }
  .section-heading h2 { font-size:34px; }
  .game-card,.game-card:nth-child(2) { grid-template-columns:1fr; gap:28px; }
  .game-card:nth-child(2) .game-summary { order:0; }
  .game-card h3 { font-size:42px; max-width:500px; }
  .game-description { max-width:500px!important; }
  .project-label { margin-bottom:22px; }
  .product-art { aspect-ratio:9/7; }
  .studio-section { padding-block:64px; }
  .studio-grid { grid-template-columns:1fr; gap:35px; }
  .studio-story > p { font-size:16px; margin-bottom:30px; }
  .studio-numbers { gap:70px; }
  .studio-numbers strong { font-size:54px; }
  .support-band { padding-block:56px; }
  .support-band h2 { font-size:28px; }
  .support-band .button { flex-shrink:0; }
  .footer-brand { font-size:36px; }
  .footer-top { flex-direction:column; align-items:flex-start; gap:20px; padding-bottom:32px; }
  .footer-brand { max-width:none; }
  .two-columns,.product-details { grid-template-columns:1fr; gap:45px; }
  .product-head h1 { font-size:48px; }
  .gallery-grid { gap:14px; }
  .privacy-layout { grid-template-columns:1fr; gap:32px; }
  .privacy-toc { position:static; flex-direction:row; flex-wrap:wrap; gap:12px 22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
  .product-wide { aspect-ratio:21/9; }
}
@media(min-width:541px) and (max-width:760px) {
  .hero-content { padding-top:24px; }
  .hero .eyebrow { line-height:1.3; margin-bottom:18px; }
  .hero h1 { font-size:48px; margin-bottom:16px; }
  .hero .intro { font-size:12px; line-height:1.6; max-width:320px; margin-bottom:18px; }
  .hero-actions { gap:18px; }
  .hero .button { min-height:44px; padding:12px 16px; }
}
@media(max-width:540px) {
  .shell { padding-inline:24px; }
  .header-inner { gap:8px; min-height:102px; flex-wrap:wrap; padding-top:12px; padding-bottom:6px; }
  .wordmark { flex:1; font-size:13px; }
  .language-switch { border:0; padding:0; }
  .nav { order:3; width:100%; gap:28px; justify-content:flex-start; }
  .nav a { padding:8px 0; }
  .hero { height:min(570px,calc(100svh - 160px)); min-height:430px; }
  .hero-content { padding-top:32px; }
  .hero h1 { font-size:56px; margin-bottom:19px; }
  html[lang="zh-CN"] .hero h1 { font-size:54px; }
  .hero .eyebrow { margin-bottom:20px; font-size:10px; }
  .hero .intro { max-width:275px; font-size:12px; margin-bottom:22px; }
  .hero-actions { gap:18px; }
  .hero .button { min-height:44px; padding:12px 15px; font-size:11px; gap:13px; }
  .hero .text-link { font-size:11px; }
  .hero-bottom { bottom:18px; font-size:10px; gap:12px; }
  .hero-bottom > span { flex:1; min-width:0; line-height:1.6; }
  .scene-tools { gap:6px; }
  .scene-tools .icon-button { width:44px; height:44px; padding:12px; }
  .collection-strip > div { min-height:50px; gap:10px; font-size:9px; }
  .section-heading { margin-bottom:30px; gap:14px; }
  .section-heading h2 { font-size:32px; }
  .section-heading > span { font-size:9px; max-width:100px; text-align:right; }
  .gallery-heading { flex-direction:column; align-items:flex-start; gap:12px; }
  .gallery-heading > span { font-size:12px; max-width:none; text-align:left; padding:0; }
  .section-heading .eyebrow { margin-bottom:14px; }
  .game-card h3 { font-size:38px; }
  .game-card p.game-tagline { font-size:16px; }
  .game-card p.game-description { font-size:13px; }
  .games-grid { gap:42px; }
  .game-card { padding-top:26px; }
  .studio-section h2 { font-size:42px; }
  .support-band { display:block; }
  .support-band .button { margin-top:24px; }
  .site-footer { padding-top:42px; }
  .footer-brand { font-size:30px; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .page-head { padding-top:36px; }
  .page-head h1 { font-size:36px; }
  .page-head .lead { font-size:14px; }
  .product-head { padding-block:35px; }
  .product-head h1 { font-size:40px; }
  .product-head .lead { font-size:14px; }
  .product-details h2 { font-size:27px; }
  .product-wide { aspect-ratio:650/560; }
  .gallery-grid { grid-template-columns:1fr 1fr; gap:18px; }
  .gallery-stage { gap:8px; }
  .gallery-dialog { padding-left:10px; padding-right:10px; }
  .gallery-image { max-width:calc(100% - 104px); }
  .puzzle-list { grid-template-columns:1fr; }
  .contact-links .button { width:100%; }
}
@media(min-width:351px) and (max-width:540px) and (max-height:660px) {
  .hero-content { padding-top:24px; }
  .hero .eyebrow { margin-bottom:16px; }
  .hero h1 { font-size:46px; margin-bottom:14px; }
  html[lang="zh-CN"] .hero h1 { font-size:44px; }
  .hero .intro { font-size:11px; line-height:1.6; margin-bottom:16px; }
}
@media(max-width:350px) {
  .shell { padding-inline:18px; }
  .hero-content { padding-top:24px; }
  .hero .eyebrow { margin-bottom:16px; }
  .hero h1 { font-size:44px; margin-bottom:14px; }
  html[lang="zh-CN"] .hero h1 { font-size:42px; }
  .hero .intro { max-width:260px; font-size:11px; line-height:1.6; margin-bottom:16px; }
  .hero-bottom > span { max-width:140px; line-height:1.6; }
  .game-card h3 { font-size:34px; }
  .footer-brand { font-size:26px; }
  .nav { gap:24px; }
  .collection-strip > div { font-size:8px; }
  .facts div { font-size:11px; gap:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }