@font-face{font-family:Selawik;font-weight:300;src:url(fonts/selawkl.woff2) format("woff2");font-display:swap}
@font-face{font-family:Selawik;font-weight:400;src:url(fonts/selawk.woff2) format("woff2");font-display:swap}
@font-face{font-family:Selawik;font-weight:600;src:url(fonts/selawksb.woff2) format("woff2");font-display:swap}

/* 1rem = 10px on a 1280-wide screen; everything scales with the TV's resolution */
html{font-size:.78125vw;background:#000}
body{margin:0;background:#000;color:#fff;font-family:Selawik,"Segoe UI","Noto Sans","Noto Naskh Arabic",sans-serif;font-weight:300;overflow:hidden;cursor:none;-webkit-user-select:none;user-select:none}
::selection{background:#00aba9;color:#000}
#app{position:fixed;top:0;left:0;right:0;bottom:0}

#pivots{position:absolute;top:1rem;left:5rem;right:0;height:10.6rem;overflow:hidden;padding-top:1.2rem;box-sizing:border-box}
#pivotrow{white-space:nowrap;padding-left:1rem;font-size:7rem;line-height:8.4rem;letter-spacing:-.03em;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.pv{display:inline-block;position:relative;margin-right:3.6rem;color:#7a7a7a}
.pv.on{color:#fff}
.pv.on.z{outline:.5rem solid #fff;outline-offset:.4rem}

#filters{position:absolute;top:11.2rem;left:5rem;right:0;height:5.4rem;overflow:hidden;white-space:nowrap;font-size:2.6rem;line-height:4rem;padding:.6rem 0 0 1rem;box-sizing:border-box}
.fl{display:inline-block;position:relative;margin-right:4rem;color:#9a9a9a;font-weight:400}
.fl.on{color:#fff;font-weight:600}
.fl i{font-style:normal;font-weight:300;font-size:2.2rem;margin-left:.7rem;color:#8a8a8a}
.fl.on.z{outline:.4rem solid #fff;outline-offset:.5rem}

#grid{position:absolute;left:0;right:0;bottom:0;overflow:hidden}
.t{position:absolute;box-sizing:border-box;width:18.6rem;height:12.6rem;overflow:hidden}
.t.f{outline:.6rem solid #fff;outline-offset:.4rem;z-index:2}
.lg{position:absolute;left:1rem;top:1rem;right:1rem;height:5.4rem;background:#fff;display:flex;align-items:center;justify-content:center;color:#111}
.lg img{max-width:90%;max-height:90%;object-fit:contain}
.lg .ini{display:none;font-size:3.4rem;font-weight:300;letter-spacing:-.02em;color:#111}
.lg.x .ini,.lg.n .ini{display:block}
.nm{position:absolute;left:1rem;right:1rem;bottom:.9rem;height:5.2rem;display:flex;align-items:flex-end;font-size:2.3rem;line-height:2.6rem;font-weight:600}
.nm div{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:5.2rem}
.nm .cc{font-weight:300}
.nm svg{width:2rem;height:2rem;margin-right:.6rem;vertical-align:-.25rem;fill:currentColor}
.c{position:absolute;left:1rem;top:1rem;right:1rem;height:6.2rem;font-size:2.8rem;font-weight:300;line-height:3.1rem;letter-spacing:-.02em;overflow:hidden}
.cn{position:absolute;left:1rem;bottom:1rem;font-size:2.3rem;line-height:2.8rem;font-weight:400}

#msg{position:absolute;left:6rem;right:6rem;top:20rem}
#msg1{font-size:6rem;line-height:1.1;letter-spacing:-.03em}
#msg2{font-size:2.8rem;line-height:1.4;color:#9a9a9a;margin-top:1.6rem;max-width:80rem;font-weight:400}

#player{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:10}
#v{width:100%;height:100%;background:#000;object-fit:contain}
#tuning{position:absolute;left:6rem;top:50%;margin-top:-3rem;font-size:4rem;line-height:6rem}
#banner{position:absolute;left:0;right:0;bottom:0;padding:3rem 6rem 3.6rem;background:#000;border-top:.6rem solid var(--c,#fff);opacity:0;transition:opacity .25s ease-out}
#banner.on{opacity:1}
#bn{font-size:5.6rem;line-height:1.1;letter-spacing:-.03em}
#bm{font-size:2.8rem;line-height:1.5;color:#b0b0b0;font-weight:400}
#bh{font-size:2.4rem;line-height:1.5;color:#9a9a9a;margin-top:1.6rem;font-weight:400}
#bh b{color:#fff;font-weight:600}

@media (prefers-reduced-motion:reduce){#pivotrow,#banner{transition:none}}