@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/geist.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/geist-mono.woff2?v=1') format('woff2'); }
:root { --sans:"Geist","Helvetica Neue",Arial,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; --gutter:clamp(16px,4vw,40px); }
/* theme tokens: dark is the brand default; [data-theme="dark"] on any element makes a dark island (home hero) */
:root, [data-theme="dark"] { color-scheme:dark;
  --bg:#000; --raised:#0E0E13; --raised-2:#17171C; --panel:#0A0A0E; --cta-bg:#0B0B10; --th-bg:#0B0B10; --sunken:#0D0D12; --field:#111117; --hover:#15151C; --selected:#1A1830; --seg-on:#24223A;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.3);
  --ink:#EDEDF1; --ink-2:#A3A3AE; --ink-3:#6C6C78; --prose-ink:#C9C9D2;
  --accent:#8E7DFA; --accent-rgb:142,125,250; --accent-soft:#B9AEFF; --link-hover:#D6CEFF; --accent-ink:#CFC7FF; --accent-pale:#C9C0FF;
  --code-bg:#15151C; --code-ink:#E2DDFF; --pre-bg:#0C0C11; --pre-ink:#D8D8E2;
  --nav-bg:rgba(0,0,0,.72); --scrim:rgba(13,13,18,.78);
  --btn-grad:linear-gradient(135deg,#A496FF 0%,#7A66F5 55%,#634EEA 100%); --btn-shadow:rgba(122,102,245,.7);
  --wm-grad:linear-gradient(120deg,#C9C0FF 0%,#9B8CFF 55%,#7560F4 100%); --wm-grad-2:linear-gradient(120deg,#B6ACEB,#8E81DB); --hl-grad:linear-gradient(120deg,#C9C0FF,#8E7DFA);
  --mark-1:#C2B8FF; --mark-2:#6A55F2;
  --ok:#57D29B; --ok-rgb:87,210,155; --ok-ink:#9AE6B4; --warn:#F2C97D; --warn-rgb:242,201,125; --warn-ink:#F2C97D; --rec:#FF7A85; --err:#FF7A85; --no-ink:#F687B3; --info-ink:#90CDF4; --info-rgb:99,179,237;
  --chart-1:#8E7DFA; --chart-2:#4FD1C5; --chart-3:#F6AD55; --chart-4:#F687B3; --chart-5:#63B3ED; --chart-6:#9AE6B4; --chart-grid:rgba(255,255,255,.06); --chart-axis:#6C6C78; --chart-cursor:rgba(255,255,255,.28); }
:root[data-theme="light"] { color-scheme:light;
  --bg:#F7F7FA; --raised:#FFFFFF; --raised-2:#F1F1F6; --panel:#FFFFFF; --cta-bg:#FFFFFF; --th-bg:#F4F4F8; --sunken:#FAFAFC; --field:#FFFFFF; --hover:#F1F1F6; --selected:#F1EFFE; --seg-on:#EAE6FE;
  --line:rgba(20,18,40,.09); --line-2:rgba(20,18,40,.16); --line-3:rgba(20,18,40,.32);
  --ink:#121218; --ink-2:#4A4A57; --ink-3:#6B6B79; --prose-ink:#2C2C36;
  --accent:#6E5AF0; --accent-rgb:110,90,240; --accent-soft:#5341D4; --link-hover:#3B2BB0; --accent-ink:#5341D4; --accent-pale:#5341D4;
  --code-bg:#EFEEF6; --code-ink:#4433B8; --pre-bg:#F2F2F7; --pre-ink:#24242E;
  --nav-bg:rgba(247,247,250,.82); --scrim:rgba(250,250,252,.84);
  --btn-grad:linear-gradient(135deg,#8F7FFF 0%,#6E5AF0 55%,#5640E0 100%); --btn-shadow:rgba(86,64,224,.45);
  --wm-grad:linear-gradient(120deg,#8C7CFF 0%,#6E5AF0 55%,#4E38D6 100%); --wm-grad-2:linear-gradient(120deg,#7D70D6,#5B4CC4); --hl-grad:linear-gradient(120deg,#6E5AF0,#4E38D6);
  --mark-1:#8C7CFF; --mark-2:#4E38D6;
  --ok:#12A366; --ok-rgb:18,163,102; --ok-ink:#0B7A4B; --warn:#B87A0C; --warn-rgb:184,122,12; --warn-ink:#8A5A00; --rec:#E0414F; --err:#C42F3C; --no-ink:#B4235F; --info-ink:#1D6FA8; --info-rgb:29,111,168;
  --chart-1:#6E5AF0; --chart-2:#0E8F86; --chart-3:#C26A06; --chart-4:#C2387A; --chart-5:#2B6CB0; --chart-6:#2F8A4E; --chart-grid:rgba(20,18,40,.08); --chart-axis:#5E5E6C; --chart-cursor:rgba(20,18,40,.35); }
[data-theme] { color:var(--ink); }
[data-theme="dark"]:not(:root) { background-color:var(--bg); }
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition:none !important; }
#dqa-g stop:first-child { stop-color:var(--mark-1); } #dqa-g stop:last-child { stop-color:var(--mark-2); }
* { box-sizing:border-box; } [hidden]{display:none!important}
html,body { margin:0; } html { background:var(--bg); } body { background:var(--bg); color:var(--ink); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--accent-soft); text-underline-offset:3px; } a:hover { color:var(--link-hover); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1160px; margin-inline:auto; padding-inline:var(--gutter); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* nav */
.nav { position:sticky; top:0; z-index:10; background:var(--nav-bg); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; gap:28px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:600 18px/1 var(--sans); letter-spacing:-.02em; }
.brand svg { width:28px; height:28px; flex:none; }
.wm { background:var(--wm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.08em; }
.wm span { font-weight:500; background:var(--wm-grad-2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.links { display:flex; gap:22px; margin-left:auto; }
.links a { color:var(--ink-2); text-decoration:none; font-size:14.5px; } .links a:hover, .links a[aria-current] { color:var(--ink); }
.btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px; border-radius:999px; font:500 14.5px/1 var(--sans); text-decoration:none; color:#fff; white-space:nowrap;
  background:var(--btn-grad); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 20px -8px var(--btn-shadow); }
.btn:hover { color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 5px rgba(var(--accent-rgb),.22); }
.nav .btn { height:36px; padding:0 16px; font-size:14px; }
/* theme toggle: 36x36 ghost icon button, just left of the nav CTA */
.theme-toggle { flex:none; display:inline-grid; place-items:center; width:36px; height:36px; padding:0; margin-right:-16px; border:1px solid var(--line-2); border-radius:999px; background:transparent; color:var(--ink-2); cursor:pointer; transition:color .15s, border-color .15s; }
.theme-toggle:hover { color:var(--ink); border-color:var(--line-3); }
.theme-toggle svg { display:block; } .theme-toggle .i-moon { display:none; }
:root[data-theme="light"] .theme-toggle .i-sun { display:none; } :root[data-theme="light"] .theme-toggle .i-moon { display:block; }
@media (max-width:820px){ .nav .wrap { gap:18px; } .links { gap:16px; } .links a[href="/hardware/"] { display:none; } .theme-toggle { margin-right:-6px; } }
@media (max-width:640px){ .links { gap:14px; } .nav .btn { display:none; } .nav .wrap { gap:18px; } .theme-toggle { margin-right:0; } }
/* article */
.crumbs { font:500 13px/1 var(--mono); color:var(--ink-3); margin:44px 0 18px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { color:var(--ink-2); text-decoration:none; }
.article { max-width:740px; margin-inline:auto; padding-inline:var(--gutter); }
.article h1 { font-size:clamp(34px,5vw,52px); line-height:1.08; letter-spacing:-.04em; font-weight:600; margin:0; text-wrap:balance; }
.dek { font-size:20px; color:var(--ink-2); margin:18px 0 0; line-height:1.5; }
.meta { display:flex; gap:10px; align-items:center; margin:22px 0 36px; padding-bottom:28px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-3); flex-wrap:wrap; }
.meta b { color:var(--ink); font-weight:500; }
.prose h2 { font-size:26px; letter-spacing:-.02em; line-height:1.2; margin:44px 0 12px; font-weight:600; }
.prose p, .prose li { color:var(--prose-ink); }
.prose ul { padding-left:22px; } .prose li { margin:6px 0; }
.prose code { font:500 .88em/1.4 var(--mono); background:var(--code-bg); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--code-ink); }
.prose pre { background:var(--pre-bg); border:1px solid var(--line); border-radius:14px; padding:18px 20px; overflow-x:auto; }
.prose pre code { background:none; border:0; padding:0; font-size:13.5px; line-height:1.6; color:var(--pre-ink); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; margin:24px 0; }
table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
th { text-align:left; font:600 12px/1.2 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); padding:14px 16px; border-bottom:1px solid var(--line); background:var(--th-bg); }
td { padding:13px 16px; border-bottom:1px solid var(--line); color:var(--prose-ink); vertical-align:top; } tr:last-child td { border-bottom:0; } td:first-child { color:var(--ink); font-weight:500; }
.cta-box { margin:56px 0 0; padding:28px; border:1px solid rgba(var(--accent-rgb),.3); border-radius:20px; background:radial-gradient(120% 140% at 0% 0%,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),0) 60%),var(--cta-bg); }
.cta-box h2 { margin:0 0 8px; font-size:24px; letter-spacing:-.02em; } .cta-box p { margin:0 0 18px; color:var(--ink-2); }
.related { margin:64px 0 0; } .related h2 { font-size:15px; font-family:var(--mono); color:var(--ink-3); font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.card { display:block; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--panel); text-decoration:none; color:var(--ink); transition:border-color .15s; }
.card:hover { border-color:rgba(var(--accent-rgb),.45); color:var(--ink); }
.card h3 { margin:0 0 8px; font-size:19px; letter-spacing:-.02em; line-height:1.25; } .card p { margin:0; color:var(--ink-2); font-size:15px; line-height:1.5; }
.card .k { font:500 12px/1 var(--mono); color:var(--ink-3); margin-top:14px; display:block; }
.page-head { padding:64px 0 28px; } .page-head h1 { font-size:clamp(38px,6vw,64px); letter-spacing:-.045em; line-height:1.02; margin:0; font-weight:600; }
.page-head p { color:var(--ink-2); font-size:19px; max-width:60ch; margin:16px 0 0; }
/* footer */
.site-foot { border-top:1px solid var(--line); margin-top:96px; padding:48px 0 36px; font-size:14px; color:var(--ink-3); }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1.6fr 1fr; gap:32px; }
.foot-grid .fh { font:600 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:6px 0 14px; }
.foot-grid ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; } .foot-grid a { color:var(--ink-2); text-decoration:none; } .foot-grid a:hover { color:var(--ink); }
.foot-brand p { margin:14px 0 0; max-width:30ch; line-height:1.5; }
.foot-base { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }
@media (max-width:860px){ .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid { grid-template-columns:1fr; } }

/* tool primitives */
.tool-page { max-width:980px; margin-inline:auto; padding-inline:var(--gutter); }
.tool-page h1 { font-size:clamp(34px,5vw,52px); line-height:1.08; letter-spacing:-.04em; font-weight:600; margin:0; text-wrap:balance; }
.tool { margin:32px 0 0; border:1px solid var(--line-2); border-radius:20px; background:var(--panel); padding:clamp(18px,3vw,28px); }
.tool .row { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.tool .field label, .tool .lbl { display:block; font:500 12.5px/1.3 var(--mono); color:var(--ink-3); margin:0 0 7px; letter-spacing:.02em; }
.tool input[type=number], .tool input[type=text], .tool select { width:100%; height:44px; background:var(--field); border:1px solid var(--line-2); border-radius:10px; color:var(--ink);
  padding:0 12px; font:500 16px/1 var(--sans); outline:none; -moz-appearance:textfield; }
.tool input:focus, .tool select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2); }
.tool select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px; background-size:5px 5px; background-repeat:no-repeat; padding-right:32px; }
.tool .seg { display:inline-flex; border:1px solid var(--line-2); border-radius:999px; padding:3px; gap:2px; background:var(--field); flex-wrap:wrap; }
.tool .seg button { border:0; background:none; color:var(--ink-2); font:500 14px/1 var(--sans); padding:9px 14px; border-radius:999px; cursor:pointer; }
.tool .seg button[aria-pressed=true] { background:var(--seg-on); color:var(--ink); }
.tool .results { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:22px; }
.tool .stat { background:var(--sunken); padding:16px 18px; min-width:0; }
.tool .stat .k { display:block; font:500 12px/1.3 var(--mono); color:var(--ink-3); }
.tool .stat .v { display:block; font:600 26px/1.2 var(--sans); letter-spacing:-.02em; margin-top:6px; color:var(--ink); overflow-wrap:anywhere; }
.tool .stat .v small { font-size:15px; font-weight:500; color:var(--ink-2); margin-left:4px; }
.tool .stat.hl .v { background:var(--hl-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tool .note { font-size:14px; color:var(--ink-3); margin:14px 0 0; line-height:1.5; }
.tool .warn { font-size:14px; color:var(--warn-ink); margin:14px 0 0; }
.tool-faq { margin:56px 0 0; } .tool-faq h2 { font-size:26px; letter-spacing:-.02em; margin:0 0 12px; }
.tool-faq details { border-top:1px solid var(--line); padding:16px 0; } .tool-faq details:last-child { border-bottom:1px solid var(--line); }
.tool-faq summary { cursor:pointer; font-weight:500; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.tool-faq summary::-webkit-details-marker { display:none; } .tool-faq summary::after { content:"+"; color:var(--ink-3); } .tool-faq details[open] summary::after { content:"–"; }
.tool-faq details p { color:var(--ink-2); margin:10px 0 0; }
@media (max-width:640px){ .links a[href="/hardware/"], .links a[href="/devices/"] { display:none; } }
@media (max-width:420px){ .links a[href="/blog/"] { display:none; } }

/* Long inline code wraps on narrow screens instead of widening the page. */
.prose :not(pre) > code { overflow-wrap: anywhere; }