:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--app-max-width:400px;--target-min:44px;--beat-release:.12s;--gap:1.75rem;--hero:3.5rem;--page:var(--lightningcss-light,#eceae6)var(--lightningcss-dark,#16171a);--surface:var(--lightningcss-light,#fbfaf8)var(--lightningcss-dark,#1e2024);--edge:var(--lightningcss-light,#d6d2cb)var(--lightningcss-dark,#2f3238);--ink:var(--lightningcss-light,#16171a)var(--lightningcss-dark,#f2f1ee);--ink-quiet:var(--lightningcss-light,#6c6a66)var(--lightningcss-dark,#94928d);--accent:var(--lightningcss-light,#1c1d21)var(--lightningcss-dark,#f2f1ee);--accent-active:var(--lightningcss-light,#c1631f)var(--lightningcss-dark,#e2a35a);--danger:var(--lightningcss-light,#8c2f22)var(--lightningcss-dark,#f0a094);--focus:var(--lightningcss-light,#2f6f9f)var(--lightningcss-dark,#78bdf0)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*,:before,:after{box-sizing:border-box}body{background:var(--page);min-height:100svh;color:var(--ink);-webkit-text-size-adjust:100%;align-content:center;place-items:center;margin:0;padding:1rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:grid}main{width:100%;max-width:var(--app-max-width);padding:var(--gap) 1.5rem;border:1px solid var(--edge);background:var(--surface);border-radius:14px;display:block;position:relative}.beat-row{min-height:var(--target-min);justify-content:center;align-items:center;display:flex;position:relative}.accent-toggle{min-width:var(--target-min);min-height:var(--target-min);border:1px solid var(--edge);background:var(--edge);color:var(--ink);letter-spacing:.06em;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:color var(--beat-release) ease-out, background-color var(--beat-release) ease-out;border-radius:10px;justify-content:center;align-items:center;padding:0 .6rem;font-family:inherit;font-size:.7rem;font-weight:600;line-height:1;display:flex;position:absolute;left:0}.accent-toggle[aria-pressed=false]{color:var(--ink-quiet);opacity:.7;background:0 0;border-style:dashed}@media (hover:hover) and (pointer:fine){.accent-toggle:hover{color:var(--ink);border-color:var(--ink-quiet)}}.accent-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.beats{justify-content:center;align-items:center;gap:.85rem;min-height:18px;display:flex}.beat{background:var(--ink-quiet);opacity:.28;width:10px;height:10px;transition:opacity var(--beat-release) ease-out;border-radius:50%}.beat--active{opacity:1;background:var(--accent);transition:none}.beat--accent.beat--active{background:var(--accent-active)}.tempo{margin:var(--gap) 0;font-size:var(--hero);grid-template-rows:auto auto auto auto;grid-template-columns:4ch 2ch;justify-content:center;place-items:center;row-gap:.5rem;display:grid}.tempo__label{letter-spacing:.09em;text-transform:uppercase;color:var(--ink-quiet);grid-column:1/-1;font-size:.8rem}.tempo__value{width:6ch;color:inherit;font:inherit;font-variant-numeric:tabular-nums;letter-spacing:0;text-align:right;touch-action:manipulation;background:0 0;border:0;grid-column:1/-1;padding:0;font-weight:300}.tempo__value:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}.step{color:var(--ink-quiet);font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:color var(--beat-release) ease-out, background-color var(--beat-release) ease-out;background:0 0;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;padding:0;font-family:inherit;line-height:1;display:flex}.step--coarse{width:56px;height:56px;font-size:1.5rem}.step--fine{width:var(--target-min);height:var(--target-min);font-size:1rem}@media (hover:hover) and (pointer:fine){.step:hover{color:var(--ink);background:var(--edge)}}.step:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.transport{border:1px solid var(--edge);width:100%;min-height:64px;color:var(--ink);letter-spacing:.16em;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color var(--beat-release) ease-out;background:0 0;border-radius:10px;padding:1rem;font-family:inherit;font-size:1rem;font-weight:500;display:block}@media (hover:hover) and (pointer:fine){.transport:hover{background:var(--edge)}}.transport:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}.error{color:var(--danger);margin:0;font-size:.9rem;line-height:1.45}.error:not(:empty){margin:0 0 var(--gap)}footer{max-width:var(--app-max-width);text-align:center;margin:0 auto;padding:1.25rem 1rem 0}footer a{color:var(--ink-quiet);text-underline-offset:2px;touch-action:manipulation;font-size:.8rem;text-decoration:underline}footer a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}.install{max-width:var(--app-max-width);font:inherit;color:var(--ink-quiet);text-align:center;background:0 0;border:0;margin:0 auto;padding:.75rem 1rem;font-size:.8rem;display:block}button.install{min-height:var(--target-min);letter-spacing:.08em;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;text-underline-offset:3px;text-decoration:underline}button.install:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}