:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body{height:100%}body{color:#f1ecff;box-sizing:border-box;background:linear-gradient(160deg,#2b2154 0%,#150f2a 55%,#0a0814 100%);min-height:100vh;margin:0;padding:2rem 1.25rem 3rem;font-family:system-ui,sans-serif;line-height:1.6}main{text-align:center;max-width:40rem;margin:0 auto}header nav a{color:#cabbff}h1{letter-spacing:.04em;margin-bottom:.25rem;font-size:2rem}.invite{color:#cabbff;max-width:32rem;margin:0 auto 2rem}.invite kbd{background:#ffffff14;border:1px solid #ffffff2e;border-radius:.3em;min-width:1.4em;padding:.05em .35em;font-size:.85em;display:inline-block}.surface{touch-action:none;-webkit-user-select:none;user-select:none;grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.75rem;display:grid}.pad{aspect-ratio:1;color:#0a0814bf;background:hsl(calc(202 + (var(--i) * 8)), 70%, 68%);cursor:pointer;border:none;border-radius:1rem;font-size:1.1rem;font-weight:600;transition:transform .12s,box-shadow .12s,filter .12s;box-shadow:0 .35rem .9rem #00000059}.pad:first-child{animation:2.2s ease-in-out infinite invite-pulse}body.played .pad{animation:none}.pad.active{filter:brightness(1.25);transform:scale(.92);box-shadow:0 .15rem .4rem #00000059}.pad:focus-visible{outline-offset:2px;outline:3px solid #fff}.hint{color:#f1ecffa6;margin-top:2rem;font-size:.9rem}@keyframes invite-pulse{0%,to{box-shadow:0 .35rem .9rem #00000059}50%{box-shadow:0 .35rem .9rem #00000059,0 0 0 .6rem #ffffff1f}}