:root {
  color-scheme: dark;
  --bg: #0d0d0d; --glow: rgba(255,255,255,.11); --surface: rgba(29,29,29,.72); --solid: #1d1d1d; --raised: rgba(32,32,32,.66); --input: rgba(12,12,12,.66);
  --text: #fff; --muted: #b0b0b0; --faint: #818181; --line: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.24);
  --accent: #c2410c; --accent-strong: #fb923c; --accent-soft: rgba(194,65,12,.17); --focus: #f97316;
  --shadow: 26px 26px 34px rgba(0,0,0,.66), inset -10px -10px 20px rgba(0,0,0,.8), inset 0 16px 32px rgba(255,255,255,.14);
  --control-shadow: 6px 6px 12px rgba(0,0,0,.62), inset -4px -4px 8px rgba(0,0,0,.76), inset 0 7px 14px rgba(255,255,255,.11); --sidebar: 272px;
  font-family: "Noto Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e7e7e7; --glow: rgba(255,255,255,.98); --surface: rgba(255,255,255,.58); --solid: #f1f1f1; --raised: rgba(255,255,255,.5); --input: rgba(255,255,255,.56);
  --text: #0f0f0f; --muted: #555; --faint: #707070; --line: rgba(255,255,255,.74); --line-strong: rgba(94,94,94,.28);
  --accent: #c2410c; --accent-strong: #ea580c; --accent-soft: rgba(194,65,12,.13); --focus: #ea580c;
  --shadow: 24px 24px 38px rgba(67,67,67,.24), inset -10px -10px 20px rgba(145,145,145,.32), inset 0 16px 32px rgba(255,255,255,.98);
  --control-shadow: 6px 6px 12px rgba(67,67,67,.2), inset -4px -4px 8px rgba(154,154,154,.26), inset 0 7px 14px rgba(255,255,255,.98);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 0 0, var(--glow), transparent 38%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--glow) 46%, transparent), transparent 46%), var(--bg); color: var(--text); font-size: 16px; line-height: 1.65; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 66%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
button, input { font: inherit; } button { color: inherit; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { padding: .12em .34em; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--input) 88%, transparent); font-size: .88em; overflow-wrap: anywhere; }
pre { margin: 14px 0 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--input); color: var(--text); line-height: 1.6; box-shadow: var(--control-shadow); }
pre code { padding: 0; border: 0; background: none; font-size: .9rem; }
kbd { padding: .12em .42em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--raised); font-size: .8em; }
h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { color: var(--text); line-height: 1.16; letter-spacing: -.035em; }
h1 { max-width: 14ch; margin-bottom: 22px; font-size: clamp(2.6rem, 6vw, 5.25rem); } h2 { margin-bottom: 12px; font-size: clamp(2rem, 3.1vw, 3rem); } h3 { margin-bottom: 8px; font-size: 1.08rem; letter-spacing: -.015em; }
p { max-width: 74ch; } ul, ol { padding-left: 1.25rem; } li + li { margin-top: 7px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 8px 12px; border-radius: 8px; background: var(--accent); color: #fff; transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); }

.site-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: 100dvh; }
.sidebar { position: fixed; z-index: 30; display: flex; flex-direction: column; width: var(--sidebar); height: 100dvh; padding: 28px 20px 22px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 84%, transparent); box-shadow: 14px 0 28px rgba(0,0,0,.2), inset -1px 0 rgba(255,255,255,.05); backdrop-filter: blur(16px) saturate(110%); }
.brand { display: inline-flex; align-items: center; width: fit-content; text-decoration: none; }
.brand-logo { display: block; width: 126px; height: auto; }
.sidebar-kicker, .nav-label, .section-number, .eyebrow, .card-label { color: var(--faint); font-size: .68rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-kicker { margin: 6px 0 30px; }.sidebar nav { overflow-y: auto; padding-right: 4px; }.nav-label { margin: 23px 11px 7px; }
.sidebar nav a { display: block; padding: 8px 11px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); font-size: .9rem; text-decoration: none; transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.sidebar nav a:hover, .sidebar nav a.active { color: var(--text); background: var(--raised); box-shadow: var(--control-shadow); }.sidebar nav a.active { border-color: var(--line); box-shadow: inset 2px 0 0 var(--accent-strong), var(--control-shadow); }
.sidebar-footer { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: auto; padding: 18px 11px 0; border-top: 1px solid var(--line); }.sidebar-footer a { color: var(--faint); font-size: .78rem; }
.content-shell { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px clamp(20px,4vw,58px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: inset 0 -1px rgba(0,0,0,.12); backdrop-filter: blur(16px) saturate(110%); }
.topbar-meta { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--muted); font-size: .82rem; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #86efac; box-shadow: 0 0 0 4px rgba(134,239,172,.12); }
.search-wrap { position: relative; display: flex; align-items: center; width: min(400px,38vw); min-width: 220px; }.search-icon { position: absolute; left: 13px; width: 17px; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-width: 1.8; }
.search-wrap input { width: 100%; min-height: 40px; padding: 9px 41px 9px 39px; border: 1px solid var(--line); border-radius: 12px; background: var(--input); box-shadow: var(--control-shadow); color: var(--text); font-size: .86rem; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; }.search-wrap input:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft), var(--control-shadow); }.search-wrap kbd { position: absolute; right: 9px; color: var(--faint); }
.search-results { position: absolute; top: calc(100% + 8px); right: 0; left: 0; max-height: 360px; overflow: auto; padding: 7px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(16px) saturate(110%); }.search-result { display: block; width: 100%; padding: 10px 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; text-align: left; }.search-result:hover, .search-result:focus-visible { border-color: var(--line); background: var(--raised); box-shadow: var(--control-shadow); outline: none; }.search-result strong, .search-result small { display: block; }.search-result small { margin-top: 2px; color: var(--muted); font-size: .76rem; }.search-empty { padding: 12px; color: var(--muted); font-size: .84rem; }
.icon-button { display: inline-grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); box-shadow: var(--control-shadow); cursor: pointer; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }.icon-button:hover { border-color: var(--line-strong); background: var(--surface); }.icon-button:active { transform: scale(.96); }.icon-button svg { width: 18px; fill: none; stroke: var(--text); stroke-linecap: round; stroke-width: 1.8; }.nav-toggle { display: none; }

main { width: min(100%,1240px); margin: 0 auto; padding: 0 clamp(20px,5vw,72px); }.content-section { scroll-margin-top: 86px; }.hero { padding: clamp(72px,11vw,144px) 0 56px; }.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; color: var(--accent-strong); }.eyebrow span { width: 24px; height: 1px; background: currentColor; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.76fr); align-items: center; gap: clamp(35px,6vw,90px); }.lede { max-width: 59ch; color: var(--muted); font-size: clamp(1.02rem,1.5vw,1.18rem); }.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 15px; border: 1px solid transparent; border-radius: 12px; font-size: .9rem; font-weight: 720; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }.button:hover { transform: translateY(-1px); }.button.primary { background: var(--accent); color: #fff; box-shadow: 7px 7px 16px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.25); }.button.primary:hover { color: #fff; background: var(--accent-strong); }.button.secondary { border-color: var(--line-strong); background: var(--surface); color: var(--text); }.button.secondary:hover { color: var(--text); background: var(--raised); }
.product-card { min-height: 405px; padding: 20px; border: 1px solid var(--line-strong); border-radius: 28px; background: linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.01)),var(--solid); box-shadow: 28px 28px 48px rgba(0,0,0,.4), inset 8px 8px 18px rgba(255,255,255,.055), inset -10px -10px 20px rgba(0,0,0,.35); }.mock-topbar { display: flex; align-items: center; gap: 7px; }.mock-logo { width: 54px; height: 34px; margin-right: auto; object-fit: contain; object-position: left center; }.mock-topbar span + span, .mock-topbar i { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255,255,255,.04); }.mock-selects { display: grid; grid-template-columns: 1fr 1.2fr; gap: 9px; margin-top: 26px; }.mock-selects span, .mock-input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0,0,0,.26); color: #eae8e1; font-size: .76rem; }.mock-pill { width: fit-content; margin: 21px auto; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--faint); font-size: .68rem; }.mock-user { width: fit-content; max-width: 86%; margin: 0 0 17px auto; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 17px 17px 5px 17px; background: linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02)); color: #eeece7; font-size: .77rem; }.mock-assistant { max-width: 90%; padding: 13px; border: 1px solid var(--line-strong); border-radius: 17px 17px 17px 5px; background: rgba(0,0,0,.2); color: #d6d4ce; font-size: .76rem; line-height: 1.55; }.mock-input { display: flex; gap: 10px; margin-top: 28px; color: var(--faint); }.mock-input span:first-child { color: #fff; font-size: 1.25rem; line-height: .85; }
.quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 44px; }.quick-grid a { display: flex; flex-direction: column; min-height: 140px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; transition: border-color 180ms ease, transform 180ms ease; }.quick-grid a:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }.quick-number { margin-bottom: 16px; color: var(--accent-strong); font-family: ui-monospace,monospace; font-size: .74rem; }.quick-grid strong { font-size: .95rem; }.quick-grid small { margin-top: 6px; color: var(--muted); font-size: .79rem; line-height: 1.45; }
.article-section { padding: clamp(66px,9vw,112px) 0; border-top: 1px solid var(--line); }.section-heading { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 18px; align-items: start; margin-bottom: 31px; }.section-number { padding-top: 8px; color: var(--accent-strong); }.section-heading > div > p { margin-bottom: 0; color: var(--muted); }
.callout { display: flex; gap: 11px; margin: 24px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }.callout svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: var(--accent-strong); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.callout p { margin: 0; font-size: .9rem; }.callout.warning { border-color: color-mix(in srgb,var(--accent) 52%,var(--line)); background: var(--accent-soft); }
.steps { display: grid; gap: 20px; max-width: 810px; padding: 0; list-style: none; }.steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 15px; margin: 0; }.steps li > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-size: .78rem; font-weight: 750; }.steps p { margin: 3px 0 0; color: var(--muted); }
.split-grid, .context-grid, .privacy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.surface-card { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }.surface-card p:last-child, .surface-card ul:last-child, .surface-card ol:last-child { margin-bottom: 0; }.muted { color: var(--muted); font-size: .88rem; }
.feature-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.feature-list article { padding: 18px 3px; border-top: 1px solid var(--line-strong); }.feature-list p { margin-bottom: 0; color: var(--muted); font-size: .91rem; }.feature-list.two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }.card-label { display: block; margin-bottom: 13px; color: var(--accent-strong); }
.status-reference { max-width: 900px; margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb,var(--surface) 78%,transparent); }.status-reference h3 { margin-bottom: 17px; }.status-reference dl { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 13px 24px; margin: 0; }.status-reference dt { color: var(--text); font-weight: 700; }.status-reference dd { margin: 0; color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }table { width: 100%; min-width: 670px; border-collapse: collapse; text-align: left; }th, td { padding: 15px 17px; border-bottom: 1px solid var(--line); vertical-align: top; }th { background: color-mix(in srgb,var(--raised) 80%,transparent); color: var(--text); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }td { color: var(--muted); font-size: .88rem; }tbody tr:last-child td { border-bottom: 0; }td:first-child { color: var(--text); font-weight: 720; }
.privacy-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.privacy-grid article { padding: 16px 0; border-top: 1px solid var(--line-strong); }.privacy-grid p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }.troubleshooting-list { display: grid; gap: 10px; }details { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }summary { padding: 15px 17px; color: var(--text); cursor: pointer; font-weight: 700; }details p { margin: 0; padding: 0 17px 17px; color: var(--muted); font-size: .9rem; }
.closing-section { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 30px 0 72px; padding: 34px; border: 1px solid var(--line-strong); border-radius: 24px; background: radial-gradient(circle at 100% 0,var(--accent-soft),transparent 42%),var(--surface); box-shadow: var(--shadow); }.closing-section h2 { max-width: 18ch; margin-bottom: 9px; font-size: clamp(1.7rem,3vw,2.5rem); }.closing-section p:not(.eyebrow) { margin-bottom: 0; color: var(--muted); }footer { display: flex; justify-content: space-between; gap: 16px; width: min(100%,1240px); margin: 0 auto; padding: 24px clamp(20px,5vw,72px) 34px; border-top: 1px solid var(--line); color: var(--faint); font-size: .8rem; }
.legal-hero { padding-bottom: 35px; }.legal-hero h1 { max-width: 18ch; }.legal-copy { max-width: 860px; padding-bottom: 72px; }.legal-copy h2 { margin-top: 46px; font-size: clamp(1.5rem,2.4vw,2.2rem); }.legal-copy h3 { margin-top: 28px; }.legal-copy p, .legal-copy li { color: var(--muted); }.legal-copy strong { color: var(--text); }.legal-copy .surface-card { margin-top: 28px; }
@media (max-width:1040px) { :root { --sidebar: 242px; }.hero-grid { grid-template-columns: 1fr; }.product-card { max-width: 580px; }.privacy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:780px) { .site-shell { display: block; }.sidebar { transform: translateX(-102%); width: min(310px,86vw); box-shadow: 16px 0 48px rgba(0,0,0,.36); transition: transform 220ms ease; }.sidebar.open { transform: translateX(0); }.content-shell { min-width: 0; }.nav-toggle { display: inline-grid; }.topbar { gap: 10px; min-height: 64px; padding: 12px 16px; }.topbar-meta { display: none; }.search-wrap { width: auto; flex: 1; min-width: 0; }main { padding: 0 20px; }.hero { padding-top: 72px; }.quick-grid, .split-grid, .context-grid, .feature-list, .feature-list.two-columns { grid-template-columns: 1fr; }.section-heading { grid-template-columns: 1fr; gap: 5px; }.section-number { padding-top: 0; }.status-reference dl { grid-template-columns: 1fr; gap: 3px; }.status-reference dd { margin-bottom: 12px; }.closing-section { flex-direction: column; align-items: flex-start; padding: 26px; }footer { flex-wrap: wrap; padding: 20px 20px 28px; } }
@media (max-width:460px) { h1 { font-size: 2.55rem; }.topbar { padding-inline: 12px; }.search-wrap input { padding-right: 15px; }.search-wrap kbd { display: none; }.product-card { min-height: 370px; padding: 15px; }.mock-selects { grid-template-columns: 1fr; }.privacy-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Match the extension's glass-clay surface, control, and accent treatment. */
.button { padding: 10px 16px; border-color: var(--line); border-radius: 14px; }
.button:active { transform: scale(.97); }
.button.primary { border-color: #fdba74; background: linear-gradient(145deg,#ea580c,#9a3412); box-shadow: 3px 3px 6px rgba(92,35,9,.35), inset 1px 1px 1px rgba(255,255,255,.48), inset -2px -2px 3px rgba(123,42,9,.45); }
.button.primary:hover { background: linear-gradient(145deg,#fb923c,#c2410c); }
.button.secondary { border-color: var(--line); background: var(--raised); box-shadow: var(--control-shadow); }
.button.secondary:hover { background: var(--surface); }
.product-card { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(16px) saturate(110%); }
.mock-logo { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mock-topbar span + span, .mock-topbar i { border-color: var(--line); border-radius: 12px; background: var(--raised); box-shadow: var(--control-shadow); }
.mock-selects span, .mock-input { border-radius: 12px; background: var(--input); box-shadow: var(--control-shadow); color: var(--text); }
.mock-pill { background: var(--raised); }
.mock-user { border-color: var(--line); background: color-mix(in srgb,var(--surface) 94%,var(--accent-soft)); box-shadow: var(--control-shadow); color: var(--text); }
.mock-assistant { border-color: var(--line); background: var(--surface); box-shadow: var(--control-shadow); color: var(--text); }
.mock-input span:first-child { color: var(--text); }
.quick-grid { gap: 14px; }
.quick-grid a { border-radius: 20px; }
.quick-grid a:hover { border-color: var(--line-strong); box-shadow: var(--control-shadow); }
.callout, .surface-card, .status-reference, .closing-section { border-radius: 20px; box-shadow: var(--shadow); backdrop-filter: blur(16px) saturate(110%); }
.status-reference { background: var(--surface); }
.table-wrap { border-radius: 20px; box-shadow: var(--shadow); background: var(--surface); }
th { background: var(--raised); }
main, .hero-grid, .hero-grid > *, .product-card, .mock-selects, .mock-selects span { min-width: 0; }
.product-card { width: 100%; }
.mock-selects span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }