:root{color-scheme:dark;--bg: #000000;--ink: #ffffff;--muted: rgba(255, 255, 255, .5);--line: #ffffff;--line-soft: #1f1f1f;--border: 1px}*{box-sizing:border-box}html,body{height:100%;overflow-x:hidden}body{margin:0;background:var(--bg);color:var(--ink);font-family:PP Neue Montreal,Helvetica Neue,Helvetica,Arial,sans-serif;letter-spacing:-.2px;cursor:crosshair;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;min-height:100vh}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}.layout{flex:1;width:min(1280px,100%);max-width:100%;padding:20px 17px 60px}.hero h1{margin:0;font-size:40px;font-weight:400;line-height:.8}.subtitle{margin:10px 0 0;font-size:40px;font-weight:400;line-height:.8;color:var(--muted)}.example{margin-top:26px}.browser{position:relative;width:800px;height:478px;overflow:hidden}.browser-inner{position:absolute;left:0;top:0;transform:scale(2);transform-origin:left top}.tab{position:absolute;left:0;top:0;width:75px;height:15px;border:var(--border) solid var(--line);background:var(--bg)}.tab-dot{position:absolute;left:4px;top:4px;width:5px;height:5px;border:var(--border) solid var(--line);background:var(--bg);mix-blend-mode:difference}.frame{position:absolute;left:0;top:14px;width:400px;height:225px;border:var(--border) solid var(--line);z-index:2}.example-media{position:absolute;left:0;top:14px;width:400px;height:225px;overflow:hidden;z-index:1}.shot-video{width:100%;height:100%;object-fit:cover;display:block}.info{margin-top:23px;display:flex;flex-direction:column;gap:20px;width:auto}.body-text{font-size:14px;line-height:1.4}.body-text p{margin:0}.how{font-size:14px;line-height:1.4}.how .label{margin:0 0 4px}.how ol{margin:0;padding-left:21px}.install{font-size:14px;line-height:1.4}.install .label{margin:0 0 4px}.install ol{margin:0;padding-left:21px}.install code{font-family:PP Neue Montreal,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px}.shortcut{white-space:nowrap;font-family:PP Neue Montreal,Helvetica Neue,Helvetica,Arial,sans-serif}.shortcut-windows,.shortcut-mac{display:none}body.is-mac .shortcut-mac,body.is-windows .shortcut-windows{display:inline}body.is-mac .shortcut-windows,body.is-windows .shortcut-mac{display:none}.cta{width:fit-content;background:transparent;color:var(--ink);border:var(--border) solid var(--line);padding:10px 20px;font-size:14px;letter-spacing:-.2px;cursor:pointer;text-decoration:none}.github-link{color:var(--muted);font-size:12px;text-decoration:none}.github-word{text-decoration:underline}.site-footer{padding:12px 0 20px 17px;color:var(--muted);font-size:12px}.site-footer p{margin:0}@media (max-width: 720px){.layout{padding:20px 16px 48px}.hero h1,.subtitle{font-size:26px;line-height:1.1}.example{margin-top:20px;margin-left:-16px;margin-right:-16px}.browser{width:100%;height:auto;aspect-ratio:800 / 478}.browser-inner{left:0;transform:scale(.5);transform-origin:top left}.frame,.example-media{width:800px;height:450px}.info{width:min(90vw,320px)}}