/* Portfolio website previews: the full page travels inside the device, never the device itself. */
.rl .project-preview .dev-screen{overflow:hidden;scroll-behavior:auto;overscroll-behavior:none}
.rl .project-preview .dev-screen .dev-img{position:absolute;inset:0 auto auto 0;display:block;width:100%;height:auto;max-width:none;object-fit:initial;object-position:top;transform:none;will-change:auto}
.preview-track{position:absolute;left:0;right:0;top:0}
.preview-tile{position:relative;display:block;width:100%;overflow:hidden}
.preview-tile--desktop{aspect-ratio:1280 / 936}
.preview-tile--phone{aspect-ratio:390 / 936}
.rl .project-preview .preview-tile .preview-tile-img{position:absolute;inset:0 auto auto 0;display:block;max-width:none;height:100%;object-fit:fill;transform:none;will-change:auto}
.rl .project-preview .preview-tile--desktop .preview-tile-img{width:106.484375%}
.rl .project-preview .preview-tile--phone .preview-tile-img{width:349.4871794872%}
.project-preview .preview-controls{position:absolute;left:40px;right:40px;bottom:40px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px}
.preview-caption{flex:1;min-width:0;font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.preview-caption strong{display:block;font-weight:400;color:var(--gold)}
.rl .preview-toggle{appearance:none;display:inline-flex;flex:none;max-width:65%;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 13px;border:1px solid var(--line2);border-radius:0;background:var(--bg);color:var(--ink);font:500 11px/1.3 var(--mono);letter-spacing:.04em;text-align:left;cursor:pointer}
.rl .preview-toggle:enabled:hover{border-color:var(--gold);color:var(--gold)}
.rl .preview-toggle:disabled{color:var(--mute);cursor:default}
.rl .preview-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.preview-toggle[hidden]{display:none!important}
.preview-toggle::before{content:"";display:block;flex:none;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor}
.preview-toggle[data-preview-action="pause"]::before{width:7px;height:10px;border:0;border-left:2px solid currentColor;border-right:2px solid currentColor}
.preview-toggle[data-preview-action="replay"]::before,.preview-toggle[data-preview-action="reset"]::before{content:"\21bb";width:12px;height:16px;border:0;font:18px/16px sans-serif}
.preview-toggle[data-preview-action="next"]::before{width:7px;height:7px;border:0;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.preview-toggle[data-preview-action="loading"]::before,.preview-toggle[data-preview-action="unavailable"]::before{display:none}
.project-preview .web-stage{inset:8% 6% 19%}
.project-preview.pv .pv-stage{inset:7% 5% max(17%,110px)}
.rl .project-preview.wx-split{padding-bottom:108px}
@media (max-width:700px){
 .rl .case-media.project-preview,.rl .project-preview.pv,.rl .project-preview.pv.pv-tall{height:clamp(350px,108vw,490px)}
 .project-preview .web-stage,.project-preview.pv .pv-stage{inset:10% 6% 24%}
 .project-preview.pv .pv-stage{bottom:max(24%,100px)}
 /* Keep both device frames inside the stage, above the caption and its focus ring. */
 .project-preview .web-canvas,.project-preview.pv .pv-canvas{display:block;position:absolute;left:50%;top:0;width:min(100%,135cqh);height:100%;transform:translateX(-50%)}
 .rl .project-preview .dev-desk,.rl [data-slot="work-p01-cover"].project-preview .dev-desk{display:block;position:absolute;left:0;top:0;bottom:auto;right:auto;width:92%;height:auto;opacity:1}
 .rl .project-preview .dev-phone,.rl [data-slot="work-p01-cover"].project-preview .dev-phone{position:absolute;left:auto;right:0;top:auto;bottom:0;width:36%;height:auto;aspect-ratio:422.3 / 864}
 .rl [data-slot="work-p01-cover"].project-preview .pl-phone{display:block}
 .project-preview .pl-ann,.project-preview .pl-floor{display:none}
 .preview-caption{font-size:10.8px;letter-spacing:.06em}
 .rl .preview-toggle{font-size:11.88px;min-height:44px;padding:9px 11px}
 .rl .project-preview.wx-split{padding:36px 20px 88px}
 .project-preview .wx-split-in{grid-template-columns:minmax(0,1fr);gap:40px}
 .project-preview .wx-web{aspect-ratio:1.15;min-height:0}
 .project-preview .wx-web .dev-desk{width:90%}
 .project-preview .wx-web .dev-phone{width:35%;right:0;bottom:0}
 .project-preview .wx-reel-wrap{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;align-items:center;padding-top:22px;border-top:1px solid var(--line)}
 .project-preview .wx-reel{width:92px;border-radius:8px}
 .project-preview .wx-reel-wrap .wx-tag{max-width:20em;line-height:1.7}
}
@media (max-width:640px){
 .project-preview .preview-controls{left:30px;right:30px;bottom:30px}
}
@media (max-width:360px){
 .project-preview .preview-controls{gap:10px}
 .preview-caption{font-size:10.8px;letter-spacing:.03em}
 .rl .preview-toggle{padding-left:10px;padding-right:10px}
}