.viz-page{ display:flex; flex-direction:column; gap:14px; min-height: 0; }

.viz-head h1{ margin:0 0 6px; font-size: clamp(20px, 3vw, 30px); line-height:1.15; text-align:center; }
.viz-head p{ margin:0; text-align:center; color:var(--text2); font-weight:800; line-height:1.8; font-size:13px; }

.viz-body{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
  min-height: 0;
}
@media (max-width: 980px){ .viz-body{ grid-template-columns: 1fr; } }

.panel{
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--card-bd) 70%, transparent);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: 0 16px 50px color-mix(in srgb, var(--shadow) 40%, transparent);
  backdrop-filter: blur(12px);
  overflow:hidden;
  min-height: 0;
  padding: 14px;
}

.canvas-box{
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--card-bd) 65%, transparent);
  background: rgba(127,127,127,0.08);
  overflow:hidden;
  height: min(62vh, 620px);
  min-height: 320px;
  position: relative;
}
canvas{ width:100%; height:100%; display:block; }

.hint{
  margin-top: 10px;
  display:flex; flex-wrap:wrap; gap:8px;
  color: var(--text2);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.6;
  opacity: .95;
}
.kbd{
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,0.22);
  background: rgba(127,127,127,0.10);
  color: var(--text);
  font-weight: 950;
}

.ctrl{ display:flex; flex-direction:column; gap: 10px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.row .lab{ color:var(--text2); font-weight:900; font-size:12px; min-width:72px; }

.row input[type="number"]{
  width: 92px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(127,127,127,0.20);
  background: rgba(127,127,127,0.08);
  color: var(--text);
  font-weight: 900;
  outline: none;
}
.row input[type="range"]{ width: 180px; }

.btn{
  all: unset;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--btnbd) 70%, transparent);
  background: color-mix(in srgb, var(--btn) 55%, transparent);
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
  user-select:none;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--btnhv) 70%, transparent); }
.btn.primary{
  border: 1px solid color-mix(in srgb, var(--link) 25%, transparent);
  background: color-mix(in srgb, var(--link) 18%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 40%, transparent);
}
.btn.primary:hover{ background: color-mix(in srgb, var(--link) 24%, transparent); }

.stat{
  border-radius: 14px;
  border: 1px solid rgba(127,127,127,0.18);
  background: rgba(127,127,127,0.08);
  padding: 10px 12px;
  color: var(--text2);
  font-weight: 850;
  font-size: 12px;
  line-height: 1.7;
}
.stat b{ color: var(--text); }