*{margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1,"liga" 1;background:#fff;color:#1f2937;font-family:SF Pro Display,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;letter-spacing:-.01em}.app{display:flex;flex-direction:column}.app-header{-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);background:#ffffff05;border-bottom:1px solid #ffffff0f;box-shadow:0 1px 0 #ffffff05,0 8px 32px #0006;color:#fff}.app-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fff,#e0e0e0);-webkit-background-clip:text;background-clip:text;margin-bottom:6px}.app-header p{color:#ffffffa6}.app-main{flex:1 1;padding:48px 24px;width:100%}.controls{-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);background:#ffffff05;border:1px solid #ffffff0f;border-radius:16px;box-shadow:0 8px 32px #0000004d,inset 0 1px 0 #ffffff08;margin-bottom:48px;padding:24px}.color-wheel-container{align-items:center;margin-bottom:48px;min-height:500px}.color-wheel{align-items:flex-start;display:flex;gap:40px}.color-wheel canvas{border-radius:50%;box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff0f;filter:drop-shadow(0 0 20px rgba(255,255,255,.02))}.segment-details{-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);background:#ffffff08;border:1px solid #ffffff14;border-radius:16px;box-shadow:0 4px 24px #0003,inset 0 1px 0 #ffffff0a;min-width:320px;padding:24px}.segment-details h4{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fff,#e0e0e0);-webkit-background-clip:text;background-clip:text;color:#fff;font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}.marker-info{display:flex;flex-direction:column;gap:8px}.color-swatch{align-self:flex-start;box-shadow:0 4px 16px #0000004d,0 0 0 1px #ffffff0f;filter:drop-shadow(0 0 8px rgba(255,255,255,.02))}.marker-info p{color:#ffffffa6;font-size:14px;font-weight:400;letter-spacing:-.01em;margin:0}.marker-info strong{color:#fff;font-weight:600}.theory-selector{grid-gap:40px;align-items:start;display:grid;gap:40px;grid-template-columns:1fr 1fr}.theory-controls{display:flex;flex-direction:column;gap:20px}.theory-controls label{color:#fff;font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}.theory-controls input,.theory-controls select{-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);background:#ffffff0a;border:1px solid #ffffff1f;border-radius:12px;color:#fff;font-size:14px;font-weight:400;padding:12px 16px;transition:all .25s cubic-bezier(.4,0,.2,1)}.theory-controls input:focus,.theory-controls select:focus{background:#ffffff0f;border-color:#007aff;box-shadow:0 0 0 3px #007aff26;outline:none}.theory-controls select option{background:#1a1a1a;color:#fff}.theory-info{-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);background:#007aff0f;border:1px solid #007aff1f;border-radius:16px;box-shadow:0 4px 24px #007aff14;padding:20px}.theory-info h4{color:#007aff;font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}.theory-info p{color:#ffffffbf;font-size:.9rem;line-height:1.4;margin:0}.database-upload{margin:0 auto;max-width:600px}.upload-area{background:#fff;border:2px dashed #ced4da;border-radius:12px;cursor:pointer;padding:3rem;text-align:center;transition:all .3s ease}.upload-area.drag-active,.upload-area:hover{background:#f8f9ff;border-color:#667eea}.upload-content{align-items:center;display:flex;flex-direction:column;gap:1rem}.upload-icon{font-size:3rem}.upload-content h3{color:#495057;margin:0}.upload-content p{color:#6c757d;margin:0}.supported-formats{font-size:.9rem;font-style:italic}.upload-button{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:6px;font-size:1rem;padding:.75rem 2rem;transition:transform .2s ease}.upload-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.upload-instructions{background:#fff;border:1px solid #dee2e6;border-radius:8px;margin-top:2rem;padding:1.5rem}.upload-instructions h4{color:#495057;margin-bottom:.5rem}.upload-instructions ul{margin:.5rem 0;padding-left:1.5rem}.upload-instructions li{color:#6c757d;margin-bottom:.25rem}.wheel-stats{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;padding:1.5rem}.wheel-stats h3{color:#495057;margin-bottom:1rem}.wheel-stats p{color:#6c757d;font-size:1.1rem;margin:.5rem 0}.loading-spinner{height:200px}.spinner{border:4px solid #f3f3f3;border-top-color:#667eea;height:50px;width:50px}.marker-details-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.marker-details-modal{background:#fff;border-radius:12px;box-shadow:0 10px 25px #0003;max-height:80vh;max-width:500px;overflow-y:auto;padding:2rem;width:90%}.marker-details-header{align-items:center;border-bottom:1px solid #dee2e6;display:flex;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem}.marker-details-header h3{color:#495057;margin:0}.close-button{align-items:center;background:none;border:none;border-radius:50%;color:#6c757d;cursor:pointer;display:flex;font-size:1.5rem;height:30px;justify-content:center;padding:0;transition:background-color .2s;width:30px}.close-button:hover{background-color:#f8f9fa}.marker-details-content{display:flex;flex-direction:column;gap:1.5rem}.marker-color-display{display:flex;justify-content:center}.large-color-swatch{box-shadow:0 2px 8px #00000026}.marker-info-grid{grid-gap:1rem;display:grid;gap:1rem}.info-item{align-items:center;background:#f8f9fa;border-radius:6px;display:flex;justify-content:space-between;padding:.75rem}.info-item label{color:#495057;font-weight:600}.info-item span{color:#6c757d;font-family:Monaco,Menlo,Ubuntu Mono,monospace}@media (max-width:768px){.app-header{padding:1.5rem 1rem}.app-header h1{font-size:2rem}.app-main{padding:1rem}.color-wheel{align-items:center;flex-direction:column}.theory-selector{gap:1rem;grid-template-columns:1fr}.segment-details{min-width:0;min-width:auto;width:100%}.upload-area{padding:2rem 1rem}.marker-details-modal{padding:1.5rem;width:95%}.info-item{align-items:stretch;flex-direction:column;gap:.5rem}}.color-column{font-size:14px!important;line-height:1.2!important;word-break:break-word!important}div,h1,h2,h3,h4,h5,h6,p,span{max-width:100%;overflow-wrap:break-word}[data-swipe-handler=active]{-webkit-touch-callout:none!important;touch-action:none!important;-webkit-user-select:none!important;user-select:none!important}.color-column{flex:1 0 auto;max-height:none;min-height:0}.color-column div,.color-column p,.color-column span{background-color:initial;border-radius:0;color:inherit;display:block;font-weight:600;margin:0;max-width:100%;padding:0;text-shadow:none}*{max-width:100vw!important}body,html{margin:0!important;overflow-x:hidden!important;padding:0!important;width:100vw!important}@media (max-width:768px){.clickable,a,button,input[type=button],input[type=submit]{min-height:44px;min-width:44px;padding:12px}.marker-grid{grid-gap:12px;padding:12px}.marker-card{padding:16px;touch-action:manipulation}body{font-size:16px}h1{font-size:24px}h2{font-size:20px}h3{font-size:18px}input,select,textarea{border-radius:8px;font-size:16px;padding:12px}.toolbar{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:100}.modal{-webkit-overflow-scrolling:touch;margin:16px;max-height:calc(100vh - 32px);overflow-y:auto}.swipe-indicator{background:#0003;border-radius:50%;color:#fff;opacity:.7;padding:8px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s ease}.swipe-indicator.left{left:12px}.swipe-indicator.right{right:12px}img{height:auto;max-width:100%}.scrollable{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.app-container{overflow-x:hidden;width:100%}form{display:flex;flex-direction:column;gap:16px}.palette-columns{-webkit-touch-callout:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}.loading{align-items:center;display:flex;justify-content:center;padding:40px}.color-swatch{border-radius:8px;box-shadow:0 2px 8px #0000001a;transition:transform .2s ease}.color-swatch:active{transform:scale(.95)}}@media (max-width:768px) and (orientation:landscape){.toolbar{padding:8px}.palette-columns{height:calc(100vh - 60px)}}@media (prefers-contrast:high){button{border:2px solid}.modal{border:2px solid #000}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-color-scheme:dark){:root{--bg:#1a1a1a;--fg:#fff;--card-bg:#2a2a2a;--border:#3a3a3a}body{background:var(--bg);color:var(--fg)}.card,.modal{background:var(--card-bg);border-color:var(--border)}}.nav{border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a;position:sticky;top:0;transition:all .3s ease;z-index:1000}.nav,.nav--scrolled{background:#fff!important}.nav--scrolled{box-shadow:0 2px 15px #0000001a}.nav--palette{border-bottom-color:#ff6b6b;box-shadow:0 2px 15px #ff6b6b26}.nav__container{flex-wrap:nowrap;gap:24px;justify-content:space-between;margin:0 auto;max-width:1400px;min-height:72px;padding:0 24px}.nav-brand,.nav__container{align-items:center;display:flex}.nav-brand{color:#1f2937!important;cursor:pointer;flex-shrink:0;gap:12px;text-decoration:none;transition:all .2s ease}.nav-brand:hover{text-decoration:none;transform:translateY(-1px)}.nav-brand--back:hover,.nav-brand:hover{color:#ff6b6b!important}.nav-brand__icon{font-size:28px;line-height:1}.nav-brand__content{display:flex;flex-direction:column;gap:2px}.nav-brand__text{color:#ff6b6b!important;font-family:SF Pro Display,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2}.nav-brand__subtitle{color:#6b7280!important;font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1}.nav-palette-controls{flex:1 1;flex-wrap:nowrap;gap:12px;justify-content:center;padding:8px 0}.nav-base-color,.nav-palette-controls{align-items:center;display:flex;min-width:0}.nav-base-color{background:#f8fafc!important;border:1px solid #e2e8f0;border-radius:8px;color:#475569!important;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-size:14px;font-weight:500;gap:8px;padding:8px 12px;transition:all .2s ease}.nav-base-color:hover{background:#f1f5f9!important;border-color:#cbd5e1;transform:translateY(-1px)}.nav-base-color__preview{border:1px solid #0000001a;border-radius:4px;flex-shrink:0;height:16px;width:16px}.nav-base-color__text{color:#475569!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-size:14px!important;font-weight:500!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-select{appearance:none;background:#fff!important;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;border:1px solid #e2e8f0;border-radius:8px;color:#475569!important;cursor:pointer;font-size:14px;font-weight:500;min-width:140px;padding:8px 32px 8px 12px;transition:all .2s ease}.nav-select:hover{background-color:#f8fafc!important;border-color:#cbd5e1}.nav-select:focus{background-color:#fff!important;border-color:#ff6b6b;box-shadow:0 0 0 3px #ff6b6b1a;color:#475569!important;outline:none}.nav-toggle{background:#fff!important;border:1px solid #e2e8f0;border-radius:8px;color:#475569!important;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .2s ease;white-space:nowrap}.nav-toggle:hover{background:#f8fafc!important;border-color:#cbd5e1}.nav-toggle--active{background:#fef2f2!important;border-color:#fecaca;color:#dc2626!important}.nav-actions{align-items:center;display:flex;flex-shrink:0;gap:16px;min-width:0}.nav-actions__buttons,.nav-actions__dropdown,.nav-actions__stats{align-items:center;display:flex;flex:0 0 auto}.nav-actions__stats{color:#475569!important;font-size:14px;font-weight:500;gap:12px;padding:0}.nav-actions__stats .nav-stats{font-size:14px;gap:10px}.nav-actions__buttons{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.nav-actions__buttons .nav-btn{background:#fff!important;border:1px solid #e2e8f0!important;border-radius:10px;box-shadow:0 2px 6px #0f172a14!important;color:#1f2937!important;font-weight:500;padding:8px 16px;transition:box-shadow .2s ease,transform .2s ease}.nav-actions__buttons .nav-btn:hover{border-color:#d1d5db!important;box-shadow:0 6px 14px #0f172a1f!important;color:#ff6b6b!important;transform:translateY(-1px)}.nav-actions__dropdown{align-items:center;display:flex}.nav-actions__dropdown .nav-dropdown__trigger{background:#ff6b6b!important;border-radius:10px;box-shadow:0 6px 16px #ff6b6b38!important;color:#fff!important;font-weight:600;padding:9px 16px}.nav-actions__dropdown .nav-dropdown__trigger:hover{background:#ff4f4f!important}.nav--collection .nav__container{gap:28px}.nav--collection .nav-actions{flex-wrap:nowrap;gap:18px;justify-content:flex-end;margin-left:auto}.nav-stats{align-items:center;color:#6b7280!important;display:flex;font-size:14px;gap:8px;white-space:nowrap}.nav-stats--loading{animation:pulse 1.5s ease-in-out infinite;opacity:.6}.nav-stats__item{color:#6b7280!important;font-weight:500}.nav-stats__item strong{color:#374151!important;font-weight:600}.nav-stats__separator{color:#d1d5db!important;font-weight:700}.nav-btn{align-items:center;border:1px solid;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;text-decoration:none;transition:all .2s ease;white-space:nowrap}.nav .nav-btn.nav-btn--primary,.nav-btn.nav-btn--primary{background:none!important;border:none!important;color:#475569!important}.nav .nav-btn.nav-btn--primary:hover,.nav-btn.nav-btn--primary:hover{background:#fef2f2!important;border:none!important;box-shadow:none!important;color:#ff6b6b!important;text-decoration:none;transform:translateY(-1px)}.nav .nav-btn.nav-btn--secondary,.nav-btn.nav-btn--secondary{background:none!important;border:none!important;color:#475569!important}.nav .nav-btn.nav-btn--secondary:hover,.nav-btn.nav-btn--secondary:hover{background:#fef2f2!important;border:none!important;color:#ff6b6b!important;text-decoration:none;transform:translateY(-1px)}.nav-link{border-radius:8px;color:#475569!important;font-size:14px;font-weight:500;padding:8px 16px;text-decoration:none;transition:all .2s ease}.nav-link:hover{background:#fef2f2!important;color:#ff6b6b!important;text-decoration:none}.nav-dropdown{position:relative}.nav-dropdown__trigger{align-items:center;background:#ff6b6b!important;border:none;border-radius:8px;color:#fff!important;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.nav-dropdown__trigger:hover{background:#ff5252!important;color:#fff!important}.nav-dropdown__arrow{font-size:12px;transition:transform .2s ease}.nav-dropdown__arrow--open{transform:rotate(180deg)}.nav-dropdown__menu{background:#fff!important;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 40px #00000026;min-width:280px;opacity:0;overflow:hidden;position:absolute;right:0;top:100%;transform:translateY(-12px);transition:all .25s ease;visibility:hidden;z-index:1001}.nav-dropdown__menu--open{opacity:1;transform:translateY(0);visibility:visible}.nav-dropdown__link{border-bottom:1px solid #f3f4f6;color:#374151!important;display:block;font-size:14px;font-weight:500;padding:12px 20px;text-decoration:none;transition:all .2s ease}.nav-dropdown__link:last-child{border-bottom:none}.nav-dropdown__link:hover{background:#fef2f2!important;color:#ff6b6b!important;text-decoration:none;transform:translateX(4px)}.nav-dropdown__divider{background:#e5e7eb;height:1px;margin:8px 0}@media (max-width:1200px){.nav__container{gap:16px;padding:0 20px}.nav-palette-controls{gap:8px}.nav-actions{gap:12px}}@media (max-width:1100px){.nav__container{gap:12px}.nav-base-color,.nav-select,.nav-toggle{font-size:13px;padding:6px 10px}.nav-select{min-width:120px;padding-right:28px}.nav-stats{font-size:12px}}@media (max-width:992px){.nav__container{flex-wrap:nowrap;gap:10px;min-height:64px;padding:0 16px}.nav-palette-controls{flex-shrink:1;gap:6px;min-width:0}.nav-base-color,.nav-select,.nav-toggle{align-items:center;box-sizing:border-box;display:flex;font-size:13px;height:36px;padding:6px 8px}.nav-select{min-width:110px;padding-right:26px}.nav-base-color__text{display:none}.nav-brand__text{font-size:20px}.nav-brand__icon{font-size:24px}.nav-brand__subtitle,.nav-stats{font-size:12px}.nav-stats{gap:6px}.nav-actions{gap:8px}}@media (max-width:860px){.nav__container{gap:8px;min-height:62px}.nav-palette-controls{gap:5px}.nav-base-color,.nav-select,.nav-toggle{align-items:center;box-sizing:border-box;display:flex;font-size:12px;height:32px;padding:5px 7px}.nav-select{min-width:100px;padding-right:24px}.nav-stats{font-size:11px}.nav-btn{font-size:12px;padding:6px 10px}}@media (max-width:768px){.nav__container{flex-wrap:wrap;gap:4px;min-height:56px;padding:0 12px}.nav-brand{flex-shrink:0;order:1}.nav-brand__text{font-size:16px}.nav-brand__icon{font-size:20px}.nav-brand__subtitle{font-size:10px}.nav-actions{flex-shrink:0;gap:4px;order:2}.nav-palette-controls{flex-basis:100%;flex-wrap:nowrap;gap:4px;justify-content:flex-start;order:3;overflow-x:auto;padding:12px 0 0}.nav-palette-controls>*{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;height:32px;justify-content:center;min-width:85px}.nav-base-color{height:32px;min-width:45px;padding:6px}.nav-base-color__text{display:none}.nav-select{min-width:90px;padding:6px 20px 6px 8px}.nav-select,.nav-toggle{font-size:11px;height:32px}.nav-toggle{min-width:75px;padding:6px 8px}.nav-stats{font-size:10px;gap:3px}.nav-btn,.nav-dropdown__trigger{font-size:11px;padding:4px 8px}.nav-dropdown__menu{min-width:220px;right:-12px}}@media (max-width:480px){.nav__container{gap:3px;min-height:52px;padding:0 8px}.nav-brand__text{font-size:15px}.nav-brand__icon{font-size:18px}.nav-brand__subtitle{display:none}.nav-palette-controls{flex-wrap:nowrap;gap:3px;overflow-x:auto;padding:10px 0 0}.nav-base-color{justify-content:center;min-width:40px;padding:5px 6px}.nav-base-color,.nav-select{align-items:center;box-sizing:border-box;display:flex;font-size:11px;height:30px}.nav-select{background-position:right 4px center;background-size:12px;min-width:80px;padding:5px 20px 5px 6px}.nav-toggle{align-items:center;box-sizing:border-box;display:flex;font-size:10px;height:30px;justify-content:center;min-width:65px;padding:5px 6px}.nav-actions{gap:3px}.nav-stats{font-size:9px;gap:2px}.nav-btn{font-size:10px;padding:3px 6px}.nav-dropdown__trigger{font-size:10px;padding:3px 8px}.nav-dropdown__menu{min-width:180px;right:-8px}.nav-dropdown__link{font-size:11px;padding:6px 12px}}@media (max-width:360px){.nav__container{gap:2px;min-height:48px;padding:0 6px}.nav-brand__text{font-size:14px}.nav-brand__icon{font-size:16px}.nav-palette-controls{flex-wrap:nowrap;gap:2px;overflow-x:auto;padding:8px 0 0}.nav-base-color{justify-content:center;min-width:35px;padding:4px}.nav-base-color,.nav-select{align-items:center;box-sizing:border-box;display:flex;font-size:10px;height:28px}.nav-select{background-size:10px;min-width:70px;padding:4px 18px 4px 4px}.nav-toggle{align-items:center;box-sizing:border-box;display:flex;font-size:9px;height:28px;justify-content:center;min-width:55px;padding:4px}.nav-btn{font-size:9px;padding:2px 4px}.nav-dropdown__trigger{font-size:9px;padding:2px 6px}.nav-stats{font-size:8px;gap:1px}}@media (max-width:680px){.nav--palette .nav__container{align-items:stretch;flex-direction:column;gap:12px;justify-content:center}.nav--palette .nav__container>*{width:100%}.nav--palette .nav-brand{justify-content:flex-start}.nav--palette .nav-actions{flex-wrap:wrap;gap:8px;justify-content:flex-start;order:3}.nav--palette .nav-actions>*{flex:0 1 auto}.nav--palette .nav-palette-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;order:2;overflow:visible;padding:0;width:100%}.nav--palette .nav-palette-controls>*{border-radius:10px;flex-basis:calc(50% - 10px);flex-grow:1;flex-shrink:1;height:44px;justify-content:center;min-width:140px}.nav--palette .nav-base-color,.nav--palette .nav-select,.nav--palette .nav-toggle{font-size:14px;padding:10px 12px}.nav--palette .nav-base-color{gap:10px;justify-content:flex-start}.nav--palette .nav-base-color__preview{height:18px;width:18px}.nav--palette .nav-base-color__text{display:inline;font-size:14px!important}.nav--palette .nav-toggle{line-height:1.2;white-space:normal}}@media (max-width:480px){.nav--palette .nav-palette-controls>*{flex:1 1 100%;min-width:0}.nav--palette .nav-base-color,.nav--palette .nav-toggle{justify-content:center}.nav--palette .nav-base-color{justify-content:flex-start}}@media (max-width:1200px){.nav--collection .nav__container{gap:24px}.nav--collection .nav-actions{flex-wrap:wrap;gap:14px}}@media (max-width:900px){.nav--collection .nav__container{align-items:flex-start;flex-wrap:wrap;gap:16px}.nav--collection .nav-actions{align-items:center;justify-content:space-between;margin-left:0;width:100%}.nav--collection .nav-actions__stats{order:1}.nav--collection .nav-actions__buttons{order:2}.nav--collection .nav-actions__dropdown{order:3}}@media (max-width:720px){.nav--collection .nav__container{align-items:stretch;gap:14px}.nav--collection .nav-actions{align-items:center;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:2px 0}.nav--collection .nav-actions__stats{flex:1 1 100%;justify-content:center;order:1}.nav--collection .nav-actions__buttons{flex:1 1 100%;gap:8px;justify-content:center;order:2}.nav--collection .nav-actions__buttons .nav-btn{flex:1 1 160px;justify-content:center}.nav--collection .nav-actions__dropdown{flex:1 1 100%;justify-content:center;order:3}}@media (max-width:540px){.nav--collection .nav-actions__stats{font-size:12px}.nav--collection .nav-actions__buttons{gap:6px}.nav--collection .nav-actions__buttons .nav-btn{flex-basis:calc(50% - 6px);flex-grow:1;flex-shrink:1;font-size:13px;padding:8px 12px}.nav--collection .nav-actions__dropdown .nav-dropdown__trigger{justify-content:center;width:100%}}*{color-scheme:light!important}.nav-brand:focus,.nav-btn:focus,.nav-dropdown__trigger:focus,.nav-select:focus,.nav-toggle:focus{outline:2px solid #ff6b6b;outline-offset:2px}@media print{.nav{display:none!important}}@media (prefers-color-scheme:dark){.nav{border-bottom-color:#e5e7eb!important}.nav,.nav--scrolled{background:#fff!important}.nav-brand{color:#1f2937!important}.nav-brand__text{color:#ff6b6b!important}.nav-brand__subtitle{color:#6b7280!important}.nav-base-color{background:#f8fafc!important}.nav-base-color,.nav-select,.nav-toggle{border-color:#e2e8f0!important;color:#475569!important}.nav-btn--secondary,.nav-select,.nav-toggle{background:#fff!important}.nav-btn--secondary{border-color:#e2e8f0!important;color:#1f2937!important}.nav-dropdown__menu{background:#fff!important;border-color:#e5e7eb!important}.nav-dropdown__link{color:#374151!important}.nav-dropdown__link:hover{background:#fef2f2!important;color:#ff6b6b!important}.nav-stats,.nav-stats__item{color:#6b7280!important}.nav-stats__item strong{color:#374151!important}}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1 1}.app{font-feature-settings:"kern" 1,"liga" 1;background:#fff;color:#1f2937;font-family:SF Pro Display,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;letter-spacing:-.02em;line-height:1.4;min-height:100vh;overflow-x:hidden;width:100vw}@media (max-width:768px){.app{width:100vw!important}.app,.app-main{max-width:100vw!important;overflow-x:hidden!important}.app-main{margin-top:0!important;padding:16px 12px 32px!important}.header-info{flex-wrap:wrap!important;max-width:100vw!important}}*{box-sizing:border-box}@keyframes anime-bounce{0%,20%,50%,80%,to{transform:translateY(0) rotate(-1deg)}40%{transform:translateY(-5px) rotate(-1deg)}60%{transform:translateY(-3px) rotate(-1deg)}}.app-header{background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;padding:28px 0;position:sticky;text-align:center;top:0;z-index:100}.app-header h1{color:#1f2937;font-size:36px;font-weight:600;letter-spacing:-.025em;line-height:1.1;margin:0 0 6px}.header-info{align-items:center;display:flex;gap:20px;justify-content:center;margin-top:8px}.app-header p{color:#6b7280;font-size:15px;font-weight:400;letter-spacing:-.01em;line-height:1.5;margin:0}.change-database-btn{background:#f9fafb;border:1px solid #d1d5db;border-radius:8px;color:#374151;cursor:pointer;font-size:13px;font-weight:500;padding:8px 16px;transition:all .2s ease}.change-database-btn:hover{background:#f3f4f6;border-color:#9ca3af;color:#1f2937;transform:translateY(-1px)}.app-main{margin:0 auto;max-width:1400px;padding:24px 24px 48px}.tab-navigation{-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);background:#ffffff08;border:1px solid #ffffff14;border-radius:14px;box-shadow:0 4px 24px #00000026,inset 0 1px 0 #ffffff0a;display:flex;gap:0;justify-content:center;margin-bottom:56px;margin-left:auto;margin-right:auto;padding:4px;width:fit-content}.tab-button{background:#0000;border:none;border-radius:10px;color:#ffffffa6;cursor:pointer;font-size:14px;font-weight:500;letter-spacing:-.01em;min-width:80px;padding:12px 20px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap}.tab-button:hover{background:#ffffff0f;color:#ffffffd9;transform:translateY(-1px)}.tab-button.active{background:linear-gradient(135deg,#007aff,#5856d6);box-shadow:0 4px 16px #007aff4d,inset 0 1px 0 #fff3;color:#fff;font-weight:600;transform:translateY(-1px)}.controls{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-bottom:56px}.color-wheel-container{display:flex;justify-content:center;margin-bottom:56px;padding:48px}.color-wheel-container,.wheel-stats{-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);background:#ffffff05;border:1px solid #ffffff0f;border-radius:20px;box-shadow:0 8px 32px #0000004d,inset 0 1px 0 #ffffff08}.wheel-stats{padding:32px;text-align:center}.wheel-stats h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fff,#e0e0e0);-webkit-background-clip:text;background-clip:text;color:#fff;font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0 0 16px}.wheel-stats p{color:#ffffffa6;font-size:14px;font-weight:400;letter-spacing:-.01em;line-height:1.5;margin:6px 0}.loading-spinner{align-items:center;color:#ffffff80;display:flex;flex-direction:column;justify-content:center;padding:80px 20px}.spinner{animation:spin 1.2s linear infinite;border:2px solid #ffffff1a;border-top-color:#007aff;filter:drop-shadow(0 0 8px rgba(0,122,255,.3));height:28px;margin-bottom:20px;width:28px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:1068px){.app-header h1{font-size:32px}.app-main{padding:40px 20px}.color-wheel-container{padding:36px}}@media (max-width:734px){.app-header{padding:20px 0}.app-header h1{font-size:28px}.app-header p{font-size:14px}.app-main{padding:32px 16px}.tab-navigation{flex-direction:column;margin-bottom:40px;max-width:280px;width:100%}.tab-button{font-size:15px;padding:14px 20px;text-align:center;width:100%}.controls{align-items:center;flex-direction:column;gap:16px;margin-bottom:40px}.color-wheel-container{margin-bottom:40px}.color-wheel-container,.wheel-stats{border-radius:16px;padding:24px}.wheel-stats h3{font-size:18px}.wheel-stats p{font-size:13px}}select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;padding-right:32px!important}select option{background-color:#fff!important;color:#374151!important;font-size:.875rem;padding:8px 12px}select option:hover{background-color:#f3f4f6!important}select option:checked,select option:focus{background-color:#3b82f6!important;color:#fff!important}select,select:focus{color:#374151!important}select:focus{box-shadow:0 0 0 3px #3b82f61a}select::-ms-expand{display:none}select:-moz-focusring{color:#0000;text-shadow:0 0 0 #374151}select option::-webkit-appearance,select::-webkit-appearance{-webkit-appearance:none}.adsbygoogle{display:block!important;margin:20px auto;text-align:center;transition:opacity .3s ease-in-out}.ad-container{align-items:center;display:flex;justify-content:center;margin:20px auto;max-width:728px;min-height:250px;position:relative}.ad-container.header-ad{max-width:100%;min-height:90px}.ad-container.sidebar-ad{max-width:300px;min-height:250px}.ad-container.footer-ad{max-width:100%;min-height:90px}.ad-container.mobile-ad{max-width:320px;min-height:50px}.ad-container:before{animation:adLoad 1s linear infinite;border:3px solid #f3f3f3;border-radius:50%;border-top-color:#ff6b6b;content:"";height:40px;left:50%;opacity:.3;position:absolute;top:50%;transform:translate(-50%,-50%);width:40px;z-index:-1}.ad-container.loaded:before{display:none}@keyframes adLoad{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}@media (max-width:768px){.ad-container,.adsbygoogle{margin:15px auto}.ad-container{min-height:200px}.ad-container.footer-ad,.ad-container.header-ad{min-height:70px}.ad-container.mobile-ad{max-width:320px;min-height:50px}}@media (max-width:480px){.ad-container{margin:10px auto;min-height:150px}.ad-container.footer-ad,.ad-container.header-ad{min-height:60px}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.adsbygoogle{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}.adsbygoogle[data-adsbygoogle-status=filled]{opacity:1}.adsbygoogle:not([data-adsbygoogle-status]){opacity:.7}.native-ad{background:#f8f9fa80;border:1px solid #e5e7ebcc;border-radius:8px;margin:30px auto;max-width:600px;padding:20px}.native-ad:before{color:#9ca3af;content:"Sponsored Content";display:block;font-size:12px;margin-bottom:10px;text-align:center}.auto-ads-container{position:relative;z-index:1}.adsbygoogle[data-ad-status=unfilled]{display:none!important}@media (max-width:768px) and (orientation:portrait){.ad-container{margin:10px auto;padding:0 10px}}@media (max-width:768px) and (orientation:landscape){.ad-container{margin:15px auto;min-height:100px}}@media (prefers-color-scheme:dark){.ad-container:before{border-color:#ff6b6b #4b5563 #4b5563}.native-ad{background:#1f293780;border-color:#4b5563cc}}.adsbygoogle{outline:none}.adsbygoogle:focus-visible{outline:2px solid #ff6b6b;outline-offset:2px}@media print{.ad-container,.adsbygoogle,.native-ad{display:none!important}}.base-marker-card{transition:transform .2s ease,box-shadow .2s ease!important;will-change:transform,box-shadow}.base-marker-card:not(.base-marker-card--current):hover{box-shadow:0 4px 12px #00000026!important;transform:scale(1.02)!important}.base-marker-card--current{pointer-events:none}.base-marker-card:not(:hover){box-shadow:none!important;transform:scale(1)!important}@media (hover:none){.base-marker-card:hover{box-shadow:none!important;transform:scale(1)!important}}.image-color-extractor{background:#fff;color:#1f2937;font-family:SF Pro Display,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;height:calc(100vh - 81px);max-width:100vw;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.back-button{align-items:center;background:#f9fafb;border:1px solid #d1d5db;border-radius:10px;color:#374151;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;margin:20px 24px 0;padding:12px 20px;text-decoration:none;transition:all .2s ease}.back-button:hover{background:#f3f4f6;border-color:#9ca3af;color:#1f2937;transform:translateY(-1px)}.extractor-header{background:#fff;padding:48px 24px;text-align:center}.extractor-header h2{color:#1f2937;font-size:32px;font-weight:600;letter-spacing:-.025em;margin:0 0 12px}.extractor-header p{color:#6b7280;font-size:16px;line-height:1.6;margin:0 auto;max-width:600px}.upload-section{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px}.file-input{display:none}.upload-button{align-items:center;background:linear-gradient(135deg,#007aff,#5856d6);border:none;border-radius:12px;box-shadow:0 4px 16px #007aff4d;color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;gap:10px;justify-content:center;letter-spacing:-.01em;min-height:52px;padding:16px 32px;text-decoration:none;transition:all .3s ease}.upload-button:hover{box-shadow:0 8px 25px #007aff66;transform:translateY(-2px)}.reset-button{align-items:center;background:#f9fafb;border:1px solid #d1d5db;border-radius:12px;color:#6b7280;cursor:pointer;display:inline-flex;font-size:16px;font-weight:500;gap:8px;justify-content:center;min-height:52px;padding:16px 24px;transition:all .2s ease}.reset-button:hover{background:#f3f4f6;border-color:#9ca3af;color:#374151;transform:translateY(-1px)}.image-container{background:#fff;border:1px solid #0000000f;border-radius:20px;box-shadow:0 8px 32px #0000001a;margin:32px 24px;overflow:hidden}.image-wrapper{align-items:center;background:#f8f9fa;display:flex;justify-content:center;min-height:400px;padding:24px;position:relative}.uploaded-image{border-radius:12px;box-shadow:0 4px 20px #0000001a;display:block;height:auto;max-height:600px;max-width:100%;width:auto}.uploaded-image.pick-mode{-webkit-touch-callout:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.loading-overlay{align-items:center;background:#fffffff2;border-radius:12px;bottom:0;color:#374151;display:flex;font-size:16px;font-weight:500;justify-content:center;left:0;position:absolute;right:0;top:0}.image-controls{grid-gap:32px;background:#f8f9fa;border-top:1px solid #e5e7eb;display:grid;gap:32px;grid-template-columns:1fr 1fr;padding:32px}.extraction-controls h3,.pick-controls h3{color:#1f2937;font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 20px}.control-group{margin-bottom:20px}.control-group label{color:#374151;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.control-group select{background:#fff;border:1px solid #d1d5db;border-radius:8px;color:#1f2937;font-size:14px;padding:12px 16px;transition:all .2s ease;width:100%}.control-group select:focus{border-color:#007aff;box-shadow:0 0 0 3px #007aff1a;outline:none}.control-group input[type=range]{appearance:none;background:#e5e7eb;border-radius:3px;height:6px;outline:none;width:100%}.control-group input[type=range]::-webkit-slider-thumb{appearance:none;background:#007aff;border-radius:50%;box-shadow:0 2px 8px #007aff4d;cursor:pointer;height:20px;width:20px}.control-group input[type=range]::-moz-range-thumb{background:#007aff;border:none;border-radius:50%;box-shadow:0 2px 8px #007aff4d;cursor:pointer;height:20px;width:20px}.control-group span{color:#007aff;font-weight:600}.extract-button{background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:12px;box-shadow:0 4px 16px #10b9814d;color:#fff;cursor:pointer;font-size:16px;font-weight:600;letter-spacing:-.01em;padding:16px;transition:all .3s ease;width:100%}.extract-button:hover:not(:disabled){box-shadow:0 8px 25px #10b98166;transform:translateY(-2px)}.extract-button:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.pick-button{background:#6b7280;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;letter-spacing:-.01em;padding:16px;transition:all .3s ease;width:100%}.pick-button.active{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 16px #10b9814d}.pick-button:hover{box-shadow:0 4px 16px #6b72804d;transform:translateY(-2px)}.pick-button.active:hover{box-shadow:0 8px 25px #10b98166}.pick-instructions{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #bbf7d0;border-radius:12px;box-shadow:0 2px 8px #10b9811a;color:#166534;font-size:14px;line-height:1.5;margin-top:16px;padding:18px;transition:all .2s ease}.pick-instructions:hover{border-color:#10b981;box-shadow:0 4px 12px #10b98126}.image-stats{background:#fff;border-top:1px solid #e5e7eb;padding:32px}.image-stats h3{color:#1f2937;font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 20px}.stats-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.stat{align-items:center;background:#f8f9fa;border-left:4px solid #007aff;border-radius:12px;display:flex;justify-content:space-between;padding:16px 20px}.stat-label{color:#374151;font-weight:500}.stat span:last-child{color:#1f2937;font-weight:600}.extracted-palette{background:#fff;border:1px solid #0000000f;border-radius:20px;box-shadow:0 8px 32px #0000001a;margin:32px 24px;padding:32px}.extracted-palette h3{color:#1f2937;font-size:24px;font-weight:600;letter-spacing:-.025em;margin:0 0 12px}.method-info{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:24px}.palette-colors{grid-gap:20px;display:grid;gap:20px;margin-bottom:32px}.color-match{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:20px;transition:all .2s ease}.color-match:hover{border-color:#d1d5db;box-shadow:0 4px 20px #0000001a;transform:translateY(-2px)}.color-comparison{align-items:center;display:flex;gap:20px}.matched-color{align-items:center;display:flex;flex:1 1;gap:16px}.color-swatch{border:2px solid #0000001a;border-radius:12px;box-shadow:0 4px 12px #00000026;height:64px;transition:transform .2s ease;width:64px}.color-swatch:hover{transform:scale(1.05)}.color-info{flex:1 1}.color-label{color:#1f2937;font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}.color-values{color:#6b7280;font-family:SF Mono,Monaco,Consolas,monospace;font-size:13px;font-weight:500}.match-quality{color:#10b981;font-size:12px;font-weight:600;letter-spacing:.02em;margin-top:6px;text-transform:uppercase}@media (max-width:1024px) and (orientation:portrait),(max-width:768px){.image-color-extractor{height:auto;min-height:calc(100vh - 81px);overflow-x:hidden}.back-button{margin:12px 16px 0;padding:12px 16px}.extractor-header{padding:32px 16px}.extractor-header h2{font-size:24px}.extractor-header p{font-size:14px}.upload-section{flex-direction:column;gap:12px}.reset-button,.upload-button{max-width:280px;width:100%}.image-container{border-radius:16px;margin:20px 16px}.image-wrapper{min-height:300px;padding:16px}.uploaded-image{max-height:400px}.image-controls{gap:24px;grid-template-columns:1fr;padding:24px 16px}.color-comparison{flex-direction:column;gap:16px;text-align:center}.stats-grid{gap:12px;grid-template-columns:1fr}.extracted-palette{border-radius:16px;margin:20px 16px;padding:24px 16px}.extracted-palette h3{font-size:20px}.palette-colors{gap:16px}.color-match{border-radius:12px;padding:16px}.color-swatch{height:56px;width:56px}.reset-button,.upload-button,button{min-height:48px;min-width:48px;touch-action:manipulation}input,select,textarea{font-size:16px;touch-action:manipulation}.uploaded-image{-webkit-touch-callout:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}.uploaded-image.pick-mode{cursor:crosshair;touch-action:none}.image-wrapper{touch-action:manipulation}.image-wrapper .uploaded-image.pick-mode{touch-action:none}}@keyframes magnifier-appear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.magnifier-glass{animation:magnifier-appear .2s ease-out}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.magnifier-glass canvas{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated}}@media (min-width:769px) and (max-width:1024px){.image-controls{gap:24px;grid-template-columns:1fr 1fr}.uploaded-image{max-height:500px}.control-group{margin-bottom:16px}}@media (max-width:480px){.extractor-header{padding:20px 12px}.extractor-header h2{font-size:22px}.image-controls{gap:20px;padding:20px 12px}.extracted-palette{margin:16px 12px;padding:20px 12px}}@media (max-width:768px){.image-wrapper{position:relative}.magnifier-glass{max-height:100px!important;max-width:100px!important}.marker-info-overlay{pointer-events:none;z-index:1000}.magnifier-glass,[style*="position: absolute"][style*="zIndex: 1001"]{z-index:999!important}}@media (max-width:480px){.magnifier-glass{max-height:80px!important;max-width:80px!important}[style*="position: absolute"][style*="zIndex: 1001"],[style*="position: absolute"][style*="zIndex: 999"]{min-distance-from-edges:30px}.color-swatch{height:52px;width:52px}.uploaded-image{max-height:350px}}@media (max-height:480px) and (orientation:landscape){.image-wrapper{min-height:250px}.uploaded-image{max-height:300px}.image-controls{padding:16px}}.landing-shell{background-color:#f8fafc;display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh}.landing-header{background-color:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px 0 #0000001a;padding:16px 20px;text-align:center}.landing-title{color:#ff6b6b;font-size:2rem;font-weight:700;margin:0 0 8px}.landing-subtitle{color:#64748b;font-size:14px;line-height:1.3;margin:0 auto;max-width:600px}.landing-main{align-items:center;display:flex;justify-content:center;min-height:0;overflow:auto;padding:0 12px}.landing-content{display:flex;height:100%;max-width:800px;width:100%}.landing-card{background-color:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px -2px #0000001a;display:flex;flex-direction:column;justify-content:center;padding:16px}.card-header{margin-bottom:12px;text-align:center}.card-title{color:#1f2937;font-size:1.25rem;font-weight:600;margin:0 0 8px}.card-subtitle{color:#6b7280;font-size:14px;line-height:1.4;margin:0}.option-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:1fr 1fr 1fr;margin-bottom:10px}.option-card{background-color:#fff;border-radius:8px;cursor:pointer;padding:16px 12px;text-align:center;transition:all .3s ease}.option-card .option-icon{font-size:2.5rem;margin-bottom:12px}.option-heading{color:#1f2937;font-size:1.125rem;font-weight:600;margin:0 0 6px}.option-text{color:#6b7280;font-size:.875rem;line-height:1.4;margin:0 0 12px}.option-meta-green{color:#10b981;font-size:.625rem;font-weight:500}.option-meta-gray{color:#9ca3af;font-size:.625rem}.option-card.demo{background-color:#ecfdf5;border:2px solid #10b981}.option-card.demo:hover{background-color:#d1fae5;border-color:#059669}.option-card.upload{background-color:#fafafa;border:2px dashed #d1d5db;padding:20px 16px}.option-card.upload:hover{background-color:#f0f9ff;border-color:#3b82f6}.option-card.create{background-color:#fff;border:2px solid #e5e7eb;padding:20px 16px}.option-card.create:hover{background-color:#f0fdf4;border-color:#10b981}.upload-status{align-items:center;border-radius:8px;display:flex;font-size:1rem;font-weight:500;gap:12px;justify-content:center;margin-top:16px;padding:16px;text-align:center}.upload-status.success{background-color:#f0f9ff;border:1px solid #bfdbfe;color:#1d4ed8}.upload-status.error{background-color:#fef2f2;border:1px solid #fecaca;color:#dc2626}.spinner{animation:spin 1s linear infinite;border:2px solid #e5e7eb;border-radius:50%;border-top-color:#3b82f6;display:inline-block;flex-shrink:0;height:20px;width:20px}.create-card{background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 10px 25px -5px #0000001a,0 4px 6px -2px #0000000d;padding:48px;text-align:center}.create-icon{font-size:4rem;margin-bottom:24px}.create-title{color:#1f2937;font-size:2rem;font-weight:600;margin-bottom:16px}.create-desc{color:#6b7280;font-size:1.125rem;line-height:1.75;margin:0 auto 32px;max-width:500px}.feature-box{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:32px;padding:24px;text-align:left}.feature-title{color:#1f2937;font-size:1.125rem;font-weight:600;margin-bottom:12px}.feature-list{color:#4b5563;font-size:.875rem;line-height:1.5;margin:0;padding-left:20px}.action-buttons{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.btn-disabled{align-items:center;background-color:#9ca3af;border:none;border-radius:8px;color:#fff;cursor:not-allowed;display:flex;gap:8px;opacity:.6}.btn-disabled,.btn-outline{font-size:1rem;font-weight:500;padding:12px 24px}.btn-outline{background-color:#fff;border:1px solid #d1d5db;border-radius:8px;color:#6b7280;cursor:pointer;transition:all .2s ease}.btn-outline:hover{background-color:#f9fafb}.landing-footer{background-color:#fff;border-top:1px solid #e5e7eb;color:#9ca3af;font-size:.8rem;padding:10px;text-align:center}.visually-hidden{display:none}@media (max-width:768px){.landing-header{padding:12px}.landing-title{font-size:1.5rem;margin:0 0 6px}.landing-subtitle{font-size:13px}.landing-main{padding:16px 8px}.option-grid{gap:8px;grid-template-columns:1fr;margin-bottom:8px}.option-card{padding:12px 8px}.option-card .option-icon{font-size:2rem;margin-bottom:8px}}@media (max-width:640px){.landing-header{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.landing-card{margin:auto 0;min-height:200px}.landing-card,.option-card{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}}@media (min-width:992px){.landing-shell{grid-template-rows:auto 1fr auto}.landing-main{align-items:center;padding:0 12px}.landing-content{align-items:stretch;max-width:1100px}.landing-card,.landing-content{display:flex;height:100%;width:100%}.landing-card{flex-direction:column;justify-content:flex-start}}.step2-help-title{align-items:center;color:#1f2937;display:flex;font-size:.875rem;font-weight:600;gap:6px;margin-bottom:6px}.step2-help-text{color:#4b5563;font-size:.8rem;line-height:1.4}.step2-help-text .step2-label{font-size:.8rem;font-weight:600}.collection-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.marker-card{backface-visibility:hidden;border:1px solid #0000001a;border-radius:8px;contain:paint;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;min-height:120px;overflow:hidden;padding:16px;transform:translateZ(0);transition:transform .2s ease,box-shadow .2s ease;will-change:transform,box-shadow}.marker-card:hover{box-shadow:0 4px 12px #00000026;transform:scale(1.02)}.marker-code{margin-bottom:4px}.marker-code,.marker-new-code{font-size:1.125rem;font-weight:700}.marker-new-code{margin-left:4px}.marker-name{font-size:.875rem;margin-bottom:8px}.marker-brand{font-size:.75rem;margin-bottom:2px;opacity:.7}.marker-hex{font-family:monospace;font-size:.75rem;opacity:.8}.palette-container{height:100%;max-width:100vw;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.pv-chip,.pv-icon-btn{align-items:center;background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box;color:#374151;display:inline-flex;height:36px;justify-content:center;min-width:36px;padding:0 12px;transition:all .2s ease}.pv-chip:hover,.pv-icon-btn:hover{background-color:#e5e7eb}.pv-chip:active,.pv-icon-btn:active{transform:scale(.98)}.pv-icon-btn span{font-size:18px;line-height:1}.pv-chip{font-family:monospace;font-size:.8125rem;gap:6px;letter-spacing:.5px}@media (max-width:768px){.pv-chip,.pv-icon-btn{font-size:.75rem;height:32px;min-width:32px;padding:0 10px}.pv-chip{gap:4px}.palette-container{margin:0;padding:0}.palette-visualization{margin:0;max-width:100vw;overflow-x:hidden;overflow-y:hidden;padding:0;width:100vw}.palette-section{box-sizing:border-box;max-width:100vw;padding:10px;width:100vw}.center-wheel-container{margin:0 auto!important;max-width:calc(100vw - 20px)!important;padding:10px!important;width:calc(100vw - 20px)!important}.svg-container,svg{height:auto!important;max-width:100%!important;width:100%!important}.swipe-indicator{background:#00000080;border-radius:5px;color:#fff;font-size:14px;padding:10px;pointer-events:none;position:fixed;top:50%;transform:translateY(-50%);z-index:1000}.swipe-indicator.left{left:10px}.swipe-indicator.right{right:10px}*{max-width:100vw!important}.mobile-gesture-indicator{bottom:10px!important;position:fixed!important;right:10px!important}.filter-instructions{box-sizing:border-box!important;margin:10px!important;max-width:calc(100vw - 20px)!important;padding:10px!important;width:calc(100vw - 20px)!important}}.palette-section:active{opacity:.9}.article-page{font-feature-settings:"kern" 1,"liga" 1;background:#fff;color:#1f2937;font-family:SF Pro Display,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;letter-spacing:-.02em;line-height:1.4;margin:0 auto;max-width:900px;padding:32px 20px}.article-hero{background:linear-gradient(135deg,#3498db14,#ff6b6b14);border:1px solid #e5e7eb;border-radius:12px;margin-bottom:28px;padding:20px}.article-hero .hero-kicker{background:#f3f4f6;border-radius:999px;color:#6b7280;display:inline-block;font-size:12px;letter-spacing:.08em;margin-bottom:10px;padding:6px 10px}.article-hero .hero-title{color:#1f2937;font-size:clamp(28px,5vw,40px);font-weight:600;line-height:1.1;margin:6px 0 8px}.article-hero .hero-subtitle{color:#6b7280;font-size:clamp(14px,1.6vw,16px)}.article-header{border-bottom:1px solid #e5e7eb;margin-bottom:48px;padding-bottom:28px;text-align:center}.article-header h1{color:#1f2937;font-size:clamp(28px,4.5vw,36px);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin-bottom:16px}.article-subtitle{color:#6b7280;font-size:15px;font-weight:400;letter-spacing:-.01em;line-height:1.5;margin:0 auto;max-width:700px}.article-content{font-size:16px;line-height:1.6}.article-layout{grid-gap:28px;display:grid;gap:28px;grid-template-columns:1fr}@media (min-width:1200px){.article-layout{gap:40px;grid-template-columns:1fr 300px}}.article-main{min-width:0}.article-toc{align-self:start;height:fit-content;position:sticky;top:16px}.toc-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:14px}.toc-title{color:#374151;font-size:13px;font-weight:600;margin:0 0 10px}.toc-list{list-style:none;margin:0;padding:0}.toc-list li{margin:6px 0}.toc-link{color:#2563eb;font-size:14px;text-decoration:none}.toc-link:hover{text-decoration:underline}.article-content h2{border-left:3px solid #ff6b6b;color:#1f2937;font-size:clamp(24px,3.8vw,28px);font-weight:600;letter-spacing:-.025em;margin-bottom:20px;margin-top:48px;padding-left:16px}.article-content h3{color:#374151;font-size:clamp(20px,3.2vw,22px);font-weight:600;letter-spacing:-.02em;margin-bottom:16px;margin-top:32px}.article-content h4{color:#1f2937;font-size:clamp(16px,2.6vw,18px);font-weight:600;letter-spacing:-.01em;margin-bottom:12px;margin-top:24px}.article-content p{margin-bottom:20px;text-align:left}.article-content ol,.article-content ul{margin-bottom:25px;padding-left:30px}.article-content li{margin-bottom:8px}.feature-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:32px 0}.feature-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:24px;transition:all .2s ease}.feature-card .feature-header{align-items:center;display:flex;gap:10px;margin-bottom:10px}.feature-icon{align-items:center;background:#3498db;border-radius:50%;color:#fff;display:inline-flex;flex:0 0 28px;height:28px;justify-content:center;width:28px}.feature-icon svg{display:block;height:16px;width:16px}.feature-card:hover{border-color:#ff6b6b;box-shadow:0 10px 25px -5px #0000001a,0 4px 6px -2px #0000000d;transform:translateY(-2px)}.feature-card h4{color:#ff6b6b;font-weight:600;letter-spacing:-.01em;margin-bottom:12px;margin-top:0}.process-list{counter-reset:step-counter;list-style:none;padding-left:0;position:relative}.process-list:after{background:#e5e7eb;bottom:8px;content:"";left:17.5px;position:absolute;top:18px;width:2px}.process-list li{counter-increment:step-counter;margin-bottom:25px;padding-left:60px;position:relative}.process-list li:before{align-items:center;background:#3498db;border-radius:50%;color:#fff;content:counter(step-counter);display:flex;font-size:16px;font-weight:700;height:35px;justify-content:center;left:0;position:absolute;top:0;width:35px;z-index:1}.color-model-section{background:#f8f9fa;border-left:5px solid #e74c3c;border-radius:8px;margin:30px 0;padding:30px}.harmony-section{background:linear-gradient(135deg,#f8f9fa,#fff);border:1px solid #ecf0f1;border-radius:10px;margin:40px 0;padding:30px}.harmony-explanation{margin-top:20px}.comparison-table{border-collapse:collapse;font-size:16px;margin:25px 0;width:100%}.comparison-table td,.comparison-table th{border:1px solid #ddd;padding:12px 15px;text-align:left}.comparison-table th{background:#34495e;color:#fff;font-weight:600}.comparison-table tr:nth-child(2n){background:#f8f9fa}.article-content h5{color:#374151;font-size:clamp(15px,2.2vw,16px);font-weight:600;letter-spacing:-.005em;margin-bottom:10px;margin-top:20px}.scenario-grid,.tips-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:30px 0}.work-impact h3{margin-bottom:12px;margin-top:28px}.callout+.work-impact h3{margin-top:20px}.benefit-items{list-style:none;margin:0;padding:0}.benefit-items li{align-items:flex-start;display:flex;gap:10px;margin:10px 0}.benefit-check{align-items:center;background:#16a085;border-radius:50%;color:#fff;display:inline-flex;flex:0 0 20px;font-size:12px;height:20px;justify-content:center;line-height:1;width:20px}.benefit-text{flex:1 1}.scenario,.tip-card{background:#ecf0f1;border-left:4px solid #16a085;border-radius:8px;padding:20px}.scenario h4,.tip-card h4{color:#16a085;margin-top:0}.delta-e-explanation,.problem-examples,.science-foundation,.vision-facts{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;margin:25px 0;padding:25px}.callout{background:#ecf0f1;border:1px solid #e5e7eb;border-left:4px solid #16a085;border-radius:8px;margin:20px 0;padding:16px}.callout.accent{border-left-color:#ff6b6b}.callout h4{color:#1f2937;margin:0 0 8px}.callout p{margin:0}.fact-card{background:#fff;border-left:4px solid #f39c12;border-radius:6px;margin:15px 0;padding:20px}.benefits-list{background:#d5edda;border:1px solid #c3e6cb;border-radius:8px;margin:25px 0;padding:25px}.article-footer{background:#1f2937;border-radius:12px;color:#fff;font-size:16px;font-weight:500;letter-spacing:-.01em;margin-top:48px;padding:24px;text-align:center}.palette-demo{background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin:32px 0 12px;overflow:hidden}.palette-toolbar{align-items:center;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;gap:12px;justify-content:space-between;padding:12px 14px}.action-button{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#1f2937;cursor:pointer;display:inline-flex;font-size:14px;gap:8px;padding:8px 12px;text-decoration:none}.action-button.primary{background:#3498db;border-color:#3498db;color:#fff}.palette-embed{height:360px}.palette-note{background:#f9fafb;border-top:1px solid #e5e7eb;color:#6b7280;font-size:12px;padding:8px 14px}.diagram-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:16px 0 8px}.diagram-card{-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #e5e7eb;border-radius:10px;min-width:300px;overflow-x:auto;padding:12px}.diagram-legend{color:#374151;display:none;font-size:14px;padding:8px 4px 0}.diagram-legend h5{color:#374151;font-size:14px;margin:0 0 6px}.diagram-legend ul{color:#6b7280;margin:0 0 6px;padding-left:18px}@media (max-width:640px){.diagram-legend{display:block}}.how-page .diagram-legend{display:block}.diagram-title{color:#374151;font-size:13px;margin:0 0 8px}.diagram-figure{display:block;height:auto;width:100%}.blend-screen{mix-blend-mode:screen}.diagram-card svg{display:block;height:auto;max-width:100%;width:100%}.diagram-figure text{stroke:#fff;stroke-width:2px;stroke-linejoin:round;font-size:clamp(10px,2.4vw,14px)!important;paint-order:stroke fill}.diagram-figure .legend text{font-size:clamp(9px,2vw,12px)!important}.diagram-figure .inline-label{display:none}@media (max-width:360px){.diagram-figure text{font-size:clamp(8px,2.8vw,11px)!important}}@media (max-width:768px){.diagram-figure .inline-label{display:none}}@media (max-width:480px){.diagram-card{overflow-x:visible;padding:8px}.diagram-figure text{stroke-width:2.5px;font-size:clamp(9px,3vw,12px)!important}.diagram-figure .inline-label{display:none}.diagram--complementary .legend-right{transform:translate(24px,176px)!important}.diagram--complementary .legend-bottom{transform:translate(24px,208px)!important}.diagram--triadic .legend-right{transform:translate(24px,176px)!important}.diagram--triadic .legend-sets{transform:translate(24px,212px)!important}.diagram--analogous .notes-row{transform:translate(24px,188px)!important}.diagram--split-comp .triangle-notes{transform:translate(24px,184px)!important}.diagram--tetradic .pair-notes{transform:translate(24px,188px)!important}.diagram--overview .bottom-left{transform:translate(24px,196px)!important}.diagram--overview .bottom-right{transform:translate(264px,196px)!important}.diagram--tritone .stage-2{transform:translate(24px,102px)!important}.diagram--tritone .stage-3{transform:translate(24px,168px)!important}.diagram--tritone .process-left{transform:translate(24px,228px)!important}.diagram--tritone .process-right{transform:translate(192px,228px)!important}.diagram--deltae .legend,.diagram--flow .legend,.diagram--hsv .legend,.diagram--lab .legend,.diagram--rgb .legend,.diagram--trad-sci .legend{transform:translate(24px,188px)!important}}.svg-label{stroke:#fff;stroke-width:3px;stroke-linejoin:round;paint-order:stroke fill}.svg-label.minor{stroke-width:2px}.svg-note{stroke:#fff;stroke-width:2px;paint-order:stroke fill}.article-content li,.article-content p{max-width:75ch}.ecosystem-item-title{font-weight:600;margin-bottom:4px}.ecosystem-item-note{color:#6b7280}.ecosystem-panel{background:linear-gradient(135deg,#f8f9fa,#fff);border:1px solid #e5e7eb;border-radius:12px;margin:40px 0;padding:20px}.ecosystem-header{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.ecosystem-subtitle{color:#6b7280;font-size:14px}.ecosystem-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:12px 0 8px}.ecosystem-item{align-items:flex-start;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;display:flex;gap:12px;padding:14px}.icon-badge{align-items:center;background:#3498db;border-radius:50%;color:#fff;display:inline-flex;flex:0 0 32px;height:32px;justify-content:center;width:32px}.ecosystem-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}@media (max-width:768px){.article-footer{font-size:15px;margin-top:32px;padding:20px}.article-page{max-width:100vw;overflow-x:hidden;padding:20px 12px}.article-header{margin-bottom:32px;padding-bottom:20px}.article-header h1{font-size:28px}.article-subtitle{font-size:14px}.article-content{font-size:15px}.article-layout{grid-template-columns:1fr}.article-content h2{font-size:24px;margin-top:32px;padding-left:12px}.article-content h3{font-size:20px;margin-top:24px}.article-content h4{font-size:16px;margin-top:20px}.ecosystem-grid,.feature-grid,.scenario-grid,.tips-grid{gap:16px;grid-template-columns:1fr}.feature-card{padding:20px}.process-list li{padding-left:45px}.comparison-table{display:block;font-size:13px;overflow-x:auto;white-space:nowrap}.comparison-table td,.comparison-table th{padding:8px 12px}.benefit-items li{margin:8px 0}}@media (max-width:480px){.article-page{padding:16px 8px}.article-header h1{font-size:24px}.article-content h2{border-left-width:2px;font-size:20px;padding-left:8px}.feature-card{padding:16px}.process-list li{font-size:14px;padding-left:40px}.process-list li:before{font-size:14px;height:28px;width:28px}.palette-embed{height:300px}}@media print{.article-page{padding:20px}.feature-card,.scenario,.tip-card{break-inside:avoid;page-break-inside:avoid}.article-toc{display:none}}.dropdown-divider{background:#e5e7eb;height:1px;margin:8px 0}.workflow-example{background:linear-gradient(135deg,#f0f8ff,#e6f3ff);border:1px solid #bde4ff;border-radius:12px;margin:24px 0;padding:24px}.workflow-example h4{align-items:center;color:#2563eb;display:flex;gap:8px;margin-bottom:16px;margin-top:0}.workflow-example .process-list{margin-top:16px}.workflow-example .process-list li:before{background:#2563eb}.advanced-feature{background:linear-gradient(135deg,#fff5f5,#fef2f2);border:1px solid #fecaca;border-left:4px solid #ef4444;border-radius:8px;margin:20px 0;padding:20px}.advanced-feature h4{color:#dc2626;margin-bottom:12px;margin-top:0}.feature-card h4{align-items:center;display:flex;gap:8px}@media (max-width:768px){.workflow-example{margin:20px 0;padding:20px}.advanced-feature{margin:16px 0;padding:16px}}
/*# sourceMappingURL=main.0af9e096.css.map*/