@font-face{font-family:'Benzin';src:url('benzin-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--caption-height:78px;--caption-top:22px;--caption-bottom:16px;--controls-inset:0px;color-scheme:dark;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#fff;background:#000;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center}main{width:min(1500px,100%);padding:24px 20px 40px}.face-stack{position:relative;width:100%;aspect-ratio:1;overflow:hidden}.face-stack img{width:100%;height:100%;display:block}.face-stack::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 35px 12px #000}.frames{position:absolute;inset:0;background:url('face-frames.png') 0 0/200% 200% no-repeat;opacity:0;mask-image:radial-gradient(ellipse 28% 18% at 50% 79%,#000 55%,transparent 100%)}.heads p{font-size:13px;line-height:1.6;text-align:center;min-height:52px;margin:22px 0 16px}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:24px}button{font:inherit;font-family:'Benzin',sans-serif;font-weight:700;font-size:14px;background:none;border:0;padding:10px 4px;color:inherit;cursor:pointer}button:hover{color:#fff}button:focus-visible{outline:2px solid #a0b7ff;outline-offset:5px}@media(max-width:600px){main{padding:12px 12px 30px}.actions{gap:32px}}

.heads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.heads section{min-width:0}.heads p{height:var(--caption-height);min-height:0;margin:var(--caption-top) 0 var(--caption-bottom);overflow:auto}.frames{background-image:url('face-frames.png')}#yellowFrames{background-image:url('yellow-frames.png');mask-image:radial-gradient(ellipse 30% 19% at 50% 76%,#000 55%,transparent 100%)}#pinkFrames{background-image:url('pink-frames.png');mask-image:radial-gradient(ellipse 27% 18% at 50% 73%,#000 55%,transparent 100%)}@media(max-width:650px){:root{--caption-height:10.5rem;--caption-top:12px;--caption-bottom:12px;--controls-inset:14px}.heads{gap:6px}.face-stack::after{box-shadow:inset 0 0 10px 3px #000}.heads p{font-size:10px;line-height:1.4;height:var(--caption-height);min-height:0;margin:var(--caption-top) 0 var(--caption-bottom);overflow-wrap:anywhere;overflow:auto}.actions{position:sticky;bottom:0;background:#000;padding:var(--controls-inset) 0}}

.heads p{white-space:pre-line}


#power{border:1px solid #fff;border-radius:0;padding:12px 24px}

#export{min-width:calc(10ch + 34px);border:1px solid #fff;border-radius:0;padding:12px 16px}#exportStatus{text-align:center;font-size:12px;line-height:1.4;min-height:1.4em;margin:16px 0 0}button:disabled{opacity:.4;cursor:default}@media(max-width:650px){.actions{gap:12px}}

h1{font:inherit;font-family:'Benzin',sans-serif;font-weight:700;font-size:24px;text-align:center;margin:0 0 calc(var(--caption-top) + var(--caption-height) + var(--caption-bottom) + var(--controls-inset))}

.controls{width:max-content;max-width:100%;margin-inline:auto}#exportProgress{display:block;width:100%;height:4px;margin:16px 0 0;border:0;appearance:none;background:#222;accent-color:#ff53ae}#exportProgress[hidden]{display:none}#exportProgress::-webkit-progress-bar{background:#222}#exportProgress::-webkit-progress-value{background:#ff53ae}#exportProgress::-moz-progress-bar{background:#ff53ae}