/* ── 10. Dock with magnification ─────────────────────── */
.s10 { height: 560px; background: radial-gradient(90% 80% at 18% 12%, var(--orange-250) 0%, transparent 55%), radial-gradient(80% 80% at 88% 18%, var(--violet-400) 0%, transparent 55%), radial-gradient(110% 90% at 50% 110%, var(--aqua-300) 0%, transparent 55%), var(--violet-830); touch-action: pan-y; }
.mb10 { position: absolute; top: 0; left: 0; right: 0; height: 28px; z-index: 3; display: flex; align-items: center; gap: 18px; padding: 0 16px; font-size: 13px; font-weight: 500; color: var(--gray-0); background: color-mix(in srgb, var(--gray-0) 14%, transparent); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.mb10 b { font-weight: 550; }
@container (max-width: 700px) { .mb10 span:nth-child(n+4):not(:last-child) { display: none; } .win10 { height: 220px; } }
.mb10 span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
.dock10 { position: absolute; left: 0; right: 0; bottom: 12px; height: 0; z-index: 5; }
.dbg10 { position: absolute; bottom: 0; height: 70px; border-radius: 12px; background: color-mix(in srgb, var(--gray-0) 20%, transparent); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gray-0) 30%, transparent), var(--e3); }
.app10 { position: absolute; bottom: 10px; left: 0; width: 50px; height: 50px; border-radius: 23%; cursor: default; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gray-0) 35%, transparent), var(--e1); }
.app10 svg { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; fill: none; stroke: var(--gray-0); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app10 .dot { position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: color-mix(in srgb, var(--gray-0) 90%, transparent); opacity: 0; transition: opacity .3s; }
.app10.run .dot { opacity: 1; }
.sep10 { position: absolute; bottom: 16px; width: 1px; height: 40px; background: color-mix(in srgb, var(--gray-0) 35%, transparent); }
.tip10 { position: absolute; z-index: 6; left: 0; top: 0; padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--gray-820) 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--gray-0); font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.win10 { position: absolute; left: 50%; top: 64px; width: min(560px, 84cqw); height: 300px; margin-left: calc(min(560px, 84cqw) / -2); border-radius: 12px; background: color-mix(in srgb, var(--gray-0) 72%, transparent); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gray-0) 50%, transparent), var(--e3); }
.win10 i { position: absolute; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--gray-900) 14%, transparent); }
.win10 i:nth-child(1) { left: 16px; } .win10 i:nth-child(2) { left: 36px; } .win10 i:nth-child(3) { left: 56px; }
.win10 div { position: absolute; left: 22px; right: 22px; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--gray-900) 8%, transparent); }
@media (prefers-reduced-motion: reduce) { .st-w, .st-menu.open .st-w, .st-menu, .st-menu.open, .st-prev div, .v-ttl { transition: none !important; } }


/* the desktop on a light page */
:root[data-theme="light"] .s10 { background: radial-gradient(90% 80% at 18% 12%, var(--orange-200) 0%, transparent 55%), radial-gradient(80% 80% at 88% 18%, var(--violet-250) 0%, transparent 55%), radial-gradient(110% 90% at 50% 110%, var(--aqua-200) 0%, transparent 55%), var(--violet-50); }
:root[data-theme="light"] .mb10 { color: var(--gray-850); }
:root[data-theme="light"] .app10 .dot { background: color-mix(in srgb, var(--gray-900) 70%, transparent); }
:root[data-theme="light"] .sep10 { background: color-mix(in srgb, var(--gray-900) 20%, transparent); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .s10 { background: radial-gradient(90% 80% at 18% 12%, var(--orange-200) 0%, transparent 55%), radial-gradient(80% 80% at 88% 18%, var(--violet-250) 0%, transparent 55%), radial-gradient(110% 90% at 50% 110%, var(--aqua-200) 0%, transparent 55%), var(--violet-50); }
:root:not([data-theme="dark"]) .mb10 { color: var(--gray-850); }
:root:not([data-theme="dark"]) .app10 .dot { background: color-mix(in srgb, var(--gray-900) 70%, transparent); }
:root:not([data-theme="dark"]) .sep10 { background: color-mix(in srgb, var(--gray-900) 20%, transparent); }
}