*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f6f7f9;color:#222;line-height:1.5}header{text-align:center;padding:1.5rem 1rem;background:#fff;border-bottom:1px solid #e6e6e6}header h1{font-size:2rem}.intro{max-width:700px;margin:.5rem auto 0;color:#555}main{max-width:1000px;margin:0 auto;padding:1.5rem 1rem}.rgb-app{background:#fff;border-radius:14px;padding:1.5rem;box-shadow:0 10px 25px #00000014}.mixers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.5rem}.color-control{background:#fafafa;border-radius:12px;padding:1rem;text-align:center;border:1px solid #e5e5e5;display:flex;flex-direction:column;align-items:center;gap:.5rem}.bucket{width:120px;height:120px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:#ddd;box-shadow:inset 0 0 0 2px #00000026;transition:background-color .2s ease}.color-control label{display:block;font-weight:600;margin-bottom:.25rem}.color-control input[type=range]{width:100%;margin:.25rem 0;accent-color:currentColor}.color-control span{font-weight:700;display:inline-block;min-width:30px}.color-control.red .bucket{background:red}.color-control.green .bucket{background:#0f0}.color-control.blue .bucket{background:#00f}.result{text-align:center;display:flex;flex-direction:column;align-items:center;margin-top:1rem;gap:.5rem}.result h3{font-size:1.2rem;margin-bottom:.5rem}.result-bucket{width:250px;height:180px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:3rem;background:#000;color:#fff;box-shadow:inset 0 0 0 3px #00000040;transition:background-color .2s ease}#rgbText{font-family:monospace;font-size:1rem;font-weight:700}.content-section{margin-top:2rem;background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 8px 20px #0000000f}footer{text-align:center;padding:1.2rem;background:#fff;border-top:1px solid #e6e6e6;font-size:.9rem}footer a{color:#07c;text-decoration:none}footer a:hover{text-decoration:underline}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.fade-in{animation:fadeIn .8s ease forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 600px){.mixers{display:flex;flex-direction:column;gap:.5rem}.color-control{flex-direction:row;align-items:center;justify-content:space-between;background:none;border:none;padding:.5rem 0}.color-control .bucket{width:100%;height:40px;font-size:1.2rem;border-radius:8px}.result{width:100%;align-items:stretch}.result-bucket{width:100%;height:60px;font-size:1.5rem;margin:0}}