.xylo{--xylo-w:192px;--xylo-h:90px;--xylo-gap:6px;--xylo-step:0px;--xylo-rail:34px;--xylo-off:0px;--xylo-screw:10px;--xylo-pop:scale(1.1) translateX(16px);position:relative}@media (min-width:1280px){.xylo{--xylo-w:246px;--xylo-step:4px;--xylo-rail:44px;--xylo-screw:12px;--xylo-pop:scale(1.14) translateX(30px)}}@media (min-width:1536px){.xylo{--xylo-w:310px;--xylo-h:100px;--xylo-step:8px;--xylo-rail:58px;--xylo-screw:15px}}@media (min-width:2000px){.xylo{--xylo-w:420px;--xylo-h:110px;--xylo-step:16px;--xylo-rail:80px;--xylo-screw:18px}}.xylo-bars{display:flex;flex-direction:column;gap:var(--xylo-gap)}.xylo-bar{position:relative;z-index:10;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;width:calc(var(--xylo-w) - var(--xylo-i, 0) * var(--xylo-step));height:var(--xylo-h);padding:0 10px 4px calc(var(--xylo-rail) + 4px);border-width:3px;border-style:solid;border-radius:10px 20px 20px 10px;background-image:linear-gradient(180deg,hsla(0,0%,100%,.42),hsla(0,0%,100%,.12) 36%,hsla(0,0%,100%,0) 52%,rgba(0,0,0,.08));box-shadow:inset 0 -6px 0 rgba(0,0,0,.16),inset 0 2px 0 hsla(0,0%,100%,.45),0 6px 10px -5px rgba(0,0,0,.35);filter:grayscale(20%);transition:transform .3s,filter .3s}.xylo-gloss{background-image:linear-gradient(180deg,hsla(0,0%,100%,.38),hsla(0,0%,100%,.1) 36%,hsla(0,0%,100%,0) 52%,rgba(0,0,0,.08));box-shadow:inset 0 -4px 0 rgba(0,0,0,.14),inset 0 2px 0 hsla(0,0%,100%,.4),0 4px 8px -4px rgba(0,0,0,.3)}.xylo-bar[aria-pressed=true]{z-index:20;filter:none;transform:var(--xylo-pop)}.xylo-rail{position:absolute;z-index:30;top:-12px;bottom:-12px;left:0;width:var(--xylo-rail);display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:12px 0 12px var(--xylo-off);border:4px solid #7a4a24;border-radius:20px;pointer-events:none;background:radial-gradient(ellipse 5px 8px at calc(50% + var(--xylo-off) / 2) 40%,#7f4d25 0 60%,transparent 62%),radial-gradient(ellipse 10px 15px at calc(50% + var(--xylo-off) / 2) 40%,transparent 0 62%,#a56b37 64% 82%,transparent 84%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='140' viewBox='0 0 48 140' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23a56b37' stroke-width='2.2' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M9 0C3 45 16 95 9 140'/%3E%3Cpath d='M24 0C31 40 18 100 24 140'/%3E%3Cpath d='M39 0C35 50 44 90 39 140'/%3E%3C/g%3E%3C/svg%3E") 0 0 /100% 140px repeat-y,linear-gradient(90deg,#c48648 0,#e2ad70 38%,#d69a5a 68%,#b87a41 100%);box-shadow:inset 3px 0 0 hsla(0,0%,100%,.28),inset -3px 0 0 rgba(0,0,0,.14),4px 5px 0 rgba(60,35,15,.22)}.xylo-screw{position:relative;width:var(--xylo-screw);height:var(--xylo-screw);border-radius:50%;border:2px solid #565c61;background:radial-gradient(circle at 35% 30%,#fff,#b9bfc4 55%,#8d949a);box-shadow:0 2px 0 rgba(60,35,15,.35)}.xylo-screw:after{content:"";position:absolute;inset:42% 12%;border-radius:1px;background:#565c61;transform:rotate(-35deg)}.xylo--pencils{--xylo-w:204px;--xylo-h:84px;--xylo-gap:10px;--xylo-step:0px;--xylo-rail:28px;--tip:26px;--wear:0px;--xylo-pop:translateX(12px) scale(1.03)}@media (min-width:1280px){.xylo--pencils{--xylo-w:256px;--xylo-rail:42px;--tip:38px;--wear:2px;--xylo-pop:translateX(22px) scale(1.05)}}@media (min-width:1536px){.xylo--pencils{--xylo-w:320px;--xylo-h:92px;--xylo-rail:54px;--tip:46px;--wear:3px}}@media (min-width:2000px){.xylo--pencils{--xylo-w:430px;--xylo-h:100px;--xylo-rail:74px;--tip:56px;--wear:5px}}.xylo--pencils .xylo-bar{width:calc(var(--xylo-w) - var(--tip) - var(--wear-i, 0) * var(--wear));overflow:visible;padding-right:12px;border-width:3px 0 3px 3px;border-radius:6px 0 0 6px;background-image:linear-gradient(90deg,rgba(0,0,0,.2) var(--xylo-rail),transparent calc(var(--xylo-rail) + 16px)),linear-gradient(180deg,hsla(0,0%,100%,.4) 0 30%,hsla(0,0%,100%,0) 30% 70%,rgba(0,0,0,.12) 70%);box-shadow:0 6px 10px -5px rgba(0,0,0,.35)}.xylo--pencils .xylo-bar:nth-child(5n+2){--wear-i:3}.xylo--pencils .xylo-bar:nth-child(5n+3){--wear-i:1}.xylo--pencils .xylo-bar:nth-child(5n+4){--wear-i:4}.xylo--pencils .xylo-bar:nth-child(5n+5){--wear-i:2}.xylo--pencils .xylo-bar:after,.xylo--pencils .xylo-bar:before{content:"";position:absolute;top:-3px;bottom:-3px;left:100%;pointer-events:none}.xylo--pencils .xylo-bar:before{width:var(--tip);-webkit-clip-path:polygon(0 0,100% 46%,100% 54%,0 100%);clip-path:polygon(0 0,100% 46%,100% 54%,0 100%);background:linear-gradient(180deg,hsla(0,0%,100%,.35) 0 30%,hsla(0,0%,100%,0) 30% 70%,rgba(0,0,0,.1) 70%),linear-gradient(90deg,#f1cd96 0 66%,var(--bar-edge) 66%)}.xylo--pencils .xylo-bar:after{width:7px;background-color:var(--bar);background-image:linear-gradient(180deg,hsla(0,0%,100%,.4) 0 30%,hsla(0,0%,100%,0) 30% 70%,rgba(0,0,0,.12) 70%);-webkit-clip-path:polygon(0 0,0 100%,40% 100%,100% 83%,40% 67%,100% 50%,40% 33%,100% 17%,40% 0);clip-path:polygon(0 0,0 100%,40% 100%,100% 83%,40% 67%,100% 50%,40% 33%,100% 17%,40% 0)}.xylo--pencils .xylo-bar:not([aria-pressed=true]):hover{transform:translateX(5px)}.xylo--pencils .xylo-rail{top:-16px;bottom:-16px;padding:0;border:4px solid #2f74c8;border-radius:12px 12px 14px 14px;background:linear-gradient(180deg,#3f86d8 0 14px,#2f74c8 14px 17px,transparent 17px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='56'%3E%3Cg fill='%23fff' fill-opacity='.6'%3E%3Ccircle cx='12' cy='14' r='5'/%3E%3Ccircle cx='29' cy='34' r='3.5'/%3E%3Ccircle cx='10' cy='48' r='2.5'/%3E%3C/g%3E%3C/svg%3E") 0 20px /100% 56px repeat-y,linear-gradient(90deg,#5aa2f2,#7db8f7 40%,#5fa6f3 70%,#4a92e6);box-shadow:inset 3px 0 0 hsla(0,0%,100%,.3),inset -3px 0 0 rgba(0,0,0,.1),4px 5px 0 rgba(20,60,120,.2)}.xylo--piano{--xylo-step:0px;--xylo-gap:4px;--xylo-pop:translateX(12px) scale(1.04)}@media (min-width:1280px){.xylo--piano{--xylo-pop:translateX(22px) scale(1.06)}}.xylo--piano .xylo-bar{border-radius:2px 14px 14px 2px;background-image:linear-gradient(90deg,rgba(0,0,0,.18) var(--xylo-rail),transparent calc(var(--xylo-rail) + 12px)),linear-gradient(180deg,hsla(0,0%,100%,.5) 0,hsla(0,0%,100%,.15) 30%,hsla(0,0%,100%,0) 55%,rgba(0,0,0,.06) 100%);box-shadow:inset -7px 0 0 rgba(0,0,0,.1),inset 0 2px 0 hsla(0,0%,100%,.5),0 5px 8px -5px rgba(0,0,0,.35)}.xylo--piano .xylo-bar:not([aria-pressed=true]):hover{transform:translateX(4px)}.xylo-sharp{position:absolute;z-index:25;left:calc(var(--xylo-rail) - 6px);top:calc(var(--k) * (var(--xylo-h) + var(--xylo-gap)) - var(--xylo-gap) / 2 - var(--xylo-h) * .16);width:calc((var(--xylo-w) - var(--xylo-rail)) * .34);height:calc(var(--xylo-h) * .32);border-radius:0 7px 7px 0;background:linear-gradient(180deg,#5a5f68,#2b2e34 30%,#1b1d21);box-shadow:inset -4px 0 0 hsla(0,0%,100%,.12),inset 0 -3px 0 rgba(0,0,0,.4),2px 3px 4px rgba(0,0,0,.35);pointer-events:none}.xylo--piano .xylo-rail{border:4px solid #8f1d22;border-radius:14px;background:linear-gradient(90deg,transparent calc(100% - 7px),#6e1418 calc(100% - 7px)),linear-gradient(90deg,transparent 16%,#f3c65a 16% 21%,transparent 21% 79%,#f3c65a 79% 84%,transparent 84%),linear-gradient(90deg,#c8282f,#ee4a4f 35%,#d9343a 70%,#b3222a);box-shadow:inset 3px 0 0 hsla(0,0%,100%,.3),4px 5px 0 rgba(90,15,20,.22)}.xylo--pencils .xylo-screw{display:none}.xylo--piano .xylo-screw{border-color:#b8862b;background:radial-gradient(circle at 35% 30%,#fff6d0,#f3c65a 55%,#c9952f);box-shadow:0 2px 0 rgba(90,15,20,.35)}.xylo--piano .xylo-screw:after{display:none}.menu--pencils .xylo-gloss{background-image:linear-gradient(180deg,hsla(0,0%,100%,.4) 0 30%,hsla(0,0%,100%,0) 30% 70%,rgba(0,0,0,.12) 70%);box-shadow:0 4px 8px -4px rgba(0,0,0,.3)}.menu--pencils li.xylo-gloss{--tip:26px;position:relative;margin-right:var(--tip);border-right-width:0;border-radius:6px 0 0 6px}.menu--pencils li.xylo-gloss:after,.menu--pencils li.xylo-gloss:before{content:"";position:absolute;top:-4px;bottom:-4px;left:100%;pointer-events:none}.menu--pencils li.xylo-gloss:before{width:var(--tip);-webkit-clip-path:polygon(0 0,100% 46%,100% 54%,0 100%);clip-path:polygon(0 0,100% 46%,100% 54%,0 100%);background:linear-gradient(180deg,hsla(0,0%,100%,.35) 0 30%,hsla(0,0%,100%,0) 30% 70%,rgba(0,0,0,.1) 70%),linear-gradient(90deg,#f1cd96 0 66%,var(--bar-edge) 66%)}.menu--pencils li.xylo-gloss:after{width:6px;background-color:var(--bar);background-image:linear-gradient(180deg,hsla(0,0%,100%,.4) 0 30%,hsla(0,0%,100%,0) 30% 70%,rgba(0,0,0,.12) 70%);-webkit-clip-path:polygon(0 0,0 100%,40% 100%,100% 83%,40% 67%,100% 50%,40% 33%,100% 17%,40% 0);clip-path:polygon(0 0,0 100%,40% 100%,100% 83%,40% 67%,100% 50%,40% 33%,100% 17%,40% 0)}.menu--piano li.xylo-gloss{position:relative;border-radius:3px 14px 14px 3px}.menu--piano li.xylo-gloss:not(:last-child):after{content:"";position:absolute;z-index:1;left:-4px;bottom:-12px;width:min(30%,120px);height:16px;border-radius:0 6px 6px 0;background:linear-gradient(180deg,#5a5f68,#2b2e34 30%,#1b1d21);box-shadow:inset -3px 0 0 hsla(0,0%,100%,.12),2px 3px 4px rgba(0,0,0,.35);pointer-events:none}.menu--piano ul:before{content:"";position:absolute;left:2px;top:0;bottom:4px;width:12px;border-radius:7px;background:linear-gradient(90deg,#b3222a,#ee4a4f 45%,#c8282f);box-shadow:inset 5px 0 0 -3px #f3c65a}.menu--piano li.xylo-gloss{margin-left:6px}@media (max-width:1279px){.xylo--pencils .xylo-bar>span{font-size:1rem;line-height:1.25rem}.xylo--pencils .xylo-bar>img{width:2.1rem;margin-left:.3rem}}@media (prefers-reduced-motion:reduce){.xylo-bar{transition:none}}