@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap";*{font-family:IBM Plex Sans,sans-serif;box-sizing:border-box}.mono{font-family:IBM Plex Mono,monospace}body,html{padding:0;margin:0;width:100vw;height:100vh;background-color:#000;color:#fff}main.container{width:100%;height:100%;padding:2.5rem;display:grid;grid-template-columns:.625fr 1fr .625fr;gap:2.5rem}main.container>section{padding:2rem;border:4px solid #fff4;height:calc(100vh - 5rem)}main.container>section>section{display:flex;flex-direction:column;gap:1rem;padding:2rem;background-color:#ffffff0d}main.container>section>section>header{display:flex;flex-direction:column}main.container>section>section>header b{font-size:1.125rem;text-transform:uppercase}main.container>section>section>header span{opacity:.85}h1,h2,h3,p{padding:0;margin:0}select,textarea,input{font:inherit;background-color:transparent;color:#fff;border:2px solid #fff8;padding:.75rem;outline:none;resize:none;transition:border-color .25s}select{background-color:#111;padding:.5rem .75rem}select:hover,textarea:hover,input:hover{border-color:#fffa}select:focus,textarea:focus,input:focus{border-color:#fff}.controls,.playfield,.output{display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.playfield{overflow:hidden!important}.outputs{display:grid;grid-template-rows:1fr 1fr;gap:1rem;height:100%}#playfield{border:2px solid #fff4;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:1rem;width:100%;height:100%}#playfield .column{width:4rem;min-height:100%;background-color:#fff1;display:inline-block;position:relative}.hit-object{width:100%;height:24px;background-color:#fff6;border:2px solid #fff8;box-sizing:border-box;left:0;position:absolute}.hit-object>span{position:absolute;right:calc(100% + 1rem);top:0}