@import "https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Outfit:wght@300;500;700&display=swap";:root{--bulb-bg:#000411;--bulb-fill:#ffd9d9;--bulb-icon:#000411}.brightness-wrapper{--slider-length:350px;--slider-thickness:100px;--slider-radius:24px;width:var(--slider-thickness);height:var(--slider-length);background:var(--bulb-bg);border-radius:var(--slider-radius);justify-content:center;display:flex;position:relative;overflow:hidden}.brightness-slider{appearance:none;cursor:pointer;transform-origin:50%;width:var(--slider-length);height:var(--slider-thickness);top:calc(50% - (var(--slider-thickness) / 2));left:calc(50% - (var(--slider-length) / 2));background:0 0;margin:0;position:absolute;transform:rotate(-90deg)}.brightness-slider::-webkit-slider-thumb{appearance:none;width:0;height:var(--slider-thickness);box-shadow:-1000px 0 0 1000px var(--bulb-fill)}.brightness-slider::-moz-range-thumb{width:0;height:var(--slider-thickness);box-shadow:-1000px 0 0 1000px var(--bulb-fill);border:none}.brightness-slider::-moz-range-track{background:0 0;border:none}.icon-container{width:45px;height:45px;color:var(--bulb-icon);z-index:2;pointer-events:none;position:absolute;bottom:25px}.sun-icon{width:100%;height:100%}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fff;--panel:#09090b;--border:#2a2a32;--accent:#49a078;--text:#fffffa;--muted:#e0e2db;--on:#57a773;--off:#c20114;--radius:16px}body{background:var(--bg);color:var(--text);font-family:Outfit,sans-serif}.app-root{flex-direction:column;align-items:center;min-height:100vh;padding-top:3vw;display:flex}.fixture-area{grid-template-columns:1fr 4fr 1fr;justify-content:center;width:50%;min-width:300px;max-width:2000px;padding-bottom:20vw;display:grid}.flat-cylinder{background:#000;border-radius:100%;width:100%;max-width:2000px;height:3vw;display:flex;position:relative;box-shadow:0 4px 24px #000c}.rotate{opacity:.4;cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;transition:opacity .2s;display:flex}.rotate:hover{opacity:1}.arm{transform-origin:0%;width:6vw;height:1vw;transform:rotate(var(--angle)) translateX(1vw);background:#000;border-radius:.5vw;position:absolute;bottom:50%;left:50%}.arm>*{position:absolute;top:50%;left:100%;transform:translateY(-50%)rotate(90deg)}.bulb-btn{cursor:pointer;border-radius:50%;transition:filter .2s,transform .2s}.bulb-btn:hover{filter:brightness(1.3)}.bulb-selected{filter:drop-shadow(0 0 12px var(--accent))}.editor-panel{background:var(--panel);border-top:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;z-index:100;max-width:700px;margin:0 auto;padding:24px 28px 32px;transition:transform .35s cubic-bezier(.4,0,.2,1);position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.editor-panel.open{transform:translateY(0)}.editor-header{align-items:center;gap:12px;margin-bottom:20px;display:flex}.editor-swatche{border:2px solid var(--border);border-radius:50%;flex-shrink:0;width:22px;height:22px}.editor-title{letter-spacing:.12em;text-transform:uppercase;flex:1;font-family:Share Tech Mono,monospace;font-size:1rem}.toggle-btn{background:var(--bg);border:1px solid var(--border);color:var(--panel);cursor:pointer;letter-spacing:.1em;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-family:Share Tech Mono,monospace;font-size:.95rem;transition:border-color .2s;display:flex}.toggle-btn:hover{border-color:var(--accent)}.toggle-pip{border-radius:50%;width:8px;height:8px}.toggle-pip.on{background:var(--accent);box-shadow:0 0 6px var(--accent)}.toggle-pip.off{background:var(--off)}.close-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:1.1rem;transition:color .2s}.close-btn:hover{color:var(--text)}.editor-body{align-items:flex-start;gap:28px;display:flex}.editor-left{flex-shrink:0}.editor-right{flex-direction:column;flex:1;gap:10px;display:flex}.ctrl-label{letter-spacing:.15em;color:var(--muted);font-family:Share Tech Mono,monospace;font-size:.68rem;display:block}.sliders-container{z-index:5;flex-direction:row;gap:6px;width:clamp(200px,15%,400px);display:flex;position:absolute;top:20%;right:3%}.slider{-webkit-appearance:none;cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--thumb-color,var(--accent));border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 0 6px #00000080}.sat-slider,.rgb-slider{background:linear-gradient(to right, #fff, var(--thumb-color,red))}.bright-slider{background:linear-gradient(to right, #111, var(--thumb-color,#fff))}.warm-slider{background:linear-gradient(90deg,#fff,#ffad42)}.cool-slider{background:linear-gradient(90deg,#fff,#b3d4ff)}.kelvin-labels{color:var(--muted);justify-content:space-between;margin-top:-6px;font-size:.7rem;display:flex}.kelvin-val{color:var(--accent);font-family:Share Tech Mono,monospace}.hex-row{align-items:center;gap:10px;margin-top:4px;display:flex}.hex-val{letter-spacing:.1em;color:var(--text);font-family:Share Tech Mono,monospace;font-size:1rem}.brightness-container{z-index:1;flex-direction:column;gap:10px;display:flex;position:absolute;top:20%;right:5%}.desk-lamp-container{flex-direction:column;gap:10px;margin:auto;display:flex;position:absolute;bottom:10%}.desk-bulb-btn{cursor:pointer;flex-direction:column;align-items:center;gap:8px;transition:transform .2s;display:flex}.desk-bulb-btn:hover{transform:scale(1.1)}.desk-lamp-label{color:#666;font-size:.9rem;font-weight:500}.hex-input{border:none;border-bottom:1px solid var(--accent);color:var(--text);letter-spacing:.1em;background:0 0;outline:none;width:90px;padding:0;font-family:Share Tech Mono,monospace;font-size:1rem}.hex-val{cursor:text}.buttons{flex-direction:column;gap:10px;display:flex;position:absolute;bottom:50%;left:10%}.onoffButton{color:#fff;cursor:pointer;background-color:#1a1a1a;border:2px solid #2c2c2c;border-radius:30px;outline:none;padding:15px 30px;font-size:1.2rem;font-weight:700;transition:all .4s;position:relative;overflow:hidden}.onoffButton:after{content:"";background:radial-gradient(circle,#ffffff40 0%,#fff0 70%);width:100%;height:100%;transition:transform .5s;position:absolute;top:0;left:0;transform:scale(0)}.splitButton{padding:0;display:flex}.split-half{cursor:pointer;flex:1;justify-content:center;align-items:center;padding:15px 20px;transition:background .2s;display:flex}.split-left{border-right:1px solid #2c2c2c}.split-left:hover{background:#111}.split-right:hover{background:#3a2a00}.switch{width:clamp(100px,50%,300px);height:2em;font-size:17px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.sliderSwitch{cursor:pointer;border:2px solid var(--border);transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:absolute;inset:0}.sliderSwitch:before{content:"";background-color:var(--accent);border-radius:inherit;width:1.4em;height:1.4em;transition:all .4s cubic-bezier(.23,1,.32,1);position:absolute;bottom:.2em;left:.2em}.switch input:checked+.sliderSwitch:before{left:calc(100% - 1.6em)}.switch-row{align-items:center;gap:.6em;display:flex}.switch-label{color:var(--muted);transition:color .3s,font-weight .3s}.switch-label.active{color:var(--accent);font-weight:600}.wheel-wrap{cursor:crosshair;-webkit-user-select:none;user-select:none;width:200px;height:200px;position:relative}.wheel-canvas{border-radius:50%;display:block}.wheel-marker{pointer-events:none;border:2.5px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 6px #000000b3}.slider-container{justify-content:center;align-items:center;width:50px;display:inline-flex;position:relative}.range-box{flex-direction:column;display:flex}.vertical-slider{appearance:none;cursor:pointer;writing-mode:vertical-lr;direction:rtl;border-radius:4px;outline:none;width:8px;height:fit-content;position:relative}.vertical-slider::-webkit-slider-thumb{appearance:none;width:24px;height:24px;box-shadow:none;background:0 0;border:none;border-radius:50%}.vertical-slider::-moz-range-thumb{width:24px;height:24px;box-shadow:none;background:0 0;border:none;border-radius:50%}.slider-thumb{pointer-events:none;background:#fff;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:transform .1s,background-color .1s;display:flex;position:absolute;left:50%;transform:translate(-50%,50%);box-shadow:0 2px 6px #0003}.vertical-slider:focus-visible~.slider-thumb{outline-offset:2px;outline:2px solid #007bff}.control-plus-minus{color:#fff;text-align:center;cursor:pointer;z-index:1;background-color:#009fdf;border:none;border-radius:3px;width:50%;height:35px;margin:auto;font-family:inherit;font-size:35px;font-weight:700;line-height:35px;position:relative}.control-plus-minus:hover{background-color:#00adf2;border-bottom-width:3px;top:1px}.control-plus-minus:active{background-color:#009fdf;border-bottom-width:2px;top:3px}.buttons{z-index:5;flex-direction:column;gap:6px;width:clamp(200px,15%,400px);display:flex;position:absolute;top:20%;left:3%}.topButton{color:#fff;cursor:pointer;background-color:#1a1a1a;border:2px solid #2c2c2c;border-radius:30px;outline:none;justify-content:space-between;width:100%;padding:15px 30px;font-size:1.2rem;font-weight:700;transition:all .4s;display:flex;position:relative}.arrow{transform:scale(2) rotateZ(var(--angle));transition:transform .3s;display:inline-block}.button-grid{transform-origin:top;grid-template-columns:1fr 1fr;gap:8px;width:95%;margin-left:auto;margin-right:auto;padding-top:1rem;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;display:grid}.grid-closed{opacity:0;pointer-events:none;transform:scaleY(0)}.grid-open{opacity:1;transform:scaleY(1)}.button{aspect-ratio:1;color:#fff;cursor:pointer;opacity:0;background-color:#1a1a1a;border:2px solid #2c2c2c;border-radius:30px;justify-content:center;align-items:center;width:100%;margin:auto;padding:12px;font-size:1rem;transition:all .4s;display:flex;transform:translateY(-100px)}.button.active{opacity:1;transition:opacity .3s ease calc(var(--i,0) * 50ms), transform .3s ease calc(var(--i,0) * 50ms);transform:translateY(-10px)}.button:hover,.topButton:hover{background:#292929;border-color:#666}.button svg{opacity:.9;width:10%;min-width:40px;max-width:100px;height:60px}.editor-swatch{border:2px solid var(--border);border-radius:50%;flex-shrink:1;width:50%;height:50%}.colorSwatch{flex-wrap:wrap;justify-content:flex-start;width:100%;height:100%;display:flex}