/* Shared by both sites. Each site maps these roles to its own palette:
   --bg --surface --fg --muted --line --accent --accent-text --on-accent --soft, and --font-text. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg);
  font-family: var(--font-text); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-kerning: normal; overflow-x: clip;
}
.lang-zh body { font-size: 16px; line-height: 1.8; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

.wrap { width: min(calc(100% - 2 * clamp(16px, 4vw, 48px)), 1160px); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: var(--fg); color: var(--bg); text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.top.scrolled { border-bottom-color: var(--line); }
.top-in { height: 68px; display: flex; align-items: center; gap: clamp(12px, 3vw, 32px); }
.nav { display: flex; gap: clamp(14px, 2.4vw, 30px); margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: .01em; color: var(--muted); transition: color .2s; padding-block: 8px; }
.nav a:hover { color: var(--fg); }
.controls { display: flex; align-items: center; gap: 6px; }
.lang, .theme { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--fg); cursor: pointer; transition: border-color .2s, background-color .2s; }
.theme { width: 38px; justify-content: center; padding: 0; }
.lang:hover, .theme:hover { border-color: var(--soft); background: color-mix(in srgb, var(--soft) 14%, transparent); }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.i-play { fill: currentColor; stroke: none; }
.theme .i-sun { display: none; }
:root[data-theme="dark"] .theme .i-sun { display: block; }
:root[data-theme="dark"] .theme .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme .i-moon { display: none; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .controls { margin-left: auto; }
}

/* Type */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.lang-zh .eyebrow { letter-spacing: .24em; font-size: 14px; }
.h2 { margin-top: 10px; font-weight: 500; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; }
.lang-zh .h2 { letter-spacing: .02em; line-height: 1.3; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--fg); max-width: 34em; }
.lang-zh .lead { line-height: 1.9; max-width: 30em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 500; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s, filter .2s; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 26px -10px color-mix(in srgb, var(--accent) 90%, transparent); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .i-arrow { transition: transform .2s; }
.btn:hover .i-arrow { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--soft); }

/* Placeholders: words or pictures still to come. Drawn plainly so nobody mistakes them for the real thing. */
.todo { display: inline; padding: .12em .5em; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--muted) 70%, transparent); background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--muted) 10%, transparent) 6px 12px); color: var(--muted); font-size: .86em; font-style: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.slot { position: relative; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 16px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent); background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--muted) 7%, transparent) 10px 20px); color: var(--muted); font-size: 14px; line-height: 1.45; }
.slot .i { width: 28px; height: 28px; margin: 0 auto 8px; opacity: .8; }

/* Footer */
.foot { border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-block: 28px 36px; font-size: 14px; color: var(--muted); }
.foot a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--muted); transition: color .2s; }
.foot a:hover { color: var(--fg); }
.foot .to-top { margin-left: auto; }

/* Things that move only move for people who are fine with motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* playglasswild.com. Day in the light theme, dusk in the dark one, in Glasswild's own colours (art/palette.json):
   ink #2b1e33, bone #f3e6cf/#fffaf0, light #ffc65a/#ffd25a, dusk sky #2a2160 #7a4f9c #c97a9a #ffbf8e, day sky #9cc4e4 #f6e2c4. */
:root {
  --bg: #f3e6cf; --surface: #fffaf0; --fg: #2b1e33; --muted: #64536a; --line: #dcc5b4;
  --accent: #ffc65a; --accent-text: #8c4a1e; --on-accent: #2b1e33; --soft: #b59fa0;
  --sky: radial-gradient(60% 55% at 74% 18%, rgba(255, 240, 196, .9) 0%, rgba(255, 240, 196, 0) 70%), linear-gradient(180deg, #7fb0e0 0%, #9cc4e4 38%, #cfe0e6 68%, #f3e6cf 100%);
  --mote: rgba(255, 255, 255, .9); --mote-glow: rgba(255, 255, 255, .6); --spark: #fffaf0; --pitch: #2b1e33; --pitch-shadow: rgba(255, 250, 240, .7);
  --thumb-bg: #2a2160; --shadow: rgba(43, 30, 51, .3);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .12 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --font-text: "Jost Web", "Noto Sans SC Web", system-ui, sans-serif;
  --font-pixel: "Fusion Pixel Web", "Noto Sans SC Web", monospace;
  color-scheme: light;
}
.lang-zh { --font-text: "Jost Web Zh", "Noto Sans SC Web", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17122f; --surface: #221a45; --fg: #f3e6cf; --muted: #c2adb0; --line: #382c62;
    --accent: #ffd25a; --accent-text: #ffd25a; --on-accent: #2b1e33; --soft: #7a4f9c;
    --sky: radial-gradient(70% 45% at 50% 104%, rgba(255, 200, 150, .85) 0%, rgba(255, 191, 142, 0) 70%), linear-gradient(180deg, #1d1740 0%, #2a2160 26%, #4a3480 50%, #7a4f9c 68%, #c97a9a 86%, #ffbf8e 100%);
    --mote: #ffd98a; --mote-glow: rgba(255, 210, 90, .7); --spark: #fff4c8; --pitch: #fffaf0; --pitch-shadow: rgba(29, 23, 64, .75);
    --thumb-bg: #2a2160; --shadow: rgba(0, 0, 0, .55);
    --grain: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17122f; --surface: #221a45; --fg: #f3e6cf; --muted: #c2adb0; --line: #382c62;
  --accent: #ffd25a; --accent-text: #ffd25a; --on-accent: #2b1e33; --soft: #7a4f9c;
  --sky: radial-gradient(70% 45% at 50% 104%, rgba(255, 200, 150, .85) 0%, rgba(255, 191, 142, 0) 70%), linear-gradient(180deg, #1d1740 0%, #2a2160 26%, #4a3480 50%, #7a4f9c 68%, #c97a9a 86%, #ffbf8e 100%);
  --mote: #ffd98a; --mote-glow: rgba(255, 210, 90, .7); --spark: #fff4c8; --pitch: #fffaf0; --pitch-shadow: rgba(29, 23, 64, .75);
  --thumb-bg: #2a2160; --shadow: rgba(0, 0, 0, .55);
  --grain: none; color-scheme: dark;
}
body { background-image: var(--grain); }

/* Header: clear over the sky, paper once scrolled. */
.top { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.top.scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); }
.top:not(.scrolled) .lang, .top:not(.scrolled) .theme { border-color: color-mix(in srgb, var(--fg) 28%, transparent); }
.top:not(.scrolled) .nav a { color: var(--fg); opacity: .82; }
.top:not(.scrolled) .nav a:hover { opacity: 1; }
.by { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-pixel); font-size: 12px; line-height: 1; letter-spacing: .04em; }
.by img { width: 32px; height: 32px; }

/* Hero */
.hero { position: relative; margin-top: -68px; min-height: min(94vh, 900px); display: grid; align-items: center; overflow: hidden; isolation: isolate; background: var(--sky); }
.hero.has-art { background: var(--keyart) center / cover no-repeat, var(--sky); }
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-in { display: grid; justify-items: center; text-align: center; gap: clamp(20px, 3vw, 32px); padding-block: calc(68px + clamp(40px, 7vw, 96px)) clamp(56px, 8vw, 110px); }
.logo { --n: 1; width: calc(var(--n) * 204px); height: auto; image-rendering: pixelated; filter: drop-shadow(0 12px 28px rgba(29, 23, 64, .35)); animation: gw-bob 6s steps(6, jump-none) infinite alternate; }
.logo-zh { width: calc(var(--n) * 163px); }
@keyframes gw-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.pitch { max-width: 34em; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--pitch); text-shadow: 0 1px 14px var(--pitch-shadow); }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.ctas .btn { font-family: var(--font-pixel); font-size: 24px; font-weight: 400; height: 56px; padding: 0 26px; border-radius: 12px; letter-spacing: 0; }
.lang-zh .ctas .btn { font-size: 24px; }
.btn-steam { box-shadow: 0 -4px 0 rgba(43, 30, 51, .22) inset, 0 10px 24px -12px rgba(43, 30, 51, .6); }
.btn.ghost.btn-taptap { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--fg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg) 30%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn.is-todo { cursor: default; flex-direction: column; justify-content: center; gap: 2px; height: auto; min-height: 56px; padding-block: 8px; }
.btn.is-todo:hover { transform: none; }
.btn.is-todo .todo { font-family: var(--font-text); font-size: 12px; padding: 0 .5em; }
.keyart-note { position: absolute; right: clamp(16px, 3vw, 32px); bottom: 16px; font-size: 13px; max-width: 60%; text-align: right; }
.keyart-note .todo { background-color: color-mix(in srgb, var(--surface) 75%, transparent); }

.motes i { position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; background: var(--mote); box-shadow: 0 0 10px 2px var(--mote-glow); opacity: 0; animation: gw-mote 11s ease-in-out var(--d) infinite; }
@keyframes gw-mote { 0% { opacity: 0; transform: translate(0, 18px); } 30% { opacity: .9; } 65% { opacity: .6; transform: translate(10px, -16px); } 100% { opacity: 0; transform: translate(-6px, -40px); } }
.sparkles .sp { position: absolute; width: 10px; height: 10px; opacity: 0; animation: gw-twinkle 5.2s steps(1, end) var(--d) infinite; }
.sparkles .sp.s2 { width: 14px; height: 14px; }
.sparkles .sp::before, .sparkles .sp::after { content: ""; position: absolute; background: var(--spark); }
.sparkles .sp::before { left: calc(50% - 1px); top: 0; width: 2px; height: 100%; }
.sparkles .sp::after { top: calc(50% - 1px); left: 0; height: 2px; width: 100%; }
@keyframes gw-twinkle { 0% { opacity: 0; } 8% { opacity: .6; } 14% { opacity: 1; } 22% { opacity: .5; } 28%, 100% { opacity: 0; } }

/* Sections */
.sec { padding-block: clamp(56px, 7vw, 100px); }
.px-h { display: flex; align-items: center; gap: 14px; font-family: var(--font-pixel); font-weight: 400; font-size: 24px; line-height: 1.5; letter-spacing: .02em; }
.px-h::before { content: ""; width: 12px; height: 12px; flex: none; background: linear-gradient(var(--accent-text), var(--accent-text)) 5px 0 / 2px 12px no-repeat, linear-gradient(var(--accent-text), var(--accent-text)) 0 5px / 12px 2px no-repeat; }
.frame { margin-top: clamp(22px, 3vw, 32px); border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #120e26; box-shadow: 0 40px 70px -48px var(--shadow); }
.trailer-v { width: 100%; height: 100%; object-fit: cover; }
.slot { width: 100%; height: 100%; }
.slot-video { border-radius: 16px; gap: 6px; font-size: 15px; }
.slot-video .i { width: 44px; height: 44px; }
.slot-tag { position: absolute; left: 12px; top: 12px; font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--muted) 50%, transparent); background: var(--surface); }
.frame:has(.slot) { background: var(--surface); }

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.about .lead { margin-top: 22px; }
.features { display: grid; gap: 14px; }
.features li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.f-num { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-family: var(--font-pixel); font-size: 24px; line-height: 1; box-shadow: 0 -3px 0 rgba(43, 30, 51, .2) inset; }
.features h3 { font-size: 18px; font-weight: 500; line-height: 1.4; }
.features p { color: var(--muted); font-size: 16px; }

.shot-grid { margin-top: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.shot, .slot-shot { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.slot-shot { display: grid; padding: 12px; font-size: 13px; }
.slot-shot .slot-tag { left: 8px; top: 8px; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
.shot:hover img { transform: scale(1.03); }

.press-title { margin-top: 18px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.lang-zh .press-title { letter-spacing: .02em; }
.press-intro { margin-top: 12px; color: var(--muted); max-width: 40em; }
.press-grid { margin-top: clamp(26px, 3.4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.paper { padding: clamp(22px, 2.6vw, 32px); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 30px 60px -48px var(--shadow); }
.paper-h { font-family: var(--font-pixel); font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.facts { margin: 0; display: grid; }
.facts div { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 12px; padding-block: 11px; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--muted); font-size: 15px; }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.dls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.dl { display: grid; gap: 10px; align-content: start; min-width: 0; }
.dl-thumb { width: 100%; height: 100px; object-fit: none; background: var(--thumb-bg); border-radius: 10px; image-rendering: pixelated; }
.dl-icon { display: grid; place-items: center; width: 100%; height: 100px; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--muted) 50%, transparent); color: var(--muted); }
.dl-icon .i { width: 26px; height: 26px; }
.dl h4 { margin: 0; font-size: 16px; font-weight: 500; }
.dl h4 a { text-decoration: none; }
.dl h4 a:hover { text-decoration: underline; }
.dl-links { margin-top: 2px; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dl-links a { color: var(--accent-text); }
.dl-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.press-contact { margin-top: 24px; color: var(--muted); }
.press-contact a { color: var(--fg); font-weight: 500; }

.foot-studio img { width: 174px; height: 38px; image-rendering: pixelated; }
.foot-studio .on-dark { display: none; }
:root[data-theme="dark"] .foot-studio .on-dark { display: block; }
:root[data-theme="dark"] .foot-studio .on-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foot-studio .on-dark { display: block; }
  :root:not([data-theme="light"]) .foot-studio .on-light { display: none; }
}

/* Screenshot viewer */
.viewer { width: min(96vw, 1600px); max-width: none; max-height: 96vh; padding: 0; border: 0; border-radius: 14px; background: #000; color: #fff; overflow: visible; }
.viewer::backdrop { background: rgba(18, 14, 38, .88); }
.viewer img { width: 100%; height: auto; max-height: 92vh; object-fit: contain; image-rendering: auto; border-radius: 14px; }
.viewer button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 250, 240, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.viewer button:hover { background: rgba(255, 250, 240, .26); }
.v-close { right: 10px; top: 10px; font-size: 20px; }
.v-prev { left: 10px; top: calc(50% - 24px); }
.v-next { right: 10px; top: calc(50% - 24px); }

/* Logo scales: whole numbers only. */
@media (min-width: 360px) { .logo-zh { --n: 2; } }
@media (min-width: 440px) { .logo-en { --n: 2; } }
@media (min-width: 560px) { .logo-zh { --n: 3; } }
@media (min-width: 700px) { .logo-en { --n: 3; } }
@media (min-width: 960px) { .logo-en { --n: 4; } .logo-zh { --n: 4; } }
@media (min-width: 1280px) { .logo-en { --n: 5; } }
/* Phones: one logo pixel to a whole number of device pixels (3 at 2x density, 4 at 3x), so it can be larger than 1x and stay crisp. */
@media (max-width: 439px) and (resolution: 2dppx) { .logo-en { --n: 1.5; } }
@media (max-width: 439px) and (resolution: 3dppx) { .logo-en { --n: 1.3334; } }
@media (min-width: 760px) { .px-h { font-size: 36px; gap: 18px; } }
@media (max-width: 900px) {
  .about-grid, .press-grid { grid-template-columns: minmax(0, 1fr); }
  .shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .hero { min-height: 0; }
  .hero-in { padding-bottom: 28px; }
  .keyart-note { position: static; grid-row: 2; margin: 0 auto 20px; max-width: calc(100% - 32px); text-align: center; }
}
@media (max-width: 359px) { .shot-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .dls { grid-template-columns: minmax(0, 1fr); }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .by span { display: none; }
}

/* Holding page: one screen. */
.is-holding .controls { margin-left: auto; }
.is-holding .hero { min-height: 100vh; min-height: 100svh; }
.is-holding .hero-in { gap: clamp(22px, 3.4vw, 36px); padding-block: 96px 88px; }
.hold-line { font-family: var(--font-pixel); font-size: 24px; line-height: 1.5; letter-spacing: .04em; color: var(--pitch); text-shadow: 0 1px 14px var(--pitch-shadow); }
.hold-foot { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-size: 13px; color: #2b1e33; opacity: .62; }

/* 404 */
.nf { position: relative; min-height: 100vh; display: grid; place-items: center; isolation: isolate; background: var(--sky); }
.nf-in { display: grid; justify-items: center; gap: 22px; text-align: center; padding-block: 48px; }
.nf .logo { --n: 2; margin-bottom: 18px; }
.nf-line { display: grid; gap: 4px; font-size: 18px; color: var(--pitch); text-shadow: 0 1px 14px var(--pitch-shadow); }
.nf-line a { color: inherit; font-weight: 500; }

@font-face{font-family:"Jost Web";src:url(/assets/text.4-byGpvfUu.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Jost Web Zh";src:url(/assets/text.4-byGpvfUu.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+20-7e,U+a0-b6,U+b8-ff,U+100-17f,U+2010-2013,U+2015-2017,U+2020-2025,U+2027,U+2030-203a,U+2044,U+20ac,U+2122,U+2190-2193,U+2212}
@font-face{font-family:"Noto Sans SC Web";src:url(/assets/zh.yfDaa_YU5h.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Fusion Pixel Web";src:url(/assets/pixel.glHg1bzCMb.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}