.seg{display:inline-flex;position:relative;background:#f0f0f0;padding:3px;width:100%;box-sizing:border-box;overflow:hidden}.seg--normal{border-radius:8px}.seg--normal .seg__btn,.seg--normal .seg__indicator{border-radius:5px}.seg--rounded,.seg--rounded .seg__btn,.seg--rounded .seg__indicator{border-radius:9999px}.seg__indicator{position:absolute;top:3px;height:calc(100% - 6px);background:var(--color-primary,#ffffff);box-shadow:0 1px 4px rgba(0,0,0,.13),0 0 0 .5px rgba(0,0,0,.06);transition:transform .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1);will-change:transform,width;pointer-events:none;z-index:0}.seg__indicator--hidden{opacity:0}.seg__btn{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;min-height:36px;cursor:pointer;border:none;background:rgba(0,0,0,0);font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.2;color:#888;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none;box-sizing:border-box;transition:color .18s ease}.seg__btn:hover:not(.seg__btn--active){color:#444}.seg__btn--active{color:var(--color-secondary,#1a1a1a);font-weight:600}.seg__btn:focus-visible{outline:2px solid #4f6ef7;outline-offset:-2px}.seg__btn svg{width:14px;height:14px;flex-shrink:0}@media(max-width:360px){.seg__btn{padding:6px 8px;font-size:.8rem;gap:4px}}@media(prefers-reduced-motion:reduce){.seg__btn,.seg__indicator{transition:none}}