*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:100%;font-family:Verdana,Helvetica,Trebuchet MS,sans-serif}body{min-height:100vh;display:flex;justify-content:center;align-items:center;background-color:#f4f4f8;--contrast-color: #171717}.btn-main{padding:.8em 1.8em;border:2px solid #171717;border-radius:25px;position:relative;overflow:hidden;background-color:transparent;text-align:center;text-transform:uppercase;font-size:16px;transition:.3s;z-index:1;font-family:inherit;color:#171717;cursor:pointer}.btn-main:before{content:"";width:0;height:450%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);background:#171717;transition:.5s ease;display:block;z-index:-1}.btn-main:hover:before{width:105%}.btn-main:hover{color:#fff}.flex-c{display:flex;justify-content:center;align-items:center;gap:2rem}.actions{flex-direction:column}.sub-actions{display:flex;align-items:center;gap:1rem}.btn-generate{width:100%;max-width:16rem;border-radius:10px;font-size:18px;font-weight:700}.btn-main:disabled,.btn-main:disabled:hover{opacity:.5;cursor:not-allowed;color:#171717;background-color:transparent}.btn-main:disabled:hover:before{width:0}.app-container{display:flex;flex-direction:column;align-items:center;gap:20px}.app{width:100vw;height:70vh;position:relative;overflow-x:hidden}.palette-list{height:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.color-block{list-style:none;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2em}.color-block-content{display:flex;flex-direction:column;align-items:center;gap:2em;opacity:0;transition:opacity .25s ease-in-out}.color-block:hover .color-block-content{opacity:1}:is(.fa-lock,.fa-lock-open,.fa-circle-xmark){color:var(--contrast-color);font-size:1.2rem;cursor:pointer;will-change:transform;transition:transform .2s ease-in-out}:is(.fa-lock,.fa-lock-open,.fa-circle-xmark):hover{transform:scale(1.2)}.hex-code{color:var(--contrast-color);font-weight:500;cursor:pointer;padding:.25em .5em;border-radius:5px;border:1px solid transparent;will-change:transform;transition:transform .2s ease-in-out,border-color .2s ease-in-out}.hex-code:hover{transform:scale(1.1);border-color:var(--contrast-color)}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006;z-index:5;opacity:0;transition:opacity .4s ease;pointer-events:none}.overlay.show{opacity:1;pointer-events:auto}.bookmarks-sidebar{position:absolute;top:0;right:0;width:350px;height:100%;background-color:#fff;box-shadow:-3px 0 15px #0000001a;z-index:10;transform:translate(100%);transition:transform .4s cubic-bezier(.25,.46,.45,.94);display:flex;flex-direction:column}.bookmarks-sidebar.show{transform:translate(0)}.bookmarks-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #eee}.bookmarks-header h2{font-size:1.2rem;font-weight:600}.bookmarks-empty{margin:auto;color:#888}.bookmarks-list{overflow-y:auto;flex-grow:1}.bookmark-item{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;cursor:pointer;transition:background-color .2s ease}.bookmark-item:hover{background-color:#f9f9f9}.bookmark-preview{display:flex;width:150px;height:30px;border-radius:5px;overflow:hidden}.bookmark-preview>div{flex-grow:1}.palette-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;z-index:100;display:flex;justify-content:center;align-items:center}.palette-modal-content{background-color:#fff;border-radius:10px;overflow:hidden;width:80%;max-width:1200px;box-shadow:0 10px 30px #0003}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:#f9f9f9;border-bottom:1px solid #eee}.modal-header h3{font-weight:600}.modal-palette-view{display:flex;height:50vh}.modal-color-block{flex-grow:1;display:flex;justify-content:center;align-items:flex-end;padding-bottom:1rem}.modal-color-block span{min-width:7em;text-align:center;cursor:pointer;background-color:#0006;color:#fff;padding:.3em .75em;border-radius:15px;font-size:.9rem;font-weight:500}@media(max-width:800px){body{align-items:flex-start;padding:0}.flex-c{gap:.75rem}.actions{padding:0 .75rem;width:100%}.sub-actions{display:flex;gap:.5rem;width:100%;justify-content:center}.btn-generate{width:100%;max-width:180px;margin-top:16px;font-size:16px}.app-container{width:100%;padding:0;gap:10px}.app{width:100vw;margin:0;padding:0;height:auto}.btn-main{font-size:11px;padding:.5em 1em;white-space:nowrap}.btn-main:before{display:none}.btn-main:hover{background-color:#171717;color:#fff}.palette-list{grid-template-columns:1fr;height:auto}.color-block{height:200px}.bookmarks-sidebar{width:280px}.palette-modal-content{width:90%;max-height:80vh;display:flex;flex-direction:column}.modal-palette-view{flex-direction:column;height:auto;flex-grow:1;overflow-y:auto}.modal-color-block{min-height:80px;align-items:center}}