:root{font-family:system-ui,sans-serif;--accent: #3e92cc}::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,canvas,canvastext 24%)}body{margin:unset;height:100vh;height:100svh;display:flex;flex-direction:column}button,input,select{font:unset}input{margin:unset;min-width:0}svg{fill:currentcolor;display:block}img{display:block;min-width:0;max-width:100%}main{flex:1;overflow:auto}.row{display:flex}.row.y0{align-items:center}.fill{flex:1}.gap16{gap:1rem}.gap24{gap:1.5rem}.p12{padding:.75rem}.tape{display:flex}.tape.selected{position:sticky;top:0;bottom:0;background-color:var(--accent);color:#fff}.tape[inert]{opacity:.5}.tape:not(.selected) .tape_meta{color:color-mix(in lab,canvastext,transparent 32%)}.tape_text{display:flex;flex-direction:column;gap:2px;padding:.5rem .625rem;word-break:break-word;text-wrap:pretty;background-image:linear-gradient(to right,color-mix(in lab,transparent,canvastext 16%) var(--progress),transparent 0);flex:5}.tape_meta{font-weight:300;font-size:.75rem;display:flex;justify-content:space-between}.tape_img{flex:3}footer{display:flex;flex-direction:column;padding:1rem;box-shadow:0 0 1rem canvas}#ticks{padding:1.5rem .5rem 0;display:flex;justify-content:space-between}#ticks div{width:1px;height:.5rem;background-color:canvastext;display:flex;justify-content:center}#ticks span{display:block;translate:0 -1.5rem}#tape_duration{display:flex;justify-content:space-between;font-size:1.5rem;padding-block:1rem .5rem}#position_track{margin-block-end:1.5rem;touch-action:none;height:3rem;border-radius:.5rem;background-color:color-mix(in srgb,canvastext,transparent 80%);background-image:linear-gradient(to right,color-mix(in srgb,canvastext,transparent 40%) var(--value),transparent 0)}#controls{display:flex;gap:1px;user-select:none;& button{flex:1;border:unset;padding:unset;background-image:linear-gradient(to bottom,#0003 0,#0005 60%);box-shadow:0 4px 1px 1px color-mix(in lab,canvastext,transparent 90%);transition-property:translate,box-shadow;transition-duration:80ms;transition-timing-function:ease-out;&:first-child{border-radius:.5rem 0 0 .5rem}&:last-child{border-radius:0 .5rem .5rem 0}&:active{translate:0 4px;box-shadow:unset}}& svg{filter:drop-shadow(0 1px 1px canvas);height:3rem;margin:.5rem auto}}.btn_delete{background:#e23;box-shadow:0 4px 1px 1px #e238;border:none;border-radius:.5rem}.braille:before{content:"";animation:.4s linear infinite braille}@keyframes braille{0%{content:"\283e"}16%{content:"\2837"}33%{content:"\282f"}50%{content:"\281f"}66%{content:"\283b"}83%{content:"\283d"}to{content:"\283e"}}