.zonePicker{display:inline-flex;position:relative}.zonePickerBtn{border-radius:var(--radius-sm);border:1px solid color-mix(in srgb, var(--line) 78%, var(--accent-action) 22%);background:color-mix(in srgb, var(--panel-raised) 90%, transparent);min-height:44px;color:var(--ink-soft);font:inherit;cursor:pointer;white-space:nowrap;transition:background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);align-items:center;gap:6px;padding:0 12px;font-weight:600;display:inline-flex}.zonePickerBtn:hover,.zonePickerBtn:focus-visible{border-color:var(--accent-action);color:var(--ink)}.zonePickerBtn:focus-visible{outline:2px solid var(--accent-action);outline-offset:2px}.zonePickerBtn:active{transform:scale(.97)}.zonePickerBtn.isActive{border-color:var(--state-active-border);background:var(--state-active-surface);color:var(--state-active-ink)}.zonePickerPanel{z-index:40;border-radius:var(--radius-md,12px);border:1px solid color-mix(in srgb, var(--accent-action) 24%, var(--line));background:var(--panel-raised);width:min(340px,100vw - 32px);box-shadow:0 12px 32px color-mix(in srgb, var(--ink) 18%, transparent);flex-direction:column;gap:10px;padding:12px;display:flex;position:absolute;top:calc(100% + 8px);right:0}.zonePicker.isInline{flex-direction:column;gap:8px;width:100%;display:flex}.zonePickerInlineLabel{text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:0;font-size:.75rem;font-weight:700}.zoneChips{flex-wrap:wrap;gap:6px;display:flex}.zoneChip{border-radius:var(--radius-sm);border:1px solid color-mix(in srgb, var(--line) 70%, var(--accent-action) 30%);background:color-mix(in srgb, var(--panel-raised) 88%, transparent);min-width:44px;min-height:44px;color:var(--ink-soft);font:inherit;cursor:pointer;transition:background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);padding:0 12px;font-weight:600}.zoneChip:hover,.zoneChip:focus-visible{border-color:var(--accent-action);color:var(--ink);background:color-mix(in srgb, var(--accent-action) 10%, var(--panel-raised))}.zoneChip:focus-visible{outline:2px solid var(--accent-action);outline-offset:2px}.zoneChip:active{transform:scale(.97)}.zoneChip.isOn{border-color:var(--state-active-border);background:var(--state-active-surface);color:var(--state-active-ink)}@media (prefers-reduced-motion:reduce){.zonePickerBtn,.zoneChip{transition:none}.zonePickerBtn:active,.zoneChip:active{transform:none}}