:root{--ink:#17243b;--blue:#004aac;--blue-dark:#073179;--light:#eaf1ff;--bg:#f4f7fb;--line:#dbe4f1;--muted:#53657f;--green:#08745e}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.58 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
.wrapper{width:min(calc(100% - 32px),1150px);margin-inline:auto}
header{background:#080f35;padding:16px 0;box-shadow:0 3px 12px #101f3c20}header img{width:172px;height:auto;max-width:100%;display:block}
main{padding:28px 0 64px}main>nav{font-size:.87rem;color:var(--muted)}a{color:var(--blue);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}h1{font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.035em;line-height:1.15;color:#123779;max-width:870px;margin:20px 0 10px}h2{font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.25;letter-spacing:-.02em;margin:0 0 12px}h3{font-size:1.08rem;line-height:1.3;margin:0 0 8px}p{margin:0 0 15px}main>p:first-of-type{color:#425571;max-width:900px;font-size:1.08rem;margin:0 0 24px}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(17px,3vw,34px);margin:22px 0;box-shadow:0 8px 22px #152d4f09}
.section-heading,.result-top,.visual-title{display:flex;align-items:start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.section-heading p{color:var(--muted);max-width:760px}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.11em;font-size:.73rem;font-weight:800;color:var(--blue);margin-bottom:9px}.mini-pill{font-size:.72rem;color:var(--blue);background:var(--light);border:1px solid #cbdcff;border-radius:30px;padding:6px 12px;font-weight:700;white-space:nowrap}
.form-section{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}.form-heading{display:flex;align-items:center;gap:12px;margin-bottom:15px}.form-heading p{font-size:.86rem;margin:0;color:var(--muted)}.step{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;background:#e9f0fc;color:var(--blue);font-weight:800}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}.field{min-width:0}.field label{display:block;font-size:.87rem;font-weight:680;margin-bottom:5px}.field input:not([type=checkbox]){display:block;width:100%;min-width:0;padding:11px 12px;border:1.5px solid #bdcce0;border-radius:10px;background:#fff;font:inherit;color:var(--ink);transition:border .15s,box-shadow .15s}.field input:focus-visible{outline:2px solid #75a7ed;outline-offset:2px}.field input:hover{border-color:#749fdc}.field small{display:block;font-size:.76rem;color:var(--muted);margin:5px 0 0;line-height:1.45}.full-span{grid-column:1/-1}
.switch-label{display:flex!important;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line);background:#f8faff;border-radius:11px;font-weight:400!important;margin:0!important;cursor:pointer}.switch-label input{width:18px;height:18px;flex:none;accent-color:var(--blue)}.switch-label strong{display:block;font-size:.88rem}.switch-label small{margin:1px 0 0!important;font-weight:400}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:25px}.actions button{font:inherit;font-weight:700;cursor:pointer;border-radius:10px;padding:12px 18px;border:1px solid transparent;min-height:46px;transition:transform .12s,box-shadow .12s}.actions button:hover{transform:translateY(-1px)}.primary{background:var(--blue);color:#fff}.primary:hover{background:var(--blue-dark);box-shadow:0 8px 15px #004aac30}.secondary{background:#eef4ff;color:#003d95!important;border-color:#d2e1f8!important}.text-button{background:transparent;color:var(--muted)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #75a7ed;outline-offset:3px}#form-error{color:#a02325;background:#fff0f0;border:1px solid #efbbbb;border-radius:8px;padding:10px 13px;margin:16px 0 0}
.result-top{align-items:center;margin-bottom:18px}#result-status{color:var(--green);font-weight:750;font-size:.86rem}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric{background:#f5f8fd;border:1px solid #e1eafa;border-radius:14px;padding:15px;min-width:0}.metric.featured{color:#fff;background:linear-gradient(125deg,#004aac,#1b67c9);border-color:#004aac}.metric>span{display:block;font-weight:700;font-size:.82rem;line-height:1.35}.metric strong{display:block;font-size:clamp(1.7rem,3vw,2.65rem);letter-spacing:-.03em;line-height:1.12;margin:11px 0}.metric small{display:block;font-size:.74rem;line-height:1.35;color:#576987}.metric.featured small{color:#e4edff}
.result-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;margin-top:18px}.visual-panel,.detail-panel{border-radius:15px;border:1px solid var(--line);padding:18px;min-width:0}.visual-panel{background:#f9fbff}.visual-title{align-items:center;margin-bottom:12px}.visual-title h3{margin:0}#layout-diagram{max-width:100%;background:linear-gradient(145deg,#e3ebf7,#d6e3f4);border-radius:10px;padding:16px;min-height:200px;display:grid;place-items:center;overflow:hidden}#layout-diagram svg{display:block;width:100%;max-width:510px;height:auto;max-height:320px}#layout-diagram .box-shape{fill:#2270bb;stroke:#fff;stroke-width:1.1}#layout-diagram .box-shape.alt{fill:#22a5a2}.diagram-note,.subtle{font-size:.8rem;color:var(--muted);line-height:1.5;margin:10px 0 0}.details{margin:8px 0}.details>div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #e5eaf3;gap:10px;padding:11px 0}.details dt{color:var(--muted);font-size:.87rem}.details dd{margin:0;font-weight:750;text-align:right;font-size:.92rem;overflow-wrap:anywhere}.notice{margin:18px 0 0;border:1px solid #f0ddb5;background:#fffbf0;color:#6b501a;padding:13px 16px;border-radius:11px;font-size:.87rem}.empty-result{padding:16px;background:#fff4ef;border-radius:10px;color:#7b311b}
.content-panel{line-height:1.7}.content-panel h2:not(:first-child){margin-top:30px}.content-panel h3{margin-top:21px}.content-panel li{margin:9px 0}.content-panel details{border-top:1px solid var(--line);padding:15px 0}.content-panel details:last-of-type{border-bottom:1px solid var(--line)}.content-panel summary{font-weight:740;cursor:pointer}.content-panel details p{margin:10px 0 0;color:#4a5b75}.source-note{font-size:.83rem;color:var(--muted);margin-top:20px} .panel a{font-weight:600}
@media(max-width:820px){.fields.three{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.result-grid{grid-template-columns:1fr}}
@media(max-width:470px){.wrapper{width:calc(100% - 24px)}main{padding-top:22px}h1{font-size:1.85rem}.panel{padding:16px;margin:15px 0;border-radius:15px}.fields,.fields.three{grid-template-columns:1fr;gap:13px}.metric{padding:12px}.metric strong{font-size:1.8rem}.actions button{width:100%}.mini-pill{white-space:normal}.step{height:34px;flex-basis:34px}.form-heading{align-items:start}.details>div{flex-wrap:wrap}.details dd{text-align:left}}
@media print{header,.calculator,main>nav,.actions,.content-panel,main>p:last-child,footer{display:none!important}body{background:#fff}.wrapper{width:100%}.panel{box-shadow:none;border:0;padding:0}.result-panel{display:block!important}main{padding:0}.result-grid{grid-template-columns:1fr 1fr}#layout-diagram{min-height:0}.notice{font-size:.8rem}.metric.featured{background:#eef4fd;color:#132b50}.metric.featured small{color:#34506f}}