/* Tweaks floating panel */
#dg-tweaks {
  position: fixed; right: 16px; bottom: 16px; z-index: 9000;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  font-family: var(--f-body);
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
#dg-tweaks.open { transform: none; opacity: 1; pointer-events: auto; }
.tw-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-family: var(--f-head); }
.tw-close { background: none; border: 0; color: var(--fg-dim); font-size: 22px; cursor: pointer; line-height: 1; padding: 0 6px; }
.tw-close:hover { color: var(--fg); }
.tw-body { padding: 14px 16px; display: grid; gap: 14px; }
.tw-body label { display: grid; gap: 8px; font-size: 12px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-mute); }
.tw-val { float: right; color: var(--fg); font-weight: 600; }
.tw-seg { display: inline-flex; background: var(--bg-3); border-radius: var(--r-pill); padding: 3px; border: 1px solid var(--line); }
.tw-seg button { flex: 1; background: transparent; color: var(--fg-dim); border: 0; padding: 8px 12px; border-radius: var(--r-pill); cursor: pointer; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; transition: all var(--dur) var(--ease); }
.tw-seg button:hover { color: var(--fg); }
.tw-seg button.on { background: var(--accent); color: white; box-shadow: 0 6px 16px color-mix(in oklch, var(--accent) 50%, transparent); }
.tw-body input[type=range] { width: 100%; accent-color: var(--accent); }