.preview-frame{--iframe-width:100;--iframe-height:var(--preview-frame-iframe-height,30rem);--iframe-scale:1;--calculated-preview-frame-bg:var(--preview-frame-bg,var(--color-light));--calculated-preview-frame-text:var(--preview-frame-text,var(--color-dark));--calculated-preview-frame-header-button-font-weight:var( --preview-frame-header-button-font-weight,var(--font-normal) );--calculated-preview-frame-header-button-font-family:var( --preview-frame-header-button-font-family,var(--font-mono) );--calculated-preview-frame-header-button-bg:var( --preview-frame-header-button-bg,var(--color-light) );--calculated-preview-frame-header-button-text:var( --preview-frame-header-button-text,var(--color-dark) );--calculated-preview-frame-header-button-bg-hover:var( --preview-frame-header-button-bg-hover,var(--color-dark) );--calculated-preview-frame-header-button-text-hover:var( --preview-frame-header-button-text-hover,var(--color-light) );background:var(--calculated-preview-frame-bg);border:var(--stroke);color:var(--calculated-preview-frame-text)}.preview-frame+.preview-frame{--flow-space:var(--space-xl-2xl)}.preview-frame__inner{overflow-x:clip;position:relative}.preview-frame__mask{display:block;inset:0;position:absolute}.preview-frame__caption{border-block-start:var(--stroke);font-family:var(--preview-frame-caption-font-family,var(--font-mono));font-size:var(--preview-frame-caption-font-size,var(--size-step--3));line-height:var(--preview-frame-caption-leading,var(--leading));margin-inline:auto;padding-block:var(--preview-frame-caption-padding-block,var(--space-m));padding-inline:var(--preview-frame-caption-padding-inline,var(--gutter));text-align:center}.preview-frame iframe{background-color:var(--color-light);border:0;display:block;height:var(--iframe-height);margin-inline:auto;overscroll-behavior:contain;transform:scale(var(--iframe-scale));width:clamp(150px,calc(var(--iframe-width)/var(--iframe-scale)*1%),100%)}.preview-frame button{--button-font-weight:var( --calculated-preview-frame-header-button-font-weight );--button-font-family:var( --calculated-preview-frame-header-button-font-family );--button-bg:var(--calculated-preview-frame-header-button-bg);--button-text:var(--calculated-preview-frame-header-button-text);border:0;border-inline-start:var(--stroke);height:100%;position:absolute;right:0;top:0}.preview-frame button:hover{--button-bg:var(--calculated-preview-frame-header-button-bg-hover);--button-text:var(--calculated-preview-frame-header-button-text-hover)}.preview-frame button svg{color:inherit;height:2ex;position:relative;transform:translateY(-.1ex)}.preview-frame__header{border-block-end:var(--stroke);padding-block:var(--preview-frame-header-padding-block,var(--space-s));padding-inline:var(--preview-frame-header-padding-inline,var(--gutter));position:relative;z-index:1}.preview-frame__heading{font-family:var(--preview-frame-heading-font-family,var(--font-mono));font-size:var(--preview-frame-heading-font-size,var(--size-step--3));font-weight:var(--preview-frame-heading-font-weight,var(--font-normal));letter-spacing:var(--preview-frame-heading-kerning,var(--kerning-loose));line-height:var(--preview-frame-heading-leading,var(--leading-flat));text-transform:var(--preview-frame-heading-text-transform,uppercase)}.preview-frame[data-type=contained]{max-width:100%;width:100vw}.preview-frame__controls{display:none}@media (min-width:50em){.preview-frame{--preview-frame-iframe-height:var(--preview-frame-iframe-height-md,60rem)}.preview-frame iframe{width:clamp(300px,calc(var(--iframe-width)/var(--iframe-scale)*1%),100%)}.preview-frame__controls{--cluster-wrap:var(--preview-frame-controls-cluster-wrap,nowrap);--cluster-column-gap:var( --preview-frame-controls-cluster-column-gap,var(--space-m) );border-block-start:var(--stroke);display:flex;justify-content:center;padding-block:var(--preview-frame-controls-padding-block,var(--space-m));padding-inline:var(--preview-frame-controls-padding-inline,var(--gutter));position:relative;z-index:1}.preview-frame__controls .cluster{max-width:var(--preview-frame-controls-max-width,27rem);width:100%}.preview-frame input{color:currentColor}.preview-frame label{flex-shrink:0;font-family:var(--preview-frame-label-font-family,var(--font-mono));font-size:var(--preview-frame-label-font-size,var(--size-step--3));text-transform:var(--preview-frame-label-text-transform,uppercase)}input[type=range]{appearance:none;background:transparent;border:0;height:13px;touch-action:none}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:currentColor;cursor:pointer;height:var(--stroke-weight-light);width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:currentColor;border-radius:var(--input-slider-thumb-size,12px);cursor:pointer;height:var(--input-slider-thumb-size,12px);margin-top:var(--input-slider-thumb-margin-top,-6px);width:var(--input-slider-thumb-size,12px)}input[type=range]:focus::-webkit-slider-thumb{outline:var(--stroke-weight-light) solid currentColor;outline-offset:2px}input[type=range]::-moz-range-track{background:currentColor;cursor:pointer;height:var(--stroke-weight-light);width:100%}input[type=range]::-moz-range-thumb{background:currentColor;border:none;border-radius:var(--input-slider-thumb-size,12px);box-shadow:none;cursor:pointer;height:var(--input-slider-thumb-size,12px);width:var(--input-slider-thumb-size,12px)}input[type=range]:focus::-moz-range-thumb{outline:var(--stroke-weight-light) solid currentColor;outline-offset:2px}}