/* Live previews (W7). Migrated rules first, motion additions after. */
.preview-open{position:absolute;inset:0;z-index:8;border-radius:inherit}.preview-open:focus-visible{outline-offset:-5px}.preview-controls{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:44px;margin-top:12px;font-size:12px;color:var(--muted)}.preview-state{display:flex;align-items:center;gap:7px}.preview-state::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--muted)}.preview-state.is-live::before{background:var(--green);box-shadow:0 0 10px #4ee49a50}.preview-toggle{border:0;min-height:44px;padding:8px 14px;border-radius:30px;background:var(--glass);box-shadow:0 0 0 1px var(--edge);font-size:12px}.live-window{position:absolute;z-index:3;left:7%;top:10%;width:86%;opacity:0;scale:1.01;border-radius:10px 10px 0 0;overflow:hidden;pointer-events:none;box-shadow:0 20px 60px #0003,0 0 0 1px var(--edge);background:var(--preview)}.live-viewport{position:relative;aspect-ratio:1280/900;overflow:hidden;background:#fff}.live-frame{position:absolute;top:0;left:0;width:1280px;height:900px;border:0;transform:scale(var(--frame-scale,1));transform-origin:top left;pointer-events:none}.project-featured .live-window{width:80%;left:10%;top:9%}.project-model .live-window{width:90%;left:5%;top:7%}
@media(max-width:600px){.live-window,.project-featured .live-window{width:90%;left:5%;top:10%}.project-model .live-window{top:10%}.preview-controls{margin-top:8px}}
@media(forced-colors:active){.preview-toggle{border:1px solid CanvasText}}
.live-window.is-ready{opacity:1;scale:1}
.live-window.is-leaving{opacity:0}
.project-visual.is-live .browser-preview{filter:blur(4px)}           /* the blur bridge: on the screenshot, never on the iframe container */
@media (prefers-reduced-motion:no-preference){
  :root[data-motion=on] .live-window{transition:opacity var(--dur-develop) var(--ease-out),scale var(--dur-develop) var(--ease-out)}
  :root[data-motion=on] .live-window.is-leaving{transition:opacity var(--dur-exit) var(--ease-in)}
  :root[data-motion=on] .preview-state.is-live::before{animation:live-ring 900ms var(--ease-out) 1}}
@keyframes live-ring{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent)}to{box-shadow:0 0 0 6px transparent}}
/* The one polite region for "Show live" / "Show image" results (created by previews.js); visually hidden. */
.preview-announcer{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}