/* Panel chrome */
#twk {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  width: 272px;
  background: rgba(12,12,12,0.92);
  border: 0.5px solid rgba(240,237,232,0.12);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  font-family: 'Barlow', sans-serif;
  font-weight: 200;
  color: #F0EDE8;
  display: none;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
#twk.open { display: flex; }
#twk-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 0.5px solid rgba(240,237,232,0.07);
  cursor: move; user-select: none;
}
#twk-hd b { font-size: 11px; letter-spacing: 0.12em; font-weight: 500; }
#twk-close {
  background: none; border: none; color: rgba(240,237,232,0.4);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px;
}
#twk-close:hover { color: #F0EDE8; }
#twk-body { padding: 16px; display: flex; flex-direction: column; gap: 20px; }

/* Section label */
.tk-sect {
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(240,237,232,0.3); margin-bottom: -6px;
}

/* Segmented radio */
.tk-seg {
  display: flex; gap: 2px;
}
.tk-seg label {
  flex: 1; text-align: center;
  font-size: 10px; letter-spacing: 0.12em; font-weight: 300;
  padding: 7px 4px;
  border: 0.5px solid rgba(240,237,232,0.1);
  cursor: pointer;
  color: rgba(240,237,232,0.4);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tk-seg input { display: none; }
.tk-seg input:checked + span {
  background: var(--twk-accent, #E8312A);
  color: #fff;
  border-color: transparent;
}
.tk-seg label:has(input:checked) {
  background: var(--twk-accent, #E8312A);
  color: #fff; border-color: transparent;
}
.tk-seg label:hover:not(:has(input:checked)) {
  border-color: rgba(240,237,232,0.25); color: rgba(240,237,232,0.7);
}

/* Slider */
.tk-slider-row { display: flex; flex-direction: column; gap: 8px; }
.tk-slider-top { display: flex; justify-content: space-between; align-items: baseline; }
.tk-slider-lbl { font-size: 11px; letter-spacing: 0.06em; color: rgba(240,237,232,0.6); }
.tk-slider-val {
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--twk-accent, #E8312A); font-weight: 300;
}
.tk-slider-ticks {
  display: flex; justify-content: space-between;
  font-size: 9px; letter-spacing: 0.06em; color: rgba(240,237,232,0.22);
  margin-top: -4px;
}
input[type=range].tk-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px;
  background: rgba(240,237,232,0.1); outline: none; border-radius: 0;
}
input[type=range].tk-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--twk-accent, #E8312A);
  border: none; cursor: pointer;
  box-shadow: 0 0 6px var(--twk-accent, #E8312A);
}