/* Scoped to the sound demo; product images share one transparent canvas. */
.rail.device-ready{height:auto;min-height:180px;padding-bottom:42px;isolation:isolate}
.device-stage{position:relative;width:min(100%,840px);margin-inline:auto;cursor:grab;touch-action:none;overflow:hidden}
.device-stage::before{content:"";position:absolute;inset:8% -3% 1%;z-index:-1;background:radial-gradient(ellipse at 48% 58%,rgba(139,152,130,.10),transparent 67%);pointer-events:none}
.device-base,.device-lid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.device-base{filter:drop-shadow(0 14px 16px rgba(0,0,0,.3))}
.device-lid{transition:transform .07s cubic-bezier(.2,.9,.3,1.15);will-change:transform}
.rail.device-ready>.groove,.rail.device-ready>.knob{visibility:hidden;pointer-events:none}
.rail.device-ready .stop{top:auto;bottom:8px;width:3px;height:18px;transform:translateX(-50%);border-radius:2px}
.rail.device-ready .stop.off{height:6px;bottom:14px}
.rail.device-ready.dragging .device-stage{cursor:grabbing}
@media(max-width:560px){.rail.device-ready{min-height:145px;padding-bottom:36px}.rail.device-ready .stop{height:14px}.rail.device-ready .stop.off{height:5px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.device-lid{transition:none}}

.finish-picker{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.finish-picker[hidden]{display:none}
.finish-option{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:24px;background:transparent;color:var(--muted);font:500 13px/1.2 var(--sans);cursor:pointer}
.finish-option[aria-pressed="true"]{color:var(--text);border-color:rgba(214,246,93,.65);background:rgba(214,246,93,.06)}
.finish-option:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.finish-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.finish-swatch.white{background:#e5e6df}.finish-swatch.black{background:#222622}
.finish-status{font-size:12px;color:var(--muted)}

.grip-label{font-size:12px;color:var(--muted);margin-right:2px}.rail.device-ready{transform-origin:50% 50%;transition:transform .25s ease,margin .25s ease}
.finish-note{font-size:12px;line-height:1.5;color:var(--muted);margin-left:6px}@media(max-width:560px){.finish-note{flex-basis:100%;margin:3px 0 0}}