@font-face{font-family:Material Symbols Rounded;src:url(../fonts/MaterialSymbolsRounded-demo.woff2)format("woff2");font-style:normal;font-weight:500;font-display:block}.od{--stage:#050607;--gopro-blue:#08f;--ok:#0c6;--od-line:#ffffff1f;isolation:isolate;padding:28px var(--page-r) 40px var(--page-l);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head tasks""sub tasks""stage stage""finish finish""foot foot";column-gap:48px;display:grid;position:relative}.od-head{grid-area:head;max-width:760px}.od-sub{grid-area:sub}.od .tasks-panel{grid-area:tasks;align-self:end}.od .stage{grid-area:stage}.od .finish{grid-area:finish}.od .od-foot{grid-area:foot}.od:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(42% 46% at 27% 56%, #0088ff21, transparent 72%), radial-gradient(40% 44% at 76% 56%, #ff5c2812, transparent 72%), radial-gradient(70% 50% at 50% 0%, #ffffff0d, transparent 70%), linear-gradient(180deg, #000 0%, var(--stage) 40%, #000 100%);position:absolute;inset:0}.od .material{letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";direction:ltr;font-family:Material Symbols Rounded;font-style:normal;font-weight:400;line-height:1;display:inline-block}.od .stage{grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);align-items:stretch;height:clamp(480px,100svh - 300px,720px);margin-top:8px;display:grid}.od .device{grid-template-rows:1fr auto;min-width:0;margin:0;display:grid;position:relative}.od .canvas-host{min-height:0;position:relative}.od .pip-swap{display:none}.od .canvas-host canvas{touch-action:pan-y;cursor:grab;opacity:0;-webkit-tap-highlight-color:transparent;width:100%;height:100%;transition:opacity .7s;display:block;position:absolute;inset:0}.od .canvas-host canvas.is-ready{opacity:1}.od .canvas-host canvas.dragging{cursor:grabbing}.od .canvas-host canvas.over-control{cursor:pointer}.od .canvas-host:after{content:"";z-index:-1;filter:blur(6px);background:radial-gradient(50% 50%,#000000e6,#0000 70%);height:22px;position:absolute;bottom:4%;left:22%;right:22%}.od .loading{color:var(--muted);letter-spacing:.04em;place-items:center;font-size:13px;transition:opacity .4s;display:grid;position:absolute;inset:0}.od .loading.is-hidden{opacity:0;pointer-events:none}.od .loading:before{content:"";border:2px solid #ffffff1f;border-top-color:var(--blue);border-radius:50%;grid-area:1/1;width:28px;height:28px;margin-bottom:44px;animation:.9s linear infinite od-spin}.od .loading span{grid-area:1/1;margin-top:30px}@keyframes od-spin{to{transform:rotate(360deg)}}.od figcaption{text-align:center;gap:4px;padding-top:8px;display:grid}.od figcaption strong{letter-spacing:-.01em;font-size:15px;font-weight:600}.od figcaption span{color:var(--muted);font-size:13px}.od .flip-btn{vertical-align:1px;font:inherit;color:var(--white);border:1px solid var(--od-line);cursor:pointer;background:#ffffff0f;border-radius:999px;margin-left:8px;padding:4px 11px;font-size:12px;font-weight:500;transition:background .16s}.od .flip-btn:hover{background:#ffffff1f}.od .link{align-content:center;justify-items:center;gap:12px;padding-bottom:54px;display:grid}.od .link-track{background:linear-gradient(90deg,#0000,#ffffff2e 14% 86%,#0000);width:100%;height:2px;margin:26px 0 20px;position:relative}.od .link-node{background:#ffffff59;border-radius:50%;width:7px;height:7px;margin-top:-3.5px;position:absolute;top:50%}.od .link-node.l{left:6%}.od .link-node.r{right:6%}.od .link-badge{z-index:1;background:#0a1420;border:1px solid #0088ff73;border-radius:50%;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;display:grid;position:absolute;top:50%;left:50%;box-shadow:0 0 0 6px #0088ff0f,0 0 24px #0088ff38}.od .link-badge .material{color:var(--blue);font-size:22px}.od .link-badge:after{content:"";border:1px solid #0088ff80;border-radius:50%;animation:2.8s ease-out infinite od-link-ripple;position:absolute;inset:-1px}.od .link-badge.hit{animation:.34s ease-out od-link-hit}@keyframes od-link-ripple{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}@keyframes od-link-hit{40%{box-shadow:0 0 0 10px #0088ff2e,0 0 44px #0088ffbf}}.od .pulse{background:var(--gopro-blue);border-radius:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;position:absolute;top:50%;box-shadow:0 0 12px 3px #0088ffb3}.od .pulse.c2w{background:var(--white);box-shadow:0 0 10px 2px #ffffff80}.od .pulse.w2c{animation:.24s cubic-bezier(.4,0,.2,1) forwards od-w2c}.od .pulse.c2w{animation:.24s cubic-bezier(.4,0,.2,1) forwards od-c2w}@keyframes od-w2c{0%{opacity:.2;left:0%}30%{opacity:1}to{opacity:1;left:100%}}@keyframes od-c2w{0%{opacity:.2;left:100%}30%{opacity:1}to{opacity:1;left:0%}}.od .link-meta{letter-spacing:.04em;color:var(--muted);text-align:center;white-space:nowrap;font-size:12px}.od .link-log{border:1px solid var(--od-line);text-align:center;width:100%;min-height:78px;color:var(--muted);font-variant-numeric:tabular-nums;background:#ffffff08;border-radius:14px;align-content:center;justify-items:center;gap:3px;padding:10px 12px;font-size:13px;line-height:1.35;display:grid}.od .link-log .route{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:10.5px}.od .link-log b{color:var(--white);font-size:14px;font-weight:550;display:block}.od .link-log em{color:var(--blue);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12.5px;font-style:normal}.od .link-log.fresh{animation:.26s ease-out od-link-fresh}@keyframes od-link-fresh{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.od .tasks-panel{justify-items:start;gap:10px;min-width:240px;display:grid}.od .tasks-top{justify-content:space-between;align-items:baseline;gap:12px;width:100%;display:flex}.od .tasks-label{color:var(--muted);letter-spacing:.02em;font-size:13px}.od .tasks-progress{grid-template-columns:repeat(4,1fr);gap:4px;width:100%;margin:-4px 0 4px;display:grid}.od .tasks-progress i{background:#ffffff1a;border-radius:2px;height:3px;transition:background .3s}.od .tasks-progress i.on{background:var(--ok)}.od .tasks{gap:4px;width:100%;margin:0;padding:0;list-style:none;display:grid;position:relative}.od .tasks:before{content:"";background:#ffffff1a;width:1.5px;position:absolute;top:22px;bottom:22px;left:22px}.od .tasks li{color:var(--muted);background:0 0;border:1px solid #0000;border-radius:14px;align-items:center;gap:12px;padding:9px 14px 9px 10px;font-size:14px;transition:border-color .24s,background .24s,color .24s;display:flex;position:relative}.od .tasks li .tick{background:var(--ink);color:#0000;border:1.5px solid #ffffff38;border-radius:50%;flex:none;place-items:center;width:24px;height:24px;font-size:0;transition:all .24s;display:grid}.od .tasks li:not(.done) .tick:after{content:attr(data-step);color:var(--muted);grid-area:1/1;font:600 12px/1 -apple-system,SF Pro Text,Inter,sans-serif}.od .task-text{gap:2px;display:grid}.od .task-text small{color:var(--blue);font-size:12px;display:none}.od .tasks li.next{color:var(--white);background:#0088ff14;border-color:#0088ff73}.od .tasks li.next .tick{border-color:var(--blue);box-shadow:0 0 0 4px #0088ff26}.od .tasks li.next .tick:after{color:var(--blue)}.od .tasks li.next .task-text small{display:block}.od .tasks li.done{color:#8e8e93}.od .tasks li.done .tick{background:var(--ok);border-color:var(--ok);color:#000;font-size:15px;font-weight:700}.od .task-reset{font:inherit;color:var(--muted);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:8px 6px;font-size:13px;-webkit-text-decoration:underline #ffffff40;text-decoration:underline #ffffff40}.od .task-reset:hover{color:var(--white)}.od .finish{text-align:center;background:#00a8ef12;border:1px solid #00a8ef59;border-radius:18px;max-width:560px;margin:18px auto 0;padding:18px 20px;display:none}.od .finish.is-shown{animation:.42s cubic-bezier(.2,.8,.2,1) od-rise;display:block}.od .finish p{margin:0 0 12px;font-size:16px}.od .cta{color:#000;background:var(--white);border-radius:999px;align-items:center;gap:8px;padding:11px 20px;font-size:15px;font-weight:600;display:inline-flex}@keyframes od-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.od .kbd-controls{left:var(--page-l);z-index:5;flex-wrap:wrap;gap:6px;display:flex;position:absolute;top:8px}.od .kbd-controls button{opacity:0;pointer-events:none;font:inherit;border:1px solid var(--od-line);color:var(--white);background:#111;border-radius:8px;padding:6px 10px;font-size:13px;position:absolute}.od .kbd-controls:focus-within button{opacity:1;pointer-events:auto;position:static}.od.is-unsupported .tasks-panel,.od.is-unsupported .stage>:not(.od-fallback){display:none}.od.is-unsupported .stage{height:auto;display:block}.od-fallback img{width:100%;height:auto}.od-fallback p{text-align:center;color:var(--muted);margin:12px 0 0;font-size:13px}.od-hero{min-height:100svh;padding-top:100px;padding-bottom:28px}.od-hero .kbd-controls{top:72px}.od-hero .hero-eyebrow{margin-bottom:14px}.od-hero .hero-headline{max-width:15em;font-size:clamp(2.5rem,3.9vw,4rem)}.od-hero .hero-subline{max-width:46ch;margin-top:16px;font-size:clamp(1rem,1.35vw,1.15rem)}.od-hero .hero-meta{flex-wrap:wrap;align-items:center;gap:4px 22px;margin-top:8px;display:flex}.od-hero .hero-compat{margin:0}.od-hero .hero-demo-link{margin-top:0}.od-hero .stage{height:clamp(420px,100svh - 400px,680px)}.od-foot{text-align:center;color:#6e6e73;margin:14px 0 0;font-size:12px;line-height:1.5}.od-page-header{height:64px;padding:0 var(--page-r) 0 var(--page-l);justify-content:space-between;align-items:center;gap:16px;display:flex}.od-pill{letter-spacing:.04em;color:var(--muted);border:1px solid var(--od-line,#ffffff1f);white-space:nowrap;border-radius:999px;padding:6px 12px;font-size:12px}.od-page .kicker{margin:0 0 14px}.od-page h1{letter-spacing:-.035em;margin:0;font-size:clamp(34px,4.4vw,58px);font-weight:650;line-height:1.02}.od-page h1 span{color:#6e6e73}.od-page .lede{max-width:560px;color:var(--muted);text-wrap:pretty;margin:14px 0 0;font-size:clamp(16px,1.6vw,19px);line-height:1.5}.od-page .lede strong{color:var(--white);font-weight:550}.od-how{padding:56px var(--page-r) 72px var(--page-l);border-top:1px solid #ffffff1f}.od-how-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;display:grid}.od-how h2{letter-spacing:-.02em;margin:0 0 28px;font-size:clamp(24px,2.6vw,32px);font-weight:600}.od-how h3{letter-spacing:-.01em;margin:12px 0 8px;font-size:17px;font-weight:600}.od-how p{color:var(--muted);margin:0;font-size:15px;line-height:1.55}.od-how .material{color:var(--blue);-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-family:Material Symbols Rounded;font-size:26px;line-height:1}.od-note{padding:0 var(--page-r) 48px var(--page-l);color:#5c5c61;margin:0;font-size:12px;line-height:1.5}@media (width<=760px){.od{grid-template-columns:minmax(0,1fr);grid-template-areas:"head""tasks""stage""finish""sub""foot";padding-top:16px}.od-sub{margin-top:22px}.od .tasks-panel{margin-top:14px}.od .tasks:before,.od .tasks li:not(.next){display:none}.od .stage{flex-direction:column;height:auto;margin-top:12px;padding-top:104px;display:flex;position:relative}.od .stage>.device{order:1}.od .stage>.link{order:2}.od .stage .device .canvas-host{height:min(58svh,460px);min-height:320px}.od .stage:not(.swapped) .device-gopro,.od .stage.swapped .device-watch{z-index:2;border:1px solid var(--od-line);background:#101216e0;border-radius:16px;width:50%;height:140px;display:block;position:absolute;top:0;right:0;overflow:hidden}.od .stage:not(.swapped) .device-gopro .canvas-host,.od .stage.swapped .device-watch .canvas-host{pointer-events:none;height:100%;min-height:0}.od .stage:not(.swapped) .device-gopro figcaption,.od .stage.swapped .device-watch figcaption{display:none}.od .pip-swap{z-index:3;width:50%;height:140px;color:var(--white);cursor:pointer;background:0 0;border:0;border-radius:16px;place-items:end;padding:8px;display:grid;position:absolute;top:0;right:0}.od .pip-swap .material{background:#0009;border-radius:999px;padding:4px;font-size:18px}.od .stage>.link{z-index:2;gap:0;width:calc(50% - 10px);height:140px;padding:0;display:block;position:absolute;top:0;left:0}.od .link-track,.od .link-meta{display:none}.od .link-log{height:100%;min-height:0;padding:10px}.od figcaption span{font-size:12px}.od-hero{padding-top:84px}.od-hero .hero-headline{font-size:clamp(2rem,8.4vw,2.6rem)}.od-hero .hero-subline{margin-top:0;font-size:1rem}.od-hero .hero-meta{margin-top:6px}.od-hero .stage .device .canvas-host{height:min(52svh,420px);min-height:300px}.od-page .lede{margin-top:10px;font-size:15px}.od-page .kicker{margin-bottom:10px}.od-pill .pill-more{display:none}.od-pill{padding:5px 10px;font-size:11px}.od-how-grid{grid-template-columns:minmax(0,1fr);gap:26px}}@media (prefers-reduced-motion:reduce){.od .link-badge:after{opacity:0;animation:none}.od .pulse{display:none}.od .canvas-host canvas{transition:none}.od .finish.is-shown{animation:none}}