:root{--sc-black:#0D0D0D;--sc-grey-text:#5A5A5A;--sc-grey-border:#E8E8E8;--sc-grey-bg:#F7F7F7;--sc-white:#FFFFFF;--sc-font:'Plus Jakarta Sans',sans-serif;--sc-mono:'JetBrains Mono',monospace}.sc-page{font-family:var(--sc-font);color:var(--sc-black);-webkit-font-smoothing:antialiased}.sc-bc{max-width:1100px;margin:0 auto 8px;padding:20px 48px 0 0;font-size:13px;color:var(--sc-grey-text);font-family:var(--sc-mono);display:flex;align-items:center;gap:8px}.sc-bc a{color:var(--sc-grey-text);text-decoration:none}.sc-bc a:hover{color:var(--sc-accent)}.sc-bc__sep{color:var(--sc-grey-border)}.sc-hero{max-width:1100px;margin:0 auto;padding:56px 48px 0;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.sc-hero__illu{display:flex;justify-content:center}.sc-hero__illu svg{width:100%;max-width:480px;height:auto}.sc-hero__badge{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--sc-accent) 10%,#fff);color:var(--sc-accent);font-size:11px;font-weight:700;font-family:var(--sc-mono);text-transform:uppercase;letter-spacing:.08em;padding:5px 10px;border-radius:4px;margin-bottom:20px}.sc-hero__badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--sc-accent);animation:sc-pulse 2s ease-in-out infinite}@keyframes sc-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.sc-hero__title{font-size:48px;font-weight:800;letter-spacing:-2px;line-height:1.05;margin-bottom:16px}.sc-hero__highlight{color:var(--sc-accent)}.sc-hero__sub{font-size:16px;color:var(--sc-grey-text);line-height:1.7;max-width:420px;margin-bottom:28px}.sc-hero__sub strong{color:var(--sc-black);font-weight:600}.sc-hero__stats{display:flex;gap:24px}.sc-stat__val{font-size:20px;font-weight:800;letter-spacing:-.5px}.sc-stat__val--p1{color:var(--sc-accent)}.sc-stat__val--p2{color:var(--sc-pole2)}.sc-stat__val--p3{color:var(--sc-pole3)}.sc-stat__label{font-size:12px;font-family:var(--sc-mono);color:var(--sc-grey-text)}.sc-main{max-width:1100px;margin:0 auto;padding:48px 48px 0;display:flex;flex-direction:column;gap:0}.sc-section{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.sc-section__title{font-size:13px;font-weight:700;font-family:var(--sc-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--sc-grey-text);padding-bottom:12px;border-bottom:1px solid var(--sc-grey-border)}.sc-dropzone{border:2px dashed var(--sc-grey-border);border-radius:12px;padding:32px 24px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--sc-white)}.sc-dropzone--over,.sc-dropzone:hover{border-color:var(--sc-accent);background:color-mix(in srgb,var(--sc-accent) 4%,#fff)}.sc-dropzone__input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.sc-dropzone__icon{font-size:32px;margin-bottom:12px}.sc-dropzone__text{font-size:15px;font-weight:600;margin-bottom:4px}.sc-dropzone__sub{font-size:12px;color:var(--sc-grey-text);font-family:var(--sc-mono)}.sc-dropzone__file{display:flex;align-items:center;gap:12px;text-align:left}.sc-dropzone__file-icon{font-size:20px}.sc-dropzone__file-info{flex:1}.sc-dropzone__file-name{font-size:14px;font-weight:600;word-break:break-all}.sc-dropzone__file-size{font-size:12px;font-family:var(--sc-mono);color:var(--sc-grey-text)}.sc-dropzone__file-rm{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--sc-grey-border);background:var(--sc-white);color:var(--sc-grey-text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:1;position:relative}.sc-dropzone__file-rm:hover{border-color:#e53e3e;color:#e53e3e;background:#fef2f2}.sc-field{display:flex;flex-direction:column;gap:6px}.sc-field label{font-size:12px;font-weight:700;font-family:var(--sc-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--sc-black)}.sc-range-row{display:flex;align-items:center;gap:12px}.sc-range{-webkit-appearance:none;flex:1;height:4px;border-radius:2px;background:linear-gradient(to right,var(--sc-accent) 33%,var(--sc-grey-border) 33%);outline:0;cursor:pointer}.sc-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--sc-accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}.sc-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--sc-accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}.sc-range__val{font-family:var(--sc-mono);font-size:22px;font-weight:800;color:var(--sc-accent);min-width:42px;text-align:right}.sc-btn-extract{width:100%;padding:16px 24px;background:var(--sc-accent);color:#fff;border:none;border-radius:8px;font-family:var(--sc-font);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .15s;letter-spacing:-.2px;margin-top:8px;margin-bottom:32px}.sc-btn-extract:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.sc-btn-extract:active:not(:disabled){transform:translateY(0)}.sc-btn-extract:disabled{opacity:.4;cursor:not-allowed}.sc-palette-section{margin-bottom:24px}.sc-palette-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;margin-bottom:8px}.sc-palette-swatch{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .15s}.sc-palette-swatch:hover{transform:translateY(-4px)}.sc-palette-swatch__color{width:80px;height:80px;border-radius:12px;border:2px solid var(--sc-grey-border);transition:border-color .15s,box-shadow .15s}.sc-palette-swatch:hover .sc-palette-swatch__color{border-color:var(--sc-accent);box-shadow:0 4px 16px rgba(0,0,0,.12)}.sc-palette-swatch--copied .sc-palette-swatch__color{border-color:var(--sc-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc-accent) 25%,transparent)}.sc-palette-swatch__hex{font-family:var(--sc-mono);font-size:11px;font-weight:600;color:var(--sc-grey-text);text-transform:uppercase}.sc-palette-hint{font-size:12px;color:var(--sc-grey-text);font-family:var(--sc-mono);line-height:1.5}.sc-export-section{margin-bottom:32px}.sc-export-buttons{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.sc-btn-export{padding:12px 24px;border:none;border-radius:8px;font-family:var(--sc-font);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s}.sc-btn-export:hover{transform:translateY(-1px)}.sc-btn-export:active{transform:translateY(0)}.sc-btn-export--css{background:var(--sc-black);color:#fff}.sc-btn-export--css:hover{background:#333}.sc-btn-export--json{background:var(--sc-grey-bg);color:var(--sc-black);border:1.5px solid var(--sc-grey-border)}.sc-btn-export--json:hover{border-color:#ccc;background:#f0f0f0}.sc-btn-export--copied{background:var(--sc-accent)!important;color:#fff!important;border-color:var(--sc-accent)!important}.sc-btn-reset{padding:12px 24px;background:var(--sc-white);color:#e53e3e;border:1.5px solid #fecaca;border-radius:8px;font-family:var(--sc-font);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;margin-left:auto}.sc-btn-reset:hover{background:#fef2f2;border-color:#e53e3e}.sc-tips{background:var(--sc-grey-bg);border-radius:12px;padding:24px;margin-bottom:0}.sc-tips__title{font-size:12px;font-weight:700;font-family:var(--sc-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--sc-grey-text);margin-bottom:16px}.sc-tips__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sc-tip{display:flex;gap:12px;align-items:flex-start}.sc-tip__num{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;font-family:var(--sc-mono)}.sc-tip__text{font-size:13px;color:var(--sc-grey-text);line-height:1.55}.sc-seo{max-width:1100px;margin:48px auto 0;padding:48px 48px 80px;border-top:1px solid var(--sc-grey-border)}.sc-seo h2{font-size:22px;font-weight:800;letter-spacing:-.8px;margin-bottom:32px}.sc-seo__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.sc-seo__card{padding:24px;border:1.5px solid var(--sc-grey-border);border-radius:12px;transition:border-color .15s}.sc-seo__grid>.sc-seo__card:first-child:hover{border-color:var(--sc-accent)}.sc-seo__grid>.sc-seo__card:nth-child(2):hover{border-color:var(--sc-pole2)}.sc-seo__grid>.sc-seo__card:nth-child(3):hover{border-color:var(--sc-pole3)}.sc-seo__icon{font-size:24px;margin-bottom:12px}.sc-seo__card h3{font-size:15px;font-weight:700;margin-bottom:8px;letter-spacing:-.3px}.sc-seo__card p{font-size:13px;color:var(--sc-grey-text);line-height:1.65}.sc-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--sc-accent);color:#fff;font-family:var(--sc-font);font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.2);z-index:9999;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}.sc-toast--error{background:#e53e3e;box-shadow:0 8px 32px rgba(229,62,62,.3)}.sc-toast--visible{opacity:1;transform:translateX(-50%) translateY(0)}@media (max-width:1080px){.sc-hero{grid-template-columns:1fr}.sc-hero__illu{display:none}}@media (max-width:960px){.sc-hero,.sc-main{padding-left:24px;padding-right:24px}.sc-seo__grid{grid-template-columns:1fr}.sc-seo{padding-left:24px;padding-right:24px}.sc-bc{padding-left:24px;padding-right:24px}.sc-tips__grid{grid-template-columns:1fr}}@media (max-width:640px){.sc-hero{padding:32px 16px 0}.sc-hero__title{font-size:36px;letter-spacing:-1px}.sc-main{padding:32px 16px 0}.sc-seo{padding:32px 16px 48px}.sc-bc{padding:16px 16px 0}.sc-palette-swatch__color{width:60px;height:60px;border-radius:10px}.sc-palette-row{gap:8px}.sc-export-buttons{flex-direction:column}.sc-btn-reset{margin-left:0}}.sc-dropzone{display:block}.sc-dropzone.is-drag{border-color:var(--sc-accent);background:#f7f8fa}.sc-dropzone__file{position:relative;z-index:2}.sc-error{margin-top:12px;padding:12px 16px;border-radius:10px;background:#fef2f2;color:#b91c1c;font-size:14px;font-weight:600}.sc-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start;margin-top:24px}.sc-workspace:has(.sc-stage[style*=none]){grid-template-columns:minmax(280px,560px)}.sc-stage{position:relative;background:repeating-conic-gradient(#f3f3f3 0 25%,#fff 0 50%) 50%/20px 20px;border:1.5px solid #e8e8e8;border-radius:14px;padding:12px}.sc-stage canvas#sc-canvas{display:block;max-width:100%;height:auto;margin:0 auto;cursor:crosshair;border-radius:6px;image-rendering:auto}.sc-stage__hint{margin:10px 4px 0;font-size:13px;color:#6b6b6b}.sc-loupe{display:none;position:absolute;pointer-events:none;z-index:5;background:#0d0d0d;border-radius:12px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.25)}.sc-loupe canvas{display:block;width:110px;height:110px;border-radius:8px;image-rendering:pixelated}.sc-loupe__hex{margin-top:6px;text-align:center;color:#fff;font:700 12px 'JetBrains Mono',monospace}.sc-panel{background:#fff;border:1.5px solid #e8e8e8;border-radius:14px;padding:20px}.sc-current{display:flex;gap:16px;align-items:center;margin-bottom:16px}.sc-current__swatch{width:84px;height:84px;border-radius:14px;border:1.5px solid #e8e8e8;flex-shrink:0}.sc-current__tools{display:flex;flex-direction:column;gap:8px}.sc-native{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;font-size:14px;color:#0d0d0d}.sc-native input[type=color]{width:40px;height:40px;border:1.5px solid #e8e8e8;border-radius:10px;padding:2px;background:#fff;cursor:pointer}.sc-btn,.sc-btn-eyedropper{font:700 14px 'Plus Jakarta Sans',sans-serif;background:#0d0d0d;color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer}.sc-btn--ghost{background:0 0;color:#0d0d0d;border:1.5px solid #e8e8e8}.sc-values{margin:0;display:grid;gap:8px}.sc-values>div{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;background:#f7f8fa;border-radius:10px;padding:8px 10px}.sc-values dt{font:800 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;color:#6b6b6b}.sc-values dd{margin:0;font:600 14px 'JetBrains Mono',monospace;color:#0d0d0d;overflow-wrap:anywhere}.sc-values button{font:700 12px 'Plus Jakarta Sans',sans-serif;background:#fff;border:1.5px solid #e8e8e8;border-radius:8px;padding:6px 10px;cursor:pointer;color:#0d0d0d}.sc-btn--ghost:hover,.sc-values button:hover{border-color:#0d0d0d}.sc-picks-section{margin-top:20px}.sc-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.sc-pick{display:flex;flex-direction:column;align-items:stretch;gap:6px;background:#fff;border:1.5px solid #e8e8e8;border-radius:10px;padding:6px;cursor:pointer}.sc-pick:hover{border-color:#0d0d0d}.sc-pick__swatch{height:40px;border-radius:6px}.sc-pick__hex{font:700 12px 'JetBrains Mono',monospace;color:#0d0d0d;text-align:center}.sc-picks__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.sc-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#0d0d0d;color:#fff;padding:10px 18px;border-radius:10px;font:700 14px 'Plus Jakarta Sans',sans-serif;transition:all .25s ease;z-index:99;pointer-events:none}.sc-toast.is-visible{opacity:1;transform:translate(-50%,0)}@media (max-width:900px){.sc-workspace{grid-template-columns:1fr}}