@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--bg-color: #050505;--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .6);--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--accent-glow: 0 0 30px rgba(255, 255, 255, .1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-primary);overflow:hidden;height:100vh;-webkit-font-smoothing:antialiased}#root{height:100vh}.rangi-container{height:100vh;display:flex;flex-direction:column}.palette-wrapper{flex:1;display:flex;width:100%;height:100%}.header{position:fixed;top:0;left:0;right:0;z-index:100;padding:24px 40px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.logo-section{pointer-events:auto}.logo{font-size:32px;font-weight:800;letter-spacing:-1.5px;background:linear-gradient(135deg,#fff,#ffffff80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:12px}.header-actions{display:flex;gap:12px;pointer-events:auto}.btn-premium{padding:10px 20px;background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:12px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:8px}.btn-premium:hover{background:#ffffff26;transform:translateY(-2px);border-color:#ffffff4d}.btn-premium.primary{background:#fff;color:#000}.btn-premium.primary:hover{background:#ffffffe6}.color-column{flex:1;height:100%;position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:120px 0 60px;transition:flex .5s cubic-bezier(.4,0,.2,1);cursor:pointer}.color-column:hover{flex:1.25}.color-info{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.9}.hex-value{font-size:28px;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-family:Outfit,sans-serif}.color-name-sw{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:2px;opacity:.7}.column-actions{display:flex;flex-direction:column;align-items:center;gap:20px;opacity:0;transition:all .3s ease}.color-column:hover .column-actions{opacity:1}.icon-btn{width:48px;height:48px;border-radius:14px;background:#0000001a;border:none;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;transition:all .2s ease}.icon-btn:hover{background:#0003;transform:scale(1.1)}.icon-btn.locked{background:#00000040;opacity:1!important}.shortcut-hint{position:fixed;bottom:40px;left:50%;transform:translate(-50%);background:#0009;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);padding:12px 24px;border-radius:100px;display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-secondary);z-index:200}.hint-item{display:flex;align-items:center;gap:8px}.kbd{padding:4px 8px;background:#ffffff1a;border-radius:6px;font-weight:700;color:#fff;font-size:11px}@media (max-width: 768px){.palette-wrapper{flex-direction:column}.color-column{padding:60px 20px;flex:1;width:100%}.hex-value{font-size:20px}.header{padding:16px 20px}.logo{font-size:24px}}