/* Hallmark · shape: Stat-Led · genre: modern-minimal · theme: Cobalt (deal 3/3, seed desktop-app-simulates-measured-3133·65fc3d51·2026-10-27·r1) · redesign: full · job: try · draw: 4165a7
 * hero: Banner · nav: edge-aligned · footer: statement · imagery: screenshot 1 (the app, the user’s own) · signature: the real Speaker Sim window across the twelve columns right under the hero, the Linux session beside the head on graphite
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · modes: light+dark · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, the claim is the tagline; the five-stage chain and the formula on graphite are the proof a listener could check */
/* Hallmark · dropped the terminal window bar (traffic dots and "linux · bash" title) · 47a bans a drawn OS window; the session sits on a graphite panel with a plain caption */
/* Hallmark · dropped the meter bars in the nav, the LEDs before the platform names and the dots in the footer · 63 names decorative dots; the "Read the script first" button becomes a text link (one primary per page) */
/* Hallmark · reworded the eyebrow "// HEADPHONES → ROOM → SPEAKERS" out (the chain says it), the 01 to 05 tags out of the heads, the capitals labels (HOW IT WORKS, LIVE, EXPORT, COPY, SOURCE …) to sentence or lower case, the middle dots in the chips and the stat label "measured speakers · 69 studio" to commas, the arrows in the buttons and the SmartScreen steps to words, and the hero paragraph to its first clause; the CEA-2034, room, KEMAR and AutoEq stages stay in How it works · 54, 58, 63 and 67 name them */
/* Hallmark · reworded every em dash in the copy to commas, colons or parentheses, and "—" in the matrix to "no" / "non" · 19 names the dash */
/* Hallmark · reworded the formula’s middle dots to × signs (the same product) and the heads "01 En chiffres", "02 Fonctionnement", "03 Télécharger", "04 FAQ", "05 Liens" without their ordinals (EN likewise) · 63 and 54 name them */
/* Hallmark · dismissed F1 · the straight quotes are inside a shell command, where they are code */
/* Hallmark · waive 79 · the 338px under the actions is the real Speaker Sim window, which starts 80px below them inside the hero and fills the rest of the first screen · the screenshot is the product the page sells, so it takes that space rather than more text */
@import url("./tokens.css");
@import url("./base.css");

body { font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); line-height: 1.02; }
h3 { font-weight: 500; font-size: var(--text-title); line-height: 1.15; }
code { font-family: var(--font-outlier); font-size: 0.9em; }
a { text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--color-accent); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus-visible { top: var(--space-md); }

/* nav, edge-aligned */
.strip { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.strip-inner { display: flex; align-items: center; gap: var(--space-xl); min-height: 64px; }
.wordmark { font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark .by { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); letter-spacing: 0; }
.channels { display: flex; gap: var(--space-2xs); margin-left: auto; }
.channel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-input); color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-display); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.channel:hover { background: var(--color-paper-2); color: var(--color-ink); }
.lang-toggle { display: flex; gap: var(--space-3xs); padding: var(--space-3xs); border-radius: var(--radius-card); background: var(--color-paper-3); }
.lang-opt { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radius-input); background: transparent; color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-display); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.lang-opt:hover { color: var(--color-ink); }
.lang-opt.active { background: var(--color-key-face); color: var(--color-ink); box-shadow: var(--shadow-key-press); }
.mode-opt { min-width: 44px; min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-input); background: transparent; color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-display); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.mode-opt:hover { color: var(--color-ink); }
.mode-opt:active { background: var(--color-paper-2); }
.mode-opt.active { background: var(--color-key-face); color: var(--color-ink); box-shadow: var(--shadow-key-press); }
.toggles { display: flex; align-items: center; gap: var(--space-sm); }
/* the app capture follows the page's mode */
.only-dark { display: none !important; }
[data-mode="dark"] .only-dark { display: block !important; } [data-mode="dark"] .only-light { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) .only-dark { display: block !important; } :root:not([data-mode]) .only-light { display: none !important; } }

/* keys */
.key { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-key); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.key[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 500; }

/* hero, Banner */
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; padding-block: var(--space-2xl); }
.hero .shot { margin-top: var(--space-md); }
.hero h1 { max-width: 15ch; font-size: clamp(2.5rem, 3.6vw + 0.75rem, 4.25rem); }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 40ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* graphite, the dark material */
.graphite { border-radius: var(--cut-l) 4px var(--cut-l) 4px; background: var(--color-graphite); color: var(--color-graphite-ink); }
.session { display: grid; gap: var(--space-2xs); padding: var(--space-xl); font: 400 var(--text-sm)/1.7 var(--font-outlier); }
.session p { max-width: none; overflow-wrap: anywhere; }
.session-head { margin-bottom: var(--space-sm); color: var(--color-graphite-muted); font-family: var(--font-display); font-weight: 500; }
.session .prompt { color: var(--color-graphite-muted); }
.session .ok { color: var(--color-accent-2); font-family: var(--font-body); }
.session .out { color: var(--color-graphite-muted); }
.session .hl, .formula .hl { color: var(--color-accent-2); }
.copy-line { display: flex; align-items: center; gap: var(--space-md); }
.cmd-line { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.copy-btn { flex-shrink: 0; min-height: 44px; min-width: 72px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-graphite-glyph-2); border-radius: var(--radius-input); background: var(--color-graphite-2); color: var(--color-graphite-ink); font: 500 var(--text-sm)/1 var(--font-display); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.copy-btn:hover { background: var(--color-graphite-glyph-1); }
.copy-btn.done { color: var(--color-accent-2); }
.graphite :focus-visible { outline-color: var(--color-accent-2); }
@supports (corner-shape: bevel) { .graphite, .cut { corner-shape: bevel round bevel round; } }

/* the app itself */
.shot { margin: 0 auto; overflow: visible; background: none; }
.shot > img { position: static; width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-rule-2), var(--shadow-card); }
.shot-cap { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* sections */
.section { padding-top: var(--section-gap); }
.section--l { padding-top: var(--section-gap-l); }
.head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head .lead { max-width: 48ch; }
.head--side { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-content: start; margin: 0; }

/* in numbers, counts beside their head */
.stats { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.counts { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.counts > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.stat-num { font: 600 clamp(2.75rem, 3vw + 1.5rem, 4.5rem)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.counts dd { margin: 0; color: var(--color-ink-2); }
.counts > div:first-child .stat-num { color: var(--color-accent); }

/* how it works, five stages */
.chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; counter-reset: st; }
.cut { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--cut-l) 4px var(--cut-l) 4px; background: var(--color-paper); box-shadow: var(--shadow-card); }
.chain li { counter-increment: st; display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); }
.chain li::before { content: counter(st); font: 600 var(--text-2xl)/1 var(--font-display); color: var(--color-accent); }
.chain p { font-size: var(--text-sm); }
.src { align-self: end; justify-self: start; padding: var(--space-2xs) var(--space-xs); border-radius: 4px; background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-xs); }
.formula { margin-top: var(--space-xl); padding: var(--space-xl); overflow-x: auto; }
.formula code { font-size: var(--text-lg); white-space: nowrap; }
.formula .tl { color: var(--color-graphite-muted); }

/* download, three platforms */
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: stretch; }
.dl { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-md); padding: var(--space-xl); }
.dl--live { background: var(--color-accent-wash); border-color: color-mix(in oklab, var(--color-accent) 30%, var(--color-rule)); }
.dl-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.dl-head h3 { font-size: var(--text-2xl); font-weight: 600; }
.status { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-muted); }
.dl--live .status { color: var(--color-accent-deep); }
.highlights { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); align-content: start; }
.highlights li { padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.mini-term { width: 100%; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border-radius: var(--radius-input); background: var(--color-graphite); color: var(--color-graphite-ink); }
.mini-term code { flex: 1; min-width: 0; font-size: var(--text-xs); overflow-wrap: anywhere; }
.note { margin-top: var(--space-xl); max-width: 70ch; font-size: var(--text-sm); color: var(--color-muted); }
.table-wrap { margin-top: var(--space-2xl); overflow-x: auto; }
.matrix { width: 100%; min-width: 36rem; border-collapse: collapse; }
.matrix th { padding: var(--space-sm) var(--space-md); text-align: left; font: 500 var(--text-sm)/1.2 var(--font-display); color: var(--color-muted); border-bottom: var(--rule-hair) solid var(--color-ink); }
.matrix td { padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.matrix td:first-child { padding-left: 0; color: var(--color-ink); font-weight: 500; }
.matrix .y { color: var(--color-ink); }
.matrix .n { color: var(--color-muted); }
.matrix tr.wash td { background: var(--color-accent-wash); }

/* faq */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.faq { border-top: var(--rule-hair) solid var(--color-ink); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; align-items: center; min-height: 64px; padding-block: var(--space-md); font: 500 var(--text-title)/1.25 var(--font-display); color: var(--color-ink); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent); }
.faq details p { max-width: 62ch; padding-bottom: var(--space-lg); }

/* links */
.connect-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.connect-card { display: grid; gap: var(--space-xl); align-content: space-between; min-height: 160px; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--cut-l) 4px var(--cut-l) 4px; text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.connect-card:hover { border-color: var(--color-accent); background: var(--color-accent-wash); }
.connect-card .label { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-muted); }
.connect-card .name { font: 600 var(--text-title)/1.15 var(--font-display); color: var(--color-ink); overflow-wrap: anywhere; }

/* footer, a statement */
.foot { margin-top: var(--section-gap); padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot-line { max-width: 22ch; font: 600 var(--text-display-s)/1.02 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.foot-meta { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) {
  .channels { display: none; }
  .toggles { margin-left: auto; gap: var(--space-xs); }
  .mode-opt { padding: 0 var(--space-xs); }
  .hero-grid, .head, .stats, .faq-wrap, .dl-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .chain { grid-template-columns: minmax(0, 1fr); }
  .connect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (max-width: 40rem) {
  .connect-grid { grid-template-columns: minmax(0, 1fr); }
  .wordmark .by { display: none; }
  .session { padding: var(--space-lg); }
}