/* taxjson.github.io — one cool "ledger paper" look. */
:root {
  --bg:#f6f7f4; --ink:#141a17; --accent:#0f6e56; --accent-soft:#d8ece4; --dim:#4f5a55;
  --line:#d9dfdb; --card:#fff; --dark:#141a17; --dark-card:#1d2622; --dark-line:#2f3a35; --dark-text:#eef3f0; --dark-dim:#a9b5af;
  --display:ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body:-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }
body { margin:0; font-family:var(--body); color:var(--ink); background:var(--bg); line-height:1.55; font-size:16px }
a { color:inherit }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:6px }
.wrap { max-width:1080px; margin:0 auto; padding-inline:20px }

header.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:16px }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; letter-spacing:.02em; text-decoration:none; font-size:19px }
.brand img { width:32px; height:32px; border-radius:8px }
nav { display:flex; gap:20px; flex-wrap:wrap; justify-content:flex-end }
nav a { text-decoration:none; font-weight:600; font-size:15px; color:var(--dim) }
nav a:hover { color:var(--ink) }
@media (max-width:640px) { nav a.opt { display:none } }

h1, h2, h3 { font-family:var(--display); text-wrap:balance; letter-spacing:-.015em }
h1 { font-size:clamp(36px,5vw,56px); line-height:1.04; margin:0 0 18px; font-weight:800 }
h2 { font-size:clamp(26px,3.4vw,38px); line-height:1.1; margin:0 0 16px; font-weight:800 }
h3 { font-size:18px; line-height:1.25; margin:0 0 6px; font-weight:700 }
p { margin:0 0 10px }
.eyebrow { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 10px }
.lede { font-size:clamp(17px,2vw,19px); max-width:62ch }
.small { font-size:14px; color:var(--dim) }
code { font-family:var(--mono); font-size:.9em; background:rgba(20,26,23,.07); padding:1px 5px; border-radius:5px }
pre.block { font-family:var(--mono); font-size:13.5px; line-height:1.5; background:var(--dark); color:var(--dark-text); border-radius:12px; padding:16px 18px; overflow-x:auto; margin:0 }

section { padding-block:64px }
section.dark { background:var(--dark); color:var(--dark-text) }
.dark .eyebrow { color:#8fd3bd }
.dark .small, .dark .note { color:var(--dark-dim) }
.dark code { background:rgba(255,255,255,.1) }
.dark pre.block { background:var(--dark-card); border:1px solid var(--dark-line) }
.note { font-size:15px; color:var(--dim); max-width:80ch; margin-top:20px }

.hero { background:var(--accent-soft); padding-block:56px 60px; border-bottom:1px solid var(--line) }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:48px; align-items:center }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; gap:36px } }
.cta { display:flex; gap:12px; flex-wrap:wrap }
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:11px; font-weight:700; text-decoration:none; border:2px solid var(--ink); font-size:15px }
.btn.primary { background:var(--ink); color:var(--dark-text) }
.btn.ghost { color:var(--ink) }
.btn:hover { transform:translateY(-1px) }

.cmd { display:flex; align-items:stretch; background:var(--ink); color:#eef3f0; border-radius:12px; overflow:hidden; border:2px solid var(--ink); margin:18px 0 8px; max-width:640px }
.cmd pre { margin:0; padding:13px 16px; font-family:var(--mono); font-size:14px; overflow-x:auto; flex:1; white-space:pre }
.cmd button { border:0; background:var(--accent); color:#fff; font-weight:700; padding:0 16px; cursor:pointer; font-size:14px }
.cmd button:hover { filter:brightness(1.1) }

.term { background:var(--dark); color:var(--dark-text); border-radius:16px; border:1px solid var(--dark-line); box-shadow:0 18px 50px rgba(20,26,23,.22); overflow:hidden; font-family:var(--mono); font-size:12.5px; line-height:1.5 }
.term-bar { display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--dark-line); font-family:var(--body); font-size:12px; color:var(--dark-dim) }
.term-bar i { width:10px; height:10px; border-radius:50%; background:#3a4740; display:inline-block }
.term pre { margin:0; padding:14px 16px; overflow-x:auto }
.term .g { color:#8fd3bd } .term .d { color:var(--dark-dim) } .term .w { color:#f0c674 }

.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px }
.dark .card { background:var(--dark-card); border-color:var(--dark-line) }
.card p { font-size:15px; color:var(--dim); margin:0 }
.dark .card p { color:var(--dark-dim) }
.steps { counter-reset:s; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.step { position:relative; padding:20px 20px 20px 62px; background:var(--card); border:1px solid var(--line); border-radius:14px }
.step::before { counter-increment:s; content:counter(s); position:absolute; left:18px; top:18px; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; display:grid; place-items:center; font-family:var(--display) }
.step p { font-size:15px; color:var(--dim); margin:0 }
table.rules { width:100%; border-collapse:collapse; font-size:14.5px; margin-top:8px }
.rules th, .rules td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top }
.rules th { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim) }
.chips { display:flex; flex-wrap:wrap; gap:10px }
.chip { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-weight:600; font-size:14.5px }
details { border:1px solid var(--line); border-radius:12px; padding:14px 18px; background:var(--card); margin-bottom:10px }
summary { cursor:pointer; font-weight:700; font-family:var(--display) }
details p { margin-top:10px; color:var(--dim); font-size:15px }
.warn { border-left:4px solid var(--accent); padding:12px 16px; background:var(--accent-soft); border-radius:8px; font-size:15px; max-width:80ch }
footer { padding-block:36px; border-top:1px solid var(--line); font-size:14px; color:var(--dim) }
footer .links { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:10px }
footer a { text-decoration:none; font-weight:600 }