@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/55c55f0601d81cf3-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/26a46d62cd723877-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/97e0cb1ae144a2a9-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/581909926a08bbc8-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Inter Fallback;src:local("Arial");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.00%;size-adjust:107.12%}.__className_e8ce0c{font-family:Inter,Inter Fallback;font-style:normal}.__variable_e8ce0c{--font-inter:"Inter","Inter Fallback"}:root{--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--line-height-none:1;--line-height-tight:1.2;--line-height-snug:1.4;--line-height-normal:1.5;--letter-spacing-tight:-0.025em;--letter-spacing-wide:0.48px;--padding-input:0 var(--spacing-md);--padding-button:0 var(--spacing-lg);--padding-button-sm:0 var(--spacing-md);--padding-button-lg:0 var(--spacing-xl);--padding-dropdown:0.5rem;--padding-modal:1rem 1.5rem;--padding-notification:var(--spacing-lg) var(--spacing-xl);--color-primary:#0a0a0a;--color-primary-rgb:10,10,10;--color-secondary:#71717a;--color-background:#ffffff;--color-border:#e4e4e7;--color-hover:#f4f4f5;--color-primary-hover:#262626;--color-danger:#ef4444;--color-success:#10b981;--color-warning:#f59e0b;--color-info:#3b82f6;--color-error:#dc2626;--color-error-bg:#fef2f2;--color-text-dark:#000000;--color-text-light:#52525b;--color-surface-light:#fafafa;--color-surface-lighter:#f9f9f9;--color-surface-hover:#e4e4e7;--color-danger-light:#fee2e2;--color-white-transparent:rgba(255,255,255,0.9);--color-shadow-light:rgba(0,0,0,0.1);--color-shadow-medium:rgba(0,0,0,0.12);--color-shadow-heavy:rgba(0,0,0,0.15);--color-overlay:rgba(0,0,0,0.5);--backdrop-blur:4px;--border-radius:6px;--border-radius-sm:4px;--border-radius-lg:8px;--border-radius-full:100%;--transition:all 0.2s ease;--transition-slow:all 0.3s ease;--animation-duration-fast:0.2s;--animation-duration-normal:0.3s;--animation-timing:ease-out;--shadow-focus:0 0 0 2px var(--color-shadow-light);--shadow-dropdown:0 10px 30px var(--color-shadow-medium);--shadow-modal:0 10px 40px var(--color-shadow-heavy);--shadow-button:0 1px 3px var(--color-shadow-light);--shadow-copy:0 4px 12px var(--color-shadow-heavy);--radio-size:16px;--icon-base-size:20px;--icon-small-size:8px;--modal-width:600px;--modal-max-height:80vh;--modal-width-mobile:90%;--notification-offset:2rem;--input-height:36px;--button-height:36px;--button-height-sm:32px;--button-height-lg:44px;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:0.75rem;--spacing-lg:1rem;--spacing-xl:1.5rem;--spacing-2xl:2rem;--spacing-3xl:3rem;--spacing-4xl:4rem;--spacing-5xl:5rem;--spacing-1-5:1.5rem;--gap-xs:0.25rem;--gap-sm:0.5rem;--gap-md:0.75rem;--gap-lg:1rem;--gap-xl:1.5rem;--size-0:0;--size-1:1px;--size-2:2px;--size-4:4px;--size-8:8px;--size-12:12px;--size-16:16px;--size-20:20px;--size-24:24px;--size-32:32px;--size-40:40px;--size-48:48px;--size-56:56px;--size-64:64px;--size-300:300px;--size-max-width:1280px;--font-size-xs:0.625rem;--font-size-sm:0.75rem;--font-size-base:0.875rem;--font-size-lg:1rem;--font-size-xl:1.125rem;--font-size-2xl:1.5rem;--font-size-3xl:1.75rem;--font-size-4xl:2.5rem;--font-size-5xl:3rem;--z-dropdown:100;--z-modal:1000;--z-notification:1000;--z-copy-indicator:999;--z-remove-btn:15;--z-palette-name:10;--z-actions:10;--z-color-hex:1;--color-swatch-min-width:40px;--color-swatch-hover-width:64px;--color-display-height:64px;--color-display-height-mobile:56px;--remove-btn-size:24px;--remove-btn-size-mobile:18px;--icon-size:20px;--icon-size-small:8px;--slider-thumb-size:18px;--slider-height:6px;--slider-border:2px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:var(--color-background);color:var(--color-primary);line-height:var(--line-height-normal);font-size:var(--font-size-base)}.container{max-width:var(--size-max-width);margin:var(--size-0) auto;padding:var(--spacing-5xl)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);height:var(--button-height);padding:var(--padding-button);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);border-radius:var(--border-radius);border:1px solid;cursor:pointer;transition:var(--transition);text-decoration:none;white-space:nowrap;user-select:none}.btn:focus{outline:none;box-shadow:var(--shadow-focus)}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--color-primary);color:var(--color-background);border-color:var(--color-primary)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn-secondary{background:var(--color-background);color:var(--color-primary);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-hover);border-color:var(--color-surface-hover)}.btn-ghost{background:transparent;color:var(--color-secondary);border-color:transparent}.btn-ghost:hover:not(:disabled){background:var(--color-hover);color:var(--color-primary)}.btn-danger{background:var(--color-background);color:var(--color-danger);border-color:var(--color-danger)}.btn-danger:hover:not(:disabled){background:var(--color-danger);color:var(--color-background)}.btn-sm{height:var(--button-height-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm)}.btn-lg{height:var(--button-height-lg);padding:0 var(--spacing-xl);font-size:var(--font-size-lg)}.btn-icon{width:var(--button-height-sm);height:var(--button-height-sm);padding:0;border-radius:var(--border-radius)}.btn-icon svg{width:var(--icon-base-size);height:var(--icon-base-size)}.btn-export,.header .btn-icon{color:var(--color-secondary)}.btn-export{background:var(--color-hover);border-color:var(--color-border)}.btn-export:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-light);border-color:var(--color-surface-hover)}.btn-add{background:var(--color-primary);color:var(--color-background);border-color:var(--color-primary)}.btn-add:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.copy-btn{background:var(--color-primary);color:var(--color-background);border-color:var(--color-primary);width:100%;margin-top:var(--spacing-lg)}.copy-btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.input{height:var(--input-height);padding:0 var(--spacing-md);font-family:var(--font-family);font-size:16px;border:1px solid var(--color-border);border-radius:var(--border-radius);background:var(--color-background);color:var(--color-primary);transition:var(--transition)}@media screen and (-webkit-min-device-pixel-ratio:0){.input:focus{font-size:16px!important}}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-hover)}.input-text{font-family:var(--font-family-mono);width:100px}.input-number{width:100%}.input-select{min-width:140px;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;padding-right:32px}.input-color,.input-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input-color{width:40px;height:40px;padding:0;border-radius:100%;background:none}.input-color::-webkit-color-swatch-wrapper{padding:0}.input-color::-webkit-color-swatch{border:none;border-radius:100%}.input-radio{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer;margin:0}.header{margin-bottom:var(--spacing-3xl)}.header-content{display:flex;align-items:center;gap:var(--gap-md)}.header-text{flex:1}.header h1{margin-bottom:var(--spacing-sm)}.header h1,.page-title{font-size:var(--font-size-4xl);font-weight:var(--font-weight-semibold);color:var(--color-primary);letter-spacing:var(--letter-spacing-tight)}.page-title{cursor:pointer;border-radius:4px;transition:var(--transition);outline:none;border:2px solid transparent;position:relative;z-index:10;width:100%;margin:0;line-height:var(--line-height-tight)}.page-title:hover{background:var(--color-hover)}.page-title.editing,.page-title:focus{outline:none;cursor:text}.page-title.editing[contenteditable=true],.page-title[contenteditable=true].editing,.page-title[contenteditable=true]:focus{width:100%!important;font-size:var(--font-size-4xl)!important;color:var(--color-primary)!important;text-transform:none!important;outline:none!important;box-shadow:none!important}@media (max-width:768px){.page-title.editing[contenteditable=true],.page-title[contenteditable=true].editing,.page-title[contenteditable=true]:focus{font-size:var(--font-size-3xl)!important}}@media (max-width:480px){.page-title.editing[contenteditable=true],.page-title[contenteditable=true].editing,.page-title[contenteditable=true]:focus{font-size:var(--font-size-3xl)!important}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.header p{font-size:var(--font-size-xl);color:var(--color-secondary);font-weight:var(--font-weight-normal)}.header-actions{display:flex;gap:var(--spacing-lg);margin-left:auto}.btn-copy-figma{display:none}@media (min-width:768px){.btn-copy-figma{display:inline-flex}}.dropdown{position:relative}.dropdown-menu{position:absolute;top:var(--button-height);right:0;min-width:200px;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius);box-shadow:var(--shadow-dropdown);padding:.5rem;z-index:var(--z-dropdown)}.dropdown-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:0;background:transparent;color:var(--color-primary);border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition)}.dropdown-item svg{width:var(--icon-size);height:var(--icon-size)}.dropdown-item:hover{background:var(--color-hover)}.dropdown-item.danger{color:var(--color-danger)}.dropdown-item.danger:hover{background:var(--color-danger-light)}.dropdown-separator{height:1px;background:var(--color-border);margin:.25rem 0}.color-set-controls{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:var(--spacing-2xl);flex-wrap:wrap;padding:var(--spacing-2xl);background:var(--color-surface-light);border-radius:var(--border-radius-lg);transition:var(--transition-slow)}.control-group{display:flex;flex-direction:column;gap:.5rem;min-width:108px}.control-group label{font-size:var(--font-size-base);font-weight:500;color:var(--color-primary)}.slider-control{display:flex;align-items:center;gap:.5rem}.input-range{flex:1;height:var(--slider-height);border-radius:3px;background:var(--color-border);outline:none;-webkit-appearance:none;appearance:none}.input-range::-moz-range-thumb,.input-range::-webkit-slider-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:50%;background:var(--color-primary);cursor:pointer;border:var(--slider-border) solid var(--color-background);box-shadow:var(--shadow-button)}.slider-value{min-width:40px;text-align:center;font-weight:500;color:var(--color-primary);font-size:var(--font-size-base)}.control-help{font-size:var(--font-size-sm);color:var(--color-secondary);line-height:1.4;margin-top:2px}.color-input-wrapper{display:flex;gap:.5rem;align-items:center}.color-section{margin-bottom:var(--spacing-3xl);border-radius:var(--border-radius-lg);background:var(--color-background);position:relative}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;gap:.5rem;position:relative;cursor:grab}.section-header:active{cursor:grabbing}.section-header>div:first-child{display:flex;align-items:center;flex:1}.section-header h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-dark);text-transform:capitalize;line-height:var(--line-height-normal);letter-spacing:var(--letter-spacing-wide)}.palette-name{cursor:pointer;border-radius:4px;transition:var(--transition);outline:none;border:2px solid transparent;position:relative;z-index:10;width:100%}.palette-name:hover{background:var(--color-hover)}.palette-name.editing,.palette-name:focus{background:transparent;border-color:transparent;text-transform:none;font-family:inherit}.actions{display:flex;gap:.5rem;position:relative;z-index:10}.color-grid{flex-wrap:nowrap;gap:0;align-items:flex-start;padding:0;border:none;overflow:visible;width:100%;max-width:100%;min-height:100px}.color-grid,.color-swatch{display:flex;background:transparent;position:relative}.color-swatch{flex:1;flex-direction:column;gap:8px;cursor:pointer;transition:var(--transition);flex-shrink:0;min-width:var(--color-swatch-min-width);animation:fadeIn .2s ease}.color-swatch:hover{transform:scale(1.05);z-index:10;border-radius:var(--border-radius)}.color-display{position:relative;height:var(--color-display-height);width:100%;border-radius:0;cursor:pointer;transition:transform .1s ease}.color-display:hover{transform:scale(1.02)}.color-grid .color-swatch:first-child .color-display{border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.color-grid .color-swatch:last-child .color-display{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.color-info{padding:var(--spacing-sm) var(--size-0);background:var(--color-background);border-radius:var(--border-radius);font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-tight);color:var(--color-primary)}.color-contrast,.color-weight{font-weight:500;margin-bottom:.25rem}.color-weight{font-size:var(--font-size-sm);color:var(--color-primary);font-family:var(--font-family-mono)}.color-contrast{font-size:var(--font-size-xs);color:var(--color-secondary)}.color-hex{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--hex-text-color,inherit)!important;font-size:var(--font-size-sm);font-weight:400;font-family:var(--font-family-mono);z-index:var(--z-color-hex);opacity:0;pointer-events:none;transition:opacity .5s ease .5s}.color-swatch:hover .color-hex{opacity:1;pointer-events:none;transition-delay:0s}.copy-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-primary);color:var(--color-background);padding:.25rem .5rem;border-radius:var(--border-radius);font-size:.75rem;font-weight:500;opacity:0;pointer-events:none;transition:var(--transition);z-index:var(--z-copy-indicator);box-shadow:var(--shadow-copy)}.copy-indicator.show{opacity:1}.remove-color-btn{position:absolute;top:8px;right:8px;width:var(--remove-btn-size);height:var(--remove-btn-size);background:var(--color-white-transparent);border:1px solid var(--color-border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:var(--transition);z-index:var(--z-remove-btn)}.color-swatch:hover .remove-color-btn{opacity:1}.remove-color-btn:hover{background:var(--color-danger);color:white;border-color:var(--color-danger)}.notification{position:fixed;top:var(--notification-offset);right:var(--notification-offset);padding:var(--spacing-lg) var(--spacing-xl);border-radius:var(--border-radius);color:var(--color-background);font-weight:500;z-index:var(--z-notification);opacity:0;transform:translateX(100%);transition:var(--transition)}.notification.show{opacity:1;transform:translateX(0)}.notification-success{background:var(--color-success)}.notification-warning{background:var(--color-warning)}.notification-info{background:var(--color-info)}.notification-error{background:var(--color-danger)}.add-color-btn-container{justify-content:center;padding:var(--spacing-lg);background:var(--color-background);border-radius:var(--border-radius);margin-top:var(--spacing-lg)}.add-another-color,.add-color-btn-container{display:flex;align-items:center;border:1px solid var(--color-border)}.add-another-color{gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-hover);border-radius:var(--border-radius);color:var(--color-secondary);cursor:pointer;transition:var(--transition);font-size:var(--font-size-base)}.add-another-color:hover{background:var(--color-border);color:var(--color-primary)}#color-sets-container{margin-bottom:var(--spacing-2xl)}.color-set-wrapper{cursor:grab;transition:var(--transition);border-radius:var(--border-radius);margin-bottom:var(--spacing-lg)}.color-set-wrapper:hover{background:var(--color-hover)}.color-set-wrapper:active{cursor:grabbing}.color-set-wrapper.dragging{opacity:.5;transform:rotate(2deg);z-index:var(--z-dropdown)}.color-set-wrapper.drag-over{background:var(--color-hover);border:2px dashed var(--color-primary);padding:var(--spacing-2xl)}.add-color-set-section{margin-top:var(--spacing-2xl)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;z-index:var(--z-modal)}.modal.active{display:flex}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-overlay);backdrop-filter:blur(var(--backdrop-blur))}.modal-content{position:relative;background:var(--color-background);border-radius:var(--border-radius-lg);border:1px solid var(--color-border);max-width:var(--modal-width);width:var(--modal-width-mobile);max-height:var(--modal-max-height);overflow:hidden;box-shadow:var(--shadow-modal)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--padding-modal);border-bottom:1px solid var(--color-border)}.modal-header h3{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-primary)}.modal-body{padding:var(--spacing-xl)}.export-section{margin-bottom:var(--spacing-1-5)}.export-section:last-child{margin-bottom:0}.export-options{display:flex;gap:.5rem;padding:.25rem;background:var(--color-hover);border-radius:var(--border-radius)}.export-option{flex:1;padding:var(--padding-dropdown) var(--spacing-md);border:none;border-radius:var(--border-radius-sm);background:transparent;color:var(--color-secondary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:var(--transition)}.export-option.active,.export-option:hover{color:var(--color-primary)}.export-option.active{background:var(--color-background);box-shadow:0 1px 3px rgba(0,0,0,.1)}.color-format-options{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg);background:var(--color-surface-lighter);border-radius:var(--border-radius);border:1px solid var(--color-border)}.color-format-options label{font-weight:var(--font-weight-medium);white-space:nowrap}.color-format-options label,.color-format-options select{font-size:var(--font-size-base);color:var(--color-primary)}.color-format-options select{min-width:200px;height:var(--input-height);padding:var(--padding-input);border:1px solid var(--color-border);border-radius:var(--border-radius);background:var(--color-background);transition:var(--transition);cursor:pointer;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;padding-right:32px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-format-options select:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.export-preview{border:1px solid var(--color-border);border-radius:var(--border-radius);overflow:hidden}.export-preview pre{background:var(--color-surface-lighter);padding:var(--spacing-lg);margin:0;font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-normal);overflow-x:auto;max-height:300px;overflow-y:auto;color:var(--color-primary)}.import-options{display:flex;flex-direction:column;gap:.75rem;margin:var(--spacing-1-5) 0}.import-option{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border:1px solid var(--color-border);border-radius:var(--border-radius);background:#f9f9f9;transition:var(--transition);cursor:pointer}.import-option:hover{border-color:var(--color-primary);background:var(--color-hover)}.import-option input[type=radio]{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer;margin:0}.option-content{flex:1}.option-content h4{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-primary)}.option-content p{margin:0;font-size:var(--font-size-sm);color:var(--color-secondary);line-height:var(--line-height-snug)}.modal-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:var(--spacing-1-5);padding-top:1rem;border-top:1px solid var(--color-border)}.color-section.animate{animation:slideIn var(--animation-duration-normal) var(--animation-timing)}@keyframes slideIn{0%{opacity:0;transform:translateY(var(--spacing-2xl))}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--spacing-xs))}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.header{margin-bottom:var(--spacing-xl)}.container{padding:var(--spacing-xl)}.header-content{gap:var(--gap-md);align-items:stretch;flex-wrap:nowrap}.header-text{order:1;width:100%}.header-actions{order:3}.header-content>.btn{order:2;align-self:center;margin:0 auto}.header h1,.page-title{font-size:var(--font-size-3xl);line-height:var(--line-height-tight)}.section-header h2{font-size:var(--font-size-xl);line-height:var(--line-height-tight)}.palette-name{font-size:var(--font-size-lg)}.header-actions{width:100%;display:flex;justify-content:flex-end;gap:var(--gap-sm)}.header-actions .btn{height:var(--button-height-sm);font-size:var(--font-size-sm)}.btn-icon svg{width:var(--icon-base-size);height:var(--icon-base-size)}.header-actions .btn-danger{grid-column:1/-1}.color-set-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);padding:var(--spacing-lg)}.color-set-controls .control-group:first-child{grid-column:1/-1}.control-group{min-width:auto}.color-input-wrapper{justify-content:space-between}.color-input-wrapper .input-text{flex:1;min-width:0}.color-set-controls .input-number,.color-set-controls .input-text{width:100%}.color-grid{flex-direction:column}.color-swatch{flex:none;width:100%;min-width:0;overflow:hidden}.color-display{height:64px}.color-info{position:absolute;inset:var(--size-0);display:flex;align-items:center;justify-content:space-between;padding:var(--size-0) var(--size-16);background:transparent;font-weight:var(--font-weight-semibold);border-radius:var(--size-0);pointer-events:none}.color-grid .color-swatch:first-child .color-display{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-left-radius:var(--size-0);border-bottom-right-radius:var(--size-0)}.color-grid .color-swatch:last-child .color-display{border-top-left-radius:var(--size-0);border-top-right-radius:var(--size-0);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.color-contrast,.color-weight{margin:var(--size-0);font-size:var(--font-size-base);color:inherit!important}.color-weight{font-weight:var(--font-weight-normal)!important;font-family:var(--font-family-mono)!important}.color-contrast{display:none}.color-hex{display:block;margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);font-family:var(--font-family-mono);color:var(--hex-text-color,inherit)!important;opacity:1!important;top:50%!important;left:auto!important;right:var(--spacing-lg);transform:translateY(-50%)!important}.section-header{align-items:center;gap:.5rem}.actions{align-self:flex-end}.color-format-options{flex-direction:column;align-items:stretch;gap:.5rem}.color-format-options select{min-width:auto}.modal-actions{flex-direction:column;gap:.5rem}.modal-actions .btn-primary,.modal-actions .btn-secondary{width:100%}}@media (max-width:480px){.header h1,.page-title{font-size:var(--font-size-3xl)}.section-header h2{font-size:var(--font-size-xl)}.palette-name{font-size:var(--font-size-base)}.header-content>.btn{font-size:var(--font-size-sm);padding:var(--padding-button-sm);min-width:auto}.color-set-controls{display:grid;gap:var(--gap-md);padding:var(--spacing-md)}.color-set-controls .control-group:nth-child(2),.color-set-controls .control-group:nth-child(3),.color-set-controls .control-group:nth-child(4),.color-set-controls .control-group:nth-child(5),.color-set-controls .control-group:nth-child(6),.color-set-controls .control-group:nth-child(7){display:flex;gap:var(--gap-md)}.color-grid{gap:var(--size-0)}.color-display{height:var(--size-56)}.color-contrast,.color-weight{font-size:var(--font-size-sm)}.color-weight{font-family:var(--font-family-mono)}.color-hex{font-size:var(--font-size-sm)}.add-color-set-section .btn{width:100%}.remove-color-btn{width:var(--size-16);height:var(--size-16);top:var(--size-4);right:var(--size-4)}.remove-color-btn svg{width:var(--icon-small-size);height:var(--icon-small-size)}}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading{opacity:.7;pointer-events:none}.btn:focus,.input:focus{outline:none}::selection{background:var(--color-primary);color:var(--color-background)}