.ripple{cursor:pointer;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}.ripple:after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255,255,255,0.5);opacity:0;border-radius:100%;transform:scale(1, 1) translate(-50%);transform-origin:50% 50%}.ripple.inverse:after{background:rgba(105,0,0,0.5)}@keyframes ripple{0%{transform:scale(0, 0);opacity:1}20%{transform:scale(25, 25);opacity:1}100%{opacity:0;transform:scale(40, 40)}}.ripple:focus:not(:active)::after{animation:ripple .7s ease-out}html,body{margin:0;padding:0;box-sizing:border-box;height:100%}body{display:grid;grid-template-rows:1fr 52px 1fr;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif}#content{display:flex;flex-direction:column;flex:3;justify-content:center}#content input#password{outline:none;border:none;text-align:center;font-size:20px;background:transparent;padding:50px 0}.copy{text-align:center}.copy #copy{padding:10px;display:inline-block;border-radius:50%}.copy #copy:focus{outline:none}.copy #copy svg{height:32px}#controls{min-width:0;display:flex;flex:2;background-color:#690000;flex-direction:column}#snowflake{width:140px;height:140px;animation:spin 10s linear infinite;position:relative;left:calc(50% - 70px);z-index:-1}@keyframes spin{100%{transform:rotate(360deg)}}.row{display:flex;flex:1;max-width:800px;margin:0 auto;width:100%;justify-content:space-evenly}.tgl{user-select:none;display:flex;flex:1;justify-content:center}.tgl input{display:none}.tgl input:checked+label{color:#fff}.tgl label{color:#777;display:flex;flex:1;justify-content:center;flex-direction:column;text-align:center}.tgl label:focus{outline:none}#band{overflow:hidden;padding:10px 0;background-color:#fff}#band #lengths{white-space:nowrap;position:relative;transition:left 0.5s ease-in-out 0s, top 0.5s ease-in-out 0s}#band #lengths span{color:#777;display:inline-flex;width:32px;height:32px;box-sizing:border-box;border-radius:50%;justify-content:center;align-items:center;margin:0 7vw;user-select:none}#band #lengths span.selected{color:#690000;border:1px solid #690000}#band #lengths span:focus{outline:none}@media (max-height: 600px){body{grid-template-rows:none;grid-template-columns:1fr 52px 1fr}#content input#password{padding:30px 0}#band{padding:0 10px}#band #lengths{white-space:normal}#band #lengths span{margin:7vh 0}}