:root{--hue:85;--ink:hsl(var(--hue) 20% 94%);--dim:hsl(var(--hue) 10% 66%);--line:hsl(var(--hue) 20% 100% / .11);--lit:#6baefa;--raise:0 1px 0 hsl(var(--hue) 30% 100% / .07), 0 10px 26px hsl(var(--hue) 30% 2% / .55)}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:hsl(var(--hue) 14% 9%);color:hsl(var(--hue) 18% 92%);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}wm-app{height:100vh;flex-direction:column;height:100dvh;display:flex}header{background:linear-gradient(hsl(var(--hue) 20% 8% / .9), hsl(var(--hue) 20% 6% / .35));height:52px;box-shadow:inset 0 1px 0 hsl(var(--hue) 30% 100% / .05);flex:none;align-items:center;gap:2px;padding:0 8px;display:flex}wm-header{display:contents}.zone{border:1px solid hsl(var(--hue) 20% 100% / .08);background:linear-gradient(hsl(var(--hue) 16% 19%), hsl(var(--hue) 16% 14%));box-shadow:inset 0 1px 0 hsl(var(--hue) 30% 100% / .07), 0 6px 16px hsl(var(--hue) 30% 2% / .5);border-radius:11px;align-items:center;gap:1px;padding:3px;display:flex}.zone.chords{margin-right:auto}header h1{text-align:center;letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--dim);flex:1;margin:0 12px;font-size:15px;font-weight:400;overflow:hidden}header .gap{background:var(--line);flex:none;width:1px;height:20px;margin:0 5px}.icon-art{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:20px;height:20px}.ibtn[hidden]{display:none}.ibtn{width:38px;height:38px;color:var(--ink);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;flex:none;place-items:center;padding:0;display:grid;position:relative}.ibtn .icon-art{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;opacity:.86;width:22px;height:22px}.ibtn.filled .icon-art{fill:currentColor;stroke:none}.ibtn:hover,.ibtn:focus-visible{border-color:var(--line);background:hsl(var(--hue) 30% 100% / .07);outline:none}.ibtn:hover .icon-art{opacity:1}.ibtn.open{color:var(--lit);background:#4794eb29;border-color:#75aef08c}.ibtn .sign{pointer-events:none;place-items:center;font-size:11px;font-weight:600;display:grid;position:absolute;inset:0}.ibtn.band.on{color:var(--lit);background:#5294e024;border-color:#7dafe866;transition:transform 70ms}.ibtn.band.beat{transform:scale(1.14)}.ibtn.radio.on,.ibtn.auto.on{color:var(--lit);background:#5294e024;border-color:#7dafe866}.ibtn.loop{color:#f8764f}.ibtn.loop:after{content:attr(data-layers);font-size:10px;font-weight:700;position:absolute;bottom:2px;right:4px}.ibtn.loop.armed{animation:.5s ease-in-out infinite loopPulse}.ibtn.loop.rec{background:#ee582b4d;border-color:#f06b4280}.ibtn.end{color:#f8764f}.ibtn.done{color:var(--lit)}@keyframes loopPulse{50%{opacity:.3}}.section{flex:none;display:flex;position:relative}.pop{z-index:20;border:1px solid var(--line);background:linear-gradient(hsl(var(--hue) 16% 18%), hsl(var(--hue) 16% 14%));width:max-content;min-width:232px;max-width:min(92vw,390px);box-shadow:var(--raise);cursor:default;border-radius:12px;padding:12px 12px calc(4.05em + 20px);position:absolute;top:calc(100% + 7px)}.pop h2{letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 8px;font-size:11px;font-weight:600}.pop .says{border-top:1px solid var(--line);color:var(--dim);height:calc(4.05em + 8px);margin:0;padding-top:8px;font-size:12px;line-height:1.35;position:absolute;bottom:12px;left:12px;right:12px;overflow:hidden}.pop hr{background:var(--line);border:0;height:1px;margin:10px 0}.pop .row{align-items:center;gap:12px;display:flex}.pop .row.radio{gap:7px;margin-left:auto}.pop .row.radio .icon-art{fill:none;width:20px;height:20px;stroke:var(--dim);stroke-width:1.6px;stroke-linecap:round}.tiles{grid-template-columns:repeat(var(--cols,3), minmax(0, 1fr));gap:6px;display:grid}.tile{border:1px solid var(--line);background:hsl(var(--hue) 16% 21%);color:var(--ink);cursor:pointer;border-radius:9px;justify-items:center;gap:3px;padding:7px 8px;display:grid}.tile:hover{background:hsl(var(--hue) 16% 25%)}.tile.on{background:#2962a347;border-color:#75aef0b3;box-shadow:0 0 0 1px #75aef040}.tile .art{line-height:0;display:block}.tile svg{width:62px;height:22px;display:block}.tile .pattern rect{fill:var(--ink)}.tile.on .pattern rect{fill:var(--lit)}.tile .icon-art{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:26px;height:22px}.tile.on .icon-art{color:var(--lit)}.tile .label-art text{fill:var(--ink);font-size:11px;font-weight:600}.tile.on .label-art text{fill:var(--lit)}.tile .envelope{fill:none;stroke:var(--ink);stroke-width:1.4px;stroke-linejoin:round}.tile.on .envelope{stroke:var(--lit)}.tile .contour rect{fill:var(--ink)}.tile.on .contour rect{fill:var(--lit)}.tile .contour .home{stroke:var(--ink);stroke-width:.8px;opacity:.22;stroke-dasharray:2 2}.tile.spoken-for{opacity:.32;cursor:not-allowed}.sound-art{justify-items:center;gap:1px;display:grid}.sound-art .icon-art{width:22px;height:20px}.sound-art .envelope{width:52px;height:16px}.tile .look-art rect,.tile .look-art path{fill:hsl(var(--hue) 10% 62%)}.tile .look-art.polished rect{fill:#e4eaf1}.tile .look-art.polished .b3,.tile .look-art.precise .b3{fill:hsl(var(--hue) 10% 42%)}.wheel svg{width:216px;height:216px;display:block}.wheel .ring{fill:none;stroke:var(--line);stroke-width:1px}.wheel .seat{cursor:pointer}.wheel .seat circle{opacity:.5;stroke:#0000;stroke-width:2px;transition:opacity .12s,r .12s}.wheel .seat:hover circle{opacity:.8}.wheel .seat.on circle{opacity:1;r:17;stroke:#ffffffd9}.wheel .seat text{fill:hsl(var(--hue) 20% 97%);pointer-events:none;font-size:12px;font-weight:600}.wheel .seat .mark{opacity:.8;font-size:8px;font-weight:500}.wheel .centre{font-size:30px;font-weight:600}.wheel .under{fill:var(--dim);font-size:12px}.dial{cursor:pointer;touch-action:none}.dial svg{width:88px;height:88px;display:block}.dial .track{fill:none;stroke:var(--line);stroke-width:6px;stroke-linecap:round}.dial .fill{fill:none;stroke:var(--lit);stroke-width:6px;stroke-linecap:round;opacity:.8}.dial .needle{stroke:var(--ink);stroke-width:2px;stroke-linecap:round}.dial .tick{stroke:var(--line);stroke-width:1.4px;stroke-linecap:round}.dial .read{fill:var(--ink);font-size:17px;font-weight:600}.dial:focus-visible{outline:1px solid var(--lit);border-radius:50%}.switch{border:1px solid var(--line);background:hsl(var(--hue) 16% 12%);cursor:pointer;border-radius:12px;flex:none;width:42px;height:24px;padding:0 3px}.switch .knob{background:var(--dim);border-radius:50%;width:16px;height:16px;transition:transform .14s,background .14s;display:block}.switch.on{background:#2962a352;border-color:#75aef080}.switch.on .knob{background:var(--lit);transform:translate(18px)}.layers{gap:4px;margin-top:8px;display:grid}.layers:empty{display:none}.layer{align-items:center;gap:8px;display:flex}.layer .marks{flex:1;align-items:center;gap:3px;display:flex}.layer .marks i{background:var(--dim);border-radius:50%;width:5px;height:5px}.layer .ibtn{width:26px;height:26px}.layer .ibtn .icon-art{width:15px;height:15px}@media (max-width:860px){header h1{display:none}header .gap{margin:0 2px}.ibtn{width:34px;height:34px}.zone{padding:2px}}.spacer{width:44px}header .score{white-space:nowrap;flex:none;padding:0 4px;font-size:15px;font-weight:600}header .score:empty{display:none}wm-field{flex:1;min-height:0;display:block}wm-field canvas{touch-action:none;width:100%;height:100%;display:block}.panel{z-index:10;background:hsl(var(--hue) 15% 13% / .97);flex-direction:column;display:none;position:fixed;inset:0}.panel.open{display:flex}.panel header{background:0 0}.panel .body{flex:1;width:100%;max-width:560px;margin:0 auto;padding:4px 20px 48px;overflow:auto}.panel h2{text-transform:uppercase;letter-spacing:.14em;opacity:.7;margin:26px 0 6px;font-size:12px;font-weight:600}.panel h3{opacity:.55;margin:14px 4px 0;font-size:13px;font-weight:600}label.opt{cursor:pointer;align-items:center;gap:14px;padding:9px 4px;font-size:18px;display:flex}label.opt input{width:20px;height:20px;accent-color:hsl(var(--hue) 30% 95%);margin:0}label.opt .pre{flex:none;align-items:center;gap:10px;display:flex}label.opt svg{display:block}label.opt .acc{opacity:.75;white-space:nowrap;min-width:2.4em;font-size:15px}label.opt .swatch{border-radius:50%;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 2px #ffffff59}.panel p.hint{opacity:.7;margin:0 4px 6px;font-size:14px}.list button{text-align:left;border:0;border-bottom:1px solid hsl(var(--hue) 30% 70% / .25);width:100%;color:inherit;font:inherit;cursor:pointer;background:0 0;padding:13px 8px;font-size:18px;display:block}.list button:has(.icon-art){align-items:center;gap:10px;display:flex}.list button:hover{background:hsl(var(--hue) 30% 100% / .08)}.list button small{opacity:.65;margin-left:10px;font-size:14px}.list button .sub{opacity:.6;margin-top:2px;font-size:13px;display:block}.list .seg{border:1px solid hsl(var(--hue) 30% 80% / .5);border-radius:10px;margin:14px 0 8px;display:flex;overflow:hidden}.list .seg button{text-align:center;border:0;flex:1;padding:9px 4px;font-size:16px}.list .seg button.on{background:hsl(var(--hue) 30% 96%);color:hsl(var(--hue) 40% 22%)}.list>button.on{background:hsl(var(--hue) 30% 100% / .14);font-weight:600}.list>button.on .icon-art{color:var(--lit)}.panel p{margin:10px 0;font-size:17px}.panel p b{font-weight:600}.tempo{align-items:center;gap:12px;padding:9px 4px;font-size:18px;display:flex}.tempo input{min-width:60px;accent-color:hsl(var(--hue) 30% 95%);flex:1;margin:0}.tempo output{text-align:right;font-variant-numeric:tabular-nums;min-width:4.2em}.tempo button,.loops button,.panel button.share{border:1px solid hsl(var(--hue) 30% 80% / .5);color:inherit;font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border-radius:10px;padding:8px 12px;font-size:15px}.tempo button:active,.loops button:active{background:hsl(var(--hue) 30% 100% / .2)}.tempo .seg{border:1px solid hsl(var(--hue) 30% 80% / .5);border-radius:10px;flex:1;display:flex;overflow:hidden}.tempo .seg button{border:0;border-radius:0;flex:1;padding:8px 4px}.tempo .seg button.on{background:hsl(var(--hue) 30% 96%);color:hsl(var(--hue) 40% 22%)}.loops{padding:0 4px}.loops div{align-items:center;gap:12px;padding:6px 0;font-size:17px;display:flex}.loops div span{flex:1}.loops button{padding:6px 12px}.loops>button{margin:6px 0 2px}.panel button.share{margin:32px auto 0;padding:10px 18px;display:block}.scan .row{flex-wrap:wrap;gap:8px;margin:10px 0;display:flex}.scan .row button,.scan .row label{border:1px solid hsl(var(--hue) 30% 80% / .5);color:inherit;font:inherit;cursor:pointer;background:0 0;border-radius:10px;padding:10px 14px;font-size:16px}.scan .row button:active,.scan .row label:active{background:hsl(var(--hue) 30% 100% / .2)}.scan .row .primary{background:hsl(var(--hue) 30% 96%);color:hsl(var(--hue) 40% 22%);border-color:#0000}.scan input[type=file]{display:none}.scan select{min-width:0;font:inherit;background:hsl(var(--hue) 30% 96%);color:hsl(var(--hue) 40% 22%);border:0;border-radius:8px;flex:1;padding:6px 8px;font-size:16px}.scan video,.scan canvas{background:hsl(var(--hue) 30% 20%);border-radius:8px;width:100%;height:auto;margin:10px 0;display:block}.scan canvas[hidden]{display:none}.scan p.result{overflow-wrap:anywhere;font-size:16px}.pub{text-align:center}.pub canvas{background:#fff;border-radius:8px;margin:14px auto 10px;display:block}.pub p.link{opacity:.7;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;margin:0 0 4px;font-size:13px}.pub p.code{margin:14px 0 2px;font-size:17px}.pub p.code b{letter-spacing:.14em;margin-top:2px;font-size:44px;font-weight:600;line-height:1.1;display:block}.pub p.status{opacity:.8;margin:12px 0 2px;font-size:15px}.pub p.count{margin:2px 0 18px;font-size:22px}.pub .row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:10px 0;display:flex}.pub .row[hidden]{display:none}.pub .row button,.pub .row input{border:1px solid hsl(var(--hue) 30% 80% / .5);color:inherit;font:inherit;cursor:pointer;background:0 0;border-radius:10px;padding:10px 14px;font-size:16px}.pub .row input{text-align:center;letter-spacing:.1em;cursor:text;-webkit-user-select:text;user-select:text;width:7.5em}.pub .row input[type=url]{text-align:left;letter-spacing:0;flex:1;min-width:12em}.pub .row button:active{background:hsl(var(--hue) 30% 100% / .2)}.pub p.hint.small{margin-top:22px;font-size:13px}body.listening{background:hsl(var(--hue) 40% 14%)}body.listening wm-app>:not(wm-listener){display:none}wm-listener{text-align:center;padding:max(10px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;display:none;position:fixed;inset:0;overflow:hidden}body.listening wm-listener{display:flex}wm-listener .status{opacity:.6;flex:none;font-size:14px}wm-listener .title{opacity:.85;flex:none;min-height:1.4em;margin-top:6px;font-size:clamp(18px,3.5vmin,28px)}wm-listener .middle{flex-direction:column;flex:1;justify-content:center;width:100%;max-width:900px;min-height:0;display:flex;position:relative}wm-listener .lines{flex-direction:column;justify-content:center;gap:.6em;padding-top:30px;display:flex}wm-listener .line{min-height:1.25em;line-height:1.25}wm-listener .line.prev,wm-listener .line.next{opacity:.45;font-size:clamp(18px,4vmin,34px)}wm-listener .line.cur{font-size:clamp(30px,8vmin,72px);font-weight:600}wm-listener .word{white-space:nowrap;margin:0 .16em;display:inline-block}wm-listener .s{color:hsl(var(--hue) 20% 92% / .85);-webkit-background-clip:text;background-clip:text;display:inline-block}wm-listener .s.done{color:#fae038}wm-listener .s.cur{color:#0000;background-image:linear-gradient(90deg, #fae038 calc(var(--p,0) * 100%), hsl(var(--hue) 20% 92% / .85) calc(var(--p,0) * 100%))}wm-listener .ball{pointer-events:none;background:#fae038;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:absolute;box-shadow:0 0 12px #fae038cc}wm-listener .free .tone{font-size:clamp(64px,24vmin,200px);font-weight:700;line-height:1.05}wm-listener .free .chord{opacity:.8;font-size:clamp(24px,7vmin,56px)}wm-listener .free.flash .tone{animation:.45s ease-out toneFlash}@keyframes toneFlash{0%{color:#fae038;transform:scale(1.08)}}wm-listener .note{opacity:.7;font-size:clamp(20px,5vmin,40px)}wm-listener .big{font-size:clamp(40px,12vmin,110px);font-weight:700}wm-listener [hidden]{display:none}wm-listener .applause{cursor:pointer;background:hsl(var(--hue) 30% 100% / .14);-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:0;border-radius:50%;flex:none;width:92px;height:92px;margin-top:8px;font-size:46px}wm-listener .applause:active{background:hsl(var(--hue) 30% 100% / .3);transform:scale(.94)}.clap{z-index:30;pointer-events:none;font-size:40px;animation:1.1s ease-out forwards clap;position:fixed}@keyframes clap{to{opacity:0;transform:translateY(-180px)scale(1.5)}}.modal{z-index:20;background:hsl(var(--hue) 30% 10% / .45);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal[hidden]{display:none}.card{background:hsl(var(--hue) 30% 96%);color:hsl(var(--hue) 40% 22%);text-align:center;border-radius:18px;min-width:260px;max-width:min(480px,100vw - 32px);padding:28px 32px}.card h2{margin:0 0 8px;font-size:26px}.card p{opacity:.75;margin:0 0 20px}.card button{width:100%;font:inherit;cursor:pointer;background:hsl(var(--hue) 16% 14%);color:#fff;border:0;border-radius:12px;margin:8px 0;padding:12px;font-size:17px;display:block}.card button.secondary{color:inherit;background:0 0}.card.welcome{text-align:left;max-width:460px}.card.welcome h2{letter-spacing:.04em;margin:0 0 6px;font-size:30px}.card.welcome .intro{opacity:.78;margin:0 0 22px;font-size:15px}.card.welcome .where{align-items:center;gap:14px;margin:0 0 14px;font-size:15px;line-height:1.35;display:flex}.card.welcome .where b{font-weight:600}.card.welcome .glyph{background:#ffffff0d;border-radius:8px;flex:none;justify-content:center;align-items:center;gap:3px;width:46px;height:34px;display:flex}.card.welcome .glyph i{width:5px;height:calc(6px + var(--size) * 20px);background:hsl(var(--hue,85) 45% 62% / calc(.35 + var(--size) * .5));border-radius:3px;display:block}.card.welcome .glyph.map i{width:calc(8px + var(--size) * 6px);height:calc(8px + var(--size) * 6px);border-radius:50%}.card.welcome .glyph.slide i{border-radius:4px;width:32px;height:8px}.card.welcome .credits-line{opacity:.55;margin:20px 0 18px;font-size:12px;line-height:1.5}.card.welcome a{color:inherit}.card.welcome button.play{width:100%;padding:13px 18px;font-size:17px}.tile .cap{opacity:.85;font-size:11px;line-height:1.2}body.guest .zone.chords,body.guest .ibtn.radio,body.guest .ibtn.loop,body.guest header button[data-panel=library],body.guest header button[data-action=share]{display:none}body.guest .section:has([data-section=loop]){display:none}.card.join{text-align:left;min-width:min(420px,100vw - 32px)}.card.join h2{margin:0 0 14px;font-size:19px}.card.join .tiles{margin-bottom:12px}.card.join .tile{background:hsl(var(--hue) 20% 88%);border-color:hsl(var(--hue) 20% 74%);color:hsl(var(--hue) 40% 20%)}.card.join .tile.on{background:#bad4f3;border-color:#2370c7}.card.join .tile .icon-art,.card.join .tile .envelope{stroke:currentColor}.card.join .tile .pattern rect{fill:currentColor}.card.join .seat-choice[hidden]{display:none}.card.join .says{color:hsl(var(--hue) 20% 38%);margin:0 0 16px;font-size:12px;line-height:1.4}.card.join button.play{width:100%}