.cl-hero{background:#f6f3ec;padding:38px 0 80px;border-bottom:1px solid #e3dbcc}.cl-breadcrumb{font-size:.8rem;color:#5b6780;margin-bottom:26px}.cl-breadcrumb a{color:#14203a}.cl-hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:60px;align-items:center}.cl-hero h1{font-size:clamp(2.1rem,4.2vw,3.65rem);line-height:1.1;letter-spacing:-.04em;margin:15px 0 20px;color:#14203a}.cl-hero p{max-width:610px;color:#546078;line-height:1.75}.cl-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}.cl-pills span{font-size:.75rem;border:1px solid #d7c299;padding:7px 12px;border-radius:30px;background:#fff;color:#14203a}.cl-art{border:9px solid #fff;border-radius:20px;box-shadow:0 18px 40px #14203a15;transform:rotate(2deg);overflow:hidden}.cl-art-top{height:190px;display:grid;grid-template-columns:38% 32% 30%;grid-template-rows:42% 58%;background:#14203a}.cl-art-top span:nth-child(1){grid-row:1/3;background:#14203a}.cl-art-top span:nth-child(2){grid-column:2/4;background:#cda760}.cl-art-top span:nth-child(3){background:#738699}.cl-art-top span:nth-child(4){background:#e4ceb0}.cl-art-bottom{background:#fff;display:flex;gap:7px;padding:14px}.cl-art-bottom span{height:28px;flex:1;border-radius:5px}.cl-workspace{margin-top:-34px;position:relative;margin-bottom:50px}.cl-shell{background:#fff;border:1px solid #e0e5eb;border-radius:22px;padding:26px;box-shadow:0 12px 35px #14203a09;min-width:0}.cl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}.cl-toolbar h2{font-size:1.3rem;margin:5px 0}.cl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.cl-shell button,.cl-file{font:inherit;font-size:.81rem;font-weight:650;background:#fff;color:#14203a;border:1px solid #cfd5df;border-radius:9px;padding:10px 13px;min-height:42px;cursor:pointer}.cl-shell button:hover,.cl-file:hover{background:#f6f3ec;border-color:#cda760}.cl-shell button:disabled{opacity:.45;cursor:not-allowed}.cl-shell .cl-primary{background:#14203a;color:#fff;border-color:#14203a}.cl-shell .cl-primary:hover{background:#253653;color:#fff}.cl-shell :is(button,input,textarea,select,a,canvas):focus-visible{outline:3px solid #cda760;outline-offset:3px}.cl-status{margin:0 0 20px;border-left:3px solid #cda760;background:#f6f3ec;padding:12px 15px;border-radius:5px;font-size:.85rem;line-height:1.6;overflow-wrap:anywhere;color:#35445e}.cl-jump{display:flex;gap:22px;flex-wrap:wrap;margin:20px 0;font-size:.81rem}.cl-jump a{color:#14203a;text-decoration:underline;text-underline-offset:4px}.cl-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);gap:25px;align-items:start}.cl-layout>*{min-width:0}.cl-panel{border:1px solid #dfe4eb;border-radius:16px;padding:21px;min-width:0}.cl-panel h3{font-size:1.06rem;margin:0 0 18px}.cl-panel-title{font-size:.69rem;color:#717c8e;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}.cl-drop{border:1px dashed #c2ab80;border-radius:12px;padding:20px;background:#fcfaf6;display:flex;align-items:center;gap:15px;flex-wrap:wrap}.cl-drop p{font-size:.77rem;color:#657187;margin:0;line-height:1.55}.cl-drop.cl-drag{outline:3px solid #cda760;background:#f4eddf}.cl-file{display:inline-flex;position:relative;overflow:hidden;align-items:center;justify-content:center;gap:8px}.cl-file input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.cl-file:focus-within{outline:3px solid #cda760;outline-offset:3px}.cl-empty{margin-top:18px;padding:60px 25px;border-radius:12px;background:#f5f6f8;text-align:center;color:#687388;line-height:1.65}.cl-empty strong{display:block;color:#14203a;font-size:1.2rem;margin-bottom:9px}.cl-viewport{margin:18px 0 10px;max-height:520px;overflow:auto;border:1px solid #dfe3e9;border-radius:10px;background:#e9ecf1;overscroll-behavior:contain}.cl-frame{position:relative;background:#fff;margin:0 auto;line-height:0;max-width:none}.cl-frame canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:pan-x pan-y}.cl-marker{position:absolute;width:17px;height:17px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #14203a,inset 0 0 0 1px #14203a;transform:translate(-50%,-50%);pointer-events:none}.cl-meta{font-size:.72rem;line-height:1.5;overflow-wrap:anywhere;color:#657187;margin:10px 0}.cl-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.cl-field{display:flex;flex-direction:column;gap:7px;font-size:.79rem;color:#14203a;min-width:0;margin:0 0 16px}.cl-field>span{font-weight:650}.cl-field :is(input,select,textarea){width:100%;max-width:100%;min-width:0;box-sizing:border-box;border:1px solid #cbd3df;border-radius:8px;padding:10px 11px;background:#fff;color:#14203a;font:inherit;font-size:16px;min-height:42px}.cl-field input[type=color]{height:43px;padding:4px}.cl-field small,.cl-hint{font-size:.73rem;color:#657187;line-height:1.6;overflow-wrap:anywhere}.cl-hint{margin:12px 0}.cl-image-controls{margin-top:16px;border-top:1px solid #e1e5ec;padding-top:18px}.cl-subtitle{font-size:.87rem;font-weight:700;color:#14203a;margin:20px 0 12px}.cl-color-preview{border-radius:13px;overflow:hidden;border:1px solid #dfe3e9;margin-bottom:18px;background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 0 0/18px 18px}.cl-color-preview>div{height:120px}.cl-values{margin:17px 0;border-top:1px solid #e2e6eb}.cl-values>div{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid #e2e6eb;font-size:.77rem}.cl-values dt{color:#6c7789}.cl-values dd{margin:0;color:#14203a;overflow-wrap:anywhere;font-family:ui-monospace,monospace}.cl-section{margin-top:28px;padding-top:28px;border-top:1px solid #e0e5eb;scroll-margin-top:120px}.cl-section h2{font-size:1.45rem;color:#14203a;margin:6px 0 12px}.cl-section-top{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:20px}.cl-count{font-size:.75rem;color:#657187}.cl-palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:20px 0}.cl-palette-card{border:1px solid #dce2ea;border-radius:11px;overflow:hidden;min-width:0}.cl-shell .cl-palette-pick{display:flex;flex-direction:column;width:100%;padding:0;border:0;border-radius:0;text-align:left;align-items:stretch;background:#fff}.cl-palette-pick[aria-pressed=true]{box-shadow:inset 0 0 0 3px #cda760}.cl-mini-swatch{height:90px;border-bottom:1px solid #e0e5eb}.cl-palette-pick>span:last-child{font:12px/1.6 ui-monospace,monospace;padding:10px;overflow-wrap:anywhere}.cl-swatch-actions{display:flex;gap:2px;padding:5px;flex-wrap:wrap}.cl-shell .cl-swatch-actions button{font-size:.65rem;padding:5px 6px;min-height:28px;border:0}.cl-group{border-top:1px solid #e6e9ee;padding-top:18px;margin-top:18px}.cl-inline-fields{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.cl-inline-fields .cl-field{flex:1 1 150px;margin-bottom:0}.cl-inline-fields button{margin-bottom:0}.cl-export{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:18px}.cl-export .cl-field{margin-bottom:0;min-width:190px}.cl-contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:22px}.cl-contrast-preview{padding:28px;border:1px solid #dfe4ec;border-radius:14px;min-height:180px;display:flex;align-items:center;margin-bottom:18px}.cl-contrast-preview p{margin:0;font-size:17px;line-height:1.7}.cl-contrast-preview strong{font-size:26px;line-height:1.3;display:block;margin-bottom:12px}.cl-ratio{font-size:2.6rem;line-height:1.1;letter-spacing:-.04em;color:#14203a;font-weight:750;margin:10px 0}.cl-results{display:grid;gap:0;margin:18px 0}.cl-result{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:.8rem;border-bottom:1px solid #e1e5ed;padding:12px 0}.cl-result strong{font-size:.7rem;padding:4px 10px;border-radius:20px;background:#f4eddf;color:#73511b}.cl-result[data-result=pass] strong{background:#e9edf3;color:#14203a}.cl-gradient{height:140px;border:1px solid #dce1e8;border-radius:12px;margin:18px 0}.cl-code{width:100%;min-height:80px;resize:vertical;background:#14203a;color:#f6f3ec;border:1px solid #14203a;border-radius:10px;box-sizing:border-box;padding:13px;font:12px/1.7 ui-monospace,monospace;margin:8px 0 12px}.cl-copy-fallback{padding:16px;background:#f6f3ec;border-radius:10px;margin-top:20px;font-size:.85rem}.cl-guide{margin-bottom:65px}.cl-guide h2{color:#14203a}.cl-guide p,.cl-guide li{color:#546078;line-height:1.75}.cl-guide a{color:#14203a;text-decoration:underline}.cl-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0 40px}.cl-feature{border:1px solid #dfe4eb;border-radius:15px;padding:24px}.cl-feature>span{color:#a78342;font:1.3rem ui-monospace,monospace}.cl-feature h3{font-size:1.03rem;margin:16px 0 10px}.cl-feature p{font-size:.85rem;margin:0}.cl-shell [hidden]{display:none!important}#cl-image-section,#cl-current-section{scroll-margin-top:120px}
@media(max-width:1100px){.cl-hero-grid{gap:25px}.cl-palette{grid-template-columns:repeat(4,minmax(0,1fr))}.cl-layout{grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr)}.cl-shell{padding:22px}.cl-panel{padding:17px}}
@media(max-width:760px){.cl-hero-grid{grid-template-columns:1fr}.cl-art{display:none}.cl-layout,.cl-contrast-grid,.cl-features{grid-template-columns:minmax(0,1fr)}.cl-shell{padding:17px;border-radius:16px}.cl-hero{padding-top:25px}.cl-palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cl-mini-swatch{height:70px}.cl-palette-pick>span:last-child{font-size:11px;padding:9px 6px}.cl-shell .cl-swatch-actions button{font-size:.65rem}.cl-swatch-actions{gap:0;padding:2px}.cl-drop{padding:16px}.cl-viewport{max-height:440px}.cl-toolbar button{padding:8px 10px;font-size:.77rem}.cl-ratio{font-size:2.1rem}.cl-contrast-preview{padding:21px}.cl-export>.cl-field{flex:1 1 100%}.cl-features{gap:12px}.cl-section-top{gap:10px}}
@media(max-width:380px){.cl-palette{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-fields{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cl-shell *{transition:none!important;scroll-behavior:auto!important}}

.cl-shell details>summary{cursor:pointer;font-size:.85rem;color:#14203a;padding:12px 0}.cl-shell details[open]>summary{margin-bottom:12px}.cl-shell .cl-swatch-actions button{min-height:36px;padding:7px 8px}