@font-face { font-family: 'Oswald'; src: url('/fonts/Oswald.ttf') format('truetype'); font-weight: 200 700; font-display: swap; }
:root { --red: #d7262e; }
* { box-sizing: border-box; }
body { margin: 0; background: #0b0c0e; color: #e9e9e6; font: 17px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
main { max-width: 700px; margin: 0 auto; padding: 28px 20px 60px; }
a { color: #fff; }
code { font-size: 14px; }
.back { display: inline-block; font: 500 14px/1 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .12em; text-decoration: none; color: #a4a6aa; margin-bottom: 26px; text-transform: uppercase; }
h1 { font: 700 clamp(34px, 9vw, 52px)/1 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .02em; margin: 0 0 8px; text-transform: uppercase; }
h1::after { content: ''; display: block; width: 64px; height: 4px; background: var(--red); margin-top: 16px; }
h2 { font: 600 20px/1.2 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .08em; margin: 34px 0 8px; text-transform: uppercase; }
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 26px 0; display: grid; gap: 14px; }
ol.steps li { counter-increment: s; display: flex; gap: 16px; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 14px; }
ol.steps li::before { content: counter(s); font: 700 34px/1 'Oswald', sans-serif; color: var(--red); min-width: 28px; }
.muted { color: #a4a6aa; font-size: 15px; }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
td, th { text-align: left; border-bottom: 1px solid rgba(255,255,255,.12); padding: 8px 6px; vertical-align: top; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 22px 0; }
.kpis div { border: 1px solid rgba(255,255,255,.2); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.kpis span { color: #a4a6aa; font-size: 14px; }
.kpis b { font: 700 40px/1 'Oswald', sans-serif; font-variant-numeric: tabular-nums; }
.kpis small { color: #a4a6aa; }
canvas { max-width: 100%; height: auto; border: 1px solid rgba(255,255,255,.12); }
img.final { width: 100%; max-width: 420px; display: block; border: 1px solid rgba(255,255,255,.2); }
.cta { display: inline-block; margin-top: 28px; background: #f3f3f1; color: #000; text-decoration: none; font: 700 18px/1 'Oswald', sans-serif; letter-spacing: .16em; padding: 16px 22px; }
footer { max-width: 700px; margin: 0 auto; padding: 0 20px 40px; }