@font-face{font-family:Preview Cafe;src:url('/assets/demos/dela-gothic-one.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Preview Workshop;src:url('/assets/demos/workshop/BarlowCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Preview Studio;src:url('/studio-demo/libre-franklin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Preview Studio;src:url('/studio-demo/libre-franklin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
.preview-browser{height:64px;min-height:64px;box-sizing:border-box}
.preview-brand{display:inline-flex;align-items:center;gap:10px;min-width:0;height:38px;color:#f4f4ec;flex:none}
.preview-brand>svg{display:block;width:30px;height:30px;flex:none}
.preview-wordmark{display:block}
.preview-wordmark>span{display:block}
.preview-brand--cafe .preview-wordmark{font-family:Preview Cafe,Readex,sans-serif;font-size:16px;font-weight:400;letter-spacing:-.055em;line-height:1.08}
.preview-brand--workshop .preview-wordmark{font-family:Preview Workshop,Impact,sans-serif;font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:.95;text-transform:uppercase}
.preview-brand--studio .preview-wordmark{font-family:Preview Studio,Readex,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.035em;line-height:1.05;text-transform:uppercase}

.home-example .preview-browser .preview-brand>svg{width:30px;height:30px;color:#f4f4ec}