/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:block))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-tracking:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-amber-800:oklch(47.3% .137 46.201);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-bold:700;--font-weight-black:900;--tracking-tight:-.025em;--tracking-widest:.1em;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--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,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;-webkit-text-decoration:inherit;-webkit-text-decoration: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:where(:not(iframe)){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{.relative{position:relative}.flex{display:flex}.inline{display:inline}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.gap-2{gap:calc(var(--spacing) * 2)}.bg-\[\#e5f7ec\]{background-color:#e5f7ec}.bg-\[\#fff0ee\]{background-color:#fff0ee}.bg-red-500{background-color:var(--color-red-500)}.fill-current{fill:currentColor}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-\[\#2c774d\]{color:#2c774d}.text-\[\#342d49\]{color:#342d49}.text-\[\#493b24\]{color:#493b24}.text-\[\#746b82\]{color:#746b82}.text-\[\#81788f\]{color:#81788f}.text-\[\#a78ce7\]{color:#a78ce7}.text-\[\#a2483c\]{color:#a2483c}.text-amber-800{color:var(--color-amber-800)}.text-red-400{color:var(--color-red-400)}.text-white{color:var(--color-white)}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.filter{filter:var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-\[\#d6f2e0\]:hover{background-color:#d6f2e0}}@media (width>=48rem){.md\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}}:root{--ink:#342d49;--muted:#81788f;--cream:#fff8ea;--coral:#ff8b78;--yellow:#ffd66b;--mint:#a8dfc5;--lav:#c7b5f4;--shadow:0 8px 0 #43315b14, 0 14px 30px #43315b14}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 12% 12%,#fff 0 4px,#0000 5px),linear-gradient(135deg,#fff4dc,#f8efff 58%,#eaf8f4);margin:0;padding:20px;font-family:Nunito,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.app-shell{max-width:980px;margin:0 auto}.topbar{justify-content:space-between;align-items:center;margin-bottom:25px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{background:var(--yellow);border-radius:16px;place-items:center;width:48px;height:48px;font-size:30px;font-weight:900;transition:transform .2s cubic-bezier(.34,1.56,.64,1);display:grid;transform:rotate(-5deg);box-shadow:0 5px #efbd4e}.brand-mark:hover{transform:rotate(5deg)scale(1.05)}.sound-toggle{width:48px;height:48px;box-shadow:var(--shadow);background:#fff;border:0;border-radius:16px;justify-content:center;align-items:center;font-size:22px;transition:transform .1s,background .15s;display:flex}.sound-toggle:active{transform:translateY(2px)}.welcome{box-shadow:var(--shadow);background:#fff;border:3px solid #fff;border-radius:28px;justify-content:space-between;align-items:center;min-height:170px;margin-bottom:20px;padding:30px 34px;display:flex;position:relative;overflow:hidden}.eyebrow{letter-spacing:1.7px;color:#a18bbf;text-transform:uppercase;margin-bottom:7px;font-size:11px;font-weight:900}.welcome h2{letter-spacing:-1.2px;margin:0;font-size:clamp(27px,5vw,40px);font-weight:900;line-height:1.06}.welcome-copy{color:var(--muted);margin-top:10px;margin-bottom:0;font-weight:700}.music-doodle{color:#ffae5d;flex-shrink:0;width:180px;height:110px;position:relative}.music-doodle span{-webkit-user-select:none;user-select:none;font-size:54px;animation:4s ease-in-out infinite alternate floatDoodle;position:absolute;transform:rotate(-12deg)}.music-doodle span:first-child{color:#ff947e;font-size:75px;animation-delay:0s;top:22px;left:10px}.music-doodle span:nth-child(2){color:#a78ce7;animation-delay:1.2s;top:-4px;left:95px;transform:rotate(13deg)}.music-doodle span:nth-child(3){color:#f5c74f;font-size:34px;animation-delay:2.1s;top:60px;left:128px}@keyframes floatDoodle{0%{transform:translateY(0)rotate(-10deg)}to{transform:translateY(-8px)rotate(8deg)}}.instrument-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;display:grid}.instrument-card{background:#fff;border:3px solid #0000;border-radius:22px;flex-direction:column;align-items:center;gap:2px;padding:13px 8px 12px;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex;box-shadow:0 5px #43315b12}.instrument-card:active{transform:translateY(3px);box-shadow:0 2px #43315b12}.instrument-card.active{background:#fcfaff;border-color:#a78ce7;box-shadow:0 5px #a78ce740}.instrument-art{border-radius:18px;place-items:center;width:70px;height:56px;margin-bottom:5px;font-size:34px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);display:grid}.instrument-card:hover .instrument-art,.instrument-card.active .instrument-art{transform:scale(1.08)}.piano-art{background:#fff0d3}.xylo-art{background:#e5f7ec}.drum-art{background:#ffe6e1}.bell-art{background:#eee8ff}.instrument-name{font-size:15px;font-weight:900}.instrument-note{color:var(--muted);font-size:11px;font-weight:700}.play-panel{box-shadow:var(--shadow);background:#fff;border-radius:28px;padding:22px 24px 18px;position:relative}.panel-heading{justify-content:space-between;align-items:center;display:flex}.panel-heading h2{letter-spacing:-.5px;margin:0;font-size:23px;font-weight:900}.sparkle{color:#f2c44f;font-size:30px;animation:3s linear infinite sparkleSpin}@keyframes sparkleSpin{0%{transform:scale(1)rotate(0)}50%{transform:scale(1.2)rotate(180deg)}to{transform:scale(1)rotate(360deg)}}.instrument-stage{touch-action:none;border-radius:22px;justify-content:center;align-items:center;min-height:230px;margin-top:16px;padding:16px;display:flex;position:relative;overflow:hidden}.piano-stage{background:linear-gradient(145deg,#fff3dc,#ffe6d8)}.xylophone-stage{background:linear-gradient(145deg,#eaf8f1,#e8f3fb)}.drums-stage{background:linear-gradient(145deg,#fff0ed,#fffaeb)}.bells-stage{background:linear-gradient(145deg,#f5f0ff,#fff5ea)}.bell-row{box-sizing:border-box;flex-wrap:nowrap;justify-content:center;align-items:center;gap:clamp(6px,2.5vw,24px);width:100%;max-width:580px;padding:0 4px;display:flex}.bell{aspect-ratio:1;color:#553e14;background:linear-gradient(145deg,#fff4a8,#f6bf45);border:0;border-radius:50% 50% 44% 44%;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:2px;width:100%;min-width:0;max-width:96px;padding:4px;font-size:clamp(22px,5vw,32px);transition:transform 80ms,filter 80ms;display:flex;box-shadow:0 8px #d99a2c,0 12px 18px #a36a5b33}.bell span.label{white-space:nowrap;font-size:clamp(9px,2.2vw,12px);font-weight:900}.bell:nth-child(2n){color:#3b2866;background:linear-gradient(145deg,#e5d9ff,#a88de8);box-shadow:0 8px #8067bd,0 12px 18px #a36a5b33}.bell:active,.bell.playing{filter:brightness(1.08);transform:translateY(6px)}.piano-keys{filter:drop-shadow(0 8px 4px #4632501f);justify-content:center;width:min(100%,680px);height:176px;display:flex;position:relative}.piano-key{border:0;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;transition:transform 80ms,filter 80ms,background 80ms;display:flex;position:relative}.piano-key.white{z-index:1;color:#a497b7;background:linear-gradient(#fff,#f7f4f8);border:2px solid #ded8e6;border-radius:0 0 10px 10px;flex:1;max-width:82px;height:100%;margin:0 2px;font-size:13px;font-weight:800}.piano-key.black{z-index:2;color:#f7e69f;background:linear-gradient(#51485e,#292436);border-radius:0 0 8px 8px;width:7.2%;height:60%;font-size:11px;font-weight:700;position:absolute;top:0;box-shadow:0 4px #171321}.piano-key:active,.piano-key.playing{filter:brightness(.92);transform:translateY(5px)}.piano-key.white.playing{color:#6a4f00!important;background:linear-gradient(#fff0bc,#ffe175)!important;border-color:#d6b34a!important}.piano-key.black.playing{background:linear-gradient(#81729c,#4a3e61)!important;box-shadow:0 1px #171321!important}.xylo-bars{justify-content:center;align-items:center;gap:7px;width:100%;max-width:680px;height:100%;display:flex}.xylo-bar{background:var(--c);width:11%;max-width:72px;box-shadow:0 7px 0 var(--c), 0 10px 15px #9b8a8a33;border:0;border-radius:10px 10px 16px 16px}@supports (color:color-mix(in lab, red, red)){.xylo-bar{box-shadow:0 7px 0 color-mix(in srgb, var(--c), #000 15%), 0 10px 15px #9b8a8a33}}.xylo-bar{color:#fffffff2;text-shadow:0 1px 2px #0003;flex-direction:column;justify-content:space-between;align-items:center;padding:10px 0;font-size:14px;font-weight:900;transition:transform .1s,filter .1s;display:flex}.xylo-bar:active,.xylo-bar.playing{filter:brightness(1.12);transform:translateY(6px)}.drum-kit{justify-content:center;align-items:center;gap:clamp(12px,4vw,36px);width:100%;display:flex}.drum{aspect-ratio:1;color:#fff;background:radial-gradient(circle at 50% 40%,#fff 0 8%,#ffb0a2 9% 15%,#ef796f 16% 100%);border:0;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:clamp(86px,18vw,136px);font-size:32px;transition:transform 80ms,filter 80ms;display:flex;box-shadow:0 9px #c85c58,0 14px 20px #a36a5b33}.drum span.label{text-transform:uppercase;letter-spacing:.5px;opacity:.95;font-size:12px;font-weight:800}.drum:nth-child(2){background:radial-gradient(circle at 50% 40%,#fff 0 8%,#ffe9a4 9% 15%,#e9b74c 16% 100%);box-shadow:0 9px #c58f2c,0 14px 20px #a36a5b33}.drum:nth-child(3){background:radial-gradient(circle at 50% 40%,#fff 0 8%,#c5f0db 9% 15%,#66b997 16% 100%);box-shadow:0 9px #438d70,0 14px 20px #a36a5b33}.drum:active,.drum.playing{filter:brightness(1.08);transform:translateY(6px)}.hint-row{color:var(--muted);justify-content:center;align-items:center;gap:8px;padding-top:14px;font-size:13px;font-weight:800;display:flex}.hint-icon{font-size:18px}.keyboard-tip{text-align:center;color:#a49bad;margin:8px 0 0;font-size:12px;font-weight:700;display:none}@media (hover:hover) and (width>=768px){.keyboard-tip{display:block}}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 16px;display:grid}.control-card{box-shadow:var(--shadow);background:#fff;border-radius:24px;flex-direction:column;gap:10px;padding:18px;display:flex}.control-title{align-items:center;gap:8px;margin:0 0 2px;font-size:17px;font-weight:900;display:flex}.song-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.song-choice{color:#554a6d;background:#f4eef9;border:0;border-radius:14px;min-height:46px;padding:8px 10px;font-size:14px;font-weight:800;line-height:1.15;transition:background .15s,color .15s}.song-choice:hover{background:#eae1f3}.song-choice.selected{color:#fff;background:#a78ce7}.surprise-button,.clear-button,.action-button{border:0;border-radius:17px;justify-content:center;align-items:center;gap:6px;min-height:48px;padding:13px 22px;font-weight:900;transition:transform .1s,box-shadow .1s,background .15s;display:flex;box-shadow:0 5px #43315b1a}.surprise-button:active,.clear-button:active,.action-button:active{transform:translateY(3px);box-shadow:0 2px #43315b1a}.surprise-button:disabled,.clear-button:disabled,.action-button:disabled{opacity:.45;box-shadow:none;transform:none}.surprise-button{color:#493b24;background:#ffcf62}.clear-button{color:#746b82;box-shadow:none;background:#f7f4fa}.celebration{text-align:center;color:#8e70cf;opacity:0;pointer-events:none;min-height:28px;font-size:15px;font-weight:900;transition:opacity .25s,transform .25s cubic-bezier(.34,1.56,.64,1);transform:scale(.9)}.celebration.show{opacity:1;transform:scale(1)}footer{color:#a49bad;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:14px 4px 4px;font-size:12px;font-weight:700;display:flex}.music-particle{pointer-events:none;z-index:10;font-size:24px;animation:1.2s cubic-bezier(.2,.8,.3,1) forwards floatUp;position:absolute}@keyframes floatUp{0%{opacity:1;transform:translate(0)scale(.6)rotate(0)}50%{opacity:.9;transform:translate(calc(var(--dx,0px) * .5), -40px) scale(1.2) rotate(15deg)}to{opacity:0;transform:translate(var(--dx,0px), -80px) scale(1) rotate(-15deg)}}@media (width<=600px){body{padding:12px}.topbar{margin-bottom:16px}.welcome{min-height:150px;margin-bottom:14px;padding:23px 20px}.music-doodle{transform-origin:100%;width:105px;transform:scale(.75)}.welcome h2{font-size:29px}.welcome-copy{font-size:13px}.instrument-grid{gap:7px;margin-bottom:14px}.instrument-card{border-radius:17px;padding:10px 3px}.instrument-art{width:54px;height:45px;font-size:29px}.instrument-name{font-size:13px}.instrument-note{font-size:9px}.play-panel{border-radius:22px;padding:18px 13px 13px}.panel-heading h2{font-size:20px}.instrument-stage{min-height:205px;padding:10px}.piano-keys{height:158px}.hint-row{text-align:center;font-size:11px}.control-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin:16px 0 12px}.control-card{padding:14px}.surprise-button,.clear-button,.action-button{padding:12px 15px;font-size:13px}.bell-row{gap:clamp(4px,2vw,12px);width:100%;padding:0 2px}.bell{max-width:68px;font-size:clamp(18px,6vw,26px);box-shadow:0 6px #d99a2c,0 8px 12px #a36a5b22}.bell:nth-child(2n){box-shadow:0 6px #8067bd,0 8px 12px #a36a5b22}.bell span.label{font-size:clamp(8px,2.4vw,10px)}.drum-kit{gap:clamp(8px,3vw,20px)}.drum{width:clamp(72px,22vw,100px);font-size:26px}.mobile-break{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}