:root{--checker-size:10px;--checker-color1:#f0f0f0;--checker-color2:#dcdcdc;}.checkerboard{background-color:transparent;background-image:linear-gradient(45deg, var(--checker-color2) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-color2) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-color2) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-color2) 75%);background-size:var(--checker-size) var(--checker-size);background-position:0 0, 0 calc(var(--checker-size) / 2), calc(var(--checker-size) / 2) calc(var(--checker-size) * -1 / 2), calc(var(--checker-size) * -1 / 2) 0;}.gradient-preview-box{min-height:250px;transition:background 0.4s ease;position:relative;background-color:transparent;margin:0!important;}.output-code-wrapper{min-height:38px;margin:5px;}#css-output{font-size:0.95rem;font-weight:600;}#direction-buttons .btn{min-width:48px;transition:all 0.2s ease;}#direction-buttons .btn.active{background-color:#0d6efd;color:white;border-color:#0d6efd;}#direction-buttons .btn:hover{background-color:#e9ecef;}#copy-button.copied{background-color:#F0FAA2;border-color:#F0FAA2;color:#fff;}#copy-button.copied .copy-icon{stroke:#fff;}.btn-outline-primary{margin-right:0.5rem!important;border-radius:5px!important;}.btn-outline-primary:last-child{margin-right:0!important;}.btn-outline-secondary{border-color:#ced4da;}.btn-outline-secondary:hover{background-color:#e9ecef;}.card-header{background:none;border-radius:0;border-bottom:0;}.color-picker-container .saturation-box{width:100%;padding-bottom:35%;position:relative;background-image:linear-gradient(transparent, black), linear-gradient(to right, white, transparent);border-radius:0.25rem;cursor:crosshair;overflow:hidden;}.color-picker-container .saturation-pointer{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1.5px #000, inset 0 0 0 1.5px #000;transform:translate(-7px, -7px);pointer-events:none;}.color-picker-container .slider-wrapper{margin-top:1rem;}.color-picker-container .hue-slider{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;outline:none;background:linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));}.color-picker-container .hue-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #ccc;cursor:pointer;}.color-picker-container .hue-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #ccc;cursor:pointer;}.color-picker-container .alpha-slider{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;outline:none;background:linear-gradient(to right, transparent, #000);}.color-picker-container .alpha-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #ccc;cursor:pointer;}.color-picker-container .alpha-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #ccc;cursor:pointer;}.color-picker-container .color-inputs{display:grid;grid-template-columns:1fr 2fr;gap:0.5rem;margin-top:0.5rem;align-items:center;}.color-picker-container .form-label-sm{font-size:0.875rem;font-weight:500;margin-bottom:0;text-align:right;}.color-picker-container input[type="text"]{height:calc(1.5em + 0.5rem + 2px);padding:0.25rem 0.5rem;font-size:0.875rem;border-radius:0.25rem;border:1px solid #ced4da;}.color-picker-container input[type="text"]:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 0.2rem rgba(13, 110, 253, 0.25);}