.work-preview{position:fixed;inset:0;width:calc(100% - 48px);max-width:1600px;height:calc(100dvh - 48px);max-height:none;margin:auto;border:0;padding:0;background:#deded6;color:#222720;box-shadow:0 20px 100px #0004;overflow:hidden}.work-preview::backdrop{background:#172015b8;backdrop-filter:blur(12px)}.preview-toolbar{height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:17px 25px;background:#f5f3ed;border-bottom:1px solid #c5c8ba}.preview-heading>span{display:block;font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#646b5b}.preview-heading h2{font-family:'Inter Tight',Arial,sans-serif;font-size:20px;font-weight:500;letter-spacing:-.025em;line-height:1.3;margin-top:4px}.preview-view{display:flex;gap:4px;padding:3px;border:1px solid #c8cbbe;border-radius:25px}.preview-view button{display:flex;align-items:center;gap:8px;font-size:10px;padding:8px 13px;border:0;border-radius:20px;background:transparent}.preview-view button[aria-pressed=true]{background:#222720;color:#f5f3ed}.preview-device-icon{display:block;border:1px solid currentColor;width:15px;height:10px;border-radius:1px}.preview-device-icon.phone{width:7px;height:12px}.preview-actions{display:flex;align-items:center;gap:26px}.preview-actions>a{font-size:10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid currentColor;padding-bottom:2px}.preview-actions>button{width:42px;height:42px;display:grid;place-items:center;background:transparent;border:1px solid #b8bdad;border-radius:50%;font-size:26px;line-height:1;font-weight:300}.preview-actions>button:hover{background:#e3e6d9}.preview-surface{position:relative;display:flex;justify-content:center;height:calc(100% - 82px);padding:0;overflow:hidden;transition:padding .3s}.preview-surface iframe{display:block;width:100%;height:100%;border:0;background:#f5f3ed;transition:width .4s ease,border-radius .3s;box-shadow:0 10px 40px #22272020}.work-preview[data-view=mobile] .preview-surface{padding:20px 0}.work-preview[data-view=mobile] iframe{width:390px;max-width:100%;border-radius:19px}.preview-loading{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:max-content;max-width:90%;background:#f5f3ed;padding:10px 20px;color:#222720;box-shadow:0 4px 20px #0002;z-index:1;font-size:12px;text-align:center}.preview-footnote{font-size:10px;color:#626b57}
@media(max-width:900px){.preview-toolbar{gap:15px;padding-inline:19px}.preview-heading h2{font-size:17px}.preview-actions{gap:15px}.preview-actions>a{font-size:9px}.preview-view button{font-size:9px;padding-inline:10px;gap:6px}}
@media(max-width:600px){.work-preview{width:100%;height:100dvh;margin:0;max-width:none;max-height:none}.preview-toolbar{height:110px;padding:13px 18px;display:grid;grid-template-columns:1fr auto;gap:8px}.preview-heading{grid-column:1;grid-row:1}.preview-heading>span{font-size:7px}.preview-heading h2{font-size:17px}.preview-view{grid-column:1;grid-row:2;width:max-content;padding:2px}.preview-view button{font-size:9px;padding:5px 10px}.preview-actions{grid-column:2;grid-row:1/3;align-self:start;flex-direction:column-reverse;gap:8px}.preview-actions>button{width:34px;height:34px;font-size:24px;align-self:flex-end}.preview-actions>a{font-size:8px;gap:4px}.preview-surface{height:calc(100% - 110px)}.work-preview[data-view=mobile] .preview-surface{padding:14px 10px}.work-preview[data-view=mobile] iframe{width:min(100%,390px);border-radius:12px}}
@media(prefers-reduced-motion:reduce){.preview-surface,.preview-surface iframe{transition:none}}
@media(max-width:600px){.preview-toolbar{height:124px}.preview-surface{height:calc(100% - 124px)}}