@charset "UTF-8";
:root{--ink:#354b3b;--muted:#718166;--paper:#fffcee;--green:#3d6049;--line:#cdd3b8;--part-color:#638260;font-family:"Trebuchet MS",Verdana,sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:#c8dac0;-webkit-font-smoothing:antialiased}
button,a,input{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.35}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px dashed #5d6846;outline-offset:5px}
button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}
#field{position:fixed;inset:0;overflow:hidden;isolation:isolate;background-image:url('./assets/meadow.svg'),radial-gradient(ellipse at 48% 38%,#e5ebcf 0,#d2e1c4 55%,#bed5b9 100%);background-size:368px 291px,cover}
#field::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(180deg,#e0e8ce8c,transparent 36%,transparent 80%,#b6cdaf29)}
.topbar{position:absolute;inset:24px 38px auto;display:flex;align-items:center;justify-content:space-between;z-index:2}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand-flower{width:38px;height:38px;transform:rotate(-12deg)}
.brand>span{font:italic 22px/.86 Georgia,serif;letter-spacing:-.7px}
.brand>span>span{display:block;font-size:16px;line-height:1.2;letter-spacing:-.3px}
.live-sign{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:1px;border:1px solid #8299774a;border-radius:30px;padding:9px 13px;background:#f6f6dd40}
.live-dot{width:6px;height:6px;display:block;background:#8b9e7a;border-radius:50%}
.live-sign.is-live .live-dot{background:#55744c;box-shadow:0 0 0 4px #6d985020}
.intro{position:absolute;top:70px;left:16px;right:16px;text-align:center;pointer-events:none}
.eyebrow{margin:0 0 9px;font:9px/1.3 "Trebuchet MS",sans-serif;letter-spacing:3px;color:#7c8b6b}
h1{position:relative;display:inline-block;margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,4.2vw,58px);font-weight:600;font-style:italic;line-height:1.25;letter-spacing:-1.8px;text-shadow:0 2px 0 #ffffff4a}
.title-note{position:absolute;font:26px Georgia,serif;left:-44px;top:3px;transform:rotate(-19deg);color:#ab9750;opacity:.85}
.title-note.right{left:auto;right:-42px;top:24px;transform:rotate(16deg);font-size:23px}
.instructions{margin:12px 0 0;font-size:12px;line-height:1.8;letter-spacing:1px;color:#6b7e5e}
.legend{position:absolute;top:191px;left:0;right:0;display:flex;justify-content:center;gap:23px;list-style:none;margin:0;padding:0;font-size:10px;letter-spacing:1px;color:#738164}
.legend li{display:flex;gap:6px;align-items:center}
.legend li>span{width:6px;height:6px;border-radius:50%;background:var(--part-color)}
#stage{position:absolute;inset:226px 30px 224px}
.musician{position:absolute;left:0;top:0;width:var(--size);height:calc(var(--size) + 24px);padding:0;border:0;background:none;outline:none;user-select:none;isolation:isolate}
.musician:focus-visible{outline:2px dashed var(--part-color);outline-offset:5px;border-radius:46%}
.musician-art{position:absolute;top:0;left:0;right:0;height:var(--size);will-change:transform;z-index:2;pointer-events:none}
.musician-art svg{width:100%;height:100%;overflow:visible;transition:filter .2s,opacity .2s,scale .2s}
.musician:not(.is-active) .musician-art svg{opacity:.68;filter:saturate(.78)}
.musician:hover .musician-art svg{opacity:1;scale:1.055}
.musician.is-active .musician-art svg{opacity:1;filter:drop-shadow(0 2px 0 #fff8d6a6)}
.musician.is-performing .musician-art svg{filter:drop-shadow(0 0 4px #fff9dc)}
.musician-shadow{position:absolute;bottom:calc(24px + var(--size)*.09);left:22%;width:60%;height:calc(var(--size)*.10);border-radius:50%;background:#718c6050;z-index:1;pointer-events:none}
.musician-halo{position:absolute;left:-9%;right:-9%;height:90%;top:1%;border-radius:50%;opacity:0;background:radial-gradient(ellipse,#fff9d9e6 0%,color-mix(in srgb,var(--part-color) 24%,transparent) 42%,transparent 70%);transition:opacity .25s;pointer-events:none}
.musician.is-active .musician-halo{opacity:1}
.musician .nameplate{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;min-height:22px;padding:3px 9px;border:1px solid #66825a25;border-radius:20px;background:#e6ecd178;color:#6b7d5d;font-size:10px;letter-spacing:.5px;transition:background .2s,border-color .2s,color .2s}
.musician.is-active .nameplate{color:var(--part-color);background:var(--paper);border-color:color-mix(in srgb,var(--part-color) 42%,transparent);box-shadow:0 2px 0 #3f53380b}
.musician.is-performing .nameplate{background:var(--part-color);border-color:var(--part-color);color:#fffdf0;font-weight:600;box-shadow:0 2px 0 #3f53381a}
.playing-tag{position:absolute;z-index:4;top:-12px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:4px;padding:3px 7px;border-radius:12px;background:#fffbee;color:var(--part-color);border:1px solid color-mix(in srgb,var(--part-color) 38%,transparent);font-size:8px;line-height:1.25;white-space:nowrap;letter-spacing:.8px;pointer-events:none}
.playing-tag::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.is-performing .playing-tag{display:flex}
.sound-ring{position:absolute;bottom:22px;left:4%;width:92%;height:22%;border:2px solid var(--part-color);border-radius:50%;opacity:0;transform:scale(1);pointer-events:none}
.is-sounding .sound-ring{opacity:calc(var(--sound-level,0)*.55);transform:scale(calc(1.65 - var(--sound-level,0)*.55))}
.mini-levels{display:flex;align-items:center;gap:2px;height:10px;width:10px}
.mini-levels i{display:block;width:2px;height:3px;background:currentColor;border-radius:1px;transition:height .12s}
.is-active .mini-levels i:nth-child(2){height:8px}
.is-active .mini-levels i:nth-child(3){height:5px}
.is-performing .mini-levels i{height:calc(3px + var(--sound-level,0)*5px)}
.is-performing .mini-levels i:nth-child(2){height:calc(4px + var(--sound-level,0)*6px)}
.is-performing .mini-levels i:nth-child(3){height:calc(3px + var(--sound-level,0)*4px)}
.floating-note{position:absolute;top:14%;right:-1%;font:27px Georgia,serif;font-weight:700;color:var(--part-color);opacity:0;pointer-events:none;z-index:3;text-shadow:1px 1px 0 #fffbed}
.floating-note.second{right:auto;left:1%;top:2%;font-size:21px}
.is-performing .floating-note{opacity:var(--sound-level,0);transform:translateY(calc(-22px + var(--sound-level,0)*18px)) rotate(-12deg)}
.is-performing .floating-note.second{transform:translateY(calc(-15px + var(--sound-level,0)*12px)) rotate(16deg)}
.instrument-action,.instrument-action-alt,.playing-arm,.playing-arm-alt{transform-box:fill-box;transform-origin:50% 85%}
.instrument-action,.playing-arm{transform:translateY(calc(var(--strike,0)*-5px)) rotate(calc(var(--strike,0)*-25deg))}
.instrument-action-alt,.playing-arm-alt{transform:translateY(calc(var(--strike,0)*3px)) rotate(calc(var(--strike,0)*21deg))}
.instrument-action .playing-arm,.instrument-action .playing-arm-alt,.instrument-action-alt .playing-arm,.instrument-action-alt .playing-arm-alt{transform:none}
[data-instrument="bass"] .instrument-action,[data-instrument="guitar"] .instrument-action,[data-instrument="harp"] .instrument-action{transform:translateY(calc(var(--strike,0)*4px)) rotate(calc(var(--strike,0)*20deg))}
[data-instrument="flute"] .playing-arm,[data-instrument="flute"] .playing-arm-alt{transform:translateY(calc(var(--strike,0)*-2px))}
[data-instrument="bass"]>.instrument-prop>.playing-arm,[data-instrument="bass"]>.instrument-prop>.playing-arm-alt,[data-instrument="guitar"]>.instrument-prop>.playing-arm,[data-instrument="guitar"]>.instrument-prop>.playing-arm-alt{transform:translateY(calc(var(--strike,0)*2px))}
.instrument-spark{opacity:0;pointer-events:none}
.is-sounding .instrument-spark{opacity:var(--sound-level,0)}
.is-sounding .instrument-key:nth-of-type(3n+1){fill:#f5cd70}
.field-caption{position:absolute;bottom:196px;left:16px;right:16px;text-align:center;font-size:10px;letter-spacing:1px;color:#7c8b6a;margin:0;pointer-events:none}
.field-caption>span{margin-right:5px;color:#9ba47a}
.mix-dock{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);z-index:10;width:min(900px,calc(100% - 64px));background:var(--paper);border:1px solid #bfc8a5;border-radius:21px;box-shadow:0 7px 0 #78906612,0 12px 40px #42543910;padding:0 21px}
.presets{display:flex;align-items:center;gap:17px;min-height:54px;border-bottom:1px solid #e3e6d4}
.preset-label{font-size:10px;color:#939a81;letter-spacing:.8px;white-space:nowrap}
.preset-options{display:flex;gap:6px}
.preset{display:flex;gap:5px;align-items:center;white-space:nowrap;background:transparent;border:1px solid transparent;font-size:11px;padding:6px 11px;border-radius:20px;color:#748062;transition:background .15s,border-color .15s}
.preset>span{font-size:15px;line-height:1}
.preset:hover{background:#f1f1dc}
.preset[aria-pressed="true"]{background:#e5ebd4;border-color:#c6d0ac;color:#4b6447}
.shuffle{margin-left:auto;background:none;border:0;color:#8a9478;font-size:10px;white-space:nowrap;padding:7px 0 7px 7px}
.icon-text{display:flex;align-items:center;gap:6px}
.icon-text svg{width:15px;height:15px}
.shuffle:hover,.clear-button:hover{color:#3d6049}
.transport{display:flex;align-items:center;gap:16px;min-height:88px}
.play-button{width:52px;height:52px;flex:none;border-radius:50%;border:1px solid #2f513c;background:var(--green);color:#fff9e4;box-shadow:0 3px 0 #2c443724;display:grid;place-items:center;transition:background .2s,scale .15s}
.play-button:hover{background:#2e523b;scale:1.04}
.play-button:active{scale:.96}
.play-button svg{width:23px;height:23px;fill:currentColor;stroke:none}
.play-button[disabled]{opacity:.65}
.now-playing{flex:1;min-width:170px}
.track-title{font-size:13px;font-weight:600;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-meta{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:9px;letter-spacing:.3px;color:#929a80}
.beat-dots{display:flex;gap:3px;align-items:center;flex:none}
.beat-dots i{width:4px;height:4px;display:block;background:#d8dec6;border-radius:50%;transition:background .1s,box-shadow .1s}
.beat-dots i.is-beat{background:#68805a;box-shadow:0 0 0 2px #68805a13}
.tempo-control{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;padding:5px 4px;border:1px solid #e1e5d1;border-radius:10px;background:#f7f7e7}
.tempo-control>button{width:26px;height:30px;border:0;background:none;font:18px "Trebuchet MS",sans-serif;color:#8a9577;border-radius:6px}
.tempo-control>button:hover{background:#e9edd8;color:#506744}
.tempo-control>span{min-width:46px;text-align:center;line-height:1}
.tempo-control strong{font:15px "Trebuchet MS",sans-serif;letter-spacing:1px}
.bpm{display:block;font:7px "Trebuchet MS",sans-serif;letter-spacing:1.3px;margin-top:4px;color:#a0a58d}
.volume-control{display:flex;align-items:center;gap:7px;margin-left:2px}
.icon-button{display:grid;place-items:center;width:30px;height:34px;flex:none;background:transparent;border:0;color:#7d8b6c;padding:4px}
.icon-button svg{width:19px;height:19px}
input[type="range"]{appearance:none;width:72px;height:4px;background:linear-gradient(to right,#8c9f72 62%,#e0e5d0 62%);border-radius:10px;cursor:pointer;margin:0;accent-color:#8c9f72}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:#70865b;border:2px solid var(--paper);border-radius:50%;box-shadow:0 0 0 1px #70865b55}
input[type="range"]::-moz-range-thumb{width:7px;height:7px;background:#70865b;border:2px solid var(--paper);border-radius:50%}
.dock-divider{width:1px;height:26px;background:#e2e6d5;flex:none;margin:0 1px}
.clear-button{border:0;background:none;font-size:10px;white-space:nowrap;color:#939b82;padding:9px 0}
.page-footer{position:fixed;bottom:13px;left:39px;right:39px;display:flex;justify-content:space-between;gap:20px;color:#829371;font:7px "Trebuchet MS",sans-serif;letter-spacing:1.3px;pointer-events:none}
.page-footer>span+span{font-size:9px;letter-spacing:1px}
.toast{position:fixed;z-index:20;top:72px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:11px 18px;border-radius:20px;border:1px solid #b9c4a1;background:#fffbed;font-size:12px;box-shadow:0 5px 20px #354b3b15;text-align:center}
.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@keyframes float-note{0%{transform:translate(0,5px) rotate(-8deg);opacity:0}15%{opacity:.8}80%{opacity:0}100%{transform:translate(13px,-27px) rotate(12deg);opacity:0}}
@keyframes levels{from{height:3px}to{height:9px}}
@media(min-width:1500px){#stage{left:6%;right:6%}}
@media(max-width:900px){.mix-dock{width:calc(100% - 36px);padding:0 16px}.preset-label{display:none}.presets{gap:5px}.transport{gap:12px}.now-playing{min-width:150px}.volume-control{gap:4px}input[type="range"]{width:55px}.dock-divider{margin:0}.page-footer{left:23px;right:23px}}
@media(max-width:620px){
 .topbar{inset:18px 19px auto}.brand{gap:7px}.brand-flower{width:30px;height:30px}.brand>span{font-size:18px}.brand>span>span{font-size:13px}.live-sign{font-size:8px;padding:7px 9px;letter-spacing:.4px}.live-dot{width:5px;height:5px}
 .intro{top:76px}.eyebrow{font-size:7px;letter-spacing:1.9px;margin-bottom:7px}h1{font-size:32px;letter-spacing:-1px}.title-note{font-size:19px;left:-23px;top:0}.title-note.right{right:-24px;top:19px;font-size:17px}.instructions{font-size:10px;margin-top:9px;line-height:1.7;letter-spacing:.2px}.instructions>span{display:block}
 .legend{top:177px;gap:16px;font-size:9px;letter-spacing:.3px}.legend li{gap:5px}.legend li>span{width:5px;height:5px}
 #stage{inset:207px 10px 224px}.musician .nameplate{font-size:8px;min-height:18px;padding:2px 6px;gap:3px;bottom:3px;letter-spacing:0}.mini-levels{scale:.8;width:9px}
 .musician:not(.is-active) .nameplate{border-color:transparent;background:#e2e9cc5e}.musician{height:calc(var(--size) + 21px)}.floating-note{font-size:20px}.floating-note.second{font-size:16px!important}.playing-tag{top:-9px;font-size:6px;padding:2px 5px;letter-spacing:.2px}
 .field-caption{bottom:205px;font-size:8px;letter-spacing:.5px}.mix-dock{bottom:33px;width:calc(100% - 28px);padding:0 13px;border-radius:18px}.presets{min-height:49px;justify-content:space-between;gap:0}.preset-options{gap:1px}.preset{font-size:9px;padding:6px 7px;gap:3px}.preset>span{font-size:12px}.shuffle{padding:7px 0 7px 5px}.shuffle>span{display:none}.shuffle svg{width:16px;height:16px}
 .transport{min-height:105px;display:grid;grid-template-columns:43px minmax(0,1fr) 100px;column-gap:11px;row-gap:7px;padding:12px 0 10px}.play-button{width:43px;height:43px;grid-row:1}.play-button svg{width:20px;height:20px}.now-playing{min-width:0;grid-column:2;grid-row:1}.track-title{font-size:11px;letter-spacing:.2px}.track-meta{font-size:8px;margin-top:7px;gap:5px;letter-spacing:0}.tempo-control{grid-column:3;grid-row:1;gap:2px;padding:3px 1px;border-radius:9px}.tempo-control>button{width:23px;height:29px}.tempo-control>span{min-width:44px}.tempo-control strong{font-size:14px}
 .volume-control{grid-row:2;grid-column:1 / 3;gap:7px;margin-left:0;justify-self:start;height:18px}.volume-control .icon-button{width:24px;height:24px;padding:3px}.volume-control svg{width:16px;height:16px}input[type="range"]{width:88px}.dock-divider{display:none}.clear-button{grid-column:3;grid-row:2;justify-self:end;padding:2px 5px;font-size:9px}.clear-button svg{width:13px;height:13px}.page-footer{bottom:11px;left:18px;right:18px;justify-content:center;font-size:6px;letter-spacing:1px}.page-footer>span+span{display:none}.toast{top:55px;font-size:11px}
}
@media(max-height:720px) and (min-width:621px){.topbar{top:15px}.intro{top:35px}h1{font-size:39px}.eyebrow{font-size:8px}.instructions{margin-top:5px;font-size:10px}.legend{top:137px}#stage{top:163px;bottom:196px}.mix-dock{bottom:32px}.presets{min-height:43px}.transport{min-height:75px}.field-caption{bottom:165px}.musician .nameplate{font-size:8px;padding:2px 6px}}
@media(max-height:740px) and (max-width:620px){.intro{top:61px}.intro .eyebrow{display:none}h1{font-size:29px}.instructions{margin-top:5px;font-size:9px}.instructions>span{display:inline}.legend{top:135px}#stage{top:158px;bottom:206px}.field-caption{bottom:186px}.mix-dock{bottom:24px}.presets{min-height:44px}.transport{min-height:99px}.page-footer{bottom:7px}.musician .nameplate{font-size:7px}}
@media(max-height:600px){body{overflow-y:auto}#field{position:relative;height:700px;min-height:100svh}#stage{bottom:46px}.field-caption{bottom:12px}.mix-dock{position:relative;left:auto;bottom:auto;transform:none;margin:12px auto 26px}.page-footer{position:relative;inset:auto;justify-content:center;padding:0 18px 18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.floating-note{display:none}.musician-art{will-change:auto}.sound-ring{transform:none!important}}