html{overscroll-behavior:none;scroll-behavior:smooth;scrollbar-width:none}body{padding:0;margin:0;background:black;font-size:.8em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;line-height:1.6;--duration: .5s}body::-webkit-scrollbar{display:none}.noscroll{height:100vh;overflow:hidden;overscroll-behavior:none}main.dom{max-height:100vh;overflow:scroll}.dom{-webkit-tap-highlight-color:transparent}.dom .layer{background:currentColor;position:absolute;left:0;top:0;bottom:0;right:0}.dom .slide{display:block;height:30vh;margin-top:1px;animation:slide .75s ease 0s both}.dom .rot div.overlay>div{transform:rotate(90deg)}.dom .flip div.overlay>div{transform:translate(100%)}.dom .flip.rot div.overlay>div{transform:translate(100%) rotate(90deg)}.dom>div{min-height:100vh}.dom>div:not(.active){cursor:none}.dom>div:not(.active) .ui>.fullscreen,.dom>div:not(.active) .ui>.close,.dom :fullscreen .fullscreen{opacity:0}.dom :fullscreen{overflow-y:scroll}.dom .fullscreen{position:fixed;bottom:0;right:0;cursor:pointer;transition:opacity .3s ease}.dom .fullscreen:hover:after{background:currentColor}.dom .fullscreen:after{transition:background .2s ease;display:inline-block;content:"";border:1px solid;width:1.5em;height:1.5em;margin:2em}.dom .sensor{height:100vh;grid-column:1 / -1}.dom .ani{animation:flow var(--speed) ease-in-out var(--delay) 3}.dom .bar{position:absolute;left:0;top:0;right:0;display:block;height:1px;background:currentColor;color:inherit}.dom .marker{position:absolute;left:0;top:0;pointer-events:none;background:currentColor;background:white;animation:follow 1s steps(1,jump-start) 0s none 30;display:inline-block;--s: 4px;width:var(--s);height:var(--s)}.dom .domgrid{display:grid}.dom .domgrid .overlay{grid-column:1 / -1;position:sticky;bottom:0;display:grid;grid-template-columns:subgrid;grid-auto-rows:var(--rows);pointer-events:none}.dom .domgrid .overlay>div{background:currentColor;width:calc(var(--length) * 1%);height:1px;margin-bottom:2px;transition:transform .7s ease,width .3s ease}.dom .domgrid>div{transform-origin:0 0;margin:0 1px 1px 0}.dom .domgrid>div.xend{justify-items:end}.dom .domgrid>div.yend{align-content:end}.dom .domgrid>div.s2{grid-column-end:span 2}.dom .domgrid>div.s3{grid-column-end:span 3}.dom .domgrid>div.s4{grid-column-end:span 4}.dom .domgrid>div.s5{grid-column-end:span 5}.dom .domgrid>div>div{--w: 100%;margin-bottom:1px;background-color:currentColor;transition:background-color .2s ease;transform-origin:0 100%;width:var(--w)}.dom .domgrid>div>div.bye{animation-name:bye;animation-duration:var(--duration)}.dom .domgrid>div>div.clip{border-radius:0 0 0 2px}@keyframes follow{0%,to{transform:translate(0)}25%{transform:translate(calc(100vw - var(--s)))}50%{transform:translate(calc(100vw - var(--s)),calc(100vh - var(--s)))}75%{transform:translateY(calc(100vh - var(--s)))}}@keyframes bye{to{transform:scaleY(0);hheight:0}}@keyframes flow{0%,20%,80%,to{width:100%;width:var(--w)}40%,60%{width:0%}}@keyframes slide{0%,to{height:0}20%,40%{height:30vh}}