:root{color:#1d2433;font-synthesis:none;text-rendering:optimizelegibility;background:#f4f7fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}.app-shell{grid-template-columns:minmax(0,1fr) 360px;gap:22px;min-height:100vh;padding:26px;display:grid}.workspace{flex-direction:column;gap:20px;min-width:0;display:flex}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.eyebrow{color:#607086;text-transform:uppercase;margin:0 0 5px;font-size:.78rem;font-weight:700}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(2rem,4vw,3.4rem);line-height:1}h2{margin-bottom:0;font-size:1rem}.picker-grid{grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);gap:20px;display:grid}.side-rail{flex-direction:column;gap:20px;display:flex}.panel{background:#fff;border:1px solid #dce4ef;border-radius:8px;padding:18px;box-shadow:0 18px 50px #26334d14}.preview-panel{gap:14px;display:grid}.color-field{background:linear-gradient(to top, #000, #0000), linear-gradient(to right, #fff, #fff0), hsl(var(--field-hue) 100% 50%);cursor:crosshair;touch-action:none;border:0;border-radius:8px;width:100%;min-height:340px;padding:0;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0003}.color-field:focus-visible{outline-offset:3px;outline:3px solid #216fdb}.color-field-target{left:var(--field-x);top:var(--field-y);border:3px solid #fff;border-radius:50%;width:22px;height:22px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #000000a6,inset 0 0 0 1px #00000059}.hue-bar{cursor:crosshair;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border:0;border-radius:8px;width:100%;height:34px;padding:0;display:block;position:relative;box-shadow:inset 0 0 0 1px #0000002e}.hue-bar:focus-visible{outline-offset:3px;outline:3px solid #216fdb}.hue-bar-target{left:var(--hue-x);border:3px solid #fff;border-radius:999px;width:18px;height:42px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #00000094}.current-color{background:#f8fafc;border:1px solid #dce4ef;border-radius:8px;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;min-height:58px;padding:8px;display:grid}.current-swatch{border-radius:7px;height:40px;box-shadow:inset 0 0 0 1px #0000001f}.current-color span{color:#66758b;font-size:.78rem;font-weight:800;display:block}.current-color strong{color:#17202d;margin-top:2px;font-size:1rem;display:block}.controls-panel{flex-direction:column;gap:16px;display:flex}.slider-field{grid-template-columns:86px minmax(0,1fr) 48px;align-items:center;gap:12px;display:grid}label,.score-row span,.color-tile span{color:#66758b;font-size:.86rem;font-weight:700}input[type=range]{accent-color:#216fdb;width:100%}.hue-slider{accent-color:#216fdb;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:999px;height:10px}.format-row{grid-template-columns:52px minmax(0,1fr) 38px;align-items:center;gap:10px;display:grid}.format-row.compact{grid-template-columns:52px minmax(0,1fr);margin-top:14px}.format-row input{color:#1d2433;background:#f8fafc;border:1px solid #cdd8e6;border-radius:7px;width:100%;min-width:0;padding:10px 11px}.icon-button,.primary-button,.text-button{border:0;border-radius:7px;justify-content:center;align-items:center;transition:transform .16s,background .16s,border-color .16s;display:inline-flex}.icon-button{color:#263548;background:#eef3f8;width:38px;height:38px}.primary-button,.text-button{gap:8px;min-height:40px;padding:0 14px;font-weight:800}.primary-button{color:#fff;background:#216fdb}.text-button{color:#216fdb;background:#ecf4ff}.icon-button:hover,.primary-button:hover,.text-button:hover,.color-tile:hover,.saved-color:hover{transform:translateY(-1px)}.section-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.color-tile{text-align:left;background:#fff;border:1px solid #dce4ef;border-radius:8px;grid-template-rows:auto auto;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:2px 10px;min-height:68px;padding:9px;display:grid}.tile-swatch{border-radius:7px;grid-row:span 2;width:42px;height:42px;box-shadow:inset 0 0 0 1px #0000001f}.color-tile strong{color:#1d2433;text-overflow:ellipsis;font-size:.86rem;overflow:hidden}.contrast-preview{border-radius:8px;justify-content:center;align-items:center;height:138px;font-size:4rem;font-weight:900;display:flex;box-shadow:inset 0 0 0 1px #00000014}.score-row{border-top:1px solid #e6edf5;border-bottom:1px solid #e6edf5;justify-content:space-between;align-items:center;margin-top:14px;padding:12px 0;display:flex}.score-row strong{font-size:1.3rem}.badges{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;display:grid}.badges span{text-align:center;border-radius:7px;padding:8px 10px;font-size:.82rem;font-weight:900}.pass{color:#0f5132;background:#d9f6e7}.fail{color:#842029;background:#f8d7da}.toast{color:#fff;background:#1d2433;border-radius:8px;padding:12px 16px;font-weight:800;position:fixed;bottom:24px;right:24px;box-shadow:0 12px 30px #1d24333d}@media (width<=980px){.app-shell{grid-template-columns:1fr}.side-rail{grid-template-columns:1fr 1fr;display:grid}}@media (width<=760px){.app-shell{padding:16px}.topbar,.section-heading{align-items:flex-start}.picker-grid,.side-rail{grid-template-columns:1fr}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-field{min-height:240px}}@media (width<=460px){.topbar{flex-direction:column}.primary-button{width:100%}.slider-field,.format-row{grid-template-columns:1fr}.format-row .icon-button{width:100%}.palette-grid{grid-template-columns:1fr}}