:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000000de;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:#000;color:#f5f5f5}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}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}}html,body,#root{margin:0;padding:0;height:100%;width:100%;background-color:#000;color:#f5f5f5;font-family:sans-serif}.container{background-color:#000;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;min-height:100dvh;min-height:-webkit-fill-available;transition:background-color .15s ease,color .15s ease;color:inherit}.container.flash{background-color:#fff;color:#111}.content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;max-width:500px;width:100%;padding:1rem;margin-top:2rem}.title{font-size:1.8rem;margin-bottom:1rem}.sliderBox{margin-bottom:1.5rem;display:flex;flex-direction:column;align-items:center;width:100%}.label{margin-bottom:.5rem;font-size:1rem}.slider{width:90%;max-width:400px}.beats{display:flex;justify-content:center;align-items:center;gap:1.5rem;font-size:2.5rem;margin:1.5rem 0 3rem;flex-wrap:wrap}.beat{font-weight:700;min-width:2rem;text-align:center;color:#777;transition:color .15s ease}.beat.active{color:#fff}.beat.first-beat{color:red}.container.flash .beat{color:#888}.container.flash .beat.active{color:#000}.container.flash .beat.first-beat{color:#2e7d32}.buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}.button{font-size:1rem;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid #444;cursor:pointer;background:#333;color:#f5f5f5;transition:background .15s ease,color .15s ease,border-color .15s ease}.button-large{font-size:1rem;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid #444;cursor:pointer;background:#333;color:#f5f5f5;transition:background .15s ease,color .15s ease,border-color .15s ease;width:300px;height:200px}.button:hover{background:#444}.button:active{background:#555}.button:focus-visible{outline:2px solid #888;outline-offset:2px}.container.flash .button{background:#eee;color:#222;border:1px solid #ccc}.container.flash .button:hover{background:#ddd}.container.flash .button:active{background:#ccc}.container.flash .button:focus-visible{outline:2px solid #555;outline-offset:2px}.hint{font-size:.9rem;color:#aaa;margin-top:2rem}.container.flash .hint{color:#666}@media (max-width: 600px){.content,.beats{margin-top:0}.button-large{height:150px;margin-top:2em}.hint{display:none}}