.ColourConverter{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:10rem 1rem 2rem;min-height:-moz-max-content;min-height:max-content}.ColourConverter .title{font-size:2rem;font-weight:700;margin-bottom:.5rem;text-align:center;color:var(--font-color)}.ColourConverter .description{font-size:1rem;color:var(--description-font-color);margin-bottom:2rem;text-align:center}.ColourConverter .converter-container{display:flex;flex-direction:column;gap:2rem;width:100%}@media(min-width:768px){.ColourConverter .converter-container{flex-direction:row;align-items:flex-start}}.ColourConverter .converter-container .picker-section{flex:1;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;transition:all .3s ease}.ColourConverter .converter-container .picker-section.glass{background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2)}.ColourConverter .converter-container .picker-section.glass:hover{box-shadow:0 8px 32px 0 rgba(31,38,135,.47);border:1px solid hsla(0,0%,100%,.3)}.ColourConverter .converter-container .picker-section .picker-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.1)}.ColourConverter .converter-container .picker-section .picker-header h2{font-size:1.25rem;font-weight:600;margin:0;color:var(--font-color)}.ColourConverter .converter-container .picker-section .picker-content{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.ColourConverter .converter-container .picker-section .picker-content .color-preview{height:100px;border-radius:8px;position:relative;overflow:hidden}.ColourConverter .converter-container .picker-section .picker-content .color-preview .color-display{position:absolute;top:0;left:0;right:0;bottom:0}.ColourConverter .converter-container .picker-section .picker-content .color-preview .transparent-bg{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(45deg,#eee 25%,transparent 0),linear-gradient(-45deg,#eee 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eee 0),linear-gradient(-45deg,transparent 75%,#eee 0);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;z-index:-1}.ColourConverter .converter-container .picker-section .picker-content .color-picker{display:flex;flex-direction:column;gap:1.5rem}.ColourConverter .converter-container .picker-section .picker-content .color-picker .saturation-field{position:relative;height:200px;border-radius:5px;background:linear-gradient(90deg,white,red);overflow:hidden;cursor:crosshair}.ColourConverter .converter-container .picker-section .picker-content .color-picker .saturation-field .saturation-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,black,transparent)}.ColourConverter .converter-container .picker-section .picker-content .color-picker .saturation-field .saturation-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none}.ColourConverter .converter-container .picker-section .picker-content .color-picker .hue-slider{position:relative;height:20px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);border-radius:5px;overflow:hidden;cursor:ew-resize}.ColourConverter .converter-container .picker-section .picker-content .color-picker .hue-slider .hue-thumb{position:absolute;width:6px;height:20px;background:#fff;border-radius:3px;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 2px rgba(0,0,0,.6)}.ColourConverter .converter-container .picker-section .picker-content .color-picker .alpha-slider{position:relative;height:20px;border-radius:5px;overflow:hidden;cursor:ew-resize}.ColourConverter .converter-container .picker-section .picker-content .color-picker .alpha-slider .transparent-bg{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(45deg,#eee 25%,transparent 0),linear-gradient(-45deg,#eee 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eee 0),linear-gradient(-45deg,transparent 75%,#eee 0);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;z-index:-1}.ColourConverter .converter-container .picker-section .picker-content .color-picker .alpha-slider .alpha-gradient{position:absolute;top:0;left:0;right:0;bottom:0}.ColourConverter .converter-container .picker-section .picker-content .color-picker .alpha-slider .alpha-thumb{position:absolute;width:6px;height:20px;background:#fff;border-radius:3px;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 2px rgba(0,0,0,.6)}.ColourConverter .converter-container .formats-section{flex:1;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;transition:all .3s ease}.ColourConverter .converter-container .formats-section.glass{background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2)}.ColourConverter .converter-container .formats-section.glass:hover{box-shadow:0 8px 32px 0 rgba(31,38,135,.47);border:1px solid hsla(0,0%,100%,.3)}.ColourConverter .converter-container .formats-section .formats-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.1)}.ColourConverter .converter-container .formats-section .formats-header h2{font-size:1.25rem;font-weight:600;margin:0;color:var(--font-color)}.ColourConverter .converter-container .formats-section .formats-header .formats-actions{display:flex;gap:.5rem}.ColourConverter .converter-container .formats-section .formats-content{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.ColourConverter .converter-container .formats-section .formats-content .format-item{display:flex;flex-direction:column;gap:.5rem}.ColourConverter .converter-container .formats-section .formats-content .format-item .format-label{font-size:.85rem;color:var(--description-font-color);display:flex;justify-content:space-between;align-items:center}.ColourConverter .converter-container .formats-section .formats-content .format-item .format-label .copy-button{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--description-font-color);transition:all .2s ease}.ColourConverter .converter-container .formats-section .formats-content .format-item .format-label .copy-button:hover{color:var(--font-color);transform:scale(1.1)}.ColourConverter .converter-container .formats-section .formats-content .format-item .format-input{width:100%;padding:.75rem 1rem;border-radius:4px;border:1px solid hsla(0,0%,100%,.2);background:rgba(0,0,0,.1);color:var(--font-color);font-family:monospace}.ColourConverter .converter-container .formats-section .formats-content .format-item .format-input:focus{outline:none;border-color:rgba(79,70,229,.5);box-shadow:0 0 0 2px rgba(79,70,229,.25)}.ColourConverter .converter-container .formats-section .formats-content .format-item .format-input.invalid{border-color:rgba(239,68,68,.5);box-shadow:0 0 0 2px rgba(239,68,68,.25)}html.dark .ColourConverter .formats-section.glass,html.dark .ColourConverter .picker-section.glass{background:rgba(0,0,0,.2);border:1px solid hsla(0,0%,100%,.1)}html.dark .ColourConverter .formats-section.glass:hover,html.dark .ColourConverter .picker-section.glass:hover{border:1px solid hsla(0,0%,100%,.2)}html.dark .ColourConverter .formats-section .formats-header,html.dark .ColourConverter .formats-section .picker-header,html.dark .ColourConverter .picker-section .formats-header,html.dark .ColourConverter .picker-section .picker-header{background:rgba(0,0,0,.3);border-bottom:1px solid hsla(0,0%,100%,.1)}html.dark .ColourConverter .alpha-slider .transparent-bg,html.dark .ColourConverter .color-preview .transparent-bg{background-image:linear-gradient(45deg,#333 25%,transparent 0),linear-gradient(-45deg,#333 25%,transparent 0),linear-gradient(45deg,transparent 75%,#333 0),linear-gradient(-45deg,transparent 75%,#333 0)}html.dark .ColourConverter .formats-content .format-item .format-input{background:hsla(0,0%,100%,.05);color:var(--font-color)}