:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:#1c110a;height:100%;margin:0;padding:0;font-family:system-ui,sans-serif;overflow:hidden}header{z-index:2;align-items:baseline;gap:.9rem;display:flex;position:fixed;inset:.75rem auto auto .75rem}header h1{letter-spacing:.04em;color:#eadcbe99;margin:0;font-size:.85rem;font-weight:500}header nav a{color:#eadcbe73;font-size:.8rem;text-decoration:none}header nav a:hover,header nav a:focus-visible{color:#eadcbee6}header nav a:focus-visible{outline-offset:2px;outline:1px solid #eadcbeb3}main{width:100vw;height:100dvh;position:relative}canvas[data-testid=instrument]{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.hint{z-index:2;text-align:right;pointer-events:none;flex-direction:column;align-items:flex-end;gap:.2rem;max-width:13rem;transition:opacity .8s;display:flex;position:fixed;inset:.75rem .75rem auto auto}.hint p{text-shadow:0 1px 5px #0000008c;margin:0}.hint p:not(.hint-title){color:#f0e6d27a;font-size:.72rem}.hint-title{letter-spacing:.03em;color:#f0e6d2e0;font-size:1rem;transition:font-size .8s,color .8s}body.played .hint-title{color:#f0e6d28c;font-size:.8rem}@media (width<=480px){header{gap:.6rem;inset:.5rem auto auto .5rem}header h1{font-size:.75rem}.hint{gap:.15rem;max-width:9.5rem;inset:.5rem .5rem auto auto}.hint-title{font-size:.85rem}body.played .hint-title{font-size:.72rem}.hint p:not(.hint-title){font-size:.62rem}}