:root{--bg-color:#050505;--panel-bg:#14141499;--panel-border:#ffffff14;--text-main:#f0f0f0;--text-muted:#888;--primary-glow:#00cfff}*{box-sizing:border-box;user-select:none;margin:0;padding:0;font-family:Inter,sans-serif}body{background-color:var(--bg-color);color:var(--text-main);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;overflow:hidden}.hidden{display:none!important}.overlay{z-index:100;background:radial-gradient(circle at center, #1a1a24 0%, var(--bg-color) 100%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.glass-panel{backdrop-filter:blur(20px);border:1px solid var(--panel-border);text-align:center;background:#1e1e2366;border-radius:24px;padding:3rem 4rem;animation:1s cubic-bezier(.16,1,.3,1) forwards floatIn;box-shadow:0 20px 40px #00000080}@keyframes floatIn{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.glass-panel h1{letter-spacing:-1.5px;background:linear-gradient(135deg,#fff,#888);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:3.5rem;font-weight:800}.glass-panel p{color:var(--text-muted);margin-bottom:2.5rem;font-size:1.1rem}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#00cfff,#06f);border:none;border-radius:50px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;transition:all .3s;box-shadow:0 0 20px #00cfff66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 30px #00cfff99}.btn-primary:active{transform:translateY(1px)}#app{width:100%;height:100%;position:relative}canvas{touch-action:none;width:100%;height:100%;display:block}.control-panel{background:var(--panel-bg);backdrop-filter:blur(15px);border:1px solid var(--panel-border);z-index:10;border-radius:20px;flex-direction:column;gap:1.5rem;width:300px;max-height:calc(100vh - 60px);padding:1.5rem;display:flex;position:absolute;top:30px;left:30px;box-shadow:0 10px 30px #0000004d}.panel-section h3{text-transform:uppercase;color:var(--text-muted);letter-spacing:1px;margin-bottom:.75rem;font-size:.85rem}.radio-group{flex-direction:column;gap:.5rem;display:flex}.radio-group input[type=radio]{display:none}.radio-group label{cursor:pointer;background:#ffffff08;border:1px solid #0000;border-radius:12px;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.95rem;transition:all .2s;display:flex}.radio-group label:hover{background:#ffffff14}.radio-group input[type=radio]:checked+label{background:#ffffff1a;border-color:#fff3;box-shadow:inset 0 0 10px #ffffff0d}.radio-group input[value=blue]:checked+label{color:#00cfff;border-color:#00cfff;box-shadow:inset 0 0 15px #00cfff1a}.radio-group input[value=red]:checked+label{color:#f36;border-color:#f36;box-shadow:inset 0 0 15px #ff33661a}.radio-group input[value=purple]:checked+label{color:#a833ff;border-color:#a833ff;box-shadow:inset 0 0 15px #a833ff1a}.instructions{border-top:1px solid var(--panel-border);color:#666;flex-direction:column;gap:.5rem;margin-top:1rem;padding-top:1rem;font-size:.8rem;line-height:1.4;display:flex}.instructions p{background:#0000004d;border-radius:8px;padding:.5rem}.btn-small{color:#00cfff;cursor:pointer;background:#00cfff33;border:1px solid #00cfff;border-radius:20px;padding:.25rem .75rem;font-size:.75rem;transition:all .2s}.btn-small:hover{background:#00cfff66}.btn-small:disabled{color:#555;cursor:default;background:0 0;border-color:#555}.mapping-table{flex-direction:column;gap:.5rem;display:flex}.mapping-row{background:#ffffff0d;border-radius:8px;justify-content:space-between;align-items:center;padding:.5rem;display:flex}.sensor-label{color:var(--text-main);font-size:.8rem}.glass-select{color:var(--text-main);background:#00000080;border:1px solid #ffffff1a;border-radius:6px;outline:none;padding:.25rem;font-size:.75rem}.glass-select:focus{border-color:#00cfff}.config-panel{text-align:left;max-width:450px;max-height:90vh;overflow-y:auto}.config-panel::-webkit-scrollbar{width:6px}.config-panel::-webkit-scrollbar-track{background:0 0}.config-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.config-panel::-webkit-scrollbar-thumb:hover{background:#fff6}.config-panel h2{text-align:center;background:linear-gradient(135deg,#fff,#888);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1.5rem;font-size:2rem}.form-group{flex-direction:column;gap:.4rem;margin-bottom:1.5rem;display:flex}.form-group label{color:var(--text-main);font-size:.9rem;font-weight:600}.form-group small{color:var(--text-muted);font-size:.75rem}.glass-input{color:var(--text-main);background:#00000080;border:1px solid #ffffff1a;border-radius:8px;outline:none;padding:.75rem;font-size:1rem;transition:border-color .2s}.glass-input:focus{border-color:#00cfff;box-shadow:0 0 10px #00cfff26}.config-panel .btn-primary{width:100%}@media (width<=768px){.control-panel{border-bottom:none;border-left:none;border-right:none;border-radius:24px 24px 0 0;gap:1rem;width:100%;max-height:45vh;padding:1rem 1.5rem;top:auto;bottom:0;left:0;overflow-y:auto}.radio-group{flex-flow:wrap}.radio-group label{flex:calc(50% - .5rem);justify-content:center}.glass-panel{width:90%;padding:2rem 1.5rem}.glass-panel h1{font-size:2.5rem}}