/* Hallmark · macrostructure: Workbench · tone: atmospheric · anchor hue: acid-green · theme: Midnight · nav: N5 · footer: Ft5 · enrichment: E2 asset-led · contrast: pass · slop: pass */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 · honest: pass · chrome: pass · tokens: pass · responsive: pass */
@import url('tokens.css?v=20260814-2');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--color-bg-deep); }
body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); line-height: var(--leading-body); overflow-x: clip; padding-bottom: var(--space-3xl); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 10% 12%, var(--color-blue-glow), transparent 28%), radial-gradient(circle at 92% 48%, var(--color-bloom-green), transparent 24%); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; letter-spacing: -0.035em; line-height: var(--leading-tight); overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(2.75rem, 8vw, 7.25rem); margin-block-end: var(--space-lg); }
h2 { font-size: var(--text-3xl); margin-block-end: var(--space-md); }
h3 { font-size: var(--text-xl); margin-block-end: var(--space-sm); }
p { max-width: var(--reading-width); }
::selection { background: var(--color-accent); color: var(--color-bg-deep); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; inset: var(--space-sm) auto auto var(--space-sm); transform: translateY(-200%); background: var(--color-accent); color: var(--color-bg-deep); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: var(--z-sticky-nav); }
.nav-pill { position: fixed; inset: var(--space-md) 50% auto; transform: translateX(-50%); width: min(44rem, calc(100% - 2rem)); min-height: 3.4rem; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: color-mix(in oklch, var(--color-bg-deep) 88%, transparent); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); box-shadow: 0 1rem 2rem var(--color-shadow); backdrop-filter: blur(16px) saturate(125%); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.wordmark-mark { display: block; width: 2rem; min-width: 2rem; height: 2rem; object-fit: cover; border: 1px solid var(--color-accent); border-radius: var(--radius-sm); }
.nav-links { display: none; align-items: center; gap: var(--space-md); margin-inline: auto; font-size: var(--text-sm); color: var(--color-ink-soft); }
.nav-links a, .footer-links a, .footer-meta a { transition: color var(--dur-short) var(--ease-out); }
.nav-links a:hover, .nav-links a:focus-visible, .footer-links a:hover, .footer-links a:focus-visible { color: var(--color-accent); }
.nav-cta, .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 2.65rem; padding-inline: var(--space-md); border-radius: var(--radius-pill); white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.nav-cta, .btn-primary { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; }
.nav-cta:hover, .btn-primary:hover { background: var(--color-accent-bright); transform: translateY(-2px); box-shadow: 0 0.8rem 1.6rem var(--color-accent-glow); }
.nav-cta:active, .btn-primary:active { transform: translateY(1px); }
.nav-cta:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .menu-toggle:focus-visible, .tab-button:focus-visible, .faq-question:focus-visible, .lightbox-close:focus-visible, .lightbox-control:focus-visible { outline: 2px solid var(--color-accent-bright); outline-offset: 3px; }
.nav-cta:active, .btn-primary:active, .btn-secondary:active, .menu-toggle:active, .tab-button:active, .faq-question:active, .lightbox-close:active, .lightbox-control:active { transform: translateY(1px); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; }
.btn-secondary { border: 1px solid var(--color-rule); color: var(--color-ink); background: color-mix(in oklch, var(--color-surface) 72%, transparent); }
.btn-secondary:hover { border-color: var(--color-accent); background: var(--color-surface-raised); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(1px); }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 2.65rem; margin-inline-start: auto; padding-inline: var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink-soft); cursor: pointer; white-space: nowrap; }
.menu-toggle[aria-expanded="true"] { color: var(--color-accent); background: var(--color-surface-raised); }
.mobile-menu { position: fixed; inset: 5.35rem var(--space-md) auto; display: none; padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-md); z-index: var(--z-sticky-nav); box-shadow: 0 1.4rem 2rem var(--color-shadow-deep); }
.mobile-menu.is-open { display: grid; gap: var(--space-xs); }
.mobile-menu a { padding: var(--space-sm); border-radius: var(--radius-sm); color: var(--color-ink-soft); white-space: nowrap; }
.mobile-menu a:hover, .mobile-menu a:focus-visible { background: var(--color-surface-raised); color: var(--color-accent); }

.page-shell, .site-footer { width: min(var(--content-width), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }
.hero { min-height: 100svh; display: grid; align-items: end; position: relative; isolation: isolate; padding: var(--space-5xl) var(--page-gutter) var(--space-4xl); background-image: linear-gradient(90deg, var(--color-overlay) 0%, var(--color-overlay-mid) 48%, var(--color-overlay-heavy) 100%), url("public/images/aicomi-hero-01.webp"); background-size: cover; background-position: center; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(0deg, var(--color-bg) 0%, transparent 100%); z-index: -1; }
.hero-content { width: min(var(--content-width), 100%); margin-inline: auto; }
.hero-layout { display: grid; gap: var(--space-xl); align-items: end; }
.hero-copy { max-width: 58rem; }
.eyebrow, .article-kicker, .section-kicker { color: var(--color-accent); font: 600 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.eyebrow { margin-block-end: var(--space-lg); }
.hero h1 { max-width: 11ch; text-shadow: 0 0.75rem 2rem var(--color-shadow-deep); }
.hero h1 span { display: block; font-size: 0.38em; line-height: 1.3; letter-spacing: 0.01em; color: var(--color-ink-soft); margin-block-start: var(--space-sm); }
.hero-lede { max-width: 52ch; color: var(--color-ink-soft); font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block: var(--space-xl); }
.hero-tag-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag { display: inline-flex; align-items: center; min-height: 1.9rem; padding-inline: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-overlay-card); color: var(--color-ink-soft); font: 500 var(--text-xs)/1 var(--font-mono); white-space: nowrap; }
.hero-fact-card { display: grid; gap: var(--space-sm); padding: var(--space-lg); background: color-mix(in oklch, var(--color-surface) 88%, transparent); border: 1px solid var(--color-rule); border-radius: var(--radius-md); box-shadow: 0 1.5rem 2.5rem var(--color-shadow-soft); backdrop-filter: blur(10px); }
.hero-fact-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.fact-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); color: var(--color-ink-muted); font-size: var(--text-xs); }
.fact-caption strong { color: var(--color-ink); font-weight: 600; }

.section { padding-block: var(--space-4xl); }
.section-tight { padding-block: var(--space-3xl); }
.section-head { display: grid; gap: var(--space-sm); margin-block-end: var(--space-2xl); }
.section-head p { color: var(--color-ink-muted); margin-block-end: 0; }
.section-head h2 { margin-block-end: 0; }
.section-head.split { align-items: end; }
.section-muted { background: color-mix(in oklch, var(--color-bg-deep) 65%, transparent); }
.section-dark { background: var(--color-bg-deep); color: var(--color-ink); }
.section-rule { border-top: 1px solid var(--color-rule-soft); }
.info-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--color-rule-soft); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-md); overflow: hidden; }
.info-item { display: grid; gap: var(--space-2xs); padding: var(--space-lg); background: var(--color-surface); }
.info-item dt { color: var(--color-ink-muted); font-size: var(--text-xs); }
.info-item dd { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.02em; }
.info-item small { color: var(--color-ink-muted); font-size: var(--text-xs); }

.story-grid { display: grid; gap: var(--space-2xl); align-items: start; }
.story-copy { max-width: 62ch; }
.story-copy p { color: var(--color-ink-soft); font-size: clamp(1rem, 1.4vw, 1.15rem); }
.story-aside { padding: var(--space-lg); border-left: 2px solid var(--color-accent); background: color-mix(in oklch, var(--color-surface) 72%, transparent); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.story-aside p { margin: 0; color: var(--color-ink-soft); }
.stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-block-start: var(--space-2xl); }
.stat { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.stat strong { display: block; font: 700 clamp(1.5rem, 3vw, 2.5rem)/1.1 var(--font-display); color: var(--color-accent); }
.stat span { color: var(--color-ink-muted); font-size: var(--text-xs); }

.features-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.feature-card { min-height: 13rem; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-md); transition: transform var(--dur-medium) var(--ease-out), box-shadow var(--dur-medium) var(--ease-out), border-color var(--dur-medium) var(--ease-out); }
.feature-card::before { content: attr(data-index); display: block; margin-block-end: var(--space-2xl); color: var(--color-accent); font: 600 var(--text-xs)/1 var(--font-mono); }
.feature-card p { margin-block-end: 0; color: var(--color-ink-muted); font-size: var(--text-sm); line-height: 1.7; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 1.2rem 2.3rem var(--color-shadow-feature); border-color: var(--color-accent-deep); }
.feature-card:focus-within { border-color: var(--color-accent); }

.workbench-grid { display: grid; gap: var(--space-2xl); }
.workbench-rail { position: static; align-self: start; }
.workbench-rail h2 { max-width: 8ch; }
.workbench-rail p { color: var(--color-ink-muted); }
.rail-list { display: grid; gap: var(--space-xs); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.rail-list a { display: flex; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule-soft); color: var(--color-ink-soft); font-size: var(--text-sm); }
.rail-list a::after { content: "↗"; color: var(--color-accent); }
.rail-list a:hover, .rail-list a:focus-visible { color: var(--color-accent); }
.shot-stack { display: grid; gap: var(--space-3xl); }
.shot-card { margin: 0; }
.shot-frame { position: relative; overflow: hidden; padding: var(--space-2xs); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-md); box-shadow: 0 1.4rem 2rem var(--color-shadow-image); }
.shot-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius-md) - 0.2rem); }
.shot-card figcaption { display: flex; justify-content: space-between; gap: var(--space-md); padding-block-start: var(--space-sm); color: var(--color-ink-muted); font-size: var(--text-sm); }
.shot-card figcaption strong { color: var(--color-ink-soft); font-weight: 500; }
.shot-badge { color: var(--color-accent); font: 600 var(--text-xs)/1 var(--font-mono); white-space: nowrap; }

.gallery-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-xl); }
.tab-button { min-height: 2.5rem; padding-inline: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-muted); cursor: pointer; white-space: nowrap; }
.tab-button:hover, .tab-button[aria-selected="true"] { color: var(--color-bg-deep); background: var(--color-accent); border-color: var(--color-accent); }
.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.gallery-item { position: relative; margin: 0; padding: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-md); cursor: zoom-in; }
.gallery-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-medium) var(--ease-out), filter var(--dur-medium) var(--ease-out); }
.gallery-item figcaption { padding: var(--space-sm); color: var(--color-ink-muted); font-size: var(--text-xs); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.035); filter: brightness(1.12); }
.gallery-empty { display: none; padding: var(--space-xl); border: 1px dashed var(--color-rule); border-radius: var(--radius-md); color: var(--color-ink-muted); }
.gallery-empty.is-visible { display: block; }

.rating-layout { display: grid; gap: var(--space-xl); }
.rating-summary { padding: var(--space-xl); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-md); }
.rating-score { display: flex; align-items: baseline; gap: var(--space-sm); }
.rating-score strong { color: var(--color-accent); font: 700 clamp(3rem, 8vw, 5.5rem)/1 var(--font-display); }
.rating-score span { color: var(--color-ink-muted); font-size: var(--text-sm); }
.rating-summary p { margin-block-end: 0; color: var(--color-ink-muted); font-size: var(--text-sm); }
.rating-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.rating-card { padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-md); }
.rating-card p { color: var(--color-ink-soft); font-size: var(--text-sm); }
.rating-card cite { color: var(--color-accent); font-style: normal; font: 600 var(--text-xs)/1 var(--font-mono); }

.timeline { display: grid; gap: var(--space-sm); }
.timeline-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg) 0; border-top: 1px solid var(--color-rule-soft); }
.timeline-date { color: var(--color-accent); font: 600 var(--text-xs)/1.35 var(--font-mono); }
.timeline-item h3 { margin-block-end: var(--space-xs); }
.timeline-item p { margin-block-end: 0; color: var(--color-ink-muted); font-size: var(--text-sm); }

.faq-list { display: grid; gap: var(--space-xs); }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-md); }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%; padding: var(--space-lg); border: 0; background: transparent; color: var(--color-ink); text-align: start; cursor: pointer; }
.faq-question::after { content: "+"; color: var(--color-accent); font: 500 var(--text-xl)/1 var(--font-display); }
.faq-item[open] .faq-question::after { content: "−"; }
.faq-answer { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-ink-muted); font-size: var(--text-sm); }
.faq-answer p { margin: 0; }

.final-cta { display: grid; gap: var(--space-lg); align-items: end; padding: var(--space-3xl) var(--space-xl); background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface)); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); }
.final-cta h2 { max-width: 13ch; margin-block-end: 0; }
.final-cta p { margin-block-end: 0; color: var(--color-ink-muted); }
.final-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.download-note { color: var(--color-ink-muted); font-size: var(--text-xs); }

.sticky-download { position: fixed; inset: auto 0 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4rem; padding: var(--space-xs) max(var(--page-gutter), env(safe-area-inset-left)) max(var(--space-xs), env(safe-area-inset-bottom)); background: color-mix(in oklch, var(--color-bg-deep) 95%, transparent); border-top: 1px solid var(--color-rule); color: var(--color-ink); backdrop-filter: blur(14px); }
.sticky-download span { display: none; color: var(--color-ink-muted); font-size: var(--text-xs); }
.sticky-download .btn-primary { min-height: 2.85rem; margin-inline-start: auto; }

.site-footer { display: grid; gap: var(--space-2xl); padding-block: var(--space-4xl) var(--space-2xl); }
.footer-statement { max-width: 28ch; margin: 0; font-family: var(--font-display); font-size: var(--text-statement); letter-spacing: -0.035em; line-height: 1.05; }
.footer-grid { display: grid; gap: var(--space-xl); padding-block-start: var(--space-lg); border-top: 1px solid var(--color-rule); }
.footer-intro p { margin-block: var(--space-sm) 0; color: var(--color-ink-muted); font-size: var(--text-sm); }
.footer-links { display: grid; gap: var(--space-xs); color: var(--color-ink-muted); font-size: var(--text-sm); }
.footer-links h3 { margin-block-end: var(--space-xs); color: var(--color-ink-soft); font: 600 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.related-links { display: grid; gap: var(--space-xs); }
.related-links a { color: var(--color-ink-muted); font-size: var(--text-sm); }
.related-links a:hover { color: var(--color-accent); }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-block-start: var(--space-lg); border-top: 1px solid var(--color-rule-soft); color: var(--color-ink-muted); font-size: var(--text-xs); }

.page-hero { padding: var(--space-5xl) var(--page-gutter) var(--space-4xl); background: linear-gradient(180deg, var(--color-bg-deep), var(--color-bg)); }
.page-hero-inner { width: min(var(--content-width), 100%); margin-inline: auto; }
.page-hero h1 { max-width: 13ch; margin-block-end: var(--space-md); }
.page-hero p { color: var(--color-ink-muted); }
.page-hero .eyebrow { margin-block-end: var(--space-lg); }
.download-grid { display: grid; gap: var(--space-sm); }
.platform-card { display: grid; gap: var(--space-md); padding: var(--space-xl); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-md); }
.platform-card.recommended { border-color: var(--color-accent-deep); box-shadow: 0 0 0 1px var(--color-accent-hair); }
.platform-card h2 { font-size: var(--text-2xl); }
.platform-card p { margin-block-end: 0; color: var(--color-ink-muted); font-size: var(--text-sm); }
.platform-card .status { color: var(--color-accent); font: 600 var(--text-xs)/1 var(--font-mono); }
.platform-card.pending .status { color: var(--color-ink-muted); }
.install-steps { display: grid; gap: var(--space-sm); counter-reset: step; }
.install-step { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-md); }
.install-step::before { content: counter(step, decimal-leading-zero); color: var(--color-accent); font: 700 var(--text-xl)/1 var(--font-display); }
.install-step h3 { margin-block-end: var(--space-xs); }
.install-step p { margin: 0; color: var(--color-ink-muted); font-size: var(--text-sm); }
.specs-grid { display: grid; gap: var(--space-sm); }
.spec-card { padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-md); }
.spec-card h3 { margin-block-end: var(--space-lg); }
.spec-list { display: grid; gap: var(--space-sm); margin: 0; }
.spec-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-sm); padding-block-end: var(--space-sm); border-bottom: 1px solid var(--color-rule-soft); }
.spec-row dt { color: var(--color-ink-muted); font-size: var(--text-xs); }
.spec-row dd { margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); }

.guide-layout { display: grid; gap: var(--space-2xl); }
.guide-nav { align-self: start; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-md); }
.guide-nav h2 { font-size: var(--text-lg); }
.guide-nav a { display: block; padding-block: var(--space-xs); color: var(--color-ink-muted); font-size: var(--text-sm); }
.guide-nav a:hover, .guide-nav a:focus-visible { color: var(--color-accent); }
.guide-content { min-width: 0; }
.guide-chapter { padding-block: var(--space-xl); border-top: 1px solid var(--color-rule-soft); scroll-margin-top: var(--space-4xl); }
.guide-chapter:first-child { border-top: 0; padding-block-start: 0; }
.guide-chapter h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.guide-chapter p, .guide-chapter li { color: var(--color-ink-soft); }
.guide-chapter ol, .guide-chapter ul { padding-inline-start: 1.3rem; }
.guide-chapter li { margin-block: var(--space-xs); }
.guide-tip { margin-block: var(--space-lg); padding: var(--space-lg); border-inline-start: 2px solid var(--color-accent); background: var(--color-surface); color: var(--color-ink-soft); }
.guide-table, .article-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.guide-table th, .guide-table td, .article-prose th, .article-prose td { padding: var(--space-sm); border-bottom: 1px solid var(--color-rule-soft); text-align: start; vertical-align: top; }
.guide-table th, .article-prose th { color: var(--color-ink-soft); font-weight: 600; }
.guide-table td, .article-prose td { color: var(--color-ink-muted); }

.article-main { width: min(60rem, calc(100% - 2 * var(--page-gutter))); margin: 0 auto; padding-block: var(--space-5xl) var(--space-4xl); }
.article-kicker { margin-block-end: var(--space-lg); }
.article-main h1 { max-width: 17ch; font-size: clamp(2.5rem, 6vw, 5.2rem); }
.article-lede { max-width: 58ch; margin-block-end: var(--space-xl); color: var(--color-ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding-block: var(--space-md); border-block: 1px solid var(--color-rule-soft); color: var(--color-ink-muted); font: 500 var(--text-xs)/1.6 var(--font-mono); }
.article-prose { padding-block-start: var(--space-2xl); }
.article-prose h2 { margin-block: var(--space-2xl) var(--space-md); font-size: clamp(1.6rem, 3vw, 2.6rem); }
.article-prose p, .article-prose li { color: var(--color-ink-soft); }
.article-prose ul, .article-prose ol { padding-inline-start: 1.3rem; }
.article-prose li { margin-block: var(--space-xs); }
.article-prose code { padding: var(--space-2xs) var(--space-xs); background: var(--color-surface); color: var(--color-accent); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.9em; }
.article-checklist { list-style: none; padding-inline-start: 0 !important; }
.article-checklist li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--space-xs); }
.article-checklist li::before { content: "✓"; color: var(--color-accent); font-family: var(--font-mono); }
.article-links { margin-block-start: var(--space-3xl); padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-md); color: var(--color-ink-muted); font-size: var(--text-sm); }
.article-links a { color: var(--color-accent); }

dialog.lightbox { width: min(92vw, 84rem); max-width: none; padding: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-bg-deep); color: var(--color-ink); }
dialog.lightbox::backdrop { background: var(--color-overlay); backdrop-filter: blur(8px); }
.lightbox-inner { position: relative; display: grid; place-items: center; padding: var(--space-lg); }
.lightbox-inner img { max-height: 82svh; width: auto; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-close, .lightbox-control { position: absolute; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); cursor: pointer; }
.lightbox-close { inset: var(--space-md) var(--space-md) auto auto; font-size: var(--text-xl); }
.lightbox-control { inset-block-start: 50%; transform: translateY(-50%); }
.lightbox-control.prev { inset-inline-start: var(--space-md); }
.lightbox-control.next { inset-inline-end: var(--space-md); }
.lightbox-caption { padding-block: var(--space-sm) 0; color: var(--color-ink-muted); font-size: var(--text-sm); text-align: center; }

.data-stale { color: var(--color-ink-muted) !important; }
.is-reveal { opacity: 0; transform: translateY(8px); }
.is-reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover, .feature-card:hover, .platform-card:hover { border-color: var(--color-accent-deep); }
}

@media (min-width: 40rem) {
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
  .hero { padding-block-end: 6.5rem; }
  .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rating-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.25fr 0.7fr 1fr; }
  .sticky-download span { display: block; }
  .final-cta { grid-template-columns: 1.1fr 0.9fr; }
}

@media (min-width: 60rem) {
  .hero-layout { grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr); }
  .hero-fact-card { margin-block-end: 1rem; }
  .info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .story-grid { grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.55fr); }
  .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workbench-grid { grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 1.25fr); align-items: start; }
  .workbench-rail { position: sticky; top: var(--space-4xl); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rating-layout { grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr); }
  .guide-layout { grid-template-columns: minmax(14rem, 0.35fr) minmax(0, 1fr); align-items: start; }
  .guide-nav { position: sticky; top: var(--space-4xl); }
}

@media (min-width: 90rem) {
  .hero { padding-inline: max(var(--page-gutter), calc((100% - var(--content-width)) / 2)); }
}

@media (max-width: 39.99rem) {
  .nav-pill { padding-inline-start: 0.65rem; }
  .nav-cta { padding-inline: var(--space-sm); font-size: var(--text-sm); }
  .hero { padding-inline: var(--page-gutter); }
  .hero h1 { max-width: 100%; }
  .hero-actions .btn-primary, .hero-actions .btn-secondary { flex: 1 1 100%; }
  .timeline-item { grid-template-columns: 1fr; gap: var(--space-xs); }
  .sticky-download { padding-inline: var(--page-gutter); }
  .sticky-download .btn-primary { width: 100%; }
  .article-prose table, .guide-table { display: block; overflow-x: auto; }
  .lightbox-inner { padding: var(--space-xl) var(--space-xs); }
  .lightbox-control { width: 2.4rem; height: 2.4rem; }
  .lightbox-control.prev { inset-inline-start: 0.25rem; }
  .lightbox-control.next { inset-inline-end: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .is-reveal { opacity: 1; transform: none; }
}