.app{max-width:1100px; width:100%;}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px;
}
header h1{font-size:1.25rem; margin:0; letter-spacing:.2px}
header .badges{display:flex; gap:8px; align-items:center}
.badge{
  font-size:.75rem; padding:4px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); color:var(--muted)
}

.layout{display:grid; grid-template-columns: 360px 1fr; gap:18px;}
@media (max-width: 960px){ .layout{grid-template-columns:1fr;}}

.controls{padding:18px; display:grid; gap:14px}
.group{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:14px 14px 10px
}
.group h2{margin:0 0 8px; font-size:.95rem; color:var(--muted); font-weight:600}
.row{display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; margin:8px 0}
label{font-size:.9rem}
input[type="range"]{width:100%}
.value{font-variant-numeric:tabular-nums; color:var(--accent)}

.buttons{display:flex; gap:8px; flex-wrap:wrap;}
button{
  appearance:none; border:none; cursor:pointer; padding:10px 12px; border-radius:12px;
  background: linear-gradient(180deg, rgba(34,211,238,.12), rgba(167,139,250,.1));
  border:1px solid rgba(255,255,255,.12); color:var(--text); font-weight:600;
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
}
button:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.25)}
button.secondary{ background:linear-gradient(180deg, rgba(148,163,184,.12), rgba(148,163,184,.08));}
button.danger{ background:linear-gradient(180deg, rgba(251,146,60,.15), rgba(251,146,60,.1));}
button:disabled{opacity:.6; cursor:not-allowed}

.readouts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:6px}
.stat{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px
}
.stat .label{color:var(--muted); font-size:.8rem}
.stat .num{font-variant-numeric: tabular-nums; font-weight:700}

.canvas-wrap{padding:12px;}
canvas{
  width:100%; height:480px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)),
    radial-gradient(600px 300px at 10% -5%, rgba(34,211,238,.08), transparent 50%),
    radial-gradient(700px 400px at 90% -15%, rgba(167,139,250,.10), transparent 45%),
    #0a0f1f;
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
  display:block; overflow:hidden
}

.legend{padding:0 16px 18px; color:var(--muted); font-size:.9rem}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.formula{
  display:block; padding:8px 10px; border:1px dashed rgba(255,255,255,.12);
  border-radius:8px; margin-top:6px;
}

header { outline: 1px dashed rgba(255,255,255,0.25); }
.controls { outline: 1px dashed rgba(34,211,238,0.35); }
.canvas-wrap { outline: 1px dashed rgba(167,139,250,0.35); }
.group { outline: 1px dashed rgba(251,146,60,0.35); }

a.nav-btn {
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(34,211,238,.12), rgba(167,139,250,.1));
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
}
a.nav-btn:hover {
  transform: translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}