.ch-wrap{--ch-text:var(--color-blue);--ch-text-soft:color-mix(in srgb, var(--color-blue) 28%, var(--color-muted));--ch-line:color-mix(in srgb, var(--color-blue) 15%, transparent);--ch-glass:color-mix(in srgb, var(--color-white) 50%, transparent);isolation:isolate;min-height:100%;color:var(--ch-text);padding:12px 16px 24px;position:relative}.ch-content{width:100%;margin-inline:auto;position:relative}.ch-toolbar{border:1px solid var(--ch-line);background:linear-gradient(140deg, color-mix(in srgb, var(--color-white) 80%, transparent), var(--ch-glass));box-shadow:inset 0 1px 0 var(--color-white), 0 12px 32px color-mix(in srgb, var(--color-blue) 5%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;padding:12px;display:flex}.ch-color-control{flex-wrap:wrap;flex:100%;justify-content:space-between;align-items:center;gap:10px;min-width:0;display:flex}.ch-control-label{color:var(--ch-text-soft);white-space:nowrap;font-size:12px}.ch-color-inputs{align-items:center;gap:10px;display:flex}.ch-color-picker{appearance:none;border:1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);background:0 0;border-radius:50%;flex:none;width:42px;height:42px;padding:4px;display:block;overflow:hidden}.ch-color-picker::-webkit-color-swatch-wrapper{padding:0}.ch-color-picker::-webkit-color-swatch{border:0;border-radius:50%}.ch-color-picker::-moz-color-swatch{border:0;border-radius:50%}.ch-hex-input{border:1px solid var(--ch-line);background:color-mix(in srgb, var(--color-white) 65%, transparent);width:104px;min-height:44px;color:var(--ch-text);font-family:var(--font-body), sans-serif;letter-spacing:.035em;text-align:center;text-transform:uppercase;border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.4;transition:border-color .18s,background .18s}.ch-pill{border:1px solid var(--ch-line);background:var(--ch-glass);min-height:44px;color:var(--ch-text);font-family:var(--font-body), sans-serif;border-radius:100px;justify-content:center;align-items:center;gap:8px;padding:10px 13px;line-height:1.4;display:inline-flex}.ch-base-dot{border:1px solid color-mix(in srgb, var(--color-blue) 20%, transparent);border-radius:50%;flex:none;width:14px;height:14px}.ch-base-label,.ch-base-hex-val,.ch-toggle-label{white-space:nowrap;font-size:11px}.ch-base-label{color:var(--ch-text-soft)}.ch-base-hex-val{letter-spacing:.025em}.ch-pastel-button{transition:background .18s,border-color .18s}.ch-pastel-button[aria-checked=true]{background:var(--color-blue);border-color:var(--color-blue);color:var(--color-bg)}.ch-toggle-wrap{-webkit-user-select:none;user-select:none;align-items:center;gap:9px;display:flex}.ch-track{background:color-mix(in srgb, var(--color-blue) 24%, var(--color-bg));width:30px;height:18px;box-shadow:inset 0 0 0 1px var(--ch-line);border-radius:100px;flex:none;transition:background .18s;position:relative}.ch-thumb{background:var(--color-bg);border-radius:50%;width:12px;height:12px;transition:transform .18s,background .18s;position:absolute;top:3px;left:3px}.ch-pastel-button[aria-checked=true] .ch-track{background:var(--color-bg)}.ch-pastel-button[aria-checked=true] .ch-thumb{background:var(--color-blue);transform:translate(12px)}.ch-toggle-all-btn{border:1px solid var(--ch-line);min-height:44px;color:var(--ch-text);font-family:var(--font-body), sans-serif;white-space:nowrap;background:0 0;border-radius:100px;padding:10px 15px;font-size:11px;line-height:1.4;transition:background .18s,border-color .18s}.ch-collection-heading{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-bottom:18px;font-size:12px;line-height:1.6;display:flex}.ch-collection-heading p{margin:0}.ch-collection-heading p:last-child{color:var(--ch-text-soft);font-size:11px}.ch-gallery{overscroll-behavior-x:contain;width:100%;min-width:0;max-width:100%;padding:6px 6px 20px;overflow-x:auto}.ch-harmonies-list{grid-template-columns:repeat(3,minmax(280px,1fr));align-items:start;gap:20px;display:grid}.ch-harmony-row{border:1px solid var(--ch-line);background:linear-gradient(140deg, color-mix(in srgb, var(--color-white) 78%, transparent), color-mix(in srgb, var(--color-white) 40%, transparent) 55%, color-mix(in srgb, var(--color-indigo) 2%, transparent));min-width:0;box-shadow:inset 0 1px 0 var(--color-white), inset 0 -1px 0 color-mix(in srgb, var(--color-white) 60%, transparent), 0 16px 50px color-mix(in srgb, var(--color-blue) 6%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;flex-direction:column;padding:20px;transition:border-color .2s;display:flex;position:relative}.ch-harmony-row.glass-noise:after{opacity:.03}.ch-harmony-row>*{z-index:2;position:relative}.ch-harmony-heading{margin:0}.ch-harmony-header{width:100%;min-height:52px;color:inherit;text-align:left;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:center;gap:14px;padding:0;display:flex}.ch-harmony-heading-text{flex-direction:column;gap:5px;min-width:0;display:flex}.ch-harmony-name{font-family:var(--font-display), sans-serif;letter-spacing:-.025em;white-space:nowrap;font-size:12.5px;font-weight:400;line-height:1.1}.ch-harmony-type{color:var(--ch-text-soft);font-family:var(--font-body), sans-serif;font-size:11px;font-weight:300;line-height:1.65}.ch-collapse-chevron{width:15px;height:15px;color:var(--ch-text-soft);flex:none;transition:transform .2s}.ch-harmony-row.expanded .ch-collapse-chevron{transform:rotate(180deg)}.ch-composition-disclosure{justify-content:space-between;align-items:center;gap:12px;margin-top:7px;display:flex}.ch-composition-toggle{color:var(--ch-text-soft)}.ch-composition-chevron{width:11px;height:11px}.ch-composition-toggle[aria-expanded=true] .ch-composition-chevron{transform:rotate(180deg)}.ch-composition-body[hidden]{display:none}.ch-focus-toggle{white-space:nowrap;font-size:11px}.ch-focus-toggle[aria-pressed=true]{background:var(--color-blue);color:var(--color-bg)}.ch-wrap-focus .ch-focus-toggle{margin-left:auto}.ch-composition-preview{background:var(--color-surface);box-shadow:0 0 0 1px var(--ch-line);border-radius:3px;margin-top:14px;overflow:hidden}.ch-composition-canvas{aspect-ratio:4/5;width:100%;height:auto;display:block}.ch-composition-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 6px;margin-top:9px;display:flex}.ch-study-btn{min-height:40px;color:var(--ch-text);font-family:var(--font-body), sans-serif;background:0 0;border:0;border-radius:4px;justify-content:center;align-items:center;gap:5px;padding:6px 2px;font-size:10px;line-height:1.5;display:inline-flex}.ch-favorite-btn[aria-pressed=true]{color:var(--color-indigo)}.ch-favorite-btn svg{flex-shrink:0}.ch-color-roles{color:var(--ch-text-soft);flex-wrap:wrap;gap:6px 12px;font-size:9px;line-height:1.5;display:flex}.ch-color-roles>span{align-items:center;gap:5px;display:inline-flex}.ch-color-roles i{width:9px;height:9px;box-shadow:inset 0 0 0 1px var(--ch-line);border-radius:50%}.ch-favorites-toggle{font-size:11px}.ch-favorites-toggle[aria-expanded=true]{background:var(--color-blue);color:var(--color-bg)}.ch-favorites-count{font-variant-numeric:tabular-nums;min-width:17px}.ch-favorites[hidden]{display:none}.ch-favorites{border-bottom:1px solid var(--ch-line);margin-bottom:20px;padding:20px 4px 26px}.ch-favorites-heading{flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin-bottom:16px;display:flex}.ch-favorites-heading h2{font-family:var(--font-display), sans-serif;margin:0;font-size:18px;font-weight:400}.ch-favorites-heading p,.ch-favorites-empty,.ch-storage-notice{color:var(--ch-text-soft);margin:0;font-size:11px;line-height:1.7}.ch-storage-notice{margin:-4px 4px 16px}.ch-favorites-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr));gap:16px;max-height:420px;padding:6px;display:grid;overflow-y:auto}.ch-favorite{border:1px solid var(--ch-line);background:var(--ch-glass);border-radius:14px;gap:14px;min-width:0;padding:12px;display:flex}.ch-favorite-preview{background:var(--color-surface);border:0;border-radius:2px;flex:0 0 84px;align-self:flex-start;padding:0;overflow:hidden}.ch-favorite-details{flex:1;align-self:center;min-width:0}.ch-favorite-details h3{font-family:var(--font-display), sans-serif;margin:0 0 5px;font-size:13px;font-weight:400;line-height:1.3}.ch-favorite-details p{color:var(--ch-text-soft);margin:0;font-size:10px}.ch-favorite-colors{gap:2px;margin-top:10px;display:flex}.ch-favorite-colors span{border-radius:1px;flex:1;height:6px}.ch-favorite-actions{gap:16px;display:flex}.ch-collapsed-preview{gap:5px;height:32px;margin-top:18px;display:flex}.ch-harmony-row.expanded .ch-collapsed-preview{display:none}.ch-preview-swatch{min-width:0;height:100%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-blue) 10%, transparent);border-radius:7px;flex:1 1 0}.ch-palette-body{min-width:0}.ch-palette-body[hidden],.ch-guide-content[hidden]{display:none}.ch-palette-body-inner{padding-top:18px}.ch-palette-display{align-items:stretch;display:flex}.ch-grid-2x3{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.ch-swatch-card{aspect-ratio:3/4;background:0 0;border:0;border-radius:10px;min-width:0;padding:0;transition:transform .18s,box-shadow .18s;display:block;position:relative;overflow:hidden}.ch-card-fill{border-radius:inherit;object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.ch-card-circle{aspect-ratio:1;width:24%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-dark) 8%, transparent);z-index:2;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-60%)}.ch-card-hex{bottom:10px;z-index:3;pointer-events:none;font-family:var(--font-body), sans-serif;letter-spacing:.015em;text-align:center;font-size:10px;font-weight:400;line-height:1.2;position:absolute;inset-inline:2px}.ch-swatch-card.flash{box-shadow:0 0 0 2px var(--color-blue)}.ch-palette-bottom{border-top:1px solid var(--ch-line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;margin-top:16px;padding-top:12px;display:flex}.ch-palette-guide{min-width:0}.ch-bottom-actions{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.ch-copy-row-btn,.ch-img-btn,.ch-guide-toggle{border:1px solid var(--ch-line);background:var(--ch-glass);min-height:40px;color:var(--ch-text);font-family:var(--font-body), sans-serif;white-space:nowrap;border-radius:100px;justify-content:center;align-items:center;gap:6px;padding:8px 11px;font-size:11px;line-height:1.4;transition:background .18s,border-color .18s;display:inline-flex}.ch-guide-toggle{color:var(--ch-text-soft);background:0 0;border-color:#0000;padding-inline:0}.ch-guide-toggle-label{font:inherit}.ch-copy-row-btn.success{background:var(--color-blue);color:var(--color-bg)}.ch-guide-toggle-chevron{flex:none;width:12px;height:12px;transition:transform .2s}.ch-harmony-row.guide-open .ch-guide-toggle-chevron{transform:rotate(180deg)}.ch-guide-content{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:18px;display:grid}.ch-guide-label{color:var(--ch-text);margin-bottom:6px;font-size:11px;line-height:1.5;display:block}.ch-guide-text{color:var(--ch-text-soft);font-family:var(--font-body), sans-serif;overflow-wrap:anywhere;margin:0;font-size:12px;font-weight:300;line-height:1.85}.ch-signoff{color:var(--ch-text-soft);margin-top:36px;font-size:11px;line-height:1.7}.ch-toast{z-index:1000;border:1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);background:color-mix(in srgb, var(--color-blue) 94%, transparent);width:max-content;max-width:calc(100vw - 32px);color:var(--color-bg);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--color-bg) 15%, transparent), 0 8px 24px color-mix(in srgb, var(--color-blue) 16%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);text-align:center;opacity:0;pointer-events:none;border-radius:100px;padding:14px 22px;font-size:12px;line-height:1.5;transition:opacity .18s,transform .18s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,8px)}.ch-toast.show{opacity:1;transform:translate(-50%)}.ch-copy-fallback{z-index:2000;width:100%;max-width:none;height:100dvh;max-height:none;color:inherit;cursor:auto;background:color-mix(in srgb, var(--color-blue) 16%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;justify-content:center;align-items:center;margin:0;padding:24px;display:none;position:fixed;inset:0}.ch-copy-fallback[open]{display:flex}.ch-copy-fallback::backdrop{background:0 0}.ch-copy-fallback button{cursor:pointer}.ch-copy-fallback textarea{cursor:text}.ch-copy-fallback-box{border:1px solid color-mix(in srgb, var(--color-blue) 20%, transparent);background:linear-gradient(140deg, var(--color-white), var(--color-bg));width:100%;max-width:440px;max-height:calc(100dvh - 48px);box-shadow:inset 0 1px 0 var(--color-white), 0 20px 70px color-mix(in srgb, var(--color-blue) 16%, transparent);border-radius:26px;flex-direction:column;padding:26px;display:flex;overflow-y:auto}.ch-copy-fallback-box p{color:var(--ch-text);margin:0 0 18px;font-size:13px;line-height:1.7}.ch-copy-fallback-box textarea{border:1px solid var(--ch-line);background:color-mix(in srgb, var(--color-blue) 3%, var(--color-white));width:100%;min-height:110px;color:var(--ch-text);font-family:var(--font-body), sans-serif;resize:vertical;border-radius:12px;padding:14px;font-size:13px;line-height:1.8}.ch-copy-fallback-close{border:1px solid var(--ch-line);background:var(--color-blue);min-height:44px;color:var(--color-bg);font-family:var(--font-body), sans-serif;border-radius:100px;align-self:flex-end;margin-top:18px;padding:10px 20px;font-size:12px;line-height:1.5}.ch-wrap :focus-visible{outline:2px solid var(--color-blue);outline-offset:4px}.ch-wrap .ch-swatch-card:focus-visible{border-radius:10px}.ch-wrap .ch-harmony-header:focus-visible{border-radius:8px}.ch-wrap .ch-gallery:focus-visible{outline-offset:-2px;border-radius:8px}@media (hover:hover){.ch-study-btn:hover{color:var(--color-indigo);text-underline-offset:3px;text-decoration:underline}.ch-hex-input:hover,.ch-color-picker:hover{border-color:color-mix(in srgb, var(--color-blue) 65%, transparent)}.ch-pastel-button:hover,.ch-toggle-all-btn:hover,.ch-copy-row-btn:hover,.ch-img-btn:hover{background:color-mix(in srgb, var(--color-blue) 7%, transparent);border-color:color-mix(in srgb, var(--color-blue) 35%, transparent)}.ch-pastel-button[aria-checked=true]:hover,.ch-copy-row-btn.success:hover{background:color-mix(in srgb, var(--color-blue) 90%, var(--color-dark));border-color:var(--color-blue)}.ch-harmony-row:has(.ch-harmony-header:hover){border-color:color-mix(in srgb, var(--color-blue) 35%, transparent)}.ch-guide-toggle:hover{color:var(--ch-text)}.ch-swatch-card:hover{box-shadow:0 6px 14px color-mix(in srgb, var(--color-dark) 15%, transparent);transform:translateY(-2px)}}@media (min-width:640px){.ch-toolbar{gap:12px 18px;padding:12px 16px}.ch-color-control{flex:0 auto;justify-content:flex-start;gap:14px}.ch-toggle-all-btn{margin-left:auto}.ch-harmony-row{border-radius:28px;padding:22px}.ch-card-hex{font-size:11px}}@media (prefers-reduced-motion:reduce){.ch-wrap *,.ch-wrap :before,.ch-wrap :after{transition:none!important}.ch-swatch-card:hover{transform:none}.ch-toast,.ch-toast.show{transform:translate(-50%)}}