/* ── 16. Dock as website navigation ──────────────────── */
.s16 { height: 660px; --bg: var(--gray-20); --ink: var(--gray-850); --mut: var(--gray-500); --card: var(--gray-60); --glass: color-mix(in srgb, var(--gray-0) 62%, transparent); --edge: color-mix(in srgb, var(--gray-900) 8%, transparent); background: var(--bg); color: var(--ink); view-transition-name: dock-demo; }
.s16.dark { --bg: var(--gray-880); --ink: var(--gray-50); --mut: var(--gray-350); --card: var(--gray-820); --glass: color-mix(in srgb, var(--gray-750) 60%, transparent); --edge: color-mix(in srgb, var(--gray-0) 10%, transparent); }
.pd-sc { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; background: var(--bg); }
.pd-sc::-webkit-scrollbar { display: none; }
.pd-s { min-height: 600px; padding: 90px clamp(22px, 8cqw, 120px) 140px; }
.pd-s h3 { margin: 0; font-size: clamp(40px, 7.4cqw, 92px); line-height: .95; letter-spacing: -0.022em; font-weight: 550; max-width: 11ch; }
.pd-s h4 { margin: 0; font-size: clamp(32px, 4.4cqw, 48px); letter-spacing: -0.022em; font-weight: 550; }
.pd-s p { margin: 20px 0 0; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--mut); }
.pd-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.pd-work div { height: 200px; border-radius: 12px; }
.pd-work div:nth-child(1) { background: linear-gradient(150deg, var(--yellow-200), var(--orange-400)); } .pd-work div:nth-child(2) { background: linear-gradient(150deg, var(--blue-200), var(--violet-500)); }
.pd-work div:nth-child(3) { background: linear-gradient(150deg, var(--aqua-150), var(--aqua-450)); } .pd-work div:nth-child(4) { background: linear-gradient(150deg, var(--magenta-150), var(--magenta-450)); }
.pd-posts { margin-top: 26px; }
.pd-posts div { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid var(--edge); font-size: 17px; }
.pd-posts span { color: var(--mut); font-size: 15px; white-space: nowrap; }
.pd-me { width: 160px; height: 200px; border-radius: 12px; margin-top: 28px; background: linear-gradient(170deg, var(--gray-150), var(--gray-450) 60%, var(--gray-700)); }
.pd-mail { display: inline-block; margin-top: 26px; font-size: clamp(24px, 4.6cqw, 56px); letter-spacing: -0.022em; font-weight: 550; border-bottom: 2px solid currentColor; }
.pd-dock { position: absolute; left: 0; right: 0; bottom: 22px; height: 0; z-index: 10; }
.pd-bg { position: absolute; bottom: 0; height: 64px; border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: inset 0 0 0 1px var(--edge), 0 16px 40px -18px color-mix(in srgb, var(--gray-900) 45%, transparent); }
.pd-i { position: absolute; bottom: 8px; left: 0; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); cursor: default; display: grid; place-items: center; transition: background .3s, color .3s; }
.pd-i svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pd-i .dot { position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity .25s; }
.pd-i.on .dot { opacity: 1; }
.pd-sep { position: absolute; bottom: 16px; width: 1px; height: 32px; background: var(--edge); }
.pd-tip { position: absolute; z-index: 11; left: 0; top: 0; padding: 5px 11px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
::view-transition-old(dock-demo), ::view-transition-new(dock-demo) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .pm-list li, .s14.open .pm-list li, .md-lv .md-i, .md-lv.on .md-i, .ab-l, .ab-l.on, .lp-drop button { transition: none !important; } }

.ab-track { width: max-content; }
.dc-main { position: relative; }
.md-lv:not(.on) { pointer-events: none; }
.md-lv.outr .md-i { opacity: 0; transform: translateX(24px); transition: opacity .15s ease, transform .3s cubic-bezier(.4,0,.2,1); }
.s15 .sb { z-index: 8; } .s15 .island { z-index: 9; }
.md-h { top: 52px; } .md-page { inset: 100px 0 0; } .md-lv { top: 116px; }