body {
  background-color: #1b1e23;
  margin: 0;
  font-family: sans-serif;
}

svg {
  display: block;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: #1b1e23;
}

#toggleBtn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: white;
  backdrop-filter: blur(6px);
}

#flyout {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: rgba(28, 28, 30, 0.95);
  color: white;
  overflow-y: auto;
  padding: 1rem;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.4);
  transition: right 0.3s ease;
  z-index: 1000;
}

#flyout.open {
  right: 0;
}

#controlsPanel {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 1em;
}

.button-row {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

.icon-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1.2rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5em;
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.settings-section label {
  font-size: 0.9em;
}

#svgContainer {
  transform-origin: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

/* Updated palette table styles */
.tg  {border-collapse:collapse;border-spacing:0; margin-top: 0.5em;}
.tg td, .tg th {
  border-color:#333;
  border-style:solid;
  border-width:1px;
  font-family:Arial, sans-serif;
  font-size:14px;
  overflow:hidden;
  padding:5px;
  word-break:normal;
  color: white;
}
.tg th {
  background-color: #2a2a2e;
  font-weight:bold;
  text-align: center;
}
.tg td {
  text-align: center;
  height: 2.2em;
  width: 2.2em;
  transition: background 0.3s ease;
}

/* Swatch background variable binding */
:root {
  --default-1: #ffffff;
  --default-2: #e41a1c;
  --default-3: #ff7f00;
  --default-4: #ffff33;
  --default-5: #4daf4a;
  --default-6: #377eb8;
  --warm-1: #fff5eb;
  --warm-2: #fcae91;
  --warm-3: #fb6a4a;
  --warm-4: #de2d26;
  --warm-5: #a50f15;
  --warm-6: #67000d;
  --cool-1: #deebf7;
  --cool-2: #9ecae1;
  --cool-3: #6baed6;
  --cool-4: #3182bd;
  --cool-5: #08519c;
  --cool-6: #08306b;
  --mono-1: #eeeeee;
  --mono-2: #cccccc;
  --mono-3: #999999;
  --mono-4: #666666;
  --mono-5: #333333;
  --mono-6: #000000;
  --contrast-1: #ffffff;
  --contrast-2: #ff00ff;
  --contrast-3: #00ffff;
  --contrast-4: #ffff00;
  --contrast-5: #ff0000;
  --contrast-6: #000000;
}

/* Background application classes */
.tg .default-1 { background-color: var(--default-1); }
.tg .default-2 { background-color: var(--default-2); }
.tg .default-3 { background-color: var(--default-3); }
.tg .default-4 { background-color: var(--default-4); }
.tg .default-5 { background-color: var(--default-5); }
.tg .default-6 { background-color: var(--default-6); }

.tg .warm-1 { background-color: var(--warm-1); }
.tg .warm-2 { background-color: var(--warm-2); }
.tg .warm-3 { background-color: var(--warm-3); }
.tg .warm-4 { background-color: var(--warm-4); }
.tg .warm-5 { background-color: var(--warm-5); }
.tg .warm-6 { background-color: var(--warm-6); }

.tg .cool-1 { background-color: var(--cool-1); }
.tg .cool-2 { background-color: var(--cool-2); }
.tg .cool-3 { background-color: var(--cool-3); }
.tg .cool-4 { background-color: var(--cool-4); }
.tg .cool-5 { background-color: var(--cool-5); }
.tg .cool-6 { background-color: var(--cool-6); }

.tg .mono-1 { background-color: var(--mono-1); }
.tg .mono-2 { background-color: var(--mono-2); }
.tg .mono-3 { background-color: var(--mono-3); }
.tg .mono-4 { background-color: var(--mono-4); }
.tg .mono-5 { background-color: var(--mono-5); }
.tg .mono-6 { background-color: var(--mono-6); }

.tg .contrast-1 { background-color: var(--contrast-1); }
.tg .contrast-2 { background-color: var(--contrast-2); }
.tg .contrast-3 { background-color: var(--contrast-3); }
.tg .contrast-4 { background-color: var(--contrast-4); }
.tg .contrast-5 { background-color: var(--contrast-5); }
.tg .contrast-6 { background-color: var(--contrast-6); }

/* Optional layout tweaks */
.tg .radio-cell {
  width: 1.5em;
  text-align: center;
}

.tg .name-cell {
  text-align: left;
  padding-left: 0.5em;
  white-space: nowrap;
}