.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{--shared-press-scale:1;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{letter-spacing:-.005em;color:var(--ink);margin:0;font-size:.85rem;font-weight:800}.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{--shared-press-scale:1;transform:scale(.97)}.zoneChip.isOn{border-color:var(--state-active-border);background:var(--state-active-surface);color:var(--state-active-ink)}.zonePicker .zoneChips{border:1px solid var(--line-soft);border-radius:var(--radius-sm);flex-wrap:nowrap;gap:0;min-width:0;overflow:hidden}.zonePicker .zoneChip{border:0;border-left:1px solid var(--line-soft);min-width:0;color:var(--muted);transition:background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);background:0 0;border-radius:0;flex:1 1 0;padding:0 6px;font-weight:700}.zonePicker .zoneChip:first-child{border-left:0}.zonePicker .zoneChip:hover,.zonePicker .zoneChip:focus-visible{color:var(--ink);background:color-mix(in srgb, var(--accent-action) 9%, transparent)}.zonePicker .zoneChip:focus-visible{outline-offset:-2px}.zonePicker .zoneChip.isOn{background:var(--panel-raised);color:var(--ink);font-weight:800}@media (prefers-reduced-motion:reduce){.zonePickerBtn,.zoneChip{transition:none}.zonePickerBtn:active,.zoneChip:active{transform:none}}