:root{
    --bg:#f4f7f5;
    --card:#fff;
    --accent:#2d6a4f;
    --muted:#6b6b6b;
    --danger:#d00000;
}

body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto, "Helvetica Neue", Arial;
    background:var(--bg);
    color:#122;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:32px;
    box-sizing:border-box;
}

.card{
    width:100%;
    max-width:880px;
    background:var(--card);
    border-radius:12px;
    box-shadow:0 8px 30px rgba(10,20,15,0.06);
    padding:20px;
}

h1{
    margin:0 0 8px 0;
    font-size:1.25rem;
    color:var(--accent);
}

p.lead{
    margin:0 0 18px 0;
    color:var(--muted);
    font-size:0.95rem;
}

.layout{
    display:grid;
    grid-template-columns: 360px 1fr;
    gap:20px;
}

.controls{
    background:#fbfdfb;
    border:1px solid #e8efe9;
    border-radius:10px;
    padding:14px;
}

label{
    display:block;
    font-weight:600;
    margin-bottom:6px;
    font-size:0.92rem;
}

.field{
    margin-bottom:12px;
}

input[type="number"]{
    width:100%;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid #d6d6d6;
    font-size:1rem;
    box-sizing:border-box;
}

.note{
    font-size:0.85rem;
    color:var(--muted);
    margin-top:8px;
}

.viz{
    padding:14px;
    background:#f8fff9;
    border-radius:10px;
    border:1px solid #e6f1ea;
    min-height:320px;
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.svg-row{
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:center;
    width:100%;
}

svg{
    width:100%;
    height:auto;
    max-width:420px;
    display:block;
}

.small{
    font-size:0.9rem;
    color:var(--muted);
}

.value-annot{
    font-weight:700;
    color:#08321a;
}

.error{
    color:var(--danger);
    font-weight:700;
    margin-top:8px;
}

/* responsive */
@media (max-width:860px){
    .layout{ grid-template-columns: 1fr; }
    svg{ max-width:320px; }
}