/* Recorded project interfaces: a quiet browser frame that plays when seen. */
.screen{margin:0 0 30px;border:1px solid #cfd2cb;background:#fff}
.screen-bar{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid #e1e3de;background:#f4f4f1;font:10px/1.4 var(--mono);color:#5f655e}
.screen-dots{display:flex;gap:5px}
.screen-dots i{width:7px;height:7px;border-radius:50%;background:#d6d8d2;display:block}
.screen-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.screen-when{white-space:nowrap}
.screen-stage{position:relative;aspect-ratio:1180/760;background:#eeeeea;overflow:hidden}
.screen-video,.screen-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.screen-still[hidden],.screen-video[hidden]{display:none}
.screen-still{animation:screen-in .35s ease both}
@keyframes screen-in{from{opacity:0}to{opacity:1}}
.screen-phone{position:absolute;right:3.5%;bottom:-7%;width:19%;aspect-ratio:390/844;border:5px solid #1b1d20;border-radius:20px;overflow:hidden;background:#1b1d20;box-shadow:0 18px 40px #1b1d2033}
.screen-phone .screen-video{border-radius:14px}
.screen-caption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;padding:11px 12px;border-top:1px solid #e1e3de;font-size:12px;line-height:1.55;color:var(--muted)}
.screen-caption-text{flex:1 1 280px}
.screen-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.screen-stills{display:flex;flex-wrap:wrap;gap:4px}
.screen-button{font:10px/1 var(--mono);letter-spacing:.03em;padding:7px 9px;border:1px solid #d8dad4;background:transparent;color:var(--ink);cursor:pointer}
.screen-button:hover{border-color:#9a9f97}
.screen-button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.screen-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:800px){
  .screen{margin-bottom:24px}
  .screen-when{display:none}
  .screen-phone{width:24%;border-width:4px;border-radius:14px;bottom:-9%}
  .screen-caption{font-size:11px;padding:10px}
  /* Pause keeps its own column and the stills wrap beside it, instead of Pause
     stranded alone on a line above them. */
  .screen-controls{flex-wrap:nowrap;align-items:flex-start}
  .screen-stills{flex:1 1 auto;min-width:0}
}
/* Phones: the desktop recording is illegible at this width, so the phone loop
   takes the stage instead, rising out of the bottom edge. */
@media(max-width:600px){
  .screen-has-mobile .screen-stage{aspect-ratio:auto;display:flex;justify-content:center;padding-top:22px;height:400px;background:#f4f4f1}
  .screen-has-mobile .screen-stage>.screen-video,.screen-has-mobile .screen-stage>.screen-still{display:none}
  .screen-has-mobile .screen-phone{position:relative;right:auto;bottom:auto;width:58%;max-width:240px;height:max-content;border-width:5px;border-radius:24px;box-shadow:0 18px 40px #1b1d2026}
  .screen-has-mobile .screen-phone .screen-video{position:relative;border-radius:18px}
  .screen-has-mobile .screen-stills{display:none}
}