.v31{background:#e8eaf3;color:#1b2441;position:relative;display:grid;grid-template-columns:.85fr 1.15fr;min-height:680px;overflow:hidden;padding:50px 5%;gap:20px;isolation:isolate}.v31:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 20%,#fff 0,transparent 65%),linear-gradient(120deg,#dfe5f2,transparent 60%)}.v31-intro{align-self:center;z-index:1}.v31-kicker{font-size:10px;letter-spacing:2px;text-transform:uppercase;margin:0 0 28px}.v31 h2{font-size:clamp(55px,7vw,100px);letter-spacing:-5px;font-weight:400;line-height:.96;margin:0 0 25px}.v31-intro>p:not(.v31-kicker){font-size:13px;color:#58637b}.v31-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.v31-actions button{font-size:11px;min-height:42px;padding:12px 16px;border:1px solid #a2abc3;background:#ffffff40;color:#26324e}.v31-actions [data-sound][aria-pressed=true]{background:#253650;color:white}.v31-intro .v31-note{font-size:10px;margin-top:12px}.v31-readout{display:flex;gap:18px;align-items:baseline;border-top:1px solid #a8b0c044;margin-top:27px;padding-top:17px;min-height:44px}.v31-readout>span{font-size:25px;font-family:Georgia,serif;min-width:65px}.v31-readout small{font-size:10px;color:#58637b}.v31-volume{display:flex;align-items:center;gap:16px;font-size:10px;margin-top:18px;max-width:250px}.v31-volume input{min-width:0;width:180px;accent-color:#41557d}.v31-art{position:relative;min-width:0;min-height:560px;display:flex;align-items:center;justify-content:center;perspective:900px}.v31-instrument{width:280px;display:flex;flex-direction:column;gap:5px;transform:rotate(-12deg);transform-style:preserve-3d;position:relative;z-index:2;padding:12px 0}.v31-key{position:relative;display:block;min-height:29px;height:29px;width:255px;border:1px solid #fff9;border-radius:5px!important;background:linear-gradient(150deg,hsl(var(--tone) 52% 85% / .85),hsl(var(--tone) 65% 73% / .66) 45%,hsl(var(--tone) 35% 90% / .9));box-shadow:0 3px 0 hsl(var(--tone) 20% 65% / .5),0 9px 15px #233d5e16,inset 0 1px 1px #fff;transform:translateX(var(--shift)) translateZ(var(--depth)) rotateY(var(--angle));transform-style:preserve-3d;transform-origin:center;transition:background .2s,box-shadow .2s;touch-action:manipulation}.v31-key:before{content:'';position:absolute;inset:5px 14px;border-top:1px solid #fff7;border-bottom:1px solid #fff3;pointer-events:none}.v31-key>span{font-size:8px;color:#334161;position:absolute;right:18px;top:9px;letter-spacing:1px}.v31-key.is-struck{background:linear-gradient(135deg,hsl(var(--tone) 70% 65%),hsl(var(--tone) 88% 83%));box-shadow:0 3px 0 hsl(var(--tone) 40% 60%),0 0 40px hsl(var(--tone) 80% 70% / .45),inset 0 1px 1px #fff}.v31-key:focus-visible{outline:3px solid #354569;outline-offset:4px}.v31-orbit{position:absolute;width:460px;height:460px;max-width:100%;border:1px solid #8797b91c;border-radius:50%;transform:rotateX(60deg);box-shadow:0 0 0 50px #8797b908,0 0 0 100px #8797b905}.v31-art-note{position:absolute;bottom:0;text-align:center;font-size:9px;color:#6b7590;letter-spacing:.5px}.v31-credit{grid-column:1/-1;font-size:9px;color:#6b7590;margin:0;align-self:end}
@media(max-width:750px){.v31{padding:30px 5% 22px;grid-template-columns:1fr;gap:0}.v31-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}.v31-kicker{grid-column:1/-1;font-size:9px;margin-bottom:22px}.v31 h2{font-size:58px;letter-spacing:-3px;grid-row:2/4;margin:0}.v31-intro>p:not(.v31-kicker){font-size:11px;margin-top:0}.v31-actions{grid-column:1/-1;margin-top:24px}.v31-actions button{font-size:10px;flex:1;padding:11px}.v31-intro .v31-note{grid-column:1/-1;margin:9px 0 0;font-size:9px}.v31-readout{grid-column:1/-1;margin-top:12px;padding-top:12px;min-height:36px}.v31-readout>span{font-size:22px}.v31-volume{grid-column:1/-1;margin-top:4px}.v31-art{min-height:520px}.v31-instrument{transform:scale(.84) rotate(-12deg);margin-top:-10px}.v31-art-note{bottom:10px;font-size:8px}.v31-credit{font-size:8px;margin-top:7px}.v31-orbit{width:300px;height:300px}}
@media(max-width:450px){.v31{padding-top:24px}.v31-intro{display:block}.v31-kicker{margin-bottom:17px}.v31 h2{font-size:48px;letter-spacing:-2.8px;line-height:.98;max-width:310px;margin-bottom:16px}.v31 h2 br{display:none}.v31-actions{margin-top:16px}.v31-intro>p:not(.v31-kicker){line-height:1.5}.v31-readout{margin-top:12px}.v31-art{height:405px;min-height:405px}.v31-instrument{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.68) rotate(-12deg);margin:0}}