/* Device frames drawn in code, for screenshots (screens) and before/after pairs: a browser window, a laptop, a tablet,
   a phone, a watch and a large screen. The screenshot keeps its own shape; the frame grows around it. Tokens only. */
.wrk-dev{position:relative;margin:0;min-width:0}
.wrk-dev__frame{position:relative}
.wrk-dev__scr{position:relative;overflow:hidden;background:var(--paper-4)}
.wrk-dev__scr .wrk-lb,.wrk-dev__scr picture{display:block;width:100%;height:auto}
.wrk-dev__scr img{display:block;width:100%;height:auto;object-fit:cover}
.wrk-dev__scr .wrk-lb:hover img{transform:none}

/* the browser bar (desktop, laptop, and the "browser" before/after frame) */
.wrk-dev__bar{display:flex;align-items:center;gap:14px;height:clamp(28px,2.6vw,38px);padding:0 clamp(10px,1vw,14px);background:var(--paper-3);border-bottom:1px solid var(--line)}
.wrk-dev__dots{display:flex;gap:6px;flex:none}
.wrk-dev__dots i{width:clamp(7px,.7vw,10px);height:clamp(7px,.7vw,10px);border-radius:50%;background:var(--line-3)}
.wrk-dev__url{flex:0 1 380px;min-width:0;margin:0 auto;height:clamp(18px,1.7vw,24px);padding:0 12px;border-radius:7px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrk-dev__url--none{flex-basis:260px}
.wrk-dev__dots + .wrk-dev__url{transform:translateX(-24px)}

/* desktop: a browser window */
.wrk-dev--desktop .wrk-dev__frame{border-radius:clamp(8px,1vw,14px);background:var(--paper);overflow:hidden;box-shadow:var(--sh-2),0 0 0 1px var(--line)}

/* laptop: the window in a bezel, on a base */
.wrk-dev--laptop{padding:0 5.5%}
.wrk-dev--laptop .wrk-dev__frame{padding:2.2% 2.2% 2.8%;border-radius:clamp(12px,1.6vw,22px) clamp(12px,1.6vw,22px) 4px 4px;background:var(--ink);box-shadow:var(--sh-2)}
.wrk-dev--laptop .wrk-dev__bar{border-radius:4px 4px 0 0}
.wrk-dev__base{position:relative;display:block;height:clamp(10px,1.3vw,18px);margin:0 -5.5%;border-radius:2px 2px 16px 16px / 2px 2px 12px 12px;background:var(--line-3);box-shadow:var(--sh-1)}
.wrk-dev__base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:45%;border-radius:0 0 8px 8px;background:var(--ghost);transform:translateX(-50%)}

/* tablet */
.wrk-dev--tablet .wrk-dev__frame{padding:clamp(10px,1.6vw,22px);border-radius:clamp(18px,2.6vw,36px);background:var(--ink);box-shadow:var(--sh-2),inset 0 0 0 1.5px var(--ink-2)}
.wrk-dev--tablet .wrk-dev__scr{border-radius:clamp(8px,1vw,14px)}

/* phone */
.wrk-dev--phone{width:100%;max-width:340px;margin-inline:auto}
.wrk-dev--phone .wrk-dev__frame{padding:clamp(7px,1vw,12px);border-radius:clamp(30px,4.4vw,52px);background:var(--ink);box-shadow:var(--sh-2),inset 0 0 0 1.5px var(--ink-2)}
.wrk-dev--phone .wrk-dev__scr{border-radius:clamp(24px,3.6vw,42px)}
.wrk-dev__island{position:absolute;left:50%;top:calc(clamp(7px,1vw,12px) + clamp(7px,.9vw,11px));z-index:3;width:28%;height:clamp(14px,1.8vw,22px);border-radius:var(--r-pill);background:var(--ink);transform:translateX(-50%);pointer-events:none}

/* watch */
.wrk-dev--watch{width:100%;max-width:200px;margin-inline:auto}
.wrk-dev--watch .wrk-dev__frame{padding:10%;border-radius:30%;background:var(--ink);box-shadow:var(--sh-2)}
.wrk-dev--watch .wrk-dev__scr{border-radius:22%}

/* large screen or kiosk: a thin bezel on a stand */
.wrk-dev--screen .wrk-dev__frame{padding:1.1%;border-radius:clamp(6px,.8vw,12px);background:var(--ink);box-shadow:var(--sh-2)}
.wrk-dev--screen .wrk-dev__scr{border-radius:3px}
.wrk-dev__stand{display:block;width:16%;height:clamp(26px,3.2vw,46px);margin:0 auto;background:var(--line-3);clip-path:polygon(34% 0,66% 0,100% 100%,0 100%)}