* { box-sizing: border-box; }
    :root { color-scheme: dark; scroll-behavior: smooth; }
    body { margin: 0; background: #111c1a; color: #f2f2e8; font: 17px/1.65 system-ui, sans-serif; }
    ::selection { background: #d4e99c; color: #15241d; }
    a { color: #d4e99c; text-underline-offset: 5px; }
    a:hover { color: #f1ffd4; }
    :focus-visible { outline: 2px solid #d4e99c; outline-offset: 5px; }
    header, main, footer { width: min(1100px, 100%); margin-inline: auto; padding-inline: clamp(20px, 5vw, 60px); }
    header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 24px; border-bottom: 1px solid #43534b; }
    header a { font-size: 22px; font-weight: 700; text-decoration: none; }
    header span { color: #b9c7be; font-size: 14px; align-self: center; }
    main { padding-block: 48px 60px; }
    h1 { max-width: 20ch; margin: 0; font: 500 clamp(38px, 5.5vw, 64px)/1.09 Georgia, serif; letter-spacing: -.025em; text-wrap: balance; }
    h2 { margin: 0 0 16px; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
    p { max-width: 70ch; margin: 0 0 18px; color: #c5d0c8; }
    .intro { max-width: 900px; }
    .intro p { margin-top: 6px; }
    nav { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 28px; }
    section { margin-top: 64px; scroll-margin-top: 24px; }
    .calculator { padding: clamp(20px, 4vw, 36px); background: #1a2c24; border: 1px solid #48604b; border-radius: 10px; }
    .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-block: 24px; }
    label { display: block; color: #e2e8df; }
    input { display: block; width: 100%; margin-top: 9px; padding: 12px 14px; background: #111c1a; color: #f2f2e8; border: 1px solid #81927e; border-radius: 5px; font: inherit; font-size: 24px; font-variant-numeric: tabular-nums; caret-color: #d4e99c; }
    output { display: block; padding-block: 22px 6px; border-top: 1px solid #48604b; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: #d4e99c; }
    .note { margin: 12px 0 0; font-size: 14px; }
    .table-wrap { overflow-x: auto; margin-block: 24px; }
    table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
    caption { text-align: left; margin-bottom: 12px; color: #c5d0c8; }
    th, td { padding: 14px 14px 14px 0; text-align: left; border-bottom: 1px solid #43534b; }
    th { color: #d4e99c; font-size: 14px; font-weight: 600; }
    li { max-width: 68ch; color: #c5d0c8; margin-block: 12px; padding-left: 5px; }
    .reading { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
    footer { border-top: 1px solid #43534b; padding-block: 24px; color: #b9c7be; font-size: 14px; }
    footer p { margin: 0; }
    @media (max-width: 700px) {
      .intro, .reading { grid-template-columns: 1fr; gap: 22px; }
      main { padding-top: 32px; }
      section { margin-top: 44px; }
    }
    @media (max-width: 450px) { .fields { grid-template-columns: 1fr; } }
    @media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }
  
button,.action { display:inline-block; background:#d4e99c;color:#15241d;border:1px solid #d4e99c;border-radius:5px;padding:11px 18px;font:inherit;font-weight:650;text-decoration:none;cursor:pointer }
button:hover,.action:hover {background:#f1ffd4;color:#15241d} button:disabled{opacity:.5;cursor:default}
select{display:block;width:100%;font:inherit;padding:12px;background:#111c1a;color:#f2f2e8;border:1px solid #81927e;border-radius:5px;margin-top:9px}
.form-row{display:flex;align-items:end;gap:14px;flex-wrap:wrap}.form-row label{flex:1;min-width:170px}.form-row button{margin-bottom:1px}
.tool-actions{margin-top:18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}code{overflow-wrap:anywhere;font-size:16px}
#tool-status{color:#d4e99c;margin-top:18px}input[aria-invalid=true]{border-color:#f0a394}
.sources{padding-top:20px;border-top:1px solid #43534b}input::placeholder{color:#a6b8ab;opacity:1}
@media(max-width:550px){.form-row{display:block}.form-row button{margin-top:14px}.tool-actions a{max-width:100%;overflow-wrap:anywhere}}