body{margin:0;font-family:monospace;font-size:14px}main{width:100%;max-width:900px;margin:0 auto;box-sizing:border-box;padding:40px}h1{margin-bottom:10px;font-size:2em}form{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px;position:relative}form button{flex-grow:1}form div{min-width:240px;display:flex;align-items:flex-start;gap:10px;flex-grow:1;flex-shrink:1;flex-basis:50%}main>div:not(:last-child){margin-bottom:10px}pre,pre:before,button,button:before,input,.player{border-radius:10px}pre,button,input{position:relative}pre:before,button:before{content:"";background-color:#e9e9e9;position:absolute;width:100%;height:100%;opacity:.7;top:0;left:0;pointer-events:none;z-index:-1;transition:opacity .3s,transform .3s}button,input{background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;padding:15px 20px;outline:none;-webkit-user-select:none;user-select:none}button{min-width:110px;cursor:pointer}input{background-color:#e9e9e9b3;flex-grow:1;flex-shrink:1;color:#00f}button:not([disabled]):active:before{opacity:1;transform:scale(.95);transition:opacity .2s,transform ease-out .1s}button[disabled]{pointer-events:none}.player{position:relative;margin:0;display:block!important}.player.v-enter-from,.player.v-leave-to{opacity:0}.player.v-enter-active,.player.v-leave-active{transition:opacity .2s}.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px;margin-top:10px;position:relative}.controls button{flex-grow:1}pre{padding:25px;margin:10px 0 0;overflow:hidden}a{color:#00f}@media (hover: hover){button:not([disabled]):active:before{opacity:1;transform:scale(1.01);transition:opacity .2s,transform ease-out .1s}button:not([disabled]):not(:active):hover:before{opacity:1;transform:scale(1.05);transition:opacity .3s,transform ease-out .15s}}