:root{color-scheme:dark;background:#090705;color:#efe7d9;font-family:Georgia,'Times New Roman',serif;font-synthesis:none;--soft:#b3a79a;--line:#514133}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}a{color:inherit;text-underline-offset:.25em}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0}button,a,input,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #e8b273;outline-offset:5px}header{display:flex;justify-content:space-between;gap:20px;padding:25px 4vw;font:13px/1.5 Arial,sans-serif;color:var(--soft)}header a{text-decoration:none}main{max-width:1440px;margin:auto;padding:0 4vw 40px}.intro{display:flex;align-items:baseline;justify-content:space-between;gap:25px;padding:12px 0 22px}h1{font-size:clamp(36px,4vw,62px);line-height:1.05;letter-spacing:-.045em;font-weight:400;margin:0}.intro p{font-size:17px;line-height:1.5;margin:0;color:var(--soft)}figure{margin:0}.picture{display:grid;aspect-ratio:3/2;width:min(100%,calc((100svh - 290px)*1.5));margin:auto;background:#050403}.picture video,.picture img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}.transport{display:flex;align-items:baseline;gap:25px;margin:15px 0 8px;font:13px/1.5 Arial,sans-serif}.transport output{margin-left:auto;color:var(--soft);font-variant-numeric:tabular-nums}#flat-view[aria-pressed=true]{color:#edbb80;border-color:#edbb80}.range-label{font:11px/1.5 Arial,sans-serif;color:var(--soft)}#position{display:block;width:100%;height:25px;margin:0;accent-color:#ce995e;cursor:ew-resize}.frame-steps{display:flex;justify-content:space-between;font:12px/1.5 Arial,sans-serif}.frame-steps button:disabled{opacity:.3;cursor:default}figcaption,details,#load-status{font:12px/1.65 Arial,sans-serif;color:var(--soft)}figcaption{margin-top:17px}details{margin-top:25px;max-width:75ch}summary{cursor:pointer;width:fit-content;padding:6px 0}details p{margin:10px 0}#load-status{color:#edbb80}@media(max-width:700px){header{padding:20px}.intro{display:block;padding:10px 0 20px}.intro p{font-size:16px;margin-top:12px}.intro p br{display:none}main{padding:0 20px 30px}.picture{width:100%}.transport{gap:18px;flex-wrap:wrap}.transport output{flex-basis:100%;margin:0;text-align:right;font-size:11px}.transport button{font-size:12px}}@media(max-height:500px){.picture{width:min(100%,720px)}.intro{padding-top:0}h1{font-size:35px}.intro p{font-size:14px}}
