.cp-mixer{background:linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent);background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:22px;padding:2rem}.cp-mixer-body{grid-template-columns:96px 1fr;align-items:start;gap:2rem;display:grid}.cp-mixer-picker{justify-content:center;display:flex}.cp-mixer-picker input[type=color]{cursor:pointer;width:88px;height:88px;box-shadow:var(--shadow-inset), var(--shadow-soft);background:0 0;border:none;border-radius:18px;transition:transform .15s}.cp-mixer-picker input[type=color]:hover{transform:scale(1.05)}.cp-mixer-inputs{grid-template-columns:repeat(4,minmax(90px,1fr));gap:.85rem;display:grid}.cp-mixer-inputs label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);flex-direction:column;gap:.35rem;font-size:.65rem;font-weight:700;display:flex}.cp-mixer-inputs input{border:1px solid var(--card-border);background:var(--input-bg);color:var(--text);border-radius:12px;padding:.6rem .65rem;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.9rem;transition:border-color .15s,box-shadow .15s}.cp-mixer-inputs input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);outline:none}.cp-mixer-meta{color:var(--text-muted);border-top:1px dashed var(--card-border);grid-column:1/-1;gap:2rem;margin-top:1rem;padding-top:.75rem;font-size:.8rem;display:flex}.cp-mixer-preview{height:48px;box-shadow:var(--shadow-inset), var(--shadow-soft);border-radius:14px;grid-column:1/-1;margin-top:1.25rem}@media (max-width:360px){.cp-mixer{padding:1.25rem}.cp-mixer-preview{height:40px}.cp-mixer-meta{flex-direction:column;gap:.4rem}}@media (max-width:600px){.cp-mixer{padding:1.5rem}.cp-mixer-body{grid-template-columns:1fr;gap:1.25rem}.cp-mixer-picker{justify-content:flex-start}.cp-mixer-picker input[type=color]{width:72px;height:72px}.cp-mixer-inputs{grid-template-columns:repeat(2,1fr)}}@media (max-width:900px){.cp-mixer-body{grid-template-columns:1fr;gap:1.5rem}.cp-mixer-inputs{grid-template-columns:repeat(2,1fr)}}@media (min-width:1400px){.cp-mixer{padding:2.25rem 2.5rem}.cp-mixer-body{gap:2.5rem}.cp-mixer-preview{height:56px}}.cp-code-title-row{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.cp-code-title-row h2{margin-bottom:.25rem}.cp-code-title-row p{color:var(--text-muted);margin:0;font-size:.78rem}.cp-code-alpha{min-width:180px;color:var(--text-muted);gap:.4rem;font-size:.68rem;font-weight:700;display:grid}.cp-code-alpha span{justify-content:space-between;display:flex}.cp-code-alpha input{accent-color:var(--accent)}.cp-code{background:var(--card-bg);border:1px solid var(--card-border);border-radius:22px;padding:1.75rem 2rem}.cp-code-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;display:grid}.cp-code-card{background:linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent);border:1px solid var(--card-border);border-radius:16px;padding:1.1rem 1.25rem 1.25rem;transition:transform .15s,box-shadow .15s}.cp-code-card:hover{box-shadow:var(--shadow-soft);transform:translateY(-3px)}.cp-code-header{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.4rem;display:flex}.cp-code-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:.7rem;font-weight:700}.cp-code-copy{color:var(--accent);cursor:pointer;white-space:nowrap;background:0 0;border:none;font-size:.7rem;font-weight:600}.cp-code-copy:hover{text-decoration:underline}.cp-code-value{color:var(--text);word-break:break-all;margin-bottom:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem}.cp-code-preview{height:32px;box-shadow:var(--shadow-inset), var(--shadow-soft);border-radius:10px}@media (max-width:360px){.cp-code{padding:1.25rem}.cp-code-grid{gap:1rem}.cp-code-value{font-size:.85rem}.cp-code-preview{height:28px}}@media (max-width:600px){.cp-code-title-row{flex-direction:column}.cp-code-alpha{width:100%}.cp-code{padding:1.5rem}.cp-code-grid{grid-template-columns:1fr}}@media (max-width:900px){.cp-code-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media (min-width:1400px){.cp-code{padding:2rem 2.25rem}.cp-code-grid{gap:1.5rem}}.cp-palette{background:var(--card-bg);border:1px solid var(--card-border);border-radius:22px;padding:1.4rem}.cp-palette-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.cp-palette-head h2{margin-bottom:.25rem}.cp-palette-head p{color:var(--text-muted);max-width:520px;margin:0;font-size:.76rem;line-height:1.5}.cp-palette-tabs{background:var(--input-bg,#f8fafc);border-radius:12px;gap:.2rem;padding:.25rem;display:flex}.cp-palette-tabs button{color:var(--text-muted);cursor:pointer;text-transform:uppercase;letter-spacing:.05em;background:0 0;border:0;border-radius:9px;padding:.5rem .7rem;font-size:.68rem;font-weight:800}.cp-palette-tabs button.is-active{background:var(--accent-soft);color:var(--accent)}.cp-palette-groups{gap:1rem;display:grid}.cp-palette-group{gap:.55rem;display:grid}.cp-palette-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);justify-content:space-between;align-items:center;gap:.75rem;font-size:.7rem;font-weight:800;display:flex}.cp-palette-title button{border:1px solid var(--card-border);color:var(--accent);cursor:pointer;background:0 0;border-radius:8px;padding:.25rem .5rem;font-size:.62rem;font-weight:800}.cp-palette-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:.45rem;display:grid}.cp-palette-color{aspect-ratio:1;cursor:pointer;box-shadow:var(--shadow-inset),0 4px 10px #0000000f;border:2px solid #0000;border-radius:12px;min-height:48px;transition:transform .14s,box-shadow .14s,border-color .14s;position:relative;overflow:hidden}.cp-palette-color:hover{box-shadow:var(--shadow-inset),0 10px 20px #0000001f;transform:translateY(-2px)scale(1.04)}.cp-palette-color.is-active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),var(--shadow-soft)}.cp-palette-color span{color:#fff;text-shadow:0 1px 5px #000000bf;white-space:nowrap;text-overflow:ellipsis;opacity:0;font:700 .52rem ui-monospace,monospace;transition:opacity .15s,transform .15s;position:absolute;bottom:.22rem;left:.25rem;right:.25rem;overflow:hidden;transform:translateY(4px)}.cp-palette-color:hover span{opacity:1;transform:translateY(0)}@media (max-width:600px){.cp-palette{padding:1rem}.cp-palette-grid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:.35rem}.cp-palette-color{border-radius:10px;min-height:38px}.cp-palette-head{flex-direction:column}.cp-palette-tabs{width:100%}.cp-palette-tabs button{flex:1}}.cp-shade{background:var(--card-bg);border:1px solid var(--card-border);border-radius:22px;padding:1.4rem}.cp-shade-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.cp-shade-head h2{margin-bottom:.25rem}.cp-shade-head p{color:var(--text-muted);max-width:430px;margin:0;font-size:.76rem;line-height:1.45}.cp-shade-tabs{background:var(--input-bg,#f8fafc);border-radius:11px;padding:.25rem;display:flex}.cp-shade-tabs button{color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:.45rem .65rem;font-size:.68rem;font-weight:800}.cp-shade-tabs button.is-active{background:var(--accent-soft);color:var(--accent)}.cp-shade-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:.65rem;display:grid}.cp-shade-item{aspect-ratio:1;cursor:pointer;box-shadow:var(--shadow-inset),0 6px 16px #0000000f;border:0;border-radius:14px;transition:transform .16s,box-shadow .16s;position:relative}.cp-shade-item:hover{box-shadow:var(--shadow-inset),0 12px 24px #0000001f;transform:translateY(-2px)scale(1.05)}.cp-shade-label{color:#fff;text-align:center;opacity:0;background:#0000008c;border-radius:6px;padding:2px 4px;font-family:ui-monospace,monospace;font-size:.56rem;transition:opacity .12s;position:absolute;inset:auto 5px 5px}.cp-shade-item:hover .cp-shade-label{opacity:1}.cp-shade-hint{color:var(--text-muted);margin-top:.75rem;font-size:.72rem}@media (max-width:600px){.cp-shade{padding:1rem}.cp-shade-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.45rem}.cp-shade-head{flex-direction:column}.cp-shade-tabs{width:100%}.cp-shade-tabs button{flex:1}}.cp-upload{width:100%;max-width:520px}.cp-upload-dropzone{border:2px dashed var(--card-border);text-align:center;cursor:pointer;background:linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent);border-radius:22px;padding:2.25rem 2rem;transition:border-color .15s,background .15s,box-shadow .15s}.cp-upload-dropzone:hover{box-shadow:var(--shadow-soft)}.cp-upload-dropzone.is-dragging{border-color:var(--accent);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent)}.cp-upload-text{color:var(--text-muted);flex-direction:column;gap:.35rem;font-size:.85rem;display:flex}.cp-upload-text strong{color:var(--text);font-size:.9rem}.cp-upload-preview{flex-direction:column;gap:.6rem;display:flex}.cp-upload-preview img{border:1px solid var(--card-border);width:100%;height:auto;box-shadow:var(--shadow-soft);border-radius:18px}.cp-upload-remove{color:var(--accent);cursor:pointer;background:0 0;border:none;align-self:flex-start;font-size:.75rem;font-weight:600}.cp-upload-remove:hover{text-decoration:underline}.cp-upload-error{color:#ef4444;margin-top:.5rem;font-size:.75rem}@media (max-width:360px){.cp-upload-dropzone{border-radius:18px;padding:1.5rem 1.25rem}.cp-upload-text{font-size:.8rem}.cp-upload-text strong{font-size:.85rem}}@media (max-width:600px){.cp-upload{max-width:100%}.cp-upload-dropzone{padding:1.75rem 1.5rem}}@media (max-width:900px){.cp-upload{max-width:100%}}@media (min-width:1400px){.cp-upload{max-width:620px}.cp-upload-dropzone{padding:2.5rem 2.25rem}}.cp-imgpick{background:var(--card-bg);border:1px solid var(--card-border);border-radius:22px;padding:1.5rem}.cp-imgpick-title{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.cp-imgpick-title h2{margin-bottom:.25rem}.cp-imgpick-title p{color:var(--text-muted);max-width:500px;margin:0;font-size:.78rem}.cp-imgpick-toolbar{background:var(--input-bg,#f8fafc);border-radius:10px;align-items:center;gap:.25rem;padding:.2rem;display:flex}.cp-imgpick-tool,.cp-imgpick-apply{cursor:pointer;color:var(--text);background:0 0;border:0;border-radius:8px;place-items:center;padding:.5rem;transition:background .15s;display:grid}.cp-imgpick-tool:hover,.cp-imgpick-tool:disabled{background:var(--accent-soft)}.cp-imgpick-zoom-label{color:var(--text-muted);text-align:center;min-width:38px;padding:0 .35rem;font-size:.68rem;font-weight:700}.cp-imgpick-apply{border:1px solid var(--accent);background:var(--accent);color:#fff;white-space:nowrap;padding:.5rem .7rem;font-size:.72rem;font-weight:700}.cp-imgpick-layout{grid-template-columns:320px 1fr;align-items:start;gap:1.5rem;margin-top:1rem;display:grid}.cp-imgpick-left{flex-direction:column;gap:.6rem;display:flex}.cp-imgpick-right{position:relative}.cp-imgpick-viewport{box-shadow:var(--shadow-inset),var(--shadow-soft);background:#00000008;border-radius:16px;min-height:300px;position:relative;overflow:hidden}.cp-imgpick-viewport canvas{max-width:none;transition:transform 80ms;display:block}.cp-imgpick-zoombar{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0009;border-radius:99px;align-items:center;gap:.5rem;padding:.25rem .55rem;display:flex;position:absolute;bottom:.5rem;left:.5rem}.cp-imgpick-zoombar input{accent-color:#fff;width:80px;height:4px}.cp-imgpick-zoombar span{color:#fff;font-size:.6rem;font-weight:700}.cp-imgpick-sample{background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--card-border);border-radius:12px;align-items:center;gap:.7rem;padding:.65rem .75rem;transition:all .2s;display:flex}.cp-imgpick-sample-swatch{border-radius:10px;flex-shrink:0;width:40px;height:40px;box-shadow:inset 0 0 0 1px #0000001f}.cp-imgpick-sample div{gap:.15rem;display:grid}.cp-imgpick-sample strong,.cp-imgpick-sample code{font-family:ui-monospace,monospace;font-size:.72rem}.cp-imgpick-sample small{color:var(--text-muted);font-size:.62rem}.cp-imgpick-history{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.65rem;display:flex}.cp-imgpick-history button{cursor:pointer;border:0;border-radius:7px;width:26px;height:26px;box-shadow:inset 0 0 0 1px #0000001f}.cp-imgpick-hint{color:var(--text-muted);font-size:.7rem;line-height:1.4}.cp-imgpick-loupe{z-index:30;pointer-events:none;border-radius:12px;width:120px;transition:opacity .15s;position:fixed;overflow:hidden;box-shadow:0 8px 30px #0003,0 0 0 1px #ffffff26}.cp-imgpick-loupe canvas{width:120px;height:120px;image-rendering:pixelated;display:block}.cp-imgpick-loupe-label{color:#fff;text-align:center;background:#000000bf;padding:.15rem;font:600 .65rem ui-monospace,monospace}.cp-imgpick-extraction{border:1px solid var(--card-border);border-radius:14px;margin-top:0;overflow:hidden}.cp-extraction-tabs{background:var(--input-bg,#f8fafc);border-bottom:1px solid var(--card-border);display:flex}.cp-extraction-tabs button{text-transform:uppercase;letter-spacing:.05em;cursor:pointer;color:var(--text-muted);background:0 0;border:0;flex:1;padding:.55rem .35rem;font-size:.65rem;font-weight:700;transition:color .15s,background .15s}.cp-extraction-tabs button.is-active{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.cp-extraction-content{max-height:240px;padding:.6rem;overflow-y:auto}.cp-extraction-list{gap:.35rem;display:grid}.cp-extraction-list button{cursor:pointer;border:0;border-radius:9px;justify-content:space-between;align-items:center;padding:.35rem .55rem;transition:transform .15s;display:flex}.cp-extraction-list button:hover{transform:scale(1.02)}.cp-extraction-list button span{color:#fff;text-shadow:0 1px 4px #00000080;font:700 .65rem ui-monospace,monospace}.cp-extraction-list button small{color:#ffffffb3;text-shadow:0 1px 4px #00000080;font-size:.6rem}.cp-extraction-gradient{border-radius:10px;align-items:end;height:60px;padding:.4rem;display:flex}.cp-extraction-gradient code{color:#fff;text-shadow:0 1px 6px #0009;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.55rem;overflow:hidden}@media (max-width:1024px){.cp-imgpick-layout{grid-template-columns:1fr}.cp-imgpick-left{order:2}.cp-imgpick-right{order:1}}@media (max-width:600px){.cp-imgpick{padding:1rem}.cp-imgpick-title{flex-direction:column}.cp-imgpick-layout{gap:1rem}}.cp-recolor{background:var(--card-bg);border:1px solid var(--card-border);border-radius:22px;padding:1.5rem}.cp-recolor-title{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.cp-recolor-title h2{margin-bottom:.25rem}.cp-recolor-title p{color:var(--text-muted);max-width:620px;margin:0;font-size:.78rem}.cp-recolor-layout{grid-template-columns:360px 1fr;align-items:start;gap:1.5rem;margin-top:1rem;display:grid}.cp-recolor-left{flex-direction:column;gap:.75rem;display:flex}.cp-recolor-status{color:var(--accent);font-size:.72rem;font-weight:700}.cp-recolor-error{color:#b91c1c;background:#ef444414;border:1px solid #ef444440;border-radius:10px;padding:.55rem .7rem;font-size:.75rem}.cp-recolor-mode{background:var(--input-bg,#f8fafc);border-radius:12px;grid-template-columns:repeat(4,1fr);gap:.25rem;padding:.25rem;display:grid}.cp-recolor-mode button{color:var(--text-muted);cursor:pointer;text-transform:uppercase;letter-spacing:.04em;background:0 0;border:0;border-radius:9px;padding:.5rem .35rem;font-size:.65rem;font-weight:800}.cp-recolor-mode button.is-active{background:var(--accent-soft);color:var(--accent)}.cp-recolor-strength{color:var(--text-muted);gap:.4rem;font-size:.68rem;font-weight:700;display:grid}.cp-recolor-strength output{float:right;color:var(--text);font-family:ui-monospace,monospace}.cp-recolor-strength input,.cp-recolor-grid input{accent-color:var(--accent);width:100%}.cp-recolor-grid{grid-template-columns:1fr 1fr;gap:.65rem;display:grid}.cp-recolor-grid label{color:var(--text-muted);gap:.3rem;font-size:.62rem;font-weight:700;display:grid}.cp-recolor-source{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.7rem;display:flex}.cp-recolor-source button{border:1px solid var(--card-border);color:#fff;text-shadow:0 1px 4px #0009;border-radius:8px;width:70px;height:28px;font:700 .6rem ui-monospace,monospace}.cp-recolor-source span{background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:.2rem .45rem;font-weight:700}.cp-recolor-controls{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.cp-recolor-reset{border:1px solid var(--card-border);background:var(--card-bg);color:var(--text);cursor:pointer;border-radius:10px;padding:.5rem .7rem;font-size:.72rem;font-weight:700}.cp-recolor-reset:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.cp-recolor-download{border:1px dashed var(--card-border);background:color-mix(in srgb,var(--text) 3%,transparent);border-radius:14px;gap:.7rem;padding:.9rem;display:grid}.cp-recolor-download label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;gap:.3rem;font-size:.65rem;font-weight:700;display:grid}.cp-recolor-download select{border:1px solid var(--card-border);background:var(--input-bg);color:var(--text);border-radius:9px;padding:.45rem}.cp-recolor-download-btn{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:11px;padding:.6rem 1rem;font-size:.75rem;font-weight:800}.cp-recolor-right{box-shadow:var(--shadow-inset),var(--shadow-soft);background:#111;border-radius:18px;position:relative;overflow:hidden}.cp-recolor-compare{display:block}.cp-recolor-before,.cp-recolor-canvas{width:100%;height:auto;display:block}.cp-recolor-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:2;position:absolute;inset:0}.cp-recolor-canvas{z-index:1;cursor:crosshair;position:relative}.cp-recolor-divider{top:0;bottom:0;left:var(--split);z-index:3;background:#fff;width:2px;position:absolute;box-shadow:0 0 0 1px #00000059,0 0 20px #fff9}.cp-recolor-divider:after{content:"Before / After";white-space:nowrap;color:#fff;background:#0009;border-radius:99px;padding:.2rem .45rem;font-size:.6rem;font-weight:700;position:absolute;top:.5rem;left:.5rem}@media (max-width:1024px){.cp-recolor-layout{grid-template-columns:1fr}.cp-recolor-left{order:2}.cp-recolor-right{order:1}}@media (max-width:600px){.cp-recolor{padding:1rem}.cp-recolor-grid{grid-template-columns:1fr}.cp-recolor-mode{grid-template-columns:1fr 1fr}.cp-recolor-layout{gap:1rem}}.cp-multimix{background:var(--card-bg);border:1px solid var(--card-border);border-radius:22px;padding:2rem}.cp-multimix-header{margin-bottom:1.25rem}.cp-multimix-header h2{color:var(--text);margin-bottom:.35rem}.cp-multimix-header p{color:var(--text-muted);max-width:640px;font-size:.9rem}.cp-multimix-mode{gap:1.25rem;margin-bottom:1.5rem;display:flex}.cp-multimix-mode label{letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;display:inline-flex}.cp-multimix-mode input{accent-color:var(--accent)}.cp-multimix-list{gap:.75rem;display:grid}.cp-multimix-row{background:var(--surface-2);border:1px solid var(--card-border);border-radius:14px;grid-template-columns:44px 1fr auto 36px;align-items:center;gap:.75rem;padding:.65rem .75rem;display:grid}.cp-multimix-row input[type=color]{cursor:pointer;background:var(--surface-2);width:36px;height:36px;box-shadow:var(--shadow-inset), var(--shadow-soft);border:none;border-radius:10px;padding:0}.cp-multimix-row input[type=range]{cursor:pointer;width:100%}.cp-multimix-weight{color:var(--text);text-align:right;min-width:36px;font-size:.75rem;font-weight:600}.cp-multimix-remove{border:1px solid var(--card-border);background:var(--card-bg);width:32px;height:32px;color:var(--text-muted);cursor:pointer;border-radius:10px;font-size:14px;transition:color .15s,border-color .15s,background .15s}.cp-multimix-remove:hover:not(:disabled){color:#ef4444;border-color:#ef4444}.cp-multimix-remove:disabled{opacity:.35;cursor:not-allowed}.cp-multimix-actions{margin-top:1rem}.cp-multimix-add{border:1px dashed var(--card-border);color:var(--accent);cursor:pointer;background:0 0;border-radius:12px;margin-top:1rem;padding:.5rem .9rem;font-size:.75rem;font-weight:700;transition:background .15s,border-color .15s}.cp-multimix-add:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);border-color:var(--accent)}.cp-multimix-result{border-top:1px dashed var(--card-border);gap:.75rem;margin-top:1.75rem;padding-top:1.25rem;display:grid}.cp-multimix-preview{height:56px;box-shadow:var(--shadow-inset), var(--shadow-soft);background:#000;border-radius:16px}.cp-multimix-meta{justify-content:space-between;align-items:center;gap:1rem;display:flex}.cp-multimix-meta strong{color:var(--text);font-size:.9rem;font-weight:700}.cp-multimix-meta code{color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.85rem}.cp-multimix-apply{border:1px solid var(--accent);background:var(--accent);color:#fff;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border-radius:14px;align-self:flex-start;margin-top:.25rem;padding:.6rem 1.1rem;font-size:.75rem;font-weight:800;transition:transform .12s,box-shadow .12s}.cp-multimix-apply:hover{box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);transform:translateY(-1px)}@media (max-width:900px){.cp-multimix{padding:1.75rem}}@media (max-width:600px){.cp-multimix{padding:1.4rem}.cp-multimix-row{grid-template-columns:40px 1fr auto 32px}.cp-multimix-preview{height:48px}}.cl-shell{gap:.65rem;display:grid;position:relative}.cl-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.cl-toolbar-left{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.cl-toolbar-right{flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.cl-filter-group{background:var(--input-bg,#f8fafc);border-radius:9px;gap:2px;padding:3px;display:flex}.cl-filter-group button,.cl-toolbar-btn{cursor:pointer;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:0 0;border:0;border-radius:7px;padding:.35rem .55rem;font-size:.62rem;font-weight:800;transition:color .15s,background .15s}.cl-filter-group button.is-active,.cl-toolbar-btn:hover{background:var(--accent-soft);color:var(--accent)}.cl-toolbar-btn:disabled{opacity:.4;cursor:default}.cl-danger{color:#ef4444!important}.cl-danger:hover{background:#ef44441f!important}.cl-sort-group select{border:1px solid var(--card-border);background:var(--input-bg,#f8fafc);color:var(--text);cursor:pointer;border-radius:8px;padding:.35rem .4rem;font-size:.62rem;font-weight:700}.cl-search{border:1px solid var(--card-border);background:var(--input-bg,#f8fafc);color:var(--text);border-radius:9px;width:130px;padding:.4rem .5rem;font-size:.7rem}.cl-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}.cl-stats{color:var(--text-muted);letter-spacing:.04em;font-size:.6rem}.cl-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.55rem;max-height:360px;padding:2px 0;display:grid;overflow-y:auto}.cl-card{cursor:pointer;border:2px solid #0000;border-radius:14px;flex-direction:column;justify-content:space-between;min-height:70px;padding:.5rem;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;position:relative;box-shadow:inset 0 0 0 1px #0000001f,0 4px 12px #0000000f}.cl-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #0000001f,0 8px 20px #0000001a}.cl-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),var(--shadow-soft)}.cl-card.is-pinned{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:-2px}.cl-card-body{color:#fff;text-shadow:0 1px 5px #000000b3;gap:1px;display:grid}.cl-card-hex{letter-spacing:.02em;font:700 .6rem ui-monospace,monospace}.cl-card-name{opacity:.8;font-size:.52rem}.cl-card-actions{opacity:0;gap:2px;margin-top:.3rem;transition:opacity .12s;display:flex}.cl-card:hover .cl-card-actions{opacity:1}.cl-act{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:#fff;background:#00000040;border:0;border-radius:6px;place-items:center;width:22px;height:22px;font-size:.55rem;transition:background .15s;display:grid}.cl-act:hover{background:#00000073}.cl-act.is-active{color:gold;background:#ffd70059}.cl-act-remove{margin-left:auto;font-size:.7rem}.cl-card input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.cl-empty{text-align:center;color:var(--text-muted);grid-column:1/-1;padding:1.5rem;font-size:.75rem}.cl-select-bar{background:var(--accent-soft);color:var(--accent);border-radius:10px;align-items:center;gap:.5rem;padding:.5rem .65rem;font-size:.7rem;font-weight:700;display:flex}.cl-confirm{color:#b91c1c;background:#ef44441a;border-radius:10px;align-items:center;gap:.5rem;padding:.5rem .65rem;font-size:.72rem;font-weight:600;display:flex}.cl-toast{color:#fff;z-index:30;background:#101828;border-radius:10px;padding:.65rem .85rem;font-size:.7rem;font-weight:600;position:fixed;bottom:1rem;right:1rem;box-shadow:0 8px 24px #10182840}@media (max-width:600px){.cl-toolbar{flex-direction:column;align-items:stretch}.cl-toolbar-left,.cl-toolbar-right,.cl-search{width:100%}.cl-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));max-height:280px}}.cp-studio-shell{color:var(--text,#172033);gap:1.25rem;display:grid;position:relative}.cp-studio-hero,.cp-lab-card{border:1px solid var(--card-border,#141e3c1a);background:var(--card-bg,#fff);border-radius:24px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .2s;box-shadow:0 8px 30px #1018280a,0 1px 2px #00000005}.cp-lab-card:hover{box-shadow:0 12px 40px #10182812,0 1px 3px #00000008}.cp-studio-hero{grid-template-columns:128px minmax(0,1fr) auto;align-items:center;gap:1.5rem;padding:1.5rem;transition:all .3s;display:grid;position:relative;overflow:hidden}.cp-studio-hero:after{content:"";background:radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--studio-color) 22%, transparent), transparent 32%);pointer-events:none;position:absolute;inset:0}.cp-studio-hero-swatch{background:var(--studio-color);height:128px;color:var(--studio-ink);box-shadow:inset 0 0 0 1px #ffffff38, 0 12px 30px color-mix(in srgb, var(--studio-color) 35%, transparent);z-index:1;border-radius:20px;place-items:end start;padding:.8rem;transition:background .3s,box-shadow .3s;display:grid;position:relative}.cp-studio-hero-swatch span{letter-spacing:.08em;font:700 .7rem ui-monospace,monospace}.cp-studio-hero-copy,.cp-studio-hero-meta{z-index:1;position:relative}.cp-eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted,#667085);font:700 .65rem/1.2 ui-monospace,SFMono-Regular,monospace}.cp-studio-hero h2,.cp-lab-card h2{letter-spacing:-.035em;color:var(--text-strong,#0e1726);margin:.35rem 0 0}.cp-studio-hero h2{max-width:600px;font-size:clamp(1.4rem,3vw,2.35rem)}.cp-studio-hero p{color:var(--text-muted,#667085);max-width:620px;margin:.55rem 0 0;font-size:.9rem;line-height:1.55}.cp-studio-actions{flex-wrap:wrap;gap:.6rem;margin-top:1rem;display:flex}.cp-primary-button,.cp-quiet-button{cursor:pointer;outline-offset:2px;border-radius:11px;padding:.65rem .85rem;font:700 .78rem inherit;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s,color .2s}.cp-primary-button{border:1px solid var(--accent,#4f46e5);background:var(--accent,#4f46e5);color:#fff;box-shadow:0 6px 16px color-mix(in srgb, var(--accent,#4f46e5) 22%, transparent)}.cp-primary-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.cp-quiet-button{border:1px solid var(--card-border,#141e3c24);background:color-mix(in srgb, var(--card-bg,#fff) 65%, transparent);color:var(--text,#172033)}.cp-primary-button:hover,.cp-quiet-button:hover{transform:translateY(-2px)}.cp-primary-button:hover{box-shadow:0 10px 24px color-mix(in srgb, var(--accent,#4f46e5) 30%, transparent)}.cp-primary-button:active,.cp-quiet-button:active{transform:scale(.97)}.cp-quiet-button.is-active{background:var(--accent-soft,#4f46e51f);border-color:var(--accent,#4f46e5);color:var(--accent,#4f46e5)}.cp-studio-hero-meta{grid-template-columns:repeat(3,auto);gap:1rem;display:grid}.cp-studio-hero-meta span{border-left:1px solid var(--card-border,#141e3c24);gap:.2rem;padding-left:1rem;display:grid}.cp-studio-hero-meta strong{color:var(--text-strong,#0e1726);font-size:1rem}.cp-studio-hero-meta small{color:var(--text-muted,#667085);font-size:.65rem}.cp-lab-card{padding:1.25rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}.cp-card-heading{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.cp-card-heading select,.cp-section-label-row select{border:1px solid var(--card-border,#141e3c24);background:var(--input-bg,#f8fafc);color:var(--text,#172033);border-radius:9px;padding:.5rem .6rem;font-size:.78rem;transition:border-color .15s}.cp-card-heading select:focus,.cp-section-label-row select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}.cp-picker-mode-scroller{scrollbar-width:none;gap:.25rem;min-width:0;max-width:70%;padding-bottom:.15rem;display:flex;overflow:auto}.cp-picker-mode-scroller::-webkit-scrollbar{display:none}.cp-picker-mode-scroller button,.cp-segmented button{white-space:nowrap;color:var(--text-muted,#667085);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:.45rem .55rem;font-size:.7rem;transition:background .2s,color .2s}.cp-picker-mode-scroller button:hover{background:var(--accent-soft,#4f46e50f)}.cp-picker-mode-scroller button.is-active,.cp-segmented button.is-active{background:var(--accent-soft,#4f46e51f);color:var(--accent,#4f46e5);font-weight:700}.cp-picker-layout{grid-template-columns:minmax(240px,360px) minmax(0,1fr);gap:1.5rem;display:grid}.cp-picker-visual{align-content:start;gap:1rem;display:grid}.cp-surface{cursor:crosshair;touch-action:none;background-color:hsl(var(--picker-hue), 100%, 50%);background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);border-radius:18px;height:300px;transition:border-radius .3s;position:relative;overflow:hidden}.cp-surface-linear{background-image:linear-gradient(135deg, hsl(var(--picker-hue), 100%, 50%), #111)}.cp-surface-wheel,.cp-surface-ring{background:conic-gradient(#ff003c,#ffea00,#00ff7b,#00cfff,#6d36ff,#ff00b8,#ff003c);border-radius:50%}.cp-surface-wheel:after,.cp-surface-ring:after{content:"";background:var(--card-bg,#fff);border-radius:50%;position:absolute;inset:18%}.cp-surface-ring{background:conic-gradient(#ff003c,#ffea00,#00ff7b,#00cfff,#6d36ff,#ff00b8,#ff003c)}.cp-surface-ring:after{inset:30%}.cp-surface-triangle{clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(150deg, #fff0, #000000f2), linear-gradient(30deg, #fff0, #fff), hsl(var(--picker-hue), 100%, 50%)}.cp-surface-compact,.cp-surface-minimal{height:170px}.cp-surface-compact{background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);border-radius:14px}.cp-surface-photoshop{background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);border:8px solid #242936;border-radius:3px}.cp-surface-material{background:linear-gradient(135deg,#f44336,#ff9800 20%,#ffeb3b 40%,#4caf50 60%,#2196f3 80%,#9c27b0);border-radius:16px}.cp-surface-developer{background-image:linear-gradient(45deg,#ffffff1f 25%,#0000 25% 50%,#ffffff1f 50% 75%,#0000 75%),linear-gradient(90deg,#111827,#4f46e5);background-size:18px 18px,100% 100%;border-radius:14px}.cp-surface-pointer{z-index:3;pointer-events:none;border:2px solid #fff;border-radius:50%;width:18px;height:18px;transition:width .15s,height .15s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #0009,0 2px 8px #0000004d}.cp-surface-pointer:active{width:22px;height:22px}.cp-surface-core{z-index:2;pointer-events:none;border-radius:50%;position:absolute;inset:26%}.cp-hue-rail{cursor:pointer;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:99px;height:16px;position:relative}.cp-hue-rail span{left:var(--hue-position);border:2px solid #fff;border-radius:50%;width:20px;height:20px;transition:left 50ms;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #101828}.cp-picker-controls{gap:1rem;display:grid}.cp-section-label-row{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.cp-channel-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;display:grid}.cp-channel-grid label,.cp-temperature-row label,.cp-contrast-controls label{color:var(--text-muted,#667085);gap:.35rem;font-size:.68rem;font-weight:700;display:grid}.cp-channel-grid input,.cp-contrast-controls input{box-sizing:border-box;border:1px solid var(--card-border,#141e3c24);background:var(--input-bg,#f8fafc);width:100%;color:var(--text,#172033);border-radius:9px;padding:.55rem .5rem;font:600 .8rem ui-monospace,monospace;transition:border-color .15s,box-shadow .15s}.cp-channel-grid input:focus,.cp-contrast-controls input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}.cp-alpha-control,.cp-temperature-row label{gap:.5rem;display:grid}.cp-alpha-control span,.cp-temperature-row label{color:var(--text-muted,#667085);font-size:.72rem}.cp-alpha-control output{float:right;color:var(--text,#172033);font-weight:700}.cp-alpha-control input,.cp-temperature-row input,.cp-range-label input{accent-color:var(--accent,#4f46e5);width:100%}.cp-temperature-row{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.cp-code-studio-header{border-bottom:1px solid var(--card-border,#141e3c1a);align-items:center;gap:.6rem;margin-bottom:1rem;padding:0 0 1rem;display:flex}.cp-color-dot{border-radius:50%;flex-shrink:0;width:18px;height:18px;box-shadow:inset 0 0 0 1px #00000026}.cp-code-studio-header code{font:700 .8rem ui-monospace,monospace}.cp-code-studio-header span:last-child{color:var(--text-muted,#667085);font-size:.75rem}.cp-export-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.5rem;display:grid}.cp-export-item{text-align:left;border:1px solid var(--card-border,#141e3c1a);background:var(--input-bg,#f8fafc);cursor:pointer;min-width:0;color:var(--text,#172033);border-radius:11px;gap:.3rem;padding:.65rem;transition:border-color .2s,background .2s,transform .2s cubic-bezier(.34,1.56,.64,1);display:grid}.cp-export-item:hover{border-color:var(--accent,#4f46e5);background:var(--accent-soft,#4f46e512);transform:translateY(-1px)}.cp-export-item:active{transform:scale(.97)}.cp-export-item span{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted,#667085);font-size:.62rem;font-weight:700}.cp-export-item code{text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;overflow:hidden}.cp-lab-two-col{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}.cp-harmony-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.55rem;display:grid}.cp-harmony-grid button{cursor:pointer;border:0;border-radius:12px;align-items:end;height:78px;padding:.55rem;font:700 .62rem ui-monospace,monospace;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;display:flex;box-shadow:inset 0 0 0 1px #0000001a}.cp-harmony-grid button:hover{transform:scale(1.06);box-shadow:inset 0 0 0 1px #0000001a,0 4px 16px #0000001a}.cp-harmony-grid button:active{transform:scale(.95)}.cp-contrast-preview{border-radius:16px;gap:.7rem;min-height:150px;padding:1rem;display:grid}.cp-contrast-preview span{opacity:.76;font-size:.8rem}.cp-contrast-preview button{cursor:pointer;border:0;border-radius:9px;width:max-content;padding:.6rem .75rem;font-weight:700;transition:transform .2s}.cp-contrast-preview button:hover{transform:scale(1.03)}.cp-contrast-controls{grid-template-columns:1fr auto;align-items:end;gap:.8rem;margin-top:1rem;display:grid}.cp-contrast-ratio{text-align:right;gap:.15rem;display:grid}.cp-contrast-ratio strong{color:var(--text-strong,#0e1726);font-size:1.4rem}.cp-contrast-ratio span{color:var(--text-muted,#667085);font-size:.65rem}.cp-contrast-badges{flex-wrap:wrap;grid-column:1/-1;gap:.45rem;display:flex}.cp-contrast-badges span{border-radius:999px;padding:.35rem .5rem;font-size:.65rem;font-weight:700}.cp-contrast-badges .is-pass,.cp-pass-pass{color:#047857;background:#10b98124}.cp-contrast-badges .is-fail,.cp-pass-fail{color:#b91c1c;background:#ef444421}.cp-pass{border-radius:999px;padding:.35rem .55rem;font-size:.65rem;font-weight:700}.cp-gradient-preview{color:#fff;border-radius:17px;align-items:end;height:180px;padding:1rem;transition:height .3s;display:flex;box-shadow:inset 0 0 0 1px #ffffff26}.cp-gradient-preview code{text-overflow:ellipsis;white-space:nowrap;background:#0000006b;border-radius:7px;max-width:100%;padding:.4rem .5rem;font-size:.68rem;overflow:hidden}.cp-gradient-toolbar{flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1rem;display:flex}.cp-segmented{background:var(--input-bg,#f8fafc);border-radius:10px;gap:.1rem;padding:.2rem;display:flex}.cp-range-label{color:var(--text-muted,#667085);flex:1;align-items:center;gap:.5rem;min-width:180px;font-size:.7rem;display:flex}.cp-gradient-stops{flex-wrap:wrap;gap:.6rem;margin:1rem 0;display:flex}.cp-gradient-stops label{border:1px solid var(--card-border,#141e3c1f);border-radius:9px;align-items:center;gap:.4rem;padding:.35rem .45rem;transition:border-color .15s;display:flex}.cp-gradient-stops label:hover{border-color:var(--accent)}.cp-gradient-stops input{cursor:pointer;border:0;width:28px;height:24px;padding:0}.cp-gradient-stops code{font-size:.65rem}.cp-preview-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.cp-preview-dark,.cp-preview-light{border-radius:17px;min-height:245px;padding:1.25rem}.cp-preview-dark{color:#f8fafc;background:#111827}.cp-preview-dark h3{letter-spacing:-.04em;max-width:260px;margin:.9rem 0 .5rem;font-size:1.35rem}.cp-preview-dark p{color:#aab4c8;max-width:290px;font-size:.75rem;line-height:1.5}.cp-preview-chip{border:1px solid #fff3;border-radius:99px;padding:.3rem .45rem;font-size:.62rem;display:inline-block}.cp-preview-dark button,.cp-preview-light button{background:var(--preview-color);color:color-mix(in srgb, var(--preview-color), #fff 80%);cursor:pointer;border:0;border-radius:8px;padding:.6rem .75rem;font-weight:700;transition:transform .2s,filter .2s}.cp-preview-dark button:hover,.cp-preview-light button:hover{filter:brightness(1.08);transform:scale(1.03)}.cp-mini-chart{align-items:end;gap:5px;height:54px;margin-top:1.2rem;display:flex}.cp-mini-chart i{background:var(--preview-color);border-radius:4px 4px 0 0;width:14px;height:35%;transition:height .5s,background .3s}.cp-mini-chart i:nth-child(2){height:70%}.cp-mini-chart i:nth-child(3){height:52%}.cp-mini-chart i:nth-child(4){height:88%}.cp-mini-chart i:nth-child(5){height:62%}.cp-preview-light{color:#182235;background:#f2f4f8;gap:1rem;display:grid}.cp-preview-card-mini{background:#fff;border-radius:13px;gap:.3rem;padding:1rem;display:grid;box-shadow:0 8px 20px #18223514}.cp-preview-card-mini span,.cp-preview-card-mini small{color:#718096;font-size:.65rem}.cp-preview-card-mini strong{font-size:1.1rem}.cp-preview-form{background:#fff;border-radius:13px;gap:.55rem;padding:1rem;display:grid}.cp-preview-form span{background:#e4e7ec;border-radius:99px;height:9px}.cp-preview-form span:first-child{width:80%}.cp-preview-form button{width:max-content}.cp-live-dot{color:#047857;font-size:.65rem;font-weight:700}.cp-live-dot:before{content:"";background:#10b981;border-radius:50%;width:7px;height:7px;margin-right:.35rem;display:inline-block}.cp-history-group{gap:.6rem;margin-top:1rem;display:grid}.cp-section-label{color:var(--text-muted,#667085);text-transform:uppercase;letter-spacing:.1em;font-size:.65rem;font-weight:700}.cp-swatch-row{flex-wrap:wrap;gap:.55rem;display:flex}.cp-swatch-row button{cursor:pointer;border:0;border-radius:12px;width:44px;height:44px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;box-shadow:inset 0 0 0 1px #0000001f,0 3px 9px #00000014}.cp-swatch-row button:hover{transform:scale(1.15);box-shadow:inset 0 0 0 1px #0000001f,0 6px 20px #0000001f}.cp-swatch-row button:active{transform:scale(.92)}.cp-empty-note{color:var(--text-muted,#667085);font-size:.75rem;font-style:italic}.cp-toast{color:#fff;z-index:20;background:#101828;border-radius:10px;padding:.75rem .9rem;font-size:.75rem;font-weight:600;animation:.3s cubic-bezier(.34,1.56,.64,1) cp-toast-in;position:fixed;bottom:1.25rem;right:1.25rem;box-shadow:0 8px 24px #10182840}@keyframes cp-toast-in{0%{opacity:0;transform:translateY(12px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:900px){.cp-studio-hero{grid-template-columns:92px 1fr}.cp-studio-hero-swatch{height:92px}.cp-studio-hero-meta{grid-column:1/-1;display:flex}.cp-picker-layout{grid-template-columns:1fr}.cp-surface{height:min(68vw,320px)}.cp-picker-mode-scroller{order:3;max-width:100%}.cp-card-heading{flex-wrap:wrap}}@media (max-width:650px){.cp-studio-hero{grid-template-columns:1fr}.cp-studio-hero-swatch{width:92px;height:92px}.cp-lab-two-col,.cp-preview-grid{grid-template-columns:1fr}.cp-channel-grid{grid-template-columns:repeat(2,1fr)}.cp-contrast-controls{grid-template-columns:1fr}.cp-contrast-ratio{text-align:left}.cp-contrast-badges{grid-column:auto}.cp-studio-hero-meta{gap:.6rem}.cp-studio-hero-meta span{padding-left:.6rem}.cp-gradient-toolbar{flex-direction:column;align-items:stretch}.cp-range-label{width:100%}}.cp-score-bar{background:var(--input-bg,#f8fafc);border-radius:99px;height:24px;margin-bottom:1rem;position:relative;overflow:hidden}.cp-score-fill{border-radius:99px;height:100%;transition:width .3s,background .3s}.cp-score-bar span{color:var(--text-strong);background:var(--card-bg);border-radius:6px;padding:0 .4rem;font:700 .65rem ui-monospace,monospace;position:absolute;top:50%;right:.55rem;transform:translateY(-50%)}.cp-ac-grid{grid-template-columns:1fr 1fr;align-items:end;gap:.65rem;margin-top:1rem;display:grid}.cp-ac-grid label,.cp-ac-grid select{color:var(--text-muted);gap:.3rem;font-size:.65rem;font-weight:700;display:grid}.cp-ac-grid input,.cp-ac-grid select{box-sizing:border-box;border:1px solid var(--card-border,#141e3c24);background:var(--input-bg,#f8fafc);width:100%;color:var(--text,#172033);border-radius:9px;padding:.45rem .5rem;font:600 .75rem ui-monospace,monospace}.cp-ac-actions{align-self:end;gap:.35rem;display:flex}.cp-ac-fix{border:1px solid var(--card-border);background:var(--card-bg);color:var(--text);cursor:pointer;border-radius:9px;padding:.45rem .6rem;font-size:.65rem;font-weight:700}.cp-ac-fix:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.cp-ac-grid label:last-child{grid-column:1/-1}@media (max-width:600px){.cp-ac-grid{grid-template-columns:1fr}.cp-ac-actions{grid-column:1/-1}}.cp-specs-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.45rem;display:grid}.cp-spec-item{text-align:left;border:1px solid var(--card-border,#141e3c1a);background:var(--input-bg,#f8fafc);cursor:pointer;color:var(--text,#172033);border-radius:10px;gap:.2rem;padding:.55rem .6rem;transition:border-color .15s,background .15s;display:grid}.cp-spec-item:hover{border-color:var(--accent);background:var(--accent-soft,#4f46e512)}.cp-spec-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted,#667085);font-size:.58rem;font-weight:700}.cp-spec-value{text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace;font-size:.72rem;overflow:hidden}@media (prefers-reduced-motion:reduce){.cp-primary-button,.cp-quiet-button,.cp-studio-hero,.cp-lab-card,.cp-export-item,.cp-harmony-grid button,.cp-swatch-row button,.cp-toast{transition:none!important;animation:none!important}}html[data-theme=dark] .cp-studio-hero,html[data-theme=dark] .cp-lab-card{border-color:#ffffff12;box-shadow:0 20px 60px #0000002e}.color-picker-page{isolation:isolate;background:var(--bg,#f8fafc);padding:0;position:relative;overflow:hidden}.color-picker-page:before{content:"";z-index:0;background:radial-gradient(ellipse 1400px 800px at 15% -25%, color-mix(in srgb, var(--accent) 9%, transparent), transparent), radial-gradient(ellipse 1200px 700px at 85% 15%, color-mix(in srgb, var(--accent) 6%, transparent), transparent), radial-gradient(ellipse 900px 600px at 50% 65%, color-mix(in srgb, var(--accent-secondary,#6366f1) 4%, transparent), transparent);pointer-events:none;position:fixed;inset:0}.color-picker-page:after{content:"";z-index:0;opacity:.025;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.cp-blob{filter:blur(80px);opacity:.18;pointer-events:none;z-index:0;border-radius:50%;animation:18s ease-in-out infinite alternate cp-blob-drift;position:fixed}.cp-blob-1{background:color-mix(in srgb, var(--accent) 55%, #7c3aed);width:520px;height:520px;animation-duration:22s;top:-120px;right:-80px}.cp-blob-2{background:color-mix(in srgb, var(--accent-secondary,#6366f1) 50%, #ec4899);width:420px;height:420px;animation-duration:26s;animation-delay:-7s;bottom:10%;left:-140px}.cp-blob-3{background:color-mix(in srgb, var(--accent) 40%, #3b82f6);width:340px;height:340px;animation-duration:20s;animation-delay:-12s;top:45%;right:10%}@keyframes cp-blob-drift{0%{transform:translate(0)scale(1)}33%{transform:translate(40px,-30px)scale(1.06)}66%{transform:translate(-20px,50px)scale(.92)}to{transform:translate(30px,-20px)scale(1.04)}}.cp-page-content{z-index:1;max-width:100vw;position:relative}.cp-hero{gap:2rem;padding:3.5rem 1.5rem 2.5rem;display:grid;position:relative}@media (min-width:768px){.cp-hero{grid-template-columns:1fr 320px;align-items:center;max-width:1440px;margin:0 auto;padding:5rem 2rem 3rem}}@media (min-width:1200px){.cp-hero{grid-template-columns:1fr 380px;padding:6rem 2.5rem 3.5rem}}.cp-hero-badge{background:var(--accent-soft);color:var(--accent);letter-spacing:.01em;border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);border-radius:999px;align-items:center;gap:.45rem;width:-moz-fit-content;width:fit-content;max-width:100%;margin-bottom:.75rem;padding:.35rem .65rem .35rem .35rem;font-size:.7rem;font-weight:700;display:inline-flex}.cp-hero-badge span{background:var(--accent);color:#fff;border-radius:999px;padding:.12rem .4rem;font-size:.6rem}.cp-hero h1{letter-spacing:-.03em;color:var(--text-strong);max-width:800px;margin:0;font-size:clamp(2.4rem,5.5vw,4rem);font-weight:800;line-height:1.08}.cp-hero .cp-hero-gradient-text{background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #7c3aed) 50%, var(--accent-secondary,var(--accent-2,#6366f1)) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.cp-hero-sub{color:var(--text-muted);max-width:620px;margin-top:.75rem;font-size:clamp(.95rem,1.8vw,1.1rem);line-height:1.65}.cp-hero-stats{flex-wrap:wrap;gap:1.75rem;margin-top:1.25rem;display:flex}.cp-hero-stats span{gap:.1rem;display:grid}.cp-hero-stats strong{color:var(--text-strong);font-size:1.1rem}.cp-hero-stats small{color:var(--text-muted);font-size:.68rem}.cp-hero-preview{background:var(--card-bg);border:1px solid var(--card-border);border-radius:24px;padding:1.25rem;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;position:relative;box-shadow:0 24px 64px -12px #0000001f,inset 0 0 0 1px #ffffff0f}.cp-hero-preview:hover{transform:translateY(-4px)scale(1.01);box-shadow:0 32px 80px -16px #0000002e}.cp-hero-preview-color{color:#fff;letter-spacing:.02em;border-radius:16px;flex-direction:column;justify-content:flex-end;height:160px;padding:1rem;font:700 1rem ui-monospace,monospace;transition:background .3s;display:flex;box-shadow:inset 0 -80px 60px #00000059}.cp-hero-preview-color small{opacity:.7;font-size:.7rem;font-weight:400}.cp-hero-preview-row{gap:.5rem;margin-top:.75rem;display:flex}.cp-hero-preview-row span{border-radius:99px;flex:1;height:8px;transition:background .3s}.cp-hero-preview-actions{gap:.5rem;margin-top:1rem;display:flex}.cp-hero-preview-actions button{cursor:pointer;border:0;border-radius:10px;flex:1;padding:.55rem;font-size:.72rem;font-weight:700;transition:transform .2s,box-shadow .2s}.cp-hero-preview-actions button:first-child{background:var(--accent);color:#fff}.cp-hero-preview-actions button:last-child{background:var(--surface-2);color:var(--text);border:1px solid var(--card-border)}.cp-hero-preview-actions button:hover{transform:scale(1.02)}.cp-hero-kbd{color:var(--text-muted);flex-wrap:wrap;gap:.5rem;margin-top:.75rem;font-size:.62rem;display:flex}.cp-hero-kbd kbd{background:var(--surface-2);border:1px solid var(--card-border);border-radius:5px;padding:.1rem .4rem;font-family:inherit;font-size:.6rem}.cp-zones{grid-template-columns:minmax(0,1fr);gap:2.5rem;max-width:1440px;margin:0 auto;padding:0 1.5rem 3rem;display:grid}@media (min-width:768px){.cp-zones{padding:0 2rem 4rem}}@media (min-width:1200px){.cp-zones{gap:3rem;padding:0 2.5rem 5rem}}.cp-zone-label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);align-items:center;gap:.65rem;margin-bottom:1.25rem;font-size:.7rem;font-weight:700;display:flex}.cp-zone-label:after{content:"";background:var(--card-border);flex:1;height:1px}.tool-header{text-align:center;max-width:auto;padding:0}.tool-header h1{letter-spacing:-.02em;color:var(--text-strong);margin-top:0;margin-bottom:.5rem;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;line-height:1.15}.tool-header p{max-width:680px;color:var(--text-muted);margin:0 auto;font-size:clamp(.9rem,2vw,1.05rem);line-height:1.6}.cp-toggle-panel{border:1px solid var(--card-border);background:var(--card-bg);border-radius:18px;padding:1rem 1.35rem;box-shadow:0 4px 16px #0000000a}.cp-toggle-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.7rem;font-weight:700;display:flex}.cp-toggle-grid{flex-wrap:wrap;gap:.5rem 1.25rem;display:flex}.cp-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text);align-items:center;gap:.5rem;font-size:.75rem;display:inline-flex}.cp-toggle input{display:none}.cp-toggle-ui{background:var(--surface-2);border:1px solid var(--card-border);border-radius:999px;width:36px;height:20px;transition:background .2s,border-color .2s;position:relative}.cp-toggle-ui:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);position:absolute;top:2px;left:2px;box-shadow:0 2px 6px #00000040}.cp-toggle input:checked+.cp-toggle-ui{background:var(--accent);border-color:var(--accent)}.cp-toggle input:checked+.cp-toggle-ui:after{transform:translate(16px)}.cp-toggle:hover .cp-toggle-ui{border-color:var(--accent)}.cp-toggle input:focus-visible+.cp-toggle-ui{box-shadow:0 0 0 3px var(--accent-soft)}.cp-toggle-label{white-space:nowrap}.tool-body{gap:2.5rem;display:grid}.tool-section h2{color:var(--text-strong);margin-bottom:1.15rem;font-size:clamp(1.05rem,3vw,1.25rem);font-weight:700;line-height:1.3}.animated-block{will-change:opacity, transform;contain:layout paint}.cp-quick-actions{flex-wrap:wrap;gap:.65rem;display:flex}.cp-quick-action{border:1px solid var(--card-border);background:var(--card-bg);color:var(--text);cursor:pointer;border-radius:12px;align-items:center;gap:.5rem;padding:.6rem .85rem;font-size:.75rem;font-weight:600;transition:transform .2s,box-shadow .2s,border-color .2s;display:inline-flex;box-shadow:0 2px 8px #0000000a}.cp-quick-action:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px #00000014}.cp-quick-action:active{transform:scale(.96)}.cp-section-header{align-items:center;gap:.6rem;margin-bottom:.75rem;display:flex}.cp-section-header svg,.cp-section-header-icon{width:20px;height:20px;color:var(--accent)}.cp-section-header h2{margin:0}.cp-section-header span{color:var(--text-muted);background:var(--surface-2);border-radius:99px;padding:.1rem .4rem;font-size:.65rem}@media (max-width:360px){.cp-hero{padding:2rem 1rem 1.5rem}.cp-zones{gap:1.75rem;padding:0 1rem 2.5rem}.tool-body{gap:1.4rem}.cp-toggle-panel{margin:1.25rem auto 1.75rem}}@media (max-width:600px){.cp-hero{padding:2.5rem 1.25rem 1.75rem}.cp-zones{padding:0 1.25rem 3rem}.tool-body{gap:1.75rem}.cp-toggle-grid{gap:.5rem 1rem}.cp-hero-stats{gap:1rem}}@media (max-width:768px){.tool-body{gap:2rem}}@media (max-width:1024px){.color-picker-page{overflow-x:clip}}@media (min-width:1440px){.cp-zones,.tool-body{gap:3rem}}@media (prefers-reduced-motion:reduce){.cp-blob,.cp-hero-preview,.cp-quick-action,.cp-toggle-ui,.cp-toggle-ui:after,.cp-primary-button:hover,.cp-quiet-button:hover{transition:none!important;animation:none!important}.cp-blob{display:none}}html[data-theme=dark] .cp-hero-preview{box-shadow:0 24px 64px -12px #00000073}html[data-theme=dark] .cp-toggle-panel{background:color-mix(in srgb, var(--card-bg) 80%, transparent)}.cp-workspace-nav{z-index:10;width:100%;min-width:0;max-width:100%;margin-bottom:.5rem;position:sticky;top:1rem}.cp-workspace-tabs{background:color-mix(in srgb, var(--card-bg,#fff) 85%, var(--bg,#f8fafc));border:1px solid var(--card-border,#00000014);-webkit-backdrop-filter:blur(16px);scrollbar-width:none;border-radius:16px;align-items:center;gap:.5rem;width:100%;min-width:0;max-width:100%;padding:.4rem;display:flex;overflow-x:auto;box-shadow:0 12px 32px -8px #0000000f}.cp-workspace-tabs::-webkit-scrollbar{display:none}.cp-ws-tab{color:var(--text-muted);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;border-radius:12px;align-items:center;gap:.55rem;padding:.6rem 1.1rem;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.cp-ws-tab svg{width:17px;height:17px;color:var(--text-muted);transition:color .2s,transform .2s}.cp-ws-tab:hover{color:var(--text-strong);background:color-mix(in srgb, var(--accent) 8%, transparent)}.cp-ws-tab:hover svg{color:var(--accent);transform:translateY(-1px)}.cp-ws-tab.is-active{background:var(--card-bg,#fff);color:var(--accent);border-color:color-mix(in srgb, var(--accent) 25%, transparent);box-shadow:0 4px 16px -4px color-mix(in srgb, var(--accent) 20%, transparent), 0 1px 2px #0000000d}.cp-ws-tab.is-active svg{color:var(--accent)}.cp-tab-badge{text-transform:uppercase;letter-spacing:.04em;background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:.1rem .4rem;font-size:.62rem;font-weight:700}.cp-tab-count{background:var(--accent);color:#fff;border-radius:99px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 .3rem;font-size:.7rem;font-weight:700;display:inline-flex}.cp-ws-banner{background:var(--card-bg,#fff);border:1px solid var(--card-border,#00000014);border-radius:18px;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding:1.25rem 1.5rem;display:flex;box-shadow:0 8px 24px -6px #0000000a}.cp-ws-banner-info h3{color:var(--text-strong);margin:.1rem 0 .3rem;font-size:1.25rem;font-weight:700}.cp-ws-banner-info p{color:var(--text-muted);margin:0;font-size:.85rem}.cp-ws-banner-swatch{color:#fff;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;min-width:110px;height:54px;font-family:monospace;font-size:.85rem;font-weight:700;display:flex;box-shadow:0 4px 12px #00000026}.cp-accordion-card{background:var(--card-bg,#fff);border:1px solid var(--card-border,#00000014);border-radius:16px;overflow:hidden;box-shadow:0 4px 16px -4px #00000008}.cp-accordion-header{width:100%;color:var(--text-strong);cursor:pointer;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;padding:1rem 1.25rem;font-size:.9rem;font-weight:700;transition:background .2s;display:flex}.cp-accordion-header:hover{background:color-mix(in srgb, var(--accent) 5%, transparent)}.cp-accordion-header span{align-items:center;gap:.55rem;display:flex}.cp-accordion-body{border-top:1px solid var(--card-border,#0000000a);padding:0 1.25rem 1.25rem}.cp-zones-two-col{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}.cp-zones-two-col-mt{margin-top:1.5rem}@media (max-width:768px){.cp-zones-two-col{grid-template-columns:1fr}}@media (max-width:600px){.cp-ws-tab{gap:.4rem;padding:.5rem .8rem;font-size:.78rem}}