/*! tailwindcss v4.2.1 | 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;--spacing:.25rem;--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;-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{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{.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}}:root{--ink:#252a33;--muted:#6f7279;--paper:#f6f1e8;--card:#fffdf8;--line:#d8d0c2;--coral:#d95f52;--wood-dark:#86502d;--wood:#b67643;--wood-light:#d99c60}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);font-family:var(--font-geist-sans), Arial, Helvetica, sans-serif;background:radial-gradient(circle at 11% 5%,#ffffffb8 0 10%,#0000 31%),linear-gradient(#f8f4ec 0%,#eee8dd 100%);min-width:320px;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.site-shell{min-height:100vh;overflow:hidden}.topbar{border-bottom:1px solid #574d3c2e;justify-content:space-between;align-items:center;max-width:1320px;margin:0 auto;padding:22px clamp(22px,5vw,72px);display:flex}.brand{color:var(--ink);letter-spacing:-.015em;align-items:center;gap:12px;font-size:15px;font-weight:750;text-decoration:none;display:inline-flex}.brand-mark{align-items:flex-end;gap:2px;width:30px;height:23px;display:flex;transform:rotate(-8deg)}.brand-mark i{border-radius:2px;width:6px;height:20px;display:block}.brand-mark i:first-child{background:#dd6258;height:22px}.brand-mark i:nth-child(2){background:#e9a341;height:19px}.brand-mark i:nth-child(3){background:#63a073;height:16px}.brand-mark i:nth-child(4){background:#587ea7;height:13px}.topbar-note{color:var(--muted);margin:0;font-family:Georgia,Times New Roman,serif;font-size:14px;font-style:italic}.hero{text-align:center;max-width:900px;margin:0 auto;padding:clamp(34px,5vw,58px) 28px 24px}.eyebrow{color:#8e6948;font-family:var(--font-geist-mono), monospace;letter-spacing:.2em;margin:0 0 12px;font-size:10px;font-weight:700}h1{letter-spacing:-.045em;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(34px,4.5vw,58px);font-weight:400;line-height:.96}h1 em{color:var(--coral);font-weight:400}.intro{color:var(--muted);max-width:580px;margin:16px auto 0;font-size:clamp(14px,1.4vw,16px);line-height:1.5}.instrument-card{background:var(--card);border:1px solid #6d5b4238;border-radius:26px;width:calc(100% - 40px);max-width:1240px;margin:0 auto;overflow:hidden;box-shadow:0 24px 70px #48361f1f,inset 0 2px #ffffffd9}.control-strip{border-bottom:1px solid var(--line);grid-template-columns:auto auto auto 1fr auto;align-items:center;gap:14px;padding:18px 24px;display:grid}.control-group{align-items:center;gap:12px;display:flex}.bar-colors-control{justify-self:start}.automatic-color-note{color:#5d5953;background:#fff;border:1px solid #ddd6cb;border-radius:8px;padding:7px 10px;font-size:12px;font-weight:650;box-shadow:0 1px 4px #40311d1a}.labels-control{justify-self:center}.control-label{color:#77736d;letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:700}.control-label b{color:var(--ink);margin-left:4px}.segmented{background:#ede9e1;border:1px solid #ddd6cb;border-radius:10px;padding:3px;display:inline-flex}.segmented button{color:#706b64;cursor:pointer;background:0 0;border:0;border-radius:7px;padding:7px 9px;font-size:12px;font-weight:650}.segmented button:hover{color:var(--ink)}.segmented button.selected{color:var(--ink);background:#fff;box-shadow:0 1px 4px #40311d21}.segmented .solfege-option{flex-direction:column;justify-content:center;align-items:center;gap:2px;display:inline-flex}.fixed-do-note{color:#8a857e;font-size:12px;font-weight:550;line-height:1}.segmented button:focus-visible,.xylophone-bar:focus-visible,.transport-button:focus-visible,.pattern-button:focus-visible,.stop-all:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #267e90}.volume-control{gap:7px;min-width:145px;display:grid}.volume-row{color:#77736d;align-items:center;gap:8px;display:flex}.volume-row input{accent-color:var(--coral);cursor:pointer;width:118px}.bar-setup-strip{border-bottom:1px solid var(--line);background:#faf7f0;justify-content:center;align-items:center;gap:14px;padding:12px 24px;display:flex}.bar-setup-options{flex-wrap:wrap;justify-content:center}.bar-setup-status{color:#77736d;min-width:116px;font-size:12px}.setup-divider{background:var(--line);align-self:stretch;width:1px}.accidental-control{align-items:center;gap:9px;display:flex}.accidental-options button{min-width:42px;font-size:14px;font-weight:750}.accidental-options button.selected{color:#fff;background:#2d3139}.instrument-scroll{scrollbar-color:#b9ae9d transparent;scrollbar-width:thin;background:radial-gradient(at 50% 78%,#4a2c1821,#0000 37%),linear-gradient(90deg,#ffffff85,#0000 8% 92%,#ffffff85),#f0ebe2;padding:clamp(24px,4vw,44px) clamp(14px,3vw,38px);overflow-x:auto}.instrument-frame{justify-content:center;align-items:center;min-width:1040px;height:390px;margin:0 auto;padding:24px 76px;display:flex;position:relative}.frame-end{z-index:2;background:repeating-linear-gradient(92deg,#ffecc512 0 2px,#0000 2px 8px),linear-gradient(90deg,#9b5f32,#c68045 46%,#8e522c);border:1px solid #6c3c20;position:absolute;box-shadow:0 8px 12px #361e103d,inset 0 1px #ffe5b87a}.frame-end-low{border-radius:5px 2px 2px 5px;width:62px;top:55px;bottom:55px;left:14px}.frame-end-high{border-radius:2px 5px 5px 2px;width:34px;top:130px;bottom:130px;right:24px}.rail{transform-origin:0;z-index:0;background:linear-gradient(#2d2119,#4a3425 48%,#1e1712 100%);border:1px solid #1b130f;border-radius:999px;height:14px;position:absolute;left:49px;right:46px;box-shadow:0 4px 6px #1c0f0761}.rail-top{top:103px;transform:rotate(4.6deg)}.rail-bottom{top:278px;transform:rotate(-4.6deg)}.bars{z-index:1;justify-content:center;align-items:center;gap:7px;width:100%;height:100%;display:flex;position:relative}.boomwhacker-frame .frame-end,.boomwhacker-frame .rail{opacity:0}.boomwhacker-bars{align-items:flex-end;gap:6px;padding-bottom:28px}.xylophone-bar{background:linear-gradient(90deg, #ffffff4a, transparent 21% 77%, #2e18152b), var(--bar-color);box-shadow:0 6px 0 var(--bar-color), 0 11px 11px #311b113d, inset 0 1px 0 #ffffff6b;border:1px solid #33241c47;border-radius:10px;align-items:center}@supports (color:color-mix(in lab, red, red)){.xylophone-bar{box-shadow:0 6px 0 color-mix(in srgb, var(--bar-color) 72%, #43291c), 0 11px 11px #311b113d, inset 0 1px 0 #ffffff6b}}.xylophone-bar{color:var(--bar-ink,#fff);cursor:pointer;height:var(--bar-height);opacity:1;touch-action:none;min-width:49px;max-width:58px;transform:translateY(0) rotate(var(--tilt,0deg));-webkit-user-select:none;user-select:none;flex:1;justify-content:center;padding:0;transition:filter .1s,box-shadow .18s,opacity .22s,transform .28s cubic-bezier(.2,.8,.3,1);display:flex;position:relative;overflow:visible}.xylophone-bar.wooden{background:linear-gradient(90deg, #ffffff2e, transparent 22% 76%, #2212092e), repeating-linear-gradient(94deg, #ffecc50d 0 1px, transparent 1px 7px), var(--bar-color);border-color:#59341e}.xylophone-bar.metallic{background:linear-gradient(90deg, #3a464d59 0%, #ffffffb8 13%, #ffffff1f 35%, #ffffff94 51%, #27313752 100%), var(--bar-color);box-shadow:0 6px 0 var(--bar-color), 0 11px 11px #222b303d, inset 0 1px 0 #ffffffd1;border-color:#647077}@supports (color:color-mix(in lab, red, red)){.xylophone-bar.metallic{box-shadow:0 6px 0 color-mix(in srgb, var(--bar-color) 65%, #3f4a50), 0 11px 11px #222b303d, inset 0 1px 0 #ffffffd1}}.xylophone-bar.boomwhacker-tube{background:linear-gradient(90deg, var(--bar-color) 0%, var(--bar-color) 11%, var(--bar-color) 32%, var(--bar-color) 62%, var(--bar-color) 100%)}@supports (color:color-mix(in lab, red, red)){.xylophone-bar.boomwhacker-tube{background:linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 72%, #171717) 0%, color-mix(in srgb, var(--bar-color) 88%, #fff) 11%, color-mix(in srgb, var(--bar-color) 97%, #fff) 32%, var(--bar-color) 62%, color-mix(in srgb, var(--bar-color) 75%, #161616) 100%)}}.xylophone-bar.boomwhacker-tube{border-color:var(--bar-color)}@supports (color:color-mix(in lab, red, red)){.xylophone-bar.boomwhacker-tube{border-color:color-mix(in srgb, var(--bar-color) 68%, #222)}}.xylophone-bar.boomwhacker-tube{border-radius:27px 27px 8px 8px;box-shadow:0 8px 13px #251d183d,inset 1px 0 #ffffff4d,inset -2px 0 #1614122e}.xylophone-bar.boomwhacker-tube:before{background:linear-gradient(180deg, var(--bar-color), var(--bar-color))}@supports (color:color-mix(in lab, red, red)){.xylophone-bar.boomwhacker-tube:before{background:linear-gradient(180deg, color-mix(in srgb, var(--bar-color) 87%, #fff), var(--bar-color))}}.xylophone-bar.boomwhacker-tube:before{border:1px solid var(--bar-color)}@supports (color:color-mix(in lab, red, red)){.xylophone-bar.boomwhacker-tube:before{border:1px solid color-mix(in srgb, var(--bar-color) 70%, #222)}}.xylophone-bar.boomwhacker-tube:before{content:"";border-radius:50%;height:15px;position:absolute;top:-1px;left:2px;right:2px;box-shadow:inset 0 2px 3px #ffffff4d}.xylophone-bar.boomwhacker-tube:after{background:radial-gradient(ellipse at 50% 42%, var(--bar-color) 0 53%, var(--bar-color) 56% 67%, var(--bar-color) 72% 79%, var(--bar-color) 84% 100%)}@supports (color:color-mix(in lab, red, red)){.xylophone-bar.boomwhacker-tube:after{background:radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--bar-color) 28%, #070707) 0 53%, color-mix(in srgb, var(--bar-color) 63%, #111) 56% 67%, color-mix(in srgb, var(--bar-color) 84%, #fff) 72% 79%, color-mix(in srgb, var(--bar-color) 73%, #111) 84% 100%)}}.xylophone-bar.boomwhacker-tube:after{content:"";border-radius:50%;height:17px;position:absolute;bottom:-8px;left:1px;right:1px;box-shadow:0 3px 3px #1a14113d}.xylophone-bar.boomwhacker-tube .pin{display:none}.xylophone-bar.boomwhacker-tube .bar-label{z-index:1;position:relative}.xylophone-bar.boomwhacker-tube .key-label{z-index:1}.xylophone-bar:nth-child(3n+1){--tilt:-.25deg}.xylophone-bar:nth-child(3n+2){--tilt:.2deg}.xylophone-bar:hover{filter:brightness(1.08)saturate(1.05);transform:translateY(-3px) rotate(var(--tilt))}.xylophone-bar.active,.xylophone-bar:active{filter:brightness(1.18)saturate(1.1);box-shadow:0 2px 0 var(--bar-color), 0 5px 7px #311b113b, inset 0 1px 0 #ffffff80}@supports (color:color-mix(in lab, red, red)){.xylophone-bar.active,.xylophone-bar:active{box-shadow:0 2px 0 color-mix(in srgb, var(--bar-color) 65%, #43291c), 0 5px 7px #311b113b, inset 0 1px 0 #ffffff80}}.xylophone-bar.active,.xylophone-bar:active{transform:translateY(5px) rotate(var(--tilt)) scale(.99);z-index:3}.xylophone-bar.metallic.active,.xylophone-bar.metallic:active{box-shadow:0 2px 0 var(--bar-color), 0 5px 7px #222b303b, inset 0 1px 0 #ffffffc7}@supports (color:color-mix(in lab, red, red)){.xylophone-bar.metallic.active,.xylophone-bar.metallic:active{box-shadow:0 2px 0 color-mix(in srgb, var(--bar-color) 62%, #3f4a50), 0 5px 7px #222b303b, inset 0 1px 0 #ffffffc7}}.xylophone-bar.boomwhacker-tube.active,.xylophone-bar.boomwhacker-tube:active{box-shadow:0 4px 7px #251d1833,inset 1px 0 #ffffff47,inset -2px 0 #1614122e}.xylophone-bar.removed{box-shadow:none;opacity:0;pointer-events:none;transform:translateY(-108px)rotate(10deg)scale(.9)}.xylophone-bar.removed:nth-child(2n){transform:translateY(-108px)rotate(-9deg)scale(.9)}.striking-mallet{pointer-events:none;z-index:8;width:82px;height:78px;animation:.27s cubic-bezier(.2,.8,.3,1) both mallet-strike;position:absolute;top:calc(50% - 74px);left:calc(50% - 17px)}.mallet-handle{transform-origin:0;background:linear-gradient(#e1ae72,#a86936 48%,#774321);border:1px solid #4c29138f;border-radius:999px;width:61px;height:7px;position:absolute;bottom:12px;left:27px;transform:rotate(-47deg);box-shadow:0 2px 3px #2a180d47}.mallet-head{border:1px solid #2b1f18b8;border-radius:50%;width:23px;height:23px;position:absolute;bottom:2px;left:16px;box-shadow:0 3px 5px #23160e54,inset 0 1px 2px #ffffff59}.warm-mallet .mallet-head{background:radial-gradient(circle at 35% 30%,#f3d8ab 0 14%,#c8925d 42%,#82502d 100%)}.bright-mallet .mallet-head{background:radial-gradient(circle at 35% 28%,#77736f 0 10%,#2b2928 42%,#090909 100%)}@keyframes mallet-strike{0%{opacity:0;transform:translate(24px,-25px)rotate(8deg)}20%{opacity:1}52%{opacity:1;transform:translate(-12px,9px)rotate(-3deg)}68%{opacity:1;transform:translate(-8px,4px)rotate(-1deg)}to{opacity:0;transform:translate(12px,-18px)rotate(5deg)}}.pin{background:radial-gradient(circle at 35% 28%,#8c7a6b 0 9%,#302820 15% 48%,#0e0c0a 54% 100%);border:1px solid #070605;border-radius:50%;width:12px;height:12px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 2px 3px #1a0f097a}.pin-top{top:20px}.pin-bottom{bottom:20px}.bar-label{text-shadow:0 1px 1px #311d1433;font-family:Georgia,Times New Roman,serif;font-size:clamp(18px,2vw,26px);font-weight:700}.key-label{color:#fff;font-family:var(--font-geist-mono), monospace;text-shadow:0 1px 1px #00000040;white-space:nowrap;background:#25211f52;border:1px solid #ffffff47;border-radius:4px;min-width:18px;padding:0 3px;font-size:9px;font-weight:700;line-height:16px;position:absolute;bottom:49px;left:50%;transform:translate(-50%)}.play-hint{border-top:1px solid var(--line);background:#fffcf5;justify-content:center;align-items:center;gap:14px;padding:20px 24px;display:flex}.play-hint p{color:#74716b;margin:0;font-size:12px;line-height:1.5}.play-hint strong{color:var(--ink);font-size:13px}.mallet-icon{color:var(--coral);font-family:Georgia,serif;font-size:26px;transform:rotate(-12deg)}.performance-panel{color:#fff;background:#2d3139;grid-template-columns:minmax(250px,.8fr) 1.6fr;align-items:center;gap:38px;padding:34px clamp(24px,4vw,52px);display:grid}.section-kicker{color:#aa7d55;font-family:var(--font-geist-mono), monospace;letter-spacing:.17em;margin-bottom:8px;font-size:10px;font-weight:700;display:block}.performance-copy h2,.patterns h2{letter-spacing:-.03em;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(28px,3vw,38px);font-weight:400}.performance-copy p{color:#b9bcc2;margin:9px 0 0;font-size:13px;line-height:1.55}.recording-area{min-width:0}.transport{gap:8px;margin-bottom:12px;display:flex}.transport-button{color:#f5f5f3;cursor:pointer;background:#434850;border:1px solid #565c66;border-radius:9px;align-items:center;gap:7px;padding:9px 14px;font-size:12px;font-weight:700;display:inline-flex}.transport-button:hover:not(:disabled){background:#515761}.transport-button:disabled{cursor:not-allowed;opacity:.38}.transport-button.record-button span{color:#ee6a60;font-size:11px}.transport-button.record-button.recording{background:#6a3537;border-color:#a45050}.transport-button.record-button.recording span{color:#fff}.transport-button.quiet{color:#b3b6bc;background:0 0;border-color:#0000}.recording-timeline{scrollbar-width:thin;background:#22262c;border:1px solid #4b5058;border-radius:10px;align-items:center;gap:5px;min-height:53px;padding:9px 12px;display:flex;overflow-x:auto}.recording-timeline.listening{border-color:#c25e58;box-shadow:0 0 0 2px #c25e582b}.empty-timeline{color:#777d87;font-family:Georgia,Times New Roman,serif;font-size:13px;font-style:italic}.recorded-note{background:var(--note-color);color:var(--note-ink,#fff);text-shadow:0 1px 1px #00000029;border-radius:50%;flex:0 0 30px;justify-content:center;align-items:center;height:30px;font-family:Georgia,serif;font-size:12px;font-weight:700;display:inline-flex;box-shadow:inset 0 1px #ffffff4d}.patterns{grid-template-columns:.65fr 1.35fr;align-items:end;gap:50px;width:calc(100% - 40px);max-width:1240px;margin:0 auto;padding:68px 24px 40px;display:grid}.patterns-heading .section-kicker{color:#8e6948}.pattern-list{border-top:1px solid #cfc6b9}.pattern-button{color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:0;border-bottom:1px solid #cfc6b9;grid-template-columns:36px 1fr auto;align-items:center;gap:18px;width:100%;padding:17px 8px;display:grid}.pattern-button:hover:not(:disabled){background:#ffffff57;padding-left:14px}.pattern-button:disabled{cursor:not-allowed;opacity:.45}.pattern-number{color:#a97851;font-family:var(--font-geist-mono), monospace;font-size:10px}.pattern-button strong{font-family:Georgia,Times New Roman,serif;font-size:17px;font-weight:600;display:block}.pattern-button small{color:#7e7972;margin-top:3px;font-size:11px;display:block}.pattern-play{color:var(--coral);border:1px solid #aaa094;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:9px;display:flex}footer{color:#78736c;grid-template-columns:1fr auto auto;align-items:center;gap:25px;width:calc(100% - 40px);max-width:1240px;margin:0 auto;padding:24px 24px 62px;font-family:Georgia,Times New Roman,serif;font-style:italic;display:grid}footer p{margin:0}footer span{color:var(--coral);font-size:23px}.stop-all{color:#77716a;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #aaa29a;padding:4px 0;font-size:11px;font-style:normal}.stop-all:disabled{opacity:0;pointer-events:none;border-color:#0000}@media (width<=1080px){.control-strip{grid-template-columns:1fr 1fr}.control-group,.bar-colors-control,.labels-control{justify-content:space-between;justify-self:stretch}.volume-control{grid-template-columns:auto 1fr;align-items:center}.volume-row{justify-self:end}}@media (width<=760px){.topbar-note{display:none}.topbar{padding-top:15px;padding-bottom:15px}.brand{gap:9px;font-size:13px}.hero{padding:30px 18px 12px}.hero h1{font-size:clamp(30px,9vw,42px)}.control-strip{grid-template-columns:1fr}.control-group,.labels-control{justify-content:space-between;justify-self:stretch}.volume-control{grid-template-columns:auto 1fr;align-items:center}.volume-row{justify-self:end}.instrument-scroll{padding:25px 18px 32px}.instrument-card{border-radius:20px;width:calc(100% - 24px)}.bar-setup-strip{flex-direction:column;align-items:stretch}.bar-setup-options{grid-template-columns:1fr 1fr;display:grid}.bar-setup-status{text-align:center;min-width:0}.setup-divider{display:none}.accidental-control{justify-content:center}.performance-panel{grid-template-columns:1fr}.patterns{grid-template-columns:1fr;align-items:stretch;gap:26px;width:calc(100% - 24px);padding-top:52px}footer{width:calc(100% - 24px)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.xylophone-bar{transition:none}.xylophone-bar.removed{transform:none}.striking-mallet{opacity:1;animation:none;transform:translate(-12px,9px)}}