:root{--ink:#1a1a1a;--stock:#f4efe6;--vermillion:#d6442c;--pass:#2e7d32;--fail:#c0392b;--rule:#1a1a1a;--paper-grain:#e8e1d4;--font-serif:"Bitter", Georgia, serif;--font-mono:"JetBrains Mono", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--stock);min-height:100%;color:var(--ink);font-family:var(--font-serif);line-height:1.5}body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}.workbench{max-width:1280px;margin:0 auto;padding:2rem 1.5rem 4rem}.masthead{border-bottom:4px solid var(--ink);margin-bottom:2rem;padding-bottom:1rem}.masthead h1{font-family:var(--font-serif);letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(2rem,6vw,4rem);font-weight:900;line-height:1}.masthead .tagline{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.15em;opacity:.7;margin-top:.5rem;font-size:.8rem}.grid{grid-template-columns:3fr 2fr;align-items:start;gap:2rem;display:grid}@media (max-width:768px){.grid{grid-template-columns:1fr}}.preview-panel{border:4px solid var(--ink);flex-direction:column;min-height:340px;padding:0;display:flex;position:relative}.preview-display{flex-direction:column;flex:1;justify-content:center;align-items:flex-start;gap:1.5rem;padding:2.5rem;transition:background-color .15s,color .15s;display:flex}.preview-normal{font-family:var(--font-serif);font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:700;line-height:1.2}.preview-large{font-family:var(--font-serif);font-size:clamp(1.75rem,5vw,3.5rem);font-weight:700;line-height:1.1}.preview-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;opacity:.6;margin-bottom:.25rem;font-size:.7rem}.ratio-bar{border-top:4px solid var(--ink);background:var(--paper-grain);align-items:baseline;gap:1rem;padding:1rem 2.5rem;display:flex}.ratio-bar .ratio-value{font-family:var(--font-mono);color:var(--vermillion);font-size:clamp(2.5rem,6vw,4rem);font-weight:700;line-height:1}.ratio-bar .ratio-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;opacity:.7;font-size:.75rem}.controls-panel{flex-direction:column;gap:1.5rem;display:flex}.section-block{border:2px solid var(--ink);background:#ffffff59;padding:1.25rem}.section-block h2{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.15em;border-bottom:2px solid var(--ink);margin-bottom:1rem;padding-bottom:.5rem;font-size:.7rem}.color-input-row{align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.color-input-row:last-child{margin-bottom:0}.color-input-row label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;flex-shrink:0;width:3.5rem;font-size:.75rem}.color-picker{border:2px solid var(--ink);cursor:pointer;background:0 0;flex-shrink:0;width:3rem;height:3rem;padding:0}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none}.hex-input{font-family:var(--font-mono);border:2px solid var(--ink);background:var(--stock);width:100%;color:var(--ink);text-transform:uppercase;padding:.6rem .75rem;font-size:1rem;font-weight:500}.hex-input.invalid{border-color:var(--fail);background:#fdf0ee}.hex-input:focus-visible{outline:3px solid var(--vermillion);outline-offset:2px}.hex-error{font-family:var(--font-mono);color:var(--fail);min-height:1rem;margin-top:.3rem;font-size:.7rem;display:block}.btn{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;border:2px solid var(--ink);background:var(--ink);color:var(--stock);cursor:pointer;padding:.7rem 1.5rem;font-size:.8rem;font-weight:700;transition:background .15s,color .15s}.btn:hover{background:var(--vermillion);border-color:var(--vermillion)}.btn:focus-visible{outline:3px solid var(--vermillion);outline-offset:3px}.btn-secondary{color:var(--ink);background:0 0}.btn-secondary:hover{background:var(--ink);color:var(--stock);border-color:var(--ink)}.btn-row{flex-wrap:wrap;gap:.75rem;display:flex}.presets{flex-wrap:wrap;gap:.6rem;display:flex}.preset-chip{border:2px solid var(--ink);background:var(--stock);cursor:pointer;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:.5rem;padding:.4rem .6rem .4rem .4rem;font-size:.7rem;font-weight:500;transition:border-color .15s;display:flex}.preset-chip:hover{border-color:var(--vermillion)}.preset-chip:focus-visible{outline:3px solid var(--vermillion);outline-offset:2px}.preset-swatch{border:1px solid var(--ink);flex-shrink:0;width:2.25rem;height:2.25rem;display:flex}.preset-swatch .top,.preset-swatch .bottom{flex:1}.stamps{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (max-width:480px){.stamps{grid-template-columns:1fr}}.stamp{text-align:center;font-family:var(--font-mono);text-transform:uppercase;border:3px solid;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem 1rem;display:flex}.stamp-pass{color:var(--pass);transform:rotate(-2deg)}.stamp-fail{color:var(--fail);transform:rotate(1.5deg)}.stamp .stamp-level{letter-spacing:.15em;opacity:.8;font-size:.65rem}.stamp .stamp-result{letter-spacing:.05em;font-size:1.5rem;font-weight:700}.stamp .stamp-req{opacity:.6;font-size:.6rem}.css-block{position:relative}.css-output{font-family:var(--font-mono);background:var(--ink);color:var(--stock);white-space:pre-wrap;word-break:break-all;border:2px solid var(--ink);padding:1.25rem;font-size:.85rem}.copy-btn{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;border:2px solid var(--stock);background:var(--vermillion);color:var(--stock);cursor:pointer;padding:.4rem .75rem;font-size:.7rem;font-weight:700;position:absolute;top:.75rem;right:.75rem}.copy-btn:focus-visible{outline:3px solid var(--stock);outline-offset:2px}.copy-btn:hover{background:var(--stock);color:var(--vermillion);border-color:var(--stock)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}