*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#fafaf9;--color-surface:#fff;--color-border:#e8e8e6;--color-border-subtle:#f2f2f0;--color-text:#1a1a18;--color-text-secondary:#6b6b68;--color-text-tertiary:#a3a39f;--color-accent:#1a1a18;--color-accent-hover:#333330;--radius-sm:5px;--radius-md:8px;--radius-lg:12px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--font-size-xs:11px;--font-size-sm:13px;--font-size-base:15px;--font-size-lg:18px;--font-size-xl:22px;--font-size-2xl:30px}body{font-family:DM Sans,system-ui,-apple-system,sans-serif;font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.5}.app{min-height:100vh;transition:background-color .9s}.color-strip{z-index:10;background:var(--color-border-subtle);height:5px;display:flex;position:sticky;top:0;overflow:hidden}.color-strip-segment{transform-origin:top;transition:flex .4s}.main{max-width:680px;padding:var(--space-12) var(--space-6) var(--space-16);margin:0 auto}.header{align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-10);display:flex}.logo{font-size:var(--font-size-xl);letter-spacing:-.04em;color:var(--color-text);font-weight:600}.tagline{font-size:var(--font-size-sm);color:var(--color-text-tertiary);font-weight:400}.upload-zone{border:1.5px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-8);cursor:pointer;background:var(--color-surface);-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;min-height:140px;transition:border-color .15s,background-color .15s;display:flex}.upload-zone:hover,.upload-zone--dragging{border-color:var(--color-accent);background-color:var(--color-border-subtle)}.upload-zone--filled{border-style:solid;border-color:var(--color-border);min-height:unset;padding:var(--space-4) var(--space-6)}.upload-zone__prompt{align-items:center;gap:var(--space-2);text-align:center;flex-direction:column;display:flex}.upload-zone__icon{width:36px;height:36px;color:var(--color-text-tertiary);margin-bottom:var(--space-1)}.upload-zone__label{font-size:var(--font-size-base);color:var(--color-text-secondary);font-weight:500}.upload-zone__hint{font-size:var(--font-size-xs);color:var(--color-text-tertiary);letter-spacing:.06em;text-transform:uppercase}.upload-zone__info{align-items:center;gap:var(--space-4);width:100%;display:flex}.upload-zone__file-icon{width:26px;height:26px;color:var(--color-text-secondary);flex-shrink:0}.upload-zone__meta{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.upload-zone__filename{font-size:var(--font-size-sm);color:var(--color-text);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.upload-zone__size{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.upload-zone__change{font-size:var(--font-size-xs);color:var(--color-text-tertiary);white-space:nowrap;margin-left:auto}.results{margin-top:var(--space-6);gap:var(--space-4);flex-direction:column;display:flex}.palette{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.palette__header{padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-border-subtle);justify-content:space-between;align-items:center;display:flex}.palette__title{font-size:var(--font-size-xs);color:var(--color-text-tertiary);letter-spacing:.01em;font-weight:500}.palette__controls{align-items:center;gap:var(--space-4);display:flex}.palette__slider-label{align-items:center;gap:var(--space-3);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}.palette__count{font-variant-numeric:tabular-nums;min-width:48px}.palette__slider{width:90px;accent-color:var(--color-accent);cursor:pointer}.palette__list{padding:var(--space-1) 0;min-height:48px}.palette__loading{padding:var(--space-6) var(--space-5);font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center}.swatch{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);transition:background-color .1s;display:flex}.swatch:hover{background-color:var(--color-border-subtle)}.swatch__dot{border-radius:var(--radius-sm);border:1px solid #00000012;flex-shrink:0;width:30px;height:30px}.swatch__hex{color:var(--color-text);cursor:pointer;padding:3px var(--space-2);border-radius:var(--radius-sm);text-align:left;letter-spacing:.02em;background:0 0;border:1px solid #0000;min-width:76px;font-family:Fira Code,Cascadia Code,Menlo,Courier New,monospace;font-size:12px;font-weight:400;transition:background-color .1s,border-color .1s,color .1s}.swatch__hex:hover{background-color:var(--color-border-subtle);border-color:var(--color-border)}.swatch__hex--copied{color:#16a34a;background-color:#f0fdf4;border-color:#bbf7d0}.swatch__name{font-size:var(--font-size-sm);color:var(--color-text-secondary);flex:1}.swatch__bar-wrap{background:var(--color-border);border-radius:99px;width:56px;height:3px;overflow:hidden}.swatch__bar{background:var(--color-text-tertiary);border-radius:99px;height:100%}.swatch__pct{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:right;font-variant-numeric:tabular-nums;min-width:34px}.swatch__lock{cursor:pointer;color:var(--color-text-tertiary);border-radius:var(--radius-sm);background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:color .1s,background-color .1s,border-color .1s;display:flex}.swatch__lock:hover{background-color:var(--color-border-subtle);border-color:var(--color-border);color:var(--color-text-secondary)}.swatch__lock--active,.swatch__lock--active:hover{color:var(--color-accent)}.export-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.export-panel__tabs{border-bottom:1px solid var(--color-border-subtle);padding:0 var(--space-3);gap:var(--space-1);display:flex}.export-panel__tab{padding:var(--space-3) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-tertiary);cursor:pointer;letter-spacing:.01em;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;font-family:inherit;font-weight:400;transition:color .12s,border-color .12s}.export-panel__tab:hover{color:var(--color-text-secondary)}.export-panel__tab--active{color:var(--color-text);border-bottom-color:var(--color-accent);font-weight:500}.export-panel__code{padding:var(--space-5);color:var(--color-text-secondary);background:var(--color-bg);white-space:pre;border-bottom:1px solid var(--color-border-subtle);max-height:220px;font-family:Fira Code,Cascadia Code,Menlo,Courier New,monospace;font-size:12px;line-height:1.75;overflow:auto}.export-panel__actions{gap:var(--space-2);padding:var(--space-3) var(--space-5);justify-content:flex-end;display:flex}.btn{align-items:center;gap:var(--space-2);padding:6px var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;white-space:nowrap;border:1px solid #0000;font-family:inherit;font-weight:500;line-height:1.4;transition:background-color .1s,color .1s,border-color .1s;display:inline-flex}.btn--primary{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn--primary:hover{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn--secondary{background-color:var(--color-surface);color:var(--color-text-secondary);border-color:var(--color-border)}.btn--secondary:hover{background-color:var(--color-border-subtle);color:var(--color-text)}