.top-card-generator{display:grid;gap:1rem;border:1px solid color-mix(in srgb,var(--color-border),transparent 12%);border-radius:1.75rem;padding:1rem;background:color-mix(in srgb,var(--color-bg),var(--color-primary) 4%);box-shadow:0 20px 55px rgb(15 23 42 / .08)}.top-card-generator__head{display:grid;gap:1rem}.top-card-generator__head h2,.top-card-generator__head p{margin:0}.top-card-generator__head h2{font-size:clamp(1.55rem,5vw,2.35rem);line-height:1.05;letter-spacing:-.05em}.top-card-generator__head p{color:var(--color-muted);font-weight:700}.top-card-generator__controls{display:grid;gap:.8rem}.top-card-generator__controls label{display:grid;gap:.35rem;color:var(--color-muted);font-weight:900}.top-card-generator__controls fieldset{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;border:1px solid var(--color-border);border-radius:1.1rem;padding:.75rem;background:color-mix(in srgb,var(--color-bg),transparent 8%)}.top-card-generator__controls legend{padding:0 .25rem;color:var(--color-muted);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.top-card-generator__controls fieldset label{display:inline-flex;align-items:center;gap:.4rem;min-height:2.35rem;border:1px solid var(--color-border);border-radius:999px;padding:.4rem .75rem;background:var(--color-bg);color:var(--color-text);cursor:pointer}.top-card-generator__preview{min-height:12rem}.top-card,.top-card-empty{border:1px solid var(--color-border);border-radius:1.45rem;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary),transparent 84%),transparent 55%),var(--color-bg);box-shadow:0 18px 45px rgb(15 23 42 / .08);overflow:hidden}.top-card{display:grid;gap:.85rem;padding:1rem}.top-card header{display:grid;gap:.25rem}.top-card header span{color:var(--color-primary);font-size:.76rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.top-card header h3{margin:0;font-size:clamp(1.35rem,5vw,2rem);line-height:1.05;letter-spacing:-.05em}.top-card ol{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}.top-card li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:center;border:1px solid color-mix(in srgb,var(--color-border),transparent 10%);border-radius:1.05rem;padding:.65rem;background:color-mix(in srgb,var(--color-bg),var(--color-primary) 3%)}.top-card li img{width:3rem;height:2.25rem;border-radius:.55rem;object-fit:cover;box-shadow:0 8px 18px rgb(15 23 42 / .12)}.top-card li div{min-width:0}.top-card li strong,.top-card li span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-card li strong{font-size:1rem;line-height:1.15}.top-card li span{color:var(--color-muted);font-size:.88rem;font-weight:700}.top-card li mark{grid-column:1/-1;justify-self:start;border-radius:999px;padding:.22rem .6rem;background:color-mix(in srgb,var(--color-primary),transparent 84%);color:var(--color-primary);font-weight:950}.top-card-notice{margin:0;border:1px solid color-mix(in srgb,var(--color-primary),transparent 50%);border-radius:1rem;padding:.7rem;background:color-mix(in srgb,var(--color-primary),transparent 90%);color:var(--color-muted);font-weight:750}.top-card-empty{display:grid;justify-items:center;gap:.45rem;padding:2rem 1rem;text-align:center}.top-card-empty span{font-size:2.5rem}.top-card-empty h3,.top-card-empty p{margin:0}.top-card-empty p{max-width:32rem;color:var(--color-muted);font-weight:700}.top-card-generator__actions{display:grid;gap:.65rem}@media (min-width:720px){.top-card-generator{padding:1.2rem}.top-card-generator__head{grid-template-columns:minmax(0,1fr) minmax(18rem,.55fr);align-items:end}.top-card-generator__actions{display:flex;flex-wrap:wrap}.top-card li{grid-template-columns:auto minmax(0,1fr) auto}.top-card li mark{grid-column:auto;justify-self:end}}@media (prefers-color-scheme:dark){.top-card-generator,.top-card,.top-card-empty{box-shadow:0 20px 55px rgb(0 0 0 / .28)}}