/* Scoped editorial workspace: never changes an existing tool's controls. */
.cl-library{--cl-panel:#211b32;--cl-edge:#514166;--cl-muted:#c4b7d4;color:#f7f0ff;font-size:16px;line-height:1.7;min-width:0}
.cl-library *{box-sizing:border-box}.cl-library [hidden]{display:none!important}.cl-library h1,.cl-library h2,.cl-library h3{color:inherit;line-height:1.2;margin:0 0 16px}.cl-library h1{font-size:clamp(34px,4vw,60px);letter-spacing:-1.5px}.cl-library h2{font-size:clamp(23px,2.2vw,32px)}.cl-library h3{font-size:20px}.cl-library p{margin:0 0 18px;color:var(--cl-muted)}.cl-library a{color:#dbc0ff;text-underline-offset:4px}.cl-library button,.cl-library input,.cl-library select{font:inherit;min-height:46px;border:1px solid #806396;border-radius:10px;background:#302342;color:#fff;padding:10px 16px;margin:0}.cl-library button{cursor:pointer;font-weight:600}.cl-library button:hover{background:#513568}.cl-library :is(a,button,input,select):focus-visible{outline:3px solid #ead5ff;outline-offset:4px}.cl-library section{margin-block:42px}.cl-library .cl-eyebrow{font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:#d9b3fa;font-weight:700;margin-bottom:14px}.cl-heading{max-width:900px;margin:16px 0 36px}.cl-heading>p:last-child{font-size:18px;line-height:1.8;max-width:80ch}.cl-intro-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:24px}.cl-feature{margin:0!important;padding:36px;border-radius:24px;background:radial-gradient(ellipse at 80% 0,#7c43ad44,transparent 65%),#231b33;border:1px solid var(--cl-edge)}.cl-feature h2{font-size:38px}.cl-feature p{max-width:60ch}.cl-primary,.cl-secondary{display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:600;margin:10px 12px 0 0}.cl-primary{background:#8250bd;color:#fff!important;border:1px solid #c8a0ec}.cl-secondary{border:1px solid #795d8c}.cl-showcase{position:relative;border-radius:24px;background:#193b3b;border:1px solid #46706e;display:grid;grid-template-columns:1fr 1fr;align-items:center;text-decoration:none;overflow:hidden;min-height:280px}.cl-showcase>.cl-object-art{width:100%;height:230px}.cl-showcase>span{font-size:30px;font-weight:700;color:#fff4e7;padding:20px}.cl-showcase .cl-palette-strip{grid-column:1/-1;align-self:end;height:50px}.cl-palette-strip{display:flex;height:46px;overflow:hidden;border-radius:12px 12px 0 0}.cl-palette-strip>span{flex:1;min-width:0}.cl-filter{display:flex;align-items:end;gap:14px;flex-wrap:wrap;padding:22px;background:var(--cl-panel);border:1px solid var(--cl-edge);border-radius:16px}.cl-filter label{display:grid;gap:8px;font-size:14px;font-weight:600;flex:1 1 220px}.cl-filter label:first-child{flex:2 1 320px}.cl-filter input,.cl-filter select{width:100%;background:#171124}.cl-filter button[type=submit]{background:#8250bd}.cl-section-title{display:flex;align-items:center;justify-content:space-between;gap:20px}.cl-section-title p{margin:0 0 16px}#cl-count{margin:18px 0}.cl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.cl-card{display:flex;flex-direction:column;border:1px solid var(--cl-edge);border-radius:18px;overflow:hidden;text-decoration:none;background:var(--cl-panel);color:inherit!important;transition:transform .15s,border-color .15s}.cl-card:hover{transform:translateY(-3px);border-color:#c5a0eb}.cl-card-color{height:116px;padding:20px;display:flex;align-items:end;font:700 18px ui-monospace,monospace}.cl-card>div{padding:22px}.cl-card small{display:block;color:#c8afd9;font-size:12px;margin-bottom:12px}.cl-card h3{margin-bottom:10px}.cl-card p{font-size:14px;line-height:1.6}.cl-card>div>span{color:#e5c8ff;font-size:14px;font-weight:600}.cl-family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.cl-family-grid>a{display:flex;align-items:center;gap:12px;padding:20px;background:var(--cl-panel);border:1px solid var(--cl-edge);border-radius:14px;text-decoration:none;flex-wrap:wrap}.cl-family-grid>a>span:last-child{margin-left:auto;font-size:13px}.cl-family-dot{height:25px;width:25px;border-radius:50%;box-shadow:0 0 0 1px #ffffff4d}.cl-palettes{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}.cl-palette-card{border:1px solid var(--cl-edge);border-radius:16px;background:var(--cl-panel);overflow:hidden;text-decoration:none;color:inherit!important;padding-bottom:22px}.cl-palette-card h3{margin:22px 22px 12px}.cl-palette-card p,.cl-palette-card>span{margin:0 22px;font-size:14px}.cl-palette-card p{margin-bottom:12px}.cl-palette-card>span{color:#e5c8ff}.cl-note{background:#241c33;border:1px solid var(--cl-edge);border-radius:16px;padding:26px}.cl-note h2{font-size:23px}.cl-note ol{margin:0;padding-left:22px}.cl-note li{padding:5px 0;color:var(--cl-muted)}.cl-color-hero{padding:38px 42px;border-radius:24px;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:240px}.cl-color-hero>div:first-child{display:grid;gap:14px}.cl-color-hero strong{font-family:ui-monospace,monospace;font-weight:700;font-size:clamp(36px,5vw,64px)}.cl-color-hero span{font-weight:600}.cl-hero-buttons{display:flex;gap:12px;flex-wrap:wrap;max-width:320px;justify-content:end}.cl-hero-buttons button{background:#181124ee;color:#fff;border-color:#b5a0c6}.cl-jump{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 32px}.cl-jump a{padding:8px 14px;border:1px solid var(--cl-edge);border-radius:30px;text-decoration:none;background:#21192d;font-size:14px}.cl-code-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.cl-code-grid>div{display:grid;gap:12px;background:var(--cl-panel);border:1px solid var(--cl-edge);padding:20px;border-radius:14px;min-width:0}.cl-code-grid code{font-size:15px;overflow-wrap:anywhere;color:#f1defd}.cl-code-grid>div>span{color:#c9b4da;font-size:13px}.cl-code-grid button{justify-self:start}.cl-reading-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start;margin:42px 0}.cl-library .cl-reading-grid>section{margin:0}.cl-reading-grid>section>p{max-width:75ch}.cl-contrast-samples{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cl-contrast-samples>div{display:grid;gap:8px;padding:16px;border-radius:12px;line-height:1.4}.cl-contrast-samples strong{font-size:24px}.cl-contrast-samples small{font-size:12px}.cl-contrast-samples+p{margin:18px 0 0;font-size:14px}.cl-object-grid,.cl-idea-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.cl-object-grid figure{margin:0;overflow:hidden;border-radius:18px;background:var(--cl-panel);border:1px solid var(--cl-edge)}.cl-object-art{display:block;width:100%;height:225px;padding:10px}.cl-object-grid figcaption{padding:22px}.cl-object-grid figcaption p{font-size:14px;margin:0}.cl-library .cl-idea-grid>section{margin:0;padding:26px;border:1px solid var(--cl-edge);border-radius:16px;background:var(--cl-panel)}.cl-step{display:block;color:#ceabef;font-size:13px;margin-bottom:18px}.cl-idea-grid p{font-size:15px;margin:0}.cl-callout{margin-top:22px!important;padding:18px 22px;border-left:3px solid #bc93eb;background:#241b32;border-radius:0 12px 12px 0}.cl-shade-grid{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 30px}.cl-swatch{padding:0!important;display:flex;flex-direction:column;flex:1 1 120px;min-width:100px;border:1px solid var(--cl-edge);border-radius:12px;overflow:hidden;text-decoration:none;background:#21192d!important}.cl-swatch>span{display:flex;align-items:end;justify-content:center;min-height:84px;padding:12px;font:600 14px ui-monospace,monospace}.cl-swatch strong{padding:12px;color:#f1e5ff;font-size:13px;text-align:center}.cl-lab{display:grid;grid-template-columns:1fr 1fr;gap:32px;background:var(--cl-panel);border:1px solid var(--cl-edge);border-radius:22px;padding:30px}.cl-lab-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:20px 0}.cl-lab-controls label{display:grid;gap:8px;font-size:13px;flex:1 1 100px}.cl-lab input[type=color]{padding:6px;height:48px;width:100%;cursor:pointer}.cl-lab-controls button{font-size:14px}.cl-lab>div>p{font-size:14px}.cl-lab #cl-contrast{font-size:17px;color:#f2dfff;min-height:52px}.cl-preview{align-self:center;min-height:320px;padding:36px;border-radius:18px;box-shadow:0 15px 35px #0003}.cl-preview p{color:inherit;font-size:17px;opacity:1}.cl-preview h3{font-size:36px;line-height:1.15;margin:25px 0 20px}.cl-preview-tag{font-size:12px;font-weight:700;letter-spacing:.7px}.cl-demo-action{display:inline-flex;border:2px solid currentColor;padding:9px 16px;border-radius:10px;font-weight:600}.cl-preview small{display:block;margin-top:25px;font-size:12px}.cl-library details{border:1px solid var(--cl-edge);border-radius:12px;background:var(--cl-panel);padding:18px 22px;margin:12px 0}.cl-library summary{cursor:pointer;font-weight:600}.cl-library details p{margin:16px 0 0}.cl-actions{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0}.cl-palette-large{height:180px;border-radius:20px}.cl-palette-large>span{display:flex;align-items:end;justify-content:center;padding:20px 8px;font:700 16px ui-monospace,monospace}.cl-status:empty{display:none}.cl-status{position:sticky;bottom:20px;width:fit-content;max-width:100%;background:#352342;border:1px solid #b48fd1;border-radius:12px;padding:14px 22px;color:#fff!important;box-shadow:0 6px 24px #0006;z-index:5}.cl-library [id]{scroll-margin-top:110px}
@media(max-width:1100px){.cl-grid,.cl-code-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cl-color-hero{padding:30px}.cl-code-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-showcase{grid-template-columns:1fr}.cl-showcase>.cl-object-art{height:160px}.cl-showcase>span{padding-top:0;text-align:center}.cl-lab{gap:24px;padding:24px}.cl-preview{padding:26px}}
@media(max-width:760px){.cl-intro-grid,.cl-reading-grid,.cl-lab{grid-template-columns:1fr}.cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-heading h1{letter-spacing:-.5px}.cl-feature{padding:26px}.cl-feature h2{font-size:30px}.cl-showcase{grid-template-columns:1fr 1fr;min-height:180px}.cl-showcase>span{font-size:25px;padding:20px}.cl-color-hero{align-items:start;flex-direction:column;gap:22px}.cl-hero-buttons{max-width:none;justify-content:start}.cl-section-title{display:block}.cl-object-grid,.cl-idea-grid{grid-template-columns:1fr}.cl-object-grid figure{display:grid;grid-template-columns:160px 1fr}.cl-object-art{height:190px}.cl-reading-grid{gap:24px}.cl-palette-large{height:130px}.cl-palette-large>span{font-size:13px;padding:10px 4px}.cl-lab{padding:22px}.cl-preview h3{font-size:30px}.cl-library section{margin-block:32px}}
@media(max-width:480px){.cl-grid,.cl-family-grid{grid-template-columns:1fr}.cl-code-grid{grid-template-columns:1fr 1fr;gap:12px}.cl-code-grid>div{padding:15px}.cl-card{display:grid;grid-template-columns:100px 1fr}.cl-card-color{height:100%;min-height:160px;padding:10px;align-items:center;justify-content:center;font-size:13px}.cl-card>div{padding:18px}.cl-card h3{font-size:20px}.cl-card p{font-size:13px}.cl-showcase>span{font-size:23px}.cl-filter{padding:18px}.cl-filter label{flex-basis:100%}.cl-filter button{flex:1}.cl-color-hero{padding:24px}.cl-color-hero strong{font-size:36px}.cl-note{padding:22px}.cl-object-grid figure{grid-template-columns:115px 1fr}.cl-object-art{height:170px;padding:3px}.cl-object-grid figcaption{padding:18px 14px}.cl-object-grid h3{font-size:18px}.cl-object-grid p{font-size:13px}.cl-palettes .cl-palette-card{display:block}.cl-palette-large{height:110px}.cl-palette-large>span{font-size:11px;padding-inline:2px}.cl-shade-grid{gap:9px}.cl-swatch{flex-basis:95px}.cl-lab-controls button{flex:1 1 120px}.cl-jump{gap:8px}.cl-jump a{font-size:13px;padding:7px 12px}.cl-code-grid:has(>div:nth-child(5)){grid-template-columns:1fr}.cl-preview{padding:25px}.cl-heading>p:last-child{font-size:16px}}
@media(prefers-reduced-motion:reduce){.cl-card{transition:none}.cl-card:hover{transform:none}}