.App{position:fixed;margin:0 auto;padding:calc(var(--spacing) + var(--safe-area-top)) calc(var(--spacing) + var(--safe-area-right)) calc(var(--spacing) + var(--safe-area-bottom)) calc(var(--spacing) + var(--safe-area-left));height:100%;width:100%;max-width:450px;display:grid;gap:var(--spacing);grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto}.panel{position:relative;background:hsl(var(--hs-background),15%);border-radius:var(--border-radius)}.panel{display:flex;justify-content:space-between}.ChannelGrid{position:absolute;top:var(--icon-size);left:0;right:0;bottom:0;display:grid;padding:var(--spacing);grid-gap:var(--spacing);grid-template-columns:repeat(auto-fit,minmax(var(--channel-min-size),1fr));grid-template-rows:repeat(auto-fill,minmax(var(--channel-min-size),auto));align-content:flex-start;visibility:hidden}.ChannelGrid.open{visibility:visible}.channel{object-fit:cover;aspect-ratio:1;width:100%;border-radius:8px;transition-duration:.15s;transform:translateY(8px);opacity:0}.ChannelGrid.open .channel{transform:translateY(0);opacity:1}.Dialog{position:absolute;margin-top:auto;margin-bottom:auto;left:calc(calc(1 * var(--spacing)) + calc(var(--spacing) + var(--safe-area-bottom)));right:calc(calc(1 * var(--spacing)) + calc(var(--spacing) + var(--safe-area-left)));top:25%;border:hsl(var(--hs-background),20%);z-index:2;background:hsl(var(--hs-background),15%);border-radius:var(--border-radius);padding:calc(2 * var(--spacing))}.backdrop{filter:blur(30px);position:absolute;z-index:1;top:0;left:0;right:0;bottom:0;pointer-events:none;background:hsl(var(--hs-background),20%)}.close-button{position:absolute;right:0;top:0}.IconButton{transition-duration:.3s;transition-timing-function:cubic-bezier(.075,.82,.165,1);min-width:var(--icon-size);width:var(--icon-size);height:var(--icon-size);padding:calc(var(--spacing) / 2)}.IconButton .Icon{height:100%;width:100%;padding:calc(var(--spacing) / 2);border-radius:var(--border-radius);background:transparent;transition-duration:.2s}.IconButton.active .Icon{background:hsl(var(--hs-text),90%);color:hsl(var(--hs-background),6%)}.Icon{fill:currentColor}.KeyboardInput{position:absolute;top:calc(5 * var(--spacing));left:var(--spacing);right:var(--spacing);opacity:0;pointer-events:none;display:flex;gap:var(--spacing);justify-content:space-between;transition-duration:.3s;transform:translateY(10px)}.KeyboardInput.open{pointer-events:all;opacity:1;transform:translateY(0)}.KeyboardInput input{background:hsl(var(--hs-background),90%);border-radius:var(--border-radius);border:none;outline:none;font-size:16px;flex:1}.KeyboardInput .IconButton{padding:0;width:calc(var(--icon-size) - var(--spacing));height:calc(var(--icon-size) - var(--spacing))}.KeyboardInput input.empty+.IconButton{opacity:.5}.KeyboardInput input:not(.empty)+.IconButton{opacity:1}.LightMenu{position:absolute;top:calc(5 * var(--spacing));left:var(--spacing);right:0;opacity:0;pointer-events:none;justify-content:space-between;transition-duration:.3s;transform:translateY(10px);display:grid;grid-template-columns:minmax(30%,auto) auto 1fr auto;align-items:center}.LightMenu.open{pointer-events:all;opacity:1;transform:translateY(0)}.LightMenu .IconButton{padding:0;height:calc(var(--icon-size) - var(--spacing));width:calc(var(--icon-size) - var(--spacing))}.LightMenu p{margin-top:0;margin-bottom:0;height:100%;display:flex;align-items:center}.LightMenu p[data-indent="1"]{padding-left:var(--spacing)}.LightMenu p[data-indent="2"]{padding-left:calc(.5 * var(--spacing));margin-left:calc(1.25 * var(--spacing));border-left:calc(.25 * var(--spacing)) solid hsl(var(--hs-background),40%)}.OptionsMenu{position:absolute;top:var(--icon-size);left:0;right:0;bottom:0;display:grid;padding:var(--spacing);align-content:flex-start;visibility:hidden}.OptionsMenu.open{visibility:visible}.option{display:flex;align-items:center;width:100%}.OptionsMenu>*{transition-duration:.15s;transform:translateY(8px);opacity:0}.OptionsMenu.open>*{transform:translateY(0);opacity:1}.option>p:first-child{flex:1}.option .buttonGroup{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}.option .buttonGroup>button{padding:calc(.5 * var(--spacing));background:hsl(var(--hs-background),15%);color:hsl(var(--hs-text),90%);border:hsl(var(--hs-background),90%) 1px solid}.option .buttonGroup>button:first-child{border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.option .buttonGroup>button:last-child{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.option .buttonGroup>button.active{background:hsl(var(--hs-text),90%);color:hsl(var(--hs-background),15%)}.Trackpad{position:relative;background:hsl(var(--hs-background),15%);border-radius:var(--border-radius);flex-grow:1;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;touch-action:none}:root{--border-radius: 8px;--hs-background: 0, 0%;--hs-text: 0, 0%;--safe-area-bottom: env(safe-area-inset-bottom);--safe-area-left: env(safe-area-inset-left);--safe-area-right: env(safe-area-inset-right);--safe-area-top: env(safe-area-inset-top);--spacing: 16px;--channel-min-size: 64px;--channel-max-size: 96px;--color-disney-plus: #113ccf;--color-netflix: #e50914;--color-plex: #e5a00d;--color-switch: #e60012;--color-wii: #8b8b8b;--color-xbox: #107c10;--icon-size: 56px}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overscroll-behavior-y:contain;position:absolute;height:100vh;width:100vw;background:hsl(var(--hs-background),6%);color:hsl(var(--hs-text),90%);-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none}body{padding:0;margin:0;overscroll-behavior-y:contain;position:absolute;height:100vh;width:100vw}*{box-sizing:border-box;touch-action:none}input[type=range]{min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:15px;border-radius:15px;background:hsl(var(--hs-background),50%);outline:none;opacity:.7;transition:.2s;-webkit-user-select:none;user-select:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:15px;background:hsl(var(--hs-background),100%);cursor:pointer;-webkit-user-select:none;user-select:none}