:root {
  --ink: #1c1b17;
  --paper: #fbfaf6;
  --card: #fffefb;
  --rule: #cfcbbd;
  --hair: #e4e1d6;
  --muted: #6b6a60;
  --accent: #c2410c;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

body, body.bg-slate-50 { background: var(--paper); color: var(--ink); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; }
h1 { letter-spacing: -0.02em; }
.num { font-family: var(--serif) !important; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; }

.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl { border-radius: 2px; }
.shadow-sm, .shadow-lg, .shadow-md { box-shadow: none !important; }
.bg-white, .bg-white.border { background-color: var(--card); }
.bg-slate-50 { background-color: #f3f1ea; }
.border-slate-200 { border-color: var(--hair); }
.border-slate-300 { border-color: var(--rule); }
.text-slate-400 { color: #8a887c; }
.text-slate-500, .text-slate-600 { color: var(--muted); }
.text-slate-700, .text-slate-800, .text-slate-900 { color: var(--ink); }
.text-rose-600 { color: var(--accent) !important; }

header, header.bg-white { background: var(--paper); border-bottom: 1px solid var(--ink); }
header a > span.w-8 { display: none; }
header a.font-extrabold { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.01em; }

.nav-tabs, .nav-tabs.bg-slate-100 { background: transparent; padding: 0; border-radius: 0; gap: 0.35rem; }
.nav-tabs a, .nav-tabs a.bg-white {
  background: transparent !important; box-shadow: none !important; border-radius: 0;
  border-bottom: 2px solid transparent; padding: 0.3rem 0.45rem; color: var(--muted);
}
.nav-tabs a:hover { color: var(--ink); }
.nav-tabs a.bg-white { color: var(--ink) !important; border-bottom-color: var(--accent); }

[role="tablist"], [role="tablist"].bg-slate-100 {
  background: transparent; padding: 0; border-radius: 0; gap: 0; border-bottom: 0.5px solid var(--rule);
}
.toggle-btn, .toggle-btn.bg-white {
  background: transparent !important; box-shadow: none !important; border-radius: 0;
  border-bottom: 2px solid transparent; color: var(--muted);
}
.toggle-btn.bg-white { color: var(--ink) !important; border-bottom-color: var(--accent); }

section.border-2.border-slate-900 {
  border: 1px solid var(--ink); border-top: 3px solid var(--ink); border-radius: 0; background: var(--card); overflow: hidden;
}
div.border-2.border-slate-900 {
  border-width: 1px 0 0.5px 0; border-color: var(--ink) var(--ink) var(--rule) var(--ink); border-radius: 0; background: transparent;
}

.bg-slate-900 {
  background: transparent !important; color: var(--ink);
  border-top: 1px solid var(--ink); border-radius: 0;
}
.bg-slate-900.text-white, .bg-slate-900 .text-white { color: var(--ink); }
.bg-slate-900 .text-slate-300 { color: var(--muted); }
.bg-slate-900 .text-brand-400 { color: var(--ink); }
.bg-slate-900 .num.text-2xl, .bg-slate-900 .text-2xl.num { font-size: 2.6rem; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.bg-slate-900.inline-flex { border: 0; padding-left: 0; padding-right: 0; }
.bg-slate-900.py-2\.5:not(.inline-flex) {
  border-top: 0; border-bottom: 0.5px solid var(--rule); color: var(--muted);
  font-family: 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
}
.bg-slate-900.py-2\.5:not(.inline-flex) .text-white, .bg-slate-900.py-2\.5:not(.inline-flex) .text-slate-300 { color: var(--muted); }
.bg-slate-900.py-2\.5:not(.inline-flex) .text-brand-400 { color: var(--accent); }
.bg-slate-900.py-2\.5:not(.inline-flex) .num { font-family: 'Inter', sans-serif !important; font-size: 0.7rem; }

input[type="number"], input[type="text"], select, textarea {
  background: transparent; border-width: 0 0 1px 0; border-color: var(--ink); border-radius: 0;
  font-family: var(--serif); font-size: 1.1rem;
}
input[type="number"]:focus, input[type="text"]:focus, select:focus, textarea:focus {
  outline: none; box-shadow: 0 1px 0 0 var(--accent) !important; border-color: var(--accent);
}

.btn-feedback { background: transparent; border: 1px solid var(--ink) !important; border-radius: 2px; color: var(--ink); }
.btn-feedback:hover { background: var(--ink); color: var(--paper); }
.bg-brand-500 { background-color: var(--ink) !important; }
.hover\:bg-brand-600:hover { background-color: #3a382f !important; }
.hover\:bg-brand-50:hover, .bg-brand-50 { background-color: #fdf3ec; }

.ad-slot {
  background: none !important; border: 0.5px solid var(--rule) !important; border-radius: 0 !important;
  color: #9a978a !important; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem !important;
}

#chart-bar { height: 12px; border-radius: 0; background: transparent; border: 0.5px solid var(--ink); }
#chart-bar .bg-brand-500, #chart-legend .bg-brand-500 { background-color: var(--ink) !important; }
#chart-bar .bg-amber-400, #chart-legend .bg-amber-400 { background-color: var(--accent) !important; }
#chart-bar .bg-rose-400, #chart-legend .bg-rose-400 { background-color: #a8a294 !important; }

article > div.bg-white { background: var(--card); }
footer, footer.bg-white { background: transparent; border-top: 1px solid var(--ink); }

#cookie-banner > div { border: 1px solid var(--ink); border-radius: 2px; background: var(--card); }

article > div > h2:first-child { border-top: 1px solid var(--ink); padding-top: 0.9rem; }

#guide > div > p:first-of-type::first-letter {
  float: left; font-family: var(--serif); font-size: 3.6rem; line-height: 0.8; padding: 0.4rem 0.55rem 0 0; color: var(--accent);
}

input[type="range"] { accent-color: var(--accent); }