:root{--paper:#faf8f5;--ink:#1c1a17;--muted:#8a857c;--hairline:#e8e4dc;--chip-border:#e0dbd2;--font-serif:"Instrument Serif", Georgia, serif;--font-sans:"Instrument Sans", system-ui, sans-serif;--font-mono:"IBM Plex Mono", Menlo, monospace}*{box-sizing:border-box}body{background-color:var(--paper);font-family:var(--font-sans);margin:0;line-height:1.5}a,body{color:var(--ink)}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.container{max-width:1240px;margin:0 auto;padding:0 24px}.site-header{border-bottom:1px solid var(--hairline)}.site-header__inner{justify-content:space-between;align-items:center;gap:16px;padding:16px 0;display:flex}.site-header__note{font-family:var(--font-mono);color:var(--muted);font-size:12px}.wordmark{font-family:var(--font-mono);letter-spacing:2.5px;text-transform:uppercase;font-size:13px;font-weight:500;text-decoration:none}.site-footer{border-top:1px solid var(--hairline);margin-top:56px}.site-footer__inner{font-family:var(--font-mono);color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:16px 0;font-size:12px;display:flex}.site-footer a{color:var(--muted)}.crumb{font-family:var(--font-mono);padding:20px 0 0;font-size:13px}.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink)}.intro{padding:32px 0 8px}.intro h1{font-family:var(--font-serif);margin:0 0 6px;font-size:32px;font-weight:400;line-height:1.1}.intro p{color:var(--muted);margin:0;font-size:15px}.specimen{grid-template-columns:5fr 6fr;gap:48px;padding:24px 0 8px;display:grid}@media (width<=900px){.specimen{grid-template-columns:1fr;gap:28px}}.specimen__side{gap:20px}.specimen__data,.specimen__side{flex-direction:column;display:flex}.specimen__data{gap:24px;min-width:0}.specimen__name{font-family:var(--font-serif);overflow-wrap:anywhere;margin:0;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:400;line-height:1.05}.specimen__hex{font-family:var(--font-mono);color:var(--muted);margin:6px 0 0;font-size:15px}.specimen__desc{max-width:48ch;margin:0;font-size:15px}.swatch-hero{border:1px solid var(--hairline);border-radius:16px;height:320px;transition:background-color .3s}@media (width<=900px){.swatch-hero{height:160px}}.searchbar{gap:10px;display:flex}.color-input{border:1.5px solid var(--ink);min-width:0;color:var(--ink);font-family:var(--font-mono);background-color:#fff;border-radius:10px;flex:1;padding:12px 14px;font-size:14px}.color-input::placeholder{color:var(--muted)}.random-button{color:var(--ink);font-family:var(--font-sans);align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:600;display:inline-flex}.color-picker,.random-button{border:1.5px solid var(--ink);cursor:pointer;background-color:#fff;border-radius:10px}.color-picker{width:47px;padding:4px}.data-section{flex-direction:column;display:flex}.data-section__head{justify-content:space-between;align-items:center;padding-bottom:6px;display:flex}.data-label{font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:500}.data-row{border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;gap:16px;padding:9px 0;display:flex}.data-row__label{font-family:var(--font-mono);color:var(--muted);text-transform:uppercase;flex:none;font-size:12px}.data-row__value{min-width:0;font-family:var(--font-mono);align-items:center;gap:12px;font-size:15px;display:flex}.data-row__value code{color:var(--ink);overflow-wrap:anywhere;text-align:right;background:0 0;padding:0}.copy-button{color:var(--muted);cursor:pointer;background:0 0;border:none;flex:none;align-items:center;padding:4px;display:flex}.copy-button:hover,.format-select{color:var(--ink)}.format-select{font-family:var(--font-mono);border:1px solid var(--chip-border);background-color:#fff;border-radius:8px;padding:4px 8px;font-size:13px}.swatch-row{gap:6px;display:flex}.swatch{cursor:pointer;border:1px solid #00000014;border-radius:8px;flex:1 1 0;height:44px;padding:0}.swatch--current{outline:2px solid var(--ink);outline-offset:2px}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--chip-border);color:var(--ink);font-family:var(--font-mono);cursor:pointer;background-color:#fff;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;text-decoration:none;display:inline-flex}.chip:hover{border-color:var(--ink)}.chip__swatch{border:1px solid #00000014;border-radius:50%;flex:none;width:12px;height:12px}.share-links{flex-wrap:wrap;gap:8px;display:flex}.tile-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:16px 0;display:grid}.tile{flex-direction:column;gap:2px;text-decoration:none;display:flex}.tile__swatch{border:1px solid #00000014;border-radius:10px;height:72px;margin-bottom:6px}.tile__name{font-size:14px;font-weight:600;line-height:1.25}.tile__hex{font-family:var(--font-mono);color:var(--muted);font-size:12px}.tile:hover .tile__swatch{outline:2px solid var(--ink);outline-offset:2px}.prose{max-width:720px;padding:40px 0 0}.prose h2{font-family:var(--font-serif);margin:0 0 12px;font-size:28px;font-weight:400}.prose p{margin:0 0 12px;font-size:15px}.prose a{font-weight:600}.generator-placeholder{border:1px solid var(--hairline);min-height:320px;font-family:var(--font-mono);color:var(--muted);background-color:#fff;border-radius:16px;justify-content:center;align-items:center;margin:24px 0 8px;font-size:14px;display:flex}@media (prefers-reduced-motion:reduce){.swatch-hero{transition:none}}