.navbar{background:linear-gradient(90deg,#6a11cb,#2575fc);padding:.75rem 1.5rem;color:#fff;top:0;box-shadow:0 2px 8px #2575fc4d;display:flex;align-items:center;justify-content:space-between;position:sticky}.nav-logo{color:#fff;text-decoration:none;font-weight:700;font-size:1.5rem}.navbar-menu{list-style:none;display:flex;gap:2rem;margin:0;padding:0}.navbar-link{color:#fff;text-decoration:none;font-weight:600;transition:color .3s ease}.navbar-link:hover{color:#a8d5ff}@media (max-width: 600px){.navbar{padding:.5rem 1rem}.navbar-menu{gap:1rem}}.navbar,.footer{width:100%}.navbar-content,.footer-content{max-width:1200px;margin:0 auto;padding:0 1rem;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;color:#333}.color-block-wrapper{position:relative;text-align:center;margin:0 10px;cursor:pointer}.color-block{width:60px;height:60px;border-radius:8px;box-shadow:0 0 5px #0003;transition:transform .2s ease}.color-block-wrapper:hover .color-block{transform:scale(1.05)}.tooltip{position:absolute;bottom:-45px;left:50%;transform:translate(-50%);background:#000000bf;color:#fff;padding:6px 10px;font-size:12px;border-radius:4px;white-space:nowrap;opacity:0;transition:opacity .3s ease;pointer-events:none;text-align:center;line-height:1.4}.color-block-wrapper:hover .tooltip{opacity:1}.palette-display-container{border:2px solid transparent;border-radius:12px;padding:12px;background-color:#fff;box-shadow:0 0 8px #0000000d;transition:all .2s ease-in-out}.saved-palette{display:flex;gap:10px;margin-bottom:15px}.color-block{width:100%;height:100px;border-radius:16px;border:2px solid #ddd;box-shadow:0 10px 20px #0000001f;transition:transform .3s ease;cursor:default}.color-block:hover .color-hex{opacity:1}.color-hex{position:absolute;bottom:10px;left:10px;color:#fff;font-size:14px;opacity:0;transition:opacity .3s}.save-button-wrapper{display:flex;justify-content:center;margin-top:2rem}.save-button{background-color:#2575fc;color:#fff;border:none;padding:.75rem 1.5rem;font-weight:600;border-radius:8px;cursor:pointer;transition:background-color .3s ease}.save-button:hover{background-color:#1a5cd8}.palette-type-container{margin-bottom:10px;flex:1;min-width:280px}.palette-type-label{font-weight:700;font-size:14px;color:#444}.palette-type-list{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}.palette-type-item{border:1px solid #ccc;border-radius:12px;cursor:pointer;padding:10px;min-width:110px;text-align:center;background:#fff;box-shadow:0 1px 5px #0000000d;transition:all .3s ease;-webkit-user-select:none;user-select:none}.palette-type-item.active{border:3px solid #6a11cb;background:#f0eaff;box-shadow:0 6px 20px #6a11cb4d}.palette-type-item:hover:not(.active){box-shadow:0 5px 15px #6a11cb26;background-color:#faf5ff}.palette-type-name{font-size:13px;font-weight:600;margin-bottom:6px;color:#555}.color-preview{display:flex;gap:6px;justify-content:center}.color-square{width:18px;height:18px;border-radius:5px;box-shadow:0 1px 4px #0000001a}.homepage-title{text-align:center;font-weight:800;font-size:2.5rem;margin-bottom:20px;color:#fff;background:linear-gradient(90deg,#6a11cb,#2575fc);-webkit-text-fill-color:transparent}.mood-input{padding:14px 16px;width:100%;border-radius:12px;border:none;box-shadow:0 4px 10px #6574ff26;font-size:18px;font-weight:600;outline:none;margin-bottom:30px;transition:box-shadow .3s ease-in-out}.mood-input:focus{box-shadow:0 6px 20px #6574ff66}.controls-wrapper{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.controls-wrapper button,.randomize-button{padding:12px 24px;border-radius:12px;cursor:pointer;font-weight:700;font-size:16px;border:none;background:linear-gradient(90deg,#6a11cb,#2575fc);color:#fff;box-shadow:0 8px 15px #6574ff66;transition:transform .2s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none}.randomize-button:hover{transform:scale(1.05);box-shadow:0 12px 25px #6574ffb3}.randomize-button:active{transform:scale(.95)}.mood-bar-container{display:flex;gap:12px;align-items:center;margin-bottom:30px}.mood-bar-container .mood-input{flex:1;margin-bottom:0}.mood-bar-container .randomize-button{flex-shrink:0;white-space:nowrap}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{display:flex;flex-direction:column;min-height:100vh;margin:0;padding:2rem;box-sizing:border-box;font-family:Inter,sans-serif;background:linear-gradient(to bottom right,#f1f4f9,#e2ebf6);background-repeat:no-repeat;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#root{display:flex;flex-direction:column;box-sizing:border-box}.container{padding:2rem 1rem;justify-content:center;align-items:center;box-sizing:border-box;max-width:800px;width:100%;margin:0 auto;text-align:center;background:#fffc;border-radius:1rem;box-shadow:0 10px 30px #0000001a}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;color:#fff;background:linear-gradient(90deg,#6a11cb,#2575fc);cursor:pointer;transition:border-color .25s}button:hover{transform:scale(1.05);box-shadow:0 12px 25px #6574ffb3}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (max-width: 768px){.main-content{margin-top:50px;padding:15px 10px}}@media (max-width: 600px){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}