:root {
  color-scheme: dark;
  --bg: #0d1110;
  --surface: #141a18;
  --surface-2: #1b2420;
  --ink: #f4f5ee;
  --muted: #aab4ac;
  --line: #334039;
  --accent: #c9e56d;
  --accent-ink: #10150c;
  --red: #ff8879;
  --amber: #f0cc78;
  --blue: #9cc6d4;
  --radius-card: 20px;
  --radius-control: 10px;
  --shadow: 0 28px 70px rgb(0 0 0 / 24%);
}

[data-theme="light"] { color-scheme: light; --bg: #edf0ea; --surface: #f9faf6; --surface-2: #e1e8df; --ink: #121815; --muted: #5b6960; --line: #c4cec5; --accent: #56750c; --accent-ink: #f6ffe9; --red: #9e3029; --amber: #85630e; --blue: #2e6677; --shadow: 0 24px 60px rgb(39 58 44 / 12%); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Trebuchet MS", "Segoe UI", sans-serif; line-height: 1.5; }
body::before { position: fixed; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 0 48%, rgb(201 229 109 / 3%) 48% 48.2%, transparent 48.2% 100%); content: ""; pointer-events: none; }
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.page-shell { width: min(100% - 40px, 1240px); margin: 0 auto; }
.site-nav { display: flex; align-items: center; justify-content: space-between; min-height: 84px; border-bottom: 1px solid var(--line); }
.brand-wordmark { font-size: 1.05rem; font-weight: 800; letter-spacing: -.04em; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: .78rem; color: var(--muted); }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); background: var(--surface); }
.theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; margin-left: 20px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.theme-toggle:hover { border-color: var(--accent); background: var(--surface); transform: rotate(12deg); }
.theme-glyph { font-size: 1.25rem; line-height: 1; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(38px, 8vw, 112px); }
.hero { align-items: end; min-height: 690px; padding: 106px 0 96px; }
.hero-copy { max-width: 650px; }
.eyebrow { margin: 0 0 18px; color: var(--accent); font: 700 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.06em; line-height: .96; }
h1 { max-width: 670px; margin-bottom: 28px; font-size: clamp(3.5rem, 8vw, 7.3rem); }
h2 { max-width: 620px; margin-bottom: 20px; font-size: clamp(2.5rem, 5vw, 5rem); }
.hero-lede { max-width: 440px; margin-bottom: 32px; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.hero-actions, .inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius-control); font-size: .88rem; font-weight: 700; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-3px); }
.button:active, .console-button:active, .verdict-row:active { transform: translateY(1px) scale(.985); }
.button-primary { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.button-secondary { color: var(--ink); background: transparent; }
.arrow { display: inline-block; font-size: 1.45em; font-weight: 400; line-height: .6; transition: transform .2s ease; }
.button:hover .arrow, .text-link:hover .arrow, .compat-card:hover .arrow, .verdict-row:hover .arrow { transform: translate(3px, -3px); }
.arrow-small { font-size: 1.2em; }
.decision-console { align-self: center; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); }
.console-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.console-title, .result-label { color: var(--muted); font: 700 .65rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em; text-transform: uppercase; }
.console-state { color: var(--accent); font: .68rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.showcase-copy { padding: 26px 0 20px; }.showcase-copy strong { display: block; margin: 8px 0 8px; font-size: 1.45rem; letter-spacing: -.04em; }.showcase-copy p { margin: 0; color: var(--muted); font-size: .86rem; }
.showcase-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.showcase-step { position: relative; display: grid; gap: 6px; padding: 10px 0 6px; color: var(--muted); }.showcase-step::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; border-radius: 99px; background: var(--line); content: ""; }.showcase-step.is-active::before { background: var(--accent); animation: progress-pulse 1.2s ease-in-out infinite alternate; }.showcase-step span { font: .62rem ui-monospace, SFMono-Regular, Menlo, monospace; }.showcase-step b { color: var(--ink); font-size: .78rem; }.showcase-step small { min-height: 32px; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.decision-console label { display: block; margin: 22px 0 9px; font-weight: 700; }
textarea { width: 100%; resize: vertical; min-height: 115px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); background: var(--bg); line-height: 1.55; }
textarea:focus { border-color: var(--accent); }
.example-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 13px 0 16px; color: var(--muted); font-size: .72rem; }
.example-row button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: transparent; cursor: pointer; }
.example-row button:hover { border-color: var(--accent); color: var(--ink); }
.console-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; border: 1px solid var(--accent); border-radius: var(--radius-control); color: var(--accent-ink); background: var(--accent); font-weight: 800; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.console-button:hover { filter: brightness(1.08); }
.console-result { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); animation: result-in .45s ease both; }
.console-result.is-updating { animation: result-in .24s ease both; }
.console-result strong { display: block; margin: 8px 0 8px; font-size: 1.5rem; letter-spacing: -.04em; }
.console-result p { margin-bottom: 0; color: var(--muted); font-size: .86rem; }
.result-divider { height: 1px; margin: 18px 0 13px; background: var(--line); }
.result-meta { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .76rem; }
.result-meta b { color: var(--ink); text-align: right; }
.signal-band { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signal-band p { margin: 0; color: var(--muted); font-size: .9rem; }
.signal-band strong { color: var(--accent); font-size: clamp(1.05rem, 2vw, 1.4rem); }
.proof-section, .filter-section, .install-section { padding: 138px 0; }
.section-intro { max-width: 560px; }
.section-intro p:not(.eyebrow) { max-width: 500px; color: var(--muted); }
.verdict-list { display: flex; flex-direction: column; gap: 0; align-self: center; }
.verdict-row { display: grid; grid-template-columns: 100px minmax(120px, 1fr) minmax(110px, 1fr) 28px; align-items: center; gap: 14px; width: 100%; padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; transition: border-color .2s ease, padding .2s ease; }
.verdict-row:first-child { border-top: 1px solid var(--line); }
.verdict-row:hover { padding-left: 9px; border-color: var(--accent); }
.verdict-name { font-weight: 800; }
.verdict-row small { color: var(--muted); font-size: .75rem; }
.verdict-tag { width: max-content; padding: 4px 7px; border-radius: 5px; font: 700 .63rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.reject { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }.validate { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }.evidence { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.row-arrow, .card-arrow { color: var(--accent); }
.filter-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 10px; }
.filter-chip { padding: 15px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--muted); background: var(--surface); font-size: .8rem; text-align: center; transition: transform .2s ease, border-color .2s ease, color .2s ease; }
.filter-chip:hover { transform: translateY(-4px); border-color: var(--accent); color: var(--ink); }.accent-chip { border-color: var(--accent); color: var(--accent); }
.compatibility-section { padding: 138px 0; border-top: 1px solid var(--line); }
.narrow-intro { margin-bottom: 52px; }
.compat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.compat-card { display: grid; grid-template-columns: 32px 1fr 24px; grid-template-rows: auto auto; gap: 14px 12px; min-height: 190px; padding: 24px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); transition: background .25s ease, transform .25s ease; }
.compat-card:hover { z-index: 1; background: var(--surface-2); transform: translateY(-6px); }
.compat-card img { width: 25px; height: 25px; object-fit: contain; filter: brightness(0) invert(1); }.compat-card span { display: flex; flex-direction: column; gap: 4px; }.compat-card b { font-size: .95rem; }.compat-card small { color: var(--muted); font-size: .7rem; }.compat-card code { grid-column: 1 / -1; align-self: end; color: var(--accent); font: .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }.card-arrow { grid-column: 3; grid-row: 1; justify-self: end; }
[data-theme="light"] .compat-card img { filter: none; }
.install-section { align-items: start; }.inline-actions { margin-top: 30px; }.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); font-weight: 700; font-size: .82rem; }.file-tree { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: var(--shadow); }.tree-line { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); color: var(--muted); font-size: .77rem; }.tree-root { padding-top: 0; color: var(--ink); font-weight: 700; }.tree-line small { color: var(--muted); font: .68rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }.closing-section { padding: 90px 0 130px; border-top: 1px solid var(--line); }.closing-section h2 { max-width: 700px; margin-bottom: 30px; }.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }.site-footer a:hover { color: var(--accent); }
.reveal { opacity: 0; transform: translateY(20px); animation: reveal-in .65s cubic-bezier(.2,.75,.2,1) forwards; }.hero-copy { animation-delay: .05s; }.decision-console { animation-delay: .14s; }.reveal:nth-child(2) { animation-delay: .12s; }
@keyframes reveal-in { to { opacity: 1; transform: translateY(0); } } @keyframes result-in { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes result-out { to { opacity: .2; transform: translateY(-3px); } } @keyframes progress-pulse { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 900px) { .page-shell { width: min(100% - 28px, 720px); }.site-nav { min-height: 70px; }.nav-links { gap: 14px; }.nav-links > a:not(.nav-button) { display: none; }.section-grid { grid-template-columns: 1fr; gap: 48px; }.hero { min-height: auto; padding: 82px 0 78px; }.hero-copy { max-width: 670px; }.compat-grid { grid-template-columns: repeat(2, 1fr); }.proof-section, .filter-section, .install-section, .compatibility-section { padding: 92px 0; } }
@media (max-width: 560px) { .page-shell { width: min(100% - 24px, 440px); }.brand-wordmark { font-size: .95rem; }.theme-toggle { margin-left: 10px; }.nav-button { padding: 8px 10px; font-size: .72rem; }.hero { padding-top: 62px; }.hero h1 { font-size: clamp(3rem, 15vw, 4.6rem); }.hero-actions .button { width: 100%; justify-content: space-between; }.decision-console { padding: 18px; }.signal-band { display: block; }.signal-band strong { display: block; margin-top: 8px; }.verdict-row { grid-template-columns: 1fr 28px; gap: 9px; padding: 18px 0; }.verdict-tag { grid-column: 1; grid-row: 1; }.verdict-name { grid-column: 1; grid-row: 2; }.verdict-row small { grid-column: 1; grid-row: 3; }.row-arrow { grid-column: 2; grid-row: 1 / span 3; }.filter-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }.compat-grid { grid-template-columns: 1fr; }.compat-card { min-height: 150px; }.tree-line small { max-width: 110px; }.site-footer { display: block; }.site-footer a { display: block; margin-top: 8px; } }