:root{font-family:system-ui,sans-serif;color:#173349;background:#eef3f7;font-size:16px}*{box-sizing:border-box}body{margin:0}header{background:#112c43;color:white;padding:20px max(24px,calc((100vw - 1160px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px}header strong{font-size:19px}header span{font-size:14px;color:#c8d9e5}main{max-width:1208px;margin:36px auto;padding:0 24px}h1{font-size:clamp(28px,4vw,38px);letter-spacing:-1px;margin:0 0 10px}p{line-height:1.6} .intro{margin:0 0 28px;color:#4b6476}.layout{display:grid;grid-template-columns:340px 1fr;gap:24px}.panel{background:white;border:1px solid #d8e2ea;border-radius:16px;padding:26px}h2{font-size:20px;margin:0 0 20px}label{display:block;font-size:15px;font-weight:600;margin-bottom:7px}input,select{width:100%;font:inherit;padding:12px;border:1px solid #acbfce;border-radius:8px;color:#173349;background:white}input:focus,select:focus,button:focus-visible{outline:3px solid #61bce8;outline-offset:2px}.field{margin-bottom:19px}.hint{font-size:14px;line-height:1.5;color:#566c7c;margin:7px 0 0}button{width:100%;padding:14px;border:0;background:#112c43;color:white;font:inherit;font-weight:600;border-radius:8px;cursor:pointer}button:hover{background:#204a68}.summary{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:25px}.total{grid-column:1/-1;background:#112c43;color:white;border-radius:12px;padding:24px}.total span{color:#c6dbe7;font-size:15px}.total strong{display:block;font-size:clamp(28px,4vw,42px);overflow-wrap:anywhere;margin-top:6px}.metric strong{display:block;font-size:23px;margin-top:5px;overflow-wrap:anywhere}.metric span{font-size:14px;color:#536979}.legend{display:flex;gap:20px;font-size:14px;flex-wrap:wrap}.legend span:before{content:'';display:inline-block;width:16px;height:4px;background:#00866b;margin-right:7px;vertical-align:middle}.legend span+span:before{background:#567a99}.chart{width:100%;height:auto;display:block;margin:14px 0} .note{font-size:14px;color:#536979}details{margin-top:24px}summary{font-weight:600;cursor:pointer;font-size:17px}.table-wrap{overflow:auto;margin-top:16px}table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:14px}th,td{text-align:right;padding:12px 10px;border-bottom:1px solid #dde6ed}th:first-child,td:first-child{text-align:left}th{color:#526779}#error{color:#b42318;font-size:14px;line-height:1.5} .explanation{margin-top:24px}.explanation p{color:#536979;margin-bottom:0}.explanation h2{margin-bottom:8px}footer{max-width:1208px;margin:24px auto;padding:0 24px 24px;color:#536979;font-size:14px}@media(max-width:800px){.layout{grid-template-columns:1fr}main{margin-top:24px}.panel{padding:20px}header{padding:18px 24px}header span{display:none}}@media(max-width:420px){.summary{grid-template-columns:1fr}.total{grid-column:auto}main{padding:0 14px}.legend{gap:10px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}
/* Colour accents */
:root{background:#edf3ff}body{background:linear-gradient(135deg,#edf3ff 0%,#f4f8ff 55%,#e8f8f5 100%);min-height:100vh}header{background:linear-gradient(110deg,#153d9a,#176d9a);border-bottom:4px solid #2dd4bf}header span{color:#e1efff}h1{color:#173f94}.panel{box-shadow:0 8px 30px #193f8210}#calculator{background:#f5f8ff;border-top:5px solid #3566db}#calculator h2,label{color:#244c96}input,select{border-color:#9eb6e0}button{background:#2455c7;box-shadow:0 5px 12px #2455c726}button:hover{background:#193f9b}.total{background:linear-gradient(120deg,#214fb5,#117b8a)}.total span{color:#e2f4ff}.metric{padding:18px;border-radius:12px;background:#edf3ff;border:1px solid #d1dfff}.metric strong{color:#244fa9}.metric:nth-child(3){background:#e7f7f1;border-color:#bce8d8}.metric:nth-child(3) strong{color:#087355}.metric:nth-child(3).loss{background:#fff0ed;border-color:#f5c8bf}.metric:nth-child(3).loss strong{color:#ae3529}.legend span:before{background:#00866b}.legend span+span:before{background:#3566db}.chart{background:#f8fbff;border-radius:12px}summary{color:#244fa9}thead{background:#edf3ff}tbody tr:nth-child(even){background:#f7faff}.explanation{border-left:5px solid #138b80;background:#f2fbf8}.explanation h2{color:#086e65}
nav{display:flex;gap:18px;flex-wrap:wrap}nav a{color:white;font-size:14px;text-decoration:none}nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}header{flex-wrap:wrap}a{color:#2455c7}.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.tool{border-top:5px solid #3566db}.tool:nth-child(2){border-top-color:#138b80}.tool:nth-child(3){border-top-color:#d89212}.tool p{color:#536979}.tool a{display:inline-block;font-weight:600;margin-top:14px}details p{line-height:1.6}.positive{color:#087355}.negative{color:#ae3529}@media(max-width:800px){.tools{grid-template-columns:1fr}}