:root{--navy:#0a1c3d;--blue:#004aac;--blue2:#0e61d6;--pale:#eef5ff;--ink:#162840;--muted:#536681;--line:#dce6f4;--shadow:0 18px 40px rgba(18,51,99,.065)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f7fb;color:var(--ink);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
header{background:#040c31;padding:15px 0}
header img{width:168px;height:auto;display:block}
.wrapper{width:min(calc(100% - 36px),1220px);margin-inline:auto}
main{padding:24px 0 68px}
a{color:var(--blue);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
.breadcrumbs{display:flex;align-items:center;gap:11px;flex-wrap:wrap;color:var(--muted);font-size:.86rem;margin-bottom:23px}
.eyebrow{font-weight:850;color:#2461a9;font-size:.72rem;letter-spacing:.11em}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2rem,4.7vw,3.4rem);line-height:1.11;letter-spacing:-.037em;color:var(--navy);margin:15px 0 18px}
h2{font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.25;letter-spacing:-.015em;color:var(--navy);margin:8px 0 12px}
h3{font-size:1.12rem;margin:24px 0 9px;color:var(--navy)}
p{color:#4f627d}
.hero{background:linear-gradient(116deg,#f2f8ff,#e3edff 74%,#d8e7ff);border:1px solid #d3e2fa;border-radius:24px;padding:clamp(22px,4vw,46px);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr);gap:36px;align-items:center;overflow:hidden;margin-bottom:23px}
.hero p{font-size:1.02rem;max-width:720px;margin-bottom:20px}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px}
.hero-tags span{font-size:.79rem;font-weight:750;color:#214d89;border-radius:999px;background:#fff;padding:5px 11px}
.hero-art{display:grid;place-items:center;gap:12px;min-height:235px;position:relative}
.roof{position:relative;width:205px;height:155px;transform:skewY(-8deg) rotate(-7deg);background:#bfd8ff;border:10px solid #1d5ebc;border-radius:10px;box-shadow:14px 15px 0 #a2beeb,20px 23px 24px #8ba6d675}
.roof-inner{border:3px dashed #81a7db;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#1d539d;font-size:.8rem;font-weight:850;letter-spacing:.12em}
.roof-inner strong{font-size:3.5rem;line-height:1.1}
.roof i{position:absolute;width:35px;height:52px;background:#9fbfef;border-radius:5px;top:5px;right:-8px;opacity:.65}
.roof i:last-child{right:auto;left:10px;top:65px;height:29px}
.roof-caption{font-size:.81rem;color:#27558e;font-weight:750}
.workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);align-items:start;gap:20px}
.panel{background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow);padding:clamp(18px,2.5vw,30px);margin-bottom:20px}
.editor,.result-panel{min-width:0}
.section-title{margin-bottom:22px}
.section-title p{margin-bottom:0;max-width:660px}
.settings-title{border-top:1px solid var(--line);margin-top:30px;padding-top:25px}
.zones{display:grid;gap:14px}
.zone{margin:0;padding:15px 18px 19px;min-width:0;border:1px solid #dae4f5;border-radius:13px;background:#f9fbff}
.zone legend{font-weight:850;color:var(--blue);padding:0 7px}
.zone-top{display:flex;align-items:end;gap:12px;justify-content:space-between;margin-bottom:14px}
.zone-top label{width:100%;max-width:390px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.config-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
label{font-size:.9rem;display:block;font-weight:700;color:#223955;min-width:0}
label small{display:block;font-size:.72rem;font-weight:500;color:#61738b;margin:0 0 5px}
input[type=number],input[type=text]{display:block;width:100%;min-width:0;border:1px solid #c9d7e9;border-radius:10px;padding:11px 12px;color:var(--navy);background:#fff;font:inherit;font-size:1rem;line-height:1.3}
input::placeholder{color:#8ca0b9}
input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #7ba8ef;outline-offset:3px}
input:invalid:not(:placeholder-shown){border-color:#af4567}
.button{border:1px solid transparent;border-radius:10px;font:inherit;font-size:.9rem;font-weight:780;padding:11px 15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background .15s,transform .15s}
.button:hover:not(:disabled){transform:translateY(-1px)}
.button:disabled{cursor:not-allowed;opacity:.5;transform:none}
.primary{background:var(--blue);color:#fff}
.primary:hover{background:#00367d}
.outline{color:var(--blue);background:#f1f6ff;border-color:#bcd2f5}
.outline:hover{background:#e6f0ff}
.subtle{color:#5c7291;background:transparent;border-color:#dce5f1}
.subtle:hover{background:#ecf2fb}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.primer{border:1px solid #d7e5f7;background:#f8fbff;border-radius:14px;margin-top:25px;padding:17px}
.toggle{display:flex;gap:12px;align-items:center;cursor:pointer}
.toggle input{accent-color:var(--blue);width:21px;height:21px;flex:none}
.toggle small{display:block;color:#64758b;font-weight:500;margin-top:4px}
#primer-fields{margin:17px 0 0;padding:15px;border:1px solid #d9e5f4;border-radius:10px}
#primer-fields legend{font-weight:800;color:#235a9e}
.form-error{background:#fff2f2;color:#8d2030;border:1px solid #f2c4cb;border-radius:10px;padding:10px 13px;margin:18px 0 0;font-weight:650}
.example-note{background:#fff9e4;padding:10px 13px;border-radius:10px;color:#795c16;margin-top:18px}
.result-panel{position:relative;border-color:#c9daf7}
.side{position:sticky;top:16px;min-width:0}
.empty-state{text-align:center;padding:22px 8px;color:#657792}
.empty-icon{font-size:3rem;color:#b7ccee}
.empty-state strong{display:block;color:var(--navy)}
.empty-state p{font-size:.88rem;margin-top:10px}
.hero-metric{border-radius:15px;background:linear-gradient(130deg,#0058c8,#01398e);padding:20px;color:#fff}
.hero-metric small,.hero-metric span{display:block;color:#dbebff}
.hero-metric strong{font-size:3.9rem;line-height:1.1;display:block;letter-spacing:-.04em}
.mini-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.mini-metrics>div{background:#f1f6ff;border-radius:11px;padding:12px}
.mini-metrics small{display:block;color:#5d7091;font-size:.77rem}
.mini-metrics strong{font-size:1.05rem;color:#174a90}
.detail-list{margin:19px 0}
.detail-list div{display:flex;justify-content:space-between;gap:13px;border-bottom:1px solid #edf1f8;padding:9px 0}
dt{color:#61738a;font-size:.85rem}
dd{margin:0;text-align:right;font-weight:800;color:#173b69;font-size:.87rem}
.cost-summary{border-top:2px solid #dce8f8;padding-top:16px}
.cost-summary>small{display:block;color:#647992;font-weight:750}
.cost-summary>strong{display:block;color:#0a3d85;font-size:1.6rem;line-height:1.3;margin:4px 0 13px;overflow-wrap:anywhere}
.cost-summary p{display:flex;justify-content:space-between;gap:15px;border-bottom:1px dashed #e2eaf3;padding-bottom:6px;margin:0 0 8px;font-size:.8rem}
.cost-summary span{font-weight:800;text-align:right;color:#25496f}
.fine{font-size:.78rem;color:#65748a;line-height:1.6}
.hint{background:#eef5ff}
.hint p{margin-bottom:0;font-size:.9rem}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:660px}
th{text-align:left;color:#476084;background:#edf4ff;font-size:.78rem}
th,td{padding:11px 13px;border-bottom:1px solid #e6edf7}
td{font-size:.88rem}
.guide{line-height:1.75}
.guide p,.guide li{max-width:960px}
.formula{display:grid;gap:9px;background:#edf5ff;border-left:4px solid #276acc;padding:17px;border-radius:0 12px 12px 0;color:#163c70;font-size:.92rem;overflow-wrap:anywhere}
.formula strong{color:#004aac}
.guide ul{padding-left:23px}
.guide li{margin:7px 0}
details{border-bottom:1px solid var(--line);padding:11px 0}
summary{cursor:pointer;font-weight:800;color:#244f87}
details p{padding:10px 0 0;margin-bottom:0}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.related-grid a{display:flex;flex-direction:column;gap:10px;padding:15px;background:#f6faff;border:1px solid #dceaf9;border-radius:11px;text-decoration:none;font-weight:800;color:#1b477c;line-height:1.35}
.related-grid a:hover{background:#ebf3ff}
.related-grid span{font-size:.76rem;font-weight:600;color:#647c99}
.referral{background:linear-gradient(115deg,#e9f3ff,#f8fbff);border-color:#c7dcff;display:flex;align-items:center;justify-content:space-between;gap:24px}
.referral>div{max-width:720px}
.referral .cta{flex:none}
.disclosure{font-size:.79rem;color:#5b6d83}
.return{text-align:center;margin-top:18px}
@media(max-width:980px){.workspace{grid-template-columns:1fr}.side{position:static}.hero{grid-template-columns:1fr 190px;gap:20px}.hero-art{min-height:170px}.roof{transform:scale(.78) skewY(-8deg) rotate(-7deg)}}
@media(max-width:690px){.wrapper{width:calc(100% - 24px)}main{padding-top:18px}.hero{grid-template-columns:1fr}.hero-art{display:none}.panel{padding:18px}.field-grid,.config-grid{grid-template-columns:1fr 1fr}.zone-top{align-items:stretch}.related-grid{grid-template-columns:1fr}.referral{display:block}.referral .cta{margin-top:12px;width:100%}}
@media(max-width:430px){h1{font-size:2rem}.field-grid,.config-grid{grid-template-columns:1fr}.zone-top{flex-direction:column}.zone-top label{max-width:none}.zone-top .button{align-self:flex-end}.actions{flex-direction:column}.actions .button{width:100%}.mini-metrics{grid-template-columns:1fr 1fr}.cost-summary p{display:block}.cost-summary span{display:block;text-align:left}.hero-tags span{font-size:.73rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
@media print{body{background:#fff;color:#000;font-size:11pt}header,.breadcrumbs,.editor,.hint,.actions,.related,.referral,.return,footer,.hero-art{display:none!important}.wrapper{width:100%}main{padding:0}.hero{padding:0;border:0;display:block;background:none;margin:0}.hero h1{font-size:20pt}.hero-tags{display:none}.workspace{display:block}.panel{padding:10px 0;border:0;box-shadow:none;margin:10px 0}.side{position:static}.result-panel{break-inside:avoid}#empty-result{display:none!important}#breakdown{display:block!important}.guide{font-size:10pt}#computed-result[hidden],#breakdown[hidden]{display:none!important}a{color:#000;text-decoration:none}table{font-size:9pt;min-width:0}th,td{padding:5px}.hero-metric{background:none;color:#000;border:1px solid #ccc}.hero-metric small,.hero-metric span{color:#000}}