/*! Hallmark · genre: editorial · macrostructure: Workbench · theme: custom sea-salt warden lodge * enrichment: E8 verified official game still · nav: N10 · footer: Ft4 * audience: Chinese visual-novel players · use: understand, verify, download · tone: precise, cinematic, restrained * Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5 * states: default · hover · focus · active · disabled · loading · error · success * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) * responsive: pass (49) · mobile: pass (34, 49, 50–57) · icons: pass (30) */ :root{ --color-paper: #fdfcf6; --color-paper-2: #f5f0e7; --color-paper-3: #ebe2d4; --color-ink: #121212; --color-ink-2: #28231f; --color-muted: #655f59; --color-rule: #cfc3b4; --color-rule-soft: #e5ddd2; --color-coral: #e65a88; --color-coral-bright: #fb7185; --color-coral-deep: #9d2850; --color-orange: #ed7b32; --color-gold: #d4af37; --color-gold-deep: #8a6b18; --color-sea: #38bdf8; --color-sea-deep: #075e82; --color-palm: #2f855a; --color-indigo: #26385b; --color-night: #121212; --color-night-2: #1d1a19; --color-night-ink: #fdf8ec; --color-focus: #087db0; --color-error: #a61e32; --color-success: #226c45; --color-shadow: rgba(18, 18, 18, .16); --color-scrim: rgba(18, 18, 18, .52); --color-scrim-soft: rgba(18, 18, 18, .12); --color-backdrop: rgba(0, 0, 0, .82); --font-display: "Noto Serif SC", "Songti SC", serif; --font-body: "Noto Sans SC", "PingFang SC", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: clamp(2rem, 5vw, 3.4rem); --text-display: clamp(2.55rem, 7vw, 5.25rem); --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 6.5rem; --page-gutter: clamp(1rem, 4vw, 3rem); --content-max: 78rem; --nav-h: 4.5rem; --radius-sm: .25rem; --radius-md: .75rem; --radius-pill: 999px; --rule: 1px; --rule-strong: 2px; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-standard: cubic-bezier(.2, .7, .2, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-medium: 420ms; --z-nav: 500; --z-sticky: 300; --z-dialog: 900;} *, *::before, *::after{ box-sizing: border-box;} html, body{ overflow-x: clip;} html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-md));} body{ margin: 0; padding-block-end: 4.8rem; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); line-height: 1.72; text-rendering: optimizeLegibility;} body::before{ content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .025; background-image: repeating-linear-gradient(90deg, transparent 0 5px, var(--color-ink) 6px);} img, video{ display: block; max-width: 100%;} a{ color: inherit; text-decoration: none;} button, summary{ font: inherit;} button, a, summary{ -webkit-tap-highlight-color: transparent;} h1, h2, h3{ margin: 0; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-style: normal; line-height: 1.12;} h1{ font-size: var(--text-display); letter-spacing: -.045em;} h2{ font-size: var(--text-2xl); letter-spacing: -.035em;} h3{ font-size: var(--text-lg);} p, figure, dl, dd, ul, ol, blockquote{ margin: 0;} ul, ol{ padding-inline-start: var(--space-lg);} :focus{ outline: none;} :focus-visible{ outline: 3px solid var(--color-focus); outline-offset: 3px;} ::selection{ background: var(--color-coral-bright); color: var(--color-ink);} [hidden]{ display: none !important;} .sr-only{ position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;} .skip-link{ position: fixed; inset: var(--space-xs) auto auto var(--space-xs); z-index: 1000; transform: translateY(-160%); padding: var(--space-xs) var(--space-md); background: var(--color-night); color: var(--color-night-ink);} .skip-link:focus{ transform: none;} .shell{ width: min(100%, var(--content-max)); margin-inline: auto; padding-inline: var(--page-gutter);} .section{ padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl));} .section--paper{ background: var(--color-paper-2); color: var(--color-ink);} .section--night{ background: var(--color-night); color: var(--color-night-ink);} .section-head{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); margin-block-end: var(--space-xl);} .section-head > span{ width: max-content; border-block-end: var(--rule-strong) solid var(--color-coral); color: var(--color-coral-deep); font-size: var(--text-xs); font-weight: 900; letter-spacing: .12em;} .section-head p{ max-width: 62ch; color: var(--color-muted); font-size: var(--text-md);} .section--night .section-head p{ color: var(--color-paper-3);} .section--night .section-head > span{ color: var(--color-gold); border-color: var(--color-gold);} /* N10: one DOM, constant-height scroll morph */ .site-nav{ position: fixed; inset: 0 0 auto; z-index: var(--z-nav); height: var(--nav-h); pointer-events: none;} .nav-inner{ width: 100%; height: var(--nav-h); margin-inline: auto; padding-inline: var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); background: color-mix(in srgb, var(--color-paper) 96%, transparent); border-block-end: var(--rule) solid var(--color-rule); pointer-events: auto; transition: width var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out), border-radius var(--dur-medium) var(--ease-out), box-shadow var(--dur-medium) var(--ease-out);} .site-nav.is-floating .nav-inner{ width: min(calc(100% - 2rem), 66rem); transform: translateY(.65rem); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-pill); box-shadow: 0 .5rem 2rem var(--color-shadow);} .brand{ min-width: 0; display: flex; align-items: center; gap: var(--space-xs); white-space: nowrap;} .brand-mark{ width: 2rem; height: 2rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: var(--rule) solid var(--color-gold-deep);} .brand-text{ display: grid; line-height: 1.05;} .brand-text strong{ font-family: var(--font-display); font-size: var(--text-md);} .brand-text small{ color: var(--color-muted); font-size: .62rem; letter-spacing: .08em;} .nav-links{ display: none; align-items: center; gap: var(--space-lg);} .nav-links a{ min-height: 2.75rem; display: inline-flex; align-items: center; position: relative; white-space: nowrap; font-size: var(--text-sm); font-weight: 800;} .nav-links a::after{ content: ""; position: absolute; inset: auto 0 .35rem; height: var(--rule-strong); background: var(--color-coral); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-short) var(--ease-out);} .menu-button{ min-width: 2.75rem; min-height: 2.75rem; padding-inline: var(--space-sm); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); cursor: pointer; white-space: nowrap; font-weight: 800;} .menu-sheet{ position: fixed; inset: calc(var(--nav-h) + var(--space-sm)) var(--page-gutter) auto; z-index: calc(var(--z-nav) - 1); display: grid; padding: var(--space-sm); background: var(--color-paper); border: var(--rule) solid var(--color-rule); box-shadow: 0 var(--space-sm) var(--space-xl) var(--color-shadow); opacity: 0; transform: translateY(-.4rem); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);} .menu-sheet.is-open{ opacity: 1; transform: none; pointer-events: auto;} .menu-sheet a{ min-height: 2.75rem; display: flex; align-items: center; padding-inline: var(--space-sm); border-block-end: var(--rule) solid var(--color-rule-soft); white-space: nowrap; font-weight: 800;} .button{ position: relative; isolation: isolate; min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); padding: .7rem var(--space-lg); overflow: hidden; border: var(--rule-strong) solid var(--color-coral-deep); background: var(--color-coral); color: var(--color-ink); font-weight: 900; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);} .button--large{ min-height: 3.6rem; padding-inline: var(--space-xl); font-size: var(--text-md);} .button--dark{ background: var(--color-gold); color: var(--color-ink); border-color: var(--color-gold-deep);} .button--outline{ background: transparent; color: inherit; border-color: currentColor;} .button--shine::before{ content: ""; position: absolute; inset: -100% auto -100% -35%; width: 22%; background: color-mix(in srgb, var(--color-paper) 76%, transparent); transform: translateX(-180%) skewX(-18deg); transition: transform 650ms var(--ease-out);} .button:active{ transform: translateY(1px);} .button[aria-disabled="true"], .button:disabled{ opacity: .5; cursor: not-allowed; pointer-events: none;} .button[data-state="loading"]{ cursor: progress;} .button[data-state="loading"]::after{ content: ""; width: 1rem; aspect-ratio: 1; border: var(--rule-strong) solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .8s linear infinite;} .button[data-state="error"]{ background: var(--color-error); color: var(--color-paper); border-color: var(--color-error);} .button[data-state="success"]{ background: var(--color-success); color: var(--color-paper); border-color: var(--color-success);} @keyframes spin{ to{ transform: rotate(360deg);}} /* H2: cinematic diptych with visual-novel dialogue */ .hero{ min-height: 100svh; padding-block-start: var(--nav-h); display: grid; grid-template-columns: minmax(0, 1fr); background: var(--color-night); color: var(--color-night-ink);} .hero-visual{ position: relative; min-height: 42svh; overflow: clip;} .hero-visual > img{ width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.02); animation: hero-breathe 18s var(--ease-standard) alternate infinite;} .hero-visual::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-scrim-soft), var(--color-scrim));} .dialogue{ position: absolute; inset: auto var(--space-sm) var(--space-sm); z-index: 2; padding: var(--space-md); background: color-mix(in srgb, var(--color-night) 88%, transparent); border: var(--rule) solid var(--color-gold);} .dialogue strong{ display: block; margin-block-end: var(--space-2xs); color: var(--color-gold); font-family: var(--font-display);} .dialogue p{ font-family: var(--font-display); font-size: var(--text-md);} .dialogue-choices{ display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-sm);} .dialogue-choices a{ min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: var(--space-sm); border: var(--rule) solid var(--color-night-ink); white-space: nowrap; font-size: var(--text-xs); font-weight: 800;} .hero-copy{ min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); padding-block-start: var(--space-xl); padding-block-end: calc(var(--space-xl) * 1.35); padding-inline: var(--page-gutter); border-inline-start: var(--rule) solid var(--color-gold-deep);} .hero-tags{ display: flex; flex-wrap: wrap; gap: var(--space-2xs);} .hero-tags span{ padding: var(--space-3xs) var(--space-xs); border: var(--rule) solid color-mix(in srgb, var(--color-night-ink) 35%, transparent); font-size: var(--text-xs); white-space: nowrap;} .hero h1 small{ display: block; margin-block-start: var(--space-2xs); color: var(--color-gold); font-size: .38em; letter-spacing: 0;} .hero-lede{ max-width: 48ch; color: var(--color-paper-3); font-size: var(--text-md);} .hero-facts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: var(--rule) solid color-mix(in srgb, var(--color-night-ink) 25%, transparent);} .hero-facts div{ min-width: 0; padding: var(--space-xs) 0;} .hero-facts dt{ color: var(--color-paper-3); font-size: var(--text-xs);} .hero-facts dd{ overflow-wrap: anywhere; font-weight: 800;} .hero-price{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);} .hero-price strong{ color: var(--color-gold); font-size: var(--text-xl);} .hero-price small{ color: var(--color-paper-3);} .hero-actions{ display: flex; flex-wrap: wrap; gap: var(--space-xs);} @keyframes hero-breathe{ to{ transform: scale(1.05);}} .info-strip{ position: relative; z-index: 3; margin-block-start: calc(-1 * var(--space-md));} .info-strip dl{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-paper); border-block: var(--rule-strong) solid var(--color-indigo); box-shadow: 0 .7rem 2rem var(--color-shadow);} .info-strip div{ min-width: 0; padding: var(--space-sm); border-inline-end: var(--rule) solid var(--color-rule-soft); border-block-end: var(--rule) solid var(--color-rule-soft);} .info-strip dt{ color: var(--color-muted); font-size: var(--text-xs);} .info-strip dd{ overflow-wrap: anywhere; font-weight: 800;} /* Workbench screenshot-led guided tour */ .workbench{ display: grid; gap: var(--space-2xl);} .bench-step{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); border-block-start: var(--rule-strong) solid var(--color-ink);} .bench-caption{ min-width: 0; display: grid; align-content: start; gap: var(--space-sm);} .bench-caption > span{ width: max-content; padding: var(--space-3xs) var(--space-2xs); background: var(--color-indigo); color: var(--color-night-ink); font-family: var(--font-mono); font-size: var(--text-xs);} .bench-caption p{ max-width: 44ch; color: var(--color-muted);} .screenshot-frame{ position: relative; min-width: 0; padding: var(--space-xs); background: var(--color-night); border: var(--rule-strong) solid var(--color-gold-deep); box-shadow: .7rem .7rem 0 var(--color-paper-3); cursor: zoom-in;} .screenshot-frame img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover;} .annotation{ position: absolute; max-width: 13rem; padding: var(--space-2xs) var(--space-xs); background: var(--color-coral); color: var(--color-ink); border: var(--rule) solid var(--color-coral-deep); font-size: var(--text-xs); font-weight: 800; box-shadow: .25rem .25rem 0 var(--color-night);} .annotation--one{ inset: 8% auto auto 4%;} .annotation--two{ inset: auto 5% 8% auto;} .story-copy{ display: grid; gap: var(--space-lg); max-width: 70ch; font-family: var(--font-display); font-size: var(--text-md); line-height: 1.95;} .story-copy p:first-child::first-letter{ float: inline-start; margin-inline-end: var(--space-2xs); color: var(--color-coral-deep); font-size: 4rem; line-height: .9; font-weight: 900;} .feature-ledger{ display: grid; border-block-end: var(--rule) solid var(--color-rule);} .feature-card{ min-width: 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-xs) var(--space-md); padding-block: var(--space-lg); border-block-start: var(--rule) solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);} .feature-icon{ width: 3rem; aspect-ratio: 1; display: grid; place-items: center; background: var(--color-indigo); color: var(--color-night-ink); font-family: var(--font-mono); font-weight: 900;} .feature-card p{ grid-column: 2; color: var(--color-muted);} .gallery-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm);} .gallery-item{ position: relative; min-width: 0; padding: 0; border: var(--rule) solid var(--color-rule); background: var(--color-night); color: var(--color-night-ink); cursor: zoom-in; overflow: clip; text-align: start;} .gallery-item img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-medium) var(--ease-out), filter var(--dur-short) var(--ease-out);} .gallery-item span{ position: absolute; inset: auto 0 0; padding: var(--space-xs); background: linear-gradient(transparent, var(--color-night)); font-size: var(--text-xs);} .filter-tabs{ display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-end: var(--space-lg);} .filter-tabs button{ min-height: 2.75rem; padding-inline: var(--space-md); border: var(--rule) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); cursor: pointer; white-space: nowrap; font-weight: 800;} .filter-tabs button[aria-selected="true"]{ background: var(--color-indigo); color: var(--color-night-ink); border-color: var(--color-indigo);} .review-summary{ display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); background: var(--color-indigo); color: var(--color-night-ink);} .review-score strong{ display: block; color: var(--color-gold); font-family: var(--font-display); font-size: var(--text-2xl);} .review-score small{ color: var(--color-paper-3);} .review-bars{ display: grid; align-content: center; gap: var(--space-xs);} .bar{ height: .6rem; background: color-mix(in srgb, var(--color-night-ink) 20%, transparent);} .bar span{ display: block; width: var(--bar); height: 100%; background: var(--color-coral-bright);} .player-fit{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-block-start: var(--space-lg);} .fit-card{ padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); border-block-start: var(--rule-strong) solid var(--color-gold-deep);} .fit-card p{ margin-block-start: var(--space-xs); color: var(--color-muted);} .timeline{ list-style: none; padding: 0; border-inline-start: var(--rule-strong) solid var(--color-gold-deep);} .timeline li{ position: relative; padding: 0 0 var(--space-xl) var(--space-lg);} .timeline li::before{ content: ""; position: absolute; inset: .55rem auto auto -.45rem; width: .75rem; aspect-ratio: 1; background: var(--color-coral); border: var(--rule-strong) solid var(--color-paper); border-radius: 50%;} .timeline time{ color: var(--color-coral-deep); font-family: var(--font-mono); font-size: var(--text-xs);} .timeline p{ margin-block-start: var(--space-2xs); color: var(--color-muted);} .faq-list{ border-block-end: var(--rule) solid var(--color-rule);} .faq-list details{ border-block-start: var(--rule) solid var(--color-rule);} .faq-list summary{ min-height: 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); cursor: pointer; list-style: none; font-weight: 900;} .faq-list summary::-webkit-details-marker{ display: none;} .faq-list summary::after{ content: "+"; width: 2rem; aspect-ratio: 1; display: grid; place-items: center; border: var(--rule) solid var(--color-rule);} .faq-list details[open] summary::after{ content: "−"; background: var(--color-indigo); color: var(--color-night-ink);} .faq-answer{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-short) var(--ease-out);} .faq-answer > div{ overflow: hidden;} .faq-answer p{ max-width: 70ch; padding-block: 0 var(--space-lg); color: var(--color-muted);} .faq-list details[open] .faq-answer{ grid-template-rows: 1fr;} .download-panel{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md);} .platform-card{ min-width: 0; display: grid; gap: var(--space-md); padding: var(--space-lg); border: var(--rule) solid var(--color-rule); background: var(--color-paper);} .platform-card--recommended{ border-block-start: .35rem solid var(--color-coral);} .platform-card .badge{ width: max-content; padding: var(--space-3xs) var(--space-xs); background: var(--color-coral); color: var(--color-ink); font-size: var(--text-xs); font-weight: 900;} .platform-card ul{ color: var(--color-muted);} .spec-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md);} .spec-card{ min-width: 0; padding: var(--space-lg); background: var(--color-paper); border-block-start: var(--rule-strong) solid var(--color-indigo);} .spec-card dl{ margin-block-start: var(--space-sm);} .spec-card div{ display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-xs); border-block-start: var(--rule) solid var(--color-rule-soft);} .spec-card dt{ color: var(--color-muted);} .spec-card dd{ overflow-wrap: anywhere; font-weight: 800;} .guide-layout{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl);} .toc{ padding: var(--space-md); background: var(--color-indigo); color: var(--color-night-ink);} .toc h2{ font-size: var(--text-lg);} .toc ol{ margin-block-start: var(--space-sm);} .toc a{ min-height: 2.75rem; display: inline-flex; align-items: center; border-block-end: var(--rule) solid transparent;} .guide-cards{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm);} .guide-card{ min-width: 0; display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule) solid var(--color-rule); background: var(--color-paper);} .guide-card > span{ color: var(--color-coral-deep); font-family: var(--font-mono); font-size: var(--text-xs);} .guide-card p{ color: var(--color-muted);} .guide-card a{ width: max-content; min-height: 2.75rem; display: inline-flex; align-items: center; border-block-end: var(--rule-strong) solid var(--color-coral); white-space: nowrap; font-weight: 900;} .article-prose{ min-width: 0; display: grid; gap: var(--space-lg);} .article-prose section{ scroll-margin-top: calc(var(--nav-h) + var(--space-md));} .article-prose section + section{ padding-block-start: var(--space-xl); border-block-start: var(--rule-strong) solid var(--color-ink);} .article-prose p, .article-prose li{ max-width: 72ch;} .article-prose h2 + p{ margin-block-start: var(--space-sm);} .article-prose table{ width: 100%; border-collapse: collapse;} .article-prose th, .article-prose td{ padding: var(--space-xs); border-block-start: var(--rule) solid var(--color-rule); text-align: start; vertical-align: top;} .final-cta{ position: relative; overflow: clip; text-align: center; background: var(--color-indigo); color: var(--color-night-ink);} .final-cta::before{ content: ""; position: absolute; inset: 0; opacity: .12; background: radial-gradient(circle at 20% 20%, var(--color-sea), transparent 36%), radial-gradient(circle at 80% 90%, var(--color-coral), transparent 32%);} .final-cta .shell{ position: relative; display: grid; justify-items: center; gap: var(--space-md);} .final-cta p{ max-width: 54ch; color: var(--color-paper-3);} .fine-print{ font-size: var(--text-xs);} /* Ft4 dense editorial colophon */ .site-footer{ padding-block: var(--space-2xl) 7rem; background: var(--color-night); color: var(--color-night-ink); border-block-start: var(--rule-strong) solid var(--color-gold);} .footer-wordmark{ font-family: var(--font-display); font-size: var(--text-xl);} .footer-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-block-start: var(--space-lg);} .footer-links{ display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);} .footer-links a{ min-height: 2.75rem; display: inline-flex; align-items: center; border-block-end: var(--rule) solid color-mix(in srgb, var(--color-night-ink) 30%, transparent); white-space: nowrap;} .related-links{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs);} .related-links a{ min-height: 2.75rem; display: flex; align-items: center; border-block-end: var(--rule) solid color-mix(in srgb, var(--color-night-ink) 18%, transparent);} .colophon{ margin-block-start: var(--space-xl); padding-block-start: var(--space-md); border-block-start: var(--rule) solid color-mix(in srgb, var(--color-night-ink) 24%, transparent); color: var(--color-paper-3); font-family: var(--font-mono); font-size: var(--text-xs);} .sticky-cta{ position: fixed; inset: auto 0 0; z-index: var(--z-sticky); min-height: 4.6rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) max(var(--page-gutter), env(safe-area-inset-right)) max(var(--space-xs), env(safe-area-inset-bottom)) max(var(--page-gutter), env(safe-area-inset-left)); background: color-mix(in srgb, var(--color-night) 96%, transparent); color: var(--color-night-ink); border-block-start: var(--rule) solid var(--color-gold);} .sticky-cta p{ display: none; white-space: nowrap;} .sticky-cta .button{ margin-inline-start: auto;} .back-top{ position: fixed; inset: auto var(--space-sm) 5.5rem auto; z-index: var(--z-sticky); min-width: 2.75rem; min-height: 2.75rem; border: var(--rule) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out);} .back-top.is-visible{ opacity: 1; pointer-events: auto;} .lightbox{ position: fixed; inset: 0; width: min(94%, 90rem); height: fit-content; max-height: 90svh; margin: auto; padding: var(--space-sm); border: var(--rule) solid var(--color-gold); background: var(--color-night); color: var(--color-night-ink);} .lightbox::backdrop{ background: var(--color-backdrop);} .lightbox figure{ display: grid; place-items: center;} .lightbox img{ max-height: 76svh; width: auto; object-fit: contain;} .lightbox-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-block-end: var(--space-xs);} .lightbox-toolbar button, .lightbox-arrow{ min-width: 2.75rem; min-height: 2.75rem; border: var(--rule) solid var(--color-night-ink); background: var(--color-night); color: var(--color-night-ink); cursor: pointer; white-space: nowrap;} .lightbox-arrow{ position: fixed; inset-block-start: 50%; transform: translateY(-50%);} .lightbox-prev{ inset-inline-start: var(--space-sm);} .lightbox-next{ inset-inline-end: var(--space-sm);} @media (hover: hover) and (pointer: fine){ .nav-links a:hover::after{ transform: scaleX(1); transform-origin: left;} .button:hover{ transform: translateY(-1px); background: var(--color-coral-bright);} .button--dark:hover{ background: var(--color-gold);} .button--shine:hover::before{ transform: translateX(650%) skewX(-18deg);} .feature-card:hover{ transform: translateY(-2px); box-shadow: 0 .55rem 1.5rem var(--color-shadow);} .gallery-item:hover img, .screenshot-frame:hover img{ transform: scale(1.025); filter: saturate(1.05);} .filter-tabs button:hover{ border-color: var(--color-indigo);}} @media (min-width: 40rem){ .info-strip dl{ grid-template-columns: repeat(4, minmax(0, 1fr));} .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr));} .player-fit, .download-panel, .spec-grid, .guide-cards{ grid-template-columns: repeat(2, minmax(0, 1fr));} .sticky-cta p{ display: block;} .related-links{ grid-template-columns: repeat(2, minmax(0, 1fr));}} @media (min-width: 60rem){ .hero{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);} .hero-visual{ min-height: calc(100svh - var(--nav-h));} .nav-links{ display: flex;} .menu-button{ display: none;} .bench-step{ grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center;} .bench-step:nth-child(even) .bench-caption{ order: 2;} .bench-step:nth-child(even) .screenshot-frame{ order: 1;} .feature-ledger{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl);} .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr));} .player-fit{ grid-template-columns: repeat(3, minmax(0, 1fr));} .download-panel{ grid-template-columns: repeat(2, minmax(0, 1fr));} .guide-layout{ grid-template-columns: minmax(14rem, .28fr) minmax(0, 1fr);} .toc{ position: sticky; top: calc(var(--nav-h) + var(--space-lg)); align-self: start;} .footer-grid{ grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);} .related-links{ grid-template-columns: repeat(3, minmax(0, 1fr));}} @media (min-width: 80rem){ .gallery-grid{ grid-template-columns: repeat(4, minmax(0, 1fr));}} @media (pointer: coarse){ .button, .nav-links a, .footer-links a, .filter-tabs button{ min-height: 3rem;}} @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto;} *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;} .hero-visual > img{ transform: none;}}