/* One size system for bottom and side docks. */
#dock{position:fixed;inset:auto auto 20px 50%;transform:translateX(-50%);display:flex;flex-direction:row;align-items:center;gap:var(--dock-gap,6px);padding:9px;border-radius:17px;max-width:calc(100vw - 24px);max-height:none}
#dock .dock-app{display:grid;place-items:center;position:relative;flex:none;width:calc(var(--dock-icon-size,52px) + 6px);height:calc(var(--dock-icon-size,52px) + 6px);transform:none;transition:filter .15s}
#dock .dock-app:hover,#dock .dock-app:focus-visible{filter:brightness(1.06)}
#dock .app-icon{width:var(--dock-icon-size,52px);height:var(--dock-icon-size,52px);flex:none}
#dock .app-icon>svg{width:100%;height:100%}
#dock .app-icon.glasses{width:calc(var(--dock-icon-size,52px) * .85);height:calc(var(--dock-icon-size,52px) * .85);border-radius:18%}
#dock .app-icon.glasses .pixel-glasses{width:84%;height:70%}
#dock .dock-tip{position:absolute;inset:auto auto calc(100% + 12px) 50%;transform:translateX(-50%);margin:0;padding:6px 9px;border:1px solid var(--chrome-line);border-radius:5px;font:10px/1.3 var(--sans);letter-spacing:0;white-space:nowrap;pointer-events:none;opacity:0;box-shadow:0 3px 8px #0002}
#dock .dock-app:is(:hover,:focus-visible) .dock-tip{opacity:1}
#dock .running-dot{position:absolute;display:block;left:calc(50% - 1.5px);bottom:-3px;margin:0}
#dock .dock-divider{flex:none;width:1px;height:calc(var(--dock-icon-size,52px) * .6);margin:0 2px}
#dock[data-position=left],#dock[data-position=right]{top:var(--dock-center,50%);bottom:auto;flex-direction:column;transform:translateY(-50%);padding:9px;max-height:var(--dock-available);max-width:none}
#dock[data-position=left]{left:12px;right:auto}
#dock[data-position=right]{right:12px;left:auto}
#dock[data-position=left] .dock-tip{inset:50% auto auto calc(100% + 12px);transform:translateY(-50%)}
#dock[data-position=right] .dock-tip{inset:50% calc(100% + 12px) auto auto;transform:translateY(-50%)}
#dock:not([data-position=bottom]) .dock-divider{height:1px;width:calc(var(--dock-icon-size,52px) * .6);margin:2px 0}
#dock:not([data-position=bottom]) .dock-app.drop-target:before{left:3px;right:3px;top:-5px;width:auto;height:2px}
#dock:not([data-position=bottom]) .running-dot{left:auto;bottom:calc(50% - 1.5px);right:-3px}
#dock[data-position=right] .running-dot{right:auto;left:-3px}
#dock[data-overflow=true]{overflow:auto;scrollbar-width:thin}
body:has(#dock[data-position=right]) .monitor-pull:not(.open):not(.pulling){right:var(--dock-right-clearance,0px)}
.blog-reading-open #dock{visibility:hidden;pointer-events:none}
.appearance-sections{display:flex;gap:6px;padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.appearance-sections button{padding:8px 14px;font-size:11px;border:1px solid var(--line);border-radius:7px}
.appearance-sections button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.appearance-app:has(.dock-settings){max-width:620px;padding:24px 30px}
.appearance-app:has(.dock-settings) .tool-heading{margin-bottom:14px}
.appearance-app:has(.dock-settings) .tool-local{margin-top:16px}
.dock-settings{padding:3px 0 0}
.dock-settings h2{font-size:18px;font-weight:500;letter-spacing:-.025em;margin:0 0 10px}
.dock-settings>p{font-size:11px;line-height:1.7;color:var(--muted);margin:0 0 26px}
.dock-size-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:12px}
.dock-size-label output{font:11px ui-monospace,monospace;color:var(--muted)}
.dock-size-range{display:block;width:100%;appearance:none;-webkit-appearance:none;background:transparent;height:24px;color:var(--ink);margin:0;cursor:pointer}
.dock-size-range::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:color-mix(in srgb,currentColor 28%,transparent)}
.dock-size-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border:0;border-radius:50%;background:currentColor}
.dock-size-range::-moz-range-track{height:3px;border-radius:3px;background:color-mix(in srgb,currentColor 28%,transparent)}
.dock-size-range::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:currentColor}
.dock-size-limits{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:9px 0 22px}
.dock-position-label{font-size:12px;margin:0 0 10px}
.dock-positions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dock-positions button{padding:12px 10px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:11px;text-align:center}
.dock-positions button[aria-pressed=true]{border-color:var(--ink);background:var(--surface);box-shadow:0 0 0 1px var(--ink)}
.dock-position-art{position:relative;display:block;width:100%;height:64px;margin-bottom:11px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(135deg,#b9d0ce,#e4e7d4);overflow:hidden}
.dock-position-art:before{content:'';position:absolute;inset:0 0 auto;height:6px;background:#ffffff80}
.dock-position-art i{position:absolute;display:flex;gap:3px;padding:4px;border:1px solid #ffffff90;background:#f8fff5a8;border-radius:5px;left:50%;bottom:7px;transform:translateX(-50%)}
.dock-position-art b{display:block;width:8px;height:8px;border-radius:2px;background:#738e82}.dock-position-art b:nth-child(2){background:#d7ac76}.dock-position-art b:nth-child(3){background:#8eacc4}
[data-value=left] .dock-position-art i{left:6px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column}
[data-value=right] .dock-position-art i{left:auto;right:6px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column}
@media(max-width:500px){.appearance-app:has(.dock-settings){padding:22px}.dock-positions{gap:7px}.dock-positions button{padding:9px 7px}}