@import url('/static/brand.css');
/* Touch controls and motion, with no changes to the device protocol. */
:root{--accent-glow:#ca28ff26;--range-fill:0%}html{scroll-behavior:smooth}body{background:radial-gradient(ellipse at 5% 20%,#45135352,transparent 45%),radial-gradient(ellipse at 95% 2%,#75088b45,transparent 38%),#08060d}.public-header{background:#0b0711a6;backdrop-filter:blur(18px)}.brand-lockup>img{box-shadow:0 0 24px #b92bfa17}.workspace{max-width:1440px}.panel-hero{position:relative;isolation:isolate;border-color:#74328b;background:radial-gradient(ellipse at 15% 30%,#4c155b88,transparent 70%),linear-gradient(125deg,#26102f,#100a17 75%);box-shadow:0 20px 65px #0003}.panel-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 35%,#e75dff06 45%,transparent 55%);pointer-events:none}.panel-hero .eyebrow{letter-spacing:2.5px}.panel-hero h1{font-size:clamp(32px,3.5vw,48px);font-weight:900;line-height:1.05}.panel-hero img{border:1px solid #b642d83b;box-shadow:0 12px 38px #0004}.control{border-color:#5b2b68;box-shadow:0 18px 60px #0003}.metrics{gap:12px;padding:18px 0}.metrics>div{padding:12px;border:1px solid #3b244a;border-radius:11px;background:#130b1b}.metrics small{font-size:10px}.metrics strong{font-size:16px;margin-top:6px}.sync-pill{display:inline-block;font-size:9px;padding:3px 7px;border-radius:5px;color:#d4addf;background:#381941;margin-top:8px}.sync-pill.is-synced{color:#91edbd;background:#103523}.device-heading h2{font-size:26px}.badge.online{color:#80e6b0}.connection-note{font-size:11px;line-height:1.8;margin-bottom:6px}.section-label{margin:30px 0 16px}.section-label h3{font-size:17px;letter-spacing:-.3px}.section-label>span{font-size:10px;color:#b092bd}.feature-grid{gap:12px}.toggle{min-height:57px;padding:15px;font-size:12px;border-color:#3b2448;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}.toggle.is-on{background:linear-gradient(120deg,#30133b,#1a0d24);border-color:#a53ac3;box-shadow:inset 0 0 20px #b925ed08}.toggle input{flex-basis:42px;width:42px;height:25px}.toggle input:before{width:19px;height:19px;top:3px;left:3px;transition:transform .2s,background .2s}.toggle input:checked:before{left:3px;transform:translateX(17px)}.toggle input:checked{background:linear-gradient(90deg,#a51cd0,#d13cf9);box-shadow:0 0 16px #bb27f02b}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.range-card{display:block;min-width:0;background:linear-gradient(130deg,#1d1027,#100a17);border:1px solid #44244f;border-radius:13px;padding:16px 16px 12px;transition:border-color .18s,box-shadow .18s,background .18s}.range-card:focus-within{border-color:#d156f4;box-shadow:0 0 0 3px #bf32e91a}.range-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#eadbf2;font-size:12px;font-weight:600;line-height:1.4}.range-heading output{display:inline-flex;align-items:center;justify-content:center;min-width:43px;padding:5px 8px;border:1px solid #87349a;border-radius:7px;color:#f1c2ff;background:#42194f;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 0 16px #a222ce10}.settings-grid input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;border:0;border-radius:0;outline:none;box-shadow:none;margin:9px 0 0;padding:0;cursor:ew-resize;background:transparent;touch-action:pan-y;accent-color:#d944ff}.settings-grid input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:99px;background:linear-gradient(to right,#a72bdf 0%,#e15cff var(--range-fill),#38223f var(--range-fill),#38223f 100%)}.settings-grid input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:23px;width:23px;margin-top:-8px;border-radius:50%;border:4px solid #e5a1ff;background:#fff4ff;box-shadow:0 0 0 5px #bb36e51a,0 2px 8px #0007;transition:box-shadow .15s,transform .15s}.settings-grid input[type=range]:active::-webkit-slider-thumb{transform:scale(1.13);box-shadow:0 0 0 9px #b53ee525,0 0 24px #d840ff50}.settings-grid input[type=range]::-moz-range-track{height:7px;border-radius:99px;background:#38223f}.settings-grid input[type=range]::-moz-range-progress{height:7px;border-radius:99px;background:linear-gradient(90deg,#a72bdf,#e15cff)}.settings-grid input[type=range]::-moz-range-thumb{height:16px;width:16px;border-radius:50%;border:4px solid #e5a1ff;background:#fff4ff;box-shadow:0 0 0 5px #bb36e51a}.range-limits{display:flex;justify-content:space-between;color:#977fa5;font-size:9px;font-variant-numeric:tabular-nums}.save-bar{position:sticky;bottom:15px;z-index:3;margin-top:26px;padding:16px;border:1px solid #673079;border-radius:13px;background:#180d22ed;backdrop-filter:blur(18px);box-shadow:0 8px 35px #0006;transition:border-color .2s,box-shadow .2s}.save-bar[data-dirty=true]{border-color:#cf54f3;box-shadow:0 0 22px #ac2bcc1a,0 8px 35px #0006}.save-bar button{min-height:46px;font-size:12px;border:1px solid #ec8bff55;box-shadow:0 6px 25px #a21fc32b}.save-bar span{font-size:11px;line-height:1.6}.message{border-radius:11px;box-shadow:0 10px 35px #0003}.message[data-kind=success]{border-color:#50745e;color:#b8eccb;background:#12271b}.message[data-kind=error]{border-color:#9c4665;color:#f5bed1;background:#2d1221}.linked-badge{font-size:9px}.key-card{border-color:#74378b;box-shadow:0 25px 90px #0006,0 0 60px #a820e00b}.enter-button{min-height:49px;transition:box-shadow .2s,transform .2s}.enter-button:focus-visible,button:focus-visible{outline:2px solid #f4b2ff;outline-offset:4px}.community{transition:background .2s,border-color .2s}.empty-logo{box-shadow:0 0 50px #9826c41c}.device-card{transition:background .18s,border-color .18s}.device-card.active{box-shadow:inset 3px 0 #d342fb,0 8px 28px #0003}.panel-hero,.access-story{animation:rise-in .55s both}.key-card{animation:rise-in .65s .07s both}.panel-page .layout{animation:rise-in .55s .1s both}.message:not(:empty){animation:notice-in .22s both}@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes notice-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(hover:hover){.range-card:hover{border-color:#834194}.toggle:hover{border-color:#874495;transform:translateY(-1px)}.enter-button:hover,.save-bar button:hover{box-shadow:0 8px 32px #c32af048;transform:translateY(-1px)}.community:hover{border-color:#a752bd;background:#391443}.device-card:hover{border-color:#c457e0}}@media(max-width:760px){.panel-page .workspace{padding:22px 4% 16px}.panel-hero{padding:23px;margin-bottom:22px}.panel-hero img{max-height:160px}.panel-hero h1{font-size:36px}.panel-page .layout{gap:18px}.device-list{grid-template-columns:1fr}.aside-note{display:none}.aside-heading{margin-top:2px;font-size:9px}.device-card{padding:15px 17px}.control{padding:18px 15px;border-radius:16px}.device-heading{gap:12px;flex-direction:row;align-items:center}.device-heading h2{font-size:23px}.metrics{grid-template-columns:1fr 1fr;gap:9px}.metrics>div:last-child{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.metrics>div:last-child strong{font-size:12px;margin:0}.metrics>div:last-child .sync-pill{margin:0}.metrics strong{font-size:19px}.feature-grid{grid-template-columns:1fr 1fr;gap:9px}.toggle{padding:12px 10px;min-height:62px;font-size:10px;line-height:1.5;gap:7px}.toggle input{flex-basis:36px;width:36px;height:23px}.toggle input:before{width:17px;height:17px}.toggle input:checked:before{transform:translateX(13px)}.settings-grid{grid-template-columns:1fr;gap:12px}.range-card{padding:16px 17px 12px}.range-heading{font-size:13px}.range-heading output{font-size:14px;min-width:49px}.range-limits{font-size:10px}.section-label>span{font-size:9px}.save-bar{bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:12px;align-items:stretch;padding:14px}.save-bar button{width:100%;min-height:49px}.save-bar span{text-align:center;font-size:10px}.connection-note{font-size:10px}.key-card{border-radius:20px}.key-input input{font-size:13px}.activation-note p{font-size:11px}.public-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}}@media(max-width:360px){.feature-grid{grid-template-columns:1fr}.toggle{font-size:12px;min-height:53px}.section-label{align-items:flex-start;gap:8px}.linked-badge{font-size:8px;padding:5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
