:root{
  --blue:#2194B1;--sky:#8ECCDB;--prussian:#122436;--navy:#1C3652;--off:#EDEDED;--white:#fff;
  --page:#F4F8FB;--soft:#EEF8FB;--pale:#DFF1F6;--muted:#5E7286;--danger:#B42318;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--page);font-family:Inter,Arial,sans-serif;color:var(--prussian)}
.page{padding:16px}.container{max-width:1360px;margin:0 auto}.shell{border-radius:32px;overflow:hidden;box-shadow:0 14px 36px rgba(18,36,54,.14);background:var(--navy)}
.banner{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--prussian) 0%,var(--navy) 52%,var(--blue) 100%)}
.banner:after{content:"";position:absolute;top:0;right:0;width:42%;height:100%;background:radial-gradient(circle at top right,rgba(142,204,219,.35) 0%,transparent 60%)}
.banner-inner{position:relative;padding:24px;display:flex;flex-direction:column;gap:20px}
.brand-row{display:flex;align-items:center;gap:16px}.logo-badge{width:56px;height:56px;border-radius:22px;border:2px solid var(--sky);background:var(--blue);display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:800;letter-spacing:.18em;font-size:20px}
.brand-title{color:var(--white);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:32px;line-height:1.05}.brand-subtitle{margin-top:8px;color:var(--sky);font-size:14px}
.controls{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 24px;background:var(--page)}
.btn{border:1px solid var(--pale);background:var(--white);color:var(--prussian);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--blue);color:var(--white);border-color:transparent}
.content{display:grid;grid-template-columns:1fr;gap:16px;padding:16px;background:var(--page)}
.left,.right{display:flex;flex-direction:column;gap:16px}
.card,.metric,.summary,.hero{background:var(--white);border:1px solid var(--pale);border-radius:24px;box-shadow:0 8px 20px rgba(18,36,54,.06)}
.card-body,.summary,.hero{padding:16px}
.label{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--prussian)}
input[type=number],select{width:100%;border:1px solid var(--sky);border-radius:18px;padding:14px 16px;font-size:18px;font-weight:700;color:var(--prussian);background:var(--white)}
.field+.field{margin-top:14px}
.range-head,.range-foot{display:flex;justify-content:space-between}.range-head{align-items:center}.range-val{font-weight:800;color:var(--navy)}.range-foot{margin-top:8px;font-size:12px;color:var(--muted)} input[type=range]{width:100%;margin-top:10px;accent-color:var(--blue)}
.section-title{margin:0 0 12px 0;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:800}
.impact-stack{display:flex;flex-direction:column;gap:12px}.impact{border-radius:20px;padding:16px;background:linear-gradient(180deg,var(--off) 0%,var(--soft) 100%)}.impact-label{font-size:12px;color:var(--navy)}.impact-value{margin-top:8px;font-size:24px;font-weight:800;color:var(--prussian)}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metric{padding:16px}.metric.emphasis{background:var(--soft);border-color:var(--blue)}.metric-label{font-size:14px;color:var(--navy)}.metric-value{margin-top:8px;font-size:28px;font-weight:800;color:var(--prussian);line-height:1.1;word-break:break-word}.metric-value.presentation{font-size:clamp(28px,2.4vw,46px)}
.metric-sub{margin-top:8px;font-size:12px;color:var(--muted)}
.hero{background:linear-gradient(180deg,var(--soft) 0%,var(--pale) 100%);border-color:var(--blue);text-align:center;padding:24px}.hero-label{color:var(--blue);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.hero-value{margin-top:8px;color:var(--prussian);font-size:42px;font-weight:800;line-height:1.08}.hero-sub{margin-top:10px;color:var(--navy);font-size:16px}
.inline-toggle{margin-top:14px;border-radius:16px;padding:10px 14px;border:1px solid var(--pale);background:var(--white);color:var(--prussian);font-size:12px;font-weight:800;cursor:pointer}
.post{margin-top:14px;border-radius:18px;border:1px solid var(--pale);background:var(--white);padding:14px}.post-label{color:var(--blue);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.post-value{margin-top:6px;color:var(--prussian);font-size:28px;font-weight:800}
.summary-title{font-size:14px;font-weight:800;color:var(--prussian)}.summary-text{margin-top:8px;font-size:14px;color:var(--navy);line-height:1.6}
.footer{padding:0 16px 16px 16px;background:var(--page);font-size:12px;color:var(--navy)} .footer.error{color:var(--danger)}
.presentation .content{grid-template-columns:360px 1fr;gap:24px;padding:24px 32px 32px}.presentation .banner-inner{padding:28px 32px}.presentation .logo-badge{width:64px;height:64px;font-size:24px}.presentation .brand-title{font-size:44px}.presentation .brand-subtitle{font-size:18px}.presentation .hero{border-radius:32px;padding:32px}.presentation .hero-value{font-size:clamp(52px,5vw,96px)}.presentation .summary-text{font-size:18px;line-height:1.75}
@media (max-width:1100px){.presentation .content{grid-template-columns:1fr}}
@media (max-width:768px){.page{padding:12px}.brand-title{font-size:24px}.hero-value{font-size:36px}.metrics{grid-template-columns:1fr}}