.session-manager{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:2rem}.session-manager h2{text-align:center;margin-bottom:2rem;color:#fff}.session-manager .connecting{text-align:center;padding:2rem}.session-manager .connecting p{color:#fff9;font-size:1.1rem}.session-manager .session-error{background:transparent;border:1px solid white;border-radius:8px;padding:1rem;text-align:center}.session-manager .session-error p{color:#fff;margin:0}.controls{display:flex;flex-direction:column;gap:1rem;align-items:stretch;background:transparent;padding:1.25rem;border-radius:8px;border:1px solid white;width:100%;box-sizing:border-box}.controls .main-controls{display:flex;gap:.75rem;justify-content:center}.controls .main-controls .play-pause-button{width:56px;height:56px;border-radius:50%;font-size:1.5rem;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s ease;background:transparent;border:1px solid white;color:#fff}.controls .main-controls .play-pause-button.playing{background:#fff;color:#000}.controls .main-controls .play-pause-button.playing:hover:not(:disabled){background:#ffffffe6}.controls .main-controls .play-pause-button:not(.playing):hover:not(:disabled){background:#fff;color:#000}.controls .main-controls .refresh-audio-button{padding:.75rem;min-width:44px;font-size:1.1rem;background:transparent;border:1px solid white;color:#fff}.controls .main-controls .refresh-audio-button:hover:not(:disabled){background:#fff;color:#000}.controls .tempo-control{display:flex;flex-direction:column;gap:.5rem;width:100%}.controls .tempo-control .tempo-header{display:flex;justify-content:space-between;align-items:center}.controls .tempo-control label{font-weight:600;color:#fff;font-size:.9rem}.controls .tempo-control .tempo-input-group{display:flex;align-items:center;gap:.25rem}.controls .tempo-control .tempo-input-group .adjust-button{width:28px;height:28px;padding:0;font-size:1rem;font-weight:600;background:transparent;border:1px solid white;border-radius:4px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.controls .tempo-control .tempo-input-group .adjust-button:hover:not(:disabled){background:#fff;color:#000}.controls .tempo-control .tempo-input-group .adjust-button:disabled{opacity:.4;cursor:not-allowed}.controls .tempo-control .tempo-input-group .tempo-number-input{width:60px;padding:.3rem .4rem;border-radius:4px;border:1px solid white;background:transparent;color:#fff;font-size:.95rem;text-align:center;font-weight:600}.controls .tempo-control .tempo-input-group .tempo-number-input:disabled{opacity:.6;cursor:not-allowed}.controls .tempo-control .tempo-input-group .tempo-number-input::-webkit-inner-spin-button,.controls .tempo-control .tempo-input-group .tempo-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.controls .tempo-control .tempo-input-group .tempo-number-input{-moz-appearance:textfield}.controls .tempo-control .tempo-input-group .bpm-label{font-size:.8rem;color:#fff9;font-weight:500;margin-right:.5rem}.controls .tempo-control input[type=range]{width:100%;max-width:100%;height:4px;border-radius:2px;background:#ffffff4d;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box}.controls .tempo-control input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;border-radius:2px;background:#ffffff4d}.controls .tempo-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;margin-top:-6px}.controls .tempo-control input[type=range]::-moz-range-track{width:100%;height:4px;border-radius:2px;background:#ffffff4d}.controls .tempo-control input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:none}.controls .tempo-control .tempo-hints{display:flex;justify-content:space-between;font-size:.75rem;color:#fff9;margin-top:-.25rem}.controls .beats-control{display:flex;flex-direction:column;gap:.5rem;width:100%;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.3)}.controls .beats-control .beats-header{display:flex;justify-content:space-between;align-items:center}.controls .beats-control label{font-weight:600;color:#fff;font-size:.9rem}.controls .beats-control .beats-value{font-weight:600;color:#fff;font-size:1rem;min-width:24px;text-align:right}.controls .beats-control input[type=range]{width:100%;max-width:100%;height:4px;border-radius:2px;background:#ffffff4d;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box}.controls .beats-control input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;border-radius:2px;background:#ffffff4d}.controls .beats-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;margin-top:-6px}.controls .beats-control input[type=range]::-moz-range-track{width:100%;height:4px;border-radius:2px;background:#ffffff4d}.controls .beats-control input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:none}@media (max-width: 768px){.controls{width:100%}}.status{background:#000;padding:1.5rem;border-radius:8px;border:1px solid white;min-width:250px}.status p{margin:.5rem 0;display:flex;justify-content:space-between;color:#fff9}.status p:first-child{margin-top:0}.status p:last-child{margin-bottom:0}@media (max-width: 768px){.status{min-width:auto;width:100%}}.metronome-visualizer{width:100%;max-width:100%;box-sizing:border-box;padding:1.5rem 1rem;background:transparent;border:1px solid white;border-radius:8px}.metronome-visualizer .beat-grid{display:flex;flex-direction:column;align-items:center;gap:.75rem}.metronome-visualizer .beat-row{display:flex;justify-content:center;align-items:center;gap:.75rem}.metronome-visualizer .beat-pill{width:20px;height:20px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.4);transition:all .15s ease-out;flex-shrink:0}.metronome-visualizer .beat-pill.first-beat{background:#fff;border-color:#fff}.metronome-visualizer .beat-pill.active{transform:scale(1.3);border-width:2px;border-color:#fff;box-shadow:0 0 12px #fff9}.metronome-visualizer .beat-pill.downbeat{background:#fff;border-color:#fff;box-shadow:0 0 16px #fffc}.latency-controls{width:100%;border:1px solid white;border-radius:8px;padding:1.5rem;background:#000;display:flex;flex-direction:column;gap:1.5rem}.latency-controls button.ghost{background:transparent;border:1px solid white;color:#fff;padding:.65rem 1.1rem}.latency-controls button.ghost:hover:not(:disabled){background:#ffffff1a}.latency-controls .latency-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.latency-controls .latency-header .eyebrow{margin:0;text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;color:#fff9}.latency-controls .latency-header h3{margin:.15rem 0 0;font-size:1.25rem;color:#fff}.latency-controls .latency-header button{white-space:nowrap}.latency-controls .sync-lock-control{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border:1px solid white;border-radius:8px;background:#ffffff1a}.latency-controls .sync-lock-control .sync-lock-status{display:flex;align-items:center;gap:.5rem}.latency-controls .sync-lock-control .sync-lock-status .lock-icon{font-size:1.25rem}.latency-controls .sync-lock-control .sync-lock-status .lock-label{font-weight:600;color:#fff}.latency-controls .sync-lock-control .lock-button,.latency-controls .sync-lock-control .unlock-button{padding:.5rem 1rem;border-radius:8px;font-weight:500;cursor:pointer;transition:background .15s ease}.latency-controls .sync-lock-control .lock-button:disabled,.latency-controls .sync-lock-control .unlock-button:disabled{opacity:.5;cursor:not-allowed}.latency-controls .sync-lock-control .lock-button{background:transparent;border:1px solid white;color:#fff}.latency-controls .sync-lock-control .lock-button:hover:not(:disabled){background:#ffffff1a}.latency-controls .sync-lock-control .unlock-button{background:#fff;border:1px solid white;color:#fff}.latency-controls .sync-lock-control .unlock-button:hover:not(:disabled){opacity:.9}.latency-controls .latency-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}.latency-controls .latency-metrics .metric{border:1px solid white;border-radius:8px;padding:.75rem 1rem;background:#ffffff1a;display:flex;flex-direction:column;gap:.15rem}.latency-controls .latency-metrics .metric .label{font-size:.8rem;text-transform:uppercase;color:#fff9}.latency-controls .latency-metrics .metric .value{font-weight:600;font-size:1rem;color:#fff}.latency-controls .manual-adjust{border:1px solid white;border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.latency-controls .manual-adjust .manual-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.latency-controls .manual-adjust .manual-header p{margin:0;font-weight:600;color:#fff}.latency-controls .manual-adjust .manual-header small{color:#fff9;line-height:1.4;display:block}.latency-controls .manual-adjust .manual-header .manual-value{font-weight:600;font-size:1.1rem}.latency-controls .manual-adjust input[type=range]{width:100%}.latency-controls .manual-adjust .manual-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.latency-controls .manual-adjust .manual-actions input[type=number]{width:100px}.latency-controls .preset-card{border:1px solid white;border-radius:8px;padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}.latency-controls .preset-card .eyebrow{margin:0;text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;color:#fff9}.latency-controls .preset-card .preset-details{display:flex;flex-direction:column;gap:.15rem}.latency-controls .preset-card .preset-details strong{font-size:1.1rem}.latency-controls .preset-card .preset-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.latency-slider{width:100%;padding:1rem;background:transparent;border:1px solid white;border-radius:8px;display:flex;flex-direction:column;gap:.5rem;box-sizing:border-box}.latency-slider .latency-slider-header{display:flex;justify-content:space-between;align-items:center}.latency-slider .latency-slider-header label{font-weight:600;color:#fff;font-size:.9rem}.latency-slider .latency-slider-header .latency-value-group{display:flex;align-items:center;gap:.25rem}.latency-slider .latency-slider-header .latency-value-group .adjust-button{width:28px;height:28px;padding:0;font-size:1rem;font-weight:600;background:transparent;border:1px solid white;border-radius:4px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.latency-slider .latency-slider-header .latency-value-group .adjust-button:hover:not(:disabled){background:#fff;color:#000}.latency-slider .latency-slider-header .latency-value-group .adjust-button:disabled{opacity:.4;cursor:not-allowed}.latency-slider .latency-slider-header .latency-value-group .latency-input{width:55px;padding:.25rem .35rem;border-radius:4px;border:1px solid white;background:transparent;color:#fff;font-size:.9rem;text-align:center;font-weight:500}.latency-slider .latency-slider-header .latency-value-group .latency-input:disabled{opacity:.6;cursor:not-allowed}.latency-slider .latency-slider-header .latency-value-group .latency-input::-webkit-inner-spin-button,.latency-slider .latency-slider-header .latency-value-group .latency-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.latency-slider .latency-slider-header .latency-value-group .latency-input{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.latency-slider .latency-slider-header .latency-value-group .ms-label{font-size:.8rem;color:#fff9;margin-right:.5rem}.latency-slider .latency-slider-header .latency-value-group .reset-button{padding:.2rem .4rem;font-size:.9rem;background:transparent;border:1px solid white;border-radius:4px;color:#fff;cursor:pointer;min-width:28px;margin-left:.25rem}.latency-slider .latency-slider-header .latency-value-group .reset-button:hover:not(:disabled){background:#fff;color:#000}.latency-slider .latency-slider-header .latency-value-group .reset-button:disabled{opacity:.4;cursor:not-allowed}.latency-slider .latency-range{width:100%;max-width:100%;height:4px;border-radius:2px;background:#ffffff4d;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:.25rem 0;cursor:pointer;box-sizing:border-box}.latency-slider .latency-range::-webkit-slider-runnable-track{width:100%;height:4px;border-radius:2px;background:#ffffff4d}.latency-slider .latency-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;margin-top:-6px}.latency-slider .latency-range::-moz-range-track{width:100%;height:4px;border-radius:2px;background:#ffffff4d}.latency-slider .latency-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:none}.latency-slider .latency-range:disabled{opacity:.6;cursor:not-allowed}.latency-slider .latency-range:disabled::-webkit-slider-thumb{cursor:not-allowed}.latency-slider .latency-range:disabled::-moz-range-thumb{cursor:not-allowed}.latency-slider .latency-hints{display:flex;justify-content:space-between;font-size:.7rem;color:#fff9;padding:0 .25rem}.metronome-session{width:100%;box-sizing:border-box;overflow-x:hidden}.metronome-session .session-header{display:flex;justify-content:center;align-items:center;margin-bottom:1.5rem}.metronome-session .session-header .session-actions{display:flex;gap:.75rem}.metronome-session .session-header .session-actions .share-button,.metronome-session .session-header .session-actions .leave-button{background:transparent;color:#fff;border:1px solid white;min-width:100px;transition:all .15s ease}.metronome-session .session-header .session-actions .share-button:hover,.metronome-session .session-header .session-actions .leave-button:hover,.metronome-session .session-header .session-actions .share-button.copied,.metronome-session .session-header .session-actions .leave-button.copied{background:#fff;color:#000}.metronome-container{display:flex;flex-direction:column;gap:2rem;align-items:stretch}.landing{width:100%}.landing .landing-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;text-align:center;width:100%}.landing .landing-title{font-size:3.5rem;font-weight:700;color:#fff;margin:0;letter-spacing:.05em}.landing .landing-subtitle{font-size:1.125rem;color:#fff9;margin:0;margin-top:-1.5rem}.landing .landing-button{padding:1.125rem 2.5rem;font-size:1.125rem;font-weight:600;color:#fff;background:transparent;border:1px solid white;border-radius:8px;cursor:pointer;transition:all .15s ease;width:100%;max-width:280px}.landing .landing-button:hover:not(:disabled){background:#fff;color:#000}.landing .landing-button:active:not(:disabled){background:#fff;color:#000}.landing .landing-button:disabled{opacity:.4;cursor:not-allowed}.landing .landing-error{padding:1rem 1.25rem;background:transparent;border:1px solid white;border-radius:8px;color:#fff;font-size:.9rem;width:100%;max-width:320px}@media (min-width: 768px){.landing .landing-title{font-size:4rem}.landing .landing-subtitle{font-size:1.25rem}.landing .landing-button{padding:1.25rem 3rem;font-size:1.25rem}}.app{width:100%;max-width:28rem;min-height:100vh;background:#000;color:#fff;font-family:Inter,system-ui,sans-serif;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:1.5rem;padding:2.5rem 1rem 3rem}.app>*{width:100%}.app h1{font-size:2.5rem;font-weight:700;font-style:italic;margin:0 0 1.5rem;color:transparent;-webkit-text-stroke:2px white;text-stroke:2px white;text-align:center}button{padding:.875rem 1.5rem;border:1px solid white;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .15s ease;text-transform:none;background:transparent;color:#fff}button:hover:not(:disabled){background:#fff;color:#000}button:active:not(:disabled){background:#fff;color:#000}button.primary-button{background:transparent;color:#fff;border:1px solid white}button.primary-button:hover:not(:disabled){background:#fff;color:#000}button:disabled{opacity:.4;cursor:not-allowed}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fff;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}a{font-weight:500;color:#fff;text-decoration:inherit}a:hover{color:#fffc}html,body{margin:0;padding:0;width:100%;min-height:100vh;overflow-x:hidden;background-color:#000}#root{width:100%;min-height:100vh;display:flex;justify-content:center;background-color:#000}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid white;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:transparent;color:#fff;cursor:pointer;transition:all .15s ease}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}