@import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;900&display=swap";:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color-scheme:light;background-color:#fff;color:#000}body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh}.main-column{display:flex;flex-direction:column;gap:.5rem;align-items:center}.copyright{font-size:1rem;color:#000;text-align:center}#app-wrapper{position:relative;display:flex;align-items:flex-start;gap:12px}#app{width:360px;padding:1.25rem;border:4px solid #000000;border-radius:0;background-color:#fff;box-shadow:none}.side-icons{display:flex;flex-direction:column;gap:0;padding-top:0}.icon-btn{width:44px;height:44px;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;border-radius:50%;cursor:pointer;padding:0;transition:all .2s ease-in-out;color:#000;text-decoration:none}.icon-btn:hover{background-color:transparent;color:#888}.icon-btn svg{width:28px;height:28px;fill:currentColor;stroke:none;display:block}#info-btn svg{width:34px;height:34px}.container{display:flex;flex-direction:column;gap:1.5rem}h1{font-family:Noto Sans,sans-serif;font-weight:900;font-size:1.5rem;line-height:1.2;margin:0 0 .1rem;text-align:center;color:#000;text-transform:uppercase;letter-spacing:-.5px;white-space:nowrap}.container.disconnected .control-group,.container.disconnected label,.container.disconnected .input-row{color:#ccc}.container.disconnected input[type=range]{opacity:.3}.status{font-size:.8rem;font-weight:900;padding:.4rem;border:none;border-radius:0;text-align:center;background-color:#eee;color:#000;text-transform:uppercase;margin-bottom:-.5rem;margin-top:-.5rem}.status.connected{background-color:#0f0}.status.disconnected{background-color:red;color:#fff}.control-group{display:flex;flex-direction:column;gap:.5rem}.checkbox-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:.9rem;text-transform:none;width:100%}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:#000000;cursor:pointer;order:1}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.3}label{font-size:.9rem;font-weight:900;color:#000;text-transform:uppercase}.slider-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.15rem}.input-row{display:flex;gap:1rem;align-items:center}input[type=range]{flex:1;accent-color:#000000;height:8px}input[type=number]{width:70px;background-color:#fff;color:#000;border:2px solid #000000;border-radius:0;padding:.3rem;text-align:right;font-size:1rem;font-weight:700}input[type=number]:focus{outline:none;background-color:#eee}input[type=number]:disabled{border-color:#ccc;color:#ccc}.tooltip-container{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}.tooltip{position:absolute;background-color:#ffeb3b;color:#000;padding:.4rem .6rem;border:2px solid #000000;border-radius:0;font-size:.75rem;font-weight:900;white-space:nowrap;pointer-events:none;z-index:10;box-shadow:4px 4px #000}.tooltip.top{bottom:calc(100% + 10px)}.tooltip.bottom{top:calc(100% + 10px)}.tooltip:after{content:"";position:absolute;border:8px solid transparent}.tooltip.top:after{top:100%;left:50%;transform:translate(-50%);border-top-color:#000}.tooltip.bottom:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:#000}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#ffffffe6;display:flex;justify-content:center;align-items:center;z-index:100}.modal-content{width:360px;background-color:#fff;border:4px solid #000000;padding:1.5rem;box-shadow:8px 8px #000}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-header h2{font-family:Noto Sans,sans-serif;font-weight:900;font-size:1.25rem;margin:0;text-transform:uppercase}.close-btn{background:none;border:none;font-size:2rem;font-weight:900;cursor:pointer;padding:0;line-height:1;color:#000;width:auto}.close-btn:hover{color:#888}.modal-body{font-size:.9rem;line-height:1.6}.modal-body p{margin:0 0 1rem}.hidden{display:none}button{width:100%;padding:.75rem;border:3px solid #000000;border-radius:0;background-color:#000;color:#fff;font-weight:900;font-size:1.1rem;text-transform:uppercase;cursor:pointer;transition:all .1s}button:hover:not(:disabled){background-color:#fff;color:#000}button:active:not(:disabled){transform:translate(1.5px,1.5px)}button:disabled{background-color:#fff;border-color:#ccc;color:#ccc;cursor:not-allowed}button.secondary:disabled{background-color:#fff;border-color:#ccc;color:#ccc}button.secondary{background-color:#fff;color:#000}button.secondary:hover:not(:disabled){background-color:#000;color:#fff}