.color-wheel-container{position:relative;width:100%;max-width:400px;margin:0 auto}.color-wheel{width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.1)}.color-selector{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid white;box-shadow:0 2px 5px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none;z-index:10}@media (max-width:640px){.color-wheel-container{max-width:300px}}.iframe-container{width:100%;height:100%;overflow:hidden;border:none;background-color:transparent}body.iframe-mode{margin:0;padding:0;overflow:hidden}canvas{display:block;touch-action:none}input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#3b82f6;cursor:pointer;border:2px solid white}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#3b82f6;cursor:pointer;border:2px solid white}.button:hover{transform:translateY(-1px);box-shadow:0 2px 5px rgba(0,0,0,.1)}.button:active{transform:translateY(0)}.color-info{font-family:monospace;font-size:14px;line-height:1.5}.embed-code{white-space:nowrap;overflow-x:auto;padding:8px;background-color:#f5f5f5;border-radius:4px;font-family:monospace;font-size:12px}@media (prefers-color-scheme:dark){input[type=range]{background:#4b5563}.embed-code{background-color:#374151;color:#e5e7eb}}