:root{--color-phrase-mint-swatch: #64cea7;--color-phrase-lilac-swatch: #9960d2;--color-phrase-sky-swatch: #57a6db;--color-phrase-sand-swatch: #e6b84c;--color-phrase-rose-swatch: #db5778;--color-phrase-jade-surface: #ecf8f6;--color-phrase-jade-border: #c3eae1;--color-phrase-jade-text: #256a5a;--color-phrase-jade-swatch: #68cab3;--color-phrase-sage-surface: #edf7ef;--color-phrase-sage-border: #c7e6cc;--color-phrase-sage-text: #2c6335;--color-phrase-sage-swatch: #72c07f;--color-phrase-lime-surface: #f3f8ec;--color-phrase-lime-border: #d9eac3;--color-phrase-lime-text: #4d6a25;--color-phrase-lime-swatch: #a1ca68;--color-phrase-lemon-surface: #fdfae7;--color-phrase-lemon-border: #f9eeb4;--color-phrase-lemon-text: #84720b;--color-phrase-lemon-swatch: #f0d642;--color-phrase-amber-surface: #fdf5e7;--color-phrase-amber-border: #f9deb4;--color-phrase-amber-text: #84560b;--color-phrase-amber-swatch: #f0ad42;--color-phrase-peach-surface: #fdf0e8;--color-phrase-peach-border: #f8ceb5;--color-phrase-peach-text: #823a0d;--color-phrase-peach-swatch: #ed8545;--color-phrase-coral-surface: #fcede8;--color-phrase-coral-border: #f6c6b6;--color-phrase-coral-text: #7f2c10;--color-phrase-coral-swatch: #e97149;--color-phrase-salmon-surface: #fbebe9;--color-phrase-salmon-border: #f3beba;--color-phrase-salmon-text: #791e15;--color-phrase-salmon-swatch: #e05e52;--color-phrase-pink-surface: #fbe9f2;--color-phrase-pink-border: #f3bad4;--color-phrase-pink-text: #791544;--color-phrase-pink-swatch: #e05294;--color-phrase-berry-surface: #fbeaf0;--color-phrase-berry-border: #f2bacf;--color-phrase-berry-text: #78173a;--color-phrase-berry-swatch: #de5487;--color-phrase-magenta-surface: #f9ebf7;--color-phrase-magenta-border: #ecc0e4;--color-phrase-magenta-text: #6e2160;--color-phrase-magenta-swatch: #d062bc;--color-phrase-lavender-surface: #f4ecf9;--color-phrase-lavender-border: #ddc2eb;--color-phrase-lavender-text: #53246b;--color-phrase-lavender-swatch: #aa66cc;--color-phrase-violet-surface: #efebf9;--color-phrase-violet-border: #ccc0ed;--color-phrase-violet-text: #36206f;--color-phrase-violet-swatch: #8161d1;--color-phrase-periwinkle-surface: #eceef8;--color-phrase-periwinkle-border: #c3c8ea;--color-phrase-periwinkle-text: #252e6a;--color-phrase-periwinkle-swatch: #6875ca;--color-phrase-cyan-surface: #e8f8fc;--color-phrase-cyan-border: #b6e8f6;--color-phrase-cyan-text: #10677f;--color-phrase-cyan-swatch: #49c6e9;--color-phrase-teal-surface: #ecf8f9;--color-phrase-teal-border: #c2eaeb;--color-phrase-teal-text: #246a6b;--color-phrase-teal-swatch: #66cacc;--color-phrase-slate-surface: #eff3f5;--color-phrase-slate-border: #ccd8e0;--color-phrase-slate-text: #364b59;--color-phrase-slate-swatch: #5d8198;--color-phrase-stone-surface: #f3f3f1;--color-phrase-stone-border: #d9d7d3;--color-phrase-stone-text: #4d4942;--color-phrase-stone-swatch: #847d71;--color-phrase-graphite-surface: #f1f2f3;--color-phrase-graphite-border: #d4d5d9;--color-phrase-graphite-text: #43464c;--color-phrase-graphite-swatch: #737882;--color-cymbal-surface: #68baa2;--color-cymbal-edge: #206f62;--color-cymbal-shadow: #205d53;--color-cymbal-bell: #469e8b;--color-cymbal-highlight: #a6dfc8;--color-cymbal-stand: #176757;--palette-brand-dark: #183c34;--palette-brand-accent: #2f9e7a;--palette-secondary: #5d7a74;--palette-background: #f3f5f2;--palette-white: #ffffff;--palette-muted: #6e7c77;--palette-neutral: #d9e1dd;--palette-success: #1f9d55;--palette-warning: #f2b544;--palette-danger: #d95c4f;--color-background: var(--palette-background);--color-surface: var(--palette-white);--color-surface-subtle: #eaf0eb;--color-text: var(--palette-brand-dark);--color-text-secondary: #506b64;--color-text-muted: #596b64;--color-border: var(--palette-neutral);--color-border-control: #84968e;--color-primary: var(--palette-brand-dark);--color-primary-hover: #245448;--color-primary-active: #102c25;--color-on-primary: var(--palette-white);--color-accent: var(--palette-brand-accent);--color-accent-text: #23785d;--color-focus: #23785d;--color-disabled: #e3e9e5;--color-on-disabled: #596b64;--color-success: var(--palette-success);--color-success-text: #176b3b;--color-success-surface: #e5f3e9;--color-warning: var(--palette-warning);--color-warning-text: #805008;--color-warning-surface: #fff2d9;--color-error: var(--palette-danger);--color-error-text: #a3362c;--color-error-surface: #fcebe8;--color-danger-action: #b43d32;--color-danger-hover: #983329;--color-selection: #cce8dc;--color-phrase-mint-surface: #eef8f4;--color-phrase-mint-border: #c6e5da;--color-phrase-mint-text: #245b4e;--color-phrase-lilac-surface: #f4f0fb;--color-phrase-lilac-border: #dfd2f2;--color-phrase-lilac-text: #63458b;--color-phrase-sky-surface: #edf5fa;--color-phrase-sky-border: #cbdfea;--color-phrase-sky-text: #315d76;--color-phrase-sand-surface: #fcf6e9;--color-phrase-sand-border: #ecddbc;--color-phrase-sand-text: #796027;--color-phrase-rose-surface: #fbf0f1;--color-phrase-rose-border: #edcfd5;--color-phrase-rose-text: #824957;--color-group-rudiments: #a6462c;--color-group-rudiments-surface: #ffebe2;--color-group-technique: #25696c;--color-group-technique-surface: #def1ef;--color-group-rhythms: #805008;--color-group-rhythms-surface: #fff2d9;--color-chart-active: #259e80;--color-chart-rest: #eb7062;--color-chart-fill: #e2f2ec;--color-chart-grid: #eaf0ed;--color-highlight-surface: #fff7ef;--color-highlight-text: #b95510;--color-hit-normal: var(--color-primary-hover);--color-hit-normal-surface: var(--color-success-surface);--color-hit-normal-text: var(--color-primary);--color-hit-accent: #e36945;--color-hit-accent-surface: #fff0e9;--color-hit-accent-text: #963b22;--color-hit-ghost: #7184e5;--color-hit-ghost-surface: #edf0ff;--color-hit-ghost-text: #3d4f9d;--color-hit-playhead: #d4eee3;--color-pulse: #ffc49e;--color-pulse-accent: #f39455;--color-pulse-active: #9b430f;--color-on-pulse: #71340f;--shadow-play: 0 0 0 4px var(--color-selection), 0 6px 28px rgb(47 158 122 / 30%);--font-size-tempo: clamp(3.5rem, 8vw, 6rem);--font-family-note: "Segoe Print", "Bradley Hand", cursive;--color-overlay: rgb(16 44 37 / 40%);--color-header-surface: rgb(243 245 242 / 96%);--color-photo-shade: rgb(16 44 37 / 88%);--color-photo-soft: rgb(16 44 37 / 35%);--color-inverse-muted: #dce7df;--color-inverse-accent: #b9ddc8;--font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-display: clamp(2rem, 3.8vw, 3.25rem);--font-size-hero: clamp(3.2rem, 6.8vw, 6.5rem);--font-size-feature: clamp(2.25rem, 4vw, 3.75rem);--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.1;--line-height-heading: 1.25;--line-height-body: 1.6;--letter-spacing-heading: -.045em;--letter-spacing-eyebrow: .2em;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-32: 8rem;--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1.25rem;--radius-xl: 2rem;--radius-full: 999px;--border-width: 1px;--focus-width: 3px;--focus-offset: 2px;--focus-outline-width: 1px;--focus-outline-color: transparent;--shadow-focus: 0 0 0 var(--border-width) color-mix(in srgb, var(--color-focus) 28%, transparent), 0 0 var(--space-3) color-mix(in srgb, var(--color-focus) 22%, transparent);--filter-focus: drop-shadow(0 0 var(--space-1) color-mix(in srgb, var(--color-focus) 35%, transparent));--shadow-card: 0 8px 32px rgb(24 60 52 / 5%);--shadow-inset: inset 0 2px 8px rgb(24 60 52 / 10%);--shadow-brand: 0 24px 60px rgb(24 60 52 / 16%);--duration-fast: .12s;--duration-normal: .2s;--duration-slow: .4s;--duration-reveal: 1s;--ease-reveal: cubic-bezier(.45, 0, .55, 1);--ease-standard: cubic-bezier(.2, 0, 0, 1);--z-base: 0;--z-sticky: 10;--z-overlay: 100;--z-toast: 200;--container-width: 72rem;--page-gutter: clamp(1.25rem, 4vw, 3rem);--control-height: 3rem}@media(prefers-reduced-motion:reduce){:root{--color-phrase-mint-swatch: #64cea7;--color-phrase-lilac-swatch: #9960d2;--color-phrase-sky-swatch: #57a6db;--color-phrase-sand-swatch: #e6b84c;--color-phrase-rose-swatch: #db5778;--color-phrase-jade-surface: #ecf8f6;--color-phrase-jade-border: #c3eae1;--color-phrase-jade-text: #256a5a;--color-phrase-jade-swatch: #68cab3;--color-phrase-sage-surface: #edf7ef;--color-phrase-sage-border: #c7e6cc;--color-phrase-sage-text: #2c6335;--color-phrase-sage-swatch: #72c07f;--color-phrase-lime-surface: #f3f8ec;--color-phrase-lime-border: #d9eac3;--color-phrase-lime-text: #4d6a25;--color-phrase-lime-swatch: #a1ca68;--color-phrase-lemon-surface: #fdfae7;--color-phrase-lemon-border: #f9eeb4;--color-phrase-lemon-text: #84720b;--color-phrase-lemon-swatch: #f0d642;--color-phrase-amber-surface: #fdf5e7;--color-phrase-amber-border: #f9deb4;--color-phrase-amber-text: #84560b;--color-phrase-amber-swatch: #f0ad42;--color-phrase-peach-surface: #fdf0e8;--color-phrase-peach-border: #f8ceb5;--color-phrase-peach-text: #823a0d;--color-phrase-peach-swatch: #ed8545;--color-phrase-coral-surface: #fcede8;--color-phrase-coral-border: #f6c6b6;--color-phrase-coral-text: #7f2c10;--color-phrase-coral-swatch: #e97149;--color-phrase-salmon-surface: #fbebe9;--color-phrase-salmon-border: #f3beba;--color-phrase-salmon-text: #791e15;--color-phrase-salmon-swatch: #e05e52;--color-phrase-pink-surface: #fbe9f2;--color-phrase-pink-border: #f3bad4;--color-phrase-pink-text: #791544;--color-phrase-pink-swatch: #e05294;--color-phrase-berry-surface: #fbeaf0;--color-phrase-berry-border: #f2bacf;--color-phrase-berry-text: #78173a;--color-phrase-berry-swatch: #de5487;--color-phrase-magenta-surface: #f9ebf7;--color-phrase-magenta-border: #ecc0e4;--color-phrase-magenta-text: #6e2160;--color-phrase-magenta-swatch: #d062bc;--color-phrase-lavender-surface: #f4ecf9;--color-phrase-lavender-border: #ddc2eb;--color-phrase-lavender-text: #53246b;--color-phrase-lavender-swatch: #aa66cc;--color-phrase-violet-surface: #efebf9;--color-phrase-violet-border: #ccc0ed;--color-phrase-violet-text: #36206f;--color-phrase-violet-swatch: #8161d1;--color-phrase-periwinkle-surface: #eceef8;--color-phrase-periwinkle-border: #c3c8ea;--color-phrase-periwinkle-text: #252e6a;--color-phrase-periwinkle-swatch: #6875ca;--color-phrase-cyan-surface: #e8f8fc;--color-phrase-cyan-border: #b6e8f6;--color-phrase-cyan-text: #10677f;--color-phrase-cyan-swatch: #49c6e9;--color-phrase-teal-surface: #ecf8f9;--color-phrase-teal-border: #c2eaeb;--color-phrase-teal-text: #246a6b;--color-phrase-teal-swatch: #66cacc;--color-phrase-slate-surface: #eff3f5;--color-phrase-slate-border: #ccd8e0;--color-phrase-slate-text: #364b59;--color-phrase-slate-swatch: #5d8198;--color-phrase-stone-surface: #f3f3f1;--color-phrase-stone-border: #d9d7d3;--color-phrase-stone-text: #4d4942;--color-phrase-stone-swatch: #847d71;--color-phrase-graphite-surface: #f1f2f3;--color-phrase-graphite-border: #d4d5d9;--color-phrase-graphite-text: #43464c;--color-phrase-graphite-swatch: #737882;--color-cymbal-surface: #68baa2;--color-cymbal-edge: #206f62;--color-cymbal-shadow: #205d53;--color-cymbal-bell: #469e8b;--color-cymbal-highlight: #a6dfc8;--color-cymbal-stand: #176757;--duration-fast: 0ms;--duration-normal: 0ms;--duration-slow: 0ms}}@media(forced-colors:active){:root{--focus-outline-width: 2px;--focus-outline-color: Highlight}}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-md);line-height:var(--line-height-body)}button,input,select,textarea{font:inherit}img,svg{max-inline-size:100%;vertical-align:middle}a{color:var(--color-accent-text);text-underline-offset:.2em}:focus-visible{outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-offset);box-shadow:var(--shadow-focus),var(--control-shadow, 0 0 transparent)}::selection{background:var(--color-selection);color:var(--color-text)}.container{inline-size:min(100% - var(--page-gutter) * 2,var(--container-width));margin-inline:auto}.eyebrow{margin:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-eyebrow);text-transform:uppercase;color:var(--color-text-secondary)}.heading{margin:0;line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);font-weight:var(--font-weight-semibold)}.heading--display{font-size:var(--font-size-display);line-height:var(--line-height-tight)}.heading--section{font-size:var(--font-size-xl)}.text-muted{color:var(--color-text-muted)}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-block-size:var(--control-height);padding:var(--space-3) var(--space-5);border:var(--border-width) solid transparent;border-radius:var(--radius-md);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-heading);text-decoration:none;cursor:pointer;box-shadow:var(--control-shadow, none);transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.button--primary{color:var(--color-on-primary);background:var(--color-primary)}.button--primary:hover:not(:disabled){background:var(--color-primary-hover)}.button--primary:active:not(:disabled){background:var(--color-primary-active)}.button--inverse{color:var(--color-primary);background:var(--color-on-primary)}.button--inverse:hover:not(:disabled){background:var(--color-selection)}.button--secondary{color:var(--color-text);background:var(--color-surface);border-color:var(--color-border-control)}.button--secondary:hover:not(:disabled){background:var(--color-surface-subtle)}.button--ghost{color:inherit;background:transparent;border-color:transparent}.button--ghost:hover:not(:disabled){color:var(--color-text);background:var(--color-surface-subtle)}.button--toggle-subtle[aria-pressed=true]:not(:disabled){color:var(--color-primary);background:var(--color-selection);border-color:var(--color-border-control)}.button--toggle-subtle[aria-pressed=true]:hover:not(:disabled){background:var(--color-surface-subtle)}.button--nav{justify-content:start;gap:var(--space-3);padding:var(--space-2) var(--space-3);text-align:start;color:var(--color-text-secondary);background:transparent;border-color:transparent;font-weight:var(--font-weight-medium)}.button--nav:hover:not(:disabled){color:var(--color-text);background:var(--color-surface-subtle)}.button--nav[aria-pressed=true]{color:var(--color-primary);background:var(--color-surface-subtle);font-weight:var(--font-weight-bold)}.button--nav[aria-pressed=true]:hover:not(:disabled){background:var(--color-selection)}.button--nav .badge{margin-inline-start:auto;font-variant-numeric:tabular-nums}.button--nav[aria-pressed=true] .badge{color:var(--color-on-primary);background:var(--color-primary)}.button--toggle{color:var(--color-text);background:var(--color-surface-subtle);border-color:var(--color-border-control)}.button--toggle:hover:not(:disabled){background:var(--color-selection)}.button--toggle[aria-pressed=true]:not(:disabled){color:var(--color-on-primary);background:var(--color-primary);border-color:var(--color-on-primary);--control-shadow: inset 0 0 0 var(--border-width) var(--color-on-primary)}.button--toggle[aria-pressed=true]:hover:not(:disabled){background:var(--color-primary-hover)}.button--attention:not(:disabled){color:var(--color-highlight-text);background:var(--color-highlight-surface);border-color:var(--color-highlight-text)}.button--attention:hover:not(:disabled){color:var(--color-highlight-text);background:var(--color-highlight-surface);--control-shadow: inset 0 0 0 var(--border-width) var(--color-highlight-text)}.button--attention[aria-pressed=true]:not(:disabled){color:var(--color-highlight-surface);background:var(--color-highlight-text);border-color:var(--color-highlight-text);--control-shadow: inset 0 0 0 var(--border-width) var(--color-highlight-surface)}.button--attention[aria-pressed=true]:hover:not(:disabled){background:var(--color-highlight-text)}.hit-tone{--hit-color: var(--color-hit-normal);--hit-surface: var(--color-hit-normal-surface);--hit-text: var(--color-hit-normal-text)}.hit-tone[data-hit="^"]{--hit-color: var(--color-hit-accent);--hit-surface: var(--color-hit-accent-surface);--hit-text: var(--color-hit-accent-text)}.hit-tone[data-hit=g],.hit-tone[data-hit=q]{--hit-color: var(--color-hit-ghost);--hit-surface: var(--color-hit-ghost-surface);--hit-text: var(--color-hit-ghost-text)}.button--dynamic{background:var(--hit-surface);color:var(--hit-text);border-color:var(--hit-color);gap:var(--space-2)}.button--dynamic:hover:not(:disabled){--control-shadow: inset 0 0 0 var(--border-width) var(--hit-color)}.button--dynamic[aria-pressed=true]:not(:disabled){--control-shadow: inset 0 0 0 var(--border-width) var(--hit-color);text-decoration:underline;text-underline-offset:var(--space-1)}.button--dynamic[data-hit="-"][aria-pressed=true]:not(:disabled){background:var(--color-primary);color:var(--color-on-primary)}.button__dynamic-dot{display:grid;place-items:center;flex-shrink:0;inline-size:var(--space-4);block-size:var(--space-4);border-radius:var(--radius-full);background:var(--hit-color);color:var(--color-on-primary);line-height:1}.button--dynamic[data-hit="-"][aria-pressed=true] .button__dynamic-dot{background:var(--color-inverse-accent)}.button--danger{color:var(--color-on-primary);background:var(--color-danger-action)}.button--danger:hover:not(:disabled){background:var(--color-danger-hover)}.button--danger-soft{color:var(--color-error-text);background:var(--color-error-surface)}.button--danger-soft:hover:not(:disabled){color:var(--color-on-primary);background:var(--color-danger-action)}.button--dashed{color:var(--color-primary);background:var(--color-surface);border:var(--border-width) dashed var(--color-border-control)}.button--dashed:hover:not(:disabled){background:var(--color-success-surface);border-color:var(--color-primary)}.button:disabled{color:var(--color-on-disabled);background:var(--color-disabled);border-color:var(--color-border);cursor:not-allowed}.button--icon{inline-size:var(--space-16);block-size:var(--space-16);padding:0;border-radius:var(--radius-full);flex-shrink:0}.button--chip{border-radius:var(--radius-full);padding-inline:var(--space-4);gap:var(--space-2)}.button--compact{min-block-size:var(--space-10);padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs)}.button--badge{min-block-size:var(--space-6);padding:var(--space-1) var(--space-2);gap:var(--space-1);border-radius:var(--radius-full);font-size:var(--font-size-xs)}.button--badge app-action-icon{inline-size:var(--space-3);block-size:var(--space-3)}.button--choice{position:relative;color:var(--color-text);background:var(--color-surface);border-color:var(--color-border-control)}.button--choice:hover{background:var(--color-surface-subtle)}.button--choice:has(:checked){color:var(--color-on-primary);background:var(--color-primary);border-color:var(--color-primary)}.button--choice:has(:checked):hover{background:var(--color-primary-hover)}.button:focus-visible,.button--choice:has(:focus-visible){outline:var(--focus-outline-width) solid var(--focus-outline-color);outline-offset:var(--focus-offset);box-shadow:var(--shadow-focus),var(--control-shadow, 0 0 transparent)}.button__choice-input{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;opacity:0;cursor:pointer}.button--icon-compact{inline-size:var(--control-height);block-size:var(--control-height)}.button--icon-medium{inline-size:var(--space-10);block-size:var(--space-10);min-block-size:var(--space-10)}.button--icon-small{inline-size:var(--space-8);block-size:var(--space-8);min-block-size:var(--space-8)}.button--icon-mini{inline-size:var(--space-6);block-size:var(--space-6);min-block-size:var(--space-6)}.button--tile{border-radius:var(--radius-md)}.button--mint:not(:disabled){background:var(--color-success-surface);color:var(--color-primary);border-color:var(--color-selection)}.button--mint:hover:not(:disabled){background:var(--color-selection)}.button--play{inline-size:var(--space-20);block-size:var(--space-20);border-width:var(--focus-width)}.button--play:not(:disabled){background:linear-gradient(135deg,var(--color-primary-hover),var(--color-primary));border-color:var(--color-on-primary);--control-shadow: var(--shadow-play)}.button--play:hover:not(:disabled){background:var(--color-primary-hover)}.button--play .button__icon{inline-size:var(--space-8);block-size:var(--space-8)}.control-heading{display:flex;align-items:start;gap:var(--space-3)}.control-heading__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:var(--space-6);block-size:var(--space-6);border-radius:var(--radius-full);background:var(--color-warning-surface);color:var(--color-pulse-active)}.control-heading__icon svg{inline-size:var(--space-4);block-size:var(--space-4)}.control-heading__title{display:block;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:var(--line-height-heading)}.control-heading__hint{display:block;margin-block-start:var(--space-1);color:var(--color-text-secondary);font-size:var(--font-size-xs)}.control-heading--panel .control-heading__icon{inline-size:var(--space-10);block-size:var(--space-10);border-radius:var(--radius-md)}.control-heading--panel .control-heading__icon--mint{color:var(--color-primary);background:var(--color-selection)}.control-heading--panel .control-heading__hint{margin-block-end:0}.button__icon{inline-size:var(--space-6);block-size:var(--space-6)}.button-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}.button-row--compact{gap:var(--space-2)}.switch{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);inline-size:100%;min-block-size:var(--control-height);padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-size:var(--font-size-sm);text-align:start;cursor:pointer}.switch__track{display:flex;align-items:center;flex-shrink:0;inline-size:var(--space-12);block-size:var(--space-6);padding:var(--space-1);border-radius:var(--radius-full);background:var(--color-disabled);box-shadow:inset 0 0 0 var(--border-width) var(--color-border-control);transition:background var(--duration-fast) var(--ease-standard)}.switch__thumb{inline-size:var(--space-4);block-size:var(--space-4);border-radius:var(--radius-full);background:var(--color-on-primary);box-shadow:var(--shadow-card);transition:transform var(--duration-fast) var(--ease-standard)}.switch[aria-checked=true] .switch__track{background:var(--color-primary);box-shadow:none}.switch[aria-checked=true] .switch__thumb{transform:translate(var(--space-6))}.switch:hover:not(:disabled) .switch__track{box-shadow:inset 0 0 0 var(--border-width) var(--color-text-secondary)}.card{padding:var(--space-6);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card)}.inset-panel{padding:var(--space-4);background:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md)}.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);background:var(--color-surface-subtle)}.badge--success{color:var(--color-success-text);background:var(--color-success-surface)}.alert{display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);background:var(--color-surface-subtle);color:var(--color-text-secondary)}.alert--success{color:var(--color-success-text);background:var(--color-success-surface)}.alert--warning{color:var(--color-warning-text);background:var(--color-warning-surface)}.alert--error{color:var(--color-error-text);background:var(--color-error-surface)}.divider{border:0;border-block-start:var(--border-width) solid var(--color-border);margin-block:var(--space-6)}.dialog{inline-size:min(28rem,100% - var(--space-8));max-block-size:calc(100% - var(--space-8));padding:var(--space-6);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-brand)}.dialog::backdrop{background:var(--color-overlay)}.switch:disabled{color:var(--color-text-muted);cursor:not-allowed}.badge--category{color:var(--category-text, var(--color-text-secondary));background:var(--category-surface, var(--color-surface-subtle))}.badge--category[data-group=basic],.badge--category[data-group=latin]{--category-text: var(--color-success-text);--category-surface: var(--color-success-surface)}.badge--category[data-group=rock],.badge--category[data-group=rudiments]{--category-text: var(--color-group-rudiments);--category-surface: var(--color-group-rudiments-surface)}.badge--category[data-group=pop],.badge--category[data-group=technique]{--category-text: var(--color-group-technique);--category-surface: var(--color-group-technique-surface)}.badge--category[data-group=funk],.badge--category[data-group=rhythms]{--category-text: var(--color-warning-text);--category-surface: var(--color-warning-surface)}.badge--category[data-group=jazz],.badge--category[data-group=electronic]{--category-text: var(--color-hit-ghost-text);--category-surface: var(--color-hit-ghost-surface)}.badge--category[data-group=metal]{--category-text: var(--color-primary);--category-surface: var(--color-selection)}.button--toggle-surface:not([aria-pressed=true]){background:var(--color-surface);border-color:var(--color-border)}.button--toggle-surface:not([aria-pressed=true]):hover{background:var(--color-selection)}.button__letter-mark{display:grid;place-items:center;flex-shrink:0;inline-size:var(--space-5);block-size:var(--space-5);border-radius:var(--radius-full);background:var(--color-surface-subtle);color:var(--color-text-secondary);line-height:1}.button[aria-pressed=true] .button__letter-mark{background:transparent;color:inherit;box-shadow:inset 0 0 0 var(--border-width) currentColor}.button--dynamic-soft[data-hit="-"][aria-pressed=true]:not(:disabled){background:var(--hit-surface);color:var(--hit-text);text-decoration:none}.button--dynamic-soft[data-hit="-"][aria-pressed=true] .button__dynamic-dot{background:var(--hit-color)}.button--mix{inline-size:2.75rem;min-block-size:2.75rem;padding:0;border:0;border-radius:0;background:transparent;color:var(--color-text-secondary);touch-action:manipulation}.button__mix-mark{display:grid;place-items:center;inline-size:var(--space-6);block-size:var(--space-6);border-radius:var(--radius-full);background:var(--color-disabled)}.button--mix:hover .button__mix-mark{background:var(--color-selection)}.button--mix[aria-pressed=true] .button__mix-mark{background:var(--color-primary);color:var(--color-on-primary);box-shadow:inset 0 0 0 var(--border-width) var(--color-on-primary);text-decoration:underline}.button--mix:focus-visible{outline-offset:calc(-1 * var(--focus-outline-width))}.page-heading{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-3);margin-block-end:var(--space-6)}.page-heading__wave{position:absolute;z-index:-1;inset:0 0 0 auto;inline-size:45%;background:radial-gradient(ellipse at bottom right,var(--color-selection),transparent 70%);pointer-events:none}.page-heading__intro{margin:var(--space-2) 0 0;font-size:var(--font-size-sm)}.page-heading__motto{max-inline-size:9rem;font-family:var(--font-family-note);font-style:italic;color:var(--color-text-secondary);transform:rotate(-9deg);text-align:center}.page-heading__motto:after{content:"";display:block;inline-size:var(--space-8);block-size:var(--space-1);background:var(--color-pulse-accent);border-radius:var(--radius-full);margin:var(--space-3) auto 0}@media(max-width:64rem){.page-heading__motto{display:none}}@media(max-width:40rem){.page-heading>a{min-block-size:var(--control-height)}}[data-group-color=mint]{--phrase-surface: var(--color-phrase-mint-surface);--phrase-border: var(--color-phrase-mint-border);--phrase-text: var(--color-phrase-mint-text)}[data-group-color=lilac]{--phrase-surface: var(--color-phrase-lilac-surface);--phrase-border: var(--color-phrase-lilac-border);--phrase-text: var(--color-phrase-lilac-text)}[data-group-color=sky]{--phrase-surface: var(--color-phrase-sky-surface);--phrase-border: var(--color-phrase-sky-border);--phrase-text: var(--color-phrase-sky-text)}[data-group-color=sand]{--phrase-surface: var(--color-phrase-sand-surface);--phrase-border: var(--color-phrase-sand-border);--phrase-text: var(--color-phrase-sand-text)}[data-group-color=rose]{--phrase-surface: var(--color-phrase-rose-surface);--phrase-border: var(--color-phrase-rose-border);--phrase-text: var(--color-phrase-rose-text)}.switch--compact{inline-size:auto;min-block-size:var(--space-8);gap:var(--space-2)}.switch--compact .switch__track{inline-size:var(--space-8);block-size:var(--space-5);padding:var(--space-1)}.switch--compact .switch__thumb{inline-size:var(--space-3);block-size:var(--space-3)}.switch--compact[aria-checked=true] .switch__thumb{transform:translate(var(--space-3))}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--space-5)}.field{display:grid;align-content:start;gap:var(--space-2);min-inline-size:0}.field__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.field__hint,.field__error{margin:0;font-size:var(--font-size-xs)}.field__hint{color:var(--color-text-muted)}.field__error{color:var(--color-error-text)}.control{inline-size:100%;min-block-size:var(--control-height);min-inline-size:0;padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--color-border-control);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);transition:border-color var(--duration-fast) var(--ease-standard)}.control::placeholder{color:var(--color-text-muted);opacity:1}.control--compact{min-block-size:var(--space-8);padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);border-radius:var(--radius-sm)}.control:hover:not(:disabled):not([readonly]):not([aria-invalid=true]){border-color:var(--color-text-secondary)}.control:focus-visible{border-color:var(--color-focus)}.control[aria-invalid=true]{border-color:var(--color-error-text)}.control:disabled{color:var(--color-on-disabled);background:var(--color-disabled);cursor:not-allowed}.control[readonly]{background:var(--color-surface-subtle)}.control--range{accent-color:var(--color-primary);padding-inline:0;cursor:pointer}textarea.control{min-block-size:8rem;resize:vertical}.check{display:flex;align-items:center;gap:var(--space-3);min-block-size:var(--control-height);font-size:var(--font-size-sm);cursor:pointer}.check--compact{min-block-size:var(--space-8);gap:var(--space-2)}.check:has(:disabled){color:var(--color-text-muted);cursor:not-allowed}.form-stack{display:grid;gap:var(--space-5)}.password-control{display:flex;gap:var(--space-2)}.password-control .control{flex:1}.password-control .button{flex-shrink:0}.control-with-icon{position:relative;display:block;min-inline-size:0}.control-with-icon>app-action-icon,.control-with-icon>app-note-value-icon{position:absolute;inset-inline-start:var(--space-3);inset-block-start:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-primary)}.control-with-icon>.control{padding-inline-start:var(--space-10)}.auth-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--space-16);padding-block:var(--space-16);min-block-size:calc(100svh - 12rem)}.auth-layout__intro{max-inline-size:32rem}.auth-layout__intro h1{margin-top:var(--space-6)}.auth-layout__intro h1 span{color:var(--color-accent-text)}.auth-layout__description{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-block:var(--space-6) var(--space-10)}.auth-layout__signature{display:flex;align-items:center;gap:var(--space-5);color:var(--color-text-secondary);font-size:var(--font-size-sm);max-inline-size:24rem}.auth-layout__signature img{border-radius:var(--radius-lg);flex-shrink:0}.auth-layout__card{padding:clamp(1.5rem,4vw,3rem);inline-size:100%;max-inline-size:32rem;justify-self:end}.auth-layout__card h2{margin-top:var(--space-3)}.auth-layout__card form{margin-top:var(--space-8)}@media(max-width:48rem){.auth-layout{grid-template-columns:1fr;gap:var(--space-8);padding-block:var(--space-8)}.auth-layout__intro{max-inline-size:none}.auth-layout__signature{display:none}.auth-layout__description{margin-bottom:0}.auth-layout__card{justify-self:center;max-inline-size:none}}.auth-layout__switch{margin-top:var(--space-6);text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.scroll-reveal{opacity:1;transition:opacity var(--duration-reveal) var(--ease-reveal)}.scroll-reveal.is-hidden{opacity:0}.scroll-reveal.is-hidden:focus-visible,.scroll-reveal.is-hidden:has(:focus-visible){opacity:1}@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;transition:none}.scroll-reveal.is-hidden{opacity:1}}@media print{.scroll-reveal.is-hidden{opacity:1}}[data-color]{--shadow-source-selected: 0 0 0 var(--border-width) color-mix(in srgb, var(--source-text) 28%, transparent), 0 0 var(--space-3) color-mix(in srgb, var(--source-text) 18%, transparent)}[data-color=mint]{--source-border: var(--color-phrase-mint-border);--source-surface: var(--color-phrase-mint-surface);--source-text: var(--color-phrase-mint-text);--source-swatch: var(--color-phrase-mint-swatch)}[data-color=lilac]{--source-border: var(--color-phrase-lilac-border);--source-surface: var(--color-phrase-lilac-surface);--source-text: var(--color-phrase-lilac-text);--source-swatch: var(--color-phrase-lilac-swatch)}[data-color=sky]{--source-border: var(--color-phrase-sky-border);--source-surface: var(--color-phrase-sky-surface);--source-text: var(--color-phrase-sky-text);--source-swatch: var(--color-phrase-sky-swatch)}[data-color=sand]{--source-border: var(--color-phrase-sand-border);--source-surface: var(--color-phrase-sand-surface);--source-text: var(--color-phrase-sand-text);--source-swatch: var(--color-phrase-sand-swatch)}[data-color=rose]{--source-border: var(--color-phrase-rose-border);--source-surface: var(--color-phrase-rose-surface);--source-text: var(--color-phrase-rose-text);--source-swatch: var(--color-phrase-rose-swatch)}[data-color=jade]{--source-border: var(--color-phrase-jade-border);--source-surface: var(--color-phrase-jade-surface);--source-text: var(--color-phrase-jade-text);--source-swatch: var(--color-phrase-jade-swatch)}[data-color=sage]{--source-border: var(--color-phrase-sage-border);--source-surface: var(--color-phrase-sage-surface);--source-text: var(--color-phrase-sage-text);--source-swatch: var(--color-phrase-sage-swatch)}[data-color=lime]{--source-border: var(--color-phrase-lime-border);--source-surface: var(--color-phrase-lime-surface);--source-text: var(--color-phrase-lime-text);--source-swatch: var(--color-phrase-lime-swatch)}[data-color=lemon]{--source-border: var(--color-phrase-lemon-border);--source-surface: var(--color-phrase-lemon-surface);--source-text: var(--color-phrase-lemon-text);--source-swatch: var(--color-phrase-lemon-swatch)}[data-color=amber]{--source-border: var(--color-phrase-amber-border);--source-surface: var(--color-phrase-amber-surface);--source-text: var(--color-phrase-amber-text);--source-swatch: var(--color-phrase-amber-swatch)}[data-color=peach]{--source-border: var(--color-phrase-peach-border);--source-surface: var(--color-phrase-peach-surface);--source-text: var(--color-phrase-peach-text);--source-swatch: var(--color-phrase-peach-swatch)}[data-color=coral]{--source-border: var(--color-phrase-coral-border);--source-surface: var(--color-phrase-coral-surface);--source-text: var(--color-phrase-coral-text);--source-swatch: var(--color-phrase-coral-swatch)}[data-color=salmon]{--source-border: var(--color-phrase-salmon-border);--source-surface: var(--color-phrase-salmon-surface);--source-text: var(--color-phrase-salmon-text);--source-swatch: var(--color-phrase-salmon-swatch)}[data-color=pink]{--source-border: var(--color-phrase-pink-border);--source-surface: var(--color-phrase-pink-surface);--source-text: var(--color-phrase-pink-text);--source-swatch: var(--color-phrase-pink-swatch)}[data-color=berry]{--source-border: var(--color-phrase-berry-border);--source-surface: var(--color-phrase-berry-surface);--source-text: var(--color-phrase-berry-text);--source-swatch: var(--color-phrase-berry-swatch)}[data-color=magenta]{--source-border: var(--color-phrase-magenta-border);--source-surface: var(--color-phrase-magenta-surface);--source-text: var(--color-phrase-magenta-text);--source-swatch: var(--color-phrase-magenta-swatch)}[data-color=lavender]{--source-border: var(--color-phrase-lavender-border);--source-surface: var(--color-phrase-lavender-surface);--source-text: var(--color-phrase-lavender-text);--source-swatch: var(--color-phrase-lavender-swatch)}[data-color=violet]{--source-border: var(--color-phrase-violet-border);--source-surface: var(--color-phrase-violet-surface);--source-text: var(--color-phrase-violet-text);--source-swatch: var(--color-phrase-violet-swatch)}[data-color=periwinkle]{--source-border: var(--color-phrase-periwinkle-border);--source-surface: var(--color-phrase-periwinkle-surface);--source-text: var(--color-phrase-periwinkle-text);--source-swatch: var(--color-phrase-periwinkle-swatch)}[data-color=cyan]{--source-border: var(--color-phrase-cyan-border);--source-surface: var(--color-phrase-cyan-surface);--source-text: var(--color-phrase-cyan-text);--source-swatch: var(--color-phrase-cyan-swatch)}[data-color=teal]{--source-border: var(--color-phrase-teal-border);--source-surface: var(--color-phrase-teal-surface);--source-text: var(--color-phrase-teal-text);--source-swatch: var(--color-phrase-teal-swatch)}[data-color=slate]{--source-border: var(--color-phrase-slate-border);--source-surface: var(--color-phrase-slate-surface);--source-text: var(--color-phrase-slate-text);--source-swatch: var(--color-phrase-slate-swatch)}[data-color=stone]{--source-border: var(--color-phrase-stone-border);--source-surface: var(--color-phrase-stone-surface);--source-text: var(--color-phrase-stone-text);--source-swatch: var(--color-phrase-stone-swatch)}[data-color=graphite]{--source-border: var(--color-phrase-graphite-border);--source-surface: var(--color-phrase-graphite-surface);--source-text: var(--color-phrase-graphite-text);--source-swatch: var(--color-phrase-graphite-swatch)}.metronome-page{position:relative;display:grid;grid-template-columns:minmax(16rem,1fr) minmax(0,2fr);align-items:start;gap:var(--space-6);padding-block:var(--space-6) var(--space-8)}.metronome-page--standalone{grid-template-columns:minmax(0,1fr);max-inline-size:40rem}@media(width>48rem)and (height>30rem),(width>48rem)and (pointer:fine){.metronome-page__library--playlist{position:sticky;inset-block-start:var(--space-6);grid-row:span 2;min-block-size:0;block-size:var(--playlist-viewport-height, calc(100dvh - var(--space-6) - var(--space-8)))}.metronome-page__library--playlist app-playlist{block-size:100%}}.metronome-page__support{grid-column:2}.metronome-page--standalone .metronome-page__support{grid-column:1}.metronome-page__instrument,.metronome-page__library{min-inline-size:0}.metronome-page__instrument{container:exercise-player/inline-size}.metronome-page__library--exercises{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-self:stretch}.metronome-page .workspace-panel--hidden{display:none}.metronome__controls{display:grid;gap:var(--space-4);border:0;padding:0;margin:0;min-inline-size:0}.metronome__meter .button-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-1);inline-size:100%}.metronome__meter .button{min-block-size:var(--space-10);padding:var(--space-2) var(--space-1);gap:var(--space-1);box-shadow:var(--shadow-card)}.metronome__player{position:relative;overflow:hidden;padding-block:var(--space-4)}.metronome__focus-toggle{position:absolute;inset-block-start:var(--space-2);inset-inline-end:var(--space-2);z-index:var(--z-sticky)}@media(pointer:fine)and (hover:hover){.metronome__focus-toggle[aria-pressed=false]{display:none}}.metronome-page:not(.metronome-page--standalone) .metronome__tempo-heading{padding-inline:var(--space-10)}.metronome__tempo{position:relative;z-index:var(--z-base);text-align:center;gap:0}.metronome__tempo-heading{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr)}.metronome__tempo-heading>.control-heading__title{grid-area:1/1}.metronome__tempo-heading>.control-heading__hint{grid-area:2/1}.metronome__heading-covered{visibility:hidden}.metronome__next-pattern,.metronome__playlist-title{overflow-wrap:anywhere}.metronome__pattern-progress{min-inline-size:0;grid-area:1/1/3/2;contain:size}.metronome__pattern-progress .control-heading__title,.metronome__pattern-progress .control-heading__hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metronome__current-pattern{display:flex;justify-content:center;transform-origin:center top}.metronome__current-pattern-name{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}.metronome__remaining-bars{flex-shrink:0;white-space:pre;font-variant-numeric:tabular-nums}.metronome__pattern-progress--transition .metronome__current-pattern{animation:pattern-promote var(--duration-slow) var(--ease-standard)}.metronome__pattern-progress--transition .metronome__next-pattern{animation:pattern-preview var(--duration-slow) var(--ease-standard)}@keyframes pattern-promote{0%{transform:translateY(calc(1lh + var(--space-1))) scale(.667);opacity:.6}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pattern-preview{0%{transform:translateY(var(--space-3));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.metronome__pattern-progress--transition .metronome__current-pattern,.metronome__pattern-progress--transition .metronome__next-pattern{animation:none}}.metronome__dial{position:relative;display:grid;gap:var(--space-2);inline-size:min(100%,25rem);margin-inline:auto;padding-block-start:var(--space-24)}.metronome__scale{position:absolute;z-index:2;inset:0 0 auto;inline-size:100%}.metronome__tempo-row{position:relative;display:grid;grid-template-columns:var(--control-height) minmax(0,1fr) var(--control-height);align-items:center;gap:var(--space-2)}.metronome__tempo-row>.button{padding:0;font-size:var(--font-size-xl);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.metronome__bpm{inline-size:100%;padding:0;border-color:transparent;background:transparent;font-size:var(--font-size-tempo);line-height:var(--line-height-tight);font-weight:var(--font-weight-bold);text-align:center;letter-spacing:var(--letter-spacing-heading)}.metronome__bpm:hover{border-color:var(--color-border)}.metronome__bpm:focus{background:var(--color-surface)}.metronome__rhythm{position:relative;padding-block:var(--space-1)}.metronome__beats{--beat-size: calc(var(--space-10) * .7);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1);align-items:center;inline-size:min(100%,var(--beat-count) * var(--beat-size) + (var(--beat-count) - 1) * var(--space-1));margin:0 auto}.metronome__beat{flex:0 0 var(--beat-size);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-self:center;inline-size:100%;max-inline-size:var(--beat-size);block-size:var(--beat-size);aspect-ratio:1;min-block-size:0;padding:var(--space-1);border:var(--border-width) solid var(--color-on-pulse);border-radius:var(--radius-full);color:var(--color-on-pulse);background:var(--color-pulse);font-weight:var(--font-weight-semibold);cursor:pointer}.metronome__beat--accent{border-color:var(--color-on-pulse);background:var(--color-pulse-accent);color:var(--color-on-pulse)}.metronome__beat--muted{background:var(--color-surface);color:var(--color-text-muted);border-color:var(--color-border-control)}.metronome__beat--active:not(.metronome__beat--muted){background:var(--color-pulse-active);color:var(--color-on-primary)}.metronome__mute-mark{font-size:var(--font-size-lg);line-height:1}.metronome__beat:disabled{cursor:not-allowed;color:var(--color-on-disabled);background:var(--color-disabled)}.metronome__accent-mark{inline-size:var(--space-4);block-size:var(--space-4)}.metronome__transport{position:relative;justify-content:center;align-items:center;gap:var(--space-6);margin-block:var(--space-5)}.metronome__status-overlay{position:absolute;inset:0}.metronome__status-covered{visibility:hidden}.metronome__tap{touch-action:manipulation;user-select:none;-webkit-user-select:none}.metronome__status{position:relative;text-align:center;font-size:var(--font-size-xs);margin:var(--space-3) 0}.metronome__flourish{position:absolute;inset:auto 0 0 auto;inline-size:11rem;block-size:7rem;pointer-events:none}.metronome__flourish svg{position:absolute;inset:0;inline-size:100%;block-size:100%;fill:var(--color-selection);opacity:.35}.metronome__flourish path+path{fill:var(--color-success-surface)}.metronome__flourish span{position:absolute;inset:auto var(--space-4) var(--space-5) var(--space-8);font-family:var(--font-family-note);font-style:italic;font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;transform:rotate(-9deg)}.metronome__footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:var(--space-4)}.metronome__timing{display:contents}.metronome__time,.metronome__total{display:grid;gap:var(--space-2);min-inline-size:0;border-inline-end:var(--border-width) solid var(--color-border);padding-inline-end:var(--space-3)}.metronome__footer .field__label{font-size:var(--font-size-xs)}.metronome__clock{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;line-height:var(--space-8)}.metronome__daily{font-size:var(--font-size-sm);font-variant-numeric:tabular-nums;line-height:var(--space-8);color:var(--color-text)}.metronome__volume{grid-column:3;gap:0}.metronome__volume .control--range{min-block-size:var(--space-8);padding-block:0}.metronome-page__note{text-align:center;font-size:var(--font-size-xs);margin-block:var(--space-4) 0}.metronome__metric-label{display:flex;align-items:center;gap:var(--space-2)}@media(max-width:48rem),(pointer:coarse)and (max-height:30rem){.metronome-page{display:flex;flex-direction:column;gap:var(--space-3);inline-size:calc(100% - var(--space-4));padding-block:var(--space-2);min-block-size:0;overflow-y:auto;scrollbar-width:thin}.metronome-page__library{flex:none;block-size:min(30dvh,20rem);min-block-size:8rem;inline-size:100%}.metronome-page__library--exercises{display:block;block-size:min(48dvh,26rem);min-block-size:12rem}.metronome-page app-playlist{block-size:100%}.metronome-page__instrument{inline-size:100%}.metronome__controls{gap:var(--space-3)}.metronome__player,.metronome__footer{padding:var(--space-3)}.metronome__tempo #bpm-error:empty{display:none}.metronome__transport{gap:var(--space-5);margin-block:var(--space-4)}.metronome__flourish{opacity:.6;inline-size:8rem;block-size:5rem}.metronome__flourish span{display:none}.metronome__footer{grid-template-columns:minmax(0,1fr);gap:0}.metronome__timing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--space-3)}.metronome__time,.metronome__total{border:0;padding:0;gap:var(--space-1)}.metronome__total{text-align:end}.metronome__total .metronome__metric-label{justify-content:end}.metronome__volume{grid-column:1}.metronome__volume .control--range{grid-row:1}.metronome__volume .field__label{grid-row:2;margin-block-start:calc(-1 * var(--space-1))}.metronome-page__note{display:none}}.metronome-page.metronome-page--focused{flex:1;display:grid;grid-template-columns:minmax(12rem,1fr) minmax(0,2fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:var(--space-3);inline-size:calc(100% - var(--space-4));min-block-size:0;padding-block:var(--space-2);overflow:clip}.metronome-page.metronome-page--focused .metronome-page__support,.metronome-page.metronome-page--focused .metronome-page__note,.metronome-page.metronome-page--focused .metronome__rhythm-settings,.metronome-page.metronome-page--focused .metronome__flourish,.metronome-page.metronome-page--focused .metronome__tempo-heading>.control-heading__hint{display:none}.metronome-page.metronome-page--focused .metronome-page__library{position:static;display:block;grid-row:1;align-self:stretch;block-size:100%;min-block-size:0}.metronome-page.metronome-page--focused app-playlist{block-size:100%}.metronome-page.metronome-page--focused .metronome-page__instrument{min-block-size:0;container:exercise-player/size}.metronome-page.metronome-page--focused .metronome,.metronome-page.metronome-page--focused .metronome__controls{block-size:100%;min-block-size:0}.metronome-page.metronome-page--focused .metronome__controls{display:flex;flex-direction:column;gap:var(--space-2)}.metronome-page.metronome-page--focused .metronome__player{flex:1;min-block-size:0;display:flex;flex-direction:column;padding:var(--space-2);container:focused-player/size}.metronome-page.metronome-page--focused .metronome__tempo{flex:1;min-block-size:0;display:flex;flex-direction:column;justify-content:center;gap:var(--space-1)}.metronome-page.metronome-page--focused .metronome__tempo-heading{flex:none;padding-inline:var(--space-12)}.metronome-page.metronome-page--focused .metronome__tempo-heading .control-heading__title{font-size:clamp(var(--font-size-sm),4cqh,var(--font-size-xl))}.metronome-page.metronome-page--focused .metronome__playlist-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.metronome-page.metronome-page--focused .metronome__dial{inline-size:min(100%,78cqh);padding-block-start:16cqh;gap:var(--space-1)}.metronome-page.metronome-page--focused .metronome__bpm{font-size:clamp(var(--font-size-2xl),17cqh,8rem);min-block-size:var(--space-10)}.metronome-page.metronome-page--focused .metronome__tempo-row{z-index:var(--z-sticky);grid-template-columns:var(--space-10) minmax(0,1fr) var(--space-10)}.metronome-page.metronome-page--focused .metronome__tempo-row>.button{min-block-size:var(--space-10)}.metronome-page.metronome-page--focused .metronome__rhythm{padding:0}.metronome-page.metronome-page--focused .metronome__beats{--beat-size: clamp(var(--space-4), 5cqh, var(--space-8))}.metronome-page.metronome-page--focused #bpm-error:empty{display:none}.metronome-page.metronome-page--focused .metronome__transport{flex:none;gap:var(--space-4);margin-block:var(--space-2)}.metronome-page.metronome-page--focused .metronome__transport>.button{inline-size:clamp(var(--space-12),14cqh,var(--space-20));block-size:clamp(var(--space-12),14cqh,var(--space-20));min-block-size:var(--space-12)}.metronome-page.metronome-page--focused .metronome__transport>.button--play{inline-size:clamp(var(--space-12),18cqh,var(--space-24));block-size:clamp(var(--space-12),18cqh,var(--space-24))}.metronome-page.metronome-page--focused .metronome__status{flex:none;margin:0}.metronome-page.metronome-page--focused .metronome__footer{flex:none;padding:clamp(var(--space-2),2cqh,var(--space-6));gap:var(--space-2)}.metronome-page.metronome-page--focused .metronome__clock{font-size:clamp(var(--font-size-xl),5cqh,var(--font-size-2xl))}@media(max-width:48rem)and (min-height:30.001rem){.metronome-page.metronome-page--focused{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,3fr);gap:var(--space-2)}}@media(max-width:30rem)and (min-height:30.001rem){.metronome-page.metronome-page--focused{grid-template-rows:minmax(0,1fr) minmax(0,clamp(18rem,52dvh,24rem))}.metronome-page.metronome-page--focused .metronome__footer{grid-template-columns:minmax(0,1fr) minmax(0,2fr);padding:var(--space-2);gap:var(--space-3)}.metronome-page.metronome-page--focused .metronome__timing{display:block}.metronome-page.metronome-page--focused .metronome__total,.metronome-page.metronome-page--focused .metronome__time .control-heading__icon{display:none}.metronome-page.metronome-page--focused .metronome__time{gap:0}.metronome-page.metronome-page--focused .metronome__clock{font-size:var(--font-size-xl);line-height:var(--space-8)}.metronome-page.metronome-page--focused .metronome__volume{grid-column:2}.metronome-page.metronome-page--focused .metronome__volume .field__label{grid-row:1;margin:0}.metronome-page.metronome-page--focused .metronome__volume .control--range{grid-row:2}}@media(max-height:30rem){.metronome-page.metronome-page--focused .metronome__footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.metronome-page.metronome-page--focused .metronome__timing{grid-column:1}.metronome-page.metronome-page--focused .metronome__volume{grid-column:2}}