html,body{
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
z-index:0;
display:flex;
font-family:"Roboto Slab",Tahoma,Arial,sans-serif;
font-size:10px;
font-weight:300;
color:#ccc;
text-transform:uppercase;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-moz-osx-font-smoothing:grayscale;
font-feature-settings:'liga';
cursor:default;
}
main{
width:100%;
height:100%;
background:#111;
overflow:hidden;
position:relative
}
h1,h2{
font-size:1.5em;
margin:0 5% .5em;
font-weight:300
}
h2{
text-align:right;
}
.ver,#alt{
margin-left:.5em;
color:#888;
font-size:1rem
}
#alt:hover{
cursor:pointer;
color:#bbb;
}
hr{
border:none;
border-top:2px solid #aaa;
margin:1em 0
}
#txt>hr{
border-top:1px solid #444;
}
.dot{
background:rgba(255,255,255,.5);
border-radius:50%;
position:absolute;
left:50%;
top:50%;
width:16px;
height:16px;
margin-left:-8px;
margin-top:-8px;
opacity:1;
z-index:1
}
.dot.e{
width:12px;
height:12px;
margin-left:-6px;
margin-top:-6px;
opacity:.6
}
.dot.e.f{
width:4px;
height:4px;
margin-left:-2px;
margin-top:-2px;
opacity:.5
}
.tgt{
width:0;
max-width:100%;
height:100%;
background:#323232;
z-index:2;
display:block;
box-shadow:0 0 12px #000,2px 2px 3px -2px #555 inset,-2px -2px 3px -2px #111 inset;
overflow-y:scroll;
scrollbar-width:none;
flex-shrink:0;
transition:all 400ms;
position:relative
}
#abt{
left:0;
}
#txt{
text-transform:none;
font-size:1.25em;
line-height:1.44rem;
margin-top:2em;
color:#888;
}
#ctl{
right:0;
}
.tgt::-webkit-scrollbar {
width:0;
}
.tgt.tgd{
width:236px;
max-width:100vW
}
.cnt{
margin:18px;
width:200px;
position:absolute;
box-sizing:border-box;
padding-bottom:24px
}
#scp,#pxl{
width:90%;
height:72px;
margin:1em 5%;
border-radius:1em;
transition:all 400ms
}
#scp{
box-shadow:3px 2px 3px -2px #555,-2px -1px 3px -2px #111
}
#pxl{
position:absolute;
background:url("pxl.png");
opacity:.3
}
.set{
width:100%;
margin:1em 0
}
.slc{
width:100%;
margin:1.5em 0
}
.slc label{
padding-bottom:1.25em;
display:inline-block
}
.sld{
margin:0;
appearance:none;
width:100%;
height:6px;
border-radius:3px;
background:#111;
outline:none;
opacity:.7;
transition:opacity .2s;
box-shadow:3px 1px 3px -2px #888,-3px -1px 3px -2px #111
}
.sld::-webkit-slider-thumb{
appearance:none;
width:36px;
height:18px;
background:linear-gradient(90deg,#222 10%,#555 46%,#ccc 46%,#ccc 54%,#555 54%,#222 90%);
cursor:grab;
border-radius:3px;
border:1px solid #111;
box-shadow:.1em .2em .5em #000;
outline:none;
}
.sld:active::-webkit-slider-thumb{
cursor:grabbing;
}
.sld::-moz-range-thumb{
appearance:none;
width:36px;
height:18px;
background:linear-gradient(90deg,#222 10%,#555 46%,#ccc 46%,#ccc 54%,#555 54%,#222 90%);
cursor:grab;
border-radius:3px;
border:1px solid #111;
box-shadow:.1em .2em .5em #000;
outline:none;
}

.sld:active::-moz-range-thumb{
cursor:grabbing
}
.lbl{
float:right;
color:#888;
}
.lbl:after{
content:" " attr(data-unit)
}
button{
background:transparent;
border:none;
font-size:inherit;
font-weight:inherit;
font-family:inherit;
color:inherit;
cursor:pointer;
outline:none
}
button:hover{
color:#fff;
text-shadow:0 0 3px #fff
}
.tgl{
position:absolute;
top:0;
font-size:24px;
padding:1em;
z-index:10
}
#ttg{
left:0;
}
#ctg{
right:0;
}
.tgl:before{
content:attr(data-tmi);
opacity:.5
}
.tgl.tgd:before{
content:"close";
opacity:1
}
.tgl:hover:before{
opacity:1
}
.mi{
font-family:'Material Icons';
font-weight:400;
font-style:normal;
display:inline-block;
line-height:1;
text-transform:none;
letter-spacing:normal;
word-wrap:normal;
white-space:nowrap;
direction:ltr
}
#ply:before{
cursor:pointer;
content:"play_circle";            
opacity:.5;
position:absolute;
top:50%;
left:50%;
font-size:15vMax;
margin-top:-.5em;
margin-left:-.5em;
transition:all 400ms;
z-index:10;
}
a:link,a:visited{
color:#bbb;
outline:none !important;
}
a:hover{
color:#ccc;
}
.prs {
color: #666;
font-size: 0.8em;
text-transform: uppercase;
}