.morph-slider{position:relative;width:100%;height:100%;overflow:hidden;background:var(--background);user-select:none;touch-action:pan-y}.morph-slider-stage{position:absolute;inset:0;cursor:grab;outline:none}.morph-slider-stage:active{cursor:grabbing}.morph-slider-stage:focus-visible{outline:2px solid color-mix(in oklch,var(--foreground) 45%,transparent);outline-offset:-2px}.morph-slider-canvas{display:block;width:100%;height:100%;background:var(--background)}.morph-slider-caption{position:absolute;left:22px;bottom:22px;z-index:2;max-width:70%;pointer-events:none;display:grid}.morph-slider-caption-text{grid-area:1/1;justify-self:start;display:inline-block;padding:8px 14px;border-radius:10px;font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--foreground);background:var(--card);opacity:0;transform:translateY(12px);transition:opacity var(--ms-swap) cubic-bezier(.16,1,.3,1),transform var(--ms-swap) cubic-bezier(.16,1,.3,1)}.morph-slider-caption-text.is-active{opacity:1;transform:translateY(0)}.morph-slider-controls{position:absolute;right:12px;bottom:12px;left:auto;z-index:3;display:flex;gap:8px}.morph-slider-btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:50%;color:var(--foreground);background:color-mix(in oklch,var(--card) 96%,transparent);cursor:pointer;transition:background .25s ease,border-color .25s ease}.morph-slider-btn:hover{background:var(--card);border-color:var(--foreground)}.morph-slider-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.morph-slider-indicators{position:absolute;left:0;right:0;bottom:24px;z-index:3;display:flex;gap:8px;justify-content:center;align-items:center}.morph-slider-dot{width:8px;height:8px;padding:0;border:none;border-radius:999px;background:color-mix(in oklch,var(--foreground) 35%,transparent);cursor:pointer;transition:width var(--ms-dot) cubic-bezier(.16,1,.3,1),background var(--ms-dot) ease}.morph-slider-dot.is-active{width:22px;background:color-mix(in oklch,var(--foreground) 95%,transparent)}.morph-slider-dot:focus-visible{outline:2px solid var(--ring);outline-offset:2px}@media (max-width:420px){.morph-slider-btn{width:34px;height:34px}.morph-slider-caption-text{font-size:13px}}@media (prefers-reduced-motion:reduce){.morph-slider-btn,.morph-slider-caption-text,.morph-slider-dot{animation:none;transition:none}}