:root{--font-sans:var(--sans);--font-mono:var(--mono);--mux-pink:#fa50b5;--mux-yellow:#ffb200}[data-theme=light]{--nav-icon:var(--gray-7);--nav-icon-hover:var(--gray-9);--main-bg:#fff;--surface-1:#fafaf9;--surface-2:var(--gray-1);--border-1:var(--gray-2)}[data-theme=dark]{--nav-icon:var(--gray-5);--nav-icon-hover:var(--gray-2);--main-bg:#323232;--surface-1:#383838;--surface-2:#2f2f2f;--border-1:var(--gray-9)}body{display:grid;grid-template-rows:auto auto 1fr}footer,header,main{padding-inline:.5rem}.inner{max-width:1280px;height:100%;margin:0 auto;border-width:1px;border-left:1px solid var(--border-1);border-bottom:0 solid var(--border-1);border-right:1px solid var(--border-1);border-top:0 solid var(--border-1)}header{border-bottom:1px solid var(--border-1)}header nav{height:5rem}.nav-section,header nav{display:flex}.left,.right{flex:1 1}.right{justify-content:flex-end}header nav a{display:inline-flex;align-items:center;margin:0;font-family:JetBrains Mono,monospace;font-size:.875rem;text-transform:uppercase;padding:1.3rem 2rem;color:var(--nav-icon);border-left:1px solid var(--border-1)}header nav :is(a,button):hover{text-decoration:none;background:var(--surface-2)}main>.inner{display:grid;grid-template-columns:1fr}@media (min-width:768px){footer,header,main{padding-inline:1.5rem}main>.inner{grid-template-columns:320px auto}section{border-left:1px solid var(--border-1)}}footer{border-top:1px solid var(--border-1)}aside,section{background:var(--main-bg);padding:2rem}aside h1{display:flex;align-items:center;font-size:var(--font-size-2);font-weight:var(--font-weight-4);margin-bottom:2rem}aside h1 code{color:var(--surface-1);background-color:var(--mux-yellow);padding:.1rem var(--size-2);margin-right:var(--size-2)}aside h1 span{font-size:var(--font-size-1);font-family:var(--font-mono);text-transform:uppercase}aside p{font-size:var(--font-size-0);color:var(--gray-6)}footer .inner{display:flex;align-items:flex-end;justify-content:center;padding-block:3rem 2rem;fill:#242628}.mux-svg{width:2.5rem}aside nav ul{list-style:none;padding:0;margin:0;line-height:1.25}aside nav li{padding:0}aside nav a{display:flex;align-items:center;padding:.375rem var(--size-4) .375rem .75rem;margin:0;color:var(--text-1);font-size:var(--font-size-1);border-radius:100vh;border:1px solid transparent}aside nav a:hover{background-color:var(--surface-1);text-decoration:none}aside nav a.active{background-color:var(--surface-2);border:1px solid var(--border-1)}aside nav a:before{content:"";display:block;width:.45rem;height:.45rem;border-radius:100%;margin-right:.7rem}aside nav a.active:before{background-color:var(--text-1)}.toggle{transition:none;box-shadow:none;background:none;border-radius:0;border:none;padding-inline:2rem;fill:var(--nav-icon)}.controls-toggle,.mute-toggle{border-right:1px solid var(--border-1)}.theme-toggle{border-left:1px solid var(--border-1)}#moon,#sun{fill:var(--nav-icon);stroke:none}#sun{transition:transform .5s var(--ease-4)}#sun,#sun-beams{transform-origin:center center}#sun-beams{--_opacity-dur:0.15s;stroke:var(--nav-icon);stroke-width:2px;transition:transform .5s var(--ease-elastic-out-4),opacity var(--_opacity-dur) var(--ease-3)}#sun-beams:hover{stroke:var(--nav-icon-hover)}#moon>circle{transition:transform .5s var(--ease-out-3)}[data-theme=light] #sun{transform:scale(.5)}[data-theme=light] #sun-beams{transform:rotate(90deg);--_opacity-dur:0.5s}[data-theme=dark] #moon>circle{transform:translateX(-20px)}[data-theme=dark] #sun-beams{opacity:0}.video{display:block;width:100%;aspect-ratio:var(--ratio-widescreen)}