:root{--color-ink:#172033;--color-muted:#6f7990;--color-line:#e7e9f2;--color-soft:#f7f7fb;--color-purple:#6d5dfc;--color-purple-dark:#5544ed;--color-cyan:#24c4d8;--color-shadow:0 22px 70px rgba(39,38,79,.1)}.color-suite-page{min-width:320px;background:radial-gradient(circle at 80% 5%,rgba(113,216,239,.15),transparent 24%),radial-gradient(circle at 18% 1%,rgba(255,157,180,.14),transparent 23%),#f7f8fc;color:var(--color-ink)}.color-shell{max-width:1440px}.color-shell .site-header{padding-top:17px}.color-shell .tool-tabs{position:relative;z-index:5;overflow-x:auto;scrollbar-width:none}.color-shell .tool-tabs::-webkit-scrollbar{display:none}.color-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);align-items:center;gap:36px;margin:14px 0;padding:18px 44px;overflow:hidden;border:1px solid rgba(255,255,255,.8);border-radius:26px;background:linear-gradient(128deg,#fffffff5,#f6f6ffe0);box-shadow:0 16px 52px #36356214}.color-hero:before,.color-hero:after{position:absolute;border-radius:50%;content:"";filter:blur(1px);pointer-events:none}.color-hero:before{top:-160px;right:25%;width:360px;height:360px;border:50px solid rgba(109,93,252,.045)}.color-hero:after{right:-115px;bottom:-145px;width:310px;height:310px;background:radial-gradient(circle,rgba(36,196,216,.13),transparent 68%)}.color-hero-copy{position:relative;z-index:1;max-width:830px}.color-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid #e5e1ff;border-radius:999px;background:#f7f5ff;color:#6454d8;font-size:10px;font-weight:850;letter-spacing:.7px}.color-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#ff7aa8,#7a68ff);box-shadow:0 0 0 3px #6d5dfc1a}.color-hero h1{max-width:850px;margin:11px 0 9px;color:#15182a;font-size:clamp(27px,2.9vw,36px);line-height:1.12;letter-spacing:-1.6px}.color-hero h1 span,.color-hero h1 strong{display:block;background:linear-gradient(102deg,#6b5cf6,#b247e7 52%,#ee6c9c);-webkit-background-clip:text;background-clip:text;color:transparent}.color-hero h1 strong{margin-top:1px}.color-hero p{max-width:720px;margin:0;color:#6d7487;font-size:12px;line-height:1.7}.hero-trust{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:10px;color:#687189;font-size:10px;font-weight:750}.hero-trust span:first-child{color:#168661}.hero-spectrum{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:146px}.hero-spectrum i{position:absolute;width:80px;height:112px;border:5px solid rgba(255,255,255,.9);border-radius:23px;box-shadow:0 14px 28px #26284821;transform-origin:50% 120%}.hero-spectrum i:nth-child(1){background:#ff789a;transform:translate(-67px) rotate(-24deg)}.hero-spectrum i:nth-child(2){background:#ffaf63;transform:translate(-43px) rotate(-14deg)}.hero-spectrum i:nth-child(3){background:#f7d45a;transform:translate(-16px) rotate(-5deg)}.hero-spectrum i:nth-child(4){background:#5dd6a4;transform:translate(16px) rotate(5deg)}.hero-spectrum i:nth-child(5){background:#58bde9;transform:translate(43px) rotate(14deg)}.hero-spectrum i:nth-child(6){background:#795ff5;transform:translate(67px) rotate(24deg)}.hero-spectrum b{position:absolute;right:2px;bottom:3px;padding:6px 9px;border:1px solid #e7e5f0;border-radius:8px;background:#fff;box-shadow:0 7px 16px #2526411f;font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace}.color-app{display:grid;grid-template-columns:206px minmax(0,1fr);min-height:760px;margin-bottom:26px;overflow:hidden;border:1px solid #e7e8f1;border-radius:26px;background:#fff;box-shadow:var(--color-shadow)}.studio-nav{padding:18px 12px;border-right:1px solid #ececf3;background:linear-gradient(180deg,#fbfbfe,#f6f7fb)}.studio-nav-button{position:relative;width:100%;display:flex;align-items:center;gap:11px;margin:3px 0;padding:11px 12px;border:0;border-radius:11px;background:transparent;color:#73798d;font:750 12px -apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;text-align:left;cursor:pointer;transition:.18s}.studio-nav-button:hover{background:#f0efff;color:#5b4be4}.studio-nav-button.active{background:linear-gradient(135deg,#6f5dfc,#6652ef);box-shadow:0 8px 18px #5c49e838;color:#fff}.nav-icon{width:23px;height:23px;display:grid;place-items:center;border:1px solid currentColor;border-radius:7px;font-size:13px;opacity:.8}.nav-count{margin-left:auto;min-width:20px;padding:2px 5px;border-radius:999px;background:#ebeaf5;color:#73778a;font-size:9px;text-align:center}.studio-nav-button.active .nav-count{background:#fff3;color:#fff}.studio-content{min-width:0;padding:28px}.studio-panel{display:none}.studio-panel.active{display:block;animation:panel-in .24s ease}@keyframes panel-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.picker-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,.8fr);gap:22px}.image-stage-card,.picked-color-card,.palette-card,.data-card{border:1px solid var(--color-line);border-radius:18px;background:#fff}.image-stage-card{min-width:0;padding:21px}.picker-sidebar{display:flex;flex-direction:column;gap:18px}.picked-color-card,.palette-card{padding:19px}.panel-title-row,.workspace-heading,.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.panel-title-row h2,.workspace-heading h2{margin:4px 0 0;font-size:18px;letter-spacing:-.4px}.panel-title-row.compact h2{font-size:15px}.section-kicker{color:#8a8fa2;font-size:9px;font-weight:900;letter-spacing:1.25px}.image-actions,.selected-actions,.palette-actions,.export-menu,.gradient-actions{display:flex;align-items:center;gap:7px}.soft-button,.icon-button,.text-action,.primary-color-button{border:0;font-family:inherit;cursor:pointer;transition:.17s}.soft-button{padding:8px 10px;border:1px solid #e1e2ec;border-radius:9px;background:#fafafd;color:#5f6679;font-size:10px;font-weight:800}.soft-button:hover{border-color:#c9c4ff;background:#f4f2ff;color:#5b4ce0}.icon-button{width:32px;height:32px;border:1px solid #e1e2ec;border-radius:9px;background:#fafafd;color:#697084}.primary-color-button{padding:10px 13px;border-radius:10px;background:linear-gradient(135deg,#735ffc,#5d4aeb);box-shadow:0 7px 16px #5d4aeb2e;color:#fff;font-size:11px;font-weight:850}.primary-color-button:hover{filter:brightness(1.05);transform:translateY(-1px)}.text-action{padding:3px;background:transparent;color:#6a5be8;font-size:10px;font-weight:850}.danger-soft{color:#c65368}.image-drop-zone{height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:16px;border:1.5px dashed #d9d8e8;border-radius:16px;background:linear-gradient(145deg,#fbfbfe,#f6f6fc);text-align:center;cursor:pointer;transition:.2s}.image-drop-zone:hover,.image-drop-zone.dragging,.image-drop-zone:focus-visible{border-color:#897afa;background:#f7f5ff;outline:0}.drop-visual{position:relative;width:92px;height:92px;margin-bottom:18px}.drop-visual>span{position:absolute;inset:13px;z-index:2;display:grid;place-items:center;border:1px solid #d9d4ff;border-radius:25px;background:#fff;box-shadow:0 11px 24px #4b40a421;color:#6b58ef;font-size:28px}.drop-visual i{position:absolute;width:31px;height:31px;border-radius:10px}.drop-visual i:nth-child(2){top:0;right:0;background:#f993b4}.drop-visual i:nth-child(3){bottom:0;left:0;background:#51c9d4}.drop-visual i:nth-child(4){right:1px;bottom:4px;background:#f5c45a}.image-drop-zone h3{margin:0 0 7px;font-size:18px}.image-drop-zone p{max-width:440px;margin:0 0 17px;color:#858a9d;font-size:11px;line-height:1.65}.paste-hint{margin-top:11px;color:#a0a4b4;font-size:9px}.canvas-stage{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;margin-top:16px;overflow:hidden;border-radius:16px;background-color:#ececf2;background-image:linear-gradient(45deg,#e2e2e9 25%,transparent 25%),linear-gradient(-45deg,#e2e2e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e2e9 75%),linear-gradient(-45deg,transparent 75%,#e2e2e9 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.canvas-stage:fullscreen{padding:30px;background:#15161d}.canvas-stage canvas#imageCanvas{display:block;max-width:100%;max-height:680px;cursor:crosshair;object-fit:contain;box-shadow:0 12px 35px #15152226}#loupeCanvas{position:absolute;z-index:4;display:none;width:132px;height:132px;border:5px solid #fff;border-radius:50%;box-shadow:0 8px 24px #0f0f1e59;pointer-events:none;image-rendering:pixelated}.pixel-tooltip{position:absolute;z-index:5;display:none;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:#11121be6;color:#fff;font:750 9px ui-monospace,monospace;pointer-events:none}.pixel-tooltip i{width:12px;height:12px;border:2px solid rgba(255,255,255,.8);border-radius:4px}.image-meta{display:flex;align-items:center;gap:14px;padding:10px 2px 0;color:#858a9c;font-size:9px}.image-meta span:first-child{max-width:45%;overflow:hidden;color:#5e6374;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.image-meta .text-action{margin-left:auto}.selected-color-visual{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;margin:15px 0}.selected-color-swatch{min-height:74px;border-radius:15px;background:#3157d5;box-shadow:inset 0 0 0 1px #0000000d}.selected-color-main{display:flex;flex-direction:column;gap:7px}.selected-color-main input{min-width:0;height:38px;padding:0 10px;border:1px solid #e0e1ea;border-radius:9px;color:#2f3443;font:850 15px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.copy-main-button{height:29px;border:0;border-radius:8px;background:#f0efff;color:#5b4ce4;font-size:10px;font-weight:850;cursor:pointer}.format-list{display:grid;gap:6px}.format-row{display:grid;grid-template-columns:44px minmax(0,1fr) 28px;align-items:center;gap:8px;padding:8px 9px;border:1px solid #ececf2;border-radius:9px;background:#fbfbfd}.format-row b{color:#9a9eae;font-size:9px}.format-row code{overflow:hidden;color:#4d5262;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.format-row button{height:25px;border:0;border-radius:6px;background:#f0eff7;color:#696f81;cursor:pointer}.selected-actions{margin-top:13px}.selected-actions .primary-color-button{flex:1}.screen-pick{display:flex;align-items:center;gap:5px}.small-count{padding:4px 7px;border-radius:7px;background:#f1f1f6;color:#878b9a;font-size:9px}.palette-list{min-height:84px;display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.palette-empty{width:100%;display:grid;place-items:center;border:1px dashed #e1e1eb;border-radius:11px;color:#a0a3b0;font-size:10px;text-align:center}.palette-swatch{position:relative;width:42px;height:56px;border:0;border-radius:10px;box-shadow:inset 0 0 0 1px #00000012;cursor:pointer}.palette-swatch:after{position:absolute;right:4px;bottom:4px;left:4px;padding:2px;border-radius:4px;background:#ffffffe0;color:#333;font:700 7px ui-monospace,monospace;content:attr(data-hex)}.palette-swatch .remove-swatch{position:absolute;top:-5px;right:-5px;width:17px;height:17px;display:none;border:0;border-radius:50%;background:#272936;color:#fff;font-size:11px;line-height:15px}.palette-swatch:hover .remove-swatch{display:block}.palette-actions{margin-bottom:8px}.palette-actions .soft-button:first-child{flex:1}.export-menu{flex-wrap:wrap}.export-menu .primary-color-button{flex:1}.export-menu .soft-button{padding-inline:8px}.workspace-heading{align-items:flex-end;margin-bottom:21px}.workspace-heading h2{font-size:23px}.workspace-heading p{max-width:720px;margin:7px 0 0;color:var(--color-muted);font-size:11px;line-height:1.7}.color-input-cluster{display:flex;align-items:center;gap:7px;padding:5px;border:1px solid #dedfe9;border-radius:12px;background:#fafafd}.color-input-cluster>input:first-child{width:122px;height:34px;border:0;background:transparent;color:#2b3040;font:800 14px ui-monospace,monospace;text-transform:uppercase;outline:0}.color-input-cluster input[type=color]{width:38px;height:34px;padding:2px;border:0;border-radius:8px;background:transparent}.studio-summary{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:17px;margin-bottom:19px;padding:17px;border:1px solid var(--color-line);border-radius:18px;background:linear-gradient(120deg,#fafaff,#fff)}.studio-hero-swatch{height:78px;border-radius:15px;background:#3157d5}.studio-summary span{color:#9296a7;font-size:9px}.studio-summary h3{margin:3px 0;font-size:19px}.studio-summary p{margin:0;color:#747a8d;font-size:10px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.data-card{padding:18px}.data-card.full{margin-top:18px}.card-heading{align-items:center;margin-bottom:14px}.card-heading h3{margin:0;font-size:14px}.card-heading p{margin:4px 0 0;color:#878b9a;font-size:10px}.conversion-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.conversion-item{display:grid;grid-template-columns:46px minmax(0,1fr);gap:7px;padding:9px;border-radius:9px;background:#f7f7fa}.conversion-item b{color:#9296a5;font-size:8px}.conversion-item code{overflow:hidden;color:#454a5a;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.code-formats{display:grid;gap:7px}.code-row{display:grid;grid-template-columns:62px minmax(0,1fr) 27px;align-items:center;gap:8px;padding:8px 9px;border:1px solid #ececf2;border-radius:9px}.code-row b{font-size:8px;color:#8e92a3}.code-row code{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.code-row button{height:24px;border:0;border-radius:6px;background:#f1f0fa;color:#685be2;cursor:pointer}.variation-scale{display:grid;grid-template-columns:repeat(11,1fr);overflow:hidden;border:1px solid #ececf2;border-radius:12px}.variation-swatch{min-width:0;height:92px;display:flex;align-items:flex-end;padding:6px;border:0;color:inherit;cursor:pointer}.variation-swatch span{width:100%;padding:4px 2px;border-radius:5px;background:#fffc;color:#353744;font:700 7px ui-monospace,monospace;text-align:center}.harmony-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.harmony-card{padding:11px;border:1px solid #ececf2;border-radius:11px}.harmony-card h4{margin:0 0 8px;font-size:10px}.harmony-swatches{display:flex;height:62px;overflow:hidden;border-radius:8px}.harmony-swatch{flex:1;border:0;cursor:pointer}.harmony-codes{display:flex;gap:3px;margin-top:6px}.harmony-codes code{flex:1;overflow:hidden;color:#858999;font-size:6.8px;text-align:center;text-overflow:ellipsis}.contrast-workspace,.gradient-workspace{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:20px}.contrast-controls{display:grid;align-content:start;gap:13px}.contrast-controls label,.gradient-controls label,.vision-controls label,.source-tab-panel label{display:flex;flex-direction:column;gap:7px;color:#5f6576;font-size:10px;font-weight:800}.input-with-color{display:grid;grid-template-columns:minmax(0,1fr) 42px;padding:4px;border:1px solid #e0e1e9;border-radius:10px}.input-with-color input:first-child{height:35px;padding:0 8px;border:0;background:transparent;font:800 12px ui-monospace,monospace;outline:0}.input-with-color input[type=color]{width:38px;height:35px;padding:2px;border:0;background:transparent}.swap-button{width:35px;height:35px;margin:-3px auto;border:1px solid #dedfe9;border-radius:50%;background:#fff;color:#6255df;cursor:pointer}.contrast-score{display:flex;align-items:baseline;justify-content:center;margin-top:4px;padding:15px;border-radius:13px;background:#f7f7fb}.contrast-score span{margin-right:auto;color:#848899;font-size:10px}.contrast-score strong{font-size:34px;letter-spacing:-1.5px}.contrast-score small{font-size:13px}.wcag-results{display:grid;grid-template-columns:1fr 1fr;gap:7px}.wcag-badge{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:9px;background:#f4f4f8;color:#727687;font-size:9px;font-weight:800}.wcag-badge.pass{background:#eaf8f1;color:#148059}.wcag-badge.fail{background:#fff0f2;color:#c1495f}.contrast-preview{min-height:490px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:54px;border-radius:20px;background:#fff;color:#172033;transition:.2s}.contrast-preview>span{padding:6px 9px;border:1px solid currentColor;border-radius:999px;font-size:9px;font-weight:850;opacity:.72}.contrast-preview h3{max-width:650px;margin:20px 0 12px;font-size:34px;line-height:1.15;letter-spacing:-1.3px}.contrast-preview p{max-width:640px;margin:0;font-size:13px;line-height:1.8;opacity:.77}.contrast-preview>button{margin-top:22px;padding:11px 15px;border:2px solid currentColor;border-radius:9px;background:transparent;color:inherit;font-weight:850}.preview-ui{display:flex;gap:7px;margin-top:35px}.preview-ui i{width:68px;height:7px;border-radius:999px;background:currentColor;opacity:.16}.preview-ui i:nth-child(2){width:130px}.preview-ui i:nth-child(3){width:45px}.gradient-controls{display:flex;flex-direction:column;gap:14px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:10px;background:#f1f1f6}.segmented button{padding:8px;border:0;border-radius:7px;background:transparent;color:#797d8e;font:800 9px inherit;cursor:pointer}.segmented button.active{background:#fff;box-shadow:0 3px 8px #26263f17;color:#5d4de1}.gradient-controls label>input[type=range]{width:100%;accent-color:#6d5dfc}.gradient-controls output{align-self:flex-end;margin-top:-22px;color:#6b5ae7;font-size:9px}.gradient-stops{display:grid;gap:7px}.gradient-stop-row{display:grid;grid-template-columns:36px minmax(0,1fr) 58px 28px;align-items:center;gap:7px;padding:7px;border:1px solid #e8e8f0;border-radius:9px}.gradient-stop-row input[type=color]{width:34px;height:30px;padding:1px;border:0;background:transparent}.gradient-stop-row input[type=range]{min-width:0;accent-color:#6d5dfc}.gradient-stop-row input[type=number]{width:52px;height:28px;border:1px solid #e2e2ea;border-radius:7px;font-size:9px;text-align:center}.gradient-stop-row button{height:27px;border:0;border-radius:7px;background:#f5f4fa;color:#ad5265;cursor:pointer}.gradient-controls textarea{resize:none;padding:10px;border:1px solid #e1e1ea;border-radius:9px;background:#f8f8fb;color:#4b5060;font:9px/1.6 ui-monospace,monospace}.gradient-preview-wrap{display:grid;grid-template-rows:minmax(380px,1fr) auto;gap:13px}.gradient-preview{min-height:420px;border-radius:21px;box-shadow:inset 0 0 0 1px #0000000f}.gradient-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.gradient-preset{height:47px;border:4px solid #fff;border-radius:10px;box-shadow:0 0 0 1px #e5e5ed;cursor:pointer}.vision-controls{display:flex;align-items:flex-end;gap:18px;margin-bottom:18px;padding:15px 18px;border:1px solid var(--color-line);border-radius:15px;background:#fafafd}.vision-controls label:first-child{min-width:210px}.vision-controls select{height:38px;padding:0 10px;border:1px solid #dedfe8;border-radius:9px;background:#fff}.vision-controls input[type=range]{width:260px;accent-color:#6d5dfc}.vision-controls output{align-self:flex-end;margin-top:-21px;color:#5f52d8;font-size:9px}.vision-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:18px}.vision-color-compare{display:grid;grid-template-columns:1fr 1fr;gap:9px}.vision-swatch{height:102px;display:flex;align-items:flex-end;padding:9px;border-radius:12px}.vision-swatch span{padding:5px 7px;border-radius:6px;background:#ffffffdb;color:#333;font:800 8px ui-monospace,monospace}.vision-canvases{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vision-canvases>div{min-width:0}.vision-canvases span{display:block;margin-bottom:6px;color:#8b8f9f;font-size:9px;font-weight:800}.vision-canvases canvas{display:block;width:100%;max-height:390px;object-fit:contain;border-radius:11px;background:#eee}.vision-canvases+p{color:#9599a8;font-size:10px;text-align:center}.library-heading{align-items:flex-end}.library-search input{width:min(330px,35vw);height:42px;padding:0 15px;border:1px solid #dedfe8;border-radius:12px;background:#fafafd;font:11px inherit;outline:0}.library-search input:focus{border-color:#8c7ef8;box-shadow:0 0 0 3px #efedff}.library-filters{display:grid;gap:8px;margin-bottom:12px}.filter-row{display:flex;flex-wrap:wrap;gap:6px}.filter-chip{padding:7px 10px;border:1px solid #e2e2eb;border-radius:999px;background:#fff;color:#717688;font:800 9px inherit;cursor:pointer}.filter-chip.active{border-color:#7b6bf4;background:#6d5dfc;color:#fff}.library-count{margin:10px 0;color:#8a8e9f;font-size:9px}.color-library-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.library-color-card{overflow:hidden;border:1px solid #e8e8ef;border-radius:13px;background:#fff;cursor:pointer;transition:.17s}.library-color-card:hover{border-color:#c8c2ff;box-shadow:0 9px 20px #3b327d1a;transform:translateY(-2px)}.library-color-swatch{height:94px}.library-color-info{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:9px}.library-color-info b{display:block;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.library-color-info code{color:#8b8f9f;font-size:8px}.library-color-info button{width:25px;height:25px;border:0;border-radius:7px;background:#f4f3fa;color:#6256d5;cursor:pointer}.saved-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px}.project-sidebar{align-self:start}.project-list{display:grid;gap:5px}.project-row{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:4px}.project-row button{padding:9px;border:0;border-radius:8px;background:transparent;color:#676c7d;font:750 10px inherit;text-align:left;cursor:pointer}.project-row button.active{background:#efedff;color:#5e4ee1}.project-row .project-delete{text-align:center;color:#ba586c}.saved-section-heading{display:flex;align-items:center;justify-content:space-between;margin:2px 0 9px}.saved-section-heading:not(:first-child){margin-top:22px}.saved-section-heading h3{margin:0;font-size:13px}.saved-section-heading span{color:#8c90a0;font-size:9px}.saved-palette-grid,.saved-color-grid,.saved-image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.saved-card{padding:10px;border:1px solid #e7e7ef;border-radius:12px;background:#fff}.saved-palette-swatches{display:flex;height:65px;overflow:hidden;border-radius:8px}.saved-palette-swatches i{flex:1}.saved-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.saved-card-meta b{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.saved-card-meta button{border:0;background:transparent;color:#a94f62;font-size:9px;cursor:pointer}.saved-color-card{height:96px;display:flex;align-items:flex-end;padding:8px;border-radius:11px}.saved-color-card div{width:100%;display:flex;justify-content:space-between;padding:5px 6px;border-radius:6px;background:#ffffffdb;color:#333;font-size:8px}.saved-color-card button{border:0;background:transparent;cursor:pointer}.saved-image-card img{width:100%;height:112px;display:block;border-radius:8px;object-fit:cover}.color-seo-section{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:30px;margin:0 0 24px;padding:30px;border:1px solid #e4e6f0;border-radius:22px;background:linear-gradient(135deg,#fff,#f7f6ff)}.color-seo-section h2{margin:13px 0 9px;font-size:22px}.color-seo-section>div>p{margin:0;color:#6f778b;font-size:12px;line-height:1.85}.feature-chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.feature-chip-list span,.feature-chip-list a{padding:6px 9px;border:1px solid #dfdcef;border-radius:999px;background:#fff;color:#68607e;font-size:9px;font-weight:800;text-decoration:none}.feature-chip-list a{border-color:#cfc9ff;background:#f1efff;color:#5b4be0}.feature-chip-list a:hover{background:#e8e4ff}.hidden{display:none!important}.source-dialog{width:min(830px,calc(100vw - 28px));padding:0;border:0;border-radius:22px;background:#fff;box-shadow:0 35px 100px #12112759}.source-dialog::backdrop{background:#1212208a;backdrop-filter:blur(5px)}.source-dialog form{padding:23px}.dialog-heading{display:flex;justify-content:space-between;gap:15px}.dialog-heading h2{margin:4px 0 0;font-size:19px}.dialog-close{width:33px;height:33px;border:1px solid #e2e2ea;border-radius:9px;background:#fafafd;color:#666b7b;font-size:20px;cursor:pointer}.source-tabs{display:flex;gap:5px;margin:18px 0 14px;overflow-x:auto;padding:4px;border-radius:11px;background:#f2f2f7}.source-tabs button{flex:1;min-width:82px;padding:8px;border:0;border-radius:8px;background:transparent;color:#777b8c;font:800 9px inherit;cursor:pointer}.source-tabs button.active{background:#fff;box-shadow:0 3px 9px #25253f17;color:#5f50df}.source-tab-panel{display:none;min-height:260px}.source-tab-panel.active{display:block}.dialog-drop,.center-source{min-height:260px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px dashed #d8d6e8;border-radius:14px;background:#fafafd}.dialog-drop{font-family:inherit;cursor:pointer}.dialog-drop>span,.source-large-icon{display:grid;place-items:center;width:57px;height:57px;margin-bottom:12px;border-radius:17px;background:#efedff;color:#6252e4;font-size:22px}.dialog-drop strong,.center-source h3{margin:0 0 6px;font-size:14px}.dialog-drop small,.center-source p{margin:0;color:#9296a6;font-size:9px}.center-source .primary-color-button{margin-top:14px}.source-tab-panel>label{padding:40px 22px}.dialog-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.dialog-inline input{height:42px;padding:0 12px;border:1px solid #dedfe7;border-radius:10px;font:10px inherit}.source-tab-panel label>small{color:#9296a6;font-weight:500;line-height:1.6}.image-search-results{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:330px;overflow:auto;padding:0 22px 15px}.search-image-card{height:110px;padding:0;border:0;border-radius:10px;background:#eee;overflow:hidden;cursor:pointer}.search-image-card img{width:100%;height:100%;display:block;object-fit:cover}.toast.show{transform:translate(-50%)}@media(max-width:1120px){.color-hero{grid-template-columns:1fr;padding:22px 34px}.hero-spectrum{display:none}.color-app{grid-template-columns:170px minmax(0,1fr)}.studio-content{padding:22px}.picker-layout{grid-template-columns:1fr}.picker-sidebar{display:grid;grid-template-columns:1fr 1fr}.image-drop-zone,.canvas-stage{height:480px;min-height:480px}.color-library-grid{grid-template-columns:repeat(4,1fr)}.contrast-workspace,.gradient-workspace{grid-template-columns:1fr}.gradient-preview{min-height:360px}.vision-grid{grid-template-columns:1fr}.saved-palette-grid,.saved-color-grid,.saved-image-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.color-shell{width:calc(100% - 20px)}.color-shell .site-header{gap:10px}.color-shell .header-status{display:none}.color-shell .tool-tabs{justify-content:flex-start}.color-shell .tool-tab{flex:0 0 auto;padding:9px 10px}.color-hero{margin-top:12px;padding:18px 20px;border-radius:19px}.color-hero h1{font-size:25px;line-height:1.08;letter-spacing:-1px}.color-hero p{font-size:11.5px}.hero-trust{flex-direction:column;gap:5px}.color-app{display:block;border-radius:20px}.studio-nav{display:flex;gap:5px;overflow-x:auto;padding:10px;border-right:0;border-bottom:1px solid #ececf3}.studio-nav-button{flex:0 0 auto;width:auto;margin:0;padding:9px 10px}.studio-nav-button .nav-icon{display:none}.studio-content{padding:14px}.picker-sidebar{display:flex}.panel-title-row{gap:8px}.image-actions .soft-button{display:none}.image-stage-card,.picked-color-card,.palette-card,.data-card{border-radius:14px}.image-stage-card{padding:13px}.image-drop-zone,.canvas-stage{height:390px;min-height:390px}.canvas-stage canvas#imageCanvas{max-height:520px}.workspace-heading{align-items:flex-start;flex-direction:column}.workspace-heading h2{font-size:20px}.color-input-cluster{width:100%}.color-input-cluster>input:first-child{flex:1;width:auto}.detail-grid,.conversion-grid{grid-template-columns:1fr}.variation-scale{grid-template-columns:repeat(6,1fr)}.variation-swatch{height:72px}.variation-swatch:nth-child(n+7){display:none}.harmony-grid{grid-template-columns:1fr}.contrast-preview{min-height:360px;padding:30px 24px}.contrast-preview h3{font-size:28px}.gradient-preview-wrap{grid-template-rows:300px auto}.gradient-preview{min-height:300px}.gradient-presets{grid-template-columns:repeat(3,1fr)}.vision-controls{align-items:stretch;flex-direction:column}.vision-controls label:first-child{min-width:0}.vision-controls input[type=range]{width:100%}.vision-canvases{grid-template-columns:1fr}.library-heading{align-items:stretch}.library-search,.library-search input{width:100%}.color-library-grid{grid-template-columns:repeat(2,1fr)}.saved-layout{grid-template-columns:1fr}.saved-palette-grid,.saved-color-grid,.saved-image-grid{grid-template-columns:1fr 1fr}.color-seo-section{grid-template-columns:1fr;padding:22px 19px}.source-dialog form{padding:16px}.source-tabs button{min-width:70px}.source-tab-panel>label{padding:28px 5px}.image-search-results{grid-template-columns:repeat(2,1fr);padding-inline:5px}}@media(max-width:420px){.selected-actions,.palette-actions,.export-menu{align-items:stretch;flex-direction:column}.selected-actions>*,.palette-actions>*,.export-menu>*{width:100%}.saved-palette-grid,.saved-color-grid,.saved-image-grid,.wcag-results{grid-template-columns:1fr}.color-library-swatch{height:80px}}.theme-toggle-button{height:34px;display:inline-flex;align-items:center;gap:5px;padding:0 10px;border:1px solid #dbe8f5;border-radius:9px;background:#fff;color:#55718c;font:800 11px -apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;cursor:pointer;transition:.18s}.theme-toggle-button:hover{border-color:#a9cdf2;background:#f1f8ff;color:#176ee5}.theme-toggle-button>span:first-child{font-size:15px}.advanced-color-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:18px;margin-bottom:18px}.visual-picker-card canvas{width:100%;height:210px;display:block;border-radius:12px;cursor:crosshair}.hue-control{display:grid;grid-template-columns:45px minmax(0,1fr) 42px;align-items:center;gap:9px;margin-top:12px;color:#6d7282;font-size:9px;font-weight:850}.hue-control input{width:100%;height:13px;border-radius:999px;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);appearance:none}.hue-control input::-webkit-slider-thumb{width:17px;height:17px;border:3px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #16192547;appearance:none}.hue-control output{text-align:right;color:#6254de;font:800 9px ui-monospace,monospace}.precision-groups{display:grid;gap:10px}.precision-groups fieldset{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0;padding:9px;border:1px solid #e9e9f0;border-radius:10px}.precision-groups fieldset.cmyk-fieldset{grid-template-columns:repeat(4,1fr)}.precision-groups legend{padding:0 6px;color:#6f7485;font-size:8px;font-weight:900;letter-spacing:.8px}.precision-groups label{display:grid;grid-template-columns:17px minmax(0,1fr);align-items:center;gap:4px;color:#9a9dab;font-size:8px;font-weight:850}.precision-groups input{min-width:0;height:32px;padding:0 5px;border:1px solid #e1e2e9;border-radius:7px;background:#fafafd;color:#404553;font:800 9px ui-monospace,monospace;text-align:center;outline:0}.precision-groups input:focus{border-color:#8e80f8;box-shadow:0 0 0 2px #efedff}.analysis-grid{margin-top:18px}.analysis-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.analysis-metric{padding:10px;border-radius:10px;background:#f7f7fa}.analysis-metric span{display:block;color:#9397a6;font-size:8px;font-weight:800}.analysis-metric strong{display:block;margin-top:4px;color:#414654;font-size:11px}.creative-guidance{display:grid;gap:8px}.creative-tip{display:grid;grid-template-columns:27px minmax(0,1fr);gap:9px;padding:9px;border:1px solid #ececf2;border-radius:10px}.creative-tip>span{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:#efedff;color:#5e51db;font-size:13px}.creative-tip b{display:block;margin-bottom:3px;font-size:9px}.creative-tip p{margin:0;color:#7c8192;font-size:8.5px;line-height:1.55}.contrast-adjust{display:grid;gap:8px;margin-top:2px;padding:12px;border:1px solid #e9e9f0;border-radius:12px;background:#fafafd}.contrast-adjust .card-heading{margin-bottom:1px}.contrast-adjust label{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:7px}.contrast-adjust input{width:100%;accent-color:#6d5dfc}.mini-segmented{display:flex;padding:3px;border-radius:8px;background:#ededf3}.mini-segmented button{padding:5px 8px;border:0;border-radius:6px;background:transparent;color:#797d8c;font:800 8px inherit;cursor:pointer}.mini-segmented button.active{background:#fff;color:#5d4ddb;box-shadow:0 2px 5px #28284014}.contrast-tools{display:grid;grid-template-columns:1fr auto;gap:7px}.contrast-component-grid{width:100%;display:grid;grid-template-columns:1.2fr 1fr auto;align-items:end;gap:9px;margin-top:25px}.component-card{display:flex;flex-direction:column;padding:11px;border:1px solid currentColor;border-radius:10px;opacity:.82}.component-card small{font-size:7px;opacity:.65}.component-card b{margin:5px 0 2px;font-size:10px}.component-card span{font-size:8px;opacity:.72}.component-input{padding:10px;border:1px solid currentColor;border-radius:8px;font-size:8px;opacity:.75}.component-badge{padding:7px 9px;border-radius:999px;background:currentColor;font-size:8px}.component-badge:first-line{color:inherit}.gradient-actions{flex-wrap:wrap}.library-load-more{display:block;min-width:190px;margin:18px auto 0}.saved-gradient-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.saved-gradient-card{height:105px;display:flex;align-items:flex-end;padding:8px;border-radius:12px;box-shadow:inset 0 0 0 1px #0000000f}.saved-gradient-card div{width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:7px;background:#ffffffe0;color:#333;font-size:8px}.saved-gradient-card button{border:0;background:transparent;cursor:pointer}html[data-color-theme=dark]{color-scheme:dark}html[data-color-theme=dark] .color-suite-page{--color-ink:#f2f3f9;--color-muted:#a4a9ba;--color-line:#303241;--color-soft:#20222c;background:radial-gradient(circle at 80% 5%,rgba(54,133,154,.18),transparent 24%),radial-gradient(circle at 18% 1%,rgba(142,68,112,.16),transparent 23%),#14151b;color:#f2f3f9}html[data-color-theme=dark] .color-hero{border-color:#30323f;background:linear-gradient(128deg,#20212a,#1b1c25);box-shadow:0 20px 70px #00000047}html[data-color-theme=dark] .color-hero h1,html[data-color-theme=dark] .image-drop-zone h3,html[data-color-theme=dark] .studio-summary h3{color:#f5f5fa}html[data-color-theme=dark] .color-hero p,html[data-color-theme=dark] .hero-trust{color:#a7abbb}html[data-color-theme=dark] .color-app,html[data-color-theme=dark] .image-stage-card,html[data-color-theme=dark] .picked-color-card,html[data-color-theme=dark] .palette-card,html[data-color-theme=dark] .data-card,html[data-color-theme=dark] .studio-summary,html[data-color-theme=dark] .source-dialog{border-color:#303241;background:#1d1f27;color:#f2f3f9}html[data-color-theme=dark] .studio-nav{border-color:#30313d;background:linear-gradient(180deg,#20222b,#1a1c23)}html[data-color-theme=dark] .image-drop-zone,html[data-color-theme=dark] .contrast-adjust,html[data-color-theme=dark] .analysis-metric,html[data-color-theme=dark] .precision-groups input{border-color:#373948;background:#22242e;color:#eff0f6}html[data-color-theme=dark] .soft-button,html[data-color-theme=dark] .icon-button,html[data-color-theme=dark] .theme-toggle-button,html[data-color-theme=dark] .filter-chip{border-color:#3a3c4b;background:#252731;color:#c2c5d1}html[data-color-theme=dark] .format-row,html[data-color-theme=dark] .code-row,html[data-color-theme=dark] .harmony-card,html[data-color-theme=dark] .creative-tip,html[data-color-theme=dark] .precision-groups fieldset{border-color:#343643;background:#23252e}html[data-color-theme=dark] .conversion-item,html[data-color-theme=dark] .contrast-score{background:#262832}html[data-color-theme=dark] .conversion-item code,html[data-color-theme=dark] .code-row code,html[data-color-theme=dark] .format-row code{color:#d4d6df}html[data-color-theme=dark] .workspace-heading h2,html[data-color-theme=dark] .panel-title-row h2,html[data-color-theme=dark] .card-heading h3,html[data-color-theme=dark] .analysis-metric strong{color:#f1f2f7}html[data-color-theme=dark] .color-seo-section{border-color:#303241;background:linear-gradient(135deg,#1e2028,#20202c)}html[data-color-theme=dark] .color-seo-section h2{color:#f1f2f7}html[data-color-theme=dark] .color-library-card,html[data-color-theme=dark] .saved-card{border-color:#333542;background:#21232b}html[data-color-theme=dark] .library-color-info b{color:#f0f1f5}html[data-color-theme=dark] .source-tabs{background:#292b34}html[data-color-theme=dark] .source-tabs button.active{background:#363843;color:#c9c3ff}@media(max-width:980px){.advanced-color-grid{grid-template-columns:1fr}.saved-gradient-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.theme-toggle-button span:last-child{display:none}.theme-toggle-button{width:34px;padding:0;justify-content:center}.visual-picker-card canvas{height:180px}.precision-groups fieldset,.precision-groups fieldset.cmyk-fieldset{grid-template-columns:repeat(2,1fr)}.contrast-component-grid{grid-template-columns:1fr 1fr}.component-card{grid-column:1/-1}.saved-gradient-grid{grid-template-columns:1fr 1fr}}@media(max-width:420px){.saved-gradient-grid,.contrast-tools,.contrast-component-grid{grid-template-columns:1fr}.component-card{grid-column:auto}}.studio-summary-actions{display:flex;align-items:center;gap:7px}@media(max-width:520px){.studio-summary-actions{align-items:stretch;flex-direction:column}}