.editor-intro:before{background-image:url('palette-art-v3.png');inset:-8px -15px -25px 7%;background-size:100% auto;background-position:center;opacity:.48}[data-theme="dark"] .editor-intro:before{opacity:.19}.editor-icon{background:linear-gradient(140deg,#a9b5a1,#677f76)}.palette-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;scroll-margin-top:105px}.image-pane{min-width:0;background:var(--wash)}.colors-pane{min-width:0;background:var(--surface);border-left:1px solid var(--line)}.pane-heading{min-height:58px;padding:17px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:600}.pane-heading label{font-size:11px;color:var(--muted);font-weight:400;display:flex;align-items:center;gap:8px}select{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px}.image-stage{padding:24px;min-height:430px;display:flex;align-items:center;justify-content:center}#dropZone{width:100%;border:1px dashed var(--line);border-radius:8px;padding:86px 20px;text-align:center;cursor:pointer;color:var(--muted);flex-direction:column;align-items:center}#dropZone h2{font-size:26px;line-height:1.3;letter-spacing:-.8px;color:var(--ink);margin:24px 0 15px}#dropZone p,#emptyState p{font-size:12px;line-height:1.8}#previewContainer{width:100%;text-align:center}#previewImg{max-width:100%;max-height:440px;object-fit:contain;border-radius:4px}.palette-content{padding:24px}#emptyState{padding:110px 15px;text-align:center;font-size:17px;color:var(--muted)}#paletteStatus{font-size:12px;line-height:1.7;color:var(--muted);min-height:20px;margin:0 0 18px}#swatchesGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:27px}.swatch{min-width:0;min-height:98px;border:1px solid #0001;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer}.swatch-label{font-size:9px;text-transform:uppercase;letter-spacing:.8px}.swatch-hex{font:13px Consolas,monospace}.css-label{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}#cssOutput{box-sizing:border-box;width:100%;background:var(--wash);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:15px;font:12px/1.7 Consolas,monospace;resize:vertical;margin-bottom:12px}button{cursor:pointer;box-shadow:none}.site-header .theme-choice{width:78px;max-width:78px;margin:0;padding:10px 9px;font-size:11px;flex:none}@media(max-width:800px){.palette-workspace{grid-template-columns:1fr}.colors-pane{border-left:0;border-top:1px solid var(--line)}.image-stage{min-height:300px;padding:18px}#dropZone{padding:50px 15px}#emptyState{padding:45px 10px}.editor-intro:before{background-size:auto 100%;opacity:.26}.editor-toolbar #filename{width:100%}}
#dropZone>svg{display:block;margin:0 auto}
.palette-options{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.palette-options label{font-size:12px;color:var(--muted)}.palette-help{font-size:11px;line-height:1.8;color:var(--muted);margin:14px 0 20px}.color-card{min-width:0}.color-card .swatch{width:100%}.swatch-edit{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);padding:9px 2px}.swatch-edit input{width:30px;height:25px;border:1px solid var(--line);background:var(--surface);padding:2px;border-radius:4px;cursor:pointer}#previewImg{display:block;width:auto;height:auto;margin:auto;max-width:100%;max-height:440px}#previewImg.picking{cursor:crosshair;outline:1px solid var(--line);outline-offset:4px}#pickColor[aria-pressed=true]{background:var(--wash);border-color:#007da5}
.palette-design{margin-top:32px;border:1px solid var(--line);border-radius:10px;padding:28px}.palette-design[hidden]{display:none}.design-heading h2{font-size:30px;letter-spacing:-1px;margin:12px 0}.design-heading p,.contrast-note{font-size:12px;line-height:1.8;color:var(--muted)}.design-grid{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr);gap:32px;margin-top:25px;align-items:start}.design-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px}.design-controls label{font-size:12px;color:var(--muted);min-width:0}.design-controls select{display:block;width:100%;margin-top:8px;font-size:11px}.design-controls>button,.design-controls>label[for=contrastTarget],.contrast-results{grid-column:1/-1}.contrast-results{font-size:12px;line-height:1.7}.contrast-results p{padding:10px 12px;border:1px solid var(--line);border-radius:6px;margin:0 0 9px}.contrast-results [data-result=fail]{border-left:3px solid #ad6059}.contrast-results [data-result=pass]{border-left:3px solid #638977}#design-sample{padding:40px;border-radius:8px;min-height:320px;overflow-wrap:anywhere}.sample-kicker{font-size:10px;letter-spacing:1.6px}#design-sample h3{font-size:36px;line-height:1.1;letter-spacing:-1.3px;margin:25px 0 20px}#design-sample p{font-size:15px;line-height:1.8;margin-bottom:28px;max-width:350px}#sample-action{display:inline-block;padding:12px 18px;border-radius:6px;font-size:14px;font-weight:600}.contrast-note{margin:20px 0 0}.contrast-note a{text-decoration:underline}@media(max-width:800px){.palette-design{padding:20px}.design-grid{grid-template-columns:1fr;gap:20px}#design-sample{padding:25px}#design-sample h3{font-size:30px}}