:root{color-scheme:light;--paper:#e7e8e1;--panel:#f1f2ed;--ink:#242821;--muted:#777d72;--rule:#cdd1c6;--accent:#596b4a;--accent-ink:#fff;--photo-bg:#d5d8cf;--shadow:#20261c10;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);transition:background .25s,color .25s}button,input{font:inherit}button{color:inherit;cursor:pointer}.wrap{width:min(1200px,calc(100% - 56px));margin-inline:auto}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:20px;font-weight:700;letter-spacing:-1.2px;text-decoration:none}.brand-symbol{position:relative;display:flex;align-items:flex-end;gap:3px;height:22px}.brand-symbol i{display:block;width:5px;border-radius:5px 5px 1px 1px;background:var(--accent);transition:height .2s}.brand-symbol i:nth-child(1){height:10px}.brand-symbol i:nth-child(2){height:18px}.brand-symbol i:nth-child(3){height:14px}.top-actions{display:flex;align-items:center;gap:9px}.local-tag{display:flex;align-items:center;gap:8px;margin-right:10px;color:var(--muted);font-size:11px}.local-tag i{width:6px;height:6px;border-radius:50%;background:#57966c}.utility-button{display:grid;place-items:center;min-width:34px;height:34px;padding:0 7px;border:1px solid var(--rule);border-radius:50%;background:transparent;color:var(--ink);font-size:11px;font-weight:700}.utility-button:hover{border-color:var(--accent);color:var(--accent)}.theme-toggle{font-size:16px}.intro{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:end;gap:50px;padding:56px 0 37px}.eyebrow,.column-kicker{display:flex;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:1.3px}.eyebrow-line{width:28px;height:1px;background:var(--rule)}h1,h2,p{margin-top:0}.intro h1{margin:17px 0 13px;font-size:clamp(40px,6vw,68px);font-weight:500;line-height:1.02;letter-spacing:-3.6px}.intro h1 em{color:var(--accent);font-style:normal}.lead{max-width:570px;margin-bottom:0;color:var(--muted);font-size:14px;line-height:1.6}.intro-meta{display:grid;gap:10px;padding-bottom:4px;color:var(--muted);font-size:9px;letter-spacing:.7px}.intro-meta strong{color:var(--ink);font-size:16px;letter-spacing:.2px}.intro-meta strong b{padding:0 8px;color:var(--accent);font-weight:500}.studio{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(360px,.9fr);min-height:510px;border:1px solid var(--rule);background:var(--panel);box-shadow:0 18px 44px var(--shadow)}.image-column,.palette-column{min-width:0;padding:23px 24px 20px}.image-column{border-right:1px solid var(--rule)}.column-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.column-kicker{margin-bottom:5px;font-size:8px;letter-spacing:1.1px}.column-head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.55px}.quiet-button,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 0;border:0;background:transparent;color:var(--accent);font-size:11px;font-weight:600}.quiet-button:hover,.text-button:hover{text-decoration:underline}.quiet-button>span:first-child{font-size:17px;font-weight:400}.photo-stage{position:relative;display:grid;place-items:center;width:100%;height:378px;overflow:hidden;background:var(--photo-bg);transition:background .25s}.photo-stage.drag-over{outline:2px dashed var(--accent);outline-offset:-8px}.photo-stage img{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .2s}.photo-stage img[hidden]{display:none}.photo-shade{position:absolute;inset:55% 0 0;pointer-events:none;background:linear-gradient(transparent,#10150b9c)}.photo-overlay{position:absolute;right:17px;bottom:15px;left:17px;display:flex;justify-content:space-between;gap:12px;color:white;font-size:10px;text-shadow:0 1px 4px #0008}.empty-drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);text-align:center}.empty-drop[hidden]{display:none}.drop-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--rule);border-radius:50%;color:var(--accent);font-size:20px}.empty-drop strong{color:var(--ink);font-size:13px;font-weight:600}.empty-drop span:last-child{font-size:11px}.image-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;color:var(--muted);font-size:10px}.error-message{min-height:13px;margin:5px 0 0;color:#b4493d;font-size:10px}.palette-column{display:flex;flex-direction:column}.palette-head{align-items:flex-end;margin-bottom:13px}.count-control{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:9px;min-width:118px;color:var(--muted);font-size:9px}.count-control output{color:var(--ink);font:600 12px ui-monospace,Consolas,monospace;text-align:right}.count-control input{grid-column:1/-1;width:100%;height:12px;margin:7px 0 0;appearance:none;background:transparent;accent-color:var(--accent)}.count-control input::-webkit-slider-runnable-track{height:2px;background:var(--rule)}.count-control input::-webkit-slider-thumb{width:12px;height:12px;margin-top:-5px;appearance:none;border:2px solid var(--panel);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}.count-control input::-moz-range-track{height:2px;background:var(--rule)}.count-control input::-moz-range-thumb{width:9px;height:9px;border:2px solid var(--panel);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}.palette-list{display:flex;flex:1;flex-direction:column;gap:5px;min-height:300px;margin:0;padding:0;list-style:none}.palette-row{display:grid;grid-template-columns:42px minmax(0,1fr) 45px;align-items:center;gap:10px;min-height:39px;padding:3px 8px 3px 4px;border-bottom:1px solid var(--rule);transition:background .18s}.palette-row:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}.swatch{width:35px;height:30px;border:0;border-radius:2px;box-shadow:inset 0 0 0 1px #00000012;transition:transform .16s}.swatch:hover{transform:scale(1.07)}.color-info{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 6px;min-width:0}.color-name{overflow:hidden;color:var(--ink);font-size:10px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.color-hex{color:var(--muted);font:10px ui-monospace,Consolas,monospace}.color-share{color:var(--muted);font:9px ui-monospace,Consolas,monospace;text-align:right}.color-spectrum{display:flex;height:7px;overflow:hidden;margin:14px 0 16px;border-radius:1px;background:var(--rule)}.color-spectrum i{height:100%;min-width:2px}.palette-actions{display:grid;grid-template-columns:1fr auto;align-items:center;gap:15px}.primary-button{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 12px;border:0;border-radius:3px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:600;transition:filter .15s}.primary-button:hover{filter:brightness(.92)}.primary-button span:last-child{font-size:15px}.export-button{font-size:10px}.apply-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 0 0;border:0;border-top:1px solid var(--rule);background:transparent;color:var(--muted);font-size:10px;text-align:left}.apply-row>span:first-child{display:flex;align-items:center;gap:8px}.apply-mark{width:10px;height:10px;border:1px solid var(--accent);border-radius:50%}.switch{display:flex;align-items:center;width:31px;height:17px;padding:2px;border:1px solid var(--rule);border-radius:20px;transition:background .2s}.switch i{width:11px;height:11px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}.apply-row[aria-pressed="true"] .switch{border-color:var(--accent);background:var(--accent)}.apply-row[aria-pressed="true"] .switch i{transform:translateX(13px);background:white}.apply-row[aria-pressed="true"]{color:var(--ink)}.privacy-line{display:flex;align-items:center;gap:8px;padding:15px 0 22px;color:var(--muted);font-size:10px}.privacy-lock{color:var(--accent);font-size:15px}.privacy-resolution{margin-left:auto}.footer{display:flex;justify-content:space-between;padding:17px 0 25px;border-top:1px solid var(--rule);color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.8px}.empty-drop:not([hidden])~.photo-shade,.empty-drop:not([hidden])~.photo-overlay{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:850px){.intro{grid-template-columns:1fr 160px;gap:25px}.studio{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}.image-column,.palette-column{padding-inline:17px}.photo-stage{height:340px}}
@media(max-width:680px){.wrap{width:calc(100% - 30px)}.topbar{height:63px}.local-tag{margin-right:2px;font-size:9px}.intro{grid-template-columns:1fr;gap:18px;padding:35px 0 24px}.intro h1{font-size:clamp(40px,11vw,56px);letter-spacing:-2.6px}.intro-meta{grid-template-columns:auto auto 1fr;align-items:center;gap:8px;padding:0}.intro-meta strong{font-size:12px}.intro-meta strong b{padding:0 4px}.studio{grid-template-columns:1fr}.image-column{border-right:0;border-bottom:1px solid var(--rule);padding:18px 16px}.palette-column{padding:20px 16px}.photo-stage{height:min(76vw,430px)}.palette-list{min-height:0}.palette-actions{grid-template-columns:1fr auto}.privacy-line{align-items:flex-start;line-height:1.45}.privacy-resolution{max-width:120px;text-align:right}.footer{gap:10px;font-size:7px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--paper:#1c211d;--panel:#252b26;--ink:#eef0e8;--muted:#a5ac9d;--rule:#3b433c;--accent:#a5bb84;--accent-ink:#1c211d;--photo-bg:#111711;--shadow:#0005}}
:root[data-theme="dark"]{color-scheme:dark;--paper:#1c211d;--panel:#252b26;--ink:#eef0e8;--muted:#a5ac9d;--rule:#3b433c;--accent:#a5bb84;--accent-ink:#1c211d;--photo-bg:#111711;--shadow:#0005}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
:root{--surface-tint:var(--paper)}
body{background:color-mix(in srgb,var(--paper) 92%,var(--surface-tint))}
.studio{background:color-mix(in srgb,var(--panel) 92%,var(--surface-tint))}