:root { color-scheme: light; --ink:#080e30; --muted:#424c6d; --line:#d9deea; --blue:#064cff; --selected:#e7efff; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:19px; line-height:1.45; }
header { height:72px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 55px; color:var(--muted); }
.brand { font-size:28px; font-weight:750; color:var(--ink); text-decoration:none; letter-spacing:-.6px; }
main { max-width:1504px; padding:37px 55px 8px; margin:auto; }
h1 { font-size:72px; letter-spacing:-2.8px; line-height:1.15; margin:5px 0 10px; font-weight:750; }
.intro { font-size:25px; color:var(--muted); margin:0 0 32px; }
h2 { font-size:28px; line-height:1.25; letter-spacing:-.65px; margin:0 0 18px; }
.workspace { display:grid; grid-template-columns:377px minmax(0,1fr); gap:26px; align-items:start; }
.panel { border:1px solid var(--line); border-radius:8px; padding:23px; }
.controls { padding-bottom:52px; }
label { display:block; margin:23px 0 8px; color:#222d50; }
select { display:block; width:100%; height:52px; border:1px solid #c9d0e0; border-radius:8px; background:#fff; color:var(--ink); padding:0 15px; font:inherit; font-size:20px; cursor:pointer; }
button { font-family:inherit; font-size:16px; font-weight:500; cursor:pointer; border-radius:8px; transition:background .12s; }
button:disabled { cursor:wait; opacity:.5; }
button:focus-visible, select:focus-visible, a:focus-visible { outline:3px solid #779aff; outline-offset:3px; }
.primary,.secondary { min-height:48px; padding:10px 25px; border:1px solid var(--blue); }
.primary { background:var(--blue); color:#fff; }
.primary:hover:not(:disabled) { background:#003ed6; }
.secondary { background:#fff; color:var(--blue); }
.secondary:hover:not(:disabled), .text-button:hover:not(:disabled) { background:#f1f5ff; }
.controls .primary { width:100%; margin-top:29px; min-height:60px; font-size:18px; font-weight:600; }
.output { min-width:0; }
.usernames { padding-bottom:22px; }
#results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 22px; }
.username-row { display:flex; align-items:center; border:1px solid var(--line); border-radius:7px; min-width:0; min-height:54px; }
.username-row.selected { background:var(--selected); border-color:#739bff; }
.username { background:transparent; border:0; color:var(--ink); text-align:left; font-size:19px; font-weight:600; padding:12px 18px; min-width:0; flex:1; overflow-wrap:anywhere; }
.text-button { background:transparent; border:0; padding:9px 12px; color:var(--blue); font-size:16px; flex-shrink:0; }
.username-row .text-button { margin-right:7px; }
.backstory { margin-top:16px; padding-bottom:20px; }
.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:16px; }
.section-heading h2 { margin:0; }
.section-heading .text-button { padding-right:0; }
dl { display:grid; grid-template-columns:1fr 1.25fr 1fr .8fr; gap:22px; margin:0; }
dl div { min-width:0; }
dt { color:var(--muted); font-size:15px; margin-bottom:4px; }
dd { margin:0; font-size:17px; overflow-wrap:anywhere; }
.actions { display:flex; justify-content:flex-end; gap:16px; margin-top:16px; }
#status { min-height:0; margin:0; font-size:15px; color:var(--muted); }
#status:not(:empty) { margin:12px 0; }
footer { border-top:1px solid var(--line); margin-top:16px; padding-top:10px; color:#7c859f; font-size:14px; }
.loading { grid-column:1/-1; min-height:346px; color:var(--muted); }
@media (min-width:1500px) { header { padding-left:max(55px,calc((100vw - 1394px)/2)); padding-right:max(55px,calc((100vw - 1394px)/2)); } }
@media (max-width:1150px) { header { padding:0 32px; } main { padding:32px; } h1 { font-size:56px; } .intro { font-size:21px; } .workspace { grid-template-columns:290px minmax(0,1fr); gap:20px; } #results { gap:10px; } .username { font-size:16px; padding:12px; } dl { grid-template-columns:1fr 1fr; gap:16px; } }
@media (max-width:800px) { header { padding:0 22px; height:64px; } header span { font-size:13px; } .brand { font-size:23px; } main { padding:28px 22px; } h1 { font-size:43px; letter-spacing:-1.8px; } .intro { font-size:18px; margin-bottom:24px; } .workspace { grid-template-columns:1fr; } .controls { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; padding:20px; } .controls h2 { grid-column:1/-1; } .controls label { margin:0; } .controls select { grid-row:auto; font-size:16px; padding:0 10px; } .controls label[for="style"] { grid-column:1; grid-row:2; } #style { grid-column:1; grid-row:3; } .controls label[for="separator"] { grid-column:2; grid-row:2; } #separator { grid-column:2; grid-row:3; } .controls label[for="digits"] { grid-column:1; grid-row:4; margin-top:10px; } #digits { grid-column:1; grid-row:5; } .controls label[for="count"] { grid-column:2; grid-row:4; margin-top:10px; } #count { grid-column:2; grid-row:5; } .controls .primary { grid-column:1/-1; margin-top:12px; } h2 { font-size:24px; } .panel { padding:20px; } #results { grid-template-columns:1fr; } .username { font-size:18px; } .section-heading { align-items:start; } .section-heading .text-button { padding-top:3px; } dl { grid-template-columns:1fr; gap:16px; } dd { font-size:18px; } .actions { gap:12px; } .actions button { flex:1; padding:10px 12px; } }
@media (prefers-reduced-motion:reduce) { button { transition:none; } }

.story-link { margin:18px 0 0; font-size:15px; }
.story-link a { color:var(--blue); }
.skip-link { position:absolute; left:16px; top:-100px; background:white; padding:12px; z-index:10; }
.skip-link:focus { top:12px; }