@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/press-start-2p-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/press-start-2p-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{margin:0;padding:0;box-sizing:border-box}:root{--body-red: #b5271f;--body-red-dark: #7e1712;--plate: #e2cf9d;--btn-red: #d92b20;--btn-red-dark: #8c130c;--ink: #2a1508}html,body{height:100%}body{background:radial-gradient(ellipse at 50% 35%,#33222b,#17101a 70%);display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:"Press Start 2P",monospace;touch-action:manipulation;-webkit-user-select:none;user-select:none}.device{width:1640px;height:860px;position:relative;flex:none;background:linear-gradient(160deg,#a25545,#7e3f30 35%,#4c231b);border-radius:48px;box-shadow:inset 0 4px 10px #ffffff59,inset 0 -10px 24px #00000080,0 40px 80px #000000a6}.device:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:48px;pointer-events:none;background-image:radial-gradient(ellipse 420px 260px at 12% 92%,rgba(28,14,9,.34),transparent 70%),radial-gradient(ellipse 380px 220px at 90% 8%,rgba(26,13,8,.26),transparent 70%),radial-gradient(ellipse 300px 300px at 6% 6%,rgba(26,13,8,.24),transparent 70%),radial-gradient(ellipse 260px 160px at 55% 97%,rgba(26,13,8,.2),transparent 70%),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(28,12,7,.34) 100%)}.device:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:48px;pointer-events:none;background:url(/art/scratches.webp) center / cover;mix-blend-mode:screen;opacity:.34}.logo-svg{position:absolute;top:20px;left:50%;transform:translate(-50%);width:660px;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.55)) drop-shadow(0 -2px 2px rgba(0,0,0,.35)) drop-shadow(0 2px 0 rgba(255,150,125,.5)) drop-shadow(0 3px 3px rgba(255,120,95,.18));-webkit-user-select:none;user-select:none;pointer-events:none}.bezel{position:absolute;top:150px;left:50%;transform:translate(-50%);padding:10px;background:linear-gradient(180deg,#2c2118,#140c06);border:5px solid var(--plate);border-radius:14px;box-shadow:inset 0 2px 3px #0009,0 2px #fff0d240,0 -2px 4px #0006,0 10px 26px #00000073}.screen{width:1160px;height:652px;position:relative;overflow:hidden;border-radius:6px;background:#000}.screen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.045) 12%,rgba(255,255,255,.012) 26%,transparent 38%,transparent 74%,rgba(255,255,255,.03) 92%,rgba(255,255,255,.055) 100%),linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 5%),radial-gradient(ellipse 640px 300px at 78% 108%,rgba(255,255,255,.045),transparent 70%)}.stage{position:absolute;top:0;left:0;width:1024px;height:576px;transform:scale(1.1328);transform-origin:0 0}.stage img,.piano{image-rendering:pixelated}.stage .bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;filter:brightness(.72) saturate(.65)}.veil{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;background:linear-gradient(180deg,#1406201a,#14062061 22% 62%,#1406201a);pointer-events:none}.stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;background:linear-gradient(#fff0 50%,#0000001a 50%),radial-gradient(ellipse at 22% 12%,#ffffff24,#fff0 45%);background-size:100% 4px,100% 100%;pointer-events:none}.bulb{position:absolute;z-index:5;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff0b4f2,#ffc35f99 40%,#ffaa3c00 72%);mix-blend-mode:screen;animation:flick var(--d, 3s) infinite;animation-delay:var(--dl, 0s)}@keyframes flick{0%,to{opacity:.35}9%{opacity:1}14%{opacity:.45}32%{opacity:.95}54%{opacity:.3}71%{opacity:.9}86%{opacity:.55}}.title-banner{position:absolute;top:158px;left:50%;transform:translate(-50%);z-index:5;color:#fff3d6;font-size:19px;letter-spacing:3px;text-shadow:2px 2px 0 rgba(60,10,60,.75);white-space:nowrap}.title-banner .hrt{color:#ff5f7a}.piano{position:absolute;image-rendering:pixelated}.piano-back{height:320px;z-index:6}.pb-small{height:306px}.piano-front{height:288px;z-index:12}.p-bl{left:-10px;bottom:132px;transform:scaleX(-1)}.p-fl{left:40px;bottom:-12px}.p-br{right:-20px;bottom:132px;height:288px}.p-fr{right:10px;bottom:-12px;transform:scaleX(-1)}.pshadow{position:absolute;z-index:5;background:radial-gradient(ellipse at 50% 50%,#0f041680,#0f041600 70%)}.sh-bl{left:-36px;bottom:116px;width:270px;height:48px}.sh-fl{left:20px;bottom:-4px;width:300px;height:52px;z-index:11}.sh-br{right:-36px;bottom:116px;width:250px;height:48px}.sh-fr{right:-10px;bottom:-4px;width:300px;height:52px;z-index:11}.sh-al{left:50%;bottom:8px;width:260px;height:44px;transform:translate(-50%);z-index:19}.alena{position:absolute;z-index:20;height:332px;width:auto;image-rendering:pixelated;left:50%;bottom:16px;transform:translate(calc(-50% + var(--shift, 0px))) scaleX(var(--face, 1));filter:drop-shadow(0 8px 0 rgba(30,5,30,.35))}.alena.crouch{height:272px}.note{position:absolute;z-index:15;filter:drop-shadow(3px 0 0 #240826) drop-shadow(-3px 0 0 #240826) drop-shadow(0 3px 0 #240826) drop-shadow(0 -3px 0 #240826) drop-shadow(0 0 12px rgba(255,215,90,.9))}.note svg{display:block;shape-rendering:crispEdges}.shard{z-index:16}.shard svg{transform:rotate(var(--rot, 0deg));transform-origin:50% 50%}.spark{position:absolute;z-index:17;filter:drop-shadow(0 0 10px rgba(255,255,255,.9))}.spark svg{display:block;shape-rendering:crispEdges}.hud{position:absolute;top:10px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;z-index:30;color:#fff3d6;font-size:26px;text-shadow:2px 2px 0 rgba(60,10,60,.8)}.hud .score{line-height:1}.hud .miss{display:flex;gap:20px;align-items:center}.life svg{display:block;shape-rendering:crispEdges;fill:#c1251b}.life svg .hl{fill:#e8574a}.life{filter:drop-shadow(3px 0 0 #fff3d6) drop-shadow(-3px 0 0 #fff3d6) drop-shadow(0 3px 0 #fff3d6) drop-shadow(0 -3px 0 #fff3d6)}.life.off svg{fill:#171412}.life.off svg .hl{fill:#3a3430}.life.off{filter:drop-shadow(3px 0 0 #8f8a84) drop-shadow(-3px 0 0 #8f8a84) drop-shadow(0 3px 0 #8f8a84) drop-shadow(0 -3px 0 #8f8a84)}.overlay{position:absolute;z-index:35;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;padding:30px 44px;background:#100514d1;border:4px solid var(--plate);border-radius:8px;box-shadow:0 8px 30px #0009;display:none}.overlay.is-visible{display:block}.overlay__small{color:#fff3d6cc;font-size:12px;letter-spacing:2px;text-shadow:2px 2px 0 rgba(60,10,60,.8);margin-bottom:12px;white-space:nowrap}.overlay__small:empty{display:none}.overlay__scores{list-style:none;margin-top:22px;color:#fff3d6;font-size:14px;letter-spacing:1px;line-height:2.1;text-shadow:2px 2px 0 rgba(60,10,60,.8);text-align:left;white-space:pre}.overlay__scores:empty{display:none}.overlay__scores li:first-child{color:#ffd94d}.overlay__title{color:#fff3d6;font-size:30px;letter-spacing:3px;line-height:1.4;text-shadow:3px 3px 0 rgba(60,10,60,.8);white-space:nowrap}.overlay__sub{margin-top:20px;color:#ffd94d;font-size:18px;letter-spacing:2px;text-shadow:2px 2px 0 rgba(60,10,60,.8);animation:blink 1.1s steps(1) infinite;white-space:nowrap}.overlay__info{margin-top:18px;color:#fff3d6bf;font-size:12px;letter-spacing:2px;line-height:2;white-space:nowrap}.overlay__info:empty{display:none}.overlay__sub:empty{display:none}@keyframes blink{0%,to{opacity:1}50%{opacity:.15}}.name-entry{position:absolute;z-index:36;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;padding:28px 40px;background:#100514e0;border:4px solid var(--plate);border-radius:8px;box-shadow:0 8px 30px #0009;display:none}.name-entry.is-visible{display:block}.name-entry__label{color:#ffd94d;font-size:15px;letter-spacing:2px;text-shadow:2px 2px 0 rgba(60,10,60,.8);white-space:nowrap}.name-entry__form{margin-top:20px;display:flex;gap:12px;justify-content:center}.name-entry__input{width:240px;padding:10px 12px;background:#1d0a20;border:3px solid var(--plate);border-radius:4px;color:#fff3d6;font-family:inherit;font-size:16px;letter-spacing:3px;text-transform:uppercase;text-align:center;outline:none}.name-entry__button{padding:10px 18px;background:var(--btn-red);border:3px solid var(--plate);border-radius:4px;color:#fff3d6;font-size:14px;letter-spacing:1px}.name-entry__button:active{transform:translateY(2px)}button{font-family:inherit;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus{outline:none}button:focus-visible{outline:3px solid var(--plate);outline-offset:4px}.btn{position:absolute;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ff7a5f 0%,var(--btn-red) 40%,var(--btn-red-dark) 100%);box-shadow:inset 0 -6px 10px #0006,inset 0 4px 6px #ffffff59,0 10px #5d0c06,0 16px 22px #00000080}.btn:active,.btn.held{transform:translateY(6px);box-shadow:inset 0 -6px 10px #00000080,inset 0 4px 6px #ffffff38,0 4px #5d0c06,0 8px 12px #00000080}.btn-tl{left:52px;top:452px}.btn-bl{left:52px;top:636px}.btn-tr{right:52px;top:452px}.btn-br{right:52px;top:636px}.btn-label{position:absolute;color:#ffd9b0;font-size:15px;text-shadow:0 -1px 0 rgba(0,0,0,.6);letter-spacing:1px;width:108px;text-align:center;pointer-events:none}.lbl-tl{left:52px;top:420px}.lbl-bl{left:52px;top:770px}.lbl-tr{right:52px;top:420px}.lbl-br{right:52px;top:770px}.btn-start{position:absolute;right:74px;top:235px;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ff7a5f 0%,var(--btn-red) 40%,var(--btn-red-dark) 100%);box-shadow:inset 0 -4px 7px #0006,inset 0 3px 4px #ffffff59,0 7px #5d0c06,0 11px 16px #00000080}.btn-start:active{transform:translateY(4px);box-shadow:inset 0 -4px 7px #00000080,inset 0 3px 4px #ffffff38,0 3px #5d0c06,0 6px 9px #00000080}.lbl-start{position:absolute;right:30px;top:207px;width:152px;text-align:center;color:#ffd9b0;font-size:10px;text-shadow:0 -1px 0 rgba(0,0,0,.6);letter-spacing:1px;pointer-events:none}.btn-sound{position:absolute;left:74px;top:235px;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ff7a5f 0%,var(--btn-red) 40%,var(--btn-red-dark) 100%);box-shadow:inset 0 -4px 7px #0006,inset 0 3px 4px #ffffff59,0 7px #5d0c06,0 11px 16px #00000080}.btn-sound.off{transform:translateY(5px);background:radial-gradient(circle at 34% 28%,#d8503c 0%,var(--btn-red-dark) 45%,#4a0a05 100%);box-shadow:inset 0 -4px 7px #0000008c,inset 0 3px 4px #ffffff2e,0 2px #5d0c06,0 5px 9px #00000080}.btn-track{position:absolute;left:84px;top:328px;width:44px;height:22px;border-radius:11px;background:radial-gradient(circle at 34% 28%,#ff7a5f 0%,var(--btn-red) 40%,var(--btn-red-dark) 100%);box-shadow:inset 0 -2px 4px #0006,inset 0 2px 2px #ffffff59,0 4px #5d0c06,0 7px 10px #00000080}.btn-track:active{transform:translateY(3px);box-shadow:inset 0 -2px 4px #00000080,inset 0 2px 2px #ffffff38,0 1px #5d0c06,0 4px 6px #00000080}.lbl-sound{position:absolute;left:30px;top:207px;width:152px;text-align:center;color:#ffd9b0;font-size:10px;text-shadow:0 -1px 0 rgba(0,0,0,.6);letter-spacing:1px;pointer-events:none}.tri{position:absolute;width:0;height:0;border-style:solid;opacity:.9;pointer-events:none}.tri-l1{left:176px;top:492px;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #2b0d0a}.tri-l2{left:176px;top:676px;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #2b0d0a}.tri-r1{right:176px;top:492px;border-width:14px 22px 14px 0;border-color:transparent #2b0d0a transparent transparent}.tri-r2{right:176px;top:676px;border-width:14px 22px 14px 0;border-color:transparent #2b0d0a transparent transparent}.grill{position:absolute;top:74px;display:grid;grid-template-columns:repeat(6,10px);gap:8px}.grill-l{left:84px}.grill-r{right:84px}.grill i{width:10px;height:10px;border-radius:50%;background:#2b0d0a8c;box-shadow:inset 0 2px 2px #0009}.rotate-hint{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;width:100%;height:100dvh;background:radial-gradient(ellipse at 50% 35%,#33222b,#17101a 70%);color:#fff3d6;font-size:11px;letter-spacing:1px;flex-direction:column;gap:20px;align-items:center;justify-content:center;text-align:center;padding:0 16px;box-sizing:border-box}.rotate-hint__icon{width:55px;height:55px;filter:drop-shadow(0 0 10px rgba(255,217,77,.35));animation:rock 1.6s ease-in-out infinite}@keyframes rock{0%,to{transform:rotate(0)}50%{transform:rotate(80deg)}}@media (orientation: portrait) and (max-width: 760px){.rotate-hint{display:flex}}.page-footer{position:fixed;left:0;right:0;bottom:14px;text-align:center;z-index:5}.page-footer a{color:#f0e2bc8c;text-decoration:none;font-size:11px;letter-spacing:2px}.page-footer a:hover{color:#f0e2bce6}@media (max-height: 540px){.page-footer{display:none}}