*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-sans,system-ui, sans-serif);background:var(--color-bg);color:var(--color-text);min-height:100dvh;transition:background .2s,color .2s}button{cursor:pointer;color:inherit;font:inherit;background:0 0;border:none}.app-shell{flex-direction:column;min-height:100dvh;display:flex}.topbar{background:var(--color-surface);border-bottom:1px solid var(--color-line);z-index:100;justify-content:space-between;align-items:center;height:3rem;padding:0 1rem;display:flex;position:sticky;top:0}.topbar-right{align-items:center;gap:.5rem;display:flex}.nav-overlay{z-index:200;opacity:0;pointer-events:none;background:#00000080;transition:opacity .2s;position:fixed;inset:0}.nav-overlay.open{opacity:1;pointer-events:all}.nav-drawer{background:var(--color-surface);border-right:1px solid var(--color-line);z-index:201;flex-direction:column;width:260px;transition:transform .2s;display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.nav-drawer.open{transform:translate(0)}.nav-drawer-header{border-bottom:1px solid var(--color-line);justify-content:space-between;align-items:center;height:3rem;padding:0 1rem;display:flex}.nav-links{flex:1;padding:.5rem 0;list-style:none}.nav-links a{color:var(--color-text-mute);align-items:center;gap:.75rem;padding:.875rem 1.25rem;font-size:1rem;text-decoration:none;transition:color .15s,background .15s;display:flex}.nav-links a:hover,.nav-links a.active{color:var(--color-text);background:var(--color-surface)}.nav-links a.active{color:var(--color-accent)}.nav-badge{background:var(--color-secondary);color:var(--color-text-mute);border-radius:999px;margin-left:auto;padding:.1rem .4rem;font-size:.65rem}.icon-btn{width:2.5rem;height:2.5rem;color:var(--color-text-mute);border-radius:.5rem;justify-content:center;align-items:center;transition:color .15s,background .15s;display:flex}.icon-btn:hover{color:var(--color-text);background:var(--color-surface)}.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:.75rem;padding:1rem}.beat-visualizer{flex-wrap:wrap;justify-content:center;gap:.5rem;padding:.75rem 0;display:flex}.beat-dot{border:2px solid var(--color-line);background:var(--color-secondary);cursor:pointer;border-radius:50%;width:2.5rem;height:2.5rem;transition:all .1s;position:relative}.beat-dot[data-state=accent]{background:var(--color-accent);border-color:var(--color-accent)}.beat-dot[data-state=normal]{background:var(--color-secondary);border-color:var(--color-text-mute)}.beat-dot[data-state=count-in]{border-color:var(--color-accent);background:0 0;border-style:dashed}.beat-dot[data-state=mute]{background:var(--color-secondary);border-color:var(--color-secondary);opacity:.4}.beat-dot.active{box-shadow:0 0 0 3px var(--color-accent);transform:scale(1.15)}.tempo-slider-wrap{flex-direction:column;gap:.5rem;display:flex}.tempo-controls{align-items:center;gap:.75rem;display:flex}.tempo-btn{background:var(--color-secondary);border:1px solid var(--color-line);border-radius:.5rem;justify-content:center;align-items:center;width:3rem;height:3rem;font-size:1.5rem;transition:background .1s;display:flex}.tempo-btn:hover{background:var(--color-surface)}.tempo-btn:active{background:var(--color-line)}.tempo-value{text-align:center;font-variant-numeric:tabular-nums;flex:1;font-size:2rem;font-weight:600}.tempo-label{text-align:center;color:var(--color-text-mute);font-size:.8rem}input[type=range]{width:100%;accent-color:var(--color-accent);height:2rem}.play-btn{background:var(--color-accent);color:#000;letter-spacing:.05em;border-radius:.75rem;width:70%;height:4rem;font-size:1.25rem;font-weight:600;transition:background .15s,transform .1s}.play-btn:hover{background:var(--color-accent)}.play-btn:active{transform:scale(.98)}.play-btn.playing{background:var(--color-danger);color:#fff}.tap-btn{letter-spacing:.1em;background:var(--color-secondary);width:30%;height:4rem;color:var(--color-text);border:2px solid var(--color-line);border-radius:.75rem;font-size:1.75rem;font-weight:500;transition:background .1s,transform 80ms}.tap-btn:active{background:var(--color-accent);color:#000;transform:scale(.97)}.coming-soon{min-height:40vh;color:var(--color-text-mute);flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex}.coming-soon h2{color:var(--color-text);font-size:1.25rem}:root{--color-bg:#101016;--color-surface:#15151d;--color-text:#e4e4eb;--color-text-mute:#8a8a99;--color-line:#2c2c38;--color-primary:#b6b4c8;--color-secondary:#5d4448;--color-accent:#967f70;--color-good:#8db976;--color-warn:#d9b56a;--color-danger:#c66;--font-sans:"Inter Variable", system-ui, -apple-system, sans-serif;--space-xs:.375rem;--space-sm:.625rem;--space-md:1rem;--space-lg:1.5rem;--radius-sm:.4rem;--radius-md:.75rem;--radius-lg:1.25rem;--touch-min:3rem}@font-face{font-family:Inter Variable;src:url(../../../fonts/Inter.var.woff2)format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}