:root {
  --ds-ink: #202c24;
  --ds-ink-soft: #405044;
  --ds-muted: #657066;
  --ds-paper: #faf9f4;
  --ds-paper-soft: #f0f1e9;
  --ds-line: #dce0d5;
  --ds-accent: #336448;
  --ds-accent-ink: #ffffff;
  --ds-warn: #91621c;
  --ds-ok: #336448;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; }
button:hover:not(:disabled), .ds-btn:hover { filter: brightness(.96); }
a { transition: color .15s; }
p { max-width: 68ch; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 10; background: var(--ds-paper); padding: 12px; }
.skip-link:focus { top: 12px; }
.site-header { border-bottom: 1px solid var(--ds-line); }
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 88px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ds-ink); text-decoration: none; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }
.brand img { width: 37px; height: 37px; }
.header-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.header-nav a { color: var(--ds-ink-soft); font-size: var(--ds-font-small); text-decoration: none; font-weight: 600; padding-block: 8px; }
.header-nav a:hover { color: var(--ds-accent); }
.hero { padding-block: 48px 30px; }
.hero-heading { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: var(--ds-font-small); font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-accent); margin-bottom: 15px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--ds-accent); border-radius: 50%; }
.hero p { margin-bottom: 16px; color: var(--ds-ink-soft); }
.hero-art { width: 150px; height: 130px; transform: rotate(-5deg); }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; color: var(--ds-muted); font-size: var(--ds-font-small); }
.trust-row span::before { content: "\2713"; color: var(--ds-accent); margin-right: 6px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 22px; align-items: stretch; }
.counter-card { position: relative; overflow: hidden; padding: 24px 28px; background: var(--ds-paper-soft); border: 1px solid var(--ds-line); border-radius: 18px; }
.card-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.label { font-size: var(--ds-font-small); letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--ds-muted); }
.badge { display: inline-flex; gap: 7px; align-items: center; color: var(--ds-accent); font-size: var(--ds-font-small); }
.badge::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.counter-value { display: block; font-size: calc(var(--ds-font-body) * 5.8); font-weight: 800; line-height: 1.15; letter-spacing: -.07em; margin-block: 14px 3px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.counter-subtitle { color: var(--ds-muted); margin-bottom: 20px; }
.counter-actions { display: grid; grid-template-columns: 56px 1fr; gap: 10px; }
.counter-actions .ds-btn { min-height: 63px; }
.minus { padding-inline: 12px; background: var(--ds-paper); }
.batch-row { display: flex; gap: 10px; margin-top: 12px; }
.batch-row button { flex: 1; background: var(--ds-paper); padding: 10px; }
.custom-batch { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 12px; }
.field-label { display: block; margin-bottom: 7px; }
input { min-width: 0; width: 100%; min-height: 46px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); color: var(--ds-ink); background: var(--ds-paper); padding: 9px 12px; }
.custom-batch label { align-self: center; }
.custom-batch input { max-width: 130px; margin-left: 8px; }
.counter-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--ds-line); }
.text-button { background: transparent; border: 0; padding: 8px 0; color: var(--ds-accent); font-size: var(--ds-font-small); font-weight: 650; cursor: pointer; min-height: 44px; }
.keyboard-hint { color: var(--ds-muted); font-size: var(--ds-font-small); }
.side-stack { display: grid; gap: 18px; }
.goal-card { border-radius: 18px; }
.goal-title { display: flex; justify-content: space-between; align-items: center; }
.goal-icon { color: var(--ds-warn); font-size: calc(var(--ds-font-body) * 1.4); }
.goal-fields { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.goal-fields label { flex: 1; }
.goal-fields input { width: 100px; }
.progress-label { display: flex; justify-content: space-between; gap: 10px; margin-block: 17px 8px; font-size: var(--ds-font-small); color: var(--ds-muted); }
progress { display: block; width: 100%; height: 9px; appearance: none; border: 0; border-radius: 8px; overflow: hidden; background: var(--ds-line); accent-color: var(--ds-accent); }
progress::-webkit-progress-bar { background: var(--ds-line); }
progress::-webkit-progress-value { background: var(--ds-accent); border-radius: 8px; }
progress::-moz-progress-bar { background: var(--ds-accent); }
.goal-note { color: var(--ds-muted); margin: 12px 0 0; }
.stats-card { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--ds-paper-soft); border-radius: 18px; }
.stat strong { display: block; font-size: calc(var(--ds-font-body) * 1.8); font-weight: 750; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat span { display: block; color: var(--ds-muted); font-size: var(--ds-font-small); margin-top: 6px; }
.status { min-height: 1.75em; margin-block: 15px 0; color: var(--ds-muted); font-size: var(--ds-font-small); }
.storage-note { margin: 8px 0 0; color: var(--ds-warn); }
.utility-row { display: flex; gap: 22px; justify-content: flex-end; flex-wrap: wrap; margin-top: 9px; }
.section-rule { border-top: 1px solid var(--ds-line); }
.section-intro { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-intro p { color: var(--ds-muted); max-width: 48ch; margin: 8px 0 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step-number { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ds-line); border-radius: 50%; color: var(--ds-accent); font-weight: 750; margin-bottom: 18px; }
.steps p, .guide-card p { color: var(--ds-muted); }
.odds-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.odds-form { padding: 26px; background: var(--ds-paper-soft); border-radius: 18px; }
.odds-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.odds-fields label { display: block; margin-bottom: 8px; }
.odds-result { display: block; font-size: calc(var(--ds-font-body) * 2.8); font-weight: 800; letter-spacing: -.05em; line-height: 1.2; margin: 25px 0 8px; }
.odds-form p { margin-bottom: 0; }
.note { border-left: 3px solid var(--ds-warn); padding-left: 18px; color: var(--ds-ink-soft); }
.formula { padding: 16px 20px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); }
table { width: 100%; border-collapse: collapse; text-align: left; min-width: 580px; }
th, td { padding: 15px 20px; border-bottom: 1px solid var(--ds-line); }
th { background: var(--ds-paper-soft); font-weight: 650; }
tr:last-child td { border-bottom: 0; }
.faq { max-width: 900px; }
details { border-bottom: 1px solid var(--ds-line); }
summary { cursor: pointer; font-weight: 650; padding-block: 20px; padding-right: 28px; }
details p { padding-bottom: 15px; color: var(--ds-ink-soft); }
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guide-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ds-ink); }
.guide-card .label { margin-bottom: 18px; }
.guide-card p { margin-bottom: 18px; }
.guide-card .card-link { margin-top: auto; color: var(--ds-accent); font-weight: 650; }
.guide-card:hover { border-color: var(--ds-accent); }
.source-note { background: var(--ds-paper-soft); padding: 24px; border-radius: var(--ds-radius); margin-top: 28px; }
.source-note p:last-child { margin-bottom: 0; }
.article-header { padding-block: 50px 30px; }
.breadcrumb { color: var(--ds-muted); font-size: var(--ds-font-small); margin-bottom: 24px; }
.article { max-width: 850px; margin-inline: auto; padding-bottom: var(--ds-space-lg); }
.article h2 { margin-top: 42px; }
.article h3 { margin-top: 30px; }
.article ul, .article ol { max-width: 68ch; }
.article .ds-btn { margin-top: 12px; }
.article .table-wrap { margin-block: 24px; }
.site-footer { background: var(--ds-paper-soft); }
.site-footer .ds-fineprint { font-size: var(--ds-font-small); }
.site-footer .ds-wrap > p:first-child { font-size: var(--ds-font-small); }
.site-footer strong { color: var(--ds-ink); }
.site-footer nav a { min-height: 32px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 850px) {
  .workspace { grid-template-columns: 1.4fr 1fr; }
  .counter-card { padding-inline: 22px; }
  .custom-batch { grid-template-columns: 1fr; }
  .hero-art { width: 110px; height: 100px; }
  .section-intro { display: block; }
}
@media (max-width: 640px) {
  h1 { font-size: clamp(2.1rem, 8vw, 2.4rem); }
  .header-inner { min-height: 76px; flex-wrap: wrap; gap: 8px; padding-block: 14px; }
  .header-nav { gap: 16px; }
  .hero { padding-top: 24px; }
  .hero .eyebrow { display: none; }
  .hero .trust-row { margin-top: 12px; }
  .hero-heading { display: block; }
  .hero-art { display: none; }
  .workspace, .odds-layout, .steps, .guides-grid { grid-template-columns: 1fr; }
  .counter-card { padding: 20px; }
  .counter-value { margin-top: 10px; }
  .side-stack { grid-template-columns: 1fr; }
  .counter-actions .ds-btn { width: auto; }
  .batch-row .ds-btn { width: auto; }
  .custom-batch { grid-template-columns: 1fr auto; }
  .custom-batch .ds-btn { width: auto; padding-inline: 15px; }
  .custom-batch input { max-width: 100px; }
  .steps { gap: 22px; }
  .step-number { margin-bottom: 10px; }
  .utility-row { justify-content: flex-start; }
  .odds-fields { gap: 12px; }
  .odds-form { padding: 20px; }
  .article-header { padding-top: 32px; }
}