@property --load-pct{syntax: "<percentage>"; inherits: true; initial-value: 0%;}:root{--page-yellow: #f2d51b;--string-red: #d92b2b;--string-black: #101010;--string-gray: #9b9b9b;--string-white: #f7f7f7;--ink: #191919;--shadow: .5rem .5rem 0 0 rgba(0, 0, 0, .2)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--page-yellow);color:var(--ink);font-family:Trebuchet MS,Arial Rounded MT Bold,Arial,sans-serif;overscroll-behavior:none;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}button{font:inherit}.app{width:100%;min-height:100dvh;padding:max(.65rem,env(safe-area-inset-top)) .6rem max(.75rem,env(safe-area-inset-bottom));display:flex;flex-direction:column}.baguette-button{width:3.5rem;height:3.5rem;flex:0 0 auto;display:grid;place-items:center;padding:0;border:0;background:transparent;box-shadow:none;transition:transform .12s ease,filter .12s ease;-webkit-touch-callout:none}.baguette-button[data-playing=true]{transform:scale(1.04) rotate(-8deg);filter:drop-shadow(0 0 .35rem rgba(255,248,208,.9))}.baguette-icon{display:block;width:3.05rem;height:3.05rem;background:url(../baguette.png) center / contain no-repeat}.instrument{flex:1;min-height:0;padding:0 0 .55rem;display:grid;align-items:stretch;gap:.65rem}.instrument[data-orientation=horizontal]{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}.instrument[data-orientation=vertical]{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr}.string{position:relative;isolation:isolate;border-radius:999px;touch-action:none;-webkit-user-select:none;user-select:none;color:var(--string-red);transition:--load-pct .35s ease-out}.string:after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--fret-overlay, none);background-position:center;background-repeat:no-repeat;background-size:var(--fret-size, 100% 100%);pointer-events:none;z-index:2}.instrument[data-orientation=horizontal] .string[data-loading=true] .string-wave{-webkit-mask-image:linear-gradient(to right,black 0%,black var(--load-pct, 0%),rgba(0,0,0,.12) var(--load-pct, 0%),rgba(0,0,0,.12) 100%);mask-image:linear-gradient(to right,black 0%,black var(--load-pct, 0%),rgba(0,0,0,.12) var(--load-pct, 0%),rgba(0,0,0,.12) 100%)}.instrument[data-orientation=vertical] .string[data-loading=true] .string-wave{-webkit-mask-image:linear-gradient(to bottom,black 0%,black var(--load-pct, 0%),rgba(0,0,0,.12) var(--load-pct, 0%),rgba(0,0,0,.12) 100%);mask-image:linear-gradient(to bottom,black 0%,black var(--load-pct, 0%),rgba(0,0,0,.12) var(--load-pct, 0%),rgba(0,0,0,.12) 100%)}.string-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1;-webkit-filter:drop-shadow(.5rem .5rem 0 rgba(0,0,0,.2));filter:drop-shadow(.5rem .5rem 0 rgba(0,0,0,.2));transition:filter .28s ease,-webkit-filter .28s ease}.string-wave path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;-webkit-filter:none;filter:none;transition:filter .28s ease,-webkit-filter .28s ease}.string[data-active=true] .string-wave{-webkit-filter:drop-shadow(0 0 .6rem currentColor);filter:drop-shadow(0 0 .6rem currentColor)}.string[data-active=true] .string-wave path{-webkit-filter:none;filter:none}.string[data-vibrating=true]:not([data-active=true]) .string-wave{-webkit-filter:drop-shadow(0 0 .25rem currentColor);filter:drop-shadow(0 0 .25rem currentColor)}.string[data-vibrating=true]:not([data-active=true]) .string-wave path{-webkit-filter:none;filter:none}.string-red{color:var(--string-red)}.string-black{color:var(--string-black)}.string-gray{color:var(--string-gray)}.string-white{color:var(--string-white)}.load-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--page-yellow);transition:opacity .42s ease,visibility .42s ease}.load-overlay[data-hidden=true]{opacity:0;visibility:hidden;pointer-events:none}.load-overlay-inner{display:flex;flex-direction:column;align-items:center;gap:.85rem;width:min(70%,18rem)}.load-bar-track{width:100%;height:.5rem;border-radius:999px;background:#00000014;overflow:hidden}.load-bar-fill{height:100%;width:0%;border-radius:inherit;background:var(--string-red);transition:width .3s ease-out}.load-label{margin:0;font-size:.78rem;letter-spacing:.05em;opacity:.6}.start-button{min-width:8rem;padding:.75rem 1.5rem;border:.18rem solid rgba(0,0,0,.2);border-radius:999px;background:var(--string-red);color:#fff7e3;font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow);transition:transform .12s ease,filter .12s ease,opacity .12s ease}.start-button[data-ready=false]{opacity:.72}.start-button:active{transform:translateY(.08rem) scale(.98)}.start-button:disabled{cursor:progress;opacity:.7}.credit{margin:0;flex:1 1 auto;min-width:0;font-size:.65rem;letter-spacing:.06em;opacity:.72}.transport{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.5rem}