*{box-sizing:border-box;font-family:Segoe UI, Arial, sans-serif}
body{margin:0;background:linear-gradient(180deg,#eef2f7,#dbe9f7);color:#0b3255}
.top-bar{display:flex;align-items:flex-start;gap:16px;padding:12px 20px}
header{width:200px;padding:10px;background:#fff;border-radius:6px;border:1px solid #e6e8eb}
header h1{font-size:18px;margin:6px 0}
header p{font-size:12px;margin:0;color:#3b556e}
main{display:block;padding:8px 20px}
.controls{flex:1;background:#fff;padding:12px;border-radius:8px;box-shadow:0 4px 16px rgba(8,40,64,.06)}
.controls h2{margin:0 0 8px 0;font-size:14px}
.inputs{display:flex;flex-wrap:wrap;gap:8px;padding:5px;}
.inputs label{display:flex;align-items:center;gap:6px;font-size:13px}
.inputs input[type=number]{width:70px;padding:6px;border-radius:4px;border:1px solid #cfdfee;font-weight:700}
/* small inline hint/help text next to inputs */
.hint{font-size:12px;color:#3b556e;margin-left:8px}
.hint[title]{cursor:help}
.actions{display:flex;gap:8px;margin-top:12px}
.actions button{padding:8px 10px;border-radius:6px;border:0;background:#0b6cff;color:white;cursor:pointer}
.visual{margin-top:14px;background:#fff;padding:12px;border-radius:8px;box-shadow:0 4px 16px rgba(8,40,64,.06)}
.summary{padding:8px 6px;margin-bottom:6px;font-size:14px}
/* bold numbers inside the summary */
.summary strong{font-weight:700}
canvas{width:100%;height:auto;border-radius:6px;border:1px solid #e6eef6}
footer{padding:12px 24px;text-align:center}