:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#e0e5ec;--bg-elevated:#e0e5ec;--surface:#e0e5ec;--surface-solid:#e0e5ec;--panel:#e0e5ec;--ink:#3d4852;--muted:#6b7280;--faint:#7d8898;--accent:#6c63ff;--accent-strong:#5850df;--accent-light:#8b84ff;--accent-secondary:#38b2ac;--accent-soft:#6c63ff24;--sage:#38b2ac;--sage-soft:#38b2ac24;--line:transparent;--line-strong:#3d48521f;--light-shadow:#ffffff94;--dark-shadow:#a3b1c6a3;--dark-shadow-strong:#a3b1c6b8;--button:#e0e5ec;--button-hover:#e0e5ec;--shadow:9px 9px 16px var(--dark-shadow), -9px -9px 16px var(--light-shadow);--shadow-hover:12px 12px 20px var(--dark-shadow-strong), -12px -12px 20px #ffffffa3;--shadow-small:5px 5px 10px var(--dark-shadow), -5px -5px 10px var(--light-shadow);--shadow-inset:inset 6px 6px 10px var(--dark-shadow), inset -6px -6px 10px var(--light-shadow);--shadow-inset-deep:inset 10px 10px 20px var(--dark-shadow-strong), inset -10px -10px 20px #ffffffa3;--shadow-inset-small:inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);--radius:16px;--radius-soft:32px;--control-height:48px;--ease:cubic-bezier(.22, 1, .36, 1);--display-font:"Plus Jakarta Sans", "Avenir Next", system-ui, sans-serif;--text-font:"DM Sans", "Avenir Next", system-ui, sans-serif;font-family:var(--text-font);font-synthesis:none;text-rendering:geometricprecision;font-weight:400}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#242a32;--bg-elevated:#242a32;--surface:#242a32;--surface-solid:#242a32;--panel:#242a32;--ink:#ecf1f7;--muted:#bec7d2;--faint:#97a2af;--accent:#8b84ff;--accent-strong:#b2adff;--accent-light:#b2adff;--accent-secondary:#52d6d0;--accent-soft:#8b84ff29;--sage:#52d6d0;--sage-soft:#52d6d024;--line-strong:#ecf1f71a;--light-shadow:#ffffff12;--dark-shadow:#0c0f129e;--dark-shadow-strong:#080a0cb8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;color:var(--ink);background:var(--bg);transition:background .52s var(--ease), color .52s var(--ease);margin:0}button,input,select{font:inherit}button,select{color:inherit}button{border:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.paper-grain{z-index:-1;pointer-events:none;opacity:.2;mix-blend-mode:multiply;background:radial-gradient(circle at 22% 18%,#ffffff57,#0000 28%) 0 0/720px 720px,radial-gradient(circle at 88% 72%,#a3b1c63d,#0000 30%) 0 0/620px 620px,radial-gradient(#3d48521a .45px,#0000 .6px) 0 0/32px 32px;position:fixed;inset:0}:root[data-theme=dark] .paper-grain{opacity:.3;mix-blend-mode:screen}.app-shell{width:100%;max-width:1360px;min-height:100dvh;animation:page-in .72s var(--ease) both;margin:0 auto;padding:0 32px}@keyframes page-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.top-bar{justify-content:space-between;align-items:center;gap:24px;min-height:96px;padding:24px 0 18px;display:flex}.brand{min-width:0;font-family:var(--display-font);letter-spacing:0;align-items:center;gap:14px;font-size:1.55rem;font-weight:800;line-height:1;display:inline-flex}.brand-mark{background:var(--surface);width:48px;height:48px;box-shadow:var(--shadow-small);transition:transform .42s var(--ease), box-shadow .42s var(--ease);border-radius:16px;flex:none;justify-content:center;align-items:end;gap:5px;padding:10px;display:inline-flex}.brand:hover .brand-mark{box-shadow:var(--shadow-hover);transform:rotate(-5deg)translateY(-1px)}.brand-mark span{background:var(--ink);border-radius:999px;width:3px;display:block}.brand-mark span:first-child,.brand-mark span:nth-child(3){height:14px}.brand-mark span:nth-child(2){background:var(--accent);height:26px}.top-actions{justify-content:end;align-items:center;gap:12px;min-width:0;display:flex}.status-pill,.theme-button{background:var(--surface);min-height:44px;box-shadow:var(--shadow-small);transition:transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);border-radius:999px;justify-content:center;align-items:center;gap:9px;display:inline-flex}.status-pill{max-width:240px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;padding:0 18px;font-size:.72rem;font-weight:700;overflow:hidden}.theme-button{min-width:112px;color:var(--ink);cursor:pointer;padding:0 16px}.theme-button:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}.theme-button:active{box-shadow:var(--shadow-inset-small);transform:translateY(.5px)}.workspace{gap:22px;min-width:0;padding:26px 0 58px;display:grid}.tempo-panel{border-radius:var(--radius-soft);background:var(--surface);min-width:0;min-height:470px;box-shadow:var(--shadow);grid-template-columns:minmax(0,1.06fr) minmax(310px,.94fr);grid-template-areas:"readout transport""range transport""pulse tap";align-items:center;gap:26px 68px;padding:56px;display:grid;position:relative}.tempo-panel>*{z-index:1;min-width:0;position:relative}.eyebrow,.small-label,.panel-head,.section-head,.tempo-readout span,.tempo-range span,.volume-control span{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;font-weight:800}.tempo-readout{text-align:left;grid-area:readout;align-self:end;justify-items:start;display:grid}.tempo-readout output{font-family:var(--display-font);letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums;text-shadow:-2px -2px 3px #ffffff73, 2px 2px 5px var(--dark-shadow);font-size:clamp(7rem,14vw,13.5rem);font-weight:800;line-height:.78;display:block}.tempo-readout span{color:var(--accent);margin-top:22px}.transport-row{grid-area:transport;grid-template-columns:repeat(4,62px);grid-template-rows:180px var(--control-height);justify-self:end;align-items:center;gap:12px;display:grid}.step-button,.chip,.text-button,.list-option,.tap-button{background:var(--button);color:var(--muted);cursor:pointer;box-shadow:var(--shadow-small);transition:color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease)}.step-button{min-width:0;height:var(--control-height);border-radius:var(--radius);font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:800}.step-button:hover,.chip:hover,.list-option:hover,.text-button:hover,.note-option:hover,.tap-button:hover{color:var(--ink);box-shadow:var(--shadow-hover);transform:translateY(-1px)}.step-button:active,.chip:active,.list-option:active,.text-button:active,.note-option:active,.tap-button:active{box-shadow:var(--shadow-inset-small);transform:translateY(.5px)}.play-button{color:#fff;background:linear-gradient(145deg, var(--accent-light), var(--accent));width:168px;height:168px;box-shadow:14px 14px 24px var(--dark-shadow-strong), -14px -14px 24px var(--light-shadow), inset 5px 5px 12px #433ac442, inset -5px -5px 12px #fff3;cursor:pointer;transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);border-radius:999px;grid-area:1/1/auto/-1;justify-self:center;place-items:center;display:grid}:root[data-theme=dark] .play-button{box-shadow:14px 14px 24px #080a0cb8,-14px -14px 24px #ffffff0f,inset 5px 5px 12px #433ac457,inset -5px -5px 12px #ffffff21}.play-button:hover{filter:saturate(1.08);box-shadow:18px 18px 28px var(--dark-shadow-strong), -18px -18px 28px var(--light-shadow), inset 5px 5px 12px #433ac43d, inset -5px -5px 12px #ffffff38;transform:translateY(-2px)}.play-button:active{transform:translateY(.5px);box-shadow:inset 5px 5px 11px #433ac48c,inset -5px -5px 11px #ffffff2e}.play-button svg{width:46px;height:46px;margin-left:5px}.play-button:has(svg[data-lucide=pause]) svg{margin-left:0}.tempo-range{grid-area:range;grid-template-columns:76px minmax(0,1fr);align-self:start;align-items:center;gap:18px;width:100%;max-width:610px;display:grid}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;min-width:0;height:32px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent), var(--accent-light)) left / var(--range-fill,0%) 100% no-repeat, var(--surface);height:14px;box-shadow:var(--shadow-inset-small);border-radius:999px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-small);border-radius:50%;margin-top:-7px}input[type=range]::-moz-range-track{background:var(--surface);height:14px;box-shadow:var(--shadow-inset-small);border-radius:999px}input[type=range]::-moz-range-progress{background:linear-gradient(90deg, var(--accent), var(--accent-light));border-radius:999px;height:14px}input[type=range]::-moz-range-thumb{background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-small);border:0;border-radius:50%}.pulse-field{width:100%;max-width:610px;min-height:54px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase;grid-area:pulse;align-items:center;font-size:.7rem;font-weight:800;display:grid}.pulse-line{transform-origin:0;background:linear-gradient(90deg, var(--accent), var(--sage)) left / 0% 100% no-repeat, var(--surface);width:100%;height:14px;box-shadow:var(--shadow-inset-small);border-radius:999px;margin-bottom:12px}.pulse-line.active{animation:pulse-line .3s var(--ease)}.pulse-line.silent{background:linear-gradient(90deg, var(--faint), var(--muted)) left / 0% 100% no-repeat, var(--surface)}@keyframes pulse-line{0%{background-size:100% 100%,auto}to{background-size:0% 100%,auto}}.tap-button{background:radial-gradient(circle at 31% 26%, #ffffff4d, transparent 34%), var(--surface);width:112px;min-width:112px;height:112px;min-height:112px;color:var(--ink);text-align:center;box-shadow:var(--shadow), inset 1px 1px 0 #ffffff2e;border-radius:50%;flex-direction:column;grid-area:tap;justify-content:center;justify-self:end;align-items:center;gap:6px;padding:0;font-size:.7rem;font-weight:800;line-height:1.05;display:inline-flex}.tap-button span{max-width:58px;display:block}.control-grid{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);grid-auto-flow:dense;gap:22px;display:grid}.panel,.practice-card{border-radius:var(--radius-soft);background:var(--panel);min-width:0;box-shadow:var(--shadow);transition:transform .3s var(--ease), box-shadow .3s var(--ease)}.panel:hover,.practice-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.panel{padding:28px}.panel-head,.section-head{justify-content:space-between;align-items:center;gap:14px;min-height:34px;display:flex}.chevron-button{background:var(--surface);width:40px;height:40px;color:var(--accent);box-shadow:var(--shadow-inset-small);cursor:pointer;border-radius:14px;place-items:center;display:grid;position:relative}.signature-control select{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.signature-display{min-height:136px;color:var(--ink);font-family:var(--display-font);font-variant-numeric:tabular-nums;box-shadow:var(--shadow-inset-deep);border-radius:28px;justify-content:center;align-items:center;gap:20px;margin:18px 0 20px;font-size:4.8rem;font-weight:800;line-height:.9;display:flex}.chip-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.chip{border-radius:var(--radius);min-height:40px;padding:0 10px;font-size:.76rem;font-weight:800;line-height:1.15}.chip.active,.list-option.active{color:#fff;background:linear-gradient(145deg, var(--accent-light), var(--accent));box-shadow:inset 2px 2px 4px #ffffff2e, 4px 4px 9px var(--dark-shadow)}.subdivision-panel{grid-area:1/2}.note-grid{grid-template-columns:repeat(7,minmax(78px,1fr));gap:12px;margin-top:20px;display:grid}.note-option{background:var(--surface);min-width:0;min-height:118px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-small);transition:color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);border-radius:20px;align-content:center;justify-items:center;gap:12px;padding:14px 8px;display:grid}.note-option.active{color:var(--accent);box-shadow:var(--shadow-inset-deep)}.note-symbol{min-height:42px;font-family:var(--display-font);align-items:center;font-size:2.45rem;font-weight:800;line-height:1;display:inline-flex}.note-option span:last-child{max-width:100%;color:var(--muted);text-align:center;font-size:.69rem;font-weight:800;line-height:1.2}.accent-panel{grid-column:1;grid-template-rows:auto 1fr auto;min-height:238px;display:grid}.accent-row{grid-template-columns:repeat(auto-fit,minmax(48px,1fr));align-items:center;gap:12px;margin:22px 0 16px;display:grid}.accent-dot{min-height:66px;color:var(--muted);cursor:pointer;background:0 0;justify-items:center;gap:9px;display:grid}.accent-dot span{background:var(--surface);width:38px;height:38px;box-shadow:var(--shadow-small);transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);border-radius:50%}.accent-dot:hover span{box-shadow:var(--shadow-hover);transform:scale(1.05)}.accent-dot.accent span{background:linear-gradient(145deg, var(--accent-light), var(--accent))}.accent-dot.mute span{background:var(--surface);box-shadow:var(--shadow-inset-small);position:relative}.accent-dot.mute span:before,.accent-dot.mute span:after{content:"";background:var(--muted);border-radius:999px;height:2px;position:absolute;top:18px;left:10px;right:10px}.accent-dot.mute span:before{transform:rotate(45deg)}.accent-dot.mute span:after{transform:rotate(-45deg)}.accent-dot.current span{box-shadow:0 0 0 8px var(--accent-soft), var(--shadow-small);transform:scale(1.1)}.accent-dot small{font-size:.76rem;font-weight:800}.legend{color:var(--muted);flex-wrap:wrap;gap:10px 16px;font-size:.76rem;font-weight:700;display:flex}.legend span{align-items:center;gap:8px;display:inline-flex}.dot{background:var(--surface);width:10px;height:10px;box-shadow:var(--shadow-inset-small);border-radius:50%;display:inline-block}.dot.accent{background:var(--accent);box-shadow:none}.dot.mute{background:linear-gradient(45deg, transparent 42%, var(--muted) 43%, var(--muted) 57%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--muted) 43%, var(--muted) 57%, transparent 58%);box-shadow:none;border-radius:0}.text-button{border-radius:14px;min-width:74px;min-height:36px;padding:0 14px;font-size:.76rem;font-weight:800}.sound-panel{grid-column:2;grid-template-columns:minmax(230px,.82fr) minmax(320px,1fr);align-content:start;align-items:center;gap:16px 18px;min-height:238px;display:grid}.sound-panel .panel-head{grid-column:1/-1}.sound-select,.volume-control{background:var(--surface);min-width:0;min-height:62px;box-shadow:var(--shadow-inset-deep);border-radius:20px;align-items:center;gap:14px;padding:0 18px;display:flex}.wood-icon{background:linear-gradient(135deg, transparent 0 44%, var(--accent-secondary) 45% 46%, transparent 47%), radial-gradient(circle at 50% 50%, var(--accent) 0 30%, transparent 31%), var(--surface);width:40px;height:40px;box-shadow:var(--shadow-small);border-radius:14px;flex:none}.sound-select select,.compact-field select,.compact-field input{min-width:0;color:var(--ink);background:0 0;border:0;outline:0}.sound-select select{width:100%;margin-left:auto;font-size:1rem;font-weight:800}option{color:var(--ink);background:var(--surface-solid)}.volume-control{grid-template-columns:auto auto minmax(110px,1fr) 48px;display:grid}.volume-control output{color:var(--muted);text-align:right;font-size:.8rem;font-weight:800}.practice-dock{gap:18px;display:grid}.section-head{border-radius:var(--radius);background:var(--surface);min-height:56px;box-shadow:var(--shadow-inset-small);padding:0 20px}.practice-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;display:grid}.practice-card{min-height:196px;padding:22px}.small-label{margin-bottom:14px;display:block}.stacked-options{gap:9px;display:grid}.list-option{text-align:left;border-radius:14px;min-height:40px;padding:0 13px;font-size:.82rem;font-weight:800;line-height:1.15}.practice-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.timer-output{color:var(--ink);font-family:var(--display-font);text-align:center;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-inset-deep);border-radius:20px;margin:18px 0 24px;padding:18px 12px;font-size:1.72rem;font-weight:800;line-height:1;display:block}.timer-presets{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.switch{flex:none;width:48px;height:28px;position:relative}.switch input{opacity:0;position:absolute}.switch span{background:var(--surface);box-shadow:var(--shadow-inset-small);transition:background .3s var(--ease), box-shadow .3s var(--ease);border-radius:999px;position:absolute;inset:0}.switch span:after{content:"";background:var(--surface);width:20px;height:20px;box-shadow:var(--shadow-small);transition:transform .3s var(--ease);border-radius:50%;position:absolute;top:4px;left:4px}.switch input:checked+span{background:linear-gradient(145deg, var(--accent-light), var(--accent));box-shadow:inset 2px 2px 4px #ffffff2e, var(--shadow-inset-small)}.switch input:checked+span:after{transform:translate(20px)}.compact-field{min-height:42px;color:var(--muted);border-radius:12px;grid-template-columns:minmax(78px,1fr) minmax(68px,90px);align-items:center;gap:8px;margin-top:4px;padding:0 6px;font-size:.8rem;font-weight:700;display:grid}.compact-field input,.compact-field select{text-align:right;border-radius:10px;width:100%;min-height:32px;font-weight:800}button,a,input,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media (width<=1180px){.app-shell{max-width:1040px;padding:0 22px}.tempo-panel{grid-template-columns:minmax(0,1fr) minmax(278px,.72fr);gap:24px 42px;padding:44px}.control-grid{grid-template-columns:1fr}.subdivision-panel,.accent-panel,.sound-panel{grid-area:auto}.practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=820px){.app-shell{max-width:640px;padding:0 16px}.top-bar{grid-template-columns:1fr;gap:18px;min-height:auto;padding:20px 0;display:grid}.top-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-content:stretch;width:100%;display:grid}.status-pill,.theme-button{width:100%;min-width:0;max-width:none;padding-inline:10px}.workspace{gap:18px;padding:20px 0 48px}.tempo-panel{grid-template-columns:1fr;grid-template-areas:"readout""transport""range""pulse""tap";gap:24px;min-height:auto;padding:34px 22px}.tempo-readout{text-align:center;justify-items:center}.tempo-readout output{font-size:clamp(7rem,34vw,9rem)}.transport-row{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:144px var(--control-height);justify-self:center;width:100%;max-width:300px}.play-button{justify-self:center;width:128px;height:128px}.tempo-range,.pulse-field,.tap-button{justify-self:center;width:100%;max-width:380px}.pulse-field{text-align:center;justify-items:center}.tap-button{width:104px;min-width:104px;height:104px;min-height:104px}.tempo-range{grid-template-columns:1fr;gap:12px}.note-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sound-panel{grid-template-columns:1fr}.volume-control{grid-template-columns:auto auto 1fr auto}.practice-grid{grid-template-columns:1fr}.practice-card{min-height:auto}}@media (width<=460px){.app-shell{max-width:430px;padding:0 14px}.brand{font-size:1.42rem}.brand-mark{width:44px;height:44px}.transport-row{grid-template-rows:128px var(--control-height);gap:8px}.play-button{width:112px;height:112px}.tap-button{width:96px;min-width:96px;height:96px;min-height:96px}.panel,.practice-card{padding:18px}.signature-display{min-height:112px;font-size:4rem}.chip-row{grid-template-columns:repeat(2,minmax(0,1fr))}.accent-row{grid-template-columns:repeat(4,1fr)}.volume-control{grid-template-columns:auto 1fr auto}.volume-control svg{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}