body{background:var(--page);color:var(--text)}.skip-link{position:fixed;top:10px;left:10px;z-index:100;translate:0 -160%;padding:10px 14px;background:var(--text);color:#fff;border-radius:8px}.skip-link:focus{translate:0}.eyebrow{margin:0;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.tool-hero{width:min(1180px,calc(100% - 32px));margin:auto;padding:58px 0 44px;display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end}.tool-hero h1{margin:12px 0 18px;font-family:var(--font-serif);font-size:clamp(46px,7vw,82px);line-height:1;letter-spacing:-.055em}.tool-hero h1 em{color:var(--primary);font-style:normal}.tool-hero p:last-child,.privacy-card p{color:var(--muted)}.privacy-card{display:flex;gap:13px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft)}.privacy-dot{width:10px;height:10px;flex:none;margin-top:5px;border-radius:50%;background:var(--accent)}.privacy-card p{margin:6px 0 0;font-size:12px}.tool-card,.content-section{width:min(920px,calc(100% - 32px));margin:auto;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}.tool-card{padding:28px}.content-section{margin-top:28px;padding:28px}.content-section h2{margin-top:0;font-family:var(--font-serif)}label{display:grid;gap:8px;color:var(--muted);font-size:12px}input,select,textarea{width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);color:var(--text);padding:10px 12px;font:inherit}button{min-height:46px;border:0;border-radius:12px;padding:0 18px;background:var(--primary);color:#fff;font:inherit;font-weight:800;cursor:pointer}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.status{color:var(--muted);font-size:12px}.output{margin-top:18px;padding:22px;border-radius:16px;background:var(--surface-soft)}@media(max-width:760px){.tool-hero,.grid{grid-template-columns:1fr}.tool-hero{gap:28px}}.color-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}.swatch{min-height:360px;border-radius:18px;display:grid;place-items:center;align-content:center;gap:14px;border:1px solid var(--line)}.swatch input{width:92px;height:72px;padding:4px;background:#fff}.swatch span{padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:12px}.fields{display:grid;gap:14px}.triple{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media(max-width:760px){.color-layout{grid-template-columns:1fr}.swatch{min-height:230px}}