:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #10191d;
  color: #eef5ef;
  line-height: 1.45;
  --muted: #b4c5c1;
  --mint: #9be2bd;
  --line: #344548;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 9% 21%, #21352f80, transparent 48%); }
a { color: var(--mint); text-underline-offset: 3px; }
a:hover { color: #d0f2dc; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shell { width: min(100%, 1250px); margin: auto; padding: 0 clamp(20px, 5vw, 70px); }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
header { min-height: 78px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 25px; color: #f3f6f2; font-weight: 680; letter-spacing: -.055em; }
.brand em { color: var(--mint); font-style: normal; font-weight: 470; }
.account { font-size: 14px; font-weight: 600; text-decoration: none; }
.account:hover, footer a:hover { text-decoration: underline; }
main { padding: clamp(32px, 5vw, 64px) 0 44px; }
h1, h2, h3, p, dl, dd, fieldset { margin: 0; }
h1 { font-size: clamp(40px, 5.7vw, 75px); font-weight: 620; line-height: 1.04; letter-spacing: -.063em; }
h1 em { color: var(--mint); font-style: normal; }
.introduction > p { max-width: 62ch; margin-top: 13px; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); }
.columns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: clamp(20px, 4.3vw, 62px); margin-top: 30px; }
.entry { min-width: 0; padding: clamp(20px, 2.7vw, 38px); background: linear-gradient(145deg, #202d30, #192428); border: 1px solid #3c4c4e; border-radius: 20px; }
h2 { font-size: clamp(22px, 2.25vw, 31px); line-height: 1.15; font-weight: 640; letter-spacing: -.035em; }
h3 { font-size: 18px; font-weight: 625; letter-spacing: -.025em; }
form { margin-top: 22px; }
fieldset { padding: 0; border: 0; min-inline-size: 0; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 15px; }
label { display: grid; align-content: start; gap: 6px; color: #e3ede7; font-size: 14px; font-weight: 560; }
input, select { width: 100%; min-width: 0; min-height: 45px; border: 1px solid #536468; border-radius: 8px; background: #142025; color: #eff5f1; padding: 9px 11px; font-size: 16px; }
input::placeholder { color: #9eaeab; }
input[aria-invalid=true] { border-color: #ffa997; }
.unit { display: block; position: relative; }
.unit input { padding-right: 48px; }
.unit > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); }
.method { margin-top: 16px; color: var(--muted); }
summary { width: fit-content; font-size: 14px; font-weight: 560; }
summary:hover { color: #dcf0e4; }
.method summary span { color: var(--mint); margin-left: 4px; }
.method label { margin-top: 11px; }
.payments { margin: 22px 0; padding-top: 20px; border-top: 1px solid var(--line); }
.payments > p, .explanation p, .privacy, .example p { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.payment { padding: 11px 13px; margin: 12px 0; background: #162326; border-radius: 9px; border: 1px solid var(--line); }
.payment legend { padding: 0 5px; font-size: 13px; color: #cbddd3; }
.primary, .secondary { min-height: 44px; border-radius: 8px; padding: 9px 15px; font-weight: 640; }
.primary { display: flex; gap: 14px; align-items: center; justify-content: center; width: 100%; border: 0; background: var(--mint); color: #123626; }
.primary:hover { background: #b9efd1; }
.secondary { margin-top: 12px; background: none; border: 1px solid #536a63; color: #bce8ce; }
.secondary:hover { background: #273d34; }
.remove { margin-top: 6px; padding: 8px 0; background: none; border: 0; color: #c7d9d1; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
button:disabled { opacity: .6; cursor: default; }
.error { border-left: 3px solid #f7a99f; margin: 0 0 12px; padding: 7px 11px; color: #ffc1b4; font-size: 14px; }
.balance { padding: clamp(22px, 2.6vw, 36px); border-radius: 18px; background: linear-gradient(125deg, #e7f3e8, #c4e1c9); color: #183e31; box-shadow: 0 8px 32px #04100b19; }
.kicker { color: #365d48; font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.amount { font-size: clamp(30px, 3vw, 43px); font-weight: 630; line-height: 1.17; letter-spacing: -.055em; overflow-wrap: anywhere; margin: 12px 0 4px; }
#result-date { font-size: 14px; color: #3e634e; }
dl { border-top: 1px solid #9dbcaa; margin-top: 21px; padding-top: 10px; font-size: 14px; }
dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
dd { text-align: right; font-weight: 620; overflow-wrap: anywhere; }
.explanation, .privacy { margin: 17px 4px 0; }
.explanation p { max-width: 55ch; }
.privacy { border-top: 1px solid var(--line); padding-top: 15px; font-size: 13px; }
.example { border-top: 1px solid var(--line); padding-top: 23px; margin-top: 34px; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(20px, 4.3vw, 62px); }
.example h2, .example h3 { font-size: 18px; }
.example strong { color: #deebdf; }
footer { padding: 20px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
footer a { text-decoration: none; }
@media (max-width: 730px) {
  .columns, .example { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  header { min-height: 64px; }
  .brand { font-size: 22px; }
  .brand img { width: 35px; height: 35px; }
  .account { font-size: 13px; }
  .columns { margin-top: 21px; }
}
@media (max-width: 440px) {
  .shell { padding-inline: 17px; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .entry { padding: 19px; }
  footer { flex-wrap: wrap; row-gap: 8px; }
}