*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#1a1a2e;color:#eee;min-height:100vh}#app{max-width:1200px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:30px}header h1{font-size:2rem;margin-bottom:10px;color:#fff}header p{color:#aaa;font-size:.95rem}main{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}.color-wheel-section{flex:0 0 auto;width:min(100%,560px)}.color-wheel-section h2{text-align:center;margin-bottom:15px;font-size:1.2rem;color:#ccc}.wheel-container{background:#252540;border-radius:12px;padding:20px;box-shadow:0 4px 20px #0000004d;width:100%}#colorWheel{cursor:crosshair;display:block;touch-action:none;width:100%;height:auto}.swatches-panel{flex:1;min-width:280px;max-width:400px}.swatch-section{background:#252540;border-radius:12px;padding:15px;margin-bottom:15px;box-shadow:0 4px 20px #0000004d}.swatch-section h3{font-size:1rem;color:#ccc;margin-bottom:12px;border-bottom:1px solid #3a3a5a;padding-bottom:8px}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:10px}.swatch-grid.large{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.swatch{aspect-ratio:1;border-radius:8px;border:2px solid #3a3a5a;transition:transform .2s,box-shadow .2s;position:relative}.swatch.selectable{cursor:pointer}.swatch.selected{border-color:#fff;box-shadow:0 0 0 2px #ffffff59}.swatch:hover{transform:scale(1.1);box-shadow:0 4px 12px #0006;z-index:1}.swatch-single{display:flex;gap:10px}.swatch-single .swatch{width:80px;height:80px}.swatch .color-info{position:absolute;bottom:-25px;left:50%;transform:translate(-50%);font-size:.65rem;color:#888;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}.swatch:hover .color-info{opacity:1}.empty-message{color:#666;font-style:italic;font-size:.9rem;text-align:center;padding:20px}.primary-controls{margin-top:12px;padding-top:12px;border-top:1px solid #3a3a5a}.control-row{display:flex;align-items:center;gap:10px;margin-top:8px}.control-label{flex:0 0 auto;width:70px;color:#aaa;font-size:.85rem}.control-value{color:#ddd;font-size:.85rem}#primaryValue{flex:1 1 auto}.control-help{margin-top:8px;color:#777;font-size:.75rem}@media(max-width:900px){#app{padding:16px}main{gap:20px}.swatches-panel{max-width:none;width:100%}}@media(max-width:640px){header h1{font-size:1.6rem}header p{font-size:.85rem}.wheel-container{padding:12px}.swatch-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}.swatch-grid.large{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}.control-row{flex-wrap:wrap}.control-label{width:auto}}