:root {
	--bg: #090909;
	--panel: #111111;
	--raised: #171411;
	--line: #2b2b2b;
	--soft-line: #1d1d1d;
	--text: #e7e2dc;
	--muted: #8d8985;
	--faint: #64615e;
	--accent: #d06a32;
	--warm: #f1b077;
	--green: #58c98a;
	--red: #e36b6b;
	--display: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	--body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(circle at 82% -12%, rgba(208, 106, 50, .13), transparent 34rem),
		linear-gradient(180deg, #0d0d0d 0, var(--bg) 28rem);
	color: var(--text);
	font: 15px/1.6 var(--body);
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1160px, calc(100% - 36px)); margin: 0 auto; }
.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 68px;
	border-bottom: 1px solid var(--soft-line);
	font-family: var(--display);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; letter-spacing: .04em; }
.mark {
	width: 26px;
	height: 26px;
	position: relative;
	border: 1px solid var(--accent);
	background: #1b120e;
	box-shadow: inset 0 0 0 4px #0d0d0d;
}
.mark::after { content: ""; position: absolute; inset: 7px; background: var(--warm); }
.brand strong { color: #f5dfca; font-size: 13px; }
.navlinks { display: flex; align-items: center; gap: 5px; }
.navlinks a {
	padding: 8px 10px;
	color: var(--muted);
	text-decoration: none;
	font-size: 11px;
	letter-spacing: .08em;
}
.navlinks a:hover, .navlinks a:focus-visible, .navlinks a[aria-current="page"] { color: var(--warm); background: #15110e; }
.nav-download { border: 1px solid #713817; color: var(--warm) !important; margin-left: 5px; }

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr);
	gap: 56px;
	align-items: center;
	padding: 90px 0 78px;
}
.hero-copy { max-width: 760px; }
.eyebrow {
	margin: 0 0 14px;
	color: var(--accent);
	font: 11px/1.3 var(--display);
	letter-spacing: .16em;
	text-transform: uppercase;
}
h1, h2, h3 { margin-top: 0; color: #f3e3d3; }
h1 { margin-bottom: 0; font: 700 clamp(42px, 7vw, 82px)/.95 var(--display); letter-spacing: -.065em; }
h2 { font: 700 clamp(28px, 4vw, 46px)/1.05 var(--display); letter-spacing: -.045em; }
h3 { font: 700 16px/1.25 var(--display); }
.lede { max-width: 680px; margin: 25px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 43px;
	padding: 0 17px;
	border: 1px solid var(--line);
	background: #121212;
	color: var(--text);
	font: 11px/1 var(--display);
	letter-spacing: .09em;
	text-decoration: none;
	text-transform: uppercase;
}
.button:hover, .button:focus-visible { border-color: var(--warm); color: var(--warm); }
.button.primary { border-color: var(--accent); background: #24150e; color: #ffd7b9; }
.button.primary::after { content: "↓"; margin-left: 12px; font-size: 15px; }
.fine { color: var(--faint); font: 11px/1.5 var(--display); }

.voice-card {
	position: relative;
	padding: 19px;
	border: 1px solid var(--line);
	background: rgba(17, 17, 17, .96);
	box-shadow: 20px 20px 0 #0b0b0b;
	font-family: var(--display);
}
.voice-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 33px; background: var(--accent); }
.voice-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--soft-line); }
.voice-head strong { color: var(--warm); font-size: 11px; letter-spacing: .1em; }
.live { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font: 10px/1 var(--display); letter-spacing: .1em; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.voice-person { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--soft-line); }
.avatar { width: 38px; height: 38px; border: 1px solid #4d2a18; background: linear-gradient(135deg, #e27a3d 0 42%, #68321a 43% 64%, #25140f 65%); }
.voice-person strong { display: block; color: var(--text); font-size: 12px; }
.voice-person small { color: var(--muted); }
.meter { display: flex; align-items: end; gap: 3px; height: 24px; }
.meter i { display: block; width: 3px; background: var(--accent); }
.meter i:nth-child(1), .meter i:nth-child(5) { height: 7px; }
.meter i:nth-child(2), .meter i:nth-child(4) { height: 14px; }
.meter i:nth-child(3) { height: 22px; }
.voice-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 15px; }
.voice-stat { padding: 11px; background: #0d0d0d; border: 1px solid var(--soft-line); }
.voice-stat span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.voice-stat strong { display: block; margin-top: 7px; color: var(--text); font-size: 13px; }

.section { padding: 72px 0; border-top: 1px solid var(--soft-line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; }
.section-head p { max-width: 520px; margin: 0; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.feature-card, .link-card, .info-card, .stat-card {
	position: relative;
	border: 1px solid var(--line);
	background: rgba(17, 17, 17, .94);
}
.feature-card { grid-column: span 4; min-height: 210px; padding: 21px; }
.feature-card::before, .stat-card::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 26px; background: var(--accent); }
.feature-number { color: var(--accent); font: 10px/1 var(--display); letter-spacing: .12em; }
.feature-card h3 { margin: 42px 0 10px; }
.feature-card p, .info-card p { margin: 0; color: var(--muted); font-size: 14px; }
.link-card {
	grid-column: span 4;
	display: block;
	min-height: 150px;
	padding: 20px;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.link-card:hover, .link-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.link-card span { color: var(--accent); font: 10px/1 var(--display); letter-spacing: .12em; }
.link-card h3 { margin: 32px 0 8px; }
.link-card p { margin: 0; color: var(--muted); font-size: 13px; }

.page-hero { padding: 76px 0 48px; max-width: 850px; }
.page-hero h1 { font-size: clamp(39px, 7vw, 70px); }
.page-hero .lede { max-width: 740px; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 54px; padding: 20px 0 80px; }
.prose { max-width: 760px; }
.prose section { padding: 34px 0; border-top: 1px solid var(--soft-line); }
.prose section:first-child { border-top-color: var(--line); }
.prose h2 { font-size: 25px; }
.prose p, .prose li { color: #aaa5a0; }
.prose li + li { margin-top: 9px; }
.prose code { color: var(--warm); }
.aside { align-self: start; position: sticky; top: 22px; }
.aside-card { padding: 17px; border: 1px solid var(--line); background: var(--panel); }
.aside-card + .aside-card { margin-top: 10px; }
.aside-card strong { display: block; color: var(--warm); font: 11px/1.2 var(--display); letter-spacing: .08em; }
.aside-card p { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.aside-card a { color: var(--warm); }
.notice { padding: 18px 20px; border: 1px solid #5a4020; border-left: 4px solid var(--accent); background: #1a1208; color: #c4b1a1; }

.download-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 1px;
	margin: 16px 0 70px;
	border: 1px solid var(--line);
	background: var(--line);
}
.download-main, .download-meta { background: var(--panel); padding: clamp(24px, 5vw, 48px); }
.download-main h2 { margin-bottom: 14px; }
.download-main p { max-width: 620px; color: var(--muted); }
.requirement { padding: 12px 0; border-bottom: 1px solid var(--soft-line); }
.requirement:first-child { padding-top: 0; }
.requirement span { display: block; color: var(--muted); font: 9px/1.2 var(--display); letter-spacing: .1em; }
.requirement strong { display: block; margin-top: 6px; font: 12px/1.3 var(--display); }
.steps { counter-reset: install; }
.step { position: relative; grid-column: span 4; min-height: 180px; padding: 22px 20px 20px 58px; border: 1px solid var(--line); background: var(--panel); }
.step::before { counter-increment: install; content: "0" counter(install); position: absolute; top: 22px; left: 19px; color: var(--accent); font: 11px/1 var(--display); }
.step h3 { margin-bottom: 10px; }
.step p { margin: 0; color: var(--muted); font-size: 13px; }

.stats-grid { padding: 16px 0 74px; }
.stat-card { min-height: 136px; padding: 17px 18px; }
.stat-primary { grid-column: span 3; }
.stat-wide { grid-column: span 8; min-height: 238px; }
.stat-health { grid-column: span 4; min-height: 238px; }
.stat-totals { grid-column: 1 / -1; min-height: 0; }
.label { display: block; color: var(--muted); font: 10px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.value { display: block; margin-top: 23px; color: #f2e7dd; font: 700 clamp(28px, 4vw, 45px)/1 var(--display); letter-spacing: -.06em; }
.unit { margin-left: 6px; color: var(--warm); font-size: 11px; letter-spacing: 0; }
.detail { display: block; margin-top: 13px; color: #696663; font: 10px/1.3 var(--display); }
.chart-head { display: flex; justify-content: space-between; gap: 20px; }
.chart-head strong { color: var(--warm); font: 11px/1.2 var(--display); }
.health-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.health-key { color: var(--faint); font: 8px/1.2 var(--display); letter-spacing: .06em; white-space: nowrap; }
.health-key i, .metric-health > span::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 4px 1px 7px;
	border-radius: 50%;
	background: var(--faint);
	vertical-align: middle;
}
.health-key i:first-child { margin-left: 0; }
.health-key .key-good, .health-good > span::before { background: var(--green); box-shadow: 0 0 7px rgba(88, 201, 138, .42); }
.health-key .key-warn, .health-warn > span::before { background: var(--warm); box-shadow: 0 0 7px rgba(241, 176, 119, .42); }
.health-key .key-bad, .health-bad > span::before { background: var(--red); box-shadow: 0 0 7px rgba(227, 107, 107, .46); }
.metric-health > span::before { margin-left: 0; margin-right: 7px; }
.metric-health output { transition: color .15s ease; }
.health-good output { color: var(--green) !important; }
.health-warn output { color: var(--warm) !important; }
.health-bad output { color: var(--red) !important; }
canvas { display: block; width: 100%; height: 156px; margin-top: 22px; }
.rows { margin-top: 18px; border-top: 1px solid var(--soft-line); }
.row { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--soft-line); color: var(--muted); font-size: 13px; }
.row output { color: var(--text); font-family: var(--display); }
.totals-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--soft-line); }
.total { min-width: 0; padding: 13px 16px 10px 0; border-bottom: 1px solid var(--soft-line); }
.total span { display: block; color: var(--muted); font-size: 12px; }
.total output { display: block; margin-top: 7px; overflow: hidden; color: var(--text); font: 12px/1.3 var(--display); text-overflow: ellipsis; }
.good { color: var(--green) !important; }
.warn { color: var(--warm) !important; }
.bad { color: var(--red) !important; }
.privacy-strip { grid-column: 1 / -1; margin: 0; padding: 15px 18px; border: 1px solid var(--soft-line); color: var(--faint); font-size: 12px; }

.site-footer { padding: 26px 0 38px; border-top: 1px solid var(--soft-line); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: start; }
.footer-brand p { max-width: 500px; margin: 11px 0 0; color: var(--faint); font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: end; gap: 14px; }
.footer-links a { color: var(--muted); font: 10px/1.3 var(--display); letter-spacing: .08em; text-decoration: none; }
.footer-links a:hover { color: var(--warm); }
.legal { margin-top: 24px; color: #4f4c49; font: 9px/1.4 var(--display); }

@media (max-width: 880px) {
	.hero { grid-template-columns: 1fr; gap: 40px; padding-top: 68px; }
	.voice-card { max-width: 560px; }
	.feature-card, .link-card, .step { grid-column: span 6; }
	.stat-primary { grid-column: span 6; }
	.stat-wide, .stat-health { grid-column: 1 / -1; }
	.totals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.content-layout { grid-template-columns: 1fr; gap: 18px; }
	.aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.aside-card + .aside-card { margin-top: 0; }
}
@media (max-width: 680px) {
	.shell { width: min(100% - 22px, 1160px); }
	.site-nav { align-items: flex-start; padding: 14px 0; }
	.brand strong { display: none; }
	.navlinks { flex-wrap: wrap; justify-content: end; }
	.navlinks a { padding: 7px 6px; font-size: 9px; }
	.hero, .page-hero { padding-top: 50px; }
	.section { padding: 52px 0; }
	.section-head { display: block; }
	.section-head p { margin-top: 13px; }
	.feature-card, .link-card, .step, .stat-primary { grid-column: 1 / -1; }
	.totals-grid { grid-template-columns: 1fr; }
	.download-panel { grid-template-columns: 1fr; }
	.aside { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-links { justify-content: start; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.link-card { transition: none; }
}