:root{--acc:#ff7a2f;--acc-a09:rgba(255,122,47,.09);--acc-a11:rgba(255,122,47,.11);--acc-a25:rgba(255,122,47,.25);--acc-a40:rgba(255,122,47,.4);--acc-a50:rgba(255,122,47,.5);--acc-a55:rgba(255,122,47,.55);--acc-a70:rgba(255,122,47,.7);--acc-a75:rgba(255,122,47,.75)}
html,body{margin:0;padding:0;background:#0d1012;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--acc);text-decoration:none}
a:hover{color:#ffdf7a}
::selection{background:var(--acc);color:#0d1012}
input{font:inherit}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:#0d1012}
body::-webkit-scrollbar-thumb{background:#2a3236;border-radius:5px;border:3px solid #0d1012}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,-5%,0) scale(1.12)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes drift2{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-7%,6%,0) scale(.94)}100%{transform:translate3d(0,0,0) scale(1.05)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee2{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:none}}
@keyframes zoomin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sweep{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(1200%)}}
@keyframes ghost{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ghost2{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes glowpulse{0%,100%{opacity:.5}50%{opacity:.95}}
.reveal{animation:rise .8s cubic-bezier(.22,1,.36,1) both}
.gcard::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:linear-gradient(135deg,var(--acc-a55),transparent 42%,transparent 60%,var(--acc-a40));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.gcard:hover::after{opacity:1}
.hw{display:inline-block;animation:rise .7s cubic-bezier(.22,1,.36,1) both}
.hw:nth-child(1){animation-delay:.05s}.hw:nth-child(2){animation-delay:.13s}.hw:nth-child(3){animation-delay:.21s}.hw:nth-child(4){animation-delay:.29s}
.rv{animation:rise .6s cubic-bezier(.22,1,.36,1) both}
.rv1{animation-delay:.36s}.rv2{animation-delay:.44s}.rv3{animation-delay:.52s}
.gcard{position:relative;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .25s,box-shadow .3s;will-change:transform;outline:none;animation:rise .55s cubic-bezier(.22,1,.36,1) both}
.gcard:nth-child(1){animation-delay:.02s}.gcard:nth-child(2){animation-delay:.06s}.gcard:nth-child(3){animation-delay:.1s}.gcard:nth-child(4){animation-delay:.14s}.gcard:nth-child(5){animation-delay:.18s}.gcard:nth-child(6){animation-delay:.22s}.gcard:nth-child(7){animation-delay:.26s}.gcard:nth-child(8){animation-delay:.3s}.gcard:nth-child(9){animation-delay:.34s}
.gcard:hover,.gcard:focus-visible{border-color:var(--acc)!important;box-shadow:0 18px 44px -18px rgba(0,0,0,.85),0 0 0 1px var(--acc-a25)}
.gcard:hover .cover img{transform:scale(1.07)}
.gcard:hover .playbtn{opacity:1;transform:translateY(0) scale(1)}
.gcard:hover .shine{opacity:1}
.gcard:hover .star{opacity:1}
.gcard:hover .ttl{color:var(--acc)}
.btn{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.22,1,.36,1),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .fl{position:absolute;top:0;left:0;width:34%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);opacity:0}
.btn:hover .fl{opacity:1;animation:sweep .75s ease}
.tab{position:relative;transition:color .2s}
.tab:hover{color:#eef2f0}
.chip{transition:transform .16s,border-color .2s,background .2s,color .2s}
.chip:hover{transform:translateY(-2px);border-color:#4a565c}
.sc::-webkit-scrollbar{height:5px}
.sc::-webkit-scrollbar-thumb{background:#2a3236;border-radius:3px}
.cover img{transition:transform .5s cubic-bezier(.22,1,.36,1)}

/* A phone has room for two nav buttons, not three. BROWSE only scrolls the
   page down, which is the one thing a phone is already good at, so it is the
   one that goes when the sign-in needs the space. */
@media (max-width:520px){.nav-browse{display:none}}
/* Below about 400px the wordmark and the buttons meet. The 26px gutter is
   the cheapest thing to give back, and !important is not laziness here:
   the padding it is overriding is an inline style on the element. */
@media (max-width:420px){nav>div{padding-left:15px!important;padding-right:15px!important;gap:10px!important}}
/* And on the smallest phones still in use the logo square goes too. It is
   decoration; the name is the brand, and the sign-in has to be reachable
   on a 320px screen or it may as well not be in the nav at all. */
@media (max-width:360px){.nav-mark{display:none!important}}
@media (max-width:340px){nav>div{padding-left:11px!important;padding-right:11px!important}}