.page-viewport-preview[data-v-4b86ae42]{border:1px solid var(--neutrals-50);border-radius:var(--radius-base);overflow:hidden;background:var(--neutrals-white)}.viewport-toolbar[data-v-4b86ae42]{padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--neutrals-50);background:var(--neutrals-white)}.viewport-tabs[data-v-4b86ae42],.viewport-toolbar[data-v-4b86ae42]{display:flex;align-items:center}.viewport-tabs button[data-v-4b86ae42]{margin-right:var(--spacing-4);padding:var(--spacing-2) 0;color:var(--neutrals-500);font-weight:var(--font-weight-medium);cursor:pointer}.viewport-tabs .active-tab[data-v-4b86ae42]{color:var(--neutrals-black);font-weight:var(--font-weight-bold);border-bottom:2px solid var(--neutrals-black)}.viewport-actions[data-v-4b86ae42]{display:inline-flex;align-items:center;gap:var(--spacing-1);margin-left:auto;padding:var(--spacing-1);border:1px solid var(--neutrals-50);border-radius:var(--radius-base);background:var(--neutrals-white)}.viewport-width-label[data-v-4b86ae42]{min-width:3.75rem;padding:0 var(--spacing-2);color:var(--neutrals-500);font-size:var(--font-size-b3);font-variant-numeric:tabular-nums;text-align:right}.icon-button[data-v-4b86ae42],.viewport-actions button[data-v-4b86ae42]{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:calc(var(--radius-base) - 2px);color:var(--neutrals-700);cursor:pointer}.icon-button[data-v-4b86ae42]:hover,.viewport-actions button.active[data-v-4b86ae42],.viewport-actions button[data-v-4b86ae42]:hover{color:var(--neutrals-black);background:var(--neutrals-25)}.icon-button[data-v-4b86ae42]{border-left:1px solid var(--neutrals-50);border-radius:0 calc(var(--radius-base) - 2px) calc(var(--radius-base) - 2px) 0;margin-left:var(--spacing-1);color:var(--neutrals-700)}.viewport-stage[data-v-4b86ae42]{--viewport-stage-padding:var(--spacing-5);position:relative;min-height:78vh;padding:var(--viewport-stage-padding)}.viewport-device[data-v-4b86ae42],.viewport-stage[data-v-4b86ae42]{overflow:hidden;background:var(--neutrals-white)}.viewport-device[data-v-4b86ae42]{width:100%;min-height:72vh;border:1px solid var(--neutrals-50);border-radius:var(--radius-base)}.viewport-resize-handle[data-v-4b86ae42]{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:1rem;height:4rem;margin-left:-.5rem;padding:0;cursor:col-resize;transform:translateY(-50%)}.viewport-resize-handle span[data-v-4b86ae42]{display:block;width:.75rem;height:3rem;border-radius:999px;background:var(--neutrals-50);transition:background .15s ease}.viewport-resize-handle:focus-visible span[data-v-4b86ae42],.viewport-resize-handle:hover span[data-v-4b86ae42]{background:var(--neutrals-500)}.viewport-code[data-v-4b86ae42]{padding:var(--spacing-4);background:var(--neutrals-25);position:relative}.viewport-code pre[data-v-4b86ae42]{white-space:pre-wrap}.code-header[data-v-4b86ae42]{display:flex;justify-content:flex-end;margin-bottom:var(--spacing-2)}.copy-button[data-v-4b86ae42]{padding:var(--spacing-1) var(--spacing-3);background:var(--neutrals-50);border:1px solid var(--neutrals-75);border-radius:var(--radius-base);cursor:pointer;font-size:var(--font-size-b3);color:var(--neutrals-800);transition:background .2s}.copy-button[data-v-4b86ae42]:hover{background:var(--neutrals-75)}@media(max-width:760px){.viewport-toolbar[data-v-4b86ae42]{flex-wrap:wrap;gap:var(--spacing-2)}.viewport-actions[data-v-4b86ae42]{margin-left:0}.viewport-stage[data-v-4b86ae42]{--viewport-stage-padding:var(--spacing-3);min-height:70vh}.viewport-device[data-v-4b86ae42]{min-height:66vh}.viewport-resize-handle span[data-v-4b86ae42]{height:2.5rem}}