@font-face{ font-family:"HomeVideo"; font-weight:400;
            src:url("static/fonts/HomeVideo-Regular.otf") format("opentype"); font-display:swap; }
@font-face{ font-family:"HomeVideo"; font-weight:700;
            src:url("static/fonts/HomeVideo-Bold.otf") format("opentype"); font-display:swap; }
body{ background:#000; color:#fff; margin:0; padding:10px 14px;
      font-family:"HomeVideo",monospace; font-weight:400; font-size:18px; line-height:1.4;
      letter-spacing:-.015em; -webkit-font-smoothing:none; }
a{ color:#fff; text-decoration:none; }
a:hover, html.kbd a:focus{ font-weight:700; }
hr{ border:0; border-top:1px solid #fff; margin:8px 0; }
h2{ font-size:20px; font-weight:400; margin:0 0 6px; }
p{ margin:0 0 8px; }

#bar, #bar td, #stage, #stage td, pre{ font-family:"HomeVideo",monospace; font-size:18px; }
pre{ letter-spacing:0; }           

.nv:before{ content:"\25B6\00A0"; visibility:hidden; font-weight:400;
            animation:ptr .6s steps(1) infinite; }
.nv:hover:before, html.kbd .nv:focus:before{ visibility:visible; }
@keyframes ptr{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }

.bh{ display:inline; margin:0; font-size:inherit; font-weight:inherit; }
#brand{ font-weight:700; }
#brand:hover, html.kbd #brand:focus{ animation:blink .78s steps(1) infinite; }
@keyframes blink{ 0%,49%{ font-weight:700 } 50%,100%{ font-weight:400 } }

html.kbd a:focus{ color:#52ff00; outline:none; }

#lang:hover, html.kbd #lang:focus{ font-weight:400; }
#lang b{ font-weight:400; }
#lang:hover b, html.kbd #lang:focus b{ font-weight:700; }
.dc{ color:#7289da; }
.tk .r{ color:#fe2c55; }

#stage{ margin-top:6px; table-layout:fixed; }
.arw{ width:46px; vertical-align:middle; text-align:center; }
.arw a{ font-size:34px; font-weight:400; }
.arw a:hover, html.kbd .arw a:focus{ font-weight:700; }
.box{ width:47%; text-align:center; vertical-align:middle; overflow:hidden;
      -ms-touch-action:none; touch-action:none; }
.info{ vertical-align:middle; padding-left:22px; overflow:hidden; }
#art{ cursor:move; cursor:grab; margin:0; font-weight:400; line-height:1.05; white-space:pre; overflow:hidden;
      display:inline-block; text-align:left; }
#art.grabbing{ cursor:move; cursor:grabbing; }
#art *{ pointer-events:none; }
#ctl{ display:none; margin:10px 0 0; padding:4px 14px;
      border:1px solid rgba(255,255,255,.3); }
html.js #ctl{ display:inline-block; }
#ctl a.on{ font-weight:700; }         

.mk{ position:absolute; top:0; left:0; }
.g{ display:none; }
.live{ display:block; }
#g1:target ~ #stage .c1, #g2:target ~ #stage .c2, #g3:target ~ #stage .c3, #g4:target ~ #stage .c4, #g5:target ~ #stage .c5, #g6:target ~ #stage .c6, #g7:target ~ #stage .c7, #g8:target ~ #stage .c8{ display:block; }
#g1:target ~ #stage .live, #g2:target ~ #stage .live, #g3:target ~ #stage .live, #g4:target ~ #stage .live, #g5:target ~ #stage .live, #g6:target ~ #stage .live, #g7:target ~ #stage .live{ display:none; }
#cbtn{ display:none; }
html.js #cbtn{ display:inline; }
.np, .nn{ position:absolute; top:50%; margin-top:-16px; font-size:26px; line-height:32px; }
.np{ left:12px; }
.nn{ right:12px; }
html.js .np, html.js .nn{ display:none; }
#stage td.box, #stage td.arw{ display:none; }
html.js #stage td.box, html.js #stage td.arw{ display:table-cell; }
#stage td.info{ padding-left:0; }
html.js #stage td.info{ padding-left:22px; }

.pane{ border:1px solid rgba(255,255,255,.3); }
.ph{ position:relative; text-align:center; padding:9px 48px;
     border-bottom:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.05); }
html.js .ph{ text-align:left; padding:9px 16px; }
.pb{ padding:14px 16px; overflow-y:auto; scrollbar-width:thin;
           scrollbar-color:#a6191b rgba(255,255,255,.06); }
.pb::-webkit-scrollbar{ width:14px; }
.pb::-webkit-scrollbar-track{ background:rgba(255,255,255,.06);
                                    border-left:1px solid rgba(255,255,255,.10); }
.pb::-webkit-scrollbar-thumb{ background:#a6191b; border:2px solid rgba(0,0,0,.55); }
.pb::-webkit-scrollbar-thumb:hover{ background:#c92024; }
.now{ font-size:22px; font-weight:700; display:block; margin:0; }
html.js .now{ overflow:hidden; white-space:nowrap; }
.now .mq{ display:inline-block; }
.now.marquee .mq{ animation:mq 9s ease-in-out infinite; }
@keyframes mq{ 0%,12%{ transform:translateX(0) }
               46%,58%{ transform:translateX(var(--mq,0)) }
               92%,100%{ transform:translateX(0) } }

.meta{ margin-bottom:12px; }
.rel{ float:right; margin-left:14px; }
.rel b{ font-weight:400; color:#8f8f97; }
.tags{ line-height:1.42; }       
.tags b{ font-weight:700; }

.sec{ border-top:1px solid rgba(255,255,255,.18); margin-top:14px; padding-top:12px; }
.sec h3{ font-size:20px; font-weight:700; margin:0 0 8px; }
.d-b{ margin:0 0 12px; color:#ddd; }
.d-b:last-child{ margin-bottom:0; }
.ft{ line-height:1.5; color:#ddd; }
.ft:before{ content:"\25A0\00A0"; color:#a6191b; }    
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; }
.col h4{ font-size:18px; font-weight:400; color:#bdbdc4; margin:0 0 6px; }
.col div{ line-height:1.4; color:#ddd; }
.col b{ font-weight:400; color:#8f8f97; }               
@media (max-width:900px){ .cols{ grid-template-columns:1fr; gap:16px; } }

.buy{ margin-top:12px; margin-bottom:0; }
.buy a{ display:inline-block; padding:5px 12px; color:#52ff00;
        border:1px solid rgba(255,255,255,.3); }
.buy a:hover, html.kbd .buy a:focus{ font-weight:400; background:#123900; border-color:#43d100; }
.buy .cur{ display:inline-block; overflow:hidden; height:14px; vertical-align:baseline; }
.buy .cur i{ display:block; height:21px; line-height:14px; font-style:normal; }
.buy a:hover .cur i, html.kbd .buy a:focus .cur i{ animation:curRoll 1s steps(21) infinite; }
@keyframes curRoll{ from{ transform:translateY(0) } to{ transform:translateY(-21px) } }
.buy .dla{ display:inline-block; font-style:normal; }
.buy a:hover .dla, html.kbd .buy a:focus .dla{ animation:dlBob .6s infinite; }
@keyframes dlBob{ 0%,49.99%{ transform:translateY(-2px) } 50%,100%{ transform:translateY(2px) } }
dt{ margin-top:8px; }
dd{ color:#bbb; margin:2px 0 0 18px; }

html.js{ height:100%; overflow:hidden; }
html.js body{ overflow:hidden; }
html.js #card{ display:none; }
html.js.card #card{ display:block; }
html.js.card #stage{ display:none; }
html.js.card #card > hr, html.js.card #card > h2, html.js.card #card > p{ display:none; }
#card > p a{ color:#5aa9ff; }
#card > p a:hover, html.kbd #card > p a:focus{ font-weight:400; text-decoration:underline; }
#win{ position:absolute; left:50%; top:50%; min-width:340px; background:#000;
      border:1px solid rgba(255,255,255,.3); text-align:left;
      -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
#winhead{ padding:6px 12px; border-bottom:1px solid rgba(255,255,255,.3);
          background:rgba(255,255,255,.05); }
#winhead a{ float:right; }
#winbody{ padding:12px; }
#winbody p{ margin:0 0 6px; }
#winbody a{ color:#5aa9ff; }
#winbody a:hover, html.kbd #winbody a:focus{ font-weight:400; text-decoration:underline; }
#winbody .cp{ float:right; margin-left:16px; color:#8f8f97; }
#winbody .cp:hover, html.kbd #winbody .cp:focus{ color:#fff; font-weight:400; text-decoration:none; }
#winbody .cp.done{ color:#52ff00; }    
#wx{ color:#fff; }            

#burger{ display:none; }

@media (max-width:760px){
  body{ font-size:14px; padding:0 10px 46px; }
  html.js body{ padding-bottom:0; }
  #bar, #bar td, #stage, #stage td, pre{ font-size:14px; }
  #bar, #bar tbody, #bar tr, #bar td{ display:block; width:auto; }
  #bar td:first-child{ position:relative; min-height:56px; line-height:56px; text-align:center; }
  #brand{ font-size:26px; }
  #burger{ display:none; position:absolute; right:4px; top:0; line-height:56px; font-size:34px; }
  #nav{ display:block; font-size:0; line-height:0; }
  .nv{ position:relative; display:block; text-align:center; margin:0; padding:0;
       height:38px; line-height:38px; font-size:18px;
       border-top:1px solid rgba(255,255,255,.3); }
  .nv:before{ position:absolute; left:10px; top:0; }
  html.js #nav{ display:none; }
  html.js #burger{ display:block; }
  html.menu-open #nav{ display:block; }
  html.js #cbtn{ display:block; }
  #bar td:last-child{ position:fixed; left:0; right:0; bottom:0; z-index:3;
                      text-align:center; padding:6px 0; background:#000;
                      border-top:1px solid rgba(255,255,255,.3); }
  #stage, #stage tbody, #stage tr, #stage td{ display:block; width:auto; }
  html.js #stage td.box, html.js #stage td.arw{ display:block; }
  .arw{ position:fixed; z-index:2; }
  .arw.l{ left:2px; } .arw.r{ right:2px; }
  .arw a{ font-size:40px; }
  .info{ padding:8px 0 0; }
  .pane{ margin:0 -10px; border-left:0; border-right:0; border-bottom:0; }
  .pb{ scrollbar-width:auto; scrollbar-color:auto; }
  .pb::-webkit-scrollbar-thumb{ border-right:0; }
  html.js #stage td.info{ padding-left:0; }
  hr{ margin-top:0; }
  #win{ min-width:0; left:8px; right:8px; -webkit-transform:translateY(-50%); transform:translateY(-50%); }
}