.browser-frame{position:relative;min-width:0;width:100%;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--surface);text-align:right;isolation:isolate}
.browser-toolbar{height:39px;display:flex;align-items:center;gap:14px;padding:0 11px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--muted)}
.browser-dots{display:flex;align-items:center;gap:5px;flex-shrink:0}.browser-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.55}.browser-dots i:first-child{background:#e49189}.browser-dots i:nth-child(2){background:#d1b576}.browser-dots i:last-child{background:#8fbaa5}
.browser-address{font:10px/1.4 Arial,sans-serif;letter-spacing:.025em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;text-align:center;user-select:text}
.browser-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.browser-action{width:29px;height:27px;padding:4px;display:grid;place-items:center;border:1px solid transparent;background:transparent;border-radius:3px;color:var(--muted);font:11px/1 Arial,sans-serif;cursor:pointer;transition:background-color 130ms ease,color 130ms ease,border-color 130ms ease,transform 130ms var(--motion-out)}
.browser-action svg{width:14px;height:14px}.browser-action:hover,.browser-action[aria-pressed=true]{background:var(--surface2);border-color:var(--line);color:var(--accent)}.browser-action:active{transform:scale(.97)}
.browser-pane{height:460px;overflow:auto;overscroll-behavior:contain;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#9ca4b1 #e9ebee;background:#fff;position:relative;text-align:left}
.browser-pane:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.browser-pane .browser-shot{display:block;width:100%;max-width:none;height:auto;max-height:none;margin:0;object-fit:initial;object-position:initial;filter:none;border-radius:0;box-shadow:none;transition:none;transform:none}
.browser-frame.is-native-scale .browser-shot{width:var(--capture-width);min-width:100%;max-width:none}
.browser-caption{min-height:28px;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:4px 12px;background:var(--surface);color:var(--muted);font-size:9px;line-height:1.8;border-top:1px solid var(--line)}
.browser-caption>span:first-child{display:flex;align-items:center;gap:6px}.browser-caption svg{width:11px;height:11px;color:var(--accent)}.browser-scroll-value{font:9px/1.5 Arial,sans-serif;font-variant-numeric:tabular-nums}
.browser-scroll-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);pointer-events:none}
.browser-frame--card .browser-pane{height:280px}.project-card>.browser-frame{margin-bottom:0}.project-card .project-case-link{display:inline-flex;gap:10px;align-items:center;color:var(--accent);font-size:11px;margin-top:16px}.project-case-link svg{width:15px;height:15px}
.archive-photos>.browser-frame,.case-gallery>.browser-frame{grid-column:1/-1;align-self:start}.case-gallery>.browser-frame .browser-pane{height:460px}
.case-browser-hero{padding:53px 24px 0}.case-browser-hero .browser-pane{height:390px}.case-browser-hero+.case-body{padding-top:30px}
.site-preview-dialog{width:min(1200px,96vw);height:91dvh;max-height:91dvh;max-width:96vw;overflow:hidden;padding:0}
.site-preview-dialog[open]{display:flex;flex-direction:column}.site-preview-heading{height:55px;min-height:55px;padding:9px 18px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}
.site-preview-heading h2{font-size:16px;letter-spacing:0;line-height:1.7;margin:0}.site-preview-heading .icon-button{width:32px;height:32px}.site-preview-heading .icon-button svg{width:18px;height:18px}
#site-preview-content{flex:1;min-height:0;padding:16px;display:flex}.browser-frame--viewer{height:100%;display:flex;flex-direction:column;border-radius:4px}.browser-frame--viewer .browser-toolbar{min-height:39px}.browser-frame--viewer .browser-pane{height:auto;flex:1;min-height:0}.browser-frame--viewer .browser-caption{flex-shrink:0}
@media(max-width:760px){.browser-frame--card .browser-pane{height:260px}.browser-pane{height:410px}.browser-toolbar{height:36px;gap:8px;padding:0 9px}.browser-address{font-size:9px}.browser-dots{gap:4px}.browser-dots i{width:5px;height:5px}.browser-caption{font-size:8px;padding:4px 9px}.case-browser-hero{padding:52px 12px 0}.case-browser-hero .browser-pane{height:330px}.case-gallery>.browser-frame .browser-pane{height:370px}.site-preview-heading{padding:9px 12px}.site-preview-heading h2{font-size:14px}#site-preview-content{padding:9px}.site-preview-dialog{width:97vw;max-width:97vw;height:94dvh;max-height:94dvh}}
@media(prefers-reduced-motion:reduce){.browser-action:active{transform:none}.browser-action{transition:color 80ms ease,background-color 80ms ease,border-color 80ms ease}}
@media print{.browser-actions,.browser-caption,.browser-scroll-progress{display:none}.browser-pane,.browser-frame--card .browser-pane,.case-gallery>.browser-frame .browser-pane{height:400px;overflow:hidden}.site-preview-dialog{display:none!important}}