:root {
  --night: #0c2027;
  --night-deep: #091b22;
  --paper: #f2f4eb;
  --ink: #192e31;
  --subtle: #4b625d;
  --mint: #9aebc8;
  --gold: #f1cc92;
  --rule: #c7d2c7;
  --font: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: 18px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); line-height: 1.6; }
h1, h2, h3, h4, p, figure, dl, dd, fieldset { margin: 0; }
fieldset { min-inline-size: 0; padding: 0; border: 0; }
a { color: inherit; }
::selection { background: #a8e1c6; color: #113e38; }
:focus-visible { outline: 3px solid #278267; outline-offset: 4px; }
[hidden] { display: none !important; }
.shell { width: min(1248px, calc(100% - 112px)); margin-inline: auto; }
.icon, .platform-icon, .button-arrow {
  display: block; flex: none; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.icon-defs, .sr-only, .segmented input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; z-index: 5; top: 8px; left: 14px; padding: 9px 15px;
  background: var(--mint); color: var(--night); border-radius: 5px; transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.masthead { background: var(--night-deep); color: #ebf3ec; border-bottom: 1px solid #2b4145; }
.header-row { display: flex; align-items: center; min-height: 75px; gap: 24px; }
.brand { display: inline-flex; flex: none; align-items: center; gap: 10px; font-size: 22px; font-weight: 780; line-height: 1; text-decoration: none; }
.brand img { display: block; flex: none; }
.brand small { margin-left: 1px; padding: 4px 0 3px 12px; border-left: 1px solid #49605f; color: #acbfb8; font: 650 10px/1 var(--mono); letter-spacing: .16em; }
.main-nav { display: flex; margin-left: auto; gap: clamp(18px, 2.8vw, 42px); }
.main-nav a, .site-footer nav a, .back-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.main-nav a { color: #c4d1cc; font-size: 14px; font-weight: 560; white-space: nowrap; }
.main-nav a:hover, .site-footer a:hover, .back-link:hover { color: var(--mint); }
.header-download {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px;
  padding: 8px 16px; margin-left: 8px; border: 1px solid #446962; border-radius: 7px;
  color: #beead5; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none;
}
.header-download:hover { color: #dcf8ea; background: #173d3e; border-color: #6a9d8a; }
.header-download .icon { width: 16px; height: 16px; }
.masthead :focus-visible, .hero :focus-visible, .privacy :focus-visible, .site-footer :focus-visible { outline-color: var(--mint); }

.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #f6f7ed; background: var(--night);
  background-image: radial-gradient(ellipse at 75% 48%, #25454a 0%, #143138 38%, #0c222a 66%, #0c2027 88%);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 0 26%; pointer-events: none; opacity: .26;
  background-image: radial-gradient(#81b5a7 .7px, transparent .8px); background-size: 13px 13px;
  mask-image: linear-gradient(90deg, transparent, #000 32%, #000 83%, transparent);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); align-items: center; gap: clamp(32px, 4.3vw, 70px); padding-block: clamp(64px, 6.4vw, 98px); }
.hero-copy, .preview-shell, .support-grid > * { min-width: 0; }
.kicker { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 720; line-height: 1.4; letter-spacing: .065em; }
.kicker .icon { width: 16px; height: 16px; }
.hero-kicker { color: #b6e6cf; }
.hero-kicker .rule { width: 20px; height: 1px; margin-inline: 1px; background: #52766d; }
.version { color: #bbcdc2; font: 540 12px/1 var(--mono); letter-spacing: .03em; }
.hero h1 { margin: 23px 0 22px; font-size: clamp(55px, 5.33vw, 83px); font-weight: 800; line-height: 1.16; letter-spacing: -.055em; }
.hero h1 em { color: var(--mint); font-style: normal; }
.hero-description { max-width: 25em; color: #c0d0ca; font-size: clamp(16px, 1.23vw, 19px); line-height: 1.85; }
.downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.download-button {
  display: inline-flex; align-items: center; gap: 11px; min-height: 66px;
  padding: 10px 14px; border: 1px solid transparent; border-radius: 9px; line-height: 1.3; text-decoration: none;
}
.download-button span { display: grid; gap: 3px; }
.download-button strong { font-size: 16px; font-weight: 760; white-space: nowrap; }
.download-button small { font: 520 11px/1.4 var(--font); letter-spacing: .015em; white-space: nowrap; }
.platform-icon { width: 27px; height: 27px; }
.button-arrow { width: 15px; height: 15px; margin-left: 3px; }
.android-download { color: #133c33; background: var(--mint); }
.android-download small { color: #285644; }
.android-download:hover { background: #b8f6da; }
.windows-download { color: #eff6ec; background: #243b40; border-color: #53716b; }
.windows-download small { color: #c4d2cb; }
.windows-download:hover { background: #304c4e; border-color: #8fb1a2; }

.preview-shell { position: relative; isolation: isolate; margin: 0; }
.preview-shell::before {
  content: ""; position: absolute; z-index: -1; inset: -7px; pointer-events: none;
  background: linear-gradient(#719584, #719584) left top / 14px 1px,
              linear-gradient(#719584, #719584) left top / 1px 14px,
              linear-gradient(#719584, #719584) right bottom / 14px 1px,
              linear-gradient(#719584, #719584) right bottom / 1px 14px;
  background-repeat: no-repeat;
}
.preview-frame { overflow: hidden; border: 1px solid #526c68; border-radius: 12px; background: #132a31; box-shadow: 0 20px 45px #04161b66; }
.game-toolbar, .game-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 5px 15px; }
.game-toolbar { background: #182f37; border-bottom: 1px solid #45605e; }
.scene-name { display: inline-flex; align-items: center; gap: 8px; color: #e1e7dc; font-size: 13px; font-weight: 700; letter-spacing: .07em; white-space: nowrap; }
.scene-name .icon { width: 18px; height: 18px; color: var(--gold); }
.segmented { display: inline-flex; align-items: center; flex: none; }
.segmented label { position: relative; display: flex; align-items: center; cursor: pointer; }
.segmented label > span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.segmented input:focus-visible + span { outline: 2px solid currentColor; outline-offset: -3px; }
.scene-switch { gap: 3px; }
.scene-switch label > span { position: relative; min-height: 36px; padding-inline: 8px; color: #b6c7bf; font-size: 12px; }
.scene-switch input:checked + span { color: #ffdea6; font-weight: 740; }
.scene-switch input:checked + span::after { position: absolute; right: 9px; left: 9px; bottom: 3px; height: 2px; background: #e4b97d; content: ""; }
.scene-switch label:hover > span { color: #ffe5b9; }
.game-stage { position: relative; isolation: isolate; background: #3e606a; }
.landscape { display: block; width: 100%; height: auto; }
.game-dialogue {
  position: absolute; inset-inline: 14px; bottom: 12px; display: flex; align-items: center; gap: 13px;
  min-height: 74px; padding: 8px 20px 8px 9px; color: #f8f0dc;
  background: rgb(14 35 43 / 95%); border: 1px solid #a4bda6; outline: 2px solid #1a343c; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #315156, 0 2px 6px #11272e77;
}
.character-art { display: block; flex: none; width: clamp(45px, 4vw, 59px); height: auto; border: 1px solid #698581; image-rendering: pixelated; }
.speaker { margin-bottom: 2px; color: #f6ce91; font-size: 12px; font-weight: 710; line-height: 1.35; }
.speech { font-size: clamp(14px, 1.24vw, 18px); font-weight: 590; line-height: 1.5; }
.sample-words[lang="en"] .speech { letter-spacing: .005em; }
.speech-end { position: absolute; right: 9px; bottom: 7px; width: 0; height: 0; border-top: 5px solid #b6d7bd; border-inline: 4px solid transparent; }
.game-footer { min-height: 55px; border-top: 1px solid #45605e; background: #132a31; }
.example-note { display: inline-flex; align-items: center; gap: 8px; color: #b4c8be; font-size: 12px; white-space: nowrap; }
.pixel-spark { width: 7px; height: 7px; flex: none; transform: rotate(45deg); border: 1px solid var(--mint); }
.language-switch { padding: 2px; background: #10232a; border: 1px solid #45605d; border-radius: 6px; }
.language-switch label > span { min-height: 32px; padding-inline: 12px; color: #c2d3c8; font-size: 13px; border-radius: 4px; }
.language-switch input:checked + span { color: #163f34; background: #a2dfbf; font-weight: 740; }
.language-switch label:hover input:not(:checked) + span { color: #fff; background: #233c3d; }
.sample-fallback { padding: 5px 15px 12px; color: #c4d5ce; font-size: 13px; }

.guide { padding-block: clamp(53px, 5.7vw, 85px) clamp(46px, 4.8vw, 71px); }
.section-top { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.light-kicker { color: #336b58; }
.guide h2, .faq h2, .privacy h2, .credit-main h1 { font-size: clamp(30px, 3.05vw, 46px); font-weight: 780; line-height: 1.3; letter-spacing: -.045em; }
.guide h2, .faq h2, .privacy h2 { margin-top: 10px; }
.platform-switch { gap: 2px; padding: 3px; border: 1px solid #b7c7ba; border-radius: 8px; background: #e4eae1; }
.platform-switch label > span { min-height: 39px; padding-inline: 13px; border-radius: 5px; color: #4a6059; font-size: 14px; font-weight: 590; }
.platform-switch input:checked + span { background: #20483e; color: #f1f7ec; font-weight: 730; }
.platform-switch label:hover input:not(:checked) + span { color: #1f4838; background: #d6e3d6; }
.platform-switch .icon { width: 17px; height: 17px; }
.platform-heading { margin-top: 18px; }
.guide-panel[data-ready] .platform-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4.5vw, 70px); margin: 43px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-top: 19px; border-top: 1px solid #aebfb1; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: -.68em; left: 0; padding-right: 10px; color: #427964; background: var(--paper); font: 650 13px/1.35 var(--mono); letter-spacing: .04em; }
.steps h4 { margin-bottom: 7px; font-size: clamp(18px, 1.45vw, 22px); font-weight: 730; line-height: 1.5; }
.steps p, .questions p { color: var(--subtle); font-size: 15px; line-height: 1.82; }
kbd { padding: 1px 4px; border: 1px solid #c0ccc0; border-radius: 3px; background: #fafbf6; color: #344e43; font: 620 11px/1.4 var(--mono); white-space: nowrap; }
.key-combo { white-space: nowrap; }

.support-area { padding-bottom: clamp(50px, 5vw, 78px); }
.support-grid { display: grid; grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); gap: clamp(38px, 7vw, 110px); align-items: start; padding-top: clamp(40px, 4.3vw, 65px); border-top: 1px solid var(--rule); }
.privacy { position: relative; isolation: isolate; overflow: hidden; padding: clamp(25px, 3.1vw, 43px); border: 1px solid #284647; border-radius: 12px; color: #eef3e7; background: #15343a; }
.privacy::before { content: ""; position: absolute; z-index: -1; top: -88px; right: -90px; width: 260px; height: 200px; opacity: .3; background: repeating-radial-gradient(ellipse at 65% 25%, transparent 0 15px, #548171 16px 17px, transparent 18px 29px); pointer-events: none; }
.privacy .kicker { color: #a3d4b8; }
.privacy h2, .faq h2 { font-size: clamp(27px, 2.55vw, 37px); }
.privacy-list { margin-top: 25px; }
.privacy-list > div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid #3c5754; }
.privacy-list dt { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; color: #eaf4e8; font-size: 16px; font-weight: 710; }
.privacy-list .icon { width: 17px; height: 17px; color: #a4d6b7; }
.privacy-list dd { margin-left: 26px; color: #bfcec2; font-size: 14px; line-height: 1.8; }
.faq { padding-top: 4px; }
.questions { margin-top: 23px; }
.questions details { border-top: 1px solid var(--rule); }
.questions details:last-child { border-bottom: 1px solid var(--rule); }
.questions summary { position: relative; display: block; padding: 17px 36px 17px 0; cursor: pointer; font-size: 16px; font-weight: 680; line-height: 1.55; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary:hover { color: #296c50; }
.questions summary::before, .questions summary::after { content: ""; position: absolute; top: 50%; right: 5px; width: 12px; height: 2px; background: #4d7162; }
.questions summary::after { transform: rotate(90deg); }
.questions details[open] summary::after { transform: none; }
.questions p { margin: -3px 24px 17px 0; }

.site-footer { color: #d6e3d8; background: var(--night-deep); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 94px; padding-block: 19px; }
.footer-brand { font-size: 19px; }
.site-footer nav { display: flex; flex-wrap: wrap; column-gap: clamp(17px, 2.7vw, 38px); }
.site-footer nav a, .back-link { font-size: 13px; color: #bdd0c3; }
.to-top { gap: 4px; }
.to-top .icon { width: 15px; height: 15px; }
.back-link { margin-left: auto; }

.credit-main { padding-block: clamp(45px, 6vw, 87px); }
.credit-shell { max-width: 790px; }
.credit-main h1 { margin-bottom: 16px; }
.credit-intro { margin-bottom: 30px; max-width: 42em; color: var(--subtle); }
.credit-main section { padding: 22px 0; border-top: 1px solid var(--rule); }
.credit-main h2 { margin-bottom: 8px; font-size: 21px; }
.credit-main section p, .credit-main li { color: var(--subtle); line-height: 1.78; }
.credit-main ul { margin: 7px 0 0; padding-left: 1.25em; }
.credit-main li + li { margin-top: 5px; }
.credit-main section a { display: inline-block; margin: 7px 15px 0 0; color: #255e46; text-underline-offset: 3px; }

@media (max-width: 1150px) {
  .shell { width: calc(100% - 72px); }
  .hero-grid { gap: 31px; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .downloads { gap: 9px; }
  .download-button { gap: 8px; padding-inline: 11px; }
  .download-button strong { font-size: 15px; }
  .download-button .button-arrow { display: none; }
  .support-grid { gap: 48px; }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; padding-block: 49px 52px; }
  .hero h1 { margin-block: 15px; font-size: clamp(50px, 6.8vw, 60px); }
  .hero h1 br { display: none; }
  .hero-description { max-width: 34em; }
  .downloads { margin-top: 22px; }
  .download-button { padding-inline: 14px; }
  .download-button .button-arrow { display: block; }
  .preview-shell { max-width: 680px; }
  .game-dialogue { min-height: 70px; }
  .speech { font-size: 17px; }
  .support-grid { gap: 30px; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); }
  .privacy { padding: 23px; }
  .steps { gap: 25px; }
}
@media (max-width: 680px) {
  .shell { width: calc(100% - 40px); }
  .header-row { min-height: 62px; gap: 15px; }
  .brand { gap: 7px; font-size: 20px; }
  .brand img { width: 33px; height: 33px; }
  .brand small { display: none; }
  .main-nav { gap: 16px; }
  .main-nav a { font-size: 13px; }
  .header-download { margin-left: 0; padding: 6px 10px; gap: 5px; font-size: 13px; }
  .hero-grid { gap: 31px; padding-block: 38px 42px; }
  .hero h1 { line-height: 1.13; }
  .hero-description { font-size: 16px; line-height: 1.75; }
  .hero::before { inset-inline-start: 0; }
  .download-button { min-height: 61px; }
  .game-dialogue { min-height: 60px; }
  .scene-switch label > span { min-height: 42px; }
  .language-switch label > span { min-height: 38px; }
  .guide { padding-block: 40px 35px; }
  .section-top { align-items: start; flex-direction: column; gap: 18px; }
  .platform-switch label > span { min-height: 41px; }
  .steps { grid-template-columns: 1fr; gap: 17px; margin-top: 24px; }
  .steps li { padding: 0 0 0 36px; border: 0; }
  .steps li::before { top: .42em; }
  .steps h4 { margin-bottom: 3px; }
  .support-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 31px; }
  .privacy { padding: 25px; }
  .faq { padding-top: 0; }
  .questions { margin-top: 18px; }
  .footer-row { align-items: start; flex-direction: column; gap: 3px; padding-block: 20px 12px; }
  .footer-brand small { display: block; }
}
@media (max-width: 510px) {
  .hero h1 br { display: initial; }
  .hero h1 { font-size: clamp(45px, 11.5vw, 56px); }
  .main-nav .preview-nav { display: none; }
  .hero-copy { max-width: 460px; }
  .downloads { gap: 8px; }
  .download-button { flex: 1 1 0; justify-content: center; gap: 8px; padding-inline: 6px; }
  .download-button .button-arrow { display: none; }
  .platform-icon { width: 24px; height: 24px; }
  .download-button strong { font-size: 14px; }
  .download-button small { font-size: 10px; }
  .preview-shell::before { inset: -5px; }
  .game-toolbar, .game-footer { padding: 1px 9px; gap: 5px; }
  .game-toolbar { min-height: 45px; }
  .game-footer { min-height: 50px; }
  .scene-name { gap: 5px; }
  .scene-switch { gap: 0; }
  .scene-switch label > span { padding-inline: 7px; }
  .game-dialogue { inset-inline: 8px; bottom: 7px; gap: 8px; min-height: 56px; padding: 5px 12px 5px 6px; }
  .character-art { width: 38px; }
  .speaker { font-size: 11px; }
  .speech { font-size: 14px; line-height: 1.45; }
  .example-note { gap: 6px; font-size: 11px; }
  .language-switch label > span { padding-inline: 9px; font-size: 12px; }
  .questions p { margin-right: 10px; }
}
@media (max-width: 365px) {
  .shell { width: calc(100% - 30px); }
  .header-row { gap: 10px; }
  .main-nav { gap: 9px; }
  .header-download { padding-inline: 6px; }
  .header-download .icon { display: none; }
  .scene-name { font-size: 12px; }
  .download-button .platform-icon { width: 20px; height: 20px; }
}
@media (forced-colors: active) {
  .segmented input:checked + span { outline: 2px solid Highlight; outline-offset: -4px; }
  .segmented input:focus-visible + span { outline-style: dashed; }
  .download-button { border-color: ButtonText; }
}