.zonePicker{display:inline-flex;position:relative}.zonePickerBtn{border-radius:var(--radius-sm);border:1px solid var(--line);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:focus-visible{border-color:var(--accent-action);color:var(--ink)}@media (hover:hover) and (pointer:fine){.zonePickerBtn:hover{border-color:var(--hairline-strong);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);border:1px solid var(--line);background:var(--panel-raised);width:min(340px,100vw - 32px);box-shadow:var(--shadow);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{font-size:var(--text-sm);letter-spacing:-.005em;color:var(--ink);margin:0;font-weight:800}.zoneChips{flex-wrap:wrap;gap:6px;display:flex}.zoneChip{border-radius:var(--radius-sm);border:1px solid var(--line);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:focus-visible{border-color:var(--accent-action);color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, var(--panel-raised))}@media (hover:hover) and (pointer:fine){.zoneChip:hover{border-color:var(--hairline-strong);color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, 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:focus-visible{color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, transparent)}@media (hover:hover) and (pointer:fine){.zonePicker .zoneChip:hover{color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, 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}}