*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}html,body{width:100%;height:100%}#app{margin:0;padding:0;font-weight:400;width:100%;height:100%}.menu-item{padding:4px 8px;color:#fff}.menu-item.active{color:#ff0;background-color:gray}.dropdown{position:relative;width:140px;margin:0 auto}.toggle{cursor:pointer;padding:4px 10px;background-color:#fff;border:1px solid #ccc;display:flex;justify-content:space-between;align-items:center}.arrow{width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#000 transparent transparent transparent;transition:transform .3s;margin-left:8px}.arrow.up{transform:rotate(180deg)}.drop-menu{position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #ccc;list-style:none;padding:0;margin:0;width:100%;z-index:5;max-height:300px;overflow:auto}.drop-menu>li{padding:2px 8px}.drop-menu>li.highlight{color:#ff0;background-color:gray}.side-menu-box{color:#000}.hamburger{margin-left:8px;min-width:32px;min-height:32px;background-color:#efefef;display:flex;justify-content:center;align-items:center;position:relative}.bar,.bar:after,.bar:before{background:#222;content:"";display:block;height:1px;position:absolute;transition:background ease .15s,top ease .15s .15s,transform ease .15s;width:16px}.bar:after{top:6px}.bar:before{top:-6px}.dialog{position:fixed;right:0;top:0;width:40%;height:100%;background-color:#000000bf;z-index:5}.fade-enter-active,.fade-leave-active{transition:all .5s}.fade-enter-to,.fade-leave-from{transform:translate(0)}.fade-enter-from,.fade-leave-to{transform:translate(100%)}.flashing-grid-area{flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column}.flashing-grid{position:relative;width:100%;padding:.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.flashing-item{position:relative;height:100px;border:black solid 2px;background:radial-gradient(circle,#71515f 81%,#000)}.flashing{animation:flash 1s infinite}.ball{width:30px;height:30px;background-color:#a5f12b;border-radius:50%;position:absolute;left:50%;top:50%;transition:all 1s linear;display:flex;justify-content:center;align-items:center;transform:translate(-50%,-50%)}.example{padding:4px 0}.hint{color:red}@keyframes flash{0%,to{opacity:1}50%{opacity:.6}}.main-view{width:100%;height:100%;background-color:#d6d6d6;display:flex;flex-direction:column}.main-view .header{position:relative;background-color:#fff;display:flex;justify-content:flex-end;align-items:center}