.color-workspace-page{--color-accent:#9a4767;--color-soft:#fbf1f5;--color-line:#e8ced8}.color-workspace-page main{max-width:1480px}.color-app [hidden]{display:none!important}.color-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:25px 0}.color-heading h1{font-size:36px;font-weight:680;line-height:1.25;letter-spacing:-1.2px;margin:12px 0}.color-heading p{color:var(--muted);font-size:14px;margin:0}.color-back-link{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}.color-back-link .icon{width:16px;height:16px}.color-trust{display:flex;flex-wrap:wrap;gap:14px 25px;color:var(--muted);font-size:11px;margin:0 0 26px}.color-trust span{display:flex;align-items:center;gap:7px}.color-trust .icon{width:15px;height:15px;color:var(--color-accent)}.color-hub-hero{padding:35px 15px 40px;max-width:850px;text-align:center;margin:auto}.color-hub-icon{display:grid;place-items:center;width:72px;height:74px;border-radius:19px;background:var(--color-soft);border:1px solid var(--color-line);color:var(--color-accent);margin:0 auto 25px}.color-hub-icon .icon{width:33px;height:33px}.color-hub-hero h1{font-size:46px;letter-spacing:-1.6px;line-height:1.25;margin:24px 0}.color-hub-hero>p{font-size:15px;line-height:1.9;color:var(--muted);margin:20px 0 27px}.color-hub-hero .color-trust{justify-content:center;margin-bottom:0}.color-hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px}.color-hub-card{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);transition:box-shadow .18s,border-color .18s}.color-hub-card:hover{border-color:var(--color-line);box-shadow:0 8px 30px #9a47670c}.color-card-art{height:160px;display:flex}.palette-art i{flex:1}.palette-art i:nth-child(1){background:#315fdf}.palette-art i:nth-child(2){background:#89adeb}.palette-art i:nth-child(3){background:#e5edf9}.palette-art i:nth-child(4){background:#f2c9bd}.palette-art i:nth-child(5){background:#8b4b5c}.contrast-art span{flex:1;display:grid;place-items:center;background:#e5edf9;color:#274c77;font-size:66px;letter-spacing:-3px}.contrast-art span+span{background:#274c77;color:#e5edf9}.color-hub-card-body{padding:27px}.color-hub-card h2{font-size:25px;letter-spacing:-.6px;line-height:1.4;margin:17px 0 13px}.color-hub-card p{font-size:12px;line-height:1.95;color:var(--muted);margin:0 0 22px}.color-card-link{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--color-accent);padding-top:8px}.color-card-link .icon{width:17px;height:17px}.color-app{padding:26px;border:1px solid var(--border);border-radius:16px;background:var(--surface);min-width:0}.color-initializing{font-size:12px;color:var(--muted)}.color-message{font-size:12px;line-height:1.8;color:var(--color-accent);background:var(--color-soft);border:1px solid var(--color-line);padding:12px 15px;border-radius:8px;margin:0 0 20px}.color-message.is-error{color:#8a382d;background:#fff1ec;border-color:#dfbcb3}.color-toolbar{display:grid;grid-template-columns:minmax(130px,1fr) minmax(140px,1.1fr) minmax(90px,.65fr) minmax(150px,1.1fr);gap:16px;align-items:end}.color-field{display:flex;flex-direction:column;gap:9px;min-width:0;font-size:11px;font-weight:600}.color-field input,.color-field select,.contrast-color-field>input{width:100%;min-width:0;min-height:44px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:7px;font:inherit;font-size:13px;padding:10px 11px}.color-field input[aria-invalid=true],.palette-hex[aria-invalid=true],.contrast-color-field>input[aria-invalid=true]{border-color:#c36a5c}.color-button{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:40px;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:7px;font:inherit;font-size:11px;line-height:1.6;color:var(--ink);cursor:pointer;text-decoration:none}.color-button .icon{width:15px;height:15px}.color-button:hover{border-color:var(--color-line);background:var(--color-soft);color:var(--color-accent)}.color-button:disabled,.color-button[aria-disabled=true]{opacity:.45;cursor:default}.color-primary{background:var(--color-accent);color:#fff;min-height:44px;border-color:transparent}.color-primary:hover{background:#843c58;color:#fff}.color-option-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin:16px 0 23px;line-height:1.8}.color-check{display:flex;align-items:center;gap:8px;cursor:pointer}.color-check input{width:17px;height:17px;accent-color:var(--color-accent)}.palette-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px}.palette-swatch{border:1px solid var(--border);border-radius:10px;overflow:hidden;min-width:0}.palette-swatch.is-selected{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.palette-inspect{width:100%;height:168px;border:0;display:flex;align-items:flex-start;justify-content:space-between;text-align:left;padding:14px;cursor:pointer}.palette-inspect strong{font-size:30px;font-weight:500;letter-spacing:-1px;align-self:center}.palette-inspect span{font-size:10px}.palette-swatch-body{padding:11px}.palette-swatch-title{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px;margin-bottom:9px}.palette-swatch-title input[type=color]{width:28px;height:25px;padding:0;border:0;background:none;cursor:pointer}.palette-hex{width:100%;min-width:0;height:36px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);font:12px/1.5 ui-monospace,monospace;padding:7px}.palette-edit-row{display:flex;gap:5px;align-items:center;margin-top:7px}.palette-edit-row .color-button{font-size:9px;min-height:31px;padding:5px 7px;flex:1}.palette-order-row{display:flex;gap:5px;margin-top:7px}.palette-order-row .color-button{flex:1;font-size:9px;min-height:29px;padding:4px 6px}.palette-lock[aria-pressed=true]{background:var(--color-soft);color:var(--color-accent);border-color:var(--color-line)}.palette-empty{padding:45px 20px;background:var(--color-soft);border:1px dashed var(--color-line);border-radius:10px;text-align:center}.palette-empty h2{font-size:22px}.palette-empty p{font-size:12px;color:var(--muted);line-height:1.8}.color-action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:17px 0}.color-action-row>div{display:flex;gap:8px;flex-wrap:wrap}.color-action-row>span{font-size:10px;line-height:1.8;color:var(--muted);margin-left:auto}.color-export-panel{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 0;margin:24px 0;display:flex;gap:22px;align-items:center;justify-content:space-between}.color-export-panel h2{font-size:19px;line-height:1.5;letter-spacing:-.3px;margin:13px 0 9px}.color-export-panel p{font-size:11px;line-height:1.8;color:var(--muted);margin:0}.color-export-actions{display:grid;grid-template-columns:minmax(90px,1fr) minmax(100px,1fr);gap:12px;align-items:end;min-width:285px}.color-export-actions .color-button{min-height:44px}.color-panel{min-width:0;padding:23px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}.color-panel h2{font-size:20px;letter-spacing:-.4px;line-height:1.5;margin:10px 0 14px}.color-panel h3{font-size:12px;margin:23px 0 10px}.palette-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.palette-values{display:grid;gap:9px;font-size:12px;line-height:1.8;overflow-wrap:anywhere}.palette-values code{font:11px/1.8 ui-monospace,monospace;color:var(--muted)}.palette-values .color-button{justify-self:start;margin-top:6px}.color-note{font-size:11px;line-height:1.95;color:var(--muted);margin:12px 0}.palette-shades{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:17px}.palette-shade{height:48px;border:1px solid #8c8c8c44;border-radius:5px;cursor:pointer;min-width:0}.palette-shade:focus-visible{outline-offset:3px}.color-panel textarea{width:100%;min-width:0;min-height:100px;resize:vertical;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:7px;font:13px/1.8 ui-monospace,monospace;padding:12px;margin:8px 0 13px}.palette-matrix-panel{margin-top:21px}.palette-matrix-panel summary{font-size:13px;font-weight:600;line-height:1.8;cursor:pointer}.palette-matrix-scroll{max-width:100%;overflow:auto;overscroll-behavior:contain;margin:16px 0}.palette-matrix{border-collapse:collapse;font-size:10px;white-space:nowrap;width:100%}.palette-matrix caption{text-align:left;padding:7px;color:var(--muted);font-size:10px}.palette-matrix th,.palette-matrix td{padding:12px 11px;text-align:center;border:1px solid var(--border);font-weight:400}.palette-matrix th{font-size:10px;background:var(--color-soft)}.palette-matrix td span{display:block;font-size:8px;color:var(--muted);padding-top:5px}.color-related{display:inline-flex;gap:8px;align-items:center;color:var(--color-accent);font-size:11px;margin:14px 0 0}.color-related .icon{width:15px;height:15px}.contrast-workspace{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.5fr);gap:29px}.contrast-settings{padding-right:25px;border-right:1px solid var(--border);min-width:0}.contrast-color-field{margin:0 0 15px}.contrast-field-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;margin:0 0 10px}.contrast-field-title input[type=color]{width:40px;height:31px;border:0;background:none;padding:0;cursor:pointer}.contrast-color-field>input{font-family:ui-monospace,monospace;font-size:13px}.contrast-color-field small{display:block;font-size:10px;line-height:1.9;color:var(--muted);overflow-wrap:anywhere;margin-top:8px;min-height:16px}.contrast-settings>#contrast-swap{font-size:10px;margin:0 0 19px;width:100%}.contrast-canvas{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 0;margin:22px 0}.contrast-canvas summary{font-size:11px;cursor:pointer;line-height:1.8}.contrast-canvas .contrast-color-field{margin-top:17px}.contrast-results{min-width:0}.contrast-ratio-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:8px 0 18px}.contrast-ratio-top strong{display:block;color:var(--color-accent);font-size:52px;line-height:1.2;letter-spacing:-2px;font-weight:600;margin:15px 0 9px;font-variant-numeric:tabular-nums}.contrast-ratio-top p{font-size:12px;line-height:1.8;margin:0;color:var(--muted)}.contrast-ratio-icon{font-size:75px;letter-spacing:-4px;font-weight:500;color:var(--color-accent);background:var(--color-soft);border:1px solid var(--color-line);padding:14px 22px;border-radius:14px}.contrast-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px}.contrast-badge{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 11px;background:var(--surface);border:1px solid var(--border);border-radius:7px;font-size:10px;line-height:1.8}.contrast-badge strong{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;background:#eff6f0;color:#2f6640;white-space:nowrap}.contrast-badge.is-fail strong{background:#fff0eb;color:#8f4231}.contrast-preview{padding:28px;border:1px solid #8c8c8c44;border-radius:11px;margin:23px 0}.contrast-preview-large{display:block;font-size:32px;line-height:1.4;font-weight:500;letter-spacing:-.8px;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}.contrast-preview>p{font-size:16px;font-weight:400;line-height:1.8;margin:18px 0;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}.contrast-preview-line{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:19px;border-top:1px solid currentColor;font-size:12px}.contrast-preview-line .icon{width:21px;height:21px}.contrast-results>.color-field{margin:15px 0}.contrast-suggestions{margin-top:27px;background:var(--color-soft);border-color:var(--color-line)}.color-suggestion-controls{display:flex;gap:13px;align-items:end;margin:20px 0}.color-suggestion-controls .color-field{max-width:350px;flex:1}.color-suggestion-controls .color-button{min-height:44px}.contrast-suggestion{display:flex;align-items:center;gap:17px;margin:16px 0 0;flex-wrap:wrap;font-size:12px;line-height:1.8}.contrast-suggestion-chip{width:60px;height:53px;border:1px solid #8c8c8c44;border-radius:7px}.contrast-suggestion p{margin:0;flex:1}.color-guidance{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:35px 0}.color-guidance h2,.color-faq h2,.color-method h2{font-size:20px;letter-spacing:-.4px;line-height:1.5;margin:0 0 14px}.color-guidance p,.color-guidance li,.color-method p{font-size:12px;line-height:1.95;color:var(--muted)}.color-guidance ol{padding-left:21px}.color-guidance li{padding:5px 0}.color-faq{padding:27px;border:1px solid var(--border);border-radius:13px;background:var(--surface);margin:30px 0}.color-faq details{border-top:1px solid var(--border);padding:14px 0}.color-faq summary{font-size:12px;font-weight:600;line-height:1.9;cursor:pointer}.color-faq details p{font-size:12px;line-height:1.95;color:var(--muted);margin:12px 0 0}.color-method{margin:30px 0}.color-method>div{display:flex;gap:15px;flex-wrap:wrap}.color-method a{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--color-accent)}.color-method .icon{width:14px;height:14px}.color-copy-dialog{width:calc(100% - 32px);max-width:650px;padding:25px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink)}.color-copy-dialog::backdrop{background:#111a2977}.color-copy-dialog h2{font-size:20px}.color-copy-dialog p{font-size:12px;color:var(--muted);line-height:1.8}.color-copy-dialog textarea{width:100%;min-height:220px;padding:13px;font:13px/1.8 ui-monospace,monospace;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:7px;resize:vertical;margin:10px 0 17px}
html[data-theme=dark] .color-workspace-page{--color-accent:#e9a9c2;--color-soft:#352832;--color-line:#654452}html[data-theme=dark] .color-primary{color:#fff;background:#994565}html[data-theme=dark] .color-primary:hover{background:#b15679}html[data-theme=dark] .color-message.is-error{background:#3b2928;color:#efbaae;border-color:#72483e}html[data-theme=dark] .contrast-badge strong{background:#263d2d;color:#b9ddc1}html[data-theme=dark] .contrast-badge.is-fail strong{background:#462e28;color:#f2b8a7}
@media(max-width:1100px){.color-toolbar{grid-template-columns:1fr 1fr}.color-export-panel{align-items:flex-start;flex-direction:column}.color-export-actions{width:100%;grid-template-columns:1fr 1fr 1fr 1fr;min-width:0}.contrast-workspace{gap:22px;grid-template-columns:minmax(190px,.85fr) minmax(0,1.4fr)}.contrast-settings{padding-right:20px}.contrast-badges{grid-template-columns:1fr}.contrast-ratio-icon{font-size:56px;padding:12px}.contrast-ratio-top strong{font-size:45px}.palette-swatches{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}.palette-inspect{height:145px}}
@media(max-width:850px){.contrast-workspace{grid-template-columns:1fr}.contrast-settings{border-right:0;border-bottom:1px solid var(--border);padding:0 0 20px}.contrast-badges{grid-template-columns:1fr 1fr}.contrast-ratio-icon{font-size:68px;padding:13px 20px}.palette-detail-grid{grid-template-columns:1fr}.color-hub-card h2{font-size:22px}.color-hub-card-body{padding:22px}.color-hub-grid{gap:18px}.color-export-actions{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.color-heading{align-items:flex-start;gap:13px;margin:20px 0}.color-heading h1{font-size:28px;letter-spacing:-.8px}.color-heading p{font-size:12px;line-height:1.8}.color-heading .eyebrow{font-size:7px}.color-back-link{font-size:9px;line-height:1.8;max-width:87px;flex-shrink:0;gap:5px;margin-top:8px}.color-trust{font-size:9px;gap:11px 14px}.color-trust .icon{width:12px;height:12px}.color-app{padding:20px 15px}.color-toolbar{gap:14px 11px}.color-field{font-size:11px}.color-field input,.color-field select,.contrast-color-field>input{font-size:16px;min-height:46px}.color-primary{min-height:46px;font-size:11px;padding:10px 8px}.color-option-row{font-size:10px;gap:10px;margin:16px 0 21px}.color-check{font-size:11px}.palette-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.palette-inspect{height:130px}.palette-swatch-body{padding:10px}.palette-hex{font-size:16px;height:39px}.palette-edit-row .color-button{font-size:10px;min-height:37px;padding:6px}.palette-order-row .color-button{font-size:9px;min-height:35px}.color-button{min-height:43px;font-size:10px}.color-action-row{gap:7px}.color-action-row>div{gap:7px}.color-action-row>span{margin-left:0;font-size:10px}.color-export-panel{padding:23px 0;margin:22px 0}.color-export-panel h2{font-size:18px}.color-export-actions{gap:12px}.color-panel{padding:19px 15px}.color-panel h2{font-size:19px}.color-panel textarea{font-size:16px}.palette-shade{height:45px}.palette-matrix-panel summary{font-size:12px}.palette-matrix th,.palette-matrix td{padding:11px}.contrast-badges{gap:7px}.contrast-badge{font-size:10px;flex-direction:column;align-items:flex-start;padding:11px}.contrast-badge strong{font-size:9px}.contrast-ratio-top strong{font-size:43px}.contrast-ratio-icon{font-size:59px;padding:12px 14px}.contrast-preview{padding:23px 18px}.contrast-preview-large{font-size:28px}.contrast-color-field small{font-size:10px}.contrast-color-field>input{font-size:16px}.contrast-suggestions{padding:20px 15px}.color-suggestion-controls{flex-direction:column;align-items:stretch;gap:12px}.color-suggestion-controls .color-field{max-width:none}.color-note{font-size:11px}.color-guidance{grid-template-columns:1fr;gap:20px;margin:30px 0}.color-faq{padding:23px 18px}.color-hub-grid{grid-template-columns:1fr}.color-hub-hero{padding:25px 5px 30px}.color-hub-hero h1{font-size:37px}.color-hub-hero>p{font-size:13px}.color-hub-hero .color-trust{font-size:9px}.color-card-art{height:135px}.color-hub-card h2{font-size:25px}.color-hub-card-body{padding:25px}.color-copy-dialog{padding:21px}}
@media(prefers-reduced-motion:reduce){.color-workspace-page *{transition:none!important;scroll-behavior:auto!important}}