:root{--bg-dark:#0f172a;--glass-bg:rgba(30,41,59,.6);--glass-border:hsla(0,0%,100%,.1);--accent:#38bdf8;--accent-hover:#0ea5e9;--text-main:#f8fafc;--text-muted:#94a3b8;--card-bg:rgba(0,0,0,.25)}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,sans-serif}body{background-color:var(--bg-dark);background-image:radial-gradient(circle at 0 0,rgba(56,189,248,.15),transparent 40%),radial-gradient(circle at 100% 100%,rgba(168,85,247,.15),transparent 40%);color:var(--text-main);min-height:100vh;padding:2rem 1rem;display:flex;justify-content:center;align-items:flex-start}.container{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:24px;padding:2rem;width:100%;max-width:900px;display:flex;flex-direction:column;gap:2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}.header{text-align:center}.header h1{font-size:clamp(2rem,5vw,2.75rem);font-weight:600;background:linear-gradient(135deg,#38bdf8,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.header p{color:var(--text-muted);font-size:.95rem}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.card{background:var(--card-bg);border-radius:16px;padding:1.5rem;border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:1.25rem}.checkerboard{background-color:#cbd5e1;background-image:linear-gradient(45deg,#94a3b8 25%,transparent 0),linear-gradient(-45deg,#94a3b8 25%,transparent 0),linear-gradient(45deg,transparent 75%,#94a3b8 0),linear-gradient(-45deg,transparent 75%,#94a3b8 0);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;border-radius:12px;border:1px solid hsla(0,0%,100%,.1);overflow:hidden}.color-display{width:100%;height:80px;transition:background-color .1s}.input-row{display:flex;align-items:center;gap:.75rem}input[type=color]{-webkit-appearance:none;border:none;width:44px;height:44px;border-radius:10px;cursor:pointer;background:none;flex-shrink:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:2px solid var(--glass-border);border-radius:10px}input[type=text]{flex:1;background:rgba(0,0,0,.4);border:1px solid var(--glass-border);color:var(--text-main);padding:.8rem;border-radius:10px;font-size:1rem;text-transform:uppercase;outline:none;transition:border-color .2s;width:100%}input[type=text]:focus{border-color:var(--accent)}.slider-group{display:flex;flex-direction:column;gap:.5rem}.slider-header{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-muted)}input[type=range]{-webkit-appearance:none;width:100%;height:8px;background:hsla(0,0%,100%,.1);border-radius:4px;outline:none;margin:.5rem 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;cursor:pointer;border:3px solid var(--bg-dark);box-shadow:0 2px 5px rgba(0,0,0,.5)}#mixRatio{height:12px;background:linear-gradient(90deg,var(--color-a),var(--color-b));border:1px solid var(--glass-border)}#mixRatio::-webkit-slider-thumb{width:28px;height:28px;border:4px solid var(--bg-dark)}.result-display-wrapper{height:140px;border-radius:16px}#displayResult{width:100%;height:100%;transition:background-color .1s}.output-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-top:1rem}.output-box{background:rgba(0,0,0,.3);padding:1rem;border-radius:12px;border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:.3rem;cursor:pointer;transition:background .2s}.output-box:hover{background:hsla(0,0%,100%,.05)}.output-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;font-weight:500}.output-value{font-size:1.1rem;font-weight:600;word-break:break-all}.section-title{font-size:1.1rem;font-weight:500;margin-bottom:1rem;color:var(--text-main);display:flex;align-items:center;justify-content:space-between}.harmony-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.harmony-col{display:flex;flex-direction:column;gap:.5rem;align-items:center}.harmony-swatch{width:100%;padding-top:100%;border-radius:12px;border:1px solid var(--glass-border);cursor:pointer;transition:transform .2s;position:relative}.harmony-swatch:hover{transform:translateY(-3px)}.harmony-label{font-size:.8rem;color:var(--text-muted);text-align:center}.btn{background:hsla(0,0%,100%,.1);color:var(--text-main);border:1px solid var(--glass-border);padding:.75rem 1.5rem;border-radius:10px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;width:100%}.btn:hover{background:var(--accent);color:var(--bg-dark);border-color:var(--accent)}.history-dock{display:flex;gap:.75rem;overflow-x:auto;padding-bottom:.5rem}.history-dock::-webkit-scrollbar{height:6px}.history-dock::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.2);border-radius:10px}.history-swatch{width:40px;height:40px;border-radius:50%;flex-shrink:0;border:2px solid var(--glass-border);cursor:pointer}.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--text-main);color:var(--bg-dark);padding:.75rem 1.5rem;border-radius:50px;font-weight:600;box-shadow:0 10px 25px rgba(0,0,0,.3);opacity:0;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);z-index:1}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}@media (max-width:768px){.container{padding:1.5rem;gap:1.5rem;border-radius:20px}.grid-2{grid-template-columns:1fr;gap:1rem}.harmony-grid{gap:.5rem}body{padding:1rem .5rem}}