[data-tool=username-generator]{--username-paper: var(--color-surface);--username-card: var(--color-paper-2);--username-ink: var(--color-ink);--username-muted: var(--color-muted);--username-rule: var(--color-rule);--username-field-rule: var(--color-field-rule);--username-error: var(--color-danger);--username-accent: var(--color-ink);--username-on-accent: var(--color-surface);--username-hover: var(--color-paper-3);--username-selected: var(--color-tint);--username-status: var(--color-live);--username-focus: var(--color-focus);--username-ease: cubic-bezier(.16, 1, .3, 1);--username-space-sm: 8px;--username-space-md: 16px;--username-space-lg: 24px;--username-space-xl: 32px;--username-dur: .14s}[data-tool=username-generator] .username-results{--username-paper: var(--color-console-2);--username-card: var(--color-console-2);--username-ink: var(--color-console-ink);--username-muted: var(--color-console-muted);--username-rule: var(--color-console-rule);--username-field-rule: var(--color-console-rule);--username-accent: var(--color-highlight);--username-on-accent: var(--color-on-highlight);--username-hover: var(--color-console-3);--username-selected: var(--color-console-3);--username-status: var(--color-highlight);--username-focus: var(--color-console-focus)}[data-tool=username-generator]{font-family:var(--font-primary)}.username-workspace{display:grid;gap:var(--username-space-lg)}.username-toolbar{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(0,1fr)) minmax(6.5rem,.6fr) auto;align-items:end;gap:var(--username-space-md)}.username-field{min-width:0}.username-form .username-toolbar label{margin-block:0 6px}.username-more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--username-space-md);padding-block-end:var(--username-space-sm)}.username-more-grid label{margin-block-start:0}.username-form,.username-results{min-width:0;padding:var(--username-space-lg);border:1px solid var(--username-rule);border-radius:var(--radius-lg);background:var(--color-surface)}.username-results{border-color:var(--color-console);background:var(--color-console);color:var(--color-console-ink)}.username-form label{display:block;margin-block:12px 6px;font-size:var(--text-sm);font-weight:500}.username-form input:not([type=checkbox]),.username-form select,.username-manual-copy{width:100%;min-height:44px;border:1px solid var(--username-field-rule);border-radius:var(--radius-sm);padding:8px 12px;background:var(--username-paper);color:var(--username-ink);font:inherit}.username-form input[aria-invalid=true]{border-color:var(--username-error)}.username-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--username-space-md)}.username-help{color:var(--username-muted);font-size:13px;line-height:1.6;margin:6px 0 12px}.username-form .username-checkbox{display:flex;align-items:center;gap:var(--username-space-sm);min-height:44px;cursor:pointer}.username-checkbox input{width:20px;height:20px;accent-color:var(--color-control);flex-shrink:0}[data-tool=username-generator] button{min-height:40px;padding:0 var(--space-xs);border:1px solid var(--username-field-rule);border-radius:var(--radius-sm);background:var(--username-paper);color:var(--username-ink);font:500 var(--text-sm) / 1.2 var(--font-sans);white-space:normal;overflow-wrap:anywhere;cursor:pointer;transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}[data-tool=username-generator] button.username-primary{min-height:44px;padding-inline:var(--space-lg);white-space:nowrap;background:var(--username-accent);color:var(--username-on-accent);border-color:var(--username-accent);font-size:var(--text-base)}[data-tool=username-generator] button:disabled{opacity:.5;cursor:not-allowed}[data-tool=username-generator] :is(button,input,select,textarea,summary,a):focus-visible{outline:2px solid var(--username-focus);outline-offset:2px}[data-tool=username-generator] button:active:not(:disabled){transform:translateY(1px)}[data-tool=username-generator] button[aria-pressed=true]{border-color:var(--username-accent);color:var(--username-ink)}.username-error{color:var(--username-error);font-size:14px;line-height:1.6;margin-top:12px}.username-result-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--username-space-md)}[data-tool=username-generator] h2{font:650 clamp(1.375rem,1vw + 1rem,1.875rem) / 1.2 var(--font-sans);letter-spacing:-.03em;color:inherit;margin:0;overflow-wrap:anywhere}.username-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--username-space-sm)}.username-status{min-height:24px;margin-block:12px;color:var(--username-status);font-size:var(--text-sm)}.username-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14.5rem),1fr));gap:var(--username-space-sm);padding:0;margin:0;list-style:none}.username-list>li{min-width:0;padding:12px 12px 10px var(--username-space-md);border:1px solid var(--username-rule);border-radius:var(--radius-md);background:var(--username-card);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--username-space-sm);animation:username-reveal var(--username-dur) var(--username-ease)}.username-results .username-list>li{border-color:transparent}.username-list>li>div:first-child{min-width:0;flex:1 1 100%}.username-value{display:block;font:500 var(--text-md) / 1.3 var(--font-mono);overflow-wrap:anywhere;unicode-bidi:isolate}.username-list small{display:block;color:var(--username-muted);font-size:12px;margin-top:4px}.username-boundary{margin-top:var(--username-space-md)}.username-manual-copy{min-height:110px;resize:vertical}.username-favourites{margin-block:var(--username-space-lg);padding:var(--username-space-lg);border:1px solid var(--username-rule);border-radius:var(--radius-lg);background:var(--color-surface)}.username-favourite-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,14.5rem),1fr))}.username-guide{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:48px;padding-block:var(--username-space-xl)}.username-guide p,.username-faq p{line-height:1.8;max-width:75ch;margin-block:var(--username-space-md)}.username-example{margin:0}.username-example-flow{display:flex;flex-wrap:wrap;gap:var(--username-space-sm);align-items:center;padding-block:var(--username-space-md)}.username-example-flow code{padding:8px;border-block-end:2px solid var(--username-accent);font-size:14px;overflow-wrap:anywhere}.username-example p{color:var(--username-muted);font-size:14px}.username-faq{padding-block:var(--username-space-lg)}.username-faq details{border-block-end:1px solid var(--username-rule);padding-block:12px}.username-faq summary{min-height:44px;cursor:pointer;padding-block:10px;font-weight:600}.username-related{padding-block:var(--username-space-lg);display:flex;flex-wrap:wrap;gap:var(--username-space-md);align-items:center}.username-related h2{flex-basis:100%}.username-related a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;white-space:normal;overflow-wrap:anywhere}[data-tool=username-generator] [hidden]{display:none!important}@keyframes username-reveal{0%{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@media (hover: hover){[data-tool=username-generator] button:hover:not(:disabled){border-color:var(--username-accent)}.username-form :is(input,select):hover{border-color:var(--username-muted)}}@media (max-width: 1020px){.username-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}.username-field--seed,.username-toolbar .username-primary{grid-column:1 / -1}.username-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 850px){.username-workspace,.username-guide{grid-template-columns:minmax(0,1fr);gap:var(--username-space-lg)}.username-form,.username-results{padding:var(--username-space-lg)}.username-result-heading{align-items:start;flex-direction:column}.username-controls{grid-template-columns:minmax(0,1fr);gap:0}}@media (prefers-reduced-motion: reduce){.username-list>li{animation:none}[data-tool=username-generator] button:active{transform:none}}.username-form>label:first-child{margin-block-start:0}.username-form :is(input,select),.username-manual-copy{background:var(--username-paper)}[data-tool=username-generator] button.username-primary{font-weight:650}[data-tool=username-generator] button.username-primary:hover:not(:disabled){background:var(--color-ink-2);border-color:var(--color-ink-2)}[data-tool=username-generator] button:not(.username-primary):hover:not(:disabled){background:var(--username-hover)}[data-tool=username-generator] button[aria-pressed=true]{background:var(--username-selected)}.username-error{padding:var(--username-space-md);border-radius:var(--radius-md);background:var(--color-danger-soft);border:1px solid var(--color-danger-rule)}.username-results [data-empty],.username-favourites [data-favourites-empty]{padding:var(--username-space-lg);color:var(--username-muted);background:transparent;border:1px dashed var(--username-field-rule);border-radius:var(--radius-md);line-height:1.6}.username-list>li .username-actions{width:100%;gap:6px}.username-list>li .username-actions button{min-height:32px;padding-inline:10px;font-size:var(--text-xs)}.username-value[data-decoding]{color:var(--username-accent)}.username-value{color:var(--username-ink)}.username-example-flow code{background:var(--color-surface);border:1px solid var(--username-rule);border-radius:var(--radius-sm);color:var(--color-ink)}@media (max-width: 600px){.username-toolbar,.username-more-grid{grid-template-columns:minmax(0,1fr)}}@media (max-width: 480px){.username-form,.username-results,.username-favourites{padding:var(--username-space-md)}}.username-more-options{margin-block-start:var(--username-space-md);border-block-start:1px solid var(--username-rule)}.username-more-options summary{min-height:44px;padding-block:12px;cursor:pointer;font-size:14px;font-weight:650;color:var(--username-accent)}