html.look-preview-open{overflow:hidden}.preview-expand-button{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);width:40px;height:32px;color:var(--ink);cursor:pointer;flex:0 0 40px;place-items:center;padding:6px;display:grid}.preview-expand-button .icon{width:17px;height:17px}.preview-expand-button:hover{border-color:var(--primary);background:var(--surface-2)}.preview-expand-button:disabled{opacity:.45;cursor:wait}.preview-expand-button:focus-visible,.look-preview-dialog button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.homepage-preview-meta:has(.preview-expand-button){grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);display:grid}.homepage-preview-meta:has(.preview-expand-button)>span:last-child{justify-self:end}.look-preview-dialog{border:1px solid var(--line-strong);background:var(--surface);width:min(1000px,100vw - 48px);max-width:none;height:min(900px,100dvh - 48px);max-height:none;color:var(--ink);border-radius:12px;margin:auto;padding:0;overflow:hidden;box-shadow:0 24px 80px #0005}.look-preview-dialog::backdrop{backdrop-filter:blur(4px);background:#0a0e0bd1}.look-preview-layout{grid-template-rows:auto minmax(0,1fr) auto;height:100%;display:grid}.look-preview-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:10px 20px;display:flex}.look-preview-header h2{font-family:var(--font-display);margin:0;font-size:18px;line-height:1.2}.look-preview-body{grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;display:grid}.look-preview-stage{place-items:center;min-width:0;min-height:0;padding:12px 20px;display:grid;overflow:hidden}.look-preview-compare{min-width:0;min-height:0;display:block}.look-preview-compare .compare-media{aspect-ratio:auto;width:100%;height:100%}.look-preview-compare canvas{background:0 0;border:0;border-radius:0;width:100%;max-width:none;height:100%;max-height:none;position:absolute;inset:0}.look-preview-compare canvas.pixelated{image-rendering:pixelated}.look-preview-compare .compare-media:focus-within{outline:2px solid var(--focus);outline-offset:-2px}.look-preview-controls{min-width:0;padding:4px 20px 0}.look-preview-picker-heading{justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;display:flex}.look-preview-picker-heading strong{font-weight:var(--fw-semibold)}.look-preview-picker-heading span{color:var(--ink-muted)}.look-preview-dialog .look-preview-presets{scroll-snap-type:none;gap:8px;padding:3px 2px 9px;scroll-padding-inline:2px}.look-preview-presets .look-preview-preset{flex:0 0 112px;align-items:center;width:112px;max-width:none;min-height:56px;padding:9px 10px;display:flex}.look-preview-strength{margin-top:8px;overflow:visible}.look-preview-strength input{min-height:24px}.look-preview-status{min-height:18px;color:var(--ink-muted);margin:4px 0 0;font-size:11px;line-height:18px}.look-preview-status.is-error{color:var(--ink)}.look-preview-actions{border-top:1px solid var(--line);background:var(--surface-2);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px 20px;display:grid}.look-preview-actions .button{min-height:46px}.look-preview-actions .button:disabled{opacity:.5;cursor:wait}@media (width<=720px){.look-preview-dialog{border:0;border-radius:0;width:100%;height:100dvh;margin:0}.look-preview-header{padding:max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left))}.look-preview-stage{padding:12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left))}.look-preview-controls{padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right))}.look-preview-actions{padding:10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}}@media (height<=500px) and (orientation:landscape){.look-preview-dialog{border:0;border-radius:0;width:100%;height:100dvh;margin:0}.look-preview-header{padding-block:max(4px, env(safe-area-inset-top)) 4px}.look-preview-body{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(220px,34%)}.look-preview-controls{align-self:center;padding-left:8px}.look-preview-stage{padding-block:8px}.look-preview-actions{padding-block:8px max(8px, env(safe-area-inset-bottom))}}
