@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-900:oklch(35.9% .144 278.697);--color-indigo-950:oklch(25.7% .09 281.288);--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--radius-lg:.5rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.my-4{margin-block:calc(var(--spacing)*4)}.mt-4{margin-top:calc(var(--spacing)*4)}.contents{display:contents}.flex{display:flex}.size-20{width:calc(var(--spacing)*20);height:calc(var(--spacing)*20)}.h-full{height:100%}.w-full{width:100%}.flex-none{flex:none}.basis-sm{flex-basis:var(--container-sm)}.list-none{list-style-type:none}.flex-row{flex-direction:row}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing)*2)}.overflow-x-scroll{overflow-x:scroll}.rounded-lg{border-radius:var(--radius-lg)}.bg-indigo-300{background-color:var(--color-indigo-300)}.bg-white{background-color:var(--color-white)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-indigo-950{color:var(--color-indigo-950)}}:root{color-scheme:light dark;background-color:var(--color-indigo-950);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}a{color:var(--color-indigo-50);-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:var(--color-indigo-400)}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{background-color:var(--color-indigo-900);cursor:pointer;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button.note-btn{background-color:var(--color-indigo-50);padding:.6em 0}button:hover{color:var(--color-indigo-400)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.contents{text-align:center}.wrapper{width:100%;max-width:600px}@media(prefers-color-scheme:light){:root{color:var(--color-indigo-950);background-color:var(--color-indigo-50)}a:hover{color:var(--color-indigo-300)}button{background-color:var(--color-indigo-100)}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-900:oklch(35.9% .144 278.697);--color-indigo-950:oklch(25.7% .09 281.288);--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--radius-lg:.5rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}#root{text-align:center;max-width:1200px;margin:0 auto;padding:2rem}@media(max-width:600px){#root{min-width:100%;max-width:100%;padding:1rem}}}@layer components;@layer utilities{.my-4{margin-block:calc(var(--spacing)*4)}.mt-4{margin-top:calc(var(--spacing)*4)}.contents{display:contents}.flex{display:flex}.size-20{width:calc(var(--spacing)*20);height:calc(var(--spacing)*20)}.h-full{height:100%}.w-full{width:100%}.flex-none{flex:none}.basis-sm{flex-basis:var(--container-sm)}.list-none{list-style-type:none}.flex-row{flex-direction:row}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing)*2)}.overflow-x-scroll{overflow-x:scroll}.rounded-lg{border-radius:var(--radius-lg)}.bg-indigo-300{background-color:var(--color-indigo-300)}.bg-white{background-color:var(--color-white)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-indigo-950{color:var(--color-indigo-950)}}.color-change{animation:.1s linear alternate both color-change}@keyframes color-change{0%{background:0 0}to{background:var(--color-indigo-200)}}.modal-backdrop{position:fixed;inset:0;background-color:#00000080;z-index:40}.modal-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;background-color:#fff;border-radius:1rem;box-shadow:0 25px 50px -12px #00000040;padding:1.5rem;min-width:320px;max-width:90vw}.modal-title{font-size:1.125rem;font-weight:600;margin-bottom:1rem;color:var(--color-indigo-950);text-align:center}.tempo-controls{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1.5rem}.tempo-btn{width:2.5rem;height:2.5rem;padding:0;border-radius:9999px;background-color:var(--color-indigo-100);color:var(--color-indigo-950);font-weight:700;font-size:1.25rem;border:none;cursor:pointer;transition:background-color .2s}.tempo-btn:hover{background-color:var(--color-indigo-200)}.tempo-btn:active{background-color:var(--color-indigo-300)}.tempo-input{width:5rem;text-align:center;font-size:1.5rem;font-weight:700;background-color:var(--color-indigo-50);border-radius:.5rem;padding:.5rem .75rem;color:var(--color-indigo-950);border:2px solid transparent;transition:border-color .2s}.tempo-input:focus{outline:none;border-color:var(--color-indigo-400)}.tempo-slider-container{margin-bottom:1.5rem}.tempo-slider{width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,var(--color-indigo-200),var(--color-indigo-400));outline:none;cursor:pointer}.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-indigo-600);cursor:pointer;transition:background-color .2s}.tempo-slider::-webkit-slider-thumb:hover{background:var(--color-indigo-700)}.tempo-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-indigo-600);cursor:pointer;border:none;transition:background-color .2s}.tempo-slider::-moz-range-thumb:hover{background:var(--color-indigo-700)}.tempo-range-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--color-indigo-400);margin-top:.25rem}.time-signature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}.time-signature-btn{padding:.75rem 1rem;background-color:var(--color-indigo-50);color:var(--color-indigo-950);border-radius:.5rem;font-weight:500;font-size:1rem;border:2px solid transparent;cursor:pointer;transition:all .2s}.time-signature-btn:hover{background-color:var(--color-indigo-100);border-color:var(--color-indigo-300);transform:translateY(-1px)}.time-signature-btn:active{background-color:var(--color-indigo-200);transform:translateY(0)}.modal-btn-primary{width:100%;background-color:var(--color-indigo-500);color:#fff;border-radius:.5rem;padding:.5rem;font-weight:500;border:none;cursor:pointer;transition:background-color .2s;margin-top:1rem}.modal-btn-primary:hover{background-color:var(--color-indigo-600)}.modal-btn-primary:active{background-color:var(--color-indigo-700)}@media(max-width:600px){.modal-container{min-width:280px;padding:1.25rem}.tempo-input{width:4rem;font-size:1.25rem}.tempo-btn{width:2rem;height:2rem;font-size:1rem}.time-signature-btn{padding:.625rem .75rem;font-size:.875rem}}.bar-list{padding:1em;justify-content:space-evenly}.bar-note{background-image:url(/assets/note_sprite-Ii1GC_eR.png);background-repeat:no-repeat;background-size:auto 100px;background-position:0 0;width:100%;height:59px;margin:0 .5em;align-self:center}.bar-note--rest{margin-top:30px}.note{background-image:url(/assets/note_sprite-Ii1GC_eR.png);background-repeat:no-repeat;background-size:auto 100px;background-position:0 0;width:100%;height:59px}.note--rest{margin-top:10px}.normal-4{width:15px;background-position:0 0}.normal-2{width:16px;background-position:-15px 0}.normal-8{width:29px;background-position:-31px 0}.normal-16{width:30px;background-position:-60px 0}.normal-32{width:27px;background-position:-90px 0}.dotted-normal-4{width:20px;background-position:-180px 0}.dotted-normal-2{width:20px;background-position:-200px 0}.dotted-normal-8{width:29px;background-position:-220px 0}.dotted-normal-16{width:29px;background-position:-250px 0}.rest-4{width:10px;background-position:0 -61px}.rest-2{width:24px;background-position:-10px -61px}.rest-8{width:13px;background-position:-34px -61px}.rest-16{width:15px;background-position:-48px -61px}.rest-32{width:16px;background-position:-63px -61px}.dotted-rest-4{width:24px;background-position:-79px -61px}.dotted-rest-2{width:27px;background-position:-102px -61px}.dotted-rest-8{width:19px;background-position:-129px -61px}.dotted-rest-16{width:20px;background-position:-148px -61px}