@font-face{font-family:'Archivo Black';src:url('fonts/archivo-black.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('fonts/dm-serif-display.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Anton';src:url('fonts/anton.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
.poster-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 32px;margin-bottom:20px}
.poster-controls button{min-height:44px}
.poster-controls button[aria-pressed=true]{background:var(--text);color:var(--page);border-color:var(--text)}
.poster-controls .font-name{color:var(--muted);margin-inline-start:8px}
.picture{position:relative}
.poster-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.poster-overlay text{font-style:normal}
.preview-stage{position:relative;min-width:0;display:grid;place-items:center}
.preview-stage .poster-overlay{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
@media(max-width:700px){.poster-controls{padding-inline:16px}.poster-controls .font-name{width:100%;margin-inline-start:0}}

.poster-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.poster-frost{position:absolute;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);backdrop-filter:blur(14px) saturate(.8);-webkit-backdrop-filter:blur(14px) saturate(.8)}
.preview-stage .poster-layer{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
.preview-stage .poster-overlay{inset:0;left:0;top:0;transform:none}
#poster-options{position:relative}
#poster-options summary{cursor:pointer;padding:10px 12px;min-height:44px}
.poster-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;padding:16px 0}
.poster-fields label{display:grid;gap:6px}
.poster-fields select{font-size:16px;min-height:44px;width:100%}
#poster-options[open]{flex-basis:100%;order:2}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.poster-frost{background:#fff}}
@media(max-width:700px){.poster-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-transparency:reduce){.poster-frost{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}