:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f3f7f1;font-synthesis:none;text-rendering:optimizelegibility;--acid:#0f6;--ink:#050806;--panel:#0f1411db;--line:#c5ffd724;--muted:#8c9a91;--racket-color:#0f6;--racket-glow:.72;--range-progress:72%;background:#050806;font-family:Helvetica Neue,Helvetica,Arial,system-ui,sans-serif}*{box-sizing:border-box}html{background:var(--ink);scroll-behavior:smooth;min-width:320px}body{background:var(--ink);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{isolation:isolate;background:radial-gradient(circle at 77% 18%, color-mix(in srgb, var(--racket-color) 17%, transparent), transparent 27%), radial-gradient(circle at 12% 70%, #00ff6614, transparent 25%), linear-gradient(145deg, #060a08 0%, #020403 70%);min-height:100vh;padding:0 clamp(20px,3vw,56px) 32px;position:relative;overflow-x:hidden}.app-shell:before{content:"";z-index:-1;pointer-events:none;opacity:.34;background-image:radial-gradient(#a4ffc229 .65px,#0000 .65px);background-size:7px 7px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 72%);mask-image:linear-gradient(#000,#0000 72%)}.app-shell:after{content:"";z-index:-1;border:1px solid #00ff6617;border-radius:50%;width:520px;height:520px;position:fixed;top:240px;right:-210px;box-shadow:0 0 0 70px #00ff6605,0 0 0 140px #00ff6603}.topbar{z-index:2;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:82px;display:flex;position:relative}.brand{color:var(--acid);letter-spacing:-.06em;align-items:center;gap:10px;font-size:23px;font-weight:700;text-decoration:none;display:inline-flex}.brand-glyph{font-size:25px;font-weight:400;transform:rotate(-9deg)}.topbar-meta{color:#dce5df;letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:10px;font:500 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:flex}.version{color:var(--muted);margin-left:12px}.signal-dot{background:var(--acid);width:7px;height:7px;box-shadow:0 0 12px var(--acid);border-radius:50%}.hero{width:min(100%,1160px);max-width:none;margin-inline:auto;padding:clamp(38px,5vw,64px) 0 clamp(30px,4vw,48px)}.kicker,.step,.field-label{color:var(--acid);letter-spacing:.14em;text-transform:uppercase;margin:0;font:500 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.hero h1{letter-spacing:-.075em;text-transform:lowercase;max-width:960px;margin:15px 0 18px;font-size:clamp(58px,7.2vw,104px);font-weight:600;line-height:.84}.hero h1 span{color:var(--acid);text-shadow:0 0 50px #00ff6638}.hero-copy{color:#a8b4ac;max-width:650px;margin:0;font-size:clamp(16px,2vw,20px);line-height:1.55}.workspace{grid-template-columns:420px minmax(0,1fr);align-items:start;gap:16px;width:min(100%,1180px);max-width:1180px;margin-inline:auto;display:grid}.panel{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:8px;position:relative;overflow:hidden;box-shadow:0 28px 70px #00000061}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:18px;min-height:98px;padding:24px 26px;display:flex}.panel-heading h2{letter-spacing:-.04em;margin:9px 0 0;font-size:22px;line-height:1.1}.connection-state{color:#829087;text-transform:uppercase;letter-spacing:.08em;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:7px;padding:8px 10px;font:500 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:inline-flex}.connection-state>span{background:currentColor;border-radius:50%;width:5px;height:5px}.connection-state.connected,.connection-state.saving{color:var(--acid);background:#00ff6612;border-color:#00ff6652}.connection-state.connecting{color:#d9e6dc;border-color:#ffffff2e}.locked-state{color:#69756d}.hex-readout{color:#d7e2da;letter-spacing:.08em;font:500 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.device-visual{background:linear-gradient(#0000 45%,#070b09 100%),url(/night-racket.webp) 50% 52%/cover;min-height:338px;position:relative;overflow:hidden}.device-visual:before{content:"";background:linear-gradient(145deg,#0307052e,#030705a3);position:absolute;inset:0}.device-visual:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 90px #020403}.photo-noise{opacity:.13;mix-blend-mode:overlay;background-image:radial-gradient(#fff .45px,#0000 .55px);background-size:5px 5px;position:absolute;inset:0}.light-orbit{border:1px solid color-mix(in srgb, var(--racket-color) 62%, transparent);width:126px;height:126px;box-shadow:0 0 calc(54px * var(--racket-glow)) color-mix(in srgb, var(--racket-color) 72%, transparent), inset 0 0 40px color-mix(in srgb, var(--racket-color) 25%, transparent);border-radius:50%;transition:border-color .2s,box-shadow .2s;position:absolute;top:43%;left:50%;transform:translate(-50%,-50%)}.light-orbit:before,.light-orbit:after{content:"";border:1px dashed color-mix(in srgb, var(--racket-color) 38%, transparent);border-radius:50%;position:absolute;inset:11px}.light-orbit:after{background:color-mix(in srgb, var(--racket-color) 9%, transparent);border-style:solid;inset:28px}.light-orbit span{background:var(--racket-color);width:8px;height:8px;box-shadow:0 0 14px var(--racket-color);border-radius:50%;position:absolute;top:-4px;left:calc(50% - 4px)}.device-readout{z-index:1;color:#a5b1a9;letter-spacing:.12em;justify-content:space-between;align-items:flex-end;font:500 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:flex;position:absolute;bottom:20px;left:24px;right:24px}.device-readout strong{color:#fff;letter-spacing:-.04em;font-size:28px}.connect-button,.save-button{cursor:pointer;border:0;border-radius:4px;justify-content:center;align-items:center;gap:10px;width:calc(100% - 48px);min-height:54px;margin:24px 24px 0;font-weight:700;transition:box-shadow .16s,opacity .16s,color .16s,background-color .16s,border-color .16s;display:flex}.connect-button{color:#031007;background:var(--acid);box-shadow:0 10px 36px #00ff662b}.connect-button:hover:not(:disabled),.save-button:hover:not(:disabled){box-shadow:0 14px 38px #00ff6640}.connect-button.secondary{color:var(--acid);box-shadow:none;background:#00ff6609;border:1px solid #00ff666b}.connect-button.secondary:hover:not(:disabled){background:#00ff6614;border-color:#00ff66c7;box-shadow:0 10px 30px #00ff6614}.connect-button:disabled,.save-button:disabled{cursor:not-allowed;opacity:.34}.connect-button:focus-visible,.save-button:focus-visible,.preset:focus-visible,.range:focus-visible,.colour-well:focus-within{outline-offset:3px;outline:2px solid #f4fff7}.button-arrow{margin-left:auto;font-size:17px}.connect-button svg{margin-left:auto}.button-spinner{border:2px solid #03100747;border-top-color:#031007;border-radius:50%;width:17px;height:17px;margin-left:auto;animation:.7s linear infinite spin}.microcopy{min-height:42px;color:var(--muted);text-align:center;margin:12px 24px 20px;font:400 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}.controls-panel{min-height:508px;padding-bottom:22px}.controls-stage{min-height:408px}.controls-content,.locked-content{animation:.18s ease-out both fade-state}.locked-content{color:#78857c;text-align:center;background:linear-gradient(145deg,#ffffff03,#0000 68%);flex-direction:column;justify-content:center;align-items:center;min-height:408px;padding:42px;display:flex}.lock-mark{color:#718078;background:#ffffff06;border:1px solid #ffffff1a;border-radius:50%;place-items:center;width:58px;height:58px;margin-bottom:20px;display:grid;box-shadow:inset 0 0 28px #ffffff06}.locked-content h3{color:#bdc7c0;letter-spacing:-.025em;margin:0;font-size:18px}.locked-content p{color:#6f7b73;max-width:300px;margin:10px 0 0;font-size:12px;line-height:1.55}.colour-editor{align-items:center;gap:20px;padding:26px;display:flex}.colour-well{cursor:pointer;height:82px;box-shadow:0 0 calc(42px * var(--racket-glow)) color-mix(in srgb, var(--racket-color) 50%, transparent);border-radius:50%;flex:0 0 82px;place-items:center;display:grid;position:relative}.colour-well input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.colour-well-ring{border:1px solid #ffffffb3;border-radius:50%;width:62px;height:62px;box-shadow:inset 0 0 0 8px #0000001f}.colour-editor strong{font-size:16px}.colour-editor p{max-width:300px;color:var(--muted);margin:7px 0 0;font-size:12px;line-height:1.5}.preset-section{border-bottom:1px solid var(--line);padding:0 26px 24px}.presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px;display:grid}.preset{color:#aeb8b1;cursor:pointer;background:#ffffff06;border:1px solid #ffffff1a;border-radius:4px;align-items:center;gap:7px;min-width:0;height:38px;padding:0 9px;font:500 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;transition:border-color .15s,color .15s,background .15s;display:flex}.preset>span{border-radius:50%;flex:0 0 12px;width:12px;height:12px;box-shadow:0 0 10px}.preset:hover:not(:disabled),.preset.active{color:#fff;border-color:color-mix(in srgb, var(--racket-color) 65%, transparent);background:color-mix(in srgb, var(--racket-color) 8%, transparent)}.preset:disabled{opacity:.35;cursor:not-allowed}.brightness-heading{justify-content:space-between;align-items:flex-end;padding:24px 26px 12px;display:flex}.brightness-heading output{font:500 28px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.brightness-heading small{color:var(--muted);margin-left:3px;font-size:11px}.range{appearance:none;background:linear-gradient(90deg, var(--racket-color) 0 var(--range-progress), #263029 var(--range-progress) 100%);width:calc(100% - 52px);height:4px;box-shadow:0 0 15px color-mix(in srgb, var(--racket-color) 16%, transparent);border:0;border-radius:99px;margin:8px 26px 24px}.range::-webkit-slider-thumb{appearance:none;background:var(--racket-color);width:20px;height:20px;box-shadow:0 0 0 1px var(--racket-color), 0 0 15px color-mix(in srgb, var(--racket-color) 70%, transparent);cursor:grab;border:5px solid #071009;border-radius:50%}.range::-moz-range-thumb{background:var(--racket-color);width:12px;height:12px;box-shadow:0 0 0 1px var(--racket-color);cursor:grab;border:4px solid #071009;border-radius:50%}.range:disabled{opacity:.35}.live-preview{border:1px solid var(--line);text-transform:uppercase;letter-spacing:.08em;background:#090d0b;border-radius:4px;align-items:center;gap:11px;height:54px;margin:0 26px 18px;padding:0 14px;font:500 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:flex;position:relative;overflow:hidden}.live-preview:after{content:"";pointer-events:none;background:linear-gradient(90deg, color-mix(in srgb, var(--racket-color) 7%, transparent), transparent);position:absolute;inset:0}.preview-light{width:15px;height:15px;box-shadow:0 0 18px var(--racket-color);border-radius:50%}.live-preview span,.live-preview strong{z-index:1;position:relative}.live-preview span{color:var(--muted)}.live-preview strong{color:#fff;margin-left:auto}.save-button{color:#031007;background:var(--acid);margin-top:0;box-shadow:0 10px 34px #00ff662b}.save-button span{margin-left:4px;font-size:18px}.status-message{min-height:34px;color:var(--muted);align-items:flex-start;gap:8px;margin:13px 26px 0;font:400 10px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;display:flex}.status-message>span{color:#77837b;margin-top:4px;font-size:7px}.status-message.success,.status-message.success>span{color:var(--acid)}.status-message.error,.status-message.error>span{color:#f77}footer{border-top:1px solid var(--line);color:#647069;letter-spacing:.12em;justify-content:space-between;max-width:1160px;margin:56px 0 0 auto;padding-top:20px;font:500 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:flex}@keyframes fade-state{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@media (width>=900px){.app-shell{grid-template-rows:62px auto minmax(0,1fr) 28px;gap:0;min-height:100svh;padding-bottom:12px;display:grid}.topbar{height:62px}.hero{width:min(100%,1160px);max-width:none;margin-inline:auto;padding:clamp(34px,5vh,54px) 0 clamp(24px,3.5vh,38px)}.hero h1{margin:13px 0 17px;font-size:clamp(58px,7vw,96px);line-height:.84}.hero-copy{max-width:650px;margin:0;font-size:15px;line-height:1.5}.workspace{grid-template-columns:420px minmax(0,1fr);align-items:stretch;gap:16px;width:min(100%,1180px);min-height:0}.panel{min-height:0}.device-panel{grid-template-rows:auto minmax(150px,1fr) auto auto;display:grid}.controls-panel{flex-direction:column;padding-bottom:12px;display:flex}.panel-heading{min-height:74px;padding:17px 20px}.panel-heading h2{margin-top:7px;font-size:19px}.device-visual{min-height:150px}.light-orbit{width:104px;height:104px}.device-readout{bottom:15px;left:20px;right:20px}.connect-button,.save-button{width:calc(100% - 40px);min-height:44px;margin-inline:20px}.connect-button{margin-top:16px}.microcopy{min-height:28px;margin:8px 20px 10px;font-size:9px;line-height:1.4}.colour-editor{gap:17px;padding:16px 20px}.colour-well{flex-basis:62px;height:62px}.colour-well-ring{border-width:1px;width:46px;height:46px;box-shadow:inset 0 0 0 6px #0000001f}.colour-editor strong{font-size:14px}.colour-editor p{margin-top:4px;font-size:10px;line-height:1.35}.preset-section{padding:0 20px 14px}.presets{gap:6px;margin-top:10px}.preset{height:32px;padding-inline:8px;font-size:8px}.brightness-heading{padding:14px 20px 7px}.brightness-heading output{font-size:23px}.range{width:calc(100% - 40px);margin:7px 20px 16px}.live-preview{height:42px;margin:0 20px 12px}.save-button{min-height:44px;margin-top:0}.status-message{min-height:24px;margin:8px 20px 0;font-size:9px}footer{align-self:end;width:min(100%,1160px);max-width:none;height:28px;margin:0 0 0 auto;padding-top:10px}}@media (width<=899px){.workspace{grid-template-columns:1fr;max-width:680px}.hero{padding-top:62px}.hero h1{font-size:clamp(54px,14vw,92px)}footer{max-width:680px}}@media (width<=560px){.app-shell{padding-inline:16px}.topbar{height:68px}.brand{font-size:20px}.topbar-meta>span:not(.signal-dot):not(.version){display:none}.hero{padding:48px 0 36px}.hero h1{margin-top:13px;font-size:clamp(48px,17vw,72px)}.hero-copy{font-size:15px}.panel-heading{min-height:88px;padding:21px 20px}.panel-heading h2{font-size:19px}.device-visual{min-height:290px}.presets{grid-template-columns:repeat(2,minmax(0,1fr))}.colour-editor,.preset-section,.brightness-heading{padding-inline:20px}.range{width:calc(100% - 40px);margin-inline:20px}.live-preview{margin-inline:20px}.connect-button,.save-button{width:calc(100% - 40px);margin-inline:20px}.microcopy,.status-message{margin-inline:20px}footer{gap:16px}footer span:nth-child(2){display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}