:root{color-scheme:dark;--bg: #070707;--ink: #f2f2f2;--muted: #9a9a9a;--line: #232323;--chip: #141414;--chip-active: #f2f2f2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}.mono{font-family:Roboto Mono,monospace;font-size:13px}main{max-width:720px;margin:0 auto;padding:64px 24px 48px}header h1{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}.tagline{color:var(--muted);margin:0;max-width:56ch}a{color:var(--ink);text-underline-offset:3px}a:hover{color:var(--muted)}.hero{display:flex;flex-direction:column;align-items:center;gap:20px;padding:56px 0 40px;border-bottom:1px solid var(--line)}.hero-state{margin:0;color:var(--muted);min-height:24px;text-align:center}.hero-state .mono{color:var(--ink)}.picker{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:560px}.chip{font:inherit;font-size:13px;font-family:Roboto Mono,monospace;color:var(--muted);background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;transition:color .15s,background-color .15s}.chip:hover{color:var(--ink)}.chip.active{background:var(--chip-active);color:var(--bg);border-color:var(--chip-active)}.chip.auto{margin-left:8px}h2{font-size:16px;font-weight:600;margin:40px 0 4px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:16px}figure{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:24px 8px 16px;border:1px solid var(--line);border-radius:12px}figcaption{color:var(--muted)}.sizes p{color:var(--muted);max-width:56ch;margin:0 0 8px}.sizes code{font-family:Roboto Mono,monospace;font-size:13px;color:var(--ink)}.size-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px;margin-top:16px}.size-row figure{flex:1;min-width:96px}.colors p{color:var(--muted);max-width:56ch;margin:0 0 8px}.colors code{font-family:Roboto Mono,monospace;font-size:13px;color:var(--ink)}.color-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.color-row figure{flex:1;min-width:120px}.color-row figcaption{color:currentColor;opacity:.75}.colors .cycle-note{color:var(--muted);max-width:56ch;margin:24px 0 8px}.color-cycle{margin-top:16px;animation:color-cycle 9s ease-in-out infinite}.color-cycle figcaption{color:var(--muted)}@keyframes color-cycle{0%{color:#08fef2}25%{color:#ff338b}50%{color:#a252ee}75%{color:#ffd23f}to{color:#08fef2}}@media(prefers-reduced-motion:reduce){.color-cycle{animation:none;color:#08fef2}}footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}footer p{margin:0 0 12px}.install{margin:0;padding:10px 14px;background:var(--chip);border:1px solid var(--line);border-radius:8px;width:fit-content}@media(prefers-reduced-motion:reduce){.chip{transition:none}}