/* One device shell for homepage works, accounts and portfolio screenshots. */
:is(.phone-frame,.accounts .account-frame){
  position:relative;display:block;width:calc(100% - 12px);max-width:260px;margin-inline:auto;
  padding:var(--phone-padding,9px 7px);aspect-ratio:auto;overflow:visible;
  border:1px solid #454b4e;border-radius:var(--phone-radius,36px);
  background:linear-gradient(115deg,#5a6266 0%,#202527 8%,#101315 48%,#41494d 92%,#727a7d 100%);
  box-shadow:inset 0 0 0 2px #111618,0 12px 20px -12px #10111266,0 3px 6px #10111218;
}
:is(.phone-frame,.accounts .account-frame)::before{
  content:"";position:absolute;top:var(--phone-speaker-top,3px);left:50%;
  width:var(--phone-speaker-width,28px);height:var(--phone-speaker-height,3px);
  transform:translateX(-50%);border-radius:4px;background:#080b0c;box-shadow:0 1px 0 #69717566;pointer-events:none;
}
:is(.phone-frame,.accounts .account-frame)::after{
  content:"";position:absolute;right:-3px;top:22%;width:3px;height:var(--phone-key-height,40px);
  border-radius:0 2px 2px 0;background:linear-gradient(90deg,#5f686d,#252b2e);pointer-events:none;
}
:is(.phone-screen,.accounts .account-snapshot){
  position:relative;display:block;width:100%;height:auto;aspect-ratio:1280/2774;overflow:hidden;
  border-radius:var(--phone-screen-radius,28px);background:white;
}
.phone-screen>:is(img,svg),.accounts .account-snapshot>:is(img,svg){
  position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center;
}
.accounts .accounts-grid{padding-block:14px 30px}
.work-cover.phone-frame{aspect-ratio:auto;overflow:visible}
.works{padding-block:14px 30px}
.phone-frame .work-screen{aspect-ratio:1280/2774;background:#080b0c;cursor:default}
.phone-frame .work-screen>:is(img,svg,video){position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center}
[data-work-play]{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent}
[data-work-play] .play{position:absolute;left:14px;bottom:14px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--lime,#d5ff3f);box-shadow:0 3px 12px #0005;transition:transform .18s,background .18s}
[data-work-play] .play svg{display:block;width:19px;height:19px;fill:var(--ink,#101112);margin-left:3px}
[data-work-play]:hover .play{transform:scale(1.07);background:#e0ff70}
[data-work-play]:focus-visible{outline:3px solid var(--lime,#d5ff3f);outline-offset:-5px}
[data-work-state="ended"] [data-work-play],[data-work-state="error"] [data-work-play]{inset:auto auto 56px 14px;width:48px;height:48px;border-radius:50%}
[data-work-state="ended"] [data-work-play] .play,[data-work-state="error"] [data-work-play] .play{inset:0}
.work-play-status{position:absolute;z-index:2;inset:14px 12px auto;margin:0;padding:10px 12px;border-radius:8px;background:#101112e6;color:white;font-size:12px;line-height:1.5;overflow-wrap:anywhere;pointer-events:none}
.phone-frame .work-screen>video:focus-visible{outline:3px solid var(--lime,#d5ff3f);outline-offset:-4px}
.phone-frame:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:720px){:is(.phone-frame,.accounts .account-frame){--phone-radius:34px;--phone-screen-radius:26px}}