@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";.recommendations-link{background-color:none;text-decoration:none;border:1px solid var(--border-color);border-radius:3px;padding:8px 12px;color:#777;cursor:pointer;transition:all .3s ease;text-align:center}.recommendations-link:hover{background-color:#777;color:#fff}.darkmode-toggle{background:none;border:1px solid var(--border-color);color:#777;padding:8px 12px;border-radius:3px;cursor:pointer;transition:all .3s ease;margin-top:1rem;text-align:center}.darkmode-toggle:hover{background-color:#777;color:#fff}.sidebar{min-width:220px;max-width:220px;background-color:var(--bg);padding:7rem 1rem 1rem;height:100vh;font-size:.8rem;position:fixed;top:0;left:0;overflow-y:auto;transition:transform .3s ease-in-out;z-index:1000}.sidebar.hidden{transform:translate(-100%)}.sidebar.visible{transform:translate(0);width:100vw;height:100vh;box-shadow:none}.rec-theme{display:flex;flex-direction:column}.hamburger-btn{color:var(--text);position:fixed;top:1rem;left:1rem;z-index:1100;background:transparent;border:none;font-size:2rem;cursor:pointer;display:none}@media (max-width: 900px){.sidebar{position:fixed;top:0;left:0;min-height:100vh;min-width:100vw;font-size:.9rem;line-height:1.3rem;background-color:var(--bg);padding-top:3.8rem;z-index:1000;transform:translate(-100%);display:flex;flex-direction:column}.sidebar.visible{transform:translate(0)}.darkmode-toggle{font-size:.9rem}.hamburger-btn{display:block}.rec-theme{position:absolute;right:1rem}}body{display:flex;justify-content:center;align-items:center}.recommend-container{width:100%;max-width:600px;padding:2rem;background-color:var(--bg);border-radius:8px;box-shadow:0 2px 10px #0000001a}.recommend-heading{color:var(--text);font-size:1.5rem;font-weight:700;margin-bottom:1rem}.recommend-form label{color:#7393b3;font-size:.9rem;font-weight:500;display:block;margin-bottom:.25rem}.recommend-form input,.recommend-form textarea{width:20rem;border:none;outline:none;padding:.5rem;border-radius:3px;margin-bottom:1rem;color:#7393b3}.recommend-form input{border-bottom:1px solid #7393B3}.recommend-form textarea{font-family:Helvetica,sans-serif;border:1px solid #7393B3}.recommend-form input.hex-input{width:6rem;color:#7393b3}.recommend-submit{background:none;border:1px solid #7393B3;color:#7393b3;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:1rem;transition:background .2s ease}.recommend-submit:hover{color:#fff;background:#7393b3}input:focus,textarea:focus{outline:1px solid blue;border:none}.preview-box{width:50px;height:50px}.back{display:inline-block;margin-bottom:1rem;color:#b6b6b6;text-decoration:none;font-size:.9rem}.back:hover{color:#5f6368}@media (max-width: 480px){.recommend-form input,.recommend-form textarea{width:15rem}}.swatch-container{display:flex;flex-direction:column}.swatch-block{border-radius:3px;width:100%;height:140px;position:relative;cursor:pointer}.hover-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0003;color:#fff;padding:6px 10px;border-radius:3px;font-size:1rem;opacity:0;transition:opacity .2s ease;pointer-events:none}.swatch-block:hover .hover-overlay{opacity:1}body.dark-mode .swatch-block:hover{box-shadow:0 0 10px 4px var(--glow);transition:box-shadow .3s ease}.swatch-details{padding-top:4px}#swatch-name{color:var(--text);font-size:.8rem;font-weight:700}.swatch-details p{color:#777;font-family:Helvetica,system-ui,Arial,sans-serif;font-size:.8rem;line-height:1rem}body{font-family:system-ui,Helvetica,sans-serif;background-color:#fff;min-height:100vh}footer{color:var(--sub-text);font-size:.75rem;position:absolute;bottom:8px}.app-container{display:flex;max-height:100vh;overflow:visible;position:relative}.main-content{flex-grow:1;padding:2rem;display:flex;flex-direction:column;align-items:center;margin-left:220px}.title{color:var(--text);font-family:Roboto,sans-serif;font-size:3rem;font-weight:700;margin-bottom:.5rem}.sub-title{color:var(--sub-text);font-family:Roboto,sans-serif;font-size:.75rem;margin-bottom:2rem}.swatch-stack{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;max-width:calc(975px + 4rem);margin:0 auto;overflow-y:auto;max-height:100%;gap:2.8rem 1rem;padding-top:1rem}.swatch{flex:0 0 195px;height:180px}.shuffle-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;margin:.5rem 0;padding:.5rem 1rem;background-color:var(--shuffle-btn-color);color:#5f6368;border:none;border-radius:3px;cursor:pointer;font-size:.85rem;transition:background .2s ease;width:max-content}.shuffle-button:hover{background-color:#b6b6b6}.shuffle-icon{width:1.5rem;height:1.5rem}.button-wrapper{width:100%;display:flex;justify-content:flex-start;margin-bottom:1rem}.swatch-stack{scrollbar-width:thin;scrollbar-color:#e9e9e9 #f6f6f6}.swatch-stack::-webkit-scrollbar{width:8px;height:8px}.swatch-stack::-webkit-scrollbar-track{background:#f6f6f6;border-radius:4px}.swatch-stack::-webkit-scrollbar-thumb{background-color:#e9e9e9;border-radius:4px;border:none}@media (max-width: 900px){.main-content{margin-left:0}}@media (max-width: 768px){.main-content{padding:1rem}.title{margin-bottom:1rem}.sub-title{font-size:.65rem;margin-top:-.5rem;margin-bottom:.75rem;text-align:center}.shuffle-button{margin-left:1rem;font-size:.75rem;padding:.4rem .8rem}.shuffle-icon{width:1.2rem;height:1.2rem}.swatch-stack{padding:0 1rem}footer{font-size:.65rem;position:absolute;bottom:2px;margin-top:2rem}}@media (max-width: 480px){.title{font-size:2rem}.sub-title{font-size:.6rem}.shuffle-button{margin-left:.5rem;font-size:.7rem;padding:.3rem .6rem}.shuffle-icon{width:1rem;height:1rem}.swatch-stack{padding:.8rem .5rem;max-height:80vh;overflow-y:auto}}:root{font-family:Roboto,Helvetica,system-ui,Arial,sans-serif;line-height:1.5;font-weight:400;--bg: #ffffff;--text: rgb(28, 28, 28);--sub-text: rgb(28, 28, 28);--color-details: #777;--border-color: #f1f1f1;--shuffle-btn-color: #f1f1f1;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light dark}.dark-mode{--bg: #1e1e1e;--text: #ffffff;--sub-text: #777;--color-details: #777;--border-color: #777;--shuffle-btn-color: #393939}body{background-color:var(--bg);transition:background-color .3s ease,color .3s ease}*{margin:0;padding:0;box-sizing:border-box}