:root{--card-width:clamp(120px,18vw,200px);--card-height:calc(var(--card-width) * 2.17);--scene-height:calc(var(--card-height) * 1.38)}.scene{width:100%;max-width:100%;height:600px;display:flex;align-items:flex-end;perspective:1400px;overflow:hidden;background:linear-gradient(0deg,rgba(152,73,208,0),#9849d0)}.scene:after{content:"";position:absolute;bottom:0;left:0;right:0;height:120px}.viewport{width:100%;height:600px;display:flex;align-items:flex-end;overflow:hidden}.track{display:flex;gap:8px;transform-style:preserve-3d;will-change:transform;margin-left:40px}.stage{transform:perspective(800px) rotateX(0deg) rotateY(16deg);transform-origin:center center}.card,.stage{transform-style:preserve-3d}.card{width:var(--card-width);height:var(--card-height);flex-shrink:0;overflow:hidden;background:#000;position:relative;cursor:pointer;border-radius:8px;border:4px solid rgba(255,255,255,.06)}.card:before{inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.05) 30%,rgba(0,0,0,.4) 70%,rgba(0,0,0,.7));mix-blend-mode:overlay}.card:after,.card:before{content:"";position:absolute;pointer-events:none}.card:after{top:-20%;left:-30%;width:160%;height:60%;background:linear-gradient(120deg,rgba(255,255,255,.35),rgba(255,255,255,0));opacity:.25;transform:rotate(-8deg)}.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:80px;height:16px;background:#000;border-radius:12px;z-index:5}.card img{width:100%;height:100%}.overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;padding:16px;opacity:1;transition:opacity .3s ease}.card:hover .overlay{opacity:0}.overlay h3{color:white;margin:0;font-size:16px}.status-bar{position:absolute;top:6px;left:0;right:0;height:24px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:500;color:rgba(255,255,255,.85);z-index:6;pointer-events:none}.time{font-size:10px;font-weight:500;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.wifi{display:flex;align-items:flex-end;gap:2px;margin-right:4px;opacity:.75}.wifi i{display:block;width:3px;background:rgba(255,255,255,.85);border-radius:1px}.wifi i:first-child{height:4px;opacity:.4}.wifi i:nth-child(2){height:6px;opacity:.7}.wifi i:nth-child(3){height:8px}.battery{position:relative;width:18px;height:9px;border:1px solid rgba(255,255,255,.85);border-radius:2px}.battery:after{content:"";right:-2px;width:1px;border-radius:1px}.battery-level,.battery:after{position:absolute;top:1px;bottom:1px;background:rgba(255,255,255,.85)}.battery-level{left:1px;width:65%}.status-icons{display:flex;align-items:center}.status-bar{opacity:.85}.card:hover .status-bar{opacity:1}.scene,.viewport{height:var(--scene-height)}