:root { color-scheme: dark; --bg:#0e1320;--panel:#182033;--line:#ffffff14;--ink:#f5f4ff;--muted:#9ba7c4;--pink:#ff83b8;--blue:#8cbaff;--green:#73dfbf; --selected:#ff80ba; --emitted:#592d40; font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans SC",sans-serif; }
*{box-sizing:border-box} html{min-height:100%} body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink)} button,input{font:inherit} button{cursor:pointer} button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:3px} a{color:var(--blue)}
.backdrop{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 46% 36% at 12% 4%,#ec659c22,transparent 85%),radial-gradient(ellipse 40% 42% at 95% 20%,#5499f522,transparent 90%),radial-gradient(ellipse 70% 50% at 45% 95%,#6546b214,transparent 90%)}
.shell{max-width:1120px;padding:28px 26px 24px;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:linear-gradient(135deg,#ffa5c9,#85bbff);color:#2b234a;font-size:26px;box-shadow:0 6px 24px #fa94b044}.brand strong{display:block;font-size:23px;line-height:1.04;letter-spacing:-1.2px;font-weight:800}.brand strong span{color:var(--pink)}.brand small{display:block;margin-top:3px;font-size:10px;letter-spacing:2px;color:var(--muted)}.connections{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.connection{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line);background:#ffffff07;border-radius:40px;font-size:12px;color:#cbd2e6}.dot{width:8px;height:8px;border-radius:50%;background:#667085;box-shadow:0 0 0 3px #ffffff07;flex-shrink:0}.dot.online{background:var(--green);box-shadow:0 0 0 3px #73dfbf20}.dot.failed{background:#ff879d;box-shadow:0 0 0 3px #ff879d20}
.intro{padding:48px 0 30px}.eyebrow{font-size:11px;color:var(--pink);letter-spacing:3px;font-weight:700}.intro h1{margin:10px 0 7px;line-height:1.25;font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-1.5px}.intro h1 span{background:linear-gradient(90deg,#ff82b8,#a8b7ff);background-clip:text;color:transparent}.intro p{font-size:14px;color:var(--muted);line-height:1.8;margin:0}
.workspace{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:22px;align-items:stretch}.panel{background:linear-gradient(165deg,#1d263a,#171d30);border:1px solid #ffffff13;border-radius:22px;padding:25px 27px;box-shadow:0 18px 50px #05071145;min-width:0}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.section-heading>div{display:flex;align-items:baseline;gap:10px}.section-number{font-size:11px;color:var(--pink);font-weight:800}.section-heading h2{margin:0;font-size:18px;letter-spacing:.4px}.pill{color:#a9b7d8;border:1px solid #ffffff18;border-radius:40px;font-size:10px;letter-spacing:1px;padding:7px 9px}
.picker-wrap{display:grid;place-items:center;min-height:385px}.wheel{position:relative;width:min(100%,342px);aspect-ratio:1;touch-action:none;outline-offset:8px}.wheel-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(red 0deg,#ff0 60deg,#0f0 120deg,#0ff 180deg,#00f 240deg,#f0f 300deg,red 360deg);mask:radial-gradient(circle,transparent 0 62%,#000 63% 100%);-webkit-mask:radial-gradient(circle,transparent 0 62%,#000 63% 100%);box-shadow:0 0 18px #ffffff22;cursor:crosshair}.wheel:after{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid #ffffff15;pointer-events:none}.wheel-handle{position:absolute;left:50%;top:2%;width:21px;height:21px;border:4px solid #fff;border-radius:50%;background:var(--selected);box-shadow:0 2px 11px #000a;transform:translate(-50%,-50%);z-index:3;pointer-events:none}.sv-square{position:absolute;left:50%;top:50%;width:53%;height:53%;transform:translate(-50%,-50%);border-radius:12px;background-color:red;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);box-shadow:0 3px 30px #0009;border:2px solid #ffffff44;cursor:crosshair;touch-action:none;z-index:4}.sv-handle{position:absolute;left:100%;top:0;width:19px;height:19px;border:3px solid white;border-radius:50%;box-shadow:0 2px 9px #000a;transform:translate(-50%,-50%);pointer-events:none}
.swatches{margin:0 auto;max-width:375px;border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:10px}.swatches-label{font-size:12px;color:var(--muted);white-space:nowrap}.swatch-items{display:flex;gap:9px;flex-wrap:wrap}.swatch{width:27px;height:27px;background:var(--swatch);border:3px solid #1d263a;outline:1px solid #ffffff33;border-radius:50%;transition:transform .16s}.swatch:hover{transform:scale(1.15)}
.light-preview{height:136px;position:relative;border-radius:15px;background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--emitted),transparent 56%),transparent 72%),linear-gradient(140deg,#121a2c,#1b2335);overflow:hidden;border:1px solid #ffffff17;display:grid;place-items:center}.preview-orb{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 33% 30%,#ffffff84,var(--emitted) 42%);box-shadow:0 0 18px 3px var(--emitted),0 0 55px 15px color-mix(in srgb,var(--emitted),transparent 55%);transition:background .14s,box-shadow .14s}.preview-caption{position:absolute;left:14px;bottom:11px;color:#c6cde1;font-size:11px;letter-spacing:.8px}.hex-line{display:grid;grid-template-columns:102px 1fr;gap:15px;align-items:center;margin:22px 0 17px}.hex-line label{font-size:12px;color:#c6d0e6;letter-spacing:1px}.hex-box{border:1px solid #ffffff26;background:#0e1628;border-radius:11px;display:flex;align-items:center;gap:5px;height:43px;padding:0 10px;color:#8a9bc0}.hex-box input{width:100%;min-width:0;background:transparent;border:0;color:#f6f4ff;outline:none;text-transform:uppercase;letter-spacing:1.3px;font-weight:700;font-size:14px}.hex-box button{border:0;background:#ffffff12;padding:5px 9px;border-radius:6px;color:#cfdbfa;font-size:11px;white-space:nowrap}.rgb-channels{display:grid;gap:13px}.channel-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}.channel-label label{font-weight:750;font-size:12px;letter-spacing:1.3px}.channel-label label span{color:#96a3c1;font-size:10px;letter-spacing:0;font-weight:500;margin-left:7px}.channel-label input[type=number]{width:67px;padding:4px 7px;background:#0e1628;border:1px solid #ffffff25;border-radius:8px;color:#e9efff;text-align:center;appearance:textfield;-moz-appearance:textfield;font-size:13px}.channel-label input[type=number]::-webkit-inner-spin-button{display:none}.channel input[type=range],.brightness-box input[type=range]{display:block;width:100%;height:7px;appearance:none;-webkit-appearance:none;outline:none;border-radius:10px;background:#303953;cursor:pointer}.channel input[type=range]::-webkit-slider-thumb,.brightness-box input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;background:#fff;border-radius:50%;border:3px solid #eef0ff;box-shadow:0 2px 10px #0008;cursor:pointer}.channel-red input[type=range]{background:linear-gradient(90deg,#3b1727,#fe6d83)}.channel-green input[type=range]{background:linear-gradient(90deg,#173b36,#69dfbd)}.channel-blue input[type=range]{background:linear-gradient(90deg,#182d51,#87acff)}
.brightness-box{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}.brightness-box .channel-label output{color:var(--pink);font-size:17px;font-weight:800}.brightness-box input[type=range]{background:linear-gradient(90deg,#363e55,#ffabc6)}.brightness-marks{display:flex;justify-content:space-between;margin-top:10px;font-size:10px;color:#6e7c9a}.actions{display:flex;gap:10px;margin-top:17px}.action{height:42px;border-radius:10px;border:1px solid #ffffff1c;flex:1;min-width:0;font-size:12px;font-weight:700}.action-off{background:#121a2b;color:#d6def3}.action-on{background:linear-gradient(95deg,#ff9bc8,#9dbdff);color:#262239;border:0}.action:hover{filter:brightness(1.1)}.footer-status{border-top:1px solid var(--line);margin-top:19px;padding-top:12px;color:#9eacc8;display:flex;justify-content:space-between;gap:12px;font-size:11px}.footer-status #message{max-width:80%;line-height:1.5}.page-footer{color:#7b88a9;font-size:11px;display:flex;justify-content:space-between;gap:15px;padding:25px 3px 0}
@media(max-width:850px){.workspace{grid-template-columns:1fr;max-width:610px;margin:auto}.picker-wrap{min-height:360px}.intro{padding:36px 0 28px}.topbar{align-items:flex-start}}@media(max-width:520px){.shell{padding:18px 14px}.topbar{flex-direction:column;gap:17px}.connections{justify-content:flex-start}.panel{padding:20px 17px;border-radius:18px}.wheel{width:min(100%,310px)}.picker-wrap{min-height:332px}.swatches{flex-wrap:wrap}.intro h1{font-size:32px}.hex-line{grid-template-columns:90px 1fr}.page-footer{flex-wrap:wrap}}