.brass-stage{--ink:#16272d;--cream:#fff4d8;--red:#ef5347;--yellow:#ffd249;--blue:#3a91a7;isolation:isolate;border:3px solid var(--ink);width:100%;height:100%;min-height:440px;color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:manipulation;background:linear-gradient(#1f6178 0 56%,#ec8457 56% 66%,#303a49 66% 100%);border-radius:22px;position:relative;overflow:hidden;container-type:inline-size}.brass-stage--interactive{cursor:pointer;-webkit-tap-highlight-color:transparent}.brass-stage--interactive:focus-visible{outline:5px solid var(--yellow);outline-offset:4px}.brass-section-mixed{background:linear-gradient(#22526f 0 56%,#d96f57 56% 66%,#293542 66% 100%)}.brass-section-run{background:linear-gradient(#325170 0 56%,#e36f4e 56% 66%,#252f3f 66% 100%)}.brass-section-break{background:linear-gradient(#315461 0 56%,#c78167 56% 66%,#344047 66% 100%)}.brass-section-finale{background:linear-gradient(#522e6d 0 56%,#ef6e60 56% 66%,#292f45 66% 100%)}.brass-skyline{z-index:0;opacity:.6;height:30%;position:absolute;bottom:34%;left:0;right:0}.brass-skyline i{border:3px solid var(--ink);background:#234957;width:14%;position:absolute;bottom:0;box-shadow:inset 0 16px #ffffff12}.brass-skyline i:after{content:"";background:repeating-linear-gradient(90deg,var(--yellow) 0 7px,transparent 7px 15px);height:8px;position:absolute;top:28%;left:14%;right:14%}.brass-skyline i:first-child{height:54%;left:-2%}.brass-skyline i:nth-child(2){width:18%;height:77%;left:18%}.brass-skyline i:nth-child(3){height:46%;left:43%}.brass-skyline i:nth-child(4){width:17%;height:68%;right:20%}.brass-skyline i:nth-child(5){width:16%;height:85%;right:-2%}.brass-marquee{z-index:2;border:4px solid var(--ink);text-align:center;background:#f6c851;border-radius:10px;width:260px;height:74px;position:absolute;top:3%;left:50%;transform:translate(-50%);box-shadow:7px 7px #16272d59}.brass-marquee span{letter-spacing:.12em;margin:20px 0 0;font-size:19px;font-weight:1000;display:block}.brass-marquee i{border:2px solid var(--ink);background:var(--cream);border-radius:50%;width:9px;height:9px;position:absolute}.brass-marquee i:first-of-type{top:9px;left:10px}.brass-marquee i:nth-of-type(2){top:9px;right:10px}.brass-marquee i:nth-of-type(3){bottom:9px;left:10px}.brass-marquee i:nth-of-type(4){bottom:9px;right:10px}.is-preparing .brass-marquee{animation:.36s steps(2,end) infinite alternate brass-marquee-cue}.brass-platform{z-index:1;border:4px solid var(--ink);background:linear-gradient(#edbd6f 0 68%,#b16649 68%);border-radius:50% 50% 10px 10px;height:32%;position:absolute;bottom:10%;left:5%;right:5%;box-shadow:inset 0 -20px #3f2b2c33}.brass-drummer{z-index:3;transform-origin:bottom;width:100px;height:135px;position:absolute;top:17%;left:50%;transform:translate(-50%)scale(.8)}.brass-drummer__head{z-index:3;border:4px solid var(--ink);background:#dfe9df;border-radius:18px;width:58px;height:47px;position:absolute;top:0;left:22px;box-shadow:inset 0 -7px #a9beb6}.brass-drummer__head i{background:var(--ink);border-radius:50%;width:8px;height:8px;position:absolute;top:18px}.brass-drummer__head i:first-child{left:13px}.brass-drummer__head i:last-child{right:13px}.brass-drummer__body{border:4px solid var(--ink);background:var(--red);border-radius:9px;width:44px;height:52px;position:absolute;top:49px;left:29px}.brass-drum{z-index:5;border:4px solid var(--ink);background:var(--cream);border-radius:13px;width:81px;height:54px;position:absolute;top:76px;left:11px;box-shadow:inset 0 0 0 7px #d8a84a}.brass-drum b{font-size:27px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.brass-stick{z-index:6;border:2px solid var(--ink);background:var(--cream);transform-origin:6px;border-radius:5px;width:48px;height:5px;transition:transform 70ms;position:absolute;top:56px}.brass-stick--left{left:9px;transform:rotate(-62deg)}.brass-stick--right{transform-origin:42px;right:9px;transform:rotate(62deg)}.brass-stage--drum-left .is-counting .brass-stick--left{transform:rotate(9deg)}.brass-stage--drum-right .is-counting .brass-stick--right{transform:rotate(-9deg)}.brass-drummer.is-hitting{animation:.13s ease-out brass-drum-hit}.brass-line{z-index:5;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:2%;height:202px;display:grid;position:absolute;bottom:21%;left:8%;right:8%}.brass-bot{transform-origin:bottom;justify-self:center;width:126px;height:194px;position:relative}.brass-bot.is-player{filter:drop-shadow(0 7px #16272d2e)}.brass-bot__badge{z-index:10;border:3px solid var(--ink);background:var(--cream);text-align:center;border-radius:50%;width:31px;height:31px;font-size:16px;font-weight:1000;line-height:25px;position:absolute;top:-27px;left:50%;transform:translate(-50%)}.brass-bot__you{z-index:11;border:2px solid var(--ink);background:var(--yellow);border-radius:12px;padding:3px 7px;font-size:10px;font-weight:1000;position:absolute;top:-17px;right:-3px;transform:rotate(5deg)}.brass-bot__antenna{z-index:1;background:var(--ink);width:4px;height:24px;position:absolute;top:1px;left:61px}.brass-bot__antenna i{border:3px solid var(--ink);background:var(--yellow);border-radius:50%;width:14px;height:14px;position:absolute;top:-6px;left:-5px}.brass-bot__head{z-index:5;border:4px solid var(--ink);background:linear-gradient(145deg,#f6fcf3,#b8ccc5);border-radius:23px;width:87px;height:68px;position:absolute;top:19px;left:20px;box-shadow:inset 0 -7px #98b2aa}.brass-bot__head i{background:var(--ink);border-radius:50%;width:9px;height:10px;position:absolute;top:19px}.brass-bot__head i:first-child{left:17px}.brass-bot__head i:nth-child(2){right:17px}.brass-bot__head b{background:var(--ink);width:17px;height:4px;position:absolute;top:44px;left:50%;transform:translate(-50%)}.brass-bot__neck{z-index:2;border:4px solid var(--ink);background:#9fb6ae;width:29px;height:20px;position:absolute;top:82px;left:49px}.brass-bot__body{z-index:3;border:4px solid var(--ink);background:var(--blue);border-radius:15px 15px 23px 23px;width:76px;height:65px;position:absolute;top:99px;left:26px;box-shadow:inset 0 -10px #26768c}.brass-bot--2 .brass-bot__body{background:#58ad82;box-shadow:inset 0 -10px #348562}.brass-bot--3 .brass-bot__body{background:#dda945;box-shadow:inset 0 -10px #ba7d2f}.brass-bot--4 .brass-bot__body{background:var(--red);box-shadow:inset 0 -10px #bd3f38}.brass-bot__body i{border:3px solid var(--ink);background:var(--cream);border-radius:50%;width:22px;height:22px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.brass-bot__arm{z-index:8;border:4px solid var(--ink);background:#bdcec7;border-radius:11px;height:15px;transition:transform .125s cubic-bezier(.2,.82,.2,1.08);position:absolute;top:109px}.brass-bot__arm i{z-index:10;border:3px solid var(--ink);background:#d9e3de;border-radius:50%;width:18px;height:18px;position:absolute;top:50%;transform:translateY(-50%)}.brass-bot__arm--left{transform-origin:7px;width:58px;left:25px;transform:rotate(20deg)}.brass-bot__arm--left i{right:-9px}.brass-bot__arm--right{transform-origin:29px;width:36px;right:25px;transform:rotate(-25deg)}.brass-bot__arm--right i{left:-9px}.is-raised .brass-bot__arm--left{transform:rotate(-34deg)}.is-raised .brass-bot__arm--right{transform:rotate(64deg)}.brass-bot__leg{z-index:2;border:4px solid var(--ink);background:#96aaa4;border-radius:7px 7px 11px 11px;width:23px;height:34px;position:absolute;top:156px}.brass-bot__leg--left{left:33px}.brass-bot__leg--right{right:32px}.brass-horn{z-index:9;transform-origin:23px;width:88px;height:43px;transition:transform .125s cubic-bezier(.2,.82,.2,1.12),top .125s,left .125s;position:absolute;top:115px;left:31px;transform:rotate(10deg)}.is-raised .brass-horn{top:47px;left:52px;transform:rotate(3deg)}.brass-horn__mouth{border:3px solid var(--ink);background:#f0c253;border-radius:7px;width:23px;height:9px;position:absolute;top:17px;left:0}.brass-horn__tube{border:3px solid var(--ink);background:#ffc945;border-radius:8px;width:47px;height:15px;position:absolute;top:14px;left:18px;box-shadow:inset 0 -4px #d99a2d}.brass-horn__valve{border:2px solid var(--ink);background:#f5d56b;border-radius:3px;width:7px;height:21px;position:absolute;top:4px}.brass-horn__valve--one{left:34px}.brass-horn__valve--two{left:47px}.brass-horn__grip{z-index:12;border:3px solid var(--ink);background:#d9e3de;border-radius:50%;width:14px;height:14px;position:absolute;top:20px}.brass-horn__grip--one{left:27px}.brass-horn__grip--two{left:40px}.brass-horn__bell{border:3px solid var(--ink);clip-path:polygon(0 28%,100% 0,100% 100%,0 72%);background:#f4b837;width:30px;height:31px;position:absolute;top:6px;right:0}.brass-sound{z-index:12;opacity:0;pointer-events:none;width:56px;height:50px;position:absolute;top:50px;right:-23px}.is-raised.is-switching .brass-sound{opacity:1}.brass-sound i{border:3px solid var(--yellow);border-left:0;border-radius:0 50% 50% 0;width:12px;height:12px;animation:.38s ease-out both brass-wave;position:absolute;top:50%;left:0;transform:translateY(-50%)}.brass-sound i:nth-child(2){animation-delay:60ms}.brass-sound i:nth-child(3){animation-delay:.12s}.brass-bot.is-switching{animation:.24s cubic-bezier(.2,.8,.2,1.25) brass-switch}.brass-feedback{z-index:15;border:3px solid var(--ink);background:var(--cream);box-shadow:5px 5px 0 var(--ink);border-radius:18px 18px 5px;padding:10px 15px;font-weight:950;animation:.72s ease-out both brass-feedback;position:absolute;top:18%;right:7%}.brass-feedback--perfect{background:var(--yellow)}.brass-feedback--good{background:#bde7e8}.brass-feedback--miss{color:#862f2a;background:#e9b8ad}.brass-lesson{z-index:14;border:3px solid var(--ink);min-width:330px;max-width:52%;color:var(--cream);text-align:center;background:#203946;border-radius:10px;padding:9px 15px;position:absolute;bottom:2%;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 3px #4c6770}.brass-lesson strong,.brass-lesson span{display:block}.brass-lesson strong{color:var(--yellow);font-size:13px}.brass-lesson span{margin-top:3px;font-size:11px;font-weight:750}.brass-tap-copy{z-index:14;border:2px solid var(--ink);background:#fff4d8e6;border-radius:6px;padding:6px 9px;font-size:10px;font-weight:900;position:absolute;bottom:15px;left:17px}@keyframes brass-marquee-cue{to{background:#fff2a5;box-shadow:0 0 0 12px #ffd24938,7px 7px #16272d59}}@keyframes brass-drum-hit{50%{margin-top:5px}}@keyframes brass-switch{48%{transform:translateY(-8px)scale(1.04)}}@keyframes brass-wave{0%{opacity:1;width:8px;height:8px}to{opacity:0;width:52px;height:42px}}@keyframes brass-feedback{0%{opacity:0;transform:translateY(13px)scale(.75)}28%{opacity:1;transform:translateY(-4px)scale(1.06)}76%{opacity:1;transform:none}to{opacity:0;transform:translateY(-16px)}}.brass-section-finale .brass-marquee{animation:.5s steps(2,end) infinite alternate brass-finale-sign}@keyframes brass-finale-sign{to{filter:hue-rotate(22deg)brightness(1.22)}}@container (width<=760px){.brass-line{gap:0;left:2%;right:2%}.brass-bot{transform:scale(.82)}.brass-bot.is-switching{animation-name:brass-switch-small}@keyframes brass-switch-small{48%{transform:scale(.86)translateY(-8px)}}.brass-marquee{width:220px}}@container (width<=490px){.brass-stage{border-left:0;border-right:0;border-radius:0;min-height:390px}.brass-marquee{width:178px;height:55px;top:2%}.brass-marquee span{margin-top:14px;font-size:14px}.brass-drummer{top:13%;transform:translate(-50%)scale(.62)}.brass-platform{height:31%;bottom:11%;left:0;right:0}.brass-line{gap:0;height:174px;bottom:21%;left:0;right:0}.brass-bot{transform:scale(.64)}.brass-bot.is-switching{animation-name:brass-switch-phone}@keyframes brass-switch-phone{48%{transform:scale(.68)translateY(-8px)}}.brass-bot__you{right:-10px}.brass-feedback{font-size:11px;top:17%;right:4%}.brass-lesson{min-width:275px;max-width:78%;bottom:2%}.brass-tap-copy{display:none}}@media (prefers-reduced-motion:reduce){.brass-bot.is-switching,.brass-feedback,.is-preparing .brass-marquee,.brass-section-finale .brass-marquee,.brass-sound i{animation-duration:.001ms!important;animation-iteration-count:1!important}.brass-horn,.brass-bot__arm,.brass-stick{transition-duration:.001ms!important}}