/* Product pages share a prescription label, type scale, and spacing system. */
:root {
  color-scheme: dark;
  --ink: oklch(13% 0.02 305);
  --ink-2: oklch(18% 0.025 305);
  --paper: oklch(94% 0.014 320);
  --paper-dim: oklch(79% 0.025 310);
  --paper-mute: oklch(68% 0.026 310);
  --rule: oklch(80% 0.04 310 / 0.2);
  --rule-soft: oklch(80% 0.04 310 / 0.1);
  --accent: var(--product-dark, var(--pink));
  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
  --amber: var(--accent);
  --amber-soft: var(--accent-soft);
  --chrome: color-mix(in oklch, var(--ink) 92%, transparent);
  --art-ground: oklch(12% 0.02 305);
  --art-text: oklch(82% 0.02 305);
  --shadow: oklch(4% 0.015 305 / 0.3);
  --button-ink: oklch(18% 0.03 305);
  --serif: 'EB Garamond', 'Shippori Mincho', Georgia, serif;
  --sans: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(22px, 4vw, 56px);
  --content-max: 1240px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ink: oklch(97% 0.01 320); --ink-2: oklch(94% 0.02 315);
    --paper: oklch(24% 0.028 310); --paper-dim: oklch(40% 0.03 310);
    --paper-mute: oklch(48% 0.025 310); --rule: oklch(35% 0.03 310 / 0.2);
    --rule-soft: oklch(35% 0.03 310 / 0.1); --accent: var(--product-light, oklch(45% 0.15 350));
    --button-ink: oklch(98% 0.008 320); --shadow: oklch(30% 0.03 310 / 0.12);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: oklch(97% 0.01 320); --ink-2: oklch(94% 0.02 315);
  --paper: oklch(24% 0.028 310); --paper-dim: oklch(40% 0.03 310);
  --paper-mute: oklch(48% 0.025 310); --rule: oklch(35% 0.03 310 / 0.2);
  --rule-soft: oklch(35% 0.03 310 / 0.1); --accent: var(--product-light, oklch(45% 0.15 350));
  --button-ink: oklch(98% 0.008 320); --shadow: oklch(30% 0.03 310 / 0.12);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 17px/1.65 var(--sans); }
body::before { background: radial-gradient(ellipse at 85% 4%, var(--accent-soft), transparent 45%); }
body::after, .liminal-floor { display: none; }
main, header, footer, .web-furniture { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button[hidden] { display: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: var(--accent); color: var(--button-ink); }
img, video { max-width: 100%; height: auto; display: block; }
code { font: 0.83em/1.6 var(--mono); color: var(--accent); overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
p, h1, h2, figure { margin: 0; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 10px 18px; background: var(--accent); color: var(--button-ink); transform: translateY(-160%); }
.skip:focus { transform: none; }
.ticker { background: var(--ink-2); border-color: var(--rule); color: var(--paper-mute); height: 28px; font: 10px/28px var(--mono); }
.ticker em, .ticker b { color: var(--accent); }
.masthead { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--gutter); background: var(--chrome); backdrop-filter: blur(18px); border-bottom: 1px solid var(--rule); }
.masthead-mark { white-space: nowrap; display: flex; align-items: center; gap: 12px; color: var(--accent); font: 18px var(--serif); }
.masthead-name { font: 21px var(--serif); letter-spacing: 0.025em; color: var(--paper); }
.masthead-meta { display: flex; align-items: center; gap: 12px; color: var(--paper-mute); font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.masthead-nav { display: flex; gap: 20px; align-items: center; font-size: 14px; }
.masthead-nav a:hover { color: var(--accent); }
.dl-pill, .theme-toggle { background: transparent; color: var(--paper-dim); border: 1px solid var(--rule); border-radius: 999px; padding: 9px 16px; min-height: 42px; }
.theme-toggle { font-size: 12px; }
main { max-width: var(--content-max); margin: auto; padding: 0 var(--gutter); }
.cover { padding: clamp(48px, 7vw, 100px) 0; }
.cover-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.cover-copy { min-width: 0; }
.cover-icon { width: 64px; height: 64px; margin-bottom: 24px; border-radius: 15px; }
.cover-eyebrow, .section-num, .spec h2 { color: var(--accent); font: 11px/1.7 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.cover-title { font-size: clamp(48px, 5.4vw, 76px); line-height: 1.05; margin-top: 18px; letter-spacing: -0.035em; }
.cover-tagline { font: 28px/1.18 var(--serif); color: var(--paper); margin-top: 20px; text-wrap: balance; }
.cover-sub { max-width: 43ch; margin-top: 22px; color: var(--paper-dim); font-size: 17px; }
.cover-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; min-height: 48px; border: 1px solid var(--rule); border-radius: 8px; font-size: 14px; transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.btn-primary { background: var(--accent); color: var(--button-ink); border-color: var(--accent); }
.btn-ghost { color: var(--paper-dim); }
.btn:hover { border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.gh-mark { width: 18px; height: 18px; }
.mas-badge { display: inline-flex; }
.mas-badge img { height: 48px; width: auto; }
.cover-micro, .micro { margin-top: 22px; color: var(--paper-mute); font: 11px/1.8 var(--mono); }
.hero-visual { min-width: 0; }
.hero-visual img, .cover-plate video { border-radius: 12px; }
.shot img { width: 100%; border: 1px solid var(--rule); box-shadow: 0 24px 60px var(--shadow); }
.adra-scene, .refrax-scene { background: var(--art-ground); border-radius: 16px; border: 1px solid var(--rule); padding: 14px; box-shadow: 0 30px 80px var(--shadow); }
.hero-visual .adra-scene, .hero-visual .refrax-scene { width: 100%; margin: 0; }
.hero-visual .as-status, .hero-visual .rs-hint { color: var(--art-text); font-size: 10px; letter-spacing: 0; }
.hero-visual .as-status b { color: var(--product-dark); }
.hero-visual .refrax-scene { overflow: hidden; }
.cover-plate { position: relative; }
.cover-plate-caption { display: block; margin-top: 12px; font: 11px var(--mono); color: var(--paper-mute); }
.cover-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cover-shots figcaption { margin-top: 12px; color: var(--paper-mute); font: 11px/1.7 var(--mono); }
.screenshot-grid { display: grid; gap: 28px; align-items: center; margin: 36px auto 0; }
.screenshot-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; }
.screenshot-grid-pair { grid-template-columns: 1fr 1.2fr; }
.screenshot-grid img { width: 100%; }
.screenshot-grid figcaption { margin-top: 14px; color: var(--paper-mute); font: 11px/1.7 var(--mono); text-align: center; }
.refrax-shot { max-width: 960px; margin: 0 auto 70px; }
.refrax-shot img { border: 1px solid var(--rule); border-radius: 12px; }
.section { border-top: 1px solid var(--rule); padding: 64px 0; }
.section-title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; margin-top: 18px; text-wrap: balance; }
.section-lede { max-width: 65ch; margin-top: 24px; color: var(--paper-dim); }
.section-body { max-width: 65ch; margin-top: 20px; color: var(--paper-dim); }
.section-body p + p { margin-top: 16px; }
.section-body a, .specs a { text-decoration: underline; text-underline-offset: 3px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; list-style: none; margin: 32px 0 0; padding: 0; }
.specs li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule-soft); color: var(--paper-dim); }
.spec-key, .spec-item .k { color: var(--accent); font: 11px/2 var(--mono); flex-shrink: 0; }
.caveat { border-left: 2px solid var(--accent); background: var(--accent-soft); margin-top: 32px; padding: 22px 26px; color: var(--paper-dim); max-width: 80ch; font-size: 15px; }
.caveat b { display: block; color: var(--accent); font: 11px/1.8 var(--mono); letter-spacing: 0.08em; margin-bottom: 12px; }
.rx-slip { margin-top: 28px; padding: 24px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ink-2); }
.rx-slip code { display: block; color: var(--paper); line-height: 2.2; }
.plate-full { max-width: 860px; margin: 32px auto 0; }
.plate-full img, .plate img { width: 100%; border-radius: 12px; }
.plate-pair { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: center; margin: 32px auto; max-width: 900px; }
.spec { border-top: 1px solid var(--rule); padding: 48px 0; }
.spec h2 { margin-bottom: 28px; }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.spec-item { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--rule-soft); }
.spec-item .v { color: var(--paper-dim); }
.spec-item b { display: block; font-weight: 500; color: var(--paper); margin-bottom: 6px; }
.shot-tabs { display: flex; gap: 2px; width: fit-content; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; margin: 0 auto 18px; }
.shot-tabs button { background: transparent; color: var(--paper-mute); border: 0; border-radius: 999px; padding: 8px 16px; font-size: 12px; min-height: 36px; }
.shot-tabs [aria-selected="true"] { background: var(--ink-2); color: var(--paper); }
.shot figcaption { margin-top: 14px; color: var(--paper-mute); font: 11px/1.7 var(--mono); text-align: center; }
.final { border-top: 1px solid var(--rule); padding: 54px 0; }
.final h2 { font-size: 36px; line-height: 1.15; }
.final > p { margin-top: 14px; font: 12px/1.7 var(--mono); color: var(--paper-mute); }
.final > .btn { margin-top: 24px; }
.colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding: 28px var(--gutter); border-top: 1px solid var(--rule); font: 11px/1.8 var(--mono); color: var(--paper-mute); }
.colophon-center { font-family: var(--serif); color: var(--accent); }
.colophon a:hover { color: var(--accent); }
.web-furniture { color: var(--paper-mute); }
.badge88 { color: var(--art-text); border-color: var(--rule); }
.badge88:hover { color: var(--accent); }
.doc { max-width: 44em; margin: auto; padding: 64px 0; }
.doc .back, .doc .updated, .doc-foot { color: var(--paper-mute); font: 12px/1.7 var(--mono); }
.doc h1 { font-size: 48px; margin: 24px 0 12px; }
.doc-section { margin-top: 32px; color: var(--paper-dim); }
.doc-section h2 { font-size: 26px; color: var(--paper); margin-bottom: 12px; }
.doc-section p + p { margin-top: 12px; }
.doc-section a, .doc-foot a { text-decoration: underline; }
.doc-section ul { padding-left: 24px; }
.doc-foot { border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 40px; }
@media (max-width: 1000px) {
  .masthead-meta { display: none; }
  .cover-grid { gap: 32px; }
  .cover-actions { gap: 10px; }
  .btn { padding-inline: 16px; }
}
@media (max-width: 760px) {
  .masthead { padding: 12px 20px; gap: 12px; }
  .masthead-name { font-size: 19px; }
  .masthead-nav { gap: 10px; }
  .hide-mobile, .masthead-nav a:not(.dl-pill) { display: none; }
  .dl-pill, .theme-toggle { padding: 8px 12px; }
  .cover-grid { grid-template-columns: 1fr; gap: 36px; }
  .cover-title { font-size: clamp(46px, 10vw, 68px); }
  .cover-tagline { font-size: 27px; }
  .cover-sub { max-width: 50ch; }
  .cover-icon { width: 52px; height: 52px; margin-bottom: 20px; }
  .section { padding: 44px 0; }
  .specs, .spec-list { grid-template-columns: 1fr; }
  .cover-shots { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; gap: 28px; }
  .plate-pair, .screenshot-grid { grid-template-columns: 1fr; }
  .screenshot-grid-three { max-width: 340px; }
  .plate-menubar { max-width: 320px; margin-inline: auto; }
  .caveat { padding: 18px; }
  .colophon { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}