@font-face{font-family:ABC Areal;src:url(/fonts/ABCArealVariable.woff2)format("woff2");font-weight:400 700;font-display:swap}@font-face{font-family:ABC Areal Mono;src:url(/fonts/ABCArealMonoVariable.woff2)format("woff2");font-weight:400 700;font-display:swap}:root{--bg:#fff;--ink:#000;--grey:#9a9a9a;--hair:#ebebeb;--tint:#f5f5f4;--sage:#abb495;--mono:"ABC Areal Mono", ui-monospace, Menlo, monospace;--size:clamp(12px, calc(.42vw + 6px), 15px);--left:14rem;--right:min(40rem, 36vw);--bar:2.6rem;font-size:var(--size)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0;overflow:hidden}body{-webkit-font-smoothing:antialiased;grid-template-columns:var(--left) minmax(0, 1fr) var(--right);grid-template-rows:var(--bar) minmax(0, 1fr);grid-template-areas:"bar bar bar""list view pov";font:400 1rem/1.4 ABC Areal,Helvetica Neue,Helvetica,Arial,sans-serif;display:grid}::selection{background:var(--sage)}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.grey{color:var(--grey)}.key{font-family:var(--mono);color:var(--grey);border:1px solid var(--hair);border-radius:3px;margin-left:.3em;padding:0 .3em;font-size:.85em}.bar{border-bottom:1px solid var(--hair);text-transform:uppercase;white-space:nowrap;grid-area:bar;align-items:center;gap:1.4rem;padding:0 1rem;display:flex}.brand{font-weight:500}.spacer{flex:1}.bar button{color:var(--grey);text-transform:uppercase}.bar button:hover,.bar button.on{color:var(--ink)}.bar button.on .key{color:var(--ink);border-color:var(--ink)}.list{border-right:1px solid var(--hair);flex-direction:column;grid-area:list;padding:.6rem 0;display:flex;overflow-y:auto}.list button{text-align:left;grid-template-columns:2.2rem 1fr;padding:.45rem 1rem;display:grid}.list button:hover{background:var(--tint)}.list button.on{background:var(--ink);color:var(--bg)}.list .n{font-family:var(--mono);color:var(--grey)}.list button.on .n{color:var(--bg)}.list .foot{color:var(--grey);margin-top:auto;padding:1rem}.view{grid-area:view;min-height:0;position:relative;overflow:hidden}.view canvas{touch-action:none;width:100%;height:100%;display:block}.labels{pointer-events:none;position:absolute;inset:0}.labels button{pointer-events:auto;font-family:var(--mono);background:var(--bg);color:var(--grey);border:1px solid var(--hair);will-change:transform;border-radius:2px;padding:.25rem .35rem;font-size:.85rem;line-height:1;position:absolute;top:0;left:0}.labels button:hover{color:var(--ink);border-color:var(--grey)}.labels button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.view.through .labels{display:none}.corner{max-width:28rem;color:var(--grey);pointer-events:none;margin:0;position:absolute;bottom:.8rem;left:1rem}.pov{border-left:1px solid var(--hair);flex-direction:column;grid-area:pov;min-height:0;display:flex;overflow-y:auto}.frame{aspect-ratio:16/9;background:#000;flex:none;position:relative;overflow:hidden}.frame video{object-fit:cover;cursor:pointer;width:100%;height:100%;display:block}.guide{aspect-ratio:9/16;pointer-events:none;outline:1px solid #ffffffb3;height:100%;display:none;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 0 0 100vmax #0000008c}body.vertical .guide{display:block}.frame.missing video{visibility:hidden}.frame.missing:after{content:"No footage yet. Run npm run footage.";color:var(--grey);text-transform:uppercase;place-items:center;display:grid;position:absolute;inset:0}.takes{flex-wrap:wrap;gap:.4rem;padding:.8rem 1rem 0;display:flex}.takes:empty{display:none}.takes button{font-family:var(--mono);border:1px solid var(--hair);color:var(--grey);border-radius:999px;padding:.2rem .6rem;font-size:.9rem}.takes button:hover{color:var(--ink);border-color:var(--grey)}.takes button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.info{padding:1rem}.info h1{font:inherit;gap:.8rem;margin:0 0 .5rem;font-weight:500;display:flex}.info .num{font-family:var(--mono);font-weight:400}.info p{margin:0}#specs{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);grid-template-columns:7rem minmax(0,1fr);gap:.45rem 1rem;margin:1.1rem 0;padding:1rem 0;display:grid}#specs dt{color:var(--grey);text-transform:uppercase}#specs dd{font-family:var(--mono);overflow-wrap:anywhere;margin:0}.keys{border-top:1px solid var(--hair);color:var(--grey);text-transform:uppercase;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:auto;padding:.8rem 1rem;display:flex}.keys .key:first-child{margin-left:0}@media (max-width:820px){html,body{height:auto;overflow:auto}body{flex-direction:column;font-size:14px;display:flex}.bar{white-space:normal;flex-wrap:wrap;gap:.5rem 1rem;padding:.6rem 16px}.bar .spacer{display:none}.bar #subtitle{flex-basis:100%;order:-1;display:none}.key{display:none}.view{flex:none;order:1;height:46vh}.corner{bottom:.6rem;left:16px;right:16px}.list{border-right:0;border-bottom:1px solid var(--hair);scrollbar-width:none;flex-direction:row;order:2;padding:0;overflow-x:auto}.list button{white-space:nowrap;gap:.5rem;padding:.75rem 16px;display:flex}.list .foot{display:none}.pov{border-left:0;order:3;overflow:visible}.takes,.info{padding-left:16px;padding-right:16px}.keys{display:none}}