.pink-dock{--pd-accent-start:var(--accent-ink);--pd-accent-end:color-mix(in oklab, var(--accent-ink) 85%, var(--foreground));isolation:isolate;width:max-content;min-width:0;max-width:100%;height:64px;color:color-mix(in oklab, var(--background) 78%, transparent);border:1px solid color-mix(in oklab, var(--background) 62%, transparent);background:color-mix(in oklab, var(--background) 74%, transparent);box-shadow:0 10px 32px color-mix(in oklab, var(--foreground) 10%, transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-tap-highlight-color:transparent;border-radius:999px;position:relative;overflow:visible}.pink-dock__surface{pointer-events:none;opacity:.32;position:absolute;inset:0;overflow:visible}.pink-dock__recess{transform-box:view-box;transform:translateX(var(--pd-center));transition:transform .32s cubic-bezier(.21,.6,.35,1);display:none}.pink-dock__bubble{top:5px;left:var(--pd-center);width:calc(var(--pd-selected-width) - 10px);border:1px solid color-mix(in oklab, var(--background) 42%, transparent);background:linear-gradient(145deg, var(--pd-accent-start), var(--pd-accent-end));height:54px;box-shadow:0 6px 16px color-mix(in oklab, var(--accent) 34%, transparent), 0 0 12px color-mix(in oklab, var(--accent) 20%, transparent);pointer-events:none;border-radius:999px;transition:left .32s cubic-bezier(.21,.6,.35,1);position:absolute;transform:translate(-50%)}.pink-dock__controls{grid-template-columns:var(--pd-grid);grid-auto-columns:max-content;height:64px;display:grid;position:relative}.pink-dock__button{appearance:none;min-width:0;height:64px;color:var(--foreground);cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:20px;justify-content:center;align-items:center;gap:.35rem;margin:0;padding:0 .62rem;transition:background .18s ease-out,box-shadow .18s ease-out,color .18s ease-out;display:flex;position:relative}.pink-dock__button:before{content:"";border-radius:24px;position:absolute;inset:-16px 0 0}.pink-dock__button:focus-visible{outline:3px solid var(--foreground);outline-offset:3px}.pink-dock__icon{pointer-events:none;flex:none;place-items:center;width:18px;height:18px;transition:transform .32s cubic-bezier(.21,.6,.35,1),color .12s ease-out;display:grid}.pink-dock__icon>svg{width:18px;height:18px}.pink-dock__button[aria-pressed=true] .pink-dock__icon{color:var(--background);animation:.12s ease-out pink-dock-icon-in;transform:none}.pink-dock__button[aria-pressed=true]{border:1px solid color-mix(in oklab, var(--background) 42%, transparent);background:linear-gradient(145deg, var(--pd-accent-start), var(--pd-accent-end));color:var(--background);box-shadow:0 6px 16px color-mix(in oklab, var(--accent) 34%, transparent), 0 0 12px color-mix(in oklab, var(--accent) 20%, transparent);border-radius:999px}.pink-dock__slider{border:1px solid color-mix(in oklab, var(--background) 42%, transparent);background:linear-gradient(145deg, var(--pd-accent-start), var(--pd-accent-end));height:64px;box-shadow:0 6px 16px color-mix(in oklab, var(--accent) 34%, transparent), 0 0 12px color-mix(in oklab, var(--accent) 20%, transparent);pointer-events:none;border-radius:999px;transition:transform .32s cubic-bezier(.21,.6,.35,1),width .32s cubic-bezier(.21,.6,.35,1);position:absolute;top:0;left:0}.pink-dock--sliding .pink-dock__button[aria-pressed=true]{box-shadow:none;background:0 0;border-color:#0000}.pink-dock__label{max-width:none;color:var(--foreground);white-space:nowrap;flex:none;min-width:0;font-size:.75rem;font-weight:600;line-height:1.15;position:static;overflow:visible}.pink-dock__label--stacked{text-align:left;flex-direction:column;justify-content:center;align-items:flex-start;gap:.12rem;line-height:1rem;display:flex}.pink-dock__label--stacked>span:first-child{text-transform:uppercase;font-size:.625rem;font-weight:600}.pink-dock__label--stacked>span:last-child{font-size:.8125rem;font-weight:700}.pink-dock__button[aria-pressed=true] .pink-dock__label{color:var(--background);opacity:1}.pink-dock__chevron{width:15px;height:15px;color:var(--foreground);pointer-events:none;flex:none;transition:transform .18s ease-out}.pink-dock__chevron[data-expanded=true]{transform:rotate(180deg)}.pink-dock__button[aria-pressed=true] .pink-dock__chevron{color:var(--background)}@keyframes pink-dock-icon-in{0%{opacity:.25}to{opacity:1}}@media (prefers-reduced-motion:reduce){.pink-dock__recess,.pink-dock__bubble,.pink-dock__icon,.pink-dock__slider{transition:none;animation:none!important}.pink-dock__chevron{transition:none}}