* { box-sizing: border-box; }
body {
  margin: 0; background: #111; overflow: hidden;
  display: flex; height: 100vh;
  font: 13px/1.5 monospace; color: #ccc;
}
#canvas-wrap { flex: 1; position: relative; }
#canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* ── Side panel ── */
#panel {
  width: 280px; min-width: 280px;
  background: #161616; border-left: 1px solid #2a2a2a;
  display: flex; flex-direction: column; overflow: hidden;
}
#panel-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid #2a2a2a;
  font-size: 12px; color: #888;
  display: flex; justify-content: space-between; align-items: center;
}
#panel-header span { font-size: 14px; font-weight: bold; color: #ccc; }

.section { padding: 10px 12px; border-bottom: 1px solid #222; }
.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #666; margin-bottom: 8px;
}

.row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px;
}
.row label { flex: 1; cursor: pointer; }
.row input[type=checkbox] { cursor: pointer; }

.slider-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; margin-bottom: 2px;
}
.slider-row label { color: #888; font-size: 11px; width: 55px; }
.slider-row input[type=range] { flex: 1; }