@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap";:root{--navy: #0C1B54;--bg: #F7F7F7;--white: #ffffff;--navy-60: rgba(12,27,84,.6);--navy-20: rgba(12,27,84,.2);--navy-10: rgba(12,27,84,.1);--font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;--tracking-xl: 4px;--tracking-md: 2px;--tracking-sm: 1px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--navy);text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh}.browser-banner{background:#c0392b;color:var(--white);text-align:center;padding:10px 20px;font-size:10px;font-weight:400;letter-spacing:var(--tracking-md)}.top-bar{display:flex;align-items:center;gap:24px;padding:0 40px;height:64px;border-bottom:1px solid var(--navy-20);background:var(--white)}.top-bar-brand{display:flex;align-items:center;gap:20px;flex:1}.top-bar-brand img{height:28px;mix-blend-mode:multiply}.top-bar-brand .subtitle{font-size:10px;font-weight:400;letter-spacing:var(--tracking-xl);color:var(--navy-60)}.connection-status{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:400;letter-spacing:var(--tracking-md)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--navy-20);flex-shrink:0}.status-dot.active{background:#27ae60}.btn{font-family:var(--font);font-size:10px;font-weight:400;letter-spacing:var(--tracking-md);text-transform:uppercase;cursor:pointer;border-radius:0;padding:10px 22px;transition:opacity .15s}.btn:disabled{opacity:.3;cursor:default}.btn-primary{background:var(--navy);color:var(--white);border:1px solid transparent}.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--navy)}.toggle-group{display:flex}.toggle-group .btn-toggle{font-family:var(--font);font-size:10px;font-weight:400;letter-spacing:var(--tracking-md);text-transform:uppercase;cursor:pointer;border-radius:0;padding:10px 22px;background:transparent;color:var(--navy);border:1px solid var(--navy-20);transition:background .15s,color .15s}.toggle-group .btn-toggle+.btn-toggle{margin-left:-1px}.toggle-group .btn-toggle.active{background:var(--navy);color:var(--white);border-color:var(--navy)}.toggle-group .btn-toggle:disabled{opacity:.3;cursor:default}.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--navy-20);border-bottom:1px solid var(--navy-20)}.controls-grid.disabled{opacity:.35;pointer-events:none}.controls-panel{background:var(--bg);padding:32px 40px}.section-title{display:flex;align-items:center;gap:16px;margin:30px 0 20px;font-size:9px;font-weight:400;letter-spacing:var(--tracking-xl);color:var(--navy-60);white-space:nowrap}.section-title:first-child{margin-top:0}.section-title:before,.section-title:after{content:"";flex:1;height:1px;background:var(--navy-20)}.control-row{margin-bottom:18px}.control-row label{display:block;font-size:10px;font-weight:400;letter-spacing:var(--tracking-md);color:var(--navy);margin-bottom:8px}.param-group{margin-bottom:22px}.param-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}.param-label{font-size:10px;font-weight:400;letter-spacing:var(--tracking-md);color:var(--navy)}.param-unit{font-size:10px;font-weight:400;letter-spacing:var(--tracking-md);color:var(--navy-60)}.param-value{font-size:28px;font-weight:300;color:var(--navy);text-align:center;width:100%;border:none;border-bottom:1px solid var(--navy-20);background:transparent;padding:6px 0;font-family:var(--font);outline:none;-moz-appearance:textfield}.param-value::-webkit-inner-spin-button,.param-value::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.param-value:focus{border-bottom-color:var(--navy)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1px;background:var(--navy-20);outline:none;margin:14px 0 6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--navy);border:none;cursor:pointer;transform:rotate(45deg)}input[type=range]::-moz-range-track{height:1px;background:var(--navy-20);border:none}input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--navy);border:none;border-radius:0;cursor:pointer;transform:rotate(45deg)}.apply-row{display:flex;justify-content:flex-end;margin-top:14px}.reset-section{display:flex;margin-top:4px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--navy-20);border-bottom:1px solid var(--navy-20)}.battery-section{background:var(--bg);padding:32px 40px}.battery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--navy-20);border:1px solid var(--navy-20)}.battery-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;background:var(--white)}.battery-label{font-size:9px;font-weight:400;letter-spacing:var(--tracking-xl);color:var(--navy-60)}.battery-value{font-size:20px;font-weight:300;color:var(--navy);letter-spacing:var(--tracking-sm)}.battery-unit{font-size:9px;font-weight:400;letter-spacing:var(--tracking-md);color:var(--navy-60)}.log-section{background:var(--bg);padding:32px 40px}.log-container{border:1px solid var(--navy-20);background:var(--white);height:180px;overflow-y:auto;padding:10px 14px;scrollbar-width:thin;scrollbar-color:var(--navy-20) transparent}.log-container::-webkit-scrollbar{width:4px}.log-container::-webkit-scrollbar-track{background:transparent}.log-container::-webkit-scrollbar-thumb{background:var(--navy-20)}.log-entry{font-family:SF Mono,Fira Code,Fira Mono,Menlo,Consolas,monospace;font-size:11px;font-weight:300;line-height:1.7;white-space:pre-wrap;word-break:break-all;text-transform:none}.log-entry.sent{color:var(--navy-60)}.log-entry.received{color:var(--navy)}.log-entry.error{color:#c0392b}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%) translateY(100px);background:var(--navy);color:var(--white);font-size:10px;font-weight:400;letter-spacing:var(--tracking-md);padding:12px 28px;opacity:0;transition:transform .3s ease,opacity .3s ease;z-index:1000;text-transform:uppercase;pointer-events:none}.toast.visible{transform:translate(-50%) translateY(0);opacity:1}