::-webkit-scrollbar{height:14px;width:14px}::-webkit-scrollbar-thumb{background:#e0e1e2;border-radius:0;-webkit-box-shadow:none}::-webkit-scrollbar-track{background:transparent;border-radius:0;-webkit-box-shadow:none}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background-color:#121212;color:#fff;font-family:Arial,sans-serif;justify-content:flex-start;min-height:100vh;padding:20px}.results-container,body{align-items:center;display:flex;flex-direction:column}.results-container{justify-content:center;margin-top:40px;max-width:600px;width:100%}.matched-chords-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;margin:0;padding:0;text-align:center;& li{&:first-child{display:block;margin-bottom:18px;width:100%;& span{color:#eee;font-size:3em;font-weight:700}}&:not(:first-child){display:inline-block;margin-bottom:12px;& span{background:hsla(0,0%,100%,.05);border:1px solid #444;border-radius:8px;color:#ddd;font-size:1.3em;font-weight:500;padding:6px 10px}}}}.keyboard{bottom:0;box-shadow:0 -2px 10px rgba(0,0,0,.5);left:0;margin:auto;overflow-x:auto;position:fixed;white-space:nowrap;width:100%;& .key{border:1px solid #ddd;border-top:none;display:inline-block;height:180px;margin-left:-1px;text-align:center;vertical-align:top;white-space:normal;&.white{background-color:#fefefe;width:50px}&.black{background-color:#222;color:#fff;height:95px;margin:0 -18px;position:relative;width:36px}&.active{background:#ff5722!important}}}