@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;
  --bg: #101413;
  --surface: #171d1b;
  --surface-2: #19221d;
  --text: #eef2ef;
  --muted: #9ba8a1;
  --border: #303a35;
  --border-strong: #3e4c44;
  --accent: #94efc3;
  --amber: #e6be76;
  --red: #f08c86;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
*, *::before, *::after { transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; background: var(--bg); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.wrap { width: min(1100px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: fixed; top: -100px; left: 20px; padding: 12px; background: var(--accent); color: #111; z-index: 2000; }
.skip:focus { top: 10px; }

.utility-bar { min-height: 28px; display: flex; align-items: center; background: #0b0f0d; border-bottom: 1px solid #25302a; color: #809087; font: 500 9.5px/1.3 'IBM Plex Mono', monospace; letter-spacing: .25px; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.status-indicator-group, .top-sol-item { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.top-sol-item strong { color: var(--text); font-weight: 500; }
.status-pill-secure { padding: 3px 7px; border: 1px solid #365244; border-radius: 3px; color: var(--accent); }
.security-strip { min-height: 30px; display: flex; align-items: center; border-bottom: 1px solid var(--border); background: #111814; color: #8d9c93; font-size: 10.5px; }
.security-inner { display: flex; align-items: center; justify-content: center; gap: 14px; }
.security-inner p { margin: 0; }
.security-inner code { color: var(--text); font-family: 'IBM Plex Mono', monospace; }
.security-label { color: var(--accent); font: 500 9px/1 'IBM Plex Mono', monospace; letter-spacing: 1px; }
.security-inner > span:last-child { color: var(--amber); }

/* App Layout & Sidebar (OTC reference) */
.app-layout { display: flex; min-height: 100vh; width: 100%; }
.sidebar { width: 240px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 50; transition: width .2s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1); }
.sidebar-brand { height: 56px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sidebar-brand .brand { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 8px; display: flex; flex-direction: column; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; }
.nav-item svg { flex-shrink: 0; color: var(--muted); transition: color .15s; }
.nav-item:hover { color: var(--text); background: rgba(128, 128, 128, .08); }
.nav-item:hover svg { color: var(--text); }
.nav-item.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.nav-item.active svg { color: var(--text); }
.nav-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-tag { font-size: 11px; color: var(--muted); }
.nav-section-title { margin: 22px 0 6px 10px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.nav-badge-soon { font-size: 9px; font-family: 'IBM Plex Mono', monospace; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); color: var(--muted); background: rgba(128, 128, 128, .06); white-space: nowrap; letter-spacing: .02em; }
.sidebar-footer { border-top: 1px solid var(--border); padding: 8px; flex-shrink: 0; }
.sidebar-collapse-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--muted); background: transparent; border: none; cursor: pointer; transition: background .15s, color .15s; }
.sidebar-collapse-btn:hover { background: rgba(128, 128, 128, .08); color: var(--text); }

/* Collapsed state */
.sidebar.collapsed { width: 58px; }
.sidebar.collapsed .sidebar-brand { padding: 0; justify-content: center; }
.sidebar.collapsed .brand-text { display: none; }
.sidebar.collapsed .brand img { margin-right: 0; }
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-tag,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-badge-soon,
.sidebar.collapsed .sidebar-collapse-btn .nav-text { display: none; }
.sidebar.collapsed .nav-item,
.sidebar.collapsed .sidebar-collapse-btn { justify-content: center; padding: 0; }

/* Main Viewport */
.main-viewport { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 30; }
.header-inner { height: 56px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header-left { display: flex; align-items: center; gap: 12px; }
.header-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.crumb-slash { opacity: .4; }
.header-crumb strong { color: var(--text); font-weight: 500; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.mobile-menu-btn:hover { background: rgba(128, 128, 128, .08); color: var(--text); }
.sidebar-backdrop { display: none; }

.brand { display: flex; align-items: center; font-size: 14px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.brand img { margin-right: 8px; }
.brand span { color: var(--accent); }
nav a:hover, .inline-link:hover { color: var(--accent); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 18px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; font-weight: 600; background: transparent; transition: background .15s, border-color .15s; }
.button:hover { background: #25332b; }
.button.primary { background: var(--accent); border-color: var(--accent); color: #10251a; }
.button.primary:hover { background: #b5f5d6; }
.button.small { padding: 8px 14px; }

.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding-block: 56px 52px; align-items: center; }
.eyebrow { margin: 0 0 18px; display: flex; align-items: center; gap: 10px; color: var(--accent); font: 500 10px/1.3 'IBM Plex Mono', monospace; letter-spacing: 1px; }
.line { height: 1px; width: 20px; background: var(--accent); }
h1 { margin: 0 0 18px; font-size: clamp(34px, 3.8vw, 50px); font-weight: 500; letter-spacing: -2.5px; line-height: 1.08; }
h1 em { color: var(--accent); font-style: normal; }
h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -1px; }
h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.lead { max-width: 440px; margin: 0 0 24px; color: #abb6af; font-size: 14px; line-height: 1.6; }
.actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.text-button { padding: 8px 0; border: 0; background: none; color: #dde5df; font-size: 13px; text-align: left; }
.text-button:hover { color: var(--accent); }
.text-button span { margin-left: 6px; }
.hero-notes { display: flex; gap: 16px; margin-top: 20px; color: var(--muted); font-size: 11px; }
.hero-notes span::before { content: '✓'; margin-right: 6px; color: var(--accent); }
.report-preview { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 6px; background: #19211d; box-shadow: 6px 6px 0 #141b17; }
.report-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 23px; border-bottom: 1px solid var(--border); }
.mono { font: 400 10px/1.3 'IBM Plex Mono', monospace; letter-spacing: .7px; }
.example { padding: 4px 6px; border: 1px solid #455449; color: #abb6af; font: 400 9px/1.3 'IBM Plex Mono', monospace; letter-spacing: 1px; }
.token-heading { display: flex; align-items: center; gap: 13px; padding: 25px 24px; }
.token-icon { height: 41px; width: 41px; display: grid; place-items: center; border-radius: 50%; background: #34483c; color: var(--accent); font-size: 23px; }
.token-heading h2 { font-size: 17px; letter-spacing: -.4px; }
.token-heading h2 span { margin-left: 6px; color: var(--muted); font-size: 10px; font-weight: 400; }
.token-heading p { margin: 6px 0 0; color: var(--muted); }
.network-mark { margin-left: auto; color: #91a79a; font-size: 32px; }
.report-summary { display: flex; align-items: center; gap: 12px; margin: 0 24px 10px; padding: 14px; border-left: 2px solid var(--accent); background: #25392e; }
.shield { color: var(--accent); font-size: 30px; }
.report-summary strong { font-size: 13px; font-weight: 500; }
.report-summary p { margin: 4px 0 0; color: #afc6b8; font-size: 11px; }
.signal { display: flex; justify-content: space-between; margin: 0 24px; padding: 13px 0; border-bottom: 1px solid #2c3b31; color: #c1cbc5; font-size: 12px; }
.signal b { display: inline-block; width: 14px; margin-left: 12px; }
.positive { color: var(--accent) !important; }
.negative { color: var(--red) !important; }
.warning { color: var(--amber) !important; }
.concentration { display: flex; gap: 4px; margin: 16px 24px; }
.concentration i { height: 7px; flex: 1; background: #3c4c41; }
.concentration i:nth-child(-n+5) { background: #cdaa6a; }
.report-bottom { display: flex; justify-content: space-between; gap: 10px; padding: 3px 24px 20px; color: var(--muted); font-size: 10px; }

.principles { border-block: 1px solid var(--border); }
.principles .wrap { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.principles span { color: #b7c4bb; font: 400 9.5px/1.3 'IBM Plex Mono', monospace; letter-spacing: 1px; }
.principles p { color: var(--muted); font-size: 12px; }
.principles b { margin-inline: 14px; color: #597363; font-weight: 400; }
.principles a { color: var(--accent); font-size: 11px; }

.section { padding-block: 52px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 26px; }
.section .eyebrow, .installation .eyebrow, .compatibility-section .eyebrow { margin-bottom: 14px; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.spec-row { display: grid; grid-template-columns: 35px 1fr 220px 30px; gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid var(--border); }
.spec-number { align-self: start; margin-top: 3px; color: #738a7b; font: 400 11px/1.3 'IBM Plex Mono', monospace; }
.spec-row p { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.spec-tags { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; border-left: 1px solid var(--border); color: #bccbc1; font-size: 11px; }
.spec-icon { color: #82a58e; font-size: 24px; }
.section-footnote { margin-bottom: 0; padding-top: 18px; border-top: 1px solid var(--border); color: #84948a; font-size: 11px; }

.installation { padding-block: 48px; border-block: 1px solid var(--border); background: #19221d; }
.install-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.small-lead { margin-top: 16px; font-size: 13.5px; }
.browser-note { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.desktop-symbol { color: #a6baad; font-size: 22px; }
.browser-note strong { font-size: 12px; font-weight: 600; }
.browser-note p { margin: 4px 0; color: var(--muted); font-size: 11px; }
.inline-link { color: var(--accent); font-size: 11px; }
.install-panel { overflow: hidden; border: 1px solid #3a4940; border-radius: 5px; background: #111914; }
.install-tabs { display: flex; justify-content: space-between; gap: 24px; padding: 14px 20px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.install-tabs span:first-child { color: var(--accent); }
.install-content { padding: 20px; }
.step { display: flex; gap: 14px; margin-bottom: 20px; }
.step:last-child { margin: 0; }
.step > span { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #475b4e; border-radius: 50%; color: #b9cbbf; font: 400 10px/1 'IBM Plex Mono', monospace; }
.step > div { min-width: 0; flex: 1; }
.step h3 { margin: 1px 0 8px; font-size: 13px; }
.step p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
kbd { padding: 2px 5px; border: 1px solid #3b4c40; border-radius: 3px; font-family: inherit; font-size: 10px; }
.mac { display: block; margin-top: 6px; }
.bookmarklet { display: flex; align-items: center; gap: 9px; padding: 12px 12px; border: 1px dashed #658873; border-radius: 4px; background: #233a2b; color: var(--accent); cursor: grab; font-size: 13px; transition: background .15s; }
.bookmarklet:hover { background: #2a4333; }
.drag-hint { margin-left: auto; color: #a2b8a9; font-size: 9.5px; }
.install-footer { display: flex; justify-content: space-between; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; }
.install-footer code { color: var(--accent); }

.architecture, .faq { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; }
.architecture-list article { display: flex; gap: 20px; margin-bottom: 18px; padding: 0 0 18px; border-bottom: 1px solid var(--border); }
.architecture-list article > span { padding-top: 3px; color: var(--accent); font: 400 11px/1.3 'IBM Plex Mono', monospace; }
.architecture-list h3 { font-size: 14px; }
.architecture-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.compatibility-section { padding-block: 52px; border-block: 1px solid var(--border); background: #121815; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 5px; }
.matrix-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.matrix-table th { padding: 11px 16px; border-bottom: 1px solid var(--border); background: #171d1b; color: var(--muted); text-align: left; font: 500 9.5px/1.3 'IBM Plex Mono', monospace; letter-spacing: .8px; text-transform: uppercase; }
.matrix-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.matrix-table tbody tr:last-child td { border-bottom: 0; }
.matrix-table strong { color: var(--text); font-weight: 500; }
.status-badge-supported { color: var(--accent); white-space: nowrap; }

.faq { border-top: 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border: 0; background: none; color: var(--text); text-align: left; font-size: 13px; font-weight: 500; }
.faq-arrow { color: var(--muted); font-size: 16px; transition: transform .15s; }
.faq-answer { display: none; padding: 0 20px 16px 0; }
.faq-answer p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.faq-answer code { color: var(--accent); }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-arrow { transform: rotate(45deg); color: var(--accent); }

.site-footer { min-height: 72px; display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; }
.site-footer .brand { font-size: 12px; }
.site-footer > span { margin-left: auto; }

.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .16s; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.74); backdrop-filter: blur(4px); }
.axiom-hud-popup { position: relative; z-index: 1; width: min(460px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid #46564a; border-radius: 6px; background: var(--surface); box-shadow: 0 16px 48px #000a; }
.popup-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.popup-brand { display: flex; align-items: center; gap: 10px; }
.popup-name { font-size: 13px; font-weight: 600; }
.popup-version { margin-left: 5px; padding: 2px 5px; border: 1px solid #46564a; color: var(--accent); font: 500 8.5px/1.2 'IBM Plex Mono', monospace; }
.popup-target { margin-top: 2px; color: var(--muted); font: 400 9.5px/1.2 'IBM Plex Mono', monospace; }
.popup-close-btn { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; }
.popup-body { padding: 22px; }
.popup-body .eyebrow { margin-bottom: 10px; font-size: 9.5px; }
.popup-body h2 { font-size: 22px; }
.popup-intro { margin: 8px 0 16px; color: var(--muted); font-size: 12px; }
.popup-filter-block { padding: 14px 0; border-top: 1px solid var(--border); }
.pf-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pf-title-row { display: flex; align-items: center; gap: 7px; }
.pf-title-row h4 { margin: 0; font-size: 13px; font-weight: 600; }
.pf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pf-dot.amber { background: var(--amber); }
.pf-dot.cyan { background: #82b9aa; }
.pf-desc { margin: 5px 0 10px 14px; color: var(--muted); font-size: 11px; }
.sc-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.sc-label strong { color: var(--accent); }
.hud-range { width: 100%; margin-top: 10px; accent-color: var(--accent); }
.switch { position: relative; width: 34px; height: 18px; flex: 0 0 34px; }
.switch input { position: absolute; opacity: 0; }
.slider { position: absolute; inset: 0; border-radius: 18px; background: #344039; cursor: pointer; }
.slider::before { content: ''; position: absolute; width: 12px; height: 12px; left: 3px; top: 3px; border-radius: 50%; background: #dbe6df; transition: transform .16s; }
.switch input:checked + .slider { background: #4d8d6b; }
.switch input:checked + .slider::before { transform: translateX(16px); }
.checkbox-row { display: grid; gap: 6px; margin-left: 14px; color: var(--muted); font-size: 11px; }
.checkbox-row label { display: flex; align-items: center; gap: 7px; }
.checkbox-row input { accent-color: var(--accent); }
.popup-footer { padding: 0 22px 22px; }
.btn-block { width: 100%; }
.toast { position: fixed; z-index: 2000; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: 90vw; padding: 10px 18px; border-radius: 5px; background: var(--accent); color: #13291c; opacity: 0; pointer-events: none; font-size: 13px; transition: opacity .16s, transform .16s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 1500px) { .hero { padding-block: 72px; } }
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 48px); }
  .hero { gap: 28px; }
  h1 { font-size: 38px; }
  .hero-notes { gap: 10px; font-size: 10px; }
  .actions { gap: 10px; }
  .text-button { font-size: 12px; }
  .spec-row { grid-template-columns: 28px 1fr 180px 20px; gap: 16px; }
  .install-grid, .architecture, .faq { gap: 32px; }
  .drag-hint { display: none; }
}

@media (max-width: 900px) {
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); box-shadow: 0 0 40px rgba(0, 0, 0, .5); }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidebar-backdrop.active { opacity: 1; pointer-events: auto; }
  .mobile-menu-btn { display: inline-flex; }
  .header-inner { padding: 0 16px; }
  .sidebar.collapsed { width: 240px; }
  .sidebar.collapsed .sidebar-brand { padding: 0 16px; justify-content: flex-start; }
  .sidebar.collapsed .brand-text { display: inline; }
  .sidebar.collapsed .brand img { margin-right: 8px; }
  .sidebar.collapsed .nav-text,
  .sidebar.collapsed .nav-tag,
  .sidebar.collapsed .nav-section-title,
  .sidebar.collapsed .nav-badge-soon,
  .sidebar.collapsed .sidebar-collapse-btn .nav-text { display: inline; }
  .sidebar.collapsed .nav-item,
  .sidebar.collapsed .sidebar-collapse-btn { justify-content: flex-start; padding: 0 10px; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .utility-inner { min-height: 36px; flex-wrap: wrap; gap: 5px 14px; padding-block: 6px; }
  .status-pill-secure { display: none; }
  .security-strip { display: none; }
  .header { height: 50px; gap: 10px; }
  .brand { font-size: 13px; }
  .brand img { width: 24px; height: 24px; margin-right: 6px; }
  nav { display: none; }
  .button.small { padding: 7px 10px; gap: 10px; font-size: 11px; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding-block: 36px; }
  .hero-copy { max-width: 520px; }
  h1 { font-size: 38px; letter-spacing: -2px; }
  .lead { font-size: 13px; }
  .hero-notes { gap: 14px; font-size: 10px; }
  .report-preview { width: 100%; max-width: 480px; box-shadow: 4px 4px 0 #141b17; }
  .report-top { padding: 12px 18px; }
  .principles .wrap { flex-wrap: wrap; gap: 10px; padding-block: 16px; }
  .principles .wrap > span { width: 100%; }
  .principles p { margin: 0; font-size: 11px; }
  .principles a { display: none; }
  .principles b { margin-inline: 6px; }
  .section, .compatibility-section { padding-block: 36px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 16px; }
  .desktop { display: none; }
  h2 { font-size: 24px; }
  .spec-row { grid-template-columns: 22px 1fr; gap: 12px; padding-block: 18px; }
  .spec-tags { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 12px; padding: 0; border: 0; font-size: 10px; }
  .spec-icon { display: none; }
  .spec-row h3 { font-size: 14px; }
  .installation { padding-block: 36px; }
  .install-grid, .architecture, .faq { grid-template-columns: 1fr; gap: 24px; }
  .install-grid .small-lead { margin-bottom: 16px; }
  .browser-note { margin: 16px 0; }
  .install-footer { flex-direction: column; }
  .architecture-list article { margin-bottom: 16px; }
  .faq h2 br { display: none; }
  .site-footer { flex-wrap: wrap; gap: 10px; padding-block: 20px; }
  .site-footer p { width: 100%; order: 3; margin: 0; }
  .site-footer > span { margin-left: auto; font-size: 9px; }
}

@media (max-width: 480px) {
  .top-sol-item { display: none; }
  h1 { font-size: 32px; letter-spacing: -1.5px; }
  .hero-notes { flex-wrap: wrap; }
  .report-preview { box-shadow: none; }
  .token-heading, .report-summary, .signal, .concentration { margin-inline: 16px; }
  .token-heading { padding-inline: 0; }
  .report-bottom { padding-inline: 16px; }
  .install-content, .popup-body { padding: 21px; }
  .bookmarklet { flex-wrap: wrap; }
  .table-wrap { margin-right: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Theme palette pass: warm light by default, original dark palette by system preference. */
:root {
  color-scheme: light;
  --bg: #f7f6f2;
  --surface: #ffffff;
  --surface-2: #f0efe9;
  --text: #191a17;
  --muted: #62665f;
  --border: #deddd6;
  --border-strong: #c8c7bf;
  --accent: #688715;
  --amber: #986813;
  --red: #b53f3a;
}

body { background: var(--bg); }
.utility-bar { background: #1b1c19; border-bottom-color: #34352f; color: #b9bcb5; }
.status-dot { background: #8fac2a; }
.top-sol-item strong { color: #ffffff; }
.status-pill-secure { border-color: #667f22; color: #d6ea91; }
.security-strip { border-bottom-color: var(--border); background: #ffffff; color: #686b64; }
.security-inner code { color: #252620; }
.security-label { color: #627d18; }
.security-inner > span:last-child { color: #78601d; }
.site-header { border-bottom-color: var(--border); background: #ffffff; }
nav { color: #60635d; }
.button { border-color: #c9c8c1; background: #ffffff; color: #1b1c19; }
.button:hover { border-color: #aaa9a1; background: #efeee8; }
.button.primary { border-color: #1b1c19; background: #1b1c19; color: #ffffff; }
.button.primary:hover { border-color: #34352f; background: #34352f; }
.lead { color: #5e625b; }
.text-button { color: #343630; }
.hero-notes { color: #666a62; }
.report-preview { border-color: #30312d; background: #1b1c19; color: #f7f7f3; box-shadow: 6px 6px 0 #e4e2da; }
.report-top { border-bottom-color: #383934; }
.example { border-color: #54564f; color: #bfc2b9; }
.token-icon { background: #343a2a; color: #d5ec86; }
.token-heading h2 span, .token-heading p, .report-bottom { color: #aeb2a9; }
.network-mark { color: #aeb99b; }
.report-summary { border-left-color: #b5d858; background: #303722; }
.shield { color: #c9e877; }
.report-summary p { color: #c7cdbb; }
.signal { border-bottom-color: #383a34; color: #e1e3dc; }
.report-preview .positive { color: #c6e978 !important; }
.report-preview .warning { color: #e5c56f !important; }
.concentration i { background: #44463f; }
.concentration i:nth-child(-n+5) { background: #c9d77d; }
.principles { border-color: var(--border); background: #ffffff; }
.principles span { color: #555a51; }
.principles p { color: #666a62; }
.principles b { color: #a8aaa3; }
.principles a, .inline-link { color: #587610; }
.section-heading > p, .spec-row p, .architecture-list p, .faq-answer p { color: #62665f; }
.spec-row, .section-footnote, .architecture-list article, .faq-item, .site-footer { border-color: var(--border); }
.spec-number { color: #7a7e75; }
.spec-tags { border-left-color: var(--border); color: #50544d; }
.spec-icon { color: #779129; }
.section-footnote { color: #6d7169; }
.installation { border-color: #dce2c6; background: #f3f6e8; }
.desktop-symbol { color: #6a714f; }
.browser-note p, .step p, .install-tabs, .install-footer { color: #686c64; }
.install-panel { border-color: #d5d7ca; background: #ffffff; box-shadow: 0 1px 2px rgba(28, 30, 24, .04); }
.install-tabs { border-bottom-color: var(--border); }
.step > span { border-color: #c7cabe; color: #555a51; background: #f7f7f3; }
kbd { border-color: #cdccc5; background: #f2f1ec; color: #272822; }
.bookmarklet { border-color: #8ea648; background: #edf4d8; color: #425e0a; }
.bookmarklet:hover { background: #e3edc4; }
.drag-hint { color: #68724e; }
.install-footer { border-top-color: var(--border); }
.install-footer code { color: #4e6b0d; }
.compatibility-section { border-color: var(--border); background: #f0efeb; }
.table-wrap { border-color: var(--border); background: #ffffff; }
.matrix-table th { border-bottom-color: var(--border); background: #eeede8; color: #5e625a; }
.matrix-table td { border-bottom-color: var(--border); color: #5d6159; background: #ffffff; }
.matrix-table strong { color: #1c1d19; }
.status-badge-supported { color: #5c7915; }
.faq-question { color: #1d1e1a; }
.faq-arrow { color: #6f736b; }
.site-footer { color: #666a62; }
.modal-backdrop { background: rgba(27, 28, 25, .52); }
.axiom-hud-popup { border-color: #d1d0c9; background: #ffffff; color: #1b1c19; box-shadow: 0 25px 80px rgba(31, 32, 28, .2); }
.popup-header, .popup-filter-block { border-color: var(--border); }
.popup-version { border-color: #9aab68; color: #587610; background: #f0f5df; }
.popup-target, .popup-intro, .pf-desc, .sc-label, .checkbox-row { color: #666a62; }
.popup-close-btn { color: #696d65; }
.sc-label strong { color: #56720f; }
.hud-range { accent-color: #718f1c; }
.pf-dot { background: #7f9d29; }
.pf-dot.amber { background: #b9872d; }
.pf-dot.cyan { background: #588f83; }
.slider { background: #d8d8d1; }
.slider::before { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.switch input:checked + .slider { background: #78942a; }
.checkbox-row input { accent-color: #718f1c; }
.toast { background: #1b1c19; color: #ffffff; }

@media (max-width: 760px) {
  .report-preview { box-shadow: 4px 4px 0 #e4e2da; }
}

html.dark {
  color-scheme: dark;
  --bg: #101413;
  --surface: #171d1b;
  --surface-2: #19221d;
  --text: #eef2ef;
  --muted: #9ba8a1;
  --border: #303a35;
  --border-strong: #3e4c44;
  --accent: #94efc3;
  --amber: #e6be76;
  --red: #f08c86;
}
html.dark body { background: var(--bg); }
html.dark .utility-bar { background: #0b0f0d; border-bottom-color: #25302a; color: #809087; }
html.dark .status-dot { background: var(--accent); }
html.dark .top-sol-item strong { color: var(--text); }
html.dark .status-pill-secure { border-color: #365244; color: var(--accent); }
html.dark .security-strip { border-bottom-color: var(--border); background: #111814; color: #8d9c93; }
html.dark .security-inner code { color: var(--text); }
html.dark .security-label { color: var(--accent); }
html.dark .security-inner > span:last-child { color: var(--amber); }
html.dark .site-header { border-bottom-color: var(--border); background: var(--bg); }
html.dark nav { color: #b5beb9; }
html.dark .button { border-color: var(--border); background: transparent; color: var(--text); }
html.dark .button:hover { border-color: var(--border); background: #25332b; }
html.dark .button.primary { border-color: var(--accent); background: var(--accent); color: #10251a; }
html.dark .button.primary:hover { border-color: #b5f5d6; background: #b5f5d6; }
html.dark .lead { color: #abb6af; }
html.dark .text-button { color: #dde5df; }
html.dark .hero-notes { color: var(--muted); }
html.dark .report-preview { border-color: var(--border-strong); background: #19211d; color: var(--text); box-shadow: 6px 6px 0 #141b17; }
html.dark .report-top { border-bottom-color: var(--border); }
html.dark .example { border-color: #455449; color: #abb6af; }
html.dark .token-icon { background: #34483c; color: var(--accent); }
html.dark .token-heading h2 span, html.dark .token-heading p, html.dark .report-bottom { color: var(--muted); }
html.dark .network-mark { color: #91a79a; }
html.dark .report-summary { border-left-color: var(--accent); background: #25392e; }
html.dark .shield { color: var(--accent); }
html.dark .report-summary p { color: #afc6b8; }
html.dark .signal { border-bottom-color: #2c3b31; color: #c1cbc5; }
html.dark .report-preview .positive { color: var(--accent) !important; }
html.dark .report-preview .warning { color: var(--amber) !important; }
html.dark .concentration i { background: #3c4c41; }
html.dark .concentration i:nth-child(-n+5) { background: #cdaa6a; }
html.dark .principles { border-color: var(--border); background: transparent; }
html.dark .principles span { color: #b7c4bb; }
html.dark .principles p { color: var(--muted); }
html.dark .principles b { color: #597363; }
html.dark .principles a, html.dark .inline-link { color: var(--accent); }
html.dark .section-heading > p, html.dark .spec-row p, html.dark .architecture-list p, html.dark .faq-answer p { color: var(--muted); }
html.dark .spec-row, html.dark .section-footnote, html.dark .architecture-list article, html.dark .faq-item, html.dark .site-footer { border-color: var(--border); }
html.dark .spec-number { color: #738a7b; }
html.dark .spec-tags { border-left-color: var(--border); color: #bccbc1; }
html.dark .spec-icon { color: #82a58e; }
html.dark .section-footnote { color: #84948a; }
html.dark .installation { border-color: var(--border); background: #19221d; }
html.dark .desktop-symbol { color: #a6baad; }
html.dark .browser-note p, html.dark .step p, html.dark .install-tabs, html.dark .install-footer { color: var(--muted); }
html.dark .install-panel { border-color: #3a4940; background: #111914; box-shadow: none; }
html.dark .install-tabs { border-bottom-color: var(--border); }
html.dark .step > span { border-color: #475b4e; color: #b9cbbf; background: transparent; }
html.dark kbd { border-color: #3b4c40; background: transparent; color: var(--text); }
html.dark .bookmarklet { border-color: #658873; background: #233a2b; color: var(--accent); }
html.dark .bookmarklet:hover { background: #2a4333; }
html.dark .drag-hint { color: #a2b8a9; }
html.dark .install-footer { border-top-color: var(--border); }
html.dark .install-footer code { color: var(--accent); }
html.dark .compatibility-section { border-color: var(--border); background: #121815; }
html.dark .table-wrap { border-color: var(--border); background: transparent; }
html.dark .matrix-table th { border-bottom-color: var(--border); background: #171d1b; color: var(--muted); }
html.dark .matrix-table td { border-bottom-color: var(--border); color: var(--muted); background: transparent; }
html.dark .matrix-table strong { color: var(--text); }
html.dark .status-badge-supported { color: var(--accent); }
html.dark .faq-question { color: var(--text); }
html.dark .faq-arrow { color: var(--muted); }
html.dark .site-footer { color: var(--muted); }
html.dark .modal-backdrop { background: rgba(0, 0, 0, .74); }
html.dark .axiom-hud-popup { border-color: #46564a; background: var(--surface); color: var(--text); box-shadow: 0 25px 80px #000a; }
html.dark .popup-header, html.dark .popup-filter-block { border-color: var(--border); }
html.dark .popup-version { border-color: #46564a; color: var(--accent); background: transparent; }
html.dark .popup-target, html.dark .popup-intro, html.dark .pf-desc, html.dark .sc-label, html.dark .checkbox-row { color: var(--muted); }
html.dark .popup-close-btn { color: var(--muted); }
html.dark .sc-label strong { color: var(--accent); }
html.dark .hud-range { accent-color: var(--accent); }
html.dark .pf-dot { background: var(--accent); }
html.dark .pf-dot.amber { background: var(--amber); }
html.dark .pf-dot.cyan { background: #82b9aa; }
html.dark .slider { background: #344039; }
html.dark .slider::before { background: #dbe6df; box-shadow: none; }
html.dark .switch input:checked + .slider { background: #4d8d6b; }
html.dark .checkbox-row input { accent-color: var(--accent); }
html.dark .toast { background: var(--accent); color: #13291c; }

/* Theme toggle button */
#theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
#theme-toggle:hover { border-color: var(--border-strong); background: rgba(128,128,128,.08); color: var(--text); }

@media (max-width: 760px) {
  html.dark .report-preview { box-shadow: 4px 4px 0 #141b17; }
}