:root{font-family:system-ui,Arial;color:#193047;background:#f4f7fa}*{box-sizing:border-box}body{margin:0}header{background:#123249;color:white;padding:17px 24px}header a{color:#bfe9ff;text-decoration:none;font-size:13px}header h1{margin:9px 0;font-size:clamp(24px,4vw,33px)}main{max-width:1060px;margin:25px auto;padding:0 16px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr);gap:16px}@media(max-width:700px){main{grid-template-columns:1fr}}.panel{border:1px solid #d3dfe7;background:white;border-radius:13px;padding:19px;min-width:0}.panel h2{margin:0 0 10px;font-size:18px}svg{max-width:100%;height:auto;border:1px solid #e1e7eb;border-radius:10px;background:#fbfdff}label{font-size:14px;font-weight:700;display:block;margin:14px 0 8px}input[type=range]{width:100%}input[type=number],input[type=text],select{font-size:16px;padding:10px;width:100%;border:1px solid #b4c6d2;border-radius:8px}button{background:#125474;color:white;border:0;border-radius:8px;padding:12px 16px;cursor:pointer;font-weight:700;margin-top:12px}button:focus-visible,input:focus-visible{outline:3px solid #f5bc46}.muted{color:#556f81;line-height:1.5}.row{display:flex;gap:12px;flex-wrap:wrap}.metric{flex:1;background:#eff6fa;border-radius:8px;padding:11px}.metric strong{font-size:21px;display:block}#feedback{padding:12px;background:#ecf4f8;border-radius:9px;margin-top:12px;min-height:48px}footer{text-align:center;color:#607386;padding:24px;font-size:12px}