html:has(body.masks-page),body.masks-page{height:auto;min-height:100%}body.masks-page{overflow:auto}.page.masks{grid-template-rows:auto;align-content:start;height:auto}.masks__home{color:inherit;text-decoration:none}.masks__intro h2{margin:0 0 6px;font-size:20px}.masks__intro p{color:var(--muted,#6b6577);margin:0 0 12px}.masks__upload input{opacity:0;width:1px;height:1px;position:absolute}.masks__upload,.masks__button{color:inherit;font:inherit;cursor:pointer;background:#ffffffbf;border:1px solid #7b5fd059;border-radius:999px;padding:8px 16px;text-decoration:none;display:inline-block}.masks__upload:hover,.masks__button:hover{border-color:#7b5fd0b3}.masks__upload:focus-within{outline:2px solid var(--accent,#7b5fd0);outline-offset:2px}.masks__status{min-height:1.5em;margin:10px 0 0}.masks__preview{flex-wrap:wrap;align-items:flex-start;gap:20px 28px;display:flex}.masks__card{flex:0 340px;min-width:0}.masks__controls{align-content:start;gap:12px;display:grid}.masks__controls fieldset{border:1px solid #7b5fd040;border-radius:12px;gap:6px;margin:0;padding:10px 14px;display:grid}.masks__foil{align-items:center;gap:8px;display:flex}.masks__foil span{white-space:nowrap;flex:none}.masks__keep{color:var(--muted,#6b6577);margin:0;font-size:13px}.masks__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:24px;display:grid}.masks__grid figure{justify-items:start;gap:6px;margin:0;display:grid}.masks__grid img{background:#000;border-radius:8px;width:100%}.masks__grid figcaption{font-size:14px}