/* Real first screens, quiet browser frames, no physical devices in the catalogs. */
body.portfolio .card-image { position:relative; display:flex; align-items:center; justify-content:center; padding:18px; aspect-ratio:1.5; background:#e1dbd0; border:1px solid #d0c7ba; border-radius:8px; overflow:hidden; }
body.portfolio .card-image>img { width:100%; height:100%; object-fit:contain; box-shadow:0 8px 22px #29251f10; transform:none; }
body.portfolio .card-cover-link { position:absolute; inset:0; z-index:2; border-radius:8px; }
body.portfolio .card-cover-link:focus-visible { outline-offset:-4px; }
body.portfolio .card-status { color:var(--copper); font-size:10px; letter-spacing:0; text-transform:none; }
body.portfolio .browser-art { width:100%; border:1px solid #c8c2b9; border-radius:6px; background:#f8f6f0; overflow:hidden; box-shadow:0 10px 26px #29251f12; }
body.portfolio .browser-art-bar { display:flex; align-items:center; justify-content:space-between; gap:15px; height:28px; padding:0 10px; color:#6b6359; background:#f6f2ea; border-bottom:1px solid #d7d0c5; font-size:9px; }
body.portfolio .browser-art-dots { display:flex; gap:4px; }
body.portfolio .browser-art-dots i { width:4px; height:4px; border-radius:50%; background:#b6afa3; }
body.portfolio .browser-art-screen { aspect-ratio:16/10; background:#eeeae3; overflow:hidden; position:relative; }
body.portfolio .browser-art-screen>img { display:block; width:100%; height:100%; object-fit:contain; object-position:top center; }
body.portfolio .card-image>.browser-art { align-self:stretch; display:grid; grid-template-rows:24px minmax(0,1fr); }
body.portfolio .card-image .browser-art-bar { height:24px; font-size:8px; }
body.portfolio .card-image .browser-art-screen { height:100%; aspect-ratio:auto; }
body.portfolio .flat-screen { position:relative; width:100%; height:100%; aspect-ratio:16/10; overflow:hidden; }
body.portfolio .flat-screen iframe { position:absolute; inset:0 auto auto 0; max-width:none; border:0; transform:scale(var(--flat-scale,.4)); transform-origin:0 0; pointer-events:none; background:white; }
body.portfolio .detail-cover>.browser-art { max-width:1200px; margin:auto; }
body.portfolio .detail-cover>.browser-art .browser-art-screen { max-height:760px; }
@media(max-width:620px){body.portfolio .card-image{padding:12px}body.portfolio .browser-art-bar{height:25px;font-size:8px}}