.colors-page{display:flex;flex-direction:column;gap:1.75rem;padding:.5rem 0 2rem}.picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.picker-panel{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;background-color:var(--card-bg);border-radius:8px;box-shadow:0 5px 15px #0000001a,0 0 0 1px rgba(var(--accent-color-rgb),.05)}.picker-panel-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.picker-kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}.primary-panel .picker-kicker{color:var(--primary-color)}.secondary-panel .picker-kicker{color:var(--secondary-color)}.color-picker-title{font-size:1.15rem;color:var(--text-color)}.color-preview{width:3rem;height:3rem;border-radius:.8rem;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 24px #0000003d;flex-shrink:0}#primaryPreview{background-color:var(--primary-color)}#secondaryPreview{background-color:var(--secondary-color)}.input-label{font-size:.85rem;color:#ccccccc7}.hex-input{display:flex;align-items:center;background:var(--card-bg);border-radius:.75rem;overflow:hidden;border:1px solid rgba(255,255,255,.14)}.hex-input span{padding:.75rem .85rem;background:#ffffff14;color:var(--text-color);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace}.hex-input input{width:100%;padding:.75rem .85rem;background:transparent;border:none;color:var(--text-color);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;outline:none;-webkit-user-select:text;user-select:text}.color-sliders{display:flex;flex-direction:column;gap:.9rem}.slider-row{display:grid;grid-template-columns:1.5rem 1fr 4.5rem;align-items:center;gap:.75rem}.slider-row label{font-weight:600;text-align:center}.slider-row input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:#ffffff2e;border-radius:999px;outline:none}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(10,10,10,.8);cursor:pointer;background:hsl(var(--hue),var(--saturation),var(--lightness))}.slider-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:2px solid rgba(10,10,10,.8);cursor:pointer;background:hsl(var(--hue),var(--saturation),var(--lightness))}.slider-row input[type=number]{width:100%;padding:.45rem .55rem;background:var(--card-bg);border:1px solid rgba(255,255,255,.14);color:var(--text-color);border-radius:.65rem;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:center;outline:none;-moz-appearance:textfield;appearance:textfield;-webkit-user-select:text;user-select:text}.slider-row input[type=number]::-webkit-outer-spin-button,.slider-row input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.output-panel{display:flex;flex-direction:column;gap:.65rem}.output-actions{display:flex;justify-content:flex-end}.copy-button{display:inline-flex;align-items:center;justify-content:center;padding:.3rem .7rem;background:linear-gradient(135deg,rgba(var(--accent-color-rgb),.1),rgba(var(--accent-color-secondary-rgb),.1));color:var(--accent-color);border:1px solid rgba(var(--accent-color-rgb),.1);border-radius:4px;cursor:pointer;font-size:.8rem;opacity:.85;transition:all .3s ease,opacity .3s ease}.copy-button:hover{background:linear-gradient(135deg,rgba(var(--accent-color-rgb),.2),rgba(var(--accent-color-secondary-rgb),.2));border-color:rgba(var(--accent-color-rgb),.3);box-shadow:0 2px 4px #0000001a,0 0 0 1px rgba(var(--accent-color-rgb),.05);color:var(--accent-color-secondary);opacity:1}.copy-button.is-success{background:linear-gradient(135deg,rgba(var(--accent-color-rgb),.2),rgba(var(--accent-color-secondary-rgb),.2));border-color:rgba(var(--accent-color-rgb),.3);color:var(--accent-color-secondary);opacity:1}.copy-button.is-error{background:#ea545529;border-color:#ea54555c;color:#ffe2e2}.copy-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg-color),0 0 0 4px rgba(var(--accent-color-rgb),.25)}.css-preview{margin:0;padding:1.5rem;border-radius:6px;background-color:#0003;border-left:4px solid var(--accent-color);color:#ddd;line-height:1.7;font-size:.95rem;overflow-x:auto;white-space:pre-wrap;-webkit-user-select:text;user-select:text}#color-timeline{margin-top:.25rem}#color-timeline.posts-container.timeline-view-class{max-width:980px}#color-timeline.timeline-view-class.timeline-compact .timeline-content{width:260px!important;max-width:260px!important}#color-timeline.posts-container.timeline-view-class .timeline-content{width:260px;max-width:260px}#color-timeline.posts-container.timeline-view-class .post-excerpt{display:block;-webkit-line-clamp:unset;line-clamp:unset;-webkit-box-orient:initial;max-height:none;overflow:visible}::-webkit-scrollbar-thumb{background:var(--primary-color)}::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)}*{scrollbar-color:var(--primary-color) var(--bg-color)}@media(max-width:900px){.picker-grid{grid-template-columns:1fr}}@media(max-width:768px){.container{padding:1rem}.header{padding:1rem 0 .5rem}.colors-page{gap:1.5rem;padding-bottom:1.5rem}.picker-panel{padding:1rem}.slider-row{grid-template-columns:1.25rem 1fr 4rem;gap:.6rem}.slider-row input[type=range]::-webkit-slider-thumb,.slider-row input[type=range]::-moz-range-thumb{width:18px;height:18px}.hex-input span,.hex-input input{padding:.65rem .75rem}.copy-button{width:auto;align-self:flex-start}}