html,body{background-color:#1e1f21;color:#fff}.container{justify-self:center;width:80%;margin-top:64px;min-height:200px;background:#2b2d30;border-radius:32px;padding:32px}.input-container{display:flex;justify-content:center;width:100%;gap:8px}.note-input{height:32px;width:96px;background-color:#1e1f21;border-radius:32px;border:none;color:#fff;text-align:center;font-size:24px}.list-item{background-color:#43454b;padding:16px;border-radius:16px;margin-top:32px}.name{font-size:28px;margin-bottom:16px}.keyboard{display:flex;position:relative;gap:2px}.key-white{width:48px;height:128px;background-color:#fff;border-radius:0 0 8px 8px;text-align:center;color:#000;position:relative;font-size:16px}.key-white:first-child{border-radius:16px 0 8px 8px}.key-white:last-child{border-radius:0 16px 8px 8px}.key-black{width:30px;height:86px;background-color:#000;border-radius:0 0 8px 8px;text-align:center;color:#fff;font-size:14px;border-color:#43454b;border-style:solid;border-width:0 2px 2px 2px;position:absolute;z-index:10}.key-black.key-active{background:linear-gradient(to top,#ff8000,#000 150%);font-weight:700;font-size:20px}.key-white.key-active{background:linear-gradient(to top,#ff8000,#fff 150%);font-weight:700;font-size:22px}.key-name{position:absolute;bottom:0;width:100%;text-align:center;padding-bottom:12px}