.fig-devices .stage{display:flex;align-items:flex-end;justify-content:center;gap:26px;flex-wrap:wrap;padding:30px 22px 22px;background:linear-gradient(180deg,#fbfbfc,#f2f3f6)}.fig-devices .dev{position:relative}.fig-devices .dev .cap{text-align:center;font-size:12.5px;color:var(--sub);margin-top:12px}.fig-devices .dev .cap b{display:block;color:var(--ink);font-size:13.5px;font-weight:750}.fig-devices .scr{position:relative;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 34px,#fff 34px 39px),repeating-linear-gradient(0deg,transparent 0 30px,#fff 30px 34px),#f6f3ec}.fig-devices .scr:before{content:"";position:absolute;left:-20%;top:55%;width:140%;height:8px;background:#f7d181;transform:rotate(-24deg)}.fig-devices .pin{position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid #fff;background-size:cover;box-shadow:0 0 0 2px var(--ring, var(--certain)),0 2px 6px #0000004d;transform:translate(-50%,-50%);z-index:3}.fig-devices .pin.likely{--ring: var(--likely)}.fig-devices .card{position:absolute;border-radius:9px;background-size:cover;border:2px solid #fff;box-shadow:0 5px 12px #16181c38;overflow:hidden}.fig-devices .card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,#00000073)}.fig-devices .card i{position:absolute;left:6px;right:6px;bottom:5px;height:4px;border-radius:2px;background:#ffffffd9;z-index:1}.fig-devices .phone{width:122px}.fig-devices .phone .body{border-radius:24px;background:#14161a;padding:6px;box-shadow:0 14px 30px #00000047}.fig-devices .phone .scr{height:226px;border-radius:19px}.fig-devices .phone .scr:after{content:"";position:absolute;left:50%;top:7px;width:34px;height:9px;margin-left:-17px;border-radius:5px;background:#000;z-index:4}.fig-devices .phone .card{width:84px;height:58px;bottom:12px;left:13px}.fig-devices .phone .card.c2{left:105px}.fig-devices .phone .card.c3{left:197px}.fig-devices .phone .ok{position:absolute;right:8px;bottom:76px;width:22px;height:22px;border-radius:50%;background:var(--certain);border:2px solid #fff;z-index:4;box-shadow:0 2px 6px #00000040}.fig-devices .phone .ok:after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}.fig-devices.play .phone .card.c1{animation:ph-c1 5s ease infinite}.fig-devices.play .phone .card.c2{animation:ph-c2 5s ease infinite}.fig-devices.play .phone .card.c3{animation:ph-c3 5s ease infinite}.fig-devices.play .phone .ok{animation:ph-ok 5s ease infinite}.fig-devices.play .phone .pin.p1{animation:ph-pin 5s ease infinite}@keyframes ph-c1{0%,34%{transform:none;opacity:1}46%,88%{transform:translate(-140%) rotate(-8deg);opacity:0}92%,to{transform:none;opacity:1}}@keyframes ph-c2{0%,40%{transform:none}56%,88%{transform:translate(-92px)}92%,to{transform:none}}@keyframes ph-c3{0%,40%{transform:none}56%,88%{transform:translate(-92px)}92%,to{transform:none}}@keyframes ph-ok{0%,28%{transform:scale(1)}33%{transform:scale(1.35)}38%,to{transform:scale(1)}}@keyframes ph-pin{0%,32%{--ring: var(--likely);box-shadow:0 0 0 2px var(--likely),0 2px 6px #0000004d}38%,88%{box-shadow:0 0 0 2px var(--certain),0 2px 6px #0000004d}92%,to{box-shadow:0 0 0 2px var(--likely),0 2px 6px #0000004d}}.fig-devices.still .phone .pin.p1{box-shadow:0 0 0 2px var(--certain),0 2px 6px #0000004d}.fig-devices .pad{width:250px}.fig-devices .pad .body{border-radius:16px;background:#14161a;padding:8px;box-shadow:0 14px 30px #00000047}.fig-devices .pad .scr{height:174px;border-radius:9px}.fig-devices .pad .rail{position:absolute;right:0;top:0;bottom:0;width:76px;background:#ffffffdb;backdrop-filter:blur(6px);z-index:4;padding:8px;display:flex;flex-direction:column;gap:7px}.fig-devices .pad .rc{position:relative;height:32px;border-radius:7px;background-size:cover;border:2px solid #fff;box-shadow:0 2px 6px #00000026}.fig-devices.play .pad .rc{animation:pad-rc 6s ease infinite;animation-delay:var(--d)}.fig-devices.play .pad .pin.pp{animation:pad-pin 6s ease infinite;animation-delay:var(--d)}@keyframes pad-rc{0%,6%{box-shadow:0 2px 6px #00000026;transform:none}10%,28%{box-shadow:0 0 0 2px var(--certain),0 2px 6px #00000026;transform:translate(-3px)}34%,to{box-shadow:0 2px 6px #00000026;transform:none}}@keyframes pad-pin{0%,6%{transform:translate(-50%,-50%) scale(1)}12%,28%{transform:translate(-50%,-50%) scale(1.45)}34%,to{transform:translate(-50%,-50%) scale(1)}}.fig-devices.still .pad .rc:first-child{box-shadow:0 0 0 2px var(--certain),0 2px 6px #00000026}.fig-devices .mac{width:320px}.fig-devices .mac .body{border-radius:12px;background:#e9e9ee;padding:0;overflow:hidden;box-shadow:0 14px 30px #00000038,0 0 0 1px #00000014}.fig-devices .mac .bar{height:22px;background:#f3f3f6;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;gap:6px;padding-left:10px}.fig-devices .mac .bar i{width:9px;height:9px;border-radius:50%}.fig-devices .mac .bar i:nth-child(1){background:#ff5f57}.fig-devices .mac .bar i:nth-child(2){background:#febc2e}.fig-devices .mac .bar i:nth-child(3){background:#28c840}.fig-devices .mac .scr{height:168px}.fig-devices .mac .grid{position:absolute;right:0;top:0;bottom:0;width:132px;background:#ffffffe6;z-index:4;padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:42px;gap:8px;align-content:start}.fig-devices .mac .gc{border-radius:7px;background-size:cover;border:2px solid #fff;box-shadow:0 2px 6px #00000026}.fig-devices .mac .band{position:absolute;left:6px;top:6px;width:120px;height:92px;border:1.5px solid var(--manual);background:#0a84ff1f;border-radius:4px;transform-origin:top left;transform:scale(0);z-index:5}.fig-devices.play .mac .band{animation:mac-band 6s cubic-bezier(.4,0,.2,1) infinite}.fig-devices.play .mac .gc.sel{animation:mac-sel 6s ease infinite}.fig-devices.play .mac .pin.pm{animation:ph-pin 6s ease infinite}@keyframes mac-band{0%,10%{transform:scale(0);opacity:1}34%{transform:scale(1);opacity:1}44%,to{transform:scale(1);opacity:0}}@keyframes mac-sel{0%,30%{box-shadow:0 2px 6px #00000026}36%,40%{box-shadow:0 0 0 2px var(--manual),0 2px 6px #00000026}46%,84%{box-shadow:0 0 0 2px var(--certain),0 2px 6px #00000026}92%,to{box-shadow:0 2px 6px #00000026}}.fig-devices.still .mac .gc.sel{box-shadow:0 0 0 2px var(--certain),0 2px 6px #00000026}.fig-devices .mac .keys{position:absolute;left:10px;bottom:10px;z-index:5;display:flex;gap:6px}.fig-devices .mac .key{font-size:10px;font-weight:800;color:var(--ink);background:#fff;border-radius:6px;padding:3px 7px;box-shadow:0 1px #0000002e,0 2px 5px #0000001f;font-family:-apple-system,system-ui,sans-serif}.fig-devices .mac .key small{font-weight:600;color:var(--sub);margin-left:3px}.fig-devices.play .mac .key.k1{animation:key-press 6s ease infinite}@keyframes key-press{0%,40%{transform:none;background:#fff}43%,45%{transform:translateY(1px);background:#dff0ff;box-shadow:0 0 #0000002e,0 1px 3px #0000001f}48%,to{transform:none;background:#fff}}@media (max-width: 760px){.fig-devices .stage{gap:18px}.fig-devices .mac{width:100%;max-width:320px}}
