.dock{--dock-base:68px;--dock-tile:calc(var(--dock-base) * var(--dock-scale));--dock-icon:calc(22px * var(--dock-scale));--dock-text:calc(.6875rem * var(--dock-scale));left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;background:color-mix(in srgb, var(--surface) calc(var(--dock-glass-eff) * 100%), transparent);max-width:calc(100vw - 16px);-webkit-backdrop-filter:var(--q-glass);backdrop-filter:var(--q-glass);border:1px solid var(--border);box-shadow:var(--shadow-lg);view-transition-name:dock;border-radius:18px;align-items:flex-end;gap:4px;padding:6px;display:flex;position:fixed;translate:-50%}.dock--sample{view-transition-name:none;width:max-content;max-width:none;margin:0 auto;position:static;overflow:visible;translate:none}@supports not (background:color-mix(in srgb, red 50%, transparent)){.dock{background:var(--surface)}}@media (prefers-reduced-transparency:reduce){.dock{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}.dock__tile{--mx:50%;--my:50%;width:var(--dock-tile);color:var(--text);font-size:var(--dock-text);border-radius:12px;flex-direction:column;flex:none;align-items:center;gap:3px;padding:7px 2px 6px;line-height:1.1;text-decoration:none;display:flex;position:relative}.dock__tile svg{width:var(--dock-icon);height:var(--dock-icon);fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px var(--dock-emboss));transition:translate .12s cubic-bezier(.23,1,.32,1),scale .12s cubic-bezier(.23,1,.32,1)}.dock__label{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.dock__tile>svg,.dock__tile>.dock__label{z-index:1;position:relative}.dock__tile:before{content:"";z-index:0;border-radius:inherit;pointer-events:none;background:radial-gradient(closest-side at var(--mx) var(--my), var(--dock-spec), transparent 76%);opacity:0;transition:opacity .2s;position:absolute;inset:0}.dock__tile[aria-current=page]{background:color-mix(in srgb, var(--text) 12%, transparent);color:var(--text)}.dock__tile:active{transition:scale var(--dur-1) var(--ease-out);scale:.97}.dock__tile[aria-current=page]:after{content:"";background:var(--accent);border-radius:50%;width:4px;height:4px;position:absolute;bottom:2px;left:50%;translate:-50%}@media (hover:hover) and (pointer:fine){.dock__tile:hover{background:color-mix(in srgb, var(--text) 8%, transparent)}.dock__tile[aria-current=page]:hover{background:color-mix(in srgb, var(--text) 14%, transparent)}.dock__tile:hover svg{scale:1.14}.dock__tile:hover:before{opacity:1}}@media (min-width:760px){.dock{--dock-base:84px;--dock-icon:calc(26px * var(--dock-scale));--dock-text:calc(.75rem * var(--dock-scale));border-radius:20px;gap:6px;padding:8px}.dock__tile{border-radius:12px;gap:4px;padding:9px 3px 8px}}.dock{overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;overflow-x:auto}.dock::-webkit-scrollbar{display:none}.dock__tile{scroll-snap-align:center}.dock[data-edge=both]{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 18px calc(100% - 18px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 18px calc(100% - 18px),#0000 100%)}.dock[data-edge=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),#0000 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 18px),#0000 100%)}.dock[data-edge=start]{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 18px);mask-image:linear-gradient(90deg,#0000 0,#000 18px)}@media (prefers-reduced-motion:reduce){.dock__tile svg{transition:none;translate:none!important;scale:none!important}.dock__tile:before{display:none}}