@font-face {
font-family: elegant;
src:
 url(/resource/signs/elegant.woff) format('woff'),
 url(/resource/signs/elegant.ttf) format('truetype');
font-display: swap;
}

* {
padding: 0;
margin: 0;
}

a {
text-decoration: none;
}

body {
min-height: 100vh;
font-family: Tahoma, Arial, sans-serif;
text-align: center;
font-size: 16px;
background-color: #403d4b;
background-image: url(/images/common/drape.png);
background-image:
 radial-gradient(rgba(55,53,62,0.9) 35%, rgba(55,53,62,0)),
 url(/images/common/drape.png);
}

button {
background: transparent;
border: 0;
outline: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}

/*------------------------------------------------------------------------------------------------*/

#area, .banner {
width: 100%;
max-width: 950px;
position: fixed;
left: 0;
right: 0;
margin: auto;
-webkit-backface-visibility: hidden;
}

#area {
height: calc(100% - 10px);
background-image: url(/images/common/ascetic/under.png);
background-image:
 linear-gradient(rgba(87,85,90,0) 10%, rgba(87,85,90,0.5), rgba(87,85,90,0) 90%),
 url(/images/common/ascetic/under.png);
background-position: 50%;
}

@supports (filter: url(#empty)) {

#area {
background-image:
 linear-gradient(rgba(87,85,90,0) 10%, rgba(87,85,90,0.5), rgba(87,85,90,0) 90%),
 url(/images/common/decorate.svg#enrich-view);
}
}

#area:before, #area:after, .banner:before, .banner:after {
content: "";
height: 100%;
position: absolute;
top: 0;
}

#area:before, #area:after {
width: 2px;
background-color: #655d5e;
}

#area:before {
left: 0;
background-image: linear-gradient(to right, #655d5e, #635b5c);
border-left: 1px solid #534f52;
border-right: 1px solid #46454b;
}

#area:after {
right: 0;
background-image: linear-gradient(to left, #655d5e, #635b5c);
border-left: 1px solid #46454b;
border-right: 1px solid #534f52;
}

header {
background-position: 50% 0;
}

header:before {
left: 0;
background-position: 50% -35px;
}

header:after {
right: 0;
background-position: 50% -70px;
}

.banner, .banner:before, .banner:after {
background-image: url(/images/common/hem.png);
}

.banner, [href="/"] {
height: 35px;
}

.banner {
line-height: 35px;
z-index: 2;
}

.banner:before, .banner:after {
width: 4px;
}

[href="/"] {
width: 130px;
height: 35px;
display: block;
position: relative;
color: #2f2c2c;
font-family: elegant, tahoma;
letter-spacing: 2px;
-webkit-text-stroke: 0.2px #2f2c2c;
margin: auto;
}

[href="/"]:before {
content: "";
width: 100%;
height: 35px;
position: absolute;
left: 0;
background-image: url(/images/common/ascetic/gleam.png);
background-position: 50%;
background-repeat: no-repeat;
z-index: -1;
}

[href="/"]:hover:before {
background-image: url(/images/common/ascetic/lux.png);
}

@supports (background: radial-gradient(black, transparent)) {

[href="/"]:before {
background-image: radial-gradient(rgba(203,202,202,0.55), rgba(203,202,202,0) 80%);
background-size: 80% 60%;
}

[href="/"]:hover:before {
background-image: radial-gradient(#cbcaca, rgba(203,202,202,0) 80%);
}
}

.aloof {
position: relative;
color: #97998f;
font-size: 0.75em;
font-weight: bold;
line-height: 25px;
padding: 34px 0 0;
z-index: 1;
}

/*------------------------------------------------------------------------------------------------*/

#portal {
max-width: 950px;
height: 100%;
position: relative;
top: 34px;
margin: auto;
overflow: hidden;
}

#container {
margin: auto;
}

.bedim {
display: none;
}

#container.stasis, #heart {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

#container.clear {
padding: 10px 0 45px;
}

#container.stasis {
max-width: 792px;
height: 95%;
max-height: 530px;
position: relative;
top: 50%;
padding: 13px;
border: 2px solid #7a7676;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#front, #info {
position: relative;
}

.clear #front, .clear #info {
width: 96%;
margin: 15px auto;
}

.stasis #front, .stasis #info {
max-width: 350px;
height: 100%;
}

.stasis #front {
float: left;
}

#front img {
width: 100%;
height: 100%;
display: block;
}

.clear #front:after {
z-index: 1;
}

#front:after, #deliver:not(.under):after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-box-shadow: 0 3px 5px dimgray inset, 0 -3px 5px dimgray inset;
box-shadow: 0 3px 5px dimgray inset, 0 -3px 5px dimgray inset;
}

#info {
text-align: left;
color: #b4a4a4;
background: rgba(0,0,0,0.3);
background: radial-gradient(circle, transparent, rgba(0,0,0,0.5));
}

.stasis #info {
width: 50%;
float: right;
}

.clear #info {
height: 300px;
margin-top: 5px;
}

h1, p {
font-size: 0.8125em;
cursor: default;
}

h1 {
max-width: calc(100% - 20px);
float: left;
white-space: nowrap;
margin: 7px 0 5px 10px;
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
}

h1:after {
content: "";
width: 125%;
height: 2px;
display: block;
background: linear-gradient(to right, #b4a4a4, rgba(180,164,164,0));
margin-top: 3px;
opacity: 0.65;
}

p {
clear: left;
margin: 5px 10px;
}

#heart {
width: 100%;
height: 42px;
position: absolute;
top: 50%;
padding: 0 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.clear #heart {
top: 55%;
}

.stasis #heart {
top: 50%;
}

#heart a {
display: block;
}

#heart a:first-child {
width: 30px;
height: 30px;
float: left;
background-image: url(/images/common/ascetic/chief.png);
background-size: 32px;
background-position: -5px -27px;
margin-top: 6px;
opacity: 0.8;
}

@supports (filter: url(#empty)) {

#heart a:first-child {
background-image: url(/images/common/insignia.svg#arrow-view);
background-position: -5px 50%;
}
}

#heart div {
height: 20px;
float: right;
margin-top: 11px;
opacity: 0.9;
}

[class*="quality"] {
background-image: url(/manuals/images/merit.png);
background-repeat: no-repeat;
}

.quality_1 {
width: 68px;
background-position: 0;
}

.quality_2 {
width: 68px;
background-position: -110px;
}

.quality_3 {
width: 55px;
background-position: -13px;
}

.quality_4 {
width: 55px;
background-position: -123px;
}

.quality_5 {
width: 42px;
background-position: -26px;
}

.quality_6 {
width: 42px;
background-position: -136px;
}

.quality_7 {
width: 29px;
background-position: -39px;
}

#heart a:last-child {
width: 38px;
height: 42px;
background-image: url(/manuals/images/stream.png);
margin: auto;
opacity: 0.9;
}

#nadir {
width: 100%;
height: 65px;
position: absolute;
bottom: 0;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#nadir div {
font-size: 0.8125em;
line-height: 15px;
opacity: 0.9;
cursor: default;
}

#nadir div:not(:last-child) {
float: left;
position: relative;
}

#nadir div:last-child {
position: absolute;
top: -25px;
}

#nadir div:first-child {
width: 50px;
}

#nadir div:nth-child(2) {
left: 5px;
}

#nadir button {
min-width: 110px;
height: 28px;
float: right;
position: relative;
top: 17px;
color: #b4a4a4;
line-height: 26px;
background: #363439;
border: 1px solid #585557;
border-radius: 5px;
padding: 0 8px;
overflow: visible;
}

#nadir button:before {
content: "Expand Preview";
width: 100%;
position: absolute;
top: -24px;
left: 0;
color: limegreen;
font-size: 11px;
opacity: 0.8;
}

/*------------------------------------------------------------------------------------------------*/

#deliver {
overflow: hidden;
}

#deliver, #deliver span, canvas {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

#deliver:not(.active) {
height: 0;
}

#deliver.active {
background: rgba(0,0,0,0.7);
}

.clear #deliver {
width: 96%;
top: 330px;
left: 2%;
}

#deliver.under {
height: calc(100% - 390px);
}

#deliver.active:not(.under) {
height: 100%;
cursor: cell;
}

#deliver:before {
position: absolute;
top: 50%;
left: 50%;
color: seashell;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

#deliver.active:before {
content: "Processing...";
}

#deliver > div:first-child {
width: calc(100% + var(--bar-size));
position: relative;
}

.stasis #deliver > div:first-child {
overflow: auto;
}

#deliver.active:not(.under) > div:first-child {
height: 100%;
}

#deliver:not(.under):after {
pointer-events: none;
}

canvas {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

canvas:not(.hot) {
display: none;
}

iframe {
height: 0;
width: 0;
border: 0;
outline: 0;
}

/*------------------------------------------------------------------------------------------------*/

footer {
position: relative;
background-position: 50% -105px;
}

footer:before {
left: 0;
background-position: 50% -140px;
}

footer > div {
max-width: 350px;
height: 100%;
margin: auto;
}

footer > div > * {
height: 100%;
}

.skim {
width: 100px;
background-image: url(/manuals/images/choice.png);
}

.minus {
float: left;
background-position: 0 -16px;
}

.plus {
float: right;
background-position: 100% -16px;
}

#status {
width: 150px;
color: seashell;
margin: auto;
}

#status > * {
position: relative;
}

#status:before, .rapid:not(:last-child):after {
content: "";
display: block;
position: relative;
margin: auto;
}

#status:before {
width: 77px;
height: 16px;
top: -14px;
background-image: url(/manuals/images/choice.png);
background-position: 50% 0;
}

#status span {
top: -16px;
cursor: default;
}

#status div {
background: #878785;
border: 1px solid #676665;
}

#status.short div {
height: 150px;
top: -201px;
}

#status.medium div {
height: 180px;
top: -231px;
}

#status.long div {
height: 210px;
top: -261px;
}

.rapid {
width: 100%;
height: 30px;
display: block;
line-height: 30px;
color: seashell;
}

.rapid:not(:last-child):after {
width: 85%;
height: 100%;
top: -31px;
box-shadow: 0 7px 12px -10px black;
}

#status.short .grow, #status.medium button:nth-child(6) {
display: none;
}

footer > button {
width: 40px;
height: 35px;
position: absolute;
top: 0;
right: 20px;
background-image: url(/images/common/ascetic/chief.png);
background-position: 50% 75%;
background-repeat: no-repeat;
}

@supports (filter: url(#empty)) {

footer > button {
background-image: url(/images/common/insignia.svg#hike-view);
background-position: 50%;
}
}

.dormant {
opacity: 0.5;
}

footer:after {
right: 0;
background-position: 50% -175px;
}

.seat {
bottom: 0;
}

.linger {
bottom: 10px;
}

/*------------------------------------------------------------------------------------------------*/

#alembic, #mirror {
position: absolute;
}

#alembic {
top: 50px;
left: 50%;
margin-left: -75px;
z-index: 1;
}

#glass, #scope {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
}

#glass {
background: rgba(0,0,0,0.7);
box-shadow:
0 0 0 7px hsla(0, 0%, 10%, 0.7),
0 0 7px 7px hsla(0, 0%, 0%, 0.55);
overflow: hidden;
}

#mirror div {
height: 100%;
}

#scope:not(.drag) {
cursor:
url(/images/common/indicator/touch.cur),
url(/images/common/indicator/touch.png),
pointer;
}

#scope.drag {
cursor:
url(/images/common/indicator/swipe.cur),
url(/images/common/indicator/swipe.png),
move;
}

.obscure {
visibility: hidden;
}

.busy {
opacity: 0.4;
}

#depot {
position: fixed;
top: 100%;
}