@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:500;src:url(./baloo-2-devanagari-500-normal-Ddzk8H1G.woff2) format("woff2"),url(./baloo-2-devanagari-500-normal-BGpOhOmM.woff) format("woff");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:500;src:url(./baloo-2-vietnamese-500-normal-Cj5RGu3k.woff2) format("woff2"),url(./baloo-2-vietnamese-500-normal-ClyrcyJC.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:500;src:url(./baloo-2-latin-ext-500-normal-Ba7mhTsk.woff2) format("woff2"),url(./baloo-2-latin-ext-500-normal-D1XZow3C.woff) format("woff");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}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:500;src:url(./baloo-2-latin-500-normal-CmLZ27r7.woff2) format("woff2"),url(./baloo-2-latin-500-normal-BSdEhq8m.woff) format("woff");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:700;src:url(./baloo-2-devanagari-700-normal-D37Te3iF.woff2) format("woff2"),url(./baloo-2-devanagari-700-normal-CEIF4sJg.woff) format("woff");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:700;src:url(./baloo-2-vietnamese-700-normal-h4tlcePq.woff2) format("woff2"),url(./baloo-2-vietnamese-700-normal-DoF59Mjc.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:700;src:url(./baloo-2-latin-ext-700-normal-Mlh7kdab.woff2) format("woff2"),url(./baloo-2-latin-ext-700-normal-D6LeXASg.woff) format("woff");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}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:700;src:url(./baloo-2-latin-700-normal-CqTg7A15.woff2) format("woff2"),url(./baloo-2-latin-700-normal-Ld3Zm3l2.woff) format("woff");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:800;src:url(./baloo-2-devanagari-800-normal-BURIY0wZ.woff2) format("woff2"),url(./baloo-2-devanagari-800-normal-YLp1oUqR.woff) format("woff");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:800;src:url(./baloo-2-vietnamese-800-normal-ConLnEgt.woff2) format("woff2"),url(./baloo-2-vietnamese-800-normal-GQACmpuv.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:800;src:url(./baloo-2-latin-ext-800-normal-C_Iwmf1s.woff2) format("woff2"),url(./baloo-2-latin-ext-800-normal-D-iCxxqE.woff) format("woff");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}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:800;src:url(./baloo-2-latin-800-normal-BbF3Etk1.woff2) format("woff2"),url(./baloo-2-latin-800-normal-B8BXfZF7.woff) format("woff");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--sky: #e6eefb;--ink: #16204a;--ink-soft: #3a4470;--paper: #ffffff;--melody: #2c5be8;--chords: #8b4bd6;--bass: #13906a;--drums: #e8632b;--font: "Baloo 2", system-ui, sans-serif;--text-sm: 14px;--text-md: 16px;--text-lg: 20px;--text-xl: 28px;--radius-bar: 18px;--radius-panel: 14px;--gap: 12px;--hit-ms: .18s}*,*:before,*:after{box-sizing:border-box}html,body{margin:0}body{background:var(--sky);color:var(--ink);font-family:var(--font);font-size:var(--text-md);line-height:1.5;-webkit-font-smoothing:antialiased}button,select,input{font:inherit;color:inherit}button{cursor:pointer;min-height:44px;min-width:44px}:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.lane{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:var(--gap)}.lane__name{margin:0;font-size:var(--text-lg);font-weight:800;line-height:1.1;color:var(--ink);display:flex;align-items:center;gap:10px}.lane__name:before{content:"";width:14px;height:14px;border-radius:50%;background:var(--lane);flex:none}.lane__keys{display:flex;gap:3px;min-height:72px;touch-action:none;user-select:none;-webkit-user-select:none}.lane__key{flex:1 1 0;min-width:0;border:0;border-radius:6px;font-weight:700;font-size:var(--text-md);padding:0 2px;transition:transform var(--hit-ms) ease-out,filter var(--hit-ms) ease-out}.lane__key:first-child{border-radius:var(--radius-bar) 6px 6px var(--radius-bar)}.lane__key:last-child{border-radius:6px var(--radius-bar) var(--radius-bar) 6px}.lane__key.is-hit{transform:scale(1.06);filter:brightness(1.18);transition-duration:40ms}.lane__side{display:flex;align-items:center;gap:8px}.lane__dots{display:grid;grid-template-columns:repeat(8,auto);column-gap:4px;row-gap:6px}.lane__dot:nth-child(4n+1):not(:nth-child(8n+1)){margin-left:4px}.lane__dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--lane) 45%,transparent)}.lane__dot.is-filled{background:var(--lane);box-shadow:none}.lane__dot.is-now{outline:2px solid var(--ink);outline-offset:1px}.lane__clear{display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink-soft)}.lane__clear:hover{background:color-mix(in srgb,var(--lane) 14%,transparent);color:var(--ink)}@media (prefers-reduced-motion: reduce){.lane__key.is-hit{transform:none;filter:none;outline:3px solid var(--ink);outline-offset:-3px}}@media (max-width: 640px){.lane{grid-template-columns:1fr auto;row-gap:6px}.lane__keys{grid-column:1 / -1;grid-row:2;min-height:56px}.lane__key{font-size:var(--text-sm)}}.start{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:color-mix(in srgb,var(--sky) 72%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:var(--radius-panel);z-index:1}.start__panel{display:grid;justify-items:center;gap:16px;padding:24px;text-align:center}.start__title{margin:0;font-size:var(--text-xl);font-weight:800;line-height:1.15;max-width:18ch}.start__btn{display:inline-flex;align-items:center;gap:10px;min-height:64px;padding:0 40px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-size:var(--text-xl);font-weight:800}.start__btn:hover{background:#26326a}.start__note{margin:0;max-width:32ch;font-weight:700}.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:12px 16px;background:var(--paper);border-radius:var(--radius-panel)}.topbar__play{display:inline-flex;align-items:center;gap:8px;padding:0 22px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:800;font-size:var(--text-lg)}.topbar__play:hover{background:#26326a}.topbar__field{display:flex;align-items:center;gap:8px;min-height:44px}.topbar__label{font-weight:700;font-size:var(--text-sm)}.topbar__value{font-size:var(--text-sm);font-variant-numeric:tabular-nums;min-width:5.5em}.topbar input[type=range]{width:120px;accent-color:var(--ink);min-height:44px;cursor:pointer}.topbar select{min-height:44px;padding:0 10px;border:2px solid #c9d4ea;border-radius:10px;background:var(--paper);cursor:pointer}.topbar__status{margin:0 0 0 auto;font-weight:700;font-size:var(--text-sm)}@media (max-width: 640px){.topbar__status{margin-left:0}}.actions{display:flex;flex-wrap:wrap;gap:8px}.actions__btn{display:inline-flex;align-items:center;gap:6px;padding:0 14px;border:2px solid #c9d4ea;border-radius:999px;background:var(--paper);font-weight:700}.actions__btn:hover:not(:disabled){border-color:var(--ink)}.actions__btn:disabled{cursor:progress;opacity:.7}.app{max-width:1100px;margin:0 auto;padding:24px 16px 40px;display:grid;gap:16px}.app__header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}.app__intro{display:grid;gap:2px}.app__title{margin:0;font-size:var(--text-xl);font-weight:800;line-height:1.1}.app__help{margin:0;color:var(--ink-soft);max-width:60ch}.app__share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:700;font-size:var(--text-sm)}.app__share input{flex:1 1 280px;min-height:44px;padding:0 10px;border:2px solid var(--ink);border-radius:10px;background:var(--paper)}.app__stage{position:relative}.app__lanes{display:grid;gap:18px;padding:20px 16px;background:color-mix(in srgb,var(--paper) 55%,transparent);border-radius:var(--radius-panel)}