:root{color-scheme:light;--bg:#edf2f7;--surface:#f9fbfd;--glass:rgba(249,251,253,.84);--text:#172e46;--muted:#516478;--line:#c2cedb;--accent:#007bc5;--seed:#00a0ff;--companion:#ff3a3a;--wash:#e5eff8;--warning:#82531c;--danger:#a72b32;--shadow:0 20px 55px #263e5910, inset 0 1px 0 #ffffffcc}
:root[data-mode=dark]{color-scheme:dark;--bg:#111c2a;--surface:#1b2b3e;--glass:rgba(27,43,62,.9);--text:#ecf2fa;--muted:#b3c2d4;--line:#506174;--wash:#243c55;--warning:#f5c37a;--danger:#ffabb0;--shadow:0 20px 55px #00000022,inset 0 1px 0 #ffffff17}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.012em}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 88% 0%,color-mix(in srgb,var(--seed) 13%,transparent),transparent 55%),radial-gradient(ellipse at 1% 50%,color-mix(in srgb,var(--companion) 6%,transparent),transparent 48%)}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button,a{touch-action:manipulation}button{color:var(--text)}a{color:var(--accent);text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{border:1px solid var(--line);background:var(--surface);border-radius:12px;min-height:44px;padding:8px 15px}button:hover{border-color:var(--accent)}button:disabled{cursor:default;opacity:.65}h1,h2,h3,p{margin:0}h2{font-size:24px;line-height:1.25;letter-spacing:-.035em}p{color:var(--muted)}[hidden]{display:none!important}.skip{position:absolute;left:16px;top:-100px;background:var(--surface);padding:12px;z-index:20}.skip:focus{top:12px}.topbar{max-width:1280px;margin:auto;padding:25px 40px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{text-decoration:none;color:var(--text);font-size:24px;letter-spacing:-1.2px;font-weight:750}.brand-dot{color:var(--accent)}.top-actions{display:flex;gap:26px;align-items:center;font-size:13px}.private-note{color:var(--muted)}main{max-width:1200px;margin:auto;padding:0 40px}.intro{padding:65px 0 48px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.8px;display:flex;align-items:center;gap:9px;color:var(--muted)}.eyebrow span{width:6px;height:6px;background:var(--accent);border-radius:50%}h1{font-size:clamp(36px,4.2vw,58px);line-height:1.12;letter-spacing:-2.8px;font-weight:650;margin:18px 0}h1>span{color:var(--muted)}.intro p{font-size:16px;line-height:1.7}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.section-heading>h2{font-size:17px;letter-spacing:-.3px}.small{font-size:12px;color:var(--muted)}.questions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}.question{display:flex;text-align:left;align-items:center;gap:12px;padding:18px 16px;background:var(--glass);border-radius:17px}.question.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--surface)}.question-number{align-self:flex-start;font:11px/2 ui-monospace,monospace;color:var(--accent)}.question strong{font-size:14px;display:block}.question small{font-size:11px;color:var(--muted);display:block;margin-top:3px}.arrow{margin-left:auto;color:var(--accent)}.glass{background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:24px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.input-card,.result-card{padding:30px;min-width:0}.card-kicker{display:flex;justify-content:space-between;font-size:10px;font-weight:750;letter-spacing:1.7px;color:var(--muted);margin-bottom:22px}.card-kicker span{font-weight:400;letter-spacing:1px}.support{font-size:13px;line-height:1.6;margin-top:9px}.fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin:24px 0}.field{min-width:0}.field.full{grid-column:1/-1}label{display:block;font-size:12px;font-weight:650;margin-bottom:7px}.input-wrap{position:relative}input[type=text],input[type=number],select{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px;background:var(--surface);color:var(--text);min-height:48px}input[type=text],input[type=number]{font-size:19px;font-weight:550;font-variant-numeric:tabular-nums;padding-right:42px}select{font-size:14px}.unit{position:absolute;right:14px;top:13px;color:var(--muted);font-size:14px;pointer-events:none}.hint{display:block;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5}.presets{display:flex;gap:8px;margin-top:10px}.presets button{flex:1;font-size:11px;padding:5px;min-height:36px;background:var(--wash)}.calculate{width:100%;background:var(--accent);color:var(--button-text,#fff);border:0;font-size:14px;font-weight:700;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 15%,transparent)}.calculate:hover{filter:brightness(.93)}.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:10px;color:var(--muted)}.text-button{border:0;background:transparent;padding:6px 0;color:var(--accent);font-size:12px;text-decoration:underline;text-underline-offset:4px}.result-card{position:sticky;top:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,var(--seed)),var(--surface));border-color:color-mix(in srgb,var(--line) 75%,var(--seed))}.result-label{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}.big-answer{font-size:clamp(40px,5vw,66px);font-weight:600;line-height:1.2;letter-spacing:-2.5px;margin:12px 0 16px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.big-answer span{font-size:28px;color:var(--muted);letter-spacing:-1px}.explanation{font-size:14px;line-height:1.75;margin:14px 0 22px}.status{display:inline-block;padding:6px 10px;border:1px solid currentColor;border-radius:8px;color:var(--accent);font-size:11px;font-weight:650}.status.warn{color:var(--warning)}.status.danger{color:var(--danger)}.meter{height:8px;border-radius:8px;background:var(--line);margin-top:24px;overflow:hidden}.meter i{height:100%;display:block;background:var(--accent);border-radius:8px}.meter-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin:5px 0 20px}.metrics{margin:22px 0 0}.metric{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:12px 0;font-size:12px}.metric dt{color:var(--muted)}.metric dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums;text-align:right}.note{padding:14px 16px;background:var(--wash);border-radius:12px;font-size:12px;line-height:1.65;margin-top:15px}.result-actions{border-top:1px solid var(--line);margin-top:20px;display:flex;align-items:center;gap:14px}.stress-card{margin-top:24px;padding:28px 30px}.stress-card h2{font-size:22px;margin-top:9px}.pill{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:7px 12px;white-space:nowrap;color:var(--muted)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}th{text-align:left;color:var(--muted);font-weight:500;font-size:11px}th,td{padding:11px 10px;border-bottom:1px solid var(--line)}th:first-child,td:first-child{padding-left:0}td:last-child{text-align:right}th:last-child{text-align:right}.barcell{width:36%}.mini-bar{display:block;background:var(--line);height:5px;border-radius:8px;max-width:230px}.mini-bar i{display:block;background:var(--accent);height:100%;border-radius:8px}.row-danger{color:var(--danger)}.learn{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:65px 0}.learn h2{font-size:28px;margin:14px 0}.learn p{font-size:13px;line-height:1.8}details{border-bottom:1px solid var(--line);padding:15px 0}summary{font-size:13px;font-weight:600;cursor:pointer;min-height:30px}details p{margin:12px 0}details a{font-size:12px}footer{border-top:1px solid var(--line);padding:25px 0 35px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}footer a{color:var(--muted);text-decoration:none}footer strong{color:var(--text)}.appearance{max-width:1120px;margin:5px auto 0;padding:22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}.appearance>div{min-width:180px}.appearance p{width:100%}.check{display:flex;align-items:center;gap:8px;font-weight:400;margin:0;font-size:12px}.check input{width:20px;height:20px;accent-color:var(--accent)}input[type=color]{min-height:48px;width:100%;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.error{padding:12px;background:var(--surface);border:1px solid var(--danger);border-radius:9px;color:var(--danger);font-size:13px;margin-bottom:15px}[aria-invalid=true]{border-color:var(--danger)!important}.dirty{color:var(--warning);margin-bottom:16px;font-size:12px}.focus .secondary,.focus .intro{display:none}.focus #calculator{margin-top:35px}.solid body:before{display:none}.solid .glass{background:var(--surface);backdrop-filter:none;box-shadow:none}.solid .result-card{background:var(--surface)}
@media(max-width:900px){.question{padding:14px 12px;gap:9px}.question-number,.arrow{display:none}.input-card,.result-card{padding:24px}.workspace{gap:16px}.appearance{margin:5px 25px}.intro{padding-top:40px}.barcell{display:none}}
@media(max-width:650px){.topbar{padding:19px 20px}.brand{font-size:23px}.private-note{display:none}.top-actions button{font-size:12px}main{padding:0 20px}.intro{padding:35px 0 30px}h1{font-size:37px;letter-spacing:-1.7px;line-height:1.13}.intro p{font-size:14px}.eyebrow{font-size:9px;letter-spacing:1.3px}.desktop{display:none}.section-heading{align-items:flex-start;gap:10px}.section-heading>h2{font-size:16px}.section-heading>.small{display:none}.questions{grid-template-columns:1fr;gap:8px;margin-bottom:18px}.question{padding:13px 16px;gap:14px;border-radius:13px}.question-number,.arrow{display:block}.question-number{align-self:center}.question strong{font-size:13px}.question small{font-size:11px;margin:0}.workspace{grid-template-columns:1fr}.input-card,.result-card{padding:23px 20px;border-radius:20px}.result-card{position:static}.card-kicker{margin-bottom:17px}.fields-grid{gap:18px 12px}h2{font-size:23px}input[type=text],input[type=number]{font-size:18px}.big-answer{font-size:54px}.stress-card{padding:24px 20px;border-radius:20px}.stress-card .pill{display:none}.stress-card h2{font-size:22px}.learn{grid-template-columns:1fr;gap:20px;margin:40px 0}.learn h2{font-size:25px}footer{display:block;font-size:10px}footer span{display:block;margin-top:8px}.appearance{margin:0 20px;padding:18px;gap:15px}.appearance>div{flex:1;min-width:120px}.check{width:100%}.form-bottom{font-size:9px}.form-bottom .text-button{font-size:11px}.metric{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media(prefers-reduced-transparency:reduce){.glass{backdrop-filter:none;background:var(--surface)}body:before{display:none}}
@media(forced-colors:active){.glass,.question.active{border:1px solid CanvasText}.calculate{border:2px solid ButtonText}.meter,.mini-bar{border:1px solid CanvasText}}
@media print{body{background:white;color:black}.topbar,.questions,.appearance,.result-actions,.calculate,.form-bottom,footer{display:none}.workspace{display:block}.result-card{position:static}.glass{background:white;box-shadow:none;backdrop-filter:none;break-inside:avoid}.learn{display:block}.stress-card{break-inside:avoid}}

/* Control boundaries remain visible independently of decorative glass. */
:root{--control-line:#7a8b9e}:root[data-mode=dark]{--control-line:#899bb2}
input[type=text],input[type=number],select{border-color:var(--control-line)}
.hint{font-size:12px}.formula p{font-size:12px;line-height:1.8}.formula summary{font-size:12px}.metric dd{overflow-wrap:anywhere;min-width:0}.metric dt{min-width:0}

/* Keep the active question and its answer together in the first screen. */
.intro { padding: 24px 0 22px; }
.intro h1 { margin: 0 0 8px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; }
.questions { gap: 4px; padding: 4px; border: 1px solid var(--line); background: var(--wash); border-radius: 14px; }
.question { justify-content: center; border: 1px solid transparent; border-radius: 10px; padding: 8px; font-size: 15px; font-weight: 600; background: transparent; }
.question.active { box-shadow: none; color: var(--accent); }
.workspace { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); }
.result-card { position: static; }
.fields-grid { margin: 16px 0; gap: 12px 14px; }
.field label { font-size: 13px; }
input[type=text] { min-height: 43px; padding-block: 8px; }
.unit { top: 9px; }
.calculate { margin-top: 14px; justify-content: center; }
.result-label { font-size: 19px; color: var(--text); font-weight: 650; letter-spacing: -.02em; }
.big-answer { color: var(--accent); margin: 5px 0 4px; line-height: 1.1; }
.explanation { margin: 8px 0 20px; }
.comparisons { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); }
.comparison { padding: 16px 0 6px; min-width: 0; }
.comparison + .comparison { padding-left: 16px; margin-left: 16px; border-left: 1px solid var(--line); }
.comparison h3 { font-size: 15px; letter-spacing: -.02em; }
.comparison dl { margin: 8px 0; }
.comparison .metric { display: block; border: 0; padding: 3px 0; }
.comparison dd { text-align: left; font-size: 16px; }
.comparison .metric:last-child { margin-top: 5px; padding-top: 8px; border-top: 1px solid var(--line); }
.comparison .metric:last-child dd { font-size: 20px; }
.comparison-note { font-size: 12px; margin-top: 12px; }
.threshold-warning { color: var(--danger); border-left: 3px solid currentColor; padding-left: 12px; margin-bottom: 16px; font-size: 14px; }
.result-actions { margin-top: 4px; border: 0; }
.stress-card { padding: 14px 24px; }
.stress-card summary { min-height: 25px; }
.learn { display: block; margin: 24px 0; }
.learn details { padding: 10px 0; }
.learn summary { min-height: 24px; }
.focus .intro { display: block; }
.focus #calculator { margin-top: 0; }
@media(max-width:700px) {
  .workspace { grid-template-columns: 1fr; }
  .questions { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px; }
  .question { font-size: 13px; line-height: 1.25; padding: 8px 4px; text-align:center; }
  .comparisons { grid-template-columns: 1fr; }
  .comparison + .comparison { margin: 0; padding: 14px 0 6px; border: 0; border-top: 1px solid var(--line); }
  .comparison .metric { display: flex; }
  .comparison dd { text-align: right; }
}
@media(min-width:1050px) {
  .comparison .metric { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; }
  .comparison dd { text-align: right; }
  .comparison .metric:last-child { display: block; }
  .comparison .metric:last-child dd { text-align: left; }
}
@media(min-width:1050px) {
  .comparison { padding-top: 12px; }
  .comparison .metric { padding-block: 4px; }
}
.loan-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.loan-method, .scenario-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 14px 0; }
.loan-method button { font-size: 13px; line-height: 1.3; padding: 8px; }
.loan-method [aria-pressed=true] { border-color: var(--accent); background: var(--wash); color: var(--accent); }
.counterpart { font-size: 13px; margin: 7px 0 20px; color: var(--text); }
.counterpart:empty { margin-bottom: 14px; }
.presets-detail summary, #unit-details summary { padding-block: 3px; }
#unit-details label { margin-top: 10px; }
.fields-grid > .field:only-child { grid-column: 1 / -1; }
.scenario-row select { min-height: 44px; }