:root{--surface: #0a0a0a;--primary: #ffffff;--secondary: #b3b3b3;--tertiary: #969696;--stroke: #555555;font-family:Rethink Sans,serif;font-optical-sizing:auto;font-weight:400;font-style:normal;color:var(--primary);background-color:var(--surface);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{overflow-x:hidden;display:flex;flex-direction:column;align-items:start;justify-content:start;width:100%;min-height:100vh;padding:1rem;gap:1rem;max-width:50rem;margin:0 auto}p{margin:0;color:var(--secondary)}a{color:inherit}a:hover,a:focus{color:var(--primary)}header{padding-top:3rem}header h1{font-weight:700;line-height:1;font-size:2.25rem;margin:0;padding-bottom:.5rem}.canvas-container{display:flex;flex-direction:column;flex-wrap:wrap;gap:.5rem;width:100%}.canvas-container p{font-size:.875rem;color:var(--tertiary)}.canvas-container .canvas{position:relative;overflow:hidden;border:1px solid var(--stroke);display:flex;width:max-content}.canvas-container .canvas:before{content:"Acceleration ➤";display:block;position:absolute;top:3rem;left:.5rem;font-size:.75rem;rotate:-90deg;translate:-50% 0;color:var(--secondary);z-index:1;pointer-events:none}.canvas-container .canvas:after{content:"Time ➤";display:block;position:absolute;bottom:0rem;right:1rem;font-size:.75rem;translate:0 -20%;color:var(--secondary);z-index:1;pointer-events:none}.canvas-container summary{color:var(--secondary);padding-bottom:.5rem;cursor:pointer}.output{border:1px solid var(--stroke);padding:1rem;display:flex;width:100%;justify-content:space-between;align-items:center;border-radius:.5rem;font-size:.875rem;color:var(--tertiary);gap:1rem}.output code{font-size:.875rem}.output button{border:1px solid var(--stroke);border-radius:.5rem;padding:5px 8px;background-color:var(--surface);color:var(--secondary);cursor:pointer}.output button:hover,.output button:focus{background-color:var(--stroke);color:var(--primary)}.preview{display:flex;flex-direction:column;gap:1rem;width:100%}.preview h2{margin:0rem}.box{width:50px;height:50px;background-color:red;animation:slide 2s infinite}@keyframes slide{0%{transform:translate(0)}to{transform:translate(280px)}}@media screen and (min-width: 960px){header h1{font-size:3rem}.box{width:80px;height:80px}@keyframes slide{0%{transform:translate(0)}to{transform:translate(500px)}}}