.toolbar{font-weight:800;display:flex;align-items:center;justify-content:center;width:100%}.form_element{background:rgba(0,0,0,0);border:1px solid var(--color-dark-grey);margin-left:calc(var(--spacer)/2);height:var(--form-element-height);box-sizing:border-box;font-weight:800;font-size:.9rem;text-align:center;color:var(--color-fg)}.button_play_pause,.button_stop{width:var(--button-pause-play-width);padding:0;cursor:pointer}.button_icon_path{fill:var(--color-fg)}.input_bpm{width:var(--input-bpm-width);font-size:16px;background-color:#131512;padding:8px}.input_bpm:focus{outline:2px solid #f6c601}.label_bpm{margin-left:calc(var(--spacer)/2);margin-right:var(--spacer)}.right-buttons{display:flex;gap:8px;margin-left:auto}.right-buttons button{padding:8px;border:0;cursor:pointer;background-color:#131512;font-family:Martian Mono,monospace;font-size:16px}.right-buttons button:focus:not(:disabled),.right-buttons button:hover:not(:disabled){color:#f6c601}.right-buttons button:disabled{cursor:default;opacity:.8}@media screen and (max-width:1100px){.right-buttons button{font-weight:700;text-transform:uppercase;font-size:10px}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1;background-color:rgba(0,0,0,.75)}.modal .inner{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;background-color:#131512;border:2px solid #dfe1dc;max-width:80vw}.modal .inner .error{font-size:14px;color:#e00910;text-align:center}.modal .inner .close{all:unset;position:absolute;top:0;right:0;margin:16px;cursor:pointer}.modal .inner .close img{max-width:24px;height:auto}.modal .inner .close:focus,.modal .inner .close:hover{transform:scale(1.2)}.modal .inner .header{font-weight:700;text-transform:uppercase;font-size:18px;color:#f6c601}.modal .inner .instructions{font-size:16px;font-weight:200;text-align:center}.modal .inner textarea{resize:none}.modal .inner button{all:unset;cursor:pointer;color:#e00910;font-family:Martian Mono,monospace;font-weight:400;background-color:#e00910;color:#fff;padding:8px 32px;border:1px double #e00910;text-shadow:2px 3px #000;font-size:14px;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-transform:uppercase;margin:auto;width:calc(100% - 64px);overflow:hidden}.modal .inner button:active,.modal .inner button:focus,.modal .inner button:hover{text-decoration:underline;text-underline-offset:4px}.note{flex:0 0 var(--note-width);width:var(--note-width);height:var(--note-height);border:1px solid #000;box-sizing:border-box;margin:var(--note-margin-vert) var(--note-margin-horz);cursor:pointer}.note:nth-child(n+5){background-color:rgba(19,21,18,.25)}.note:nth-child(n+9){background-color:rgba(0,0,0,0)}.note:nth-child(n+13){background-color:rgba(19,21,18,.25)}.note.on{background-color:#131512}.note.playing,.note.playing.red{background-color:#e00910}.note.playing.yellow{background-color:#f6c601}.note.playing.green{background-color:#6c9664}.note.playing.blue{background-color:#4178b0}.note.playing.purple{background-color:#3e5fa4}.note.playing.white{background-color:#fff}.track{display:flex;flex-direction:row}.track .track_title{display:flex;flex:0 0 auto;justify-content:flex-end;align-items:center;text-transform:uppercase;font-weight:900;font-size:1.1rem;padding:var(--spacer);width:var(--track-title-width);text-shadow:2px 2px 0 #000}.track.red{color:#e00910}.track.yellow{color:#f6c601}.track.green{color:#6c9664}.track.blue{color:#4178b0}.track.purple{color:#3e5fa4}.track .track_notes{display:flex}.play-head{position:absolute;top:var(--note-margin-vert);left:calc(var(--track-title-width) + var(--spacer)*2);height:var(--play-head-height);width:var(--play-head-width);background-color:#f6c601}:root{--app-max-width:0;--app-visibility:hidden}html{font-size:var(--base-font-size);color:var(--color-fg)}.sampler{width:var(--app-max-width);background-color:#2c302a;visibility:var(--app-visibility);padding:20px;z-index:1}.header{display:flex;align-items:center;justify-content:center}.content{display:flex;flex-direction:column;margin-top:var(--spacer);margin-bottom:var(--spacer);position:relative;transform:translateZ(0)}.sampler-face{position:relative;width:395px;max-width:60vw;max-height:-webkit-fill-available;z-index:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;margin:40px}@media screen and (max-width:1100px){.sampler-face{position:fixed;z-index:1;top:0;left:0;width:100vw;height:100vh;margin:0;mix-blend-mode:color-dodge;opacity:.5}.sampler-face.hide{opacity:0}}.sampler-face .red{position:fixed;top:0;left:0;content:" ";width:100%;height:100%;background-color:#e00910;opacity:0;pointer-events:none;transition:opacity .5s ease}.sampler-face .red.show{opacity:.5}.sampler-face .white{position:fixed;top:0;left:0;content:" ";width:100%;height:100%;background-color:#fff;opacity:0;pointer-events:none;transition:opacity .5s ease}.sampler-face .white.show{opacity:.5}.sampler-face .yellow{position:fixed;top:0;left:0;content:" ";width:100%;height:100%;background-color:#f6c601;opacity:0;pointer-events:none;transition:opacity .5s ease}.sampler-face .yellow.show{opacity:.5}.sampler-face img{position:absolute;width:100%;height:auto;pointer-events:none}@media screen and (max-width:1100px){.sampler-face img{width:100vw;height:100vh;object-fit:contain}}.sampler-face img.normal{opacity:0}.sampler-face img.normal.show{opacity:1}.sampler-face img.s-face{opacity:0}.sampler-face img.s-face.show{opacity:1}@font-face{font-family:SF Fedora;src:url(https://w-img.b-cdn.net/lil-darkie/fonts/sf-fedora.ttf) format("truetype")}@font-face{font-family:SF Fedora Titles Italic;src:url(https://w-img.b-cdn.net/lil-darkie/fonts/sf-fedora-titles-italic.ttf) format("truetype")}@font-face{font-family:Simple Letter;src:url(https://w-img.b-cdn.net/lil-darkie/fonts/leo.ttf) format("truetype")}.sampler-page{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:120px;overflow:hidden}.sampler-page .body{display:flex;align-items:flex-start;gap:32px;background-color:#131512;padding:32px}@media screen and (max-width:1100px){.sampler-page .body{padding:0}}.sampler-page .copyright{position:fixed;bottom:8px;left:0;width:100vw;text-align:center;color:#fff;font-size:10px;font-weight:200}.camo{position:fixed;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:-1;opacity:.25}