.preview-canvas[data-v-38e8cb53]{background:var(--bg-canvas,#f1f3f7);flex-direction:column;flex:1;height:100%;display:flex;position:relative;overflow:hidden}.preview-canvas[data-v-38e8cb53]:before{content:"";background-image:radial-gradient(circle,var(--border-default,#dfe3ea) .8px,transparent .8px);opacity:.5;pointer-events:none;z-index:0;background-size:20px 20px;position:absolute;inset:41px 0 0}.preview-toolbar[data-v-38e8cb53]{background:var(--bg-elevated,#fff);border-bottom:1px solid var(--border-default,#dfe3ea);z-index:2;justify-content:space-between;align-items:center;gap:12px;padding:6px 16px;display:flex;position:relative}.preview-actions[data-v-38e8cb53]{align-items:center;gap:8px;display:flex}.viewport-switch[data-v-38e8cb53]{background:var(--bg-sunken,#f7f8fa);border:1px solid var(--border-default,#dfe3ea);border-radius:6px;align-items:center;gap:2px;padding:2px;display:flex}.viewport-btn[data-v-38e8cb53]{width:30px;height:26px;color:var(--text-muted,#9ba5b4);cursor:pointer;background:0 0;border:none;border-radius:4px;outline:none;justify-content:center;align-items:center;transition:all .12s;display:inline-flex}.viewport-btn[data-v-38e8cb53]:hover{color:var(--text-secondary,#5c677d);background:var(--bg-hover,#f0f2f5)}.viewport-btn.active[data-v-38e8cb53]{color:var(--accent-primary,#3b6beb);background:var(--bg-base,#fff);box-shadow:0 1px 2px #0000000f}.viewport-btn[data-v-38e8cb53]:focus-visible{box-shadow:0 0 0 2px var(--accent-primary,#3b6beb)}.preview-viewport[data-v-38e8cb53]{background:var(--bg-base,#fff);border:1px solid var(--border-default,#dfe3ea);box-shadow:var(--shadow-float,0 8px 32px #00000014,0 2px 8px #0000000a);z-index:1;border-radius:8px;flex:1;margin:20px auto;transition:width .2s cubic-bezier(.16,1,.3,1);position:relative;overflow:auto}.preview-viewport.desktop[data-v-38e8cb53]{width:1200px;max-width:calc(100% - 40px)}.preview-viewport.tablet[data-v-38e8cb53]{width:768px}.preview-viewport.mobile[data-v-38e8cb53]{width:375px}.preview-empty[data-v-38e8cb53],.preview-loading[data-v-38e8cb53]{height:200px;color:var(--text-muted,#9ba5b4);justify-content:center;align-items:center;font-size:13px;font-weight:500;display:flex}.preview-error[data-v-38e8cb53]{color:var(--danger,#e5484d);padding:20px}.preview-error p[data-v-38e8cb53]{margin:0 0 8px;font-size:14px;font-weight:600}.preview-error pre[data-v-38e8cb53]{background:var(--danger-bg,#fff0f0);border:1px solid var(--danger-border,#e5484d33);white-space:pre-wrap;border-radius:6px;margin:0;padding:12px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:12px;line-height:1.6}