.system{overflow:hidden;border:1px solid var(--border-light);border-radius:var(--radius-l);position:relative}.info{margin-top:calc(var(--space-3xl) * -1);padding:var(--space-s)}.system img{aspect-ratio:16/9;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}.system h2{font-size:var(--font-size-xl)}.character-gen .page-header{padding:var(--card-padding);background-color:var(--card-background);display:flex;justify-content:space-between;flex-flow:wrap;gap:var(--space-xs)}.character-gen .page-header h1{margin-block:0;font-size:var(--font-size-xl);gap:var(--space-xs)}.your-characters{display:flex;flex-flow:column;gap:var(--space-xs)}.your-characters>h2{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.11ch;font-weight:400;color:var(--accent-bright);font-size:var(--font-size-xs);display:flex;gap:var(--space-m)}.character-cards{display:flex;gap:var(--space-xs);flex-wrap:wrap}.character-card{border:1px solid transparent;background-color:var(--card-inner-background);padding:var(--space-xs);-webkit-padding-end:var(--space-l);padding-inline-end:var(--space-l);position:relative;border-radius:var(--radius-s)}.character-card h3{-webkit-margin-after:var(--space-2xs);margin-block-end:var(--space-2xs)}.character-card:hover{border:1px solid var(--accent-dull)}.character-card .button-for-edit{text-align:left;padding:0}.character-card .button-for-delete{position:absolute;top:0;right:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}