:root{--topbar-h:3.25rem;--ink:#05040e;--glow-cool:190 100% 72%;--glow-warm:272 90% 74%;--text:#e9e6ff;--text-dim:#9d97c4;--edge:#9e94d62e}*,:before,:after{box-sizing:border-box}body{background:radial-gradient(60rem 40rem at 20% 0%, #40248473, transparent 70%), radial-gradient(52rem 34rem at 84% 12%, #104a7a6b, transparent 72%), radial-gradient(70rem 44rem at 50% 118%, #26185c99, transparent 70%), var(--ink);color:var(--text);min-height:100svh;margin:0;font-family:Avenir Next,Avenir,Segoe UI,sans-serif;line-height:1.6}kbd{border:1px solid var(--edge);white-space:nowrap;background:#ffffff12;border-radius:.3em;padding:.05em .36em;font-family:inherit;font-size:.86em}a{color:hsl(var(--glow-cool) / 90%)}.topbar{height:var(--topbar-h);justify-content:space-between;align-items:center;padding:0 clamp(.9rem,3vw,2.25rem);display:flex}.topbar h1{color:var(--text-dim);letter-spacing:.34em;text-transform:uppercase;margin:0;font-size:.82rem;font-weight:600}.topbar nav{z-index:5;align-items:center;gap:clamp(.8rem,2vw,1.5rem);display:flex;position:relative}.topbar a,.repertoire summary{color:var(--text-dim);cursor:pointer;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;text-decoration:none;list-style:none}.topbar a:hover,.topbar a:focus-visible,.repertoire summary:hover,.repertoire summary:focus-visible,.repertoire[open] summary{color:var(--text)}.repertoire summary::-webkit-details-marker{display:none}.repertoire summary:focus-visible{outline:2px solid hsl(var(--glow-cool) / 90%);outline-offset:.35rem;border-radius:.2rem}.repertoire-menu{z-index:8;background:radial-gradient(circle at 82% 8%, hsl(var(--glow-cool) / 13%), transparent 42%), #0b081ceb;backdrop-filter:blur(22px)saturate(130%);border:1px solid #c2b8ff29;border-radius:.35rem .35rem 1.1rem 1.1rem;width:min(20rem,100vw - 1.5rem);padding:1.1rem;position:absolute;top:calc(100% + 1rem);right:0;box-shadow:inset 0 1px #ffffff14,0 1.4rem 4rem #02010cb3}.repertoire-kicker,.repertoire-title{margin:0}.repertoire-kicker{color:hsl(var(--glow-cool) / 72%);letter-spacing:.2em;text-transform:uppercase;font-size:.65rem;font-weight:600}.repertoire-title{color:var(--text);letter-spacing:-.025em;padding:.12rem 0 .8rem;font-family:Georgia,Times New Roman,serif;font-size:1.35rem}.repertoire-list{gap:.15rem;display:grid}.song-choice{width:100%;color:var(--text);cursor:pointer;font:inherit;text-align:left;background:0 0;border:0;border-radius:.45rem;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem .65rem;transition:background .18s,transform .18s;display:flex}.song-choice small{color:var(--text-dim);white-space:nowrap;font-size:.67rem}.song-choice:hover{background:#ffffff0f;transform:translate(.15rem)}.song-choice:active{transform:translate(.15rem)scale(.985)}.song-choice:focus-visible{outline:2px solid hsl(var(--glow-cool) / 90%);outline-offset:-2px}.instrument{min-height:calc(100svh - var(--topbar-h));flex-direction:column;padding:0 clamp(.6rem,2.5vw,2.25rem) clamp(1rem,3vh,2.5rem);display:flex}.invitation{color:var(--text);letter-spacing:.01em;text-align:center;text-wrap:balance;margin:0 auto;padding:clamp(.5rem,2vh,1.5rem) 0;font-size:clamp(1.15rem,2.6vw,1.6rem);transition:opacity .9s}.invitation-hint{color:var(--text-dim);letter-spacing:.02em;text-wrap:balance;font-size:.62em;display:block}body[data-played=true] .invitation{opacity:.38}.console{flex-direction:column;flex:auto;width:min(100%,62rem);margin:0 auto;display:flex}.stage{flex:auto;min-height:6rem;position:relative}.performance-state{z-index:2;min-height:1.5rem;color:var(--text-dim);letter-spacing:.03em;opacity:.42;pointer-events:none;justify-content:center;align-items:center;gap:.45rem;font-family:Georgia,Times New Roman,serif;font-size:.78rem;font-style:italic;transition:color .3s,opacity .3s;display:flex;position:absolute;top:clamp(.3rem,1.5vh,.9rem);left:0;right:0}.performance-state[data-active=true]{color:var(--text);opacity:.92}.performance-orb{background:hsl(var(--glow-cool) / 82%);width:.32rem;height:.32rem;box-shadow:0 0 .8rem hsl(var(--glow-cool) / 80%);opacity:.5;border-radius:50%}.performance-state[data-active=true] .performance-orb{animation:1.8s ease-in-out infinite performance-breathe}@keyframes performance-breathe{0%,to{opacity:.42;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}.performance-state button{border:0;border-bottom:1px solid hsl(var(--glow-cool) / 45%);color:hsl(var(--glow-cool) / 86%);cursor:pointer;font:inherit;letter-spacing:.12em;pointer-events:auto;text-transform:uppercase;background:0 0;padding:.15rem .3rem;font-family:Avenir Next,Avenir,Segoe UI,sans-serif;font-size:.64rem;font-style:normal}.performance-state button:disabled{display:none}.performance-state button:focus-visible{outline:2px solid hsl(var(--glow-cool) / 90%);outline-offset:.2rem;border-radius:.2rem}.lights{pointer-events:none;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.readout{width:100%;min-height:1.4rem;color:hsl(var(--glow-cool) / 80%);letter-spacing:.32em;opacity:.22;text-align:center;text-indent:.32em;text-transform:uppercase;margin:0;font-size:.78rem;line-height:1.4rem;transition:opacity .6s;position:absolute;bottom:.35rem;left:0}.readout[data-lit=true]{opacity:.85}.piano{touch-action:none;flex:none;height:clamp(9rem,25vh,14.5rem);display:flex;position:relative}.piano-row{--black-w:calc(100% / var(--white-count) * .54);flex:var(--white-count) 1 0;height:100%;box-shadow:0 -.4rem 2.5rem hsl(var(--glow-warm) / 12%), 0 1.5rem 4rem #03020cb3;border-radius:.1rem .1rem .7rem .7rem;display:flex;position:relative}.piano-row:before{content:"";background:linear-gradient(#603caa8c,#140c30e6);border-radius:.3rem .3rem 0 0;height:.4rem;position:absolute;bottom:100%;left:0;right:0}body:not([data-played]) .piano-row:before{animation:3.6s ease-in-out infinite waiting}@keyframes waiting{0%,to{box-shadow:0 0 #0000}50%{box-shadow:0 -.45rem 2.4rem hsl(var(--glow-cool) / 30%)}}.key{appearance:none;cursor:pointer;font:inherit;touch-action:none;user-select:none;border:0;flex-direction:column;justify-content:flex-end;align-items:center;margin:0;padding:0 0 .5rem;transition:filter .14s,transform .1s,box-shadow .18s;display:flex;position:relative}.key:focus-visible{outline:2px solid hsl(var(--glow-cool) / 95%);outline-offset:-4px}.key-letter{letter-spacing:.08em;font-size:clamp(.62rem,1.4vw,.78rem);font-weight:600}.key-name{letter-spacing:.04em;opacity:.5;text-align:center;font-size:clamp(.48rem,1.1vw,.6rem);font-weight:500;position:absolute;bottom:.2rem;left:0;right:0}.key[data-kind=white]{color:#574d82;background:linear-gradient(#fbf9ff 0%,#e6e0fa 56%,#c6bde3 100%);border-right:1px solid #18123066;border-radius:0 0 .45rem .45rem;flex:1 1 0;min-width:0;padding-bottom:1.4rem}.piano-row:last-child .key[data-kind=white]:last-child{border-right:0}.key[data-kind=black]{z-index:2;width:var(--black-w);color:#b6abe8;height:62%;top:0;left:calc(var(--slot) * 100% / var(--white-count) - var(--black-w) / 2);background:linear-gradient(#2b2554 0%,#131034 62%,#06040f 100%);border-radius:0 0 .32rem .32rem;padding-bottom:.4rem;position:absolute;box-shadow:0 .35rem .7rem #020108bf}@media (hover:hover){.key[data-kind=white]:hover{background:linear-gradient(#fff 0%,#ece7ff 56%,#cfc7ea 100%)}.key[data-kind=black]:hover{background:linear-gradient(#3b3272 0%,#1b1645 62%,#0a0718 100%)}}.key[data-down=true]{filter:brightness(122%);transform:translateY(.12rem)}.key[data-kind=white][data-down=true]{box-shadow:0 0 1.6rem hsl(var(--glow-cool) / 55%), inset 0 0 1.2rem #ffffffd9;background:linear-gradient(#fff 0%,#dcecff 55%,#a9c6f2 100%)}.key[data-kind=black][data-down=true]{box-shadow:0 0 1.4rem hsl(var(--glow-warm) / 60%);background:linear-gradient(#6b52c8 0%,#2f2470 60%,#150e34 100%)}.controls{flex-wrap:wrap;flex:none;justify-content:center;align-items:center;gap:.4rem;padding-top:clamp(.7rem,2vh,1.2rem);display:flex}.pill{border:1px solid var(--edge);color:var(--text-dim);cursor:pointer;font:inherit;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;background:#ffffff0a;border-radius:999px;margin:0;padding:.34rem .85rem;font-size:.76rem;transition:border-color .18s,background .18s,color .18s,transform .12s}.pill:hover{color:var(--text)}.pill:focus-visible{outline:2px solid hsl(var(--glow-cool) / 95%);outline-offset:2px}.pill:active:not(.pill-reading){transform:translateY(1px)scale(.98)}.pill-reading{cursor:default;background:0 0;border-color:#0000}.pill-toggle[aria-pressed=true]{border-color:hsl(var(--glow-cool) / 60%);background:hsl(var(--glow-cool) / 16%);color:var(--text)}.about{width:min(100%,42rem);color:var(--text-dim);margin:0 auto;padding:clamp(2.5rem,8vh,6rem) clamp(1rem,4vw,2rem) 4rem}.about h2{color:var(--text);letter-spacing:.18em;text-transform:uppercase;font-size:1.05rem;font-weight:600}.about ul{padding-left:1.1rem}.about li{margin-bottom:.5rem}.about strong{color:var(--text)}@media (width<=46rem){.piano{flex-direction:column;gap:.4rem;height:clamp(11rem,34vh,17rem)}.piano-row{flex:1 1 0}}@media (width<=30rem){.topbar h1{letter-spacing:.28em;font-size:.72rem}.topbar a,.repertoire summary{letter-spacing:.1em;font-size:.7rem}.repertoire-menu{top:calc(100% + .8rem)}.performance-state{font-size:.72rem;top:.2rem}.readout{letter-spacing:.18em}.key[data-kind=white]{padding-bottom:1.15rem}.key-letter{font-size:.68rem}.pill{letter-spacing:.06em;padding:.3rem .5rem;font-size:.66rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}