/* Hallmark · genre: editorial · macrostructure: Long Document · theme: Night Archive · enrichment: Tier A · nav: N6 masthead · footer: Ft1 mast-headed */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4 */
:root {
  --color-ink: #e9eadf;
  --color-paper: #11171a;
  --color-paper-deep: #0b1012;
  --color-paper-raised: #192326;
  --color-paper-soft: #222e31;
  --color-line: #3a4a4b;
  --color-muted: #9aa7a2;
  --color-accent: #c6ee63;
  --color-accent-dark: #1b2a12;
  --color-accent-warm: #e78468;
  --color-focus: #d6f58c;
  --color-danger: #efb0a0;
  --font-display: "Noto Serif SC", Georgia, serif;
  --font-body: "Noto Sans SC", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --space-1: .375rem;
  --space-2: .75rem;
  --space-3: 1.125rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;
  --space-7: 5.5rem;
  --space-8: 8rem;
  --measure: 72rem;
  --radius-sm: .25rem;
  --radius-md: .7rem;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--color-ink); background: var(--color-paper); font: 400 1rem/1.75 var(--font-body); overflow-x: clip; }
body::selection { background: var(--color-accent); color: var(--color-paper-deep); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(2.7rem, 8vw, 7.8rem); max-width: 10ch; }
h2 { font-size: clamp(2rem, 4.3vw, 4.3rem); max-width: 14ch; }
h3 { font-size: clamp(1.35rem, 2.1vw, 2rem); }
p { max-width: 68ch; }
small, .eyebrow, .label, .meta, .source-note, .nav-kicker { font-family: var(--font-mono); }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .6rem .9rem; color: var(--color-paper-deep); background: var(--color-accent); }
.skip-link:focus { top: 1rem; }
.container { width: min(calc(100% - 2rem), var(--measure)); margin-inline: auto; }
.narrow { width: min(calc(100% - 2rem), 50rem); margin-inline: auto; }
.site-nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: .7rem 1rem; background: color-mix(in srgb, var(--color-paper-deep) 92%, transparent); border-bottom: 1px solid var(--color-line); backdrop-filter: blur(12px); }
.site-nav__inner { width: min(100%, var(--measure)); margin-inline: auto; display: flex; align-items: center; gap: 1.25rem; }
.brand { display: inline-flex; align-items: baseline; gap: .6rem; text-decoration: none; white-space: nowrap; }
.brand__mark { color: var(--color-accent); font: 700 1rem/1 var(--font-mono); letter-spacing: .04em; }
.brand__name { font: 700 1.2rem/1 var(--font-display); }
.nav-kicker { margin-left: auto; color: var(--color-muted); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; }
.site-nav__links { display: flex; align-items: center; gap: 1.1rem; list-style: none; margin: 0 0 0 1rem; padding: 0; }
.site-nav__links a { color: var(--color-muted); font-size: .86rem; text-decoration: none; }
.site-nav__links a:hover { color: var(--color-ink); }
.nav-toggle { display: none; margin-left: auto; color: var(--color-ink); border: 1px solid var(--color-line); background: transparent; padding: .48rem .65rem; }
.nav-toggle__line { display: block; width: 1rem; height: 1px; background: currentColor; box-shadow: 0 .3rem currentColor, 0 -.3rem currentColor; }
.site-nav__panel { display: none; }
.page-main { padding-top: 5.4rem; }
.hero { position: relative; min-height: min(52rem, calc(100svh - 1rem)); display: grid; align-items: end; isolation: isolate; overflow: clip; border-bottom: 1px solid var(--color-line); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,11,12,.97) 0%, rgba(7,11,12,.78) 42%, rgba(7,11,12,.2) 100%), linear-gradient(0deg, rgba(7,11,12,.95), transparent 60%); }
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--color-paper-deep); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.08); }
.hero__content { width: min(calc(100% - 2rem), var(--measure)); margin: 0 auto; padding: 7rem 0 5.5rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-bottom: 1.4rem; color: var(--color-accent); font: 700 .72rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
.hero__meta span::before { content: "// "; color: var(--color-accent-warm); }
.hero__english { display: block; margin-top: .8rem; color: var(--color-accent); font: 700 clamp(1rem, 2vw, 1.45rem)/1.2 var(--font-mono); letter-spacing: .06em; }
.hero__lede { max-width: 50ch; margin-top: 1.5rem; color: #d1d7cc; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.7; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.05rem; border: 1px solid currentColor; border-radius: var(--radius-sm); font: 700 .86rem/1.1 var(--font-mono); text-decoration: none; transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.button:hover { transform: translateY(-2px); }
.button--primary { position: relative; color: var(--color-paper-deep); background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 1px rgba(198,238,99,.2); overflow: clip; }
.button--primary::after { content: ""; position: absolute; inset: 0 auto 0 -35%; width: 24%; transform: skewX(-22deg); background: rgba(255,255,255,.5); animation: sheen 3.7s ease-in-out infinite; }
.button--secondary { color: var(--color-ink); background: rgba(17,23,26,.35); }
.button--secondary:hover { background: var(--color-paper-soft); }
.button--text { padding-inline: 0; color: var(--color-accent); border-width: 0 0 1px; border-radius: 0; min-height: auto; }
@keyframes sheen { 0%, 52% { left: -35%; opacity: 0; } 63% { opacity: 1; } 75%, 100% { left: 120%; opacity: 0; } }
.ribbon { border-bottom: 1px solid var(--color-line); background: var(--color-accent); color: var(--color-paper-deep); }
.ribbon__inner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .9rem 0; font-size: .88rem; }
.ribbon__inner p { max-width: none; }
.ribbon__label { font: 700 .72rem/1 var(--font-mono); letter-spacing: .1em; }
.ribbon a { font-weight: 700; }
.section { padding: var(--space-8) 0; border-bottom: 1px solid var(--color-line); }
.section--tight { padding-block: var(--space-6); }
.section--raised { background: var(--color-paper-raised); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3.2rem; }
.section-head p { max-width: 34ch; color: var(--color-muted); }
.answer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 4rem; align-items: start; }
.answer__aside { padding-top: .8rem; color: var(--color-muted); border-top: 1px solid var(--color-accent-warm); }
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.2rem; }
.prose a, .article-body a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.spec-grid__item { min-height: 8.7rem; padding: 1.25rem; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.spec-grid dt { color: var(--color-muted); font: .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.spec-grid dd { margin-top: .8rem; font: 700 clamp(1.1rem, 2.2vw, 1.8rem)/1.2 var(--font-display); }
.feature-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--color-line); background: var(--color-line); }
.feature { min-height: 13rem; padding: 1.5rem; background: var(--color-paper); transition: transform .25s var(--ease), background-color .25s var(--ease); }
.feature:nth-child(1), .feature:nth-child(4) { grid-column: span 2; }
.feature:nth-child(2), .feature:nth-child(3), .feature:nth-child(5), .feature:nth-child(6) { grid-column: span 2; }
.feature:hover { position: relative; z-index: 1; transform: translateY(-5px); background: var(--color-paper-soft); }
.feature__mark { display: inline-block; margin-bottom: 2.7rem; color: var(--color-accent); font: 700 1.1rem/1 var(--font-mono); }
.feature h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.feature p { margin-top: .65rem; color: var(--color-muted); font-size: .92rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.gallery-card { position: relative; grid-column: span 4; min-width: 0; background: var(--color-paper-deep); border: 1px solid var(--color-line); overflow: clip; cursor: zoom-in; }
.gallery-card:nth-child(1) { grid-column: span 7; }
.gallery-card:nth-child(2) { grid-column: span 5; }
.gallery-card:nth-child(3), .gallery-card:nth-child(4) { grid-column: span 4; }
.gallery-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s var(--ease), filter .4s var(--ease); }
.gallery-card:hover img { transform: scale(1.035); filter: brightness(1.12); }
.gallery-card figcaption { padding: .8rem 1rem; color: var(--color-muted); font-size: .8rem; }
.gallery-card button { position: absolute; inset: 0; z-index: 1; width: 100%; height: calc(100% - 3rem); border: 0; background: transparent; cursor: zoom-in; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
.guide-card { min-height: 14rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem 0; border-bottom: 1px solid var(--color-line); }
.guide-card:nth-child(odd) { padding-right: 2rem; border-right: 1px solid var(--color-line); }
.guide-card:nth-child(even) { padding-left: 2rem; }
.guide-card__copy { margin-top: .75rem; color: var(--color-muted); max-width: 46ch; }
.article-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.article-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 15rem; padding: 1.4rem; border: 1px solid var(--color-line); background: var(--color-paper-raised); }
.article-card:hover { background: var(--color-paper-soft); }
.article-card h3 { font-size: 1.28rem; }
.article-card p { margin-top: .8rem; color: var(--color-muted); font-size: .9rem; }
.article-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; color: var(--color-accent); font: .72rem/1.2 var(--font-mono); }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--color-line); background: var(--color-line); }
.review { min-height: 14rem; padding: 1.5rem; background: var(--color-paper); }
.review__rating { color: var(--color-accent); letter-spacing: .2em; }
.review p { margin-top: 1.2rem; color: #d1d7cc; }
.review footer { margin-top: 2rem; color: var(--color-muted); font: .72rem/1.3 var(--font-mono); }
.faq-list { border-top: 1px solid var(--color-line); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font: 700 1.15rem/1.3 var(--font-display); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--color-accent); font: 1.35rem/1 var(--font-mono); }
.faq-item[open] summary::after { content: "—"; }
.faq-item__answer { padding: 0 3rem 1.35rem 0; color: var(--color-muted); }
.final-cta { padding: var(--space-8) 0; background: var(--color-accent); color: var(--color-paper-deep); }
.final-cta__inner { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.final-cta h2 { max-width: 10ch; }
.final-cta p { margin-top: 1rem; max-width: 38ch; }
.final-cta .button--primary { color: var(--color-accent); background: var(--color-paper-deep); border-color: var(--color-paper-deep); }
.final-cta .button--secondary { color: var(--color-paper-deep); border-color: var(--color-paper-deep); background: transparent; }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.footer { padding: 3rem 0 2rem; background: var(--color-paper-deep); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--color-line); }
.footer__logo { width: min(12rem, 70%); height: auto; margin-top: 1.3rem; object-fit: contain; object-position: left center; }
.footer__intro p { margin-top: 1rem; color: var(--color-muted); max-width: 32ch; }
.footer h3 { margin-bottom: .9rem; font: 700 .78rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.footer ul { display: grid; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.footer li, .footer a { color: var(--color-muted); font-size: .86rem; text-decoration: none; }
.footer a:hover { color: var(--color-ink); }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; color: var(--color-muted); font-size: .75rem; }
.footer__bottom p { max-width: none; }
.page-hero { padding: 5.5rem 0 4.5rem; background: var(--color-paper-raised); border-bottom: 1px solid var(--color-line); }
.page-hero__layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: end; }
.page-hero p { margin-top: 1.2rem; color: var(--color-muted); max-width: 56ch; }
.page-hero__stamp { color: var(--color-accent); font: .72rem/1.6 var(--font-mono); text-align: right; }
.gallery-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.gallery-tab { padding: .45rem .75rem; color: var(--color-muted); border: 1px solid var(--color-line); background: transparent; font: .74rem/1.1 var(--font-mono); cursor: pointer; }
.gallery-tab[aria-selected="true"], .gallery-tab:hover { color: var(--color-paper-deep); background: var(--color-accent); border-color: var(--color-accent); }
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 1rem; background: rgba(7,11,12,.94); }
.lightbox.is-open { display: grid; }
.lightbox__figure { width: min(92vw, 74rem); }
.lightbox__image { width: 100%; max-height: 80vh; object-fit: contain; }
.lightbox__caption { margin-top: .75rem; color: var(--color-muted); text-align: center; font-size: .85rem; }
.lightbox__close, .lightbox__prev, .lightbox__next { position: fixed; color: var(--color-ink); border: 1px solid var(--color-line); background: var(--color-paper-raised); cursor: pointer; }
.lightbox__close { top: 1rem; right: 1rem; padding: .5rem .7rem; }
.lightbox__prev, .lightbox__next { top: 50%; padding: .8rem 1rem; transform: translateY(-50%); font: 1rem/1 var(--font-mono); }
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.platform { padding: 2rem; border: 1px solid var(--color-line); background: var(--color-paper-raised); }
.platform--recommended { border-color: var(--color-accent); }
.platform__top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.platform__badge { color: var(--color-paper-deep); background: var(--color-accent); padding: .25rem .45rem; font: .65rem/1 var(--font-mono); }
.platform p { margin-top: .8rem; color: var(--color-muted); }
.platform .button { margin-top: 2.2rem; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; counter-reset: step; }
.step { position: relative; padding-top: 2.6rem; border-top: 1px solid var(--color-accent); }
.step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: .8rem; left: 0; color: var(--color-accent); font: .72rem/1 var(--font-mono); }
.step p { margin-top: .65rem; color: var(--color-muted); }
.requirements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.requirement { padding: 1.5rem; border: 1px solid var(--color-line); }
.requirement ul { display: grid; gap: .55rem; margin: 1rem 0 0; padding-left: 1.15rem; color: var(--color-muted); }
.notice { padding: 1rem 1.15rem; border: 1px solid var(--color-accent-warm); color: #e9d2c7; background: rgba(231,132,104,.08); }
.guide-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; align-items: start; }
.toc { position: sticky; top: 6rem; display: grid; gap: .6rem; border-top: 1px solid var(--color-line); padding-top: 1rem; }
.toc a { color: var(--color-muted); font-size: .82rem; text-decoration: none; }
.toc a:hover { color: var(--color-accent); }
.article-body { max-width: 68ch; }
.article-body h2 { margin: 3rem 0 1rem; font-size: clamp(1.7rem, 3vw, 2.8rem); }
.article-body h3 { margin: 1.6rem 0 .7rem; font-size: 1.3rem; }
.article-body p + p { margin-top: 1rem; }
.article-body ul, .article-body ol { padding-left: 1.35rem; }
.article-body li + li { margin-top: .45rem; }
.article-body table { width: 100%; margin: 1.2rem 0; border-collapse: collapse; font-size: .9rem; }
.article-body th, .article-body td { padding: .65rem .7rem; border: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.article-body th { color: var(--color-ink); background: var(--color-paper-soft); }
.article-source { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: .8rem; }
.article-source a { color: var(--color-accent); }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .site-nav__links, .site-nav .nav-kicker { display: none; }
  .nav-toggle { display: block; }
  .site-nav__panel { width: min(100%, var(--measure)); margin: .7rem auto 0; padding: 1rem 0 .5rem; border-top: 1px solid var(--color-line); }
  .site-nav__panel.is-open { display: grid; gap: .8rem; }
  .site-nav__panel a { color: var(--color-muted); text-decoration: none; }
  .page-hero__layout, .answer { grid-template-columns: 1fr; gap: 2rem; }
  .page-hero__stamp { text-align: left; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-layout { grid-template-columns: 1fr; gap: 2rem; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; }
}
@media (max-width: 640px) {
  :root { --space-8: 5rem; --space-7: 4rem; }
  .container, .narrow, .hero__content { width: min(calc(100% - 1.5rem), var(--measure)); }
  .site-nav { padding-inline: .75rem; }
  .brand__name { font-size: 1rem; }
  .hero { min-height: calc(100svh - 2rem); }
  .hero__content { padding: 5rem 0 3rem; }
  .hero::after { background: linear-gradient(90deg, rgba(7,11,12,.98), rgba(7,11,12,.55)), linear-gradient(0deg, rgba(7,11,12,.98), transparent 70%); }
  .ribbon__inner, .final-cta__inner, .footer__bottom { align-items: start; flex-direction: column; }
  .section-head { display: block; margin-bottom: 2rem; }
  .section-head p { margin-top: .85rem; }
  .spec-grid, .download-grid, .requirements, .review-grid, .steps, .article-index { grid-template-columns: minmax(0, 1fr); }
  .spec-grid__item { min-height: auto; }
  .feature-grid { display: block; }
  .feature { min-height: auto; border-bottom: 1px solid var(--color-line); }
  .feature__mark { margin-bottom: 1.5rem; }
  .gallery-grid { display: block; }
  .gallery-card { margin-bottom: 1rem; }
  .guide-grid { display: block; }
  .guide-card, .guide-card:nth-child(odd), .guide-card:nth-child(even) { padding: 1.4rem 0; border-right: 0; }
  .footer__top { grid-template-columns: 1fr; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; transform: none; }
  .lightbox__prev { left: 1rem; }
  .lightbox__next { right: 1rem; }
}