body{color:#1a1a1a;background-color:#d8c194;background-image:radial-gradient(140% 120%,#0000 48%,#1c120a3d 100%),radial-gradient(58% 24% at 44% 0,#281a0e4d,#0000 68%),radial-gradient(56% 26% at 57% 100%,#281a0e45,#0000 70%),radial-gradient(24% 58% at 0 40%,#281a0e47,#0000 68%),radial-gradient(26% 54% at 100% 60%,#281a0e42,#0000 68%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(55% 40% at 15% 9%,#91643433,#0000 60%),radial-gradient(60% 45% at 91% 5%,#6e4c2a2e,#0000 55%),radial-gradient(50% 40% at 87% 95%,#7d542d38,#0000 58%),radial-gradient(65% 50% at 5% 97%,#5f402130,#0000 55%),radial-gradient(40% 32% at 63% 54%,#a0764224,#0000 62%),radial-gradient(88% 68% at 44% 46%,#faf0d238,#0000 70%);min-height:100vh;margin:0;padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}main{justify-content:center;display:flex}header{text-align:right}nav a{color:#8a7355;letter-spacing:.02em;font-size:.75rem;text-decoration:none}nav a:hover,nav a:focus-visible{color:#6b5636;text-decoration:underline}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.playable{touch-action:none;-webkit-user-select:none;user-select:none;color:#20120a;background-color:#b3895a;background-image:linear-gradient(#fff6e11a,#140c061a 100%),linear-gradient(71deg,#0000 44%,#fff6e133 49% 51%,#0000 56%),linear-gradient(-24deg,#0000 44%,#140c0642 49% 51%,#0000 56%),linear-gradient(35deg,#0000 45%,#fff6e129 49.5% 50.5%,#0000 55%),radial-gradient(circle,#140c0666 0% 38%,#fff6e14d 54%,#0000 72%),radial-gradient(circle,#140c065c 0% 38%,#fff6e142 54%,#0000 72%),radial-gradient(50% 45% at 84% 88%,#412b143d,#0000 65%),radial-gradient(46% 40% at 10% 12%,#412b1433,#0000 60%),radial-gradient(34% 30% at 60% 20%,#8c683c29,#0000 62%),radial-gradient(30% 26% at 28% 72%,#281a0e2e,#0000 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23m)'/%3E%3C/svg%3E");background-position:0 0,20% 32%,66% 60%,42% 80%,2% 8%,96% 92%,0 0,0 0,0 0,0 0,0 0;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;background-size:100% 100%,70px 22px,55px 18px,45px 16px,4.5% 4%,3.8% 3.4%,100% 100%,100% 100%,100% 100%,100% 100%,260px 260px;border-radius:7px 4px 8px 5px/5px 8px 4px 7px;flex-direction:column;width:100%;max-width:900px;height:min(60vh,420px);margin:2rem 0;display:flex;position:relative;box-shadow:inset 0 0 0 1px #23150a80,inset 0 0 20px #140c0647,0 6px 14px #120b054d}.strings{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.string-path{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linecap:round;opacity:.95;filter:drop-shadow(0 0 1.5px #fff8e6a6)}.string-path[data-string-index="0"]{stroke-width:2.05px}.string-path[data-string-index="1"]{stroke-width:2.3px}.string-path[data-string-index="2"]{stroke-width:2.55px}.string-path[data-string-index="3"]{stroke-width:2.8px}.string-path[data-string-index="4"]{stroke-width:3.05px}.string-band{flex:1 1 0;align-items:center;display:flex;position:relative}.string-stud{pointer-events:none;background:radial-gradient(circle at 42% 38%,#7d6640 0%,#63502c 32%,#453a1e 62%,#2b2410 100%);width:9px;height:9px;position:absolute;top:50%;box-shadow:inset 0 0 0 1px #0f0a0480,inset -1px -1px 1.5px #00000059,0 0 0 1px #140e0666}.string-stud--left{border-radius:44% 56% 53% 47%/54% 44% 56% 46%;left:0;transform:translate(-50%,-50%)}.string-stud--right{border-radius:52% 48% 45% 55%/47% 55% 45% 53%;left:100%;transform:translate(-50%,-50%)}.string-touch{opacity:0;pointer-events:none;background:radial-gradient(circle,currentColor 0%,#0000 70%);border-radius:50%;width:18px;height:18px;transition:opacity .12s ease-out;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)}.string-touch.is-active{opacity:.28}.string-pulse{opacity:0;pointer-events:none;background:radial-gradient(circle,currentColor 0%,#0000 70%);border-radius:50%;width:34px;height:34px;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)scale(1)}.pitch-marks{pointer-events:none;height:8px;position:absolute;bottom:6px;left:0;right:0}.pitch-mark{position:absolute;top:50%;transform:translate(-50%,-50%)}.pitch-mark:first-child{left:4.545%}.pitch-mark:nth-child(2){left:13.636%}.pitch-mark:nth-child(3){left:22.727%}.pitch-mark:nth-child(4){left:31.818%}.pitch-mark:nth-child(5){left:40.909%}.pitch-mark:nth-child(6){left:50%}.pitch-mark:nth-child(7){left:59.091%}.pitch-mark:nth-child(8){left:68.182%}.pitch-mark:nth-child(9){left:77.273%}.pitch-mark:nth-child(10){left:86.364%}.pitch-mark:nth-child(11){left:95.455%}.pitch-mark:before{content:"";background:#1e120866;width:1.4px;height:7px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px #fff6e12e}.pitch-mark--root:after{content:"";background:#1e12086b;width:3.6px;height:3.6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translateY(-5.5px)rotate(45deg);box-shadow:0 1px #fff6e133}.pitch-mark--fifth:after{content:"";background:#1e120861;width:5px;height:1.4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translateY(-2.4px);box-shadow:0 1px #fff6e129}