:root{--fg:#1d2433;--muted:#5d6779;--bg:#f7f7fa;--card:#fff;--line:#e3e3ec;--accent:#5b3cc4;--warn:#c77800;--bad:#c62828;--ok:#2e7d32;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--fg:#e8ebf2;--muted:#a0a6b8;--bg:#121218;--card:#1b1b24;--line:#2e2e3b;--accent:#a996ff;--ok:#66bb6a;--bad:#ef5350}}*{box-sizing:border-box}body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--fg);background:var(--bg)}a{color:var(--accent)}.wrap{max-width:1180px;margin:0 auto;padding:0 16px}.site-header{background:var(--card);border-bottom:1px solid var(--line)}.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;flex-wrap:wrap}.brand{font-weight:800;font-size:1.2rem;text-decoration:none;color:var(--fg)}.site-header nav{display:flex;gap:14px;flex-wrap:wrap;font-size:.95rem}.site-header nav a{text-decoration:none;color:var(--muted)}h1{font-size:1.9rem;margin:20px 0 4px;line-height:1.2}.h3{font-size:1.05rem;margin:18px 0 6px}.lede{color:var(--muted);margin:0 0 16px}.crumbs{font-size:.85rem;color:var(--muted);margin-top:14px}.muted{color:var(--muted)}.small{font-size:.85rem}.mono{font-family:ui-monospace,Menlo,monospace}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}button,.btn,select,input,textarea{font:inherit;color:inherit}button,.btn{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:7px 14px;cursor:pointer;text-decoration:none;display:inline-block}button:hover,.btn:hover{border-color:var(--accent)}button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.big{font-size:1.05rem;padding:9px 20px}kbd{font:600 .75rem ui-monospace,monospace;border:1px solid rgba(255,255,255,.5);border-radius:4px;padding:0 4px;margin-left:4px}button:disabled{opacity:.45;cursor:not-allowed}select,input:not([type]),input[type=text],textarea{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--bg)}input.invalid{border-color:var(--bad);outline:1px solid var(--bad)}input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--card)}textarea{width:100%;resize:vertical;display:block;margin-top:4px}label.file input{display:none}label.file{cursor:pointer}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:760px){.grid2{grid-template-columns:1fr}}details{margin-top:12px}details summary{cursor:pointer;font-weight:600}.pro-note{background:#fff6e0;color:#5b4300;border-radius:8px;padding:8px 12px}.field{display:flex;flex-direction:column;gap:2px;font-size:.9rem}.field input,.field select{width:100%}.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0}input.data{flex:1;min-width:240px;font-size:1.1rem;padding:8px 10px}[hidden]{display:none!important}.err{color:var(--bad);font-weight:600}.note{color:var(--muted);font-size:.9rem}.ok{color:var(--ok);font-weight:600}.bad{color:var(--bad);font-weight:600}.notice{border-left:4px solid var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--card));padding:10px 14px;border-radius:6px;margin:12px 0;font-size:.95rem}.result-big{font-size:1.7rem;font-family:ui-monospace,Menlo,monospace;font-weight:700;display:block}#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#1d2433;color:#fff;padding:8px 16px;border-radius:20px;font-size:.9rem;z-index:20}.dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;border:1px solid rgba(0,0,0,.15)}.swatches{display:flex;min-height:300px;border-radius:12px;overflow:hidden;margin:12px 0;border:1px solid var(--line)}.sw{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding:14px 6px;min-width:0;position:relative}.sw input.sw-hex{background:transparent;border:0;color:inherit;font-size:1.25rem;font-weight:700;text-align:center;width:100%;max-width:130px;padding:2px}.sw input.sw-hex:focus{background:#ffffff40;outline:1px solid currentColor}.sw-name,.sw-meta{opacity:.85;text-align:center}.sw-tools{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;opacity:.35;transition:opacity .15s}.sw:hover .sw-tools,.sw:focus-within .sw-tools,.sw[data-locked=true] .sw-tools{opacity:1}.sw-tools button{background:transparent;border:0;color:inherit;padding:4px 6px;font-size:1rem}@media(max-width:700px){.swatches:not(.scale){flex-direction:column;min-height:0}.sw{flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:10px}.sw-tools{opacity:1}}.swatches.mini{min-height:0;flex-direction:column;border:0}.sw-mini{display:flex;justify-content:space-between;border:0;border-radius:0;padding:12px}.swatches.scale{min-height:120px}.swatches.scale.static{min-height:110px}.sw-static{flex:1;border:0;border-radius:0;padding:10px 2px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;font-size:.8rem;min-width:0}@media(max-width:700px){.swatches.scale{flex-wrap:wrap}.sw-static{flex:0 0 33.33%;min-height:70px}}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.chip{border:0;border-radius:8px;padding:8px 10px;font:600 .8rem ui-monospace,monospace}.export{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}.pairs{display:flex;flex-wrap:wrap;gap:8px}.pair{padding:8px 12px;border-radius:8px;font-weight:700;border:1px solid var(--line)}.saved{display:flex;flex-direction:column;gap:6px;margin-top:8px}.saved-row{display:flex;align-items:center;gap:8px}.pal-strip{display:flex;height:40px;border-radius:8px;overflow:hidden;flex:1;min-width:120px;padding:0;border:0}.pal-strip i{flex:1}button.pal-strip{border:1px solid var(--line)}.pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:10px 0}.pal-grid.big{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.pal-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px}.pal-card .pal-strip{flex:none;height:56px}.drop{border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center}.drop.over{border-color:var(--accent)}.ex-canvas{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);cursor:crosshair;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/16px 16px}.ct-preview{border-radius:12px;padding:18px 22px;border:1px solid var(--line);margin:10px 0}.ct-h{font-size:1.6rem;font-weight:700;margin:0 0 6px}.ct-btn{display:inline-block;padding:8px 18px;border-radius:8px;font-weight:600}.ct-results{display:flex;gap:30px;flex-wrap:wrap;margin:10px 0}.ct-table{width:100%;border-collapse:collapse;font-size:.92rem}.ct-table th{text-align:left;font-weight:500;color:var(--muted);padding:5px 6px}.ct-table td{padding:5px 6px}.fix{border:1px solid var(--line);padding:10px 14px}.ct-demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}.ct-demos div{padding:16px;border-radius:10px;font-weight:600;border:1px solid var(--line)}.gr-preview{height:240px;border-radius:12px;border:1px solid var(--line)}.stops{display:flex;flex-direction:column;gap:6px}.stop{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.stop input[type=range]{flex:1;min-width:120px}.cv-swatch{min-height:200px;border-radius:12px;display:flex;align-items:flex-end;padding:14px;font:700 1.4rem ui-monospace,monospace;border:1px solid var(--line)}.cv-table{width:100%;border-collapse:collapse}.cv-table th{text-align:left;color:var(--muted);font-weight:500;padding:4px 6px;width:70px}.cv-table td{padding:4px 6px;border-bottom:1px solid var(--line)}.cv-table button{padding:3px 10px;font-size:.85rem}.cvd-grid{display:flex;flex-direction:column;gap:8px;margin:10px 0}.cvd-row{display:grid;grid-template-columns:260px 1fr;gap:12px;align-items:center}.cvd-label{display:flex;flex-direction:column;line-height:1.3}@media(max-width:700px){.cvd-row{grid-template-columns:1fr}}.hero-swatch{height:200px;border-radius:14px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 20px;font-weight:700;font-size:1.3rem;margin:12px 0;border:1px solid var(--line)}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0 18px}.color-tile{display:flex;flex-direction:column;justify-content:flex-end;min-height:90px;padding:10px;border-radius:10px;text-decoration:none;border:1px solid var(--line);font-size:.9rem}.prose{max-width:780px}.prose h2{margin-top:28px}.faq details{border-bottom:1px solid var(--line);padding:8px 0;margin:0}.related{columns:2}.ad-slot{margin:20px 0;min-height:90px}.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:20px 0;font-size:.9rem}.tool-links{display:flex;flex-wrap:wrap;gap:6px 16px}