@import"https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&display=swap";:root{--bg-dark: #161616;--text-white: #ffffff;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.25rem;--font-xl: 1.5rem;--font-2xl: 2rem;--font-3xl: 3rem;--leading-tight: 1.2;--leading-normal: 1.5;--leading-loose: 1.8}*{margin:0;padding:0;box-sizing:border-box}html{overflow:hidden;height:100%}body{font-family:Elms Sans,sans-serif;font-optical-sizing:auto;font-style:normal;background-color:var(--bg-dark);color:var(--text-white);font-size:var(--font-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;overflow:hidden}#root{height:100%;overflow:hidden}.app-wrapper::-webkit-scrollbar{display:none}.app-wrapper{-ms-overflow-style:none;scrollbar-width:none}.app-wrapper{height:100vh;overflow:hidden}.page-section{height:100vh;width:100%;position:absolute;top:0;left:0;overflow:hidden;transition:opacity .4s ease,visibility .4s ease}.page-section.hidden{opacity:0;visibility:hidden;pointer-events:none}.page-section.visible{opacity:1;visibility:visible;pointer-events:auto}.page-section.landing-page{overflow-y:auto}button,input,select,textarea{font-family:inherit;font-size:inherit}h1{font-size:var(--font-3xl);line-height:var(--leading-tight)}h2{font-size:var(--font-2xl);line-height:var(--leading-tight)}h3{font-size:var(--font-xl);line-height:var(--leading-tight)}small{font-size:var(--font-sm)}button:focus{outline:none}button:focus-visible{outline:2px solid #161616;outline-offset:2px}button{-webkit-user-select:none;user-select:none}.nav-chevron{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:1001;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:8px 16px;border-radius:8px;transition:all .2s ease;opacity:.5}.nav-chevron:hover{opacity:1;background:#ffffff1a}.nav-chevron-label{font-size:11px;font-weight:500;color:#ffffffb3}.nav-chevron-icon{color:#ffffffb3;animation:chevronBounce 2s ease-in-out infinite}.nav-chevron:hover .nav-chevron-icon{animation:none}@keyframes chevronBounce{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.nav-chevron.on-light{opacity:.4}.nav-chevron.on-light:hover{opacity:1;background:#0000000d}.nav-chevron.on-light .nav-chevron-label{color:#00000080}.nav-chevron.on-light .nav-chevron-icon{color:#0006}.nav-chevron.on-light:hover .nav-chevron-label,.nav-chevron.on-light:hover .nav-chevron-icon{color:#000c}.nav-chevron.up .nav-chevron-icon{transform:rotate(180deg)}.nav-chevron.up .nav-chevron-icon{animation:chevronBounceUp 2s ease-in-out infinite}@keyframes chevronBounceUp{0%,to{transform:rotate(180deg) translateY(0)}50%{transform:rotate(180deg) translateY(3px)}}.header{position:fixed;top:20px;left:20px;right:20px;z-index:1000;background:#fff;border-radius:12px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 12px #00000014}.leftSection{display:flex;align-items:center;gap:16px}.logoContainer{display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;padding:6px 10px;margin:-6px -2px;border-radius:8px;transition:background-color .15s ease}.logoContainer:hover{background:#0000000a}.logoMark{display:flex;gap:3px}.logoSwatch{width:6px;height:18px;border-radius:2px;transition:background-color .3s ease}.logoText{font-weight:700;font-size:var(--font-base);color:#161616}.logoGradient{background:linear-gradient(135deg,#6366f1,#f755b9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hint{font-size:var(--font-sm);color:#999;-webkit-user-select:none;user-select:none}.rightSection{display:flex;align-items:center;gap:4px}.iconBtn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;border-radius:10px;cursor:pointer;color:#444;transition:background-color .15s ease,color .15s ease,opacity .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1);outline:none}.iconBtn:hover:not(.disabled){background:#f0f0f0;color:#161616;transform:scale(1.05)}.iconBtn:active:not(.disabled){transform:scale(.95)}.iconBtn.disabled{opacity:.3;-webkit-user-select:none;user-select:none}.iconBtn.active{background:#f0f0f0;color:#161616}.iconBtn:focus-visible{outline:2px solid #161616;outline-offset:2px}.separator{width:1px;height:24px;background:#0000001a;margin:0 8px}.toolbar-btn,.addBtn,.history-close,.palette-item,.modeIconBtn,.modeDropdownItem{outline:none}.toolbar-btn:focus-visible,.addBtn:focus-visible,.history-close:focus-visible,.palette-item:focus-visible,.modeIconBtn:focus-visible,.modeDropdownItem:focus-visible{outline:2px solid currentColor;outline-offset:2px}.bookmark-wrapper{position:relative}.bookmark-tooltip{position:absolute;top:calc(100% + 12px);right:0;background:#161616;color:#fff;border-radius:12px;padding:16px;min-width:220px;box-shadow:0 8px 32px #0003;z-index:1000;animation:tooltipFadeIn .2s ease}.bookmark-tooltip:before{content:"";position:absolute;top:-6px;right:16px;width:12px;height:12px;background:#161616;transform:rotate(45deg);border-radius:2px}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.bookmark-tooltip-content{display:flex;flex-direction:column;gap:8px}.bookmark-tooltip-title{font-size:var(--font-sm);font-weight:600}.bookmark-tooltip-shortcut{display:flex;align-items:center;gap:4px;font-size:var(--font-sm)}.bookmark-tooltip-shortcut kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:#ffffff26;border:1px solid rgba(255,255,255,.2);border-radius:6px;font-family:inherit;font-size:var(--font-xs);font-weight:600}.bookmark-tooltip-hint{font-size:var(--font-xs);color:#fff9;margin-top:4px}.bookmark-tooltip-close{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#ffffff80;font-size:18px;cursor:pointer;border-radius:4px;transition:all .15s ease}.bookmark-tooltip-close:hover{background:#ffffff1a;color:#fff}@media(max-width:600px){.bookmark-tooltip{right:-60px;min-width:200px}.bookmark-tooltip:before{right:76px}}.panel-column{flex:0 0 0px;height:100vh;background:#f8f8f8;overflow:hidden;transition:flex-basis .5s cubic-bezier(.34,1.16,.64,1);position:relative}.panel-inner{height:100%;display:flex;flex-direction:column;padding-top:80px}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(0,0,0,.06);height:56px;flex-shrink:0}.panel-title{display:flex;align-items:center;gap:8px;font-size:var(--font-sm);font-weight:600;color:#161616}.panel-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:8px;cursor:pointer;color:#666;transition:background-color .15s ease,color .15s ease,transform .2s cubic-bezier(.34,1.76,.64,1);flex-shrink:0}.panel-close:hover{background:#0000000f;color:#161616;transform:scale(1.1)}.panel-close:active{transform:scale(.9)}.panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px}.panel-scroll::-webkit-scrollbar{width:4px}.panel-scroll::-webkit-scrollbar-track{background:transparent}.panel-scroll::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.panel-scroll::-webkit-scrollbar-thumb:hover{background:#ccc}.panel-section{margin-bottom:24px}.panel-section:last-child{margin-bottom:0}.panel-label{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-xs);font-weight:600;color:#666;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}.panel-label span{color:#999;font-weight:500;text-transform:none;letter-spacing:0}.panel-list{display:flex;flex-direction:column;gap:6px}.panel-list-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px;background:#fff;border:2px solid transparent;border-radius:10px;cursor:pointer;text-align:left;transition:background-color .15s ease,border-color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}.panel-list-item:hover{transform:scale(1.02)}.panel-list-item:active{transform:scale(.98)}.panel-list-item.selected{border-color:#161616}.panel-list-item-content{display:flex;flex-direction:column;gap:2px}.panel-list-item-title{font-size:var(--font-sm);font-weight:600;color:#161616}.panel-list-item-desc{font-size:var(--font-xs);color:#888}.panel-check{width:8px;height:8px;background:#161616;border-radius:50%;flex-shrink:0}.panel-btn-grid{display:flex;flex-wrap:wrap;gap:6px}.panel-btn{padding:8px 12px;background:#fff;border:2px solid transparent;border-radius:8px;font-size:var(--font-xs);font-weight:500;color:#666;cursor:pointer;transition:all .15s ease}.panel-btn:hover{color:#161616;background:#f0f0f0}.panel-btn.active{border-color:#161616;color:#161616;font-weight:600;background:#fff}.panel-slider{width:100%;height:6px;border-radius:3px;appearance:none;background:#ddd;cursor:pointer;outline:none}.panel-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#161616;cursor:pointer;transition:transform .15s ease}.panel-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.panel-slider-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--font-xs);color:#999}.panel-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:12px;background:#fff;border:2px solid transparent;border-radius:10px;cursor:pointer;font-size:var(--font-sm);font-weight:500;color:#161616;text-align:left;transition:all .15s ease}.panel-toggle:hover{background:#f5f5f5}.panel-toggle.active{border-color:#161616}.panel-toggle-indicator{width:40px;height:22px;background:#ddd;border-radius:11px;position:relative;transition:background-color .2s ease;flex-shrink:0}.panel-toggle-indicator:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px #0003}.panel-toggle.active .panel-toggle-indicator{background:#161616}.panel-toggle.active .panel-toggle-indicator:after{transform:translate(18px)}.panel-hint{font-size:var(--font-xs);color:#888;margin-top:8px;line-height:1.4}.panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:150px;text-align:center;color:#999}.panel-empty p{font-size:var(--font-sm);font-weight:500;color:#666;margin-bottom:4px}.panel-empty span{font-size:var(--font-xs)}.panel-card{position:relative;display:block;padding:0;background:#fff;border:2px solid transparent;border-radius:10px;cursor:pointer;overflow:hidden;transition:border-color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.panel-card:hover{transform:scale(1.03);box-shadow:0 4px 12px #0000001a}.panel-card:active{transform:scale(.98)}.panel-card.current{border-color:#161616}.panel-badge{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:600}.panel-badge.pass{background:#fff;color:#8f8f8f}.panel-badge.fail{background:#fff;color:#161616}.panel-export-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.panel-export-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 12px;background:#fff;border:none;border-radius:12px;cursor:pointer;transition:background-color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.panel-export-btn:hover{transform:scale(1.03);box-shadow:0 4px 12px #00000014}.panel-export-btn:active{transform:scale(.97)}.panel-export-btn.copied{background:#161616;color:#fff}.panel-export-btn-icon{color:#161616;transition:color .15s ease}.panel-export-btn.copied .panel-export-btn-icon{color:#fff}.panel-export-btn-label{font-size:var(--font-sm);font-weight:500;color:#161616;transition:color .15s ease}.panel-export-btn.copied .panel-export-btn-label{color:#fff}.panel-preview{margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,.06)}.panel-preview-colors{display:flex;height:48px;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px #0000001a}.panel-preview-color{flex:1;transition:flex .15s ease}.panel-preview-colors:hover .panel-preview-color:hover{flex:1.5}.panel-preview-hexes{display:flex;margin-top:8px}.panel-preview-hex{flex:1;text-align:center;font-size:9px;font-weight:500;color:#666;font-family:monospace}.panel-contrast-item{display:flex;align-items:center;gap:10px;padding:8px;background:#fff;border-radius:8px}.panel-contrast-swatch{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-sm);flex-shrink:0}.panel-contrast-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.panel-contrast-hex{font-size:var(--font-xs);font-family:monospace;color:#161616}.panel-contrast-ratio{font-size:var(--font-xs);color:#888}.panel-adjacent-item{display:flex;align-items:center;gap:10px;padding:8px;background:#fff;border-radius:8px}.panel-adjacent-swatches{display:flex;border-radius:6px;overflow:hidden;flex-shrink:0}.panel-adjacent-swatches div{width:24px;height:32px}.panel-adjacent-ratio{flex:1;font-size:var(--font-xs);color:#666}@media(max-width:600px){.panel-inner{padding-top:70px}.panel-header{padding:12px;height:48px}}.export-column{flex:0 0 0px;height:100%;background:#f8f8f8;overflow:hidden;transition:flex-basis .4s cubic-bezier(.34,1.36,.64,1);position:relative}.export-column.open{flex:0 0 300px}.export-inner{width:300px;height:100%;display:flex;flex-direction:column;padding-top:80px}.export-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid rgba(0,0,0,.06)}.export-title{font-size:var(--font-base);font-weight:600;color:#161616}.export-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:8px;cursor:pointer;color:#666;transition:background-color .15s ease,color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}.export-close:hover{background:#0000000f;color:#161616;transform:scale(1.1)}.export-close:active{transform:scale(.9)}.export-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px}.export-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.export-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 12px;background:#fff;border:none;border-radius:12px;cursor:pointer;transition:background-color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.export-option:hover{background:#fff;transform:scale(1.03);box-shadow:0 4px 12px #00000014}.export-option:active{transform:scale(.97)}.export-option.copied{background:#161616}.export-option.copied .export-option-icon,.export-option.copied .export-option-label{color:#fff}.export-option-icon{color:#161616;transition:color .15s ease}.export-option-label{font-size:var(--font-sm);font-weight:500;color:#161616;transition:color .15s ease}.export-preview{margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,.06)}.export-preview-label{display:block;font-size:var(--font-xs);font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.export-preview-colors{display:flex;height:60px;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px #0000001a}.export-preview-color{flex:1;transition:flex .15s ease}.export-preview-colors:hover .export-preview-color:hover{flex:1.5}.export-preview-hexes{display:flex;margin-top:8px}.export-preview-hex{flex:1;text-align:center;font-size:var(--font-xs);font-weight:500;color:#666;font-family:monospace}.export-scroll::-webkit-scrollbar{width:4px}.export-scroll::-webkit-scrollbar-track{background:transparent}.export-scroll::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}@media(max-width:600px){.export-column.open{flex:0 0 260px}.export-inner{width:260px}.export-option{padding:16px 10px}}.export-settings-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;margin-bottom:16px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:8px;font-size:var(--font-xs);font-weight:500;color:#666;cursor:pointer;transition:all .15s ease}.export-settings-toggle:hover{background:#f5f5f5;color:#161616}.export-settings-toggle.active{background:#f5f5f5;color:#161616;border-color:#161616}.export-settings-toggle .chevron{margin-left:auto;transition:transform .2s ease}.export-settings-toggle .chevron.open{transform:rotate(180deg)}.export-settings{background:#fff;border-radius:10px;padding:16px;margin-bottom:16px;display:flex;flex-direction:column;gap:16px}.export-setting label{display:block;font-size:var(--font-xs);font-weight:600;color:#666;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.export-setting-options{display:flex;flex-wrap:wrap;gap:6px}.export-setting-preview{display:block;margin-top:6px;font-size:11px;color:#999;font-family:monospace}.panel-export-btn{padding:16px 12px}.panel-export-btn-desc{font-size:10px;color:#999;margin-top:2px;transition:color .15s ease}.panel-export-btn.copied .panel-export-btn-desc{color:#ffffffb3}.bookmark-main{text-align:center;padding:24px 16px;background:#fff;border-radius:12px;margin-bottom:24px}.bookmark-icon-large{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background:#f0f0f0;border-radius:50%;margin-bottom:16px;color:#161616}.bookmark-main h3{font-size:var(--font-lg);font-weight:700;color:#161616;margin:0 0 8px}.bookmark-main p{font-size:var(--font-sm);color:#666;margin:0;line-height:1.5}.bookmark-shortcut-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:#fff;border-radius:12px}.bookmark-keys{display:flex;align-items:center;gap:8px}.bookmark-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;padding:0 12px;background:#161616;color:#fff;border-radius:8px;font-family:inherit;font-size:var(--font-base);font-weight:600;box-shadow:0 4px #000}.bookmark-keys span{font-size:var(--font-lg);color:#999;font-weight:500}.bookmark-shortcut-label{font-size:var(--font-sm);color:#666}.bookmark-url-box{display:flex;align-items:center;gap:8px;padding:12px;background:#fff;border-radius:10px;overflow:hidden}.bookmark-url{flex:1;font-size:11px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:monospace}.bookmark-copy-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#f0f0f0;border:none;border-radius:6px;cursor:pointer;color:#666;transition:all .15s ease}.bookmark-copy-btn:hover,.bookmark-copy-btn.copied{background:#161616;color:#fff}.bookmark-step{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#fff;border-radius:10px}.bookmark-step-num{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#f0f0f0;border-radius:50%;font-size:var(--font-xs);font-weight:700;color:#161616;flex-shrink:0}.bookmark-step span:last-child{font-size:var(--font-sm);color:#666;line-height:1.5;padding-top:2px}.bookmark-tip{padding:16px;background:#161616;color:#fff;border-radius:12px;font-size:var(--font-sm);line-height:1.5}.bookmark-tip strong{display:block;margin-bottom:4px}.landing-content{background:#fff;min-height:100vh;padding:80px 48px 120px;overflow-y:auto}.landing-hero{text-align:center;max-width:800px;margin:64px auto 80px}.landing-hero h1{font-size:clamp(32px,5vw,48px);font-weight:800;color:#161616;margin-bottom:20px;letter-spacing:-.03em}.landing-subtitle{font-size:var(--font-lg);color:#666;line-height:1.6}.landing-guide{margin-bottom:80px}.landing-guide>h2{font-size:var(--font-2xl);font-weight:800;color:#161616;text-align:center;margin-bottom:48px}.guide-step{display:flex;align-items:center;gap:48px;margin-bottom:64px;max-width:1200px;margin-left:auto;margin-right:auto}.guide-step.reverse{flex-direction:row-reverse}.guide-step-content{flex:1;max-width:400px}.guide-step-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#161616;color:#fff;border-radius:50%;font-weight:700;font-size:var(--font-lg);margin-bottom:16px}.guide-step-content h3{font-size:var(--font-xl);font-weight:700;color:#161616;margin-bottom:12px}.guide-step-content p{font-size:var(--font-base);color:#666;line-height:1.7}.guide-step-content kbd{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;background:#f0f0f0;border:1px solid #ddd;border-radius:4px;font-family:inherit;font-size:var(--font-xs);font-weight:600;color:#161616;box-shadow:0 1px #ddd}.guide-step-image{flex:1.5;max-width:700px}.guide-step-image img{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.06)}.landing-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(540px,1fr));gap:20px;margin-bottom:64px;margin-left:256px;margin-right:256px}.landing-feature{padding:32px;background:#f8f8f8;border-radius:16px;transition:transform .2s ease,box-shadow .2s ease}.landing-feature:hover{transform:translateY(-4px);box-shadow:0 12px 32px #00000014}.landing-feature h2{font-size:var(--font-lg);font-weight:700;color:#161616;margin-bottom:12px}.landing-feature p{font-size:var(--font-sm);color:#666;line-height:1.7;margin:0}.landing-shortcuts{margin-bottom:64px;max-width:700px;margin-left:auto;margin-right:auto}.landing-shortcuts h2{font-size:var(--font-xl);font-weight:700;color:#161616;margin-bottom:24px;text-align:center}.shortcuts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.shortcut{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#f8f8f8;border-radius:12px}.shortcut kbd{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:32px;padding:0 10px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;font-family:inherit;font-size:var(--font-xs);font-weight:600;color:#161616;box-shadow:0 2px #e0e0e0}.shortcut span{font-size:var(--font-sm);color:#666}.landing-cta{text-align:center;padding:56px 48px;background:#161616;border-radius:20px;color:#fff;margin-bottom:64px;max-width:700px;margin-left:auto;margin-right:auto}.landing-cta p{font-size:var(--font-lg);margin:0 0 28px;line-height:1.6}.landing-cta kbd{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;background:#ffffff26;border:1px solid rgba(255,255,255,.2);border-radius:6px;font-family:inherit;font-size:var(--font-sm);font-weight:600}.cta-subtext{display:block;margin-top:8px;font-size:var(--font-sm);opacity:.7}.cta-button{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;background:#fff;border:none;border-radius:100px;font-size:var(--font-base);font-weight:600;color:#161616;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.cta-button:hover{transform:scale(1.05);box-shadow:0 8px 24px #0000004d}.cta-button:active{transform:scale(.98)}.landing-footer{text-align:center;padding-bottom:40px}.landing-footer p{margin:0 0 4px;font-size:var(--font-sm);color:#666}.footer-tagline{color:#999!important;font-size:var(--font-xs)!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.guide-step,.guide-step.reverse{flex-direction:column;gap:24px}.guide-step-content{max-width:100%;text-align:center}.guide-step-number{margin-left:auto;margin-right:auto}.guide-step-image{max-width:100%}}@media(max-width:768px){.landing-content{padding:60px 20px 100px}.landing-features,.shortcuts-grid{grid-template-columns:1fr}.landing-cta{padding:40px 24px}}.generator-container{display:flex;width:100%;height:100vh;background:inherit;overflow:hidden}.color-column{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:80px;position:relative;min-width:0;transition:flex .5s cubic-bezier(.34,1.56,.64,1);-webkit-user-select:none;user-select:none}.color-column.dragging{opacity:.5;transform:scale(.98)}.color-column.drag-over{transform:scale(1.02)}.color-column.drag-over:before{content:"";position:absolute;inset:0;background:#ffffff1a;pointer-events:none}.color-toolbar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:4px;opacity:0;pointer-events:none;transition:opacity .2s ease}.color-column:hover .color-toolbar{opacity:1;pointer-events:auto}.color-column:hover .toolbar-btn{animation:toolbarBtnPop .3s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}.color-column:hover .toolbar-btn:nth-child(1){animation-delay:0ms}.color-column:hover .toolbar-btn:nth-child(2){animation-delay:40ms}.color-column:hover .toolbar-btn:nth-child(3){animation-delay:80ms}.color-column:hover .toolbar-btn:nth-child(4){animation-delay:.12s}@keyframes toolbarBtnPop{0%{opacity:0;transform:scale(.5) translateY(10px)}to{opacity:.6;transform:scale(1) translateY(0)}}.toolbar-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:none;border-radius:10px;cursor:pointer;opacity:.6;transition:opacity .15s ease,background-color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}.toolbar-btn:hover{opacity:1!important;background:#ffffff26;transform:scale(1.15)}.toolbar-btn:active{transform:scale(.9);transition:transform .1s ease}.toolbar-btn.active{opacity:1}.drag-handle{cursor:grab}.drag-handle:active{cursor:grabbing}.lock-indicator{position:absolute;bottom:120px;opacity:.5;animation:lockPulse .4s cubic-bezier(.34,1.56,.64,1)}@keyframes lockPulse{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}to{transform:scale(1);opacity:.5}}.color-content{display:flex;flex-direction:column;align-items:center;gap:16px}.color-hex{font-size:var(--font-xl);font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;background:none;border:none;padding:8px 16px;border-radius:8px;transition:background-color .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1);min-width:120px;text-align:center}.color-hex:hover{background-color:#ffffff26;transform:scale(1.08)}.color-hex:active{transform:scale(.95)}.color-hex.copied{animation:copyBounce .4s cubic-bezier(.34,1.56,.64,1)}@keyframes copyBounce{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.addColor{width:80px;margin-left:-40px;margin-right:-40px;z-index:10;display:flex;justify-content:center;align-items:center}.addBtn{transform:scale(.6);opacity:0;width:44px;height:44px;border-radius:50%;border:none;background:#fff;box-shadow:0 2px 10px #00000026;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,box-shadow .2s ease}.addColor:hover .addBtn{opacity:1;transform:scale(1)}.addBtn:hover{box-shadow:0 4px 20px #0003;transform:scale(1.1)!important}.addBtn:active{transform:scale(.9)!important;transition:transform .1s ease}.color-column.color-entering{animation:columnExpand .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes columnExpand{0%{flex:.0001}to{flex:1}}.color-column.color-entering .color-content{animation:contentReveal .4s cubic-bezier(.34,1.56,.64,1) .15s forwards;opacity:0}@keyframes contentReveal{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.color-column.color-entering .color-hex{animation:hexPop .35s cubic-bezier(.34,1.56,.64,1) .3s forwards;opacity:0}@keyframes hexPop{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.color-column.color-removing{animation:columnCollapse .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes columnCollapse{0%{flex:1;opacity:1}to{flex:.0001;opacity:0}}.color-column.reordering{animation:reorderBounce .4s cubic-bezier(.34,1.56,.64,1)}@keyframes reorderBounce{0%{transform:scale(.95)}50%{transform:scale(1.02)}to{transform:scale(1)}}