@font-face{font-family:Control;src:url(/fonts/ControlUpright-Medium.otf) format("opentype");font-weight:500;font-style:normal}@font-face{font-family:Control;src:url(/fonts/ControlItalic-Medium.otf) format("opentype");font-weight:500;font-style:italic}@font-face{font-family:"Sita Serif";src:url(/fonts/SitaSerif-Medium.otf) format("opentype");font-weight:500;font-style:normal}@font-face{font-family:"Sita Serif";src:url(/fonts/SitaSerif-MediumItalic.otf) format("opentype");font-weight:500;font-style:italic}:root{--ink: #221f20;--ink-soft: #6f6a63;--indigo: #3830a0;--paper: #fcfbf7;--card: #ffffff;--line: #e6e3d9;--pass: #05a101;--fail: #c11209;--radius: 10px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Control,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500;line-height:1.5}.brand-band{height:34px;background-image:url(/brand/Hounds-Tooth.svg);background-size:auto 700%;background-repeat:repeat-x;background-position:left top;border-bottom:2px solid var(--indigo)}.app{max-width:860px;margin:0 auto;padding:40px 24px 64px}.logo{height:44px;display:block;margin-bottom:20px}header h1{margin:0 0 8px;font-size:30px;font-weight:500;letter-spacing:-.01em;color:var(--indigo)}.guidance{margin:0 0 32px;max-width:52ch;font-family:"Sita Serif",Georgia,serif;font-style:italic;font-size:17px;color:var(--indigo)}h2{font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-weight:500;color:var(--indigo);margin:0 0 12px}section{margin-bottom:32px}.swatch-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.swatch{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font:inherit;text-align:left;transition:border-color .15s}.swatch:hover{border-color:var(--indigo)}.swatch-chip{display:block;width:100%;height:44px;border-radius:6px;margin-bottom:6px}.swatch-name{font-weight:500;font-size:14px}.swatch-hex{font-size:12px;color:var(--ink-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.columns{display:grid;grid-template-columns:1fr 1fr;gap:32px}@media(max-width:720px){.columns{grid-template-columns:1fr}}.slider{display:grid;grid-template-columns:1fr 64px;align-items:center;gap:8px;margin-bottom:14px}.slider-label{grid-column:1 / -1;font-size:14px;font-weight:500}.slider-label em{font-family:"Sita Serif",Georgia,serif;font-style:italic;font-weight:500;color:var(--ink-soft);font-size:13px;margin-left:6px}.slider input[type=range]{width:100%;accent-color:var(--indigo)}.slider-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-align:right;color:var(--ink-soft)}.field-row{display:flex;gap:16px;align-items:flex-start;margin:20px 0}.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}.field input[type=text]{font:14px ui-monospace,SFMono-Regular,Menlo,monospace;padding:9px 12px;border:1px solid var(--line);border-radius:8px;width:150px;background:var(--card);color:var(--ink)}.field input[type=text]:focus{outline:2px solid var(--indigo);outline-offset:1px;border-color:transparent}.field input.invalid{border-color:var(--fail)}.field-error{font-size:12px;font-weight:400;color:var(--fail)}.native-picker input[type=color]{width:56px;height:38px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer}.generate{font:inherit;font-weight:500;color:#fff;background:var(--indigo);border:none;border-radius:8px;padding:11px 18px;cursor:pointer}.generate:hover{filter:brightness(1.15)}.preview{height:120px;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:14px}.status{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);margin-bottom:14px;font-size:14px}.status strong{font-size:15px}.status-approved{border-color:var(--pass)}.status-approved strong{color:var(--pass)}.status:not(.status-approved){border-color:var(--fail)}.status:not(.status-approved) strong{color:var(--fail)}.suggestion{display:flex;align-items:center;gap:10px;width:100%;font:inherit;font-size:14px;text-align:left;padding:10px 12px;background:var(--card);border:1px dashed var(--indigo);border-radius:8px;cursor:pointer;margin-bottom:14px;color:var(--ink)}.suggestion .swatch-chip{width:36px;height:36px;margin:0;flex-shrink:0}.suggestion:hover{border-style:solid}.outputs{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}.outputs-dimmed code,.outputs-dimmed .output-label{opacity:.55}.output-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}.output-row:last-of-type{border-bottom:none}.output-label{width:110px;flex-shrink:0;font-weight:500;font-size:13px}.output-row code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.copy{font:inherit;font-size:12px;font-weight:500;padding:5px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--indigo);cursor:pointer}.copy:hover{border-color:var(--indigo)}.outputs-note{margin:0;padding:10px 14px;font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line)}footer p{margin-top:40px;font-size:12px;color:var(--ink-soft);max-width:64ch}