/* A self-contained instrument, with no canvas or 3D runtime to download. */
.play-section{position:relative;background:radial-gradient(ellipse at 18% 50%,#305653 0,transparent 52%),#132f32;padding-block:88px}
.play-section:before{content:'';position:absolute;inset:20px;border:1px solid #dfd6ac16;border-radius:24px;pointer-events:none}
.play-grid{gap:45px;grid-template-columns:1fr 1.1fr}
.play-copy{position:relative;z-index:1}
.play-copy h2{font-size:72px;line-height:1.12}
.play-copy h2 em{color:#e8d09b}
.play-copy>.eyebrow{color:#e8d09b;letter-spacing:.3px}
.play-copy>p:not(.eyebrow){font-size:13px;line-height:2.2;max-width:360px}
.play-copy small{font-size:10px;max-width:340px;line-height:2;color:#becfca;margin-top:17px}
.pan-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pan-controls .sound-control{margin:0;min-height:44px;padding:10px 16px;border-color:#c5d3bd55;font-size:11px;transition:background .2s,border-color .2s}
.pan-controls .sound-control:hover{background:#ffffff15;border-color:#e8d09b}
#panDemo{background:#e8d09b;color:#233937;border-color:#e8d09b}
#panDemo[aria-pressed=true]{background:#fff1cc}
.pan-songbook{max-width:365px;margin-top:24px;padding:17px;border:1px solid #e8d09b30;border-radius:16px;background:#0b242733;text-align:right}
.pan-songbook>label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#f1dfba;font-size:12px;margin-bottom:12px}
.pan-songbook>label>span{font-size:8px;color:#c5d7cf}
.pan-song-row{display:flex;gap:8px;align-items:stretch}
.pan-song-row select{flex:1;min-width:0;width:100%;min-height:44px;padding:8px 10px;font-size:11px;border:1px solid #a4ceba66;border-radius:9px;background:#183a3b;color:#fff2cf;cursor:pointer}
.pan-song-row select option{background:#183a3b;color:#fff2cf}
.pan-song-row #panDemo{display:flex;gap:6px;align-items:center;justify-content:center;border-radius:9px;font-size:10px;padding:8px 12px;min-width:88px;min-height:44px;white-space:nowrap}
.pan-song-row #panDemo:disabled{opacity:.45}
.pan-songbook #panSongInfo{font-size:9px;color:#c3d4cc;line-height:1.9;margin-top:8px;min-height:34px;overflow-wrap:anywhere}
.pan-progress-row{display:flex;align-items:center;gap:10px;margin-top:13px;direction:ltr}
.pan-progress-row progress{appearance:none;-webkit-appearance:none;flex:1;min-width:0;width:100%;height:3px;border:0;border-radius:3px;background:#d6dfc224;color:#e8d09b}
.pan-progress-row progress::-webkit-progress-bar{background:#d6dfc224;border-radius:3px}
.pan-progress-row progress::-webkit-progress-value{background:#e8d09b;border-radius:3px}
.pan-progress-row progress::-moz-progress-bar{background:#e8d09b;border-radius:3px}
#panTime{font:9px/1.5 Arial,sans-serif;color:#d2ded8;font-variant-numeric:tabular-nums}
#panMelody:focus-visible{outline:3px solid #fff5cf;outline-offset:3px}
.pan-mix{display:flex;align-items:center;gap:12px;margin-top:22px;max-width:340px;font-size:10px}
.pan-mix input{direction:ltr;accent-color:#e8d09b;min-height:30px;min-width:0;width:100px;padding:0;flex:1;background:none;border:0;cursor:pointer}
#panRoom{font-size:10px;min-height:44px;color:#f5dfb2;border-bottom:1px solid #f5dfb277;white-space:nowrap;padding:5px 3px}
#panRoom[aria-pressed=false]{color:#bfceca;border-color:transparent}
.play-copy>.pan-help{font-size:10px!important;margin-top:18px!important;color:#c5d7cf!important}
.pan-area{height:480px;min-width:0;perspective:900px;isolation:isolate}
.pan-meta{position:absolute;top:2px;inset-inline:0;display:flex;justify-content:space-between;gap:12px;font:8px/1.5 Arial,sans-serif;letter-spacing:1.5px;color:#bcc9bd}
.pan-halo{width:360px;height:360px;border-color:#ebd9a624;box-shadow:0 0 0 32px #d6dfc205,0 0 0 66px #d6dfc204;transform:rotateX(25deg)}
.pan-stage{position:absolute;left:50%;top:50%;margin:-180px 0 0 -180px;width:360px;height:360px;transform-style:flat;transform:rotateX(var(--pan-rx,18deg)) rotateY(var(--pan-ry,-10deg)) rotateZ(-8deg);transition:transform .25s ease-out}
.pan-stage:before{content:'';position:absolute;inset:28px -2px -18px;border-radius:50%;background:#051b1b;filter:blur(18px);transform:translateZ(-32px);opacity:.65;pointer-events:none}
.interactive-pan{width:360px;height:360px;transform:none;border:2px solid #bda06e;border-radius:50%;background:radial-gradient(ellipse at var(--light-x,32%) var(--light-y,20%),#ffe7aa80 0,transparent 44%),repeating-radial-gradient(ellipse at 48% 46%,#f6d8940a 0 1px,#182c2b0b 2px 4px),conic-gradient(from 20deg,#997647,#d2ae70,#665537,#bb965b,#6b6549,#dab87d,#997647);box-shadow:inset 0 0 0 4px #e1bc7655,inset 0 0 0 8px #3e352344,inset -15px -18px 36px #26281799,inset 6px 7px 25px #fff4c451,0 3px 0 #c4a576,0 7px 0 #6d593c,0 11px 0 #4c4834,0 14px 0 #242f29,0 28px 40px #061d1b99;touch-action:pan-y}
.interactive-pan:before{content:'';position:absolute;inset:14px;border:1px solid #f7d59036;border-radius:50%;pointer-events:none}
.interactive-pan:after{inset:21px;border:1px dashed #513f2640}
.pan-note{width:63px;height:76px;border:1px solid #e5c18499;background:radial-gradient(ellipse at 45% 35%,#68563d,#9b8053 58%,#d5b47a 77%,#736041 92%);box-shadow:inset 2px 4px 9px #342e2580,inset -2px -3px 5px #fff0b755,0 1px 2px #4b3d2980;gap:0;align-content:center;color:#fff2cf;transition:filter .12s,box-shadow .12s;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.pan-note:before{content:'';position:absolute;inset:12px 9px;border:1px solid #f4d59b27;border-radius:50%;pointer-events:none}
.pan-note span{position:relative;color:#fff2cf;opacity:1;pointer-events:none;line-height:1.4;text-shadow:0 1px 3px #201c19}
.pan-note .note-name{font:12px/1.7 Arial,sans-serif;font-weight:600}
.pan-note .note-key{font:9px/1.6 Body,Tahoma,sans-serif;color:#f2ddb7}
.pan-note.center{width:100px;height:100px;left:128px;top:129px;background:radial-gradient(circle at 35% 28%,#e4c487,#9e8051 43%,#5a4d36 70%,#c4a26a 91%);box-shadow:inset 2px 3px 6px #fbe1a73d,inset -5px -7px 14px #332c2599,0 1px 3px #362e22}
.pan-note.center:before{inset:17px;background:radial-gradient(circle at 30% 25%,#efd49a88,#a58b59 40%,#615239 90%);box-shadow:0 2px 5px #2f302477;border:1px solid #edcc8e55}
.pan-note.center span{z-index:1}
.pan-note.n1{left:147px;top:22px;transform:rotate(90deg)}
.pan-note.n2{right:39px;top:61px;transform:rotate(40deg)}
.pan-note.n3{right:21px;top:165px;transform:rotate(10deg)}
.pan-note.n4{right:81px;bottom:26px;transform:rotate(-38deg)}
.pan-note.n5{left:81px;bottom:26px;transform:rotate(38deg)}
.pan-note.n6{left:21px;top:165px;transform:rotate(-10deg)}
.pan-note.n7{left:39px;top:61px;transform:rotate(-40deg)}
.pan-note:hover{filter:brightness(1.13);box-shadow:inset 2px 4px 9px #342e2580,inset -2px -3px 5px #fff0b755,0 0 16px #efd49b44}
.pan-note.sounding{filter:brightness(1.45);box-shadow:inset 0 0 16px #ffe9a77d,0 0 0 3px #ffe9ad55,0 0 30px #ffe5a87d;animation:pan-pulse .65s ease-out}
.pan-note:focus-visible,.pan-controls button:focus-visible,#panRoom:focus-visible,.pan-mix input:focus-visible{outline:3px solid #fff5cf;outline-offset:5px}
.pan-readout{position:absolute;bottom:2px;inset-inline:0;display:flex;align-items:center;gap:9px;font-size:10px;min-height:30px;color:#ead7b2}
.pan-status-dot{width:5px;height:5px;border-radius:50%;background:#e8d09b;box-shadow:0 0 10px #e8d09b55;flex-shrink:0}
.pan-readout .pan-caption{position:static;margin-left:auto;font-size:7px;letter-spacing:1.8px;color:#becfc6}
@keyframes pan-pulse{0%{filter:brightness(1.6)}100%{filter:brightness(1)}}
@media(max-width:900px){.play-grid{gap:20px}.pan-stage{scale:.9}.pan-area{height:420px}.play-copy h2{font-size:62px}.pan-meta{font-size:7px;letter-spacing:1px}}
@media(max-width:600px){.play-section{padding-block:65px 38px}.play-section:before{inset:10px;border-radius:18px}.play-grid{grid-template-columns:1fr;gap:25px}.play-copy h2{font-size:64px}.play-copy>p:not(.eyebrow),.play-copy small{margin-inline:auto}.play-copy>p:not(.eyebrow){font-size:12px}.pan-controls{justify-content:center}.pan-mix{margin-inline:auto}.pan-area{height:390px;margin-top:8px}.pan-stage{scale:.85}.pan-halo{width:285px;height:285px}.pan-meta{inset-inline:4px;font-size:7px;letter-spacing:1px}.pan-readout{inset-inline:6px;font-size:9px}.pan-readout .pan-caption{font-size:6px;letter-spacing:1px}.play-copy small{font-size:9px}}
@media(max-width:360px){.pan-stage{scale:.75}.pan-area{height:355px}.pan-controls{gap:7px}.pan-controls .sound-control{padding-inline:12px}}
@media(max-width:600px){.pan-songbook{margin-inline:auto}.pan-songbook>label>span{font-size:7px}.pan-song-row #panDemo{min-width:80px;padding-inline:9px}.pan-songbook #panSongInfo{font-size:8px}.pan-mix{margin-top:14px}.pan-controls{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.pan-stage{transform:rotateX(15deg) rotateY(-8deg) rotateZ(-8deg);transition:none}.pan-note.sounding{animation:none}}