/* Light theme styles */
:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --stroke:#e5e7eb;
  --stroke-strong:#d1d5db;
  --soft:#f9fafb;
  --accent:#2563eb;
  --accent-ink:#1d4ed8;
  --accent-soft:#eff6ff;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
}
.wrap{max-width:1040px;margin:28px auto;padding:0 16px;}
.head h1{margin:0 0 8px;font-size:26px;}
.sub{margin:0;color:var(--muted);line-height:1.45;max-width:78ch;}
.head .sub + .sub{margin-top:10px;}
.head .sub a{
  color:var(--accent-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(37,99,235,.35);
}

.panel{
  margin-top:16px;
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px;
}

.controls{display:grid;gap:12px;}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

button{
  background:#fff;
  border:1px solid var(--stroke-strong);
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
}
button:hover{background:var(--soft);}

.toggle{
  display:inline-flex;
  background:var(--soft);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:2px;
  gap:2px;
}
.toggle button{
  border:0;
  background:transparent;
  padding:8px 12px;
  border-radius:12px;
  color:var(--muted);
}
.toggle button.active{
  background:#fff;
  color:var(--text);
  border:1px solid var(--stroke-strong);
}

.baseline label{color:var(--muted);}
.baseline input[type="range"]{width:min(520px,100%);}
.hint{color:var(--muted);font-size:12px;}

.viz{margin-top:12px;}
svg{width:100%;height:auto;}

.explain-inline{
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  background:var(--accent-soft);
  border:1px solid rgba(37,99,235,.18);
}
.explain-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}
.explain-text{margin:0;line-height:1.5;}

.page-footer{
  margin-top:24px;
  padding-top:12px;
  border-top:1px solid var(--stroke);
  font-size:12px;
  color:var(--muted);
}
.page-footer a{
  color:var(--accent-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(37,99,235,.3);
}