body{font-family:Arial,sans-serif;background:var(--background);color:var(--foreground);transition:background .5s ease,color .5s ease}:root{--background: #000;--foreground: #fff;--primary: #00bcd4;--accent: cyan;--button-bg: #333;--button-hover: #555}body.light-mode{--background: #f5f5f5;--foreground: #000;--primary: #1976d2;--accent: rgb(92, 86, 86);--button-bg: #ddd;--button-hover: #bbb}.theme-button{background:var(--button-bg);color:var(--foreground);border:none;padding:.5rem 1rem;border-radius:1rem;cursor:pointer;font-size:1rem;transition:background .3s ease,color .3s ease}.theme-button:hover{background:var(--button-hover)}.theme-button-animate{transform:rotate(360deg);opacity:0;transition:transform .5s ease,opacity .5s ease}.container{overflow:hidden;min-height:100vh;display:flex;flex-wrap:wrap;flex-direction:column;margin:0 auto;padding:1rem;width:70%}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:2px solid var(--primary)}.logo{display:flex;align-items:center;gap:.5rem}.main{flex:1;padding:2rem;display:flex;flex-direction:column;gap:2rem}.tempo-section,.row-section{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.label{font-size:1.5rem}.tempo{font-size:3rem;font-weight:700}.description{margin-top:.5rem}.tempo-controls{display:flex;gap:1rem}.circle-button{width:6rem;height:6rem;font-size:2rem;background:var(--button-bg);border:none;border-radius:50%;color:var(--foreground);cursor:pointer;transition:background .3s ease}.circle-button:hover{background:var(--button-hover)}.tap-button{background:var(--button-bg);color:var(--foreground);border:none;padding:1rem 2rem;border-radius:1rem;font-size:1rem;cursor:pointer;transition:background .3s ease}.tap-button:hover{background:var(--button-hover)}.slider{width:100%;height:1rem;appearance:none;background:linear-gradient(to right,var(--primary) 0%,var(--primary) var(--progress, 0%),var(--button-bg) var(--progress, 0%),var(--button-bg) 100%);border-radius:1rem;transition:background .3s ease}.slider::-webkit-slider-thumb{appearance:none;width:1.5rem;height:1.5rem;background:var(--primary);border:3px solid var(--accent);border-radius:50%;cursor:pointer;transition:background .3s ease,border-color .3s ease}.slider::-webkit-slider-thumb:hover,.slider::-moz-range-thumb:hover{background:var(--accent);border-color:var(--primary)}.signature-box{background:#111;padding:1rem;border-radius:.5rem;font-size:1.5rem;text-align:center;flex:1}.subdivision-box{background:#111;padding:1rem;border-radius:.5rem;text-align:center}.signature-boxes{display:flex;align-items:center;gap:1rem}.select-box{background:#111;color:#fff;font-size:1.5rem;border:2px solid cyan;border-radius:.5rem;padding:.5em 1em;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;flex:1;min-width:0;max-width:100%}.sound-pack{display:flex;gap:1rem}.rect-button{background:#333;color:#fff;border:none;padding:1rem;border-radius:1rem;cursor:pointer}.rect-button:hover{background:#555}.play-button{background:var(--primary);color:var(--foreground);border:none;padding:1rem 2rem;border-radius:1rem;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 6px #0003;transition:background .3s ease,box-shadow .3s ease}.play-button:hover{background:#3b05ff;box-shadow:0 6px 8px #0000004d}.footer{text-align:center;padding:1rem}.footer-logo{width:4rem;height:4rem;margin:0 auto .5rem}.footer-logo svg{width:100%;height:100%}.beat-count{font-size:3rem;font-weight:700;text-align:center;margin-top:.5rem;margin-bottom:1rem;transition:all .3s ease}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.beat-pulse{animation:pulse .3s ease}.beat-circle{width:60px;height:60px;margin:0 auto;background-color:var(--accent);border-radius:50%;opacity:.7;transform:scale(1);transition:background .3s ease}@keyframes pulse{0%{transform:scale(1);opacity:.7}50%{transform:scale(1.5);opacity:1}to{transform:scale(1);opacity:.7}}.beat-pulse{animation:pulse .4s ease}.logo svg,.footer-logo svg{color:var(--foreground);transition:color .3s ease}@media(max-width:400px){.container{width:100%}.label{font-size:1.1rem}.tempo{font-size:2.2rem}.circle-button{width:4.5rem;height:4.5rem;font-size:1.5rem}.tap-button{padding:.8rem 1.5rem;font-size:.9rem}.play-button{font-size:1.3rem;padding:.8rem 1.2rem}.select-box{font-size:1.2rem;padding:.5em}.beat-count{font-size:2.5rem}.beat-circle{width:50px;height:50px}}@media(max-width:750px){.container{width:100%}}*{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;position:relative}main{display:block}:where(h1){font-size:2em;margin-block:.67em}h1,h2,h3,h4{text-wrap:balance}p{margin-block:1lh;text-wrap:pretty}hr{box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{max-width:100%}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}textarea{field-sizing:content}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}audio,canvas,iframe,svg,video{display:block;height:auto;max-width:100%}