@layer reset{*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}html,body{text-align:center;height:100%}html{font-size:16px;line-height:1.5}body{text-rendering:optimizespeed;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}a{color:inherit;text-decoration:none}ul,ol{list-style:none}}@layer app{body{background-color:#ffebcc;padding:1.5em}.app{perspective:900px;background-color:#fad59e;background-image:url(https://www.transparenttextures.com/patterns/asfalt-dark.png);border-radius:1em;grid-template-rows:min-content 1fr min-content;place-items:center;gap:2em;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;padding:1em;display:grid;box-shadow:3px 3px 2px #0003}.header,.main,.footer{border:5px dashed #4095bf33}flippin-card{align-content:center;height:fit-content;display:grid}}@layer flippingcard;.header{background-color:#ffebcc;border-radius:1em;padding:.5em}.header h1{font-size:1.5rem}.main{gap:1em;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;display:grid}.main .sliders{gap:1em;display:grid}.main button{border-radius:1em;padding:.8em 2em}.main button:hover{cursor:pointer}.main{width:100%}.slider{align-items:center;display:flex}.slider .slider_label_wrapper{align-items:center;gap:.2em;display:flex}.slider .slider_label{border:1em solid #0000;width:1em;height:1em;display:inline-block}.slider .slider_label_red{border-left:1em solid red}.slider .slider_label_green{border-left:1em solid green}.slider .slider_label_blue{border-left:1em solid #00f}.slider .slider_value{width:2em}[type=range]{appearance:none;cursor:pointer;background:0 0;width:-webkit-fill-available;margin:auto;margin-inline-end:.5em}[type=range]:focus{outline:none}[type=range]::-webkit-slider-runnable-track{background-color:#e0e0e0;border-radius:1em;height:2em}[type=range]::-moz-range-track{background-color:#e0e0e0;border-radius:1em;height:2em}[type=range]::-webkit-slider-thumb{appearance:none;background-color:azure;border:1px solid #00000080;border-radius:50%;width:2.2em;height:2.2em;margin-block-start:-.1em;box-shadow:1px 2px 3px #0006}[type=range]::-moz-range-thumb{background-color:azure;border:none;border-radius:50%;width:2.2em;height:2.2em;margin-block-start:-.1em;box-shadow:1px 2px 3px #0006}.palettes-container{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:10px;display:grid}.palette-item{background:#fff;border-radius:10px;padding:15px;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 8px #0000001a}.palette-item:hover{transform:translateY(-3px);box-shadow:0 4px 12px #00000026}.palette-name{color:#333;text-align:center;margin-bottom:10px;font-size:14px;font-weight:600;display:block}.swatches-container{flex-wrap:wrap;justify-content:center;gap:5px;display:flex}.color-swatch{cursor:pointer;border:2px solid #ddd;border-radius:5px;width:40px;height:40px;transition:transform .2s,border-color .2s;position:relative}.color-swatch:hover{z-index:1;border-color:#333;transform:scale(1.1)}.color-code{color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#000c;border-radius:4px;padding:2px 8px;font-size:10px;transition:opacity .2s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.color-swatch:hover .color-code{opacity:1}.palette-item:last-child{background:#fff5f5;border:2px dashed #e74c3c}@media (width<=768px){.palettes-container{grid-template-columns:repeat(2,1fr);gap:15px}}@media (width<=480px){.palettes-container{grid-template-columns:1fr}.color-swatch{width:35px;height:35px}}.main_back::-webkit-scrollbar{width:8px}.main_back::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.main_back::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.main_back::-webkit-scrollbar-thumb:hover{background:#555}.footer{background-color:#ffebcc;border-radius:1em;align-self:end;padding:.5em;font-size:.8em}.copyright{justify-content:flex-end;align-items:center;gap:1.5em;display:flex}.copyright img{width:2.5ch;display:initial;border-radius:50% 50% 50% 0}