.controller{flex-direction:column;align-items:center;padding:1rem;display:flex}.animation-wrapper{justify-content:center;width:100%;display:flex}.controller-controls{width:100%;max-width:640px;margin-top:.5rem}.controller-bar{align-items:center;gap:1rem;width:100%;display:flex}.controller-buttons{display:flex}.controller-buttons button{opacity:1;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;min-width:44px;min-height:44px;margin-left:5px;font-size:1.3rem;transition:opacity .5s;display:inline-flex}.controller-buttons button:focus{box-shadow:none;outline:none}.controller-buttons button:focus-visible{outline-offset:2px;outline:2px solid #fff}.controller-buttons button:hover{opacity:.5;transition:opacity .5s}.controller-track{cursor:pointer;background:#444;border-radius:4px;flex-grow:1;height:6px;position:relative;overflow:hidden}.progress{background:#00a6ed;height:100%;transition:width .1s linear}.controller-time{color:#ccc;text-align:right;min-width:80px;font-size:.8rem}
.canvas-wrapper{justify-content:center;width:100%;padding:1rem;display:flex}.animation-canvas{aspect-ratio:2;background:#000;border:2px solid #fff;width:100%;max-width:800px;display:block}
.credit{text-align:center;color:#fff;letter-spacing:.5px;opacity:.9;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px}.credit a{color:inherit;text-underline-offset:2px;text-decoration:underline}