.color-detail-page{min-height:100vh;background-color:var(--bg-color);padding-top:80px}.color-editor-card{padding:25px;margin:15px auto;width:90%;max-width:950px;display:flex;flex-direction:column;gap:20px;color:inherit;border:none;box-shadow:var(--shadow-main);background:inherit;border-radius:var(--radius-sm);position:relative;z-index:10}.main-hex-section{position:relative;border-bottom:1px solid var(--border-color);padding-bottom:25px}#color-input{background:transparent;border:none;font-size:4.5rem;font-weight:900;text-align:center;width:100%;outline:none;font-family:inherit;letter-spacing:-.05em;text-transform:uppercase;color:inherit;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px;text-decoration-color:#ffffff4d}#color-input:hover,#color-input:focus{text-decoration-color:currentColor}.action-group{position:fixed;top:50%;right:24px;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;align-items:center;background:var(--controls-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:8px 6px;gap:2px;box-shadow:var(--shadow-main)}.header-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;width:70px;background:transparent;border:none;border-radius:var(--radius-sm);color:inherit;font-weight:600;font-size:.7rem;cursor:pointer;transition:all .2s;text-align:center}.header-action-btn:hover{background:var(--button-hover)}.action-group .divider{width:32px;height:1px;background:var(--border-color);margin:6px 0;opacity:.5}.kbd-hint{font-size:.55rem;background:var(--surface-color);padding:1px 4px;border-radius:3px;border:1px solid var(--border-color);opacity:.7;margin-top:2px;font-weight:800;letter-spacing:.05em;color:var(--text-color);display:block}.sticky-color-bar{position:fixed;top:24px;left:50%;transform:translate(-50%,-100px);z-index:1000;display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--controls-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-main);transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s;opacity:0;pointer-events:none}.sticky-color-bar.visible{transform:translate(-50%);opacity:1;pointer-events:all}.sticky-swatch{width:20px;height:20px;border-radius:3px;border:1px solid rgba(0,0,0,.1)}#sticky-hex{font-family:var(--font-mono);font-weight:700;font-size:.9rem;color:var(--text-color);letter-spacing:.02em;background:transparent;border:none;outline:none;width:80px;padding:0;cursor:text;text-transform:uppercase;border-bottom:1px dashed var(--border-color)}#sticky-hex:hover,#sticky-hex:focus{border-bottom:1px solid var(--accent-color)}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:flex-start}.color-space-block{display:flex;flex-direction:column;gap:15px;background:transparent;padding:20px;border:none}.value-input-group{position:relative;display:flex;flex-direction:column;gap:2px;background:var(--button-active);padding:12px 16px;border-radius:var(--radius-sm);transition:background .2s}.value-input-group:focus-within{background:var(--button-hover)}.value-label{font-size:.75rem;font-weight:800;opacity:.5;text-transform:uppercase;letter-spacing:.05em;text-align:center}.value-input-group input{background:transparent;border:none;font-family:var(--font-mono);font-size:1.1rem;font-weight:700;outline:none;color:inherit;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.value-input-group:hover{background:var(--button-hover)}.sliders-column{display:flex;flex-direction:column;gap:15px;max-height:400px;overflow-y:auto;padding-right:10px}.sliders-column::-webkit-scrollbar{width:4px}.sliders-column::-webkit-scrollbar-track{background:transparent}.sliders-column::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:var(--radius-sm)}.group-label{font-size:.65rem;font-weight:800;opacity:.3;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}.slider-group{display:flex;flex-direction:column;gap:10px;padding:0 5px}.slider-item{display:flex;align-items:center;gap:12px}.slider-item label{font-size:.8rem;font-weight:900;width:20px;opacity:.7}.slider-item input[type=range]{flex:1;-webkit-appearance:none;height:8px;border-radius:var(--radius-sm);outline:none;box-shadow:var(--shadow-inset);cursor:pointer}#slider-h{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.slider-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:20px;background:#fff;cursor:pointer;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.1);transition:transform .2s cubic-bezier(.2,1,.3,1),box-shadow .2s;margin-top:-6px}.slider-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:var(--shadow-hover)}.accessibility-check{display:flex;justify-content:center;gap:30px;background:var(--surface-color);padding:12px 25px;border-radius:var(--radius-sm);border:1px solid var(--border-color);box-shadow:var(--shadow-main);margin:20px auto;width:90%;max-width:950px;position:relative;z-index:10}.contrast-item{display:flex;align-items:center;gap:12px}.contrast-item .label{font-size:.8rem;font-weight:600;opacity:.7;text-transform:uppercase;letter-spacing:.05em}.info-wrapper{position:absolute;top:10px;right:10px;z-index:5;display:flex;align-items:center;gap:4px}.info-icon{cursor:help;opacity:.15;transition:opacity .2s;display:flex;align-items:center;justify-content:center;position:relative}.mini-copy-btn{cursor:pointer;opacity:.15;transition:all .2s cubic-bezier(.2,1,.3,1);display:flex;align-items:center;justify-content:center;padding:4px;border-radius:var(--radius-sm);background:transparent;border:none;color:inherit}.info-wrapper:hover .mini-copy-btn,.info-wrapper:hover .info-icon{opacity:.5}.mini-copy-btn:hover,.info-icon:hover{opacity:1!important}.mini-copy-btn:hover{background:var(--button-hover);transform:scale(1.1)}.mini-copy-btn:active{transform:scale(.9)}.info-icon:after{content:attr(data-tooltip);position:absolute;bottom:120%;right:0;background:#000000e6;color:#fff;padding:8px 12px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;width:180px;text-align:center;opacity:0;visibility:hidden;transition:all .2s cubic-bezier(.2,1,.3,1);transform:translateY(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-main);pointer-events:none;line-height:1.4}.info-icon:hover:after{opacity:1;visibility:visible;transform:translateY(0)}.header-with-info{display:flex;align-items:center;gap:10px}.header-with-info .info-icon{margin-top:5px}.contrast-item .ratio{font-family:var(--font-mono);font-weight:700;font-size:1.1rem}.badges{display:flex;gap:6px}.badge{font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:var(--radius-sm);background:#0003;color:#fff}.badge.pass{background:#22c55e;box-shadow:var(--shadow-glow-success)}.badge.fail{background:#ef4444;opacity:.5}.dot{margin:0 10px}html{scroll-behavior:smooth}.page-container{max-width:1400px;margin:0 auto;padding:0 40px}.sidebar-toc{position:fixed;left:20px;top:50%;transform:translateY(-50%);height:fit-content;z-index:100;padding:20px;background:#ffffff0d;backdrop-filter:blur(15px);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-main)}.sidebar-toc ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:20px}.toc-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-color);font-size:.9rem;font-weight:600;opacity:.4;transition:all .3s}.toc-dot{width:6px;height:6px;background:currentColor;border-radius:var(--radius-sm);transition:transform .3s}.toc-link:hover{opacity:.8}.toc-link.active{opacity:1;color:var(--primary-color)}.toc-link.active .toc-dot{transform:scale(2)}.content-section{margin:40px 0 100px;position:relative;z-index:10}@media(max-width:1000px){.page-container{grid-template-columns:1fr}.sidebar-toc{display:none}}.color-dashboard{background:transparent;box-shadow:none;border:none}.harmonies-area{padding:30px}.shades-tints-divider{height:1px;background:linear-gradient(to right,transparent,var(--border-color),transparent);opacity:.5}.grids-area{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:30px}.section-header{margin-bottom:20px}.section-header h2{font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.8}.harmonies-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.harmony-group{display:flex;flex-direction:column;gap:8px;background:#00000005;padding:12px;border-radius:var(--radius-sm);border:1px solid rgba(0,0,0,.03);transition:all .2s}.harmony-group:hover{background:#0000000a;transform:translateY(-2px)}.harmony-label{font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color);opacity:.6;margin-bottom:4px}.harmony-colors{display:flex;flex-direction:column;gap:4px}.harmony-colors .color-card{height:60px;margin:0;width:100%;padding:0 15px}.harmony-colors .hex-label{font-size:.85rem}.column h2{font-size:1.8rem;margin-bottom:4px;font-weight:800;letter-spacing:-.02em}.section-desc{font-size:.95rem;opacity:.6;margin-bottom:24px}.grid{display:flex;flex-direction:column;gap:8px}.color-card:hover{z-index:10}.copy-icon{opacity:0;transform:scale(.8) rotate(-10deg);transition:all .3s cubic-bezier(.34,1.56,.64,1)}.color-card:hover .copy-icon{opacity:1;transform:scale(1.1) rotate(0)}.card-overlay[style*="color: #fff"]{background:linear-gradient(#0000,#0000000d)}.card-overlay[style*="color: #000"]{background:linear-gradient(#fff0,#ffffff0d)}@media(max-width:900px){.shades-tints-grid{grid-template-columns:1fr;padding:24px}}@media(max-width:768px){.header-content h1,#color-input{font-size:3rem!important}.action-group{right:12px;top:50%;transform:translateY(-50%) scale(.9)}}