@keyframes rotating{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes blink{0%{opacity:.5}100%{opacity:1}}.animation--blink{animation:blink 800ms steps(2) infinite;}*,*::before,*::after{box-sizing:border-box;}html,body{min-height:100vh;margin:0;background:#ffb011;}html{font-family:'Lab Mono Web',monospace;font-size:100%;color:#001714;letter-spacing:.1em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}body::after{content:' ';position:fixed;left:50%;top:50%;z-index:1200;display:block;width:6rem;height:6rem;margin:-5.5rem 0 0 -3rem;border:1px solid #001714;border-radius:50%;opacity:0;pointer-events:none;transition-duration:800ms;transition-property:opacity,filter;transition-timing-function:ease;}.visible--intro body::after{opacity:1;}.resizing body::after{border-style:dashed;opacity:1;animation:rotating 3s infinite linear;transition-duration:750ms;}a{color:inherit;text-decoration:none;}p>a{border-bottom:1px solid currentColor;}p>a:hover{animation:blink 800ms steps(2) infinite;}h1,h2,h3,h4{font-size:.875rem;font-weight:400;text-transform:uppercase;text-align:center;line-height:2;}h4>span{border-bottom:1px solid currentColor;}.button{padding:.35rem .6rem .2em .7em;color:inherit;line-height:1;background:rgba(255,255,255,.01);border:1px solid currentColor;border-radius:3px}.button:hover{animation:blink 800ms steps(2) infinite;}.key{display:inline-block;padding:.35em .5em .2em .5em;font-size:.875em;line-height:1;color:inherit;letter-spacing:0;background:rgba(255,255,255,.01);border:1px solid currentColor;border-radius:3px;}@media screen and (orientation:portrait) and (max-width:460px){.button:hover{animation:none}}h1{position:fixed;left:0;top:0;display:block;margin:1rem 1.1rem;font-family:inherit;font-size:.875rem;font-weight:400;line-height:1}.timeline-wrapper{position:absolute;left:50%;top:50%;z-index:0;width:70vh;height:70vh;margin:calc(-35vh - 2.5rem) 0 0 -35vh;overflow:hidden;transition:opacity 750ms ease;}.resizing .timeline-wrapper{opacity:0;transition-duration:800ms;}.timeline-wrapper>svg{display:block;transform-origin:0 0;}#placeholder{display:none;}@media screen and (orientation:portrait){.timeline-wrapper{width:80vw;height:80vw;margin:calc(-40vw - 2.5rem) 0 0 -40vw}}@media screen and (orientation:portrait) and (max-width:460px){.timeline-wrapper{margin-top:calc(-40vw - 6rem)}}@media screen and (max-height:480px){.timeline-wrapper{margin-top:calc(-40vw - 5rem)}}.ui--controls{position:fixed;left:0;right:0;bottom:0;padding:.5rem .5rem;font-size:.875rem;line-height:1;transition:all 800ms ease;transform:translateY(100%);}.visible--ui-controls .ui--controls{transform:translateY(0);}.ui-toggle--controls{position:absolute;right:0;top:0;display:block;margin:-2.25em 1rem 0 0;text-transform:uppercase;color:inherit}.ui-toggle--controls::before{content:' ';position:relative;top:.1em;display:inline-block;width:.85714286em;height:.85714286em;margin:0 .25em 0 0;border:1px solid currentColor;border-radius:50%;}.ui-toggle--controls:hover{animation:blink 800ms steps(2) infinite;}.visible--ui-controls .ui-toggle--controls{opacity:1;}.visible--ui-controls .ui-toggle--controls::before{background:#001714;}.button-row{display:flex;}.control-button{padding:.35rem .6rem .2em .7em;color:inherit;line-height:1;background:rgba(255,255,255,.01);border:1px solid currentColor;border-radius:3px;flex-grow:1;height:4rem;margin:.5rem;padding:.65rem .7rem;}.control-button:hover{animation:blink 800ms steps(2) infinite;}.control-button--narrow{flex-grow:0;flex-shrink:0;width:4rem;}.control-button--no-feedback:active,.control-button--no-feedback.active{background:#001714;}.control-button--no-feedback.active{color:#ffb011;}@media screen and (max-width:764px){.control-button--narrow{width:auto}}@media screen and (max-width:656px){.control-button{flex-shrink:1;flex-grow:1}.control-button--narrow{flex-shrink:1;flex-grow:1}}@media screen and (max-width:460px){.button-row{flex-wrap:wrap}.control-button{min-width:calc(20vw - 1.5rem)}.control-button--narrow{min-width:calc(20vw - 1.5rem)}}@media screen and (max-height:480px){.control-button{height:3rem}}.ui-toggle--share{position:fixed;left:0;bottom:0;display:block;margin:0 0 1rem 1rem;font-size:.875rem;line-height:1;text-transform:uppercase;color:inherit;transition:all 800ms ease;}.ui-toggle--share:hover{animation:blink 800ms steps(2) infinite;}.visible--ui-controls .ui-toggle--share{transform:translateY(-6rem);}.visible--ui-share .ui-modal--share{height:100%;opacity:1;transition-duration:250ms,100ms;transition-delay:0ms,0ms;}.ui-modal--share .ui-modal-content{width:32rem;}.share-url{padding:.35rem .6rem .2em .7em;color:inherit;line-height:1;background:rgba(255,255,255,.01);border:1px solid currentColor;border-radius:3px;position:relative;height:1.7rem;margin:2rem 0;padding:0 4rem 0 0;}.share-url:hover{animation:blink 800ms steps(2) infinite;}.share-url::after{content:' ';position:absolute;right:0;top:0;bottom:0;display:block;width:2rem;margin-right:4rem;margin-bottom:1px;background:linear-gradient(90deg,rgba(255,176,17,0) 0%,#ffb011 90%);}.share-url:hover,.share-url:focus{background:transparent!important;animation:none!important;}.share-url-input{-moz-appearance:none;-webkit-appearance:none;appearance:none;box-sizing:border-box;display:block;width:100%;padding:.35rem 0 .5rem .35rem;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;background:transparent;border:none;outline:none;box-shadow:none!important;}.share-url-button{padding:.35rem .6rem .2em .7em;color:inherit;line-height:1;background:rgba(255,255,255,.01);border:1px solid currentColor;border-radius:3px;position:absolute;right:0;top:0;width:4rem;padding-top:.45em;padding-bottom:.35em;text-align:center;border:none;border-left:1px solid currentColor;border-radius:0;}.share-url-button:hover{animation:blink 800ms steps(2) infinite;}@media screen and (max-width:460px){.visible--ui-controls .ui-toggle--share{transform:translateY(-11rem)}}@media screen and (max-height:480px){.visible--ui-controls .ui-toggle--share{transform:translateY(-9rem)}}.ui-toggle--info{position:fixed;right:0;top:0;display:block;margin:1rem 1rem 0 0;font-size:.875rem;line-height:1;text-transform:uppercase;color:inherit}.ui-toggle--info:hover{animation:blink 800ms steps(2) infinite;}.visible--ui-info .ui-modal--info{height:100%;opacity:1;transition-duration:250ms,100ms;transition-delay:0ms,0ms;}.ui-indicator-recorder{position:absolute;left:50%;top:50%;z-index:800;display:block;width:2rem;height:2rem;margin:-1rem 0 0 -1rem;opacity:0;transform:scale(0);transition-property:opacity,transform;transition-duration:250ms;transition-timing-function:ease-in-out;}.ui-indicator-recorder::before,.ui-indicator-recorder::after{content:' ';position:absolute;left:0;right:0;top:0;bottom:0;z-index:800;display:block;margin:0;border-radius:50%;transition-duration:250ms;transition-timing-function:ease-in-out;}.ui-indicator-recorder::before{margin:-6px;border-style:solid;border-width:1.5px;transition-property:background,border;animation:processing infinite 1800ms linear;}.ui-indicator-recorder::after{background-color:#ff0000;transition-property:opacity,transform;opacity:0;transform:scale(0);}.ui-indicator-recorder.visible{opacity:1;transform:scale(1);}.ui-indicator-recorder.visible--recording::before{border-color:#ff0000 transparent transparent transparent;}.ui-indicator-recorder.visible--recording::after{opacity:1;transform:scale(1);}.ui-indicator-recorder.visible--processing::before{border-color:#ff0000 #001714 #001714 #001714;}.ui-indicator-recorder.visible--processing::after{opacity:0;}@keyframes recording{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}@keyframes processing{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.ui-modal{position:fixed;left:0;right:0;top:0;z-index:1000;display:flex;justify-content:center;align-items:center;height:0;background:rgba(255,176,17,.9);overflow:hidden;opacity:0;transition-property:opacity,bottom;transition-duration:250ms,100ms;transition-delay:0ms,250ms;transition-timing-function:ease;}.ui-modal:target,.ui-modal.visible{height:100%;opacity:1;transition-duration:250ms,100ms;transition-delay:0ms,0ms;}.ui-modal-content{display:block;max-width:48rem;margin:1rem;font-size:.875rem;text-transform:uppercase;text-align:center;line-height:1.75;}.ui-modal-content>h4{margin:2rem 0;}.ui-modal-content>p{margin:2rem 0;}.modal-actions{margin:2.5rem 0 2rem;text-align:center;}.ui-modal-close{position:absolute;right:0;top:0;display:block;margin:1rem;font-size:.875rem;text-transform:uppercase;text-align:center;line-height:1;color:inherit;}.ui-modal-close:hover{animation:blink 800ms steps(2) infinite;}@media screen and (max-height:480px){.ui-modal-content{font-size:.75rem}}.intro{position:fixed;left:0;right:0;top:0;bottom:0;background:#ffb011;pointer-events:none;opacity:0;transition-duration:750ms;transition-property:opacity,transform;transition-timing-function:ease;}.visible--intro .intro{z-index:1000;opacity:1;transition:none;}.intro-title{position:absolute;left:50%;top:50%;margin-top:-2.5rem;font-family:inherit;font-size:.875rem;font-weight:400;line-height:1;transform:translate(-50%,-50%);}