#root{width:100%;max-width:360px;margin:0 auto;padding:2rem;text-align:center}body{margin:0;display:flex;place-items:center;min-height:100svh}header{position:absolute;top:0;left:0;width:100%;height:15px;background-image:linear-gradient(to right,var(--secondary-color),var(--primary-color))}h1{margin:0}a{color:var(--primary-color);text-decoration:none;font-weight:700}a:hover{color:var(--text-color)}button{background-color:var(--background-color);width:100%;margin:.5rem 0;padding:1rem 2rem;border:1px solid var(--primary-color);border-radius:999px;cursor:pointer;font-size:1.2rem;font-weight:500;transition:all .3s ease}button:hover{background-color:var(--text-color);color:var(--bg-color)}label{display:block;margin-bottom:1rem;font-weight:700;font-size:1.2rem;color:var(--text-color)}input{display:block;margin:1rem auto;padding:.5rem;border:1px solid var(--primary-color);border-radius:999px;background-color:var(--bg-color);font-size:1.5rem;font-weight:500;text-align:center;width:100%}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.container{width:100%}.content{margin:2rem 0}.play-button{background-color:rgba(from var(--primary-color) r g b / .1)}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.CircularProgressbar{width:100%;vertical-align:middle}.CircularProgressbar .CircularProgressbar-path{stroke:#3e98c7;stroke-linecap:round;-webkit-transition:stroke-dashoffset .5s ease 0s;transition:stroke-dashoffset .5s ease 0s}.CircularProgressbar .CircularProgressbar-trail{stroke:#d6d6d6;stroke-linecap:round}.CircularProgressbar .CircularProgressbar-text{fill:#3e98c7;font-size:20px;dominant-baseline:middle;text-anchor:middle}.CircularProgressbar .CircularProgressbar-background{fill:#d6d6d6}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background{fill:#3e98c7}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text{fill:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path{stroke:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail{stroke:transparent}*{box-sizing:border-box}:root{--text-color: #ffffffdd;--bg-color: #141820;--primary-color: #f87934;--secondary-color: #784bc2;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-size:16px;color-scheme:light dark;color:var(--text-color);background-color:#141820;background-image:radial-gradient(circle at 50% 0%,hsl(from var(--bg-color) h calc(s*.8) calc(l*1.75)) 10%,var(--bg-color) 60%);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}