*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
}
/* Generic */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    cursor: default;
    background-image: radial-gradient(circle, #171424, #000);
}
.face {
    position: absolute;
}
/***************/
.house {
    position: absolute;
    width: 28vw;
    height: 28vw;
    transform: perspective(90vw) rotateX(75deg) rotateZ(45deg) translateZ(-9vw);
}
.h-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 1.5vw -3vw 3vw #000, 1.5vw 0.5vw 1.5vw #000;
}
.h-lights {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 45vw;
    height: 45vw;
}
.h-light {
    position: absolute;
}
.h-light:nth-of-type(1) {
    bottom: 5vw;
    right: 0;
    width: 14vw;
    height: 14vw;
    border-radius: 50%;
    background-image: radial-gradient(#1b182a, transparent);
    filter: blur(1vw);
}
.h-light:nth-of-type(2) {
    bottom: 18vw;
    right: -1vw;
    width: 2vw;
    height: 12vw;
    border-radius: 50%;
    transform: rotateZ(-50deg);
    background-image: radial-gradient(rgba(81, 137, 251, .45) 50%, rgba(40, 125, 210, .45), transparent);
    box-shadow: -1vw -1vw 2vw 1vw rgba(131, 171, 252, .1);
    filter: blur(1vw);
}
.h-light:nth-of-type(3) {
    bottom: -2vw;
    right: 17vw;
    width: 5vw;
    height: 12vw;
    border-radius: 50%;
    transform: rotateZ(-50deg);
    background-image: radial-gradient(rgba(81, 137, 251, .5) 50%, rgba(40, 125, 210, .5), transparent);
    filter: blur(2vw);
}
.h-light:nth-of-type(3)::before, .h-light:nth-of-type(3)::after {
    content: '';
    position: absolute;
    width: 200%;
    top: -6vw;
    height: 400%;
    background-image: linear-gradient(to bottom, rgba(40, 125, 210, .1), rgba(81, 137, 251, .1), transparent);
    border-top-left-radius: 10vw;
    border-top-right-radius: 10vw;
    filter: blur(1.5vw);
}
.h-light:nth-of-type(3)::before {
    right: -50%;
    transform-origin: top right;
    transform: rotateZ(15deg);
    box-shadow: -2vw -2vw 0 rgba(81, 137, 251, .075);
}
.h-light:nth-of-type(3)::after {
    left: -50%;
    transform-origin: top left;
    transform: rotateZ(-15deg);
    box-shadow: 2vw -2vw 0 rgba(81, 137, 251, .075);
}
.h-light:nth-of-type(4) {
    bottom: 5vw;
    left: 8vw;
    width: 28vw;
    height: 4vw;
    transform-origin: top left;
    transform: skewX(58deg);
    background-image: linear-gradient(to right, rgba(81, 137, 251, .075) 10%, transparent 25%, transparent, rgba(0, 0, 0, .15));
    filter: blur(0.25vw);
}
.h-light:nth-of-type(6) {
    bottom: 14vw;
    right: 2vw;
    width: 8vw;
    height: 16vw;
    transform-origin: bottom left;
    transform: skewY(49deg);
    background-image: linear-gradient(to left, rgba(0, 0, 0, .1), rgba(0, 0, 0, .7));
    filter: blur(0.35vw);
}
/***************/
/***************/
.alt {
    position: absolute;
    left: 0;
    top: 0;
    width: 27vw;
    height: 27vw;
}
.alt__front {
    width: 27vw;
    height: 0.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(26.5vw);
}
.alt__back {
    width: 27vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-27vw) translateY(-0.5vw);
}
.alt__right {
    width: 27vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(27vw) translateX(-27vw) translateY(-0.5vw);
}
.alt__left {
    width: 27vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.alt__top {
    width: 27vw;
    height: 27vw;
    transform-origin: top left;
    transform: translateZ(0.5vw);
}
.alt__bottom {
    width: 27vw;
    height: 27vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-27vw);
}
.alt__front {
    background-color: #9e99c1;
}
.alt__back {
    background-color: #383358;
}
.alt__right {
    background-color: #383358;
}
.alt__left {
    background-color: #fbfafe;
}
.alt__top {
    background-image: linear-gradient(to bottom, #0b0c1f, #383358, #9e99c1);
}
.alt__top .light:nth-of-type(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(20, 61, 103, .75), rgba(81, 137, 251, .75), transparent);
}
.alt__top .light:nth-of-type(2) {
    position: absolute;
    left: 4vw;
    height: 100%;
    width: 6vw;
    background-image: linear-gradient(to bottom, transparent 20%, rgba(40, 125, 210, .75), rgba(81, 137, 251, .25) 80%);
    filter: blur(0.1vw);
}
.alt__top .light:nth-of-type(3) {
    position: absolute;
    bottom: 10vw;
    left: 5vw;
    width: 6vw;
    height: 3vw;
    border-radius: 50%;
    transform: rotateZ(42deg);
    background-image: radial-gradient(rgba(131, 171, 252, .75) 50%, rgba(32, 99, 167, .75));
    filter: blur(0.55vw);
}
.alt__top .light:nth-of-type(4) {
    position: absolute;
    bottom: 7vw;
    left: 4vw;
    width: 8.5vw;
    height: 2vw;
    border-radius: 50%;
    transform: rotateZ(40deg);
    background-image: radial-gradient(rgba(131, 171, 252, .75) 50%, rgba(32, 99, 167, .75));
    filter: blur(0.55vw);
}
.alt__top .light:nth-of-type(5) {
    position: absolute;
    bottom: 3.5vw;
    left: 4.5vw;
    width: 6vw;
    height: 2vw;
    border-radius: 50%;
    transform: rotateZ(40deg);
    background-image: radial-gradient(rgba(141, 178, 252, .75) 50%, rgba(32, 99, 167, .75));
    filter: blur(0.75vw);
}
.alt__top .light:nth-of-type(6) {
    position: absolute;
    bottom: 3vw;
    left: 0.5vw;
    width: 4vw;
    height: 2vw;
    border-radius: 50%;
    transform: rotateZ(40deg);
    background-image: radial-gradient(rgba(141, 178, 252, .75) 50%, rgba(32, 99, 167, .75));
    filter: blur(0.35vw);
}
.alt__top .light:nth-of-type(7) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #000, #5189fb 10%, transparent 20%);
}
.alt__top .light:nth-of-type(7)::before {
    content: '';
    position: absolute;
    width: 20%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(5, 70, 199, .6), transparent 60%);
}
.alt__top .light:nth-of-type(7)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20%;
    background-image: linear-gradient(to bottom, rgba(6, 78, 224, .5), transparent 60%);
}
.alt__top .light:nth-of-type(8) {
    position: absolute;
    bottom: 5vw;
    left: 10vw;
    width: 6vw;
    height: 4vw;
    border-radius: 50%;
    transform: rotateZ(40deg);
    background-image: radial-gradient(rgba(255, 255, 255, .1) 50%, rgba(128, 121, 174, .1));
    filter: blur(0.8vw);
}
.alt__bottom {
    background-color: #383358;
}
.alb {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 27vw;
    height: 1vw;
}
.alb__front {
    width: 27vw;
    height: 2vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-1vw);
}
.alb__back {
    width: 27vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-27vw) translateY(-2vw);
}
.alb__right {
    width: 1vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(27vw) translateX(-1vw) translateY(-2vw);
}
.alb__left {
    width: 1vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw);
}
.alb__top {
    width: 27vw;
    height: 1vw;
    transform-origin: top left;
    transform: translateZ(2vw);
}
.alb__bottom {
    width: 27vw;
    height: 1vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-27vw);
}
.alb__front {
    background-image: linear-gradient(to right, #9e99c1 40%, #8f89b7);
}
.alb__back {
    background-color: #383358;
}
.alb__right {
    background-color: #383358;
}
.alb__left {
    background-color: #fbfafe;
}
.alb__top {
    background-image: linear-gradient(to right, #fbfafe 40%, #eae5fa);
}
.alb__bottom {
    background-color: #383358;
}
.arb {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1vw;
    height: 28vw;
}
.arb__front {
    width: 1vw;
    height: 2vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(26vw);
}
.arb__back {
    width: 1vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-2vw);
}
.arb__right {
    width: 28vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-28vw) translateY(-2vw);
}
.arb__left {
    width: 28vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw);
}
.arb__top {
    width: 1vw;
    height: 28vw;
    transform-origin: top left;
    transform: translateZ(2vw);
}
.arb__bottom {
    width: 1vw;
    height: 28vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1vw);
}
.arb__front {
    background-color: #8f89b7;
}
.arb__back {
    background-color: #383358;
}
.arb__right {
    background-image: linear-gradient(to right, #282347 40%, #0f0e17);
}
.arb__left {
    background-color: #9e99c1;
}
.arb__top {
    background-image: linear-gradient(to top, #fbfafe, #3b3469 25%, #2e2a48 75%, #9e99c1);
}
.arb__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 30%;
    top: 0;
    background-image: linear-gradient(to bottom, transparent, rgba(81, 137, 251, .85), transparent);
}
.arb__bottom {
    background-color: #383358;
}
/***************/
/***************/
.blt {
    position: absolute;
    left: 0;
    top: 0;
    width: 1vw;
    height: 27vw;
    transform: translateZ(0.5vw);
}
.blt__front {
    width: 1vw;
    height: 20vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(7vw);
}
.blt__back {
    width: 1vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-20vw);
    background-color: #383358;
    z-index: 5;
    backface-visibility: visible;
}
.blt__right {
    width: 27vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-27vw) translateY(-20vw);
}
.blt__left {
    width: 27vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw);
}
.blt__top {
    width: 1vw;
    height: 27vw;
    transform-origin: top left;
    transform: translateZ(20vw);
}
.blt__bottom {
    width: 1vw;
    height: 27vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1vw);
}
.blt__front {
    background-image: linear-gradient(to bottom, #383358, #9e99c1);
}
.blt__back {
    background-color: #383358;
    z-index: 1;
}
.blt__right {
    background-image: linear-gradient(to bottom, #151225, #383358, #383358 90%, #242040);
}
.blt__right::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0.75vw;
    background-image: linear-gradient(to bottom, #8f89b7, #287dd2);
    border-top: 0.1vw solid #282347;
    border-bottom: 0.1vw solid #282347;
}
.blt__right::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(6, 78, 224, .35), transparent 30%, transparent 70%, rgba(40, 125, 210, .35));
}
.blt__left {
    background-color: #fbfafe;
}
.blt__bottom {
    background-color: #383358;
}
.blt2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 2vw;
    height: 27vw;
    transform: translateZ(20.5vw);
}
.blt2__front {
    width: 2vw;
    height: 0.75vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(26.25vw);
}
.blt2__back {
    width: 2vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-0.75vw);
}
.blt2__right {
    width: 27vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-27vw) translateY(-0.75vw);
}
.blt2__left {
    width: 27vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
.blt2__top {
    width: 2vw;
    height: 27vw;
    transform-origin: top left;
    transform: translateZ(0.75vw);
}
.blt2__bottom {
    width: 2vw;
    height: 27vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-2vw);
}
.blt2__front {
    background-color: #383358;
}
.blt2__back {
    background-color: #383358;
}
.blt2__right {
    background-image: linear-gradient(to right, #8f89b7, #9e99c1, #7169a4);
}
.blt2__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    border-bottom: 0.1vw solid rgba(251, 250, 254, .75);
    background-image: linear-gradient(to top, rgba(81, 137, 251, .35), transparent);
}
.blt2__left {
    background-color: #fbfafe;
}
.blt2__top {
    background-image: linear-gradient(to top, #9e99c1, #fbfafe);
}
.blt2__bottom {
    background-color: #383358;
}
.blb {
    position: absolute;
    left: 1vw;
    top: 0;
    width: 26vw;
    height: 1vw;
    transform: translateZ(0.5vw);
}
.blb__front {
    width: 26vw;
    height: 20vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-19vw);
}
.blb__back {
    width: 26vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-20vw);
    background-color: #383358;
    z-index: 5;
    backface-visibility: visible;
}
.blb__right {
    width: 1vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-1vw) translateY(-20vw);
}
.blb__left {
    width: 1vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw);
}
.blb__top {
    width: 26vw;
    height: 1vw;
    transform-origin: top left;
    transform: translateZ(20vw);
}
.blb__bottom {
    width: 26vw;
    height: 1vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-26vw);
}
.blb__front {
    background-image: linear-gradient(to bottom, #4b4572, #595388 20%, #4b4572);
}
.blb__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(40, 125, 210, .25), transparent 20%, transparent 80%, rgba(40, 125, 210, .5)), linear-gradient(to right, rgba(31, 33, 88, .35), transparent), linear-gradient(to bottom, rgba(31, 33, 88, .35), transparent), linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 20%, transparent 80%, rgba(40, 125, 210, .25));
}
.blb__front::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0.75vw;
    background-image: linear-gradient(to bottom, #8f89b7, #287dd2);
    border-top: 0.1vw solid #282347;
    border-bottom: 0.1vw solid #282347;
}
.blb__back {
    background-color: #383358;
    z-index: 1;
}
.blb__right {
    background-image: linear-gradient(to bottom, #151225, #0f0e17 80%, #151225);
}
.blb__bottom {
    background-color: #383358;
}
.blb2 {
    position: absolute;
    left: 2vw;
    top: 0;
    width: 25vw;
    height: 1vw;
    transform: translateZ(20.5vw);
}
.blb2__front {
    width: 25vw;
    height: 0.75vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(1.25vw);
}
.blb2__back {
    width: 25vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-25vw) translateY(-0.75vw);
}
.blb2__right {
    width: 2vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(25vw) translateX(-2vw) translateY(-0.75vw);
}
.blb2__left {
    width: 2vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
.blb2__top {
    width: 25vw;
    height: 2vw;
    transform-origin: top left;
    transform: translateZ(0.75vw);
}
.blb2__bottom {
    width: 25vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-25vw);
}
.blb2__front {
    background-image: linear-gradient(to right, #7169a4, #9e99c1, #8f89b7);
}
.blb2__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    border-bottom: 0.1vw solid rgba(251, 250, 254, .75);
    background-image: linear-gradient(to top, rgba(40, 125, 210, .25), transparent);
}
.blb2__back {
    background-color: #383358;
}
.blb2__right {
    background-color: #151225;
}
.blb2__left {
    background-color: #9e99c1;
}
.blb2__top {
    background-image: linear-gradient(to left, #9e99c1, #fbfafe);
}
.blb2__bottom {
    background-color: #383358;
}
/***************/
/***************/
.bocina-l, .bocina-r {
    position: absolute;
    left: 1.5vw;
    bottom: 5.25vw;
    width: 0.75vw;
    height: 1.5vw;
    transform: translateZ(8vw);
}
.bocina-l__front, .bocina-r__front {
    width: 0.75vw;
    height: 6vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-4.5vw);
}
.bocina-l__back, .bocina-r__back {
    width: 0.75vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.75vw) translateY(-6vw);
}
.bocina-l__right, .bocina-r__right {
    width: 1.5vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.75vw) translateX(-1.5vw) translateY(-6vw);
}
.bocina-l__left, .bocina-r__left {
    width: 1.5vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-6vw);
}
.bocina-l__top, .bocina-r__top {
    width: 0.75vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: translateZ(6vw);
}
.bocina-l__bottom, .bocina-r__bottom {
    width: 0.75vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.75vw);
}
.bocina-l__right, .bocina-r__right {
    background-image: radial-gradient(#000, #000);
}
.bocina-l__top, .bocina-r__top {
    background-image: linear-gradient(to left, #d9d0f6, #9e99c1, #7169a4);
}
.bocina-l__bottom, .bocina-r__bottom {
    background-color: #383358;
}
.bocina-l__front {
    background-image: linear-gradient(to right, #5189fb, #595388 30%, #b7a5ed);
}
.bocina-l__back {
    background-image: linear-gradient(to right, #383358, #232038);
}
.bocina-l__back::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(81, 137, 251, .35) 65%, rgba(81, 137, 251, .95));
}
.bocina-l__left {
    background-color: #282347;
}
.bocina-l__left::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 20%;
    width: 120%;
    height: 120%;
    background-image: linear-gradient(to left, rgba(7, 23, 39, .75), rgba(0, 0, 0, .75));
    filter: blur(0.5vw);
}
.bocina-r {
    top: 5.25vw;
}
.bocina-r__front {
    background-image: linear-gradient(to right, #383358, #0f0e17);
}
.bocina-r__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left, rgba(81, 137, 251, .35) 65%, rgba(81, 137, 251, .95));
}
.bocina-r__back {
    background-image: linear-gradient(to right, #595388, #b7a5ed);
}
.bocina-r__left {
    background-color: #282347;
}
.bocina-r__left::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 120%;
    height: 120%;
    background-image: linear-gradient(to right, rgba(7, 23, 39, .75), rgba(0, 0, 0, .75));
    filter: blur(0.5vw);
}
.repisa-t, .repisa-b {
    position: absolute;
    left: 1.5vw;
    top: 9vw;
    width: 1.5vw;
    height: 10vw;
    transform: translateZ(16vw);
}
.repisa-t__front, .repisa-b__front {
    width: 1.5vw;
    height: 0.25vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(9.75vw);
}
.repisa-t__back, .repisa-b__back {
    width: 1.5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1.5vw) translateY(-0.25vw);
}
.repisa-t__right, .repisa-b__right {
    width: 10vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.5vw) translateX(-10vw) translateY(-0.25vw);
}
.repisa-t__left, .repisa-b__left {
    width: 10vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw);
}
.repisa-t__top, .repisa-b__top {
    width: 1.5vw;
    height: 10vw;
    transform-origin: top left;
    transform: translateZ(0.25vw);
}
.repisa-t__bottom, .repisa-b__bottom {
    width: 1.5vw;
    height: 10vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1.5vw);
}
.repisa-t__front, .repisa-b__front {
    background-color: #9e99c1;
}
.repisa-t__back, .repisa-b__back {
    background-color: #fbfafe;
}
.repisa-t__right, .repisa-b__right {
    background-color: #8079ae;
}
.repisa-t__left, .repisa-b__left {
    background-color: #fbfafe;
}
.repisa-t__top, .repisa-b__top {
    background-color: #d9d0f6;
}
.repisa-t__top::before, .repisa-b__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(6, 78, 224, .75), transparent);
}
.repisa-t__bottom, .repisa-b__bottom {
    background-color: #383358;
}
.repisa-t__bottom::before, .repisa-b__bottom::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(6, 78, 224, .75), transparent);
}
.repisa-b {
    transform: translateZ(5vw);
}

.tv {
    position: absolute;
    left: 1.51vw;
    top: 8vw;
    width: 0.5vw;
    height: 12vw;
    transform: translateZ(8vw);
    cursor: pointer;
}
.tv__front {
    width: 0.5vw;
    height: 6vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(6vw);
}
.tv__back {
    width: 0.5vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-6vw);
}
.tv__right {
    width: 12vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-12vw) translateY(-6vw);
}
.tv__left {
    width: 12vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-6vw);
}
.tv__top {
    width: 0.5vw;
    height: 12vw;
    transform-origin: top left;
    transform: translateZ(6vw);
}
.tv__bottom {
    width: 0.5vw;
    height: 12vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.5vw);
}
.tv__front {
    background-color: #0b0c1f;
}
.tv__back {
    background-color: #0b0c1f;
}
.tv__right {
    background-color: #0b0c1f;
    border: 0.125vw solid #000;
    overflow: hidden;
    position: relative;
}
.tv__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0.125vw 0.125vw 1vw rgba(81, 137, 251, .5), -0.125vw 0.125vw 1vw rgba(81, 137, 251, .5), 0.125vw -0.125vw 1vw rgba(81, 137, 251, .5), -0.125vw -0.125vw 1vw rgba(81, 137, 251, .5);
    z-index: 1;
    pointer-events: none;
}
.tv-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.tv__left {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0b0c1f;
}
.tv__left::before {
    content: '';
    position: absolute;
    width: 13vw;
    height: 7vw;
    background-image: radial-gradient(rgba(36, 112, 188, .95), rgba(56, 121, 250, .95));
    filter: blur(1.25vw);
    animation: luz-tv 0.25s infinite alternate;
}
.tv__top {
    background-color: #0b0c1f;
}
.tv__bottom {
    background-color: #0b0c1f;
}
.librero {
    position: absolute;
    left: 13vw;
    top: 1vw;
    width: 12vw;
    height: 0.5vw;
    transform: translateZ(7vw);
}
.librero__front {
    width: 12vw;
    height: 0.25vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(1.25vw);
}
.librero__back {
    width: 12vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-0.25vw);
}
.librero__right {
    width: 1.5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-1.5vw) translateY(-0.25vw);
}
.librero__left {
    width: 1.5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw);
}
.librero__top {
    width: 12vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: translateZ(0.25vw);
}
.librero__bottom {
    width: 12vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-12vw);
}
.librero__front {
    background-color: #9e99c1;
}
.librero__back {
    background-color: #383358;
}
.librero__back::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4vw;
    border-radius: 50%;
    background-image: radial-gradient(rgba(106, 154, 251, .7) 50%, rgba(32, 99, 167, .6), transparent);
    filter: blur(1.25vw);
}
.librero__right {
    background-color: #383358;
}
.librero__left {
    background-color: #9e99c1;
}
.librero__top {
    background-color: #d9d0f6;
}
.librero__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(31, 104, 249, .75), transparent);
}
.librero__bottom {
    background-color: #383358;
}
.librero__bottom::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(31, 104, 249, .75), transparent);
}
.libros {
    position: absolute;
}
.libro {
    position: absolute;
    top: 1vw;
    width: 0.5vw;
    height: 1vw;
    transform: translateZ(7.25vw);
}
.libro__front {
    width: 0.5vw;
    height: 1.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-0.5vw);
}
.libro__back {
    width: 0.5vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-1.5vw);
}
.libro__right {
    width: 1vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-1vw) translateY(-1.5vw);
}
.libro__left {
    width: 1vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.5vw);
}
.libro__top {
    width: 0.5vw;
    height: 1vw;
    transform-origin: top left;
    transform: translateZ(1.5vw);
}
.libro__bottom {
    width: 0.5vw;
    height: 1vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.5vw);
}
.libros {
    cursor: pointer;
}
.libro__front {
    background-image: linear-gradient(to bottom, #c42b2b, #a32424);
}
.libro__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255,255,255,.12), transparent);
}
.libro__back {
    background-color: #f5e6e6;
}
.libro__right {
    background-color: #8b2020;
}
.libro__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(196,43,43,.9), rgba(139,32,32,.5));
}
.libro__left {
    background-color: #b82828;
}
.libro__top {
    background-color: #d93030;
}
.libro__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(196,43,43,.6));
}
.libro__bottom {
    background-color: #6b1818;
}
.libro:nth-of-type(1) {
    left: 16vw;
    transform-origin: left;
    transform: translateZ(7.25vw) rotateZ(-10deg);
    cursor: pointer;
}
.libro:nth-of-type(2) {
    left: 17vw;
    transform: translateZ(7.25vw) rotateZ(2deg);
    cursor: pointer;
}
.libro:nth-of-type(3) {
    left: 17.75vw;
    transform: translateZ(7.25vw) rotateZ(5deg);
    cursor: pointer;
}
.libro:nth-of-type(4) {
    left: 19vw;
    transform-origin: left;
    transform: translateZ(7.25vw) rotateZ(10deg);
    cursor: pointer;
}
.libro:nth-of-type(5) {
    left: 20vw;
    transform-origin: left;
    transform: translateZ(7.25vw) rotateZ(10deg);
    cursor: pointer;
}
.libro:nth-of-type(6) {
    left: 23vw;
    transform-origin: left;
    transform: translateZ(7.25vw) rotateY(-90deg);
    cursor: pointer;
}
.fotos {
    position: absolute;
}
.foto {
    position: absolute;
    width: 0.125vw;
    height: 2vw;
    left: 2vw;
    top: 11vw;
    transform: translateZ(5.26vw);
}
.foto__front {
    width: 0.125vw;
    height: 1.125vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(1.125vw);
}
.foto__back {
    width: 0.125vw;
    height: 1.125vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.125vw) translateY(-1.125vw);
}
.foto__right {
    width: 2.25vw;
    height: 1.125vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.125vw) translateX(-2.25vw) translateY(-1.125vw);
}
.foto__left {
    width: 2.25vw;
    height: 1.125vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.125vw);
}
.foto__top {
    width: 0.125vw;
    height: 2.25vw;
    transform-origin: top left;
    transform: translateZ(1.125vw);
}
.foto__bottom {
    width: 0.125vw;
    height: 2.25vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.125vw);
}
.foto__front {
    background-image: linear-gradient(to bottom, #9e99c1, #8079ae);
}
.foto__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(81, 137, 251, .4), transparent);
}
.foto__back {
    background-color: #fbfafe;
}
.foto__right {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8f89b7;
    border: 0.15vw solid #1f2158;
}
.foto__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(to bottom, #9e99c1 0.1vw, #b7a5ed 0.2vw);
}
.foto__left {
    background-color: #9e99c1;
}
.foto__top {
    background-color: #d9d0f6;
}
.foto__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(81, 137, 251, .85), rgba(40, 125, 210, .35));
}
.foto__bottom {
    background-color: #595388;
}
.foto__bottom::before {
    content: '';
    position: absolute;
    right: -100%;
    width: 400%;
    height: 100%;
    background-color: rgba(11, 12, 31, .75);
    filter: blur(0.15vw);
}
.foto:nth-of-type(1) {
    top: 10.5vw;
    transform: translateZ(5.26vw) rotateZ(5deg);
}
.foto:nth-of-type(2) {
    top: 15vw;
    transform: translateZ(5.26vw) rotateZ(-15deg);
}
.cajas {
    position: absolute;
}
.caja {
    position: absolute;
    width: 1vw;
    height: 1.5vw;
    left: 2vw;
    transform: translateZ(16.35vw);
}
.caja__front {
    width: 1vw;
    height: 0.75vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(0.75vw);
}
.caja__back {
    width: 1vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-0.75vw);
}
.caja__right {
    width: 1.5vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-1.5vw) translateY(-0.75vw);
}
.caja__left {
    width: 1.5vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
.caja__top {
    width: 1vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: translateZ(0.75vw);
}
.caja__bottom {
    width: 1vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1vw);
}
.caja__front {
    background-image: linear-gradient(to bottom, #9e99c1, #8079ae);
}
.caja__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(81, 137, 251, .4), transparent);
}
.caja__back {
    background-color: #9e99c1;
}
.caja__right {
    background-color: #645c98;
}
.caja__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(81, 137, 251, .85), rgba(40, 125, 210, .35));
}
.caja__left {
    background-color: #9e99c1;
}
.caja__top {
    background-color: #d9d0f6;
}
.caja__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(81, 137, 251, .85), rgba(40, 125, 210, .35));
}
.caja__bottom {
    background-color: #595388;
}
.caja__bottom::before {
    content: '';
    position: absolute;
    right: -50%;
    width: 150%;
    height: 120%;
    background-color: rgba(31, 33, 88, .5);
    filter: blur(0.15vw);
}
.caja:nth-of-type(1) {
    top: 11.6vw;
}
.caja:nth-of-type(2) {
    top: 13.5vw;
}
.caja:nth-of-type(3) {
    top: 17vw;
}
.cuadro-l, .cuadro-r {
    position: absolute;
    left: 13vw;
    top: 1vw;
    width: 5vw;
    height: 0.5vw;
    transform: translateZ(10vw);
}
.cuadro-r {
    left: 20vw;
}
.cuadro-l__front, .cuadro-r__front {
    width: 5vw;
    height: 7vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-6.75vw);
}
.cuadro-l__back, .cuadro-r__back {
    width: 5vw;
    height: 7vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-5vw) translateY(-7vw);
}
.cuadro-l__right, .cuadro-r__right {
    width: 0.25vw;
    height: 7vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(5vw) translateX(-0.25vw) translateY(-7vw);
}
.cuadro-l__left, .cuadro-r__left {
    width: 0.25vw;
    height: 7vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-7vw);
}
.cuadro-l__top, .cuadro-r__top {
    width: 5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: translateZ(7vw);
}
.cuadro-l__bottom, .cuadro-r__bottom {
    width: 5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-5vw);
}
.cuadro-l__front, .cuadro-r__front {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.cuadro-l__back, .cuadro-r__back {
    background-color: #383358;
    box-shadow: 0.35vw 0.35vw 0.35vw rgba(81, 137, 251, .2), -0.35vw 0.35vw 0.35vw rgba(81, 137, 251, .2), -0.35vw -0.35vw 0.35vw rgba(81, 137, 251, .2), 0.35vw -0.35vw 0.35vw rgba(81, 137, 251, .2);
}
.cuadro-l__right, .cuadro-r__right {
    background-color: #383358;
}
.cuadro-l__left, .cuadro-r__left {
    background-color: #9e99c1;
}
.cuadro-l__top, .cuadro-r__top {
    background-color: #9e99c1;
}
.cuadro-l__bottom, .cuadro-r__bottom {
    background-color: #383358;
}
.cuadro-l__front {
    background-image: url('clawpital.png');
    background-color: transparent;
    border: 1vw solid #d51e24;
}
.cuadro-l__front::before {
    content: '';
    position: absolute;
    top: -1vw;
    left: -1vw;
    width: 5vw;
    height: 7vw;
    background-origin: padding-box;
    background-image: linear-gradient(to bottom, rgba(40, 125, 210, .15), rgba(40, 125, 210, .15));
}
.cuadro-r__front {
    background-image: url('clawpital2.png');
    background-color: transparent;
    border: 0.5vw solid #0f1110;
}
.cuadro-r__front::before {
    content: '';
    position: absolute;
    top: -0.5vw;
    left: -0.5vw;
    width: 5vw;
    height: 7vw;
    background-origin: padding-box;
    background-image: linear-gradient(to bottom, rgba(40, 125, 210, .15), rgba(40, 125, 210, .15));
}
.puerta-c {
    position: absolute;
    left: 3vw;
    top: 1vw;
    width: 8vw;
    height: 0.5vw;
    transform: translateZ(0.5vw);
}
.puerta-c::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 200%;
    background-color: rgba(0, 0, 0, .65);
    filter: blur(0.5vw);
}
.puerta {
    position: absolute;
    left: 0.5vw;
    top: 0;
    width: 7vw;
    height: 0.5vw;
}
.puerta__front {
    width: 7vw;
    height: 16vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-15.75vw);
}
.puerta__back {
    width: 7vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-16vw);
}
.puerta__right {
    width: 0.25vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-0.25vw) translateY(-16vw);
}
.puerta__left {
    width: 0.25vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-16vw);
}
.puerta__top {
    width: 7vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: translateZ(16vw);
}
.puerta__bottom {
    width: 7vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-7vw);
}
.puerta__front {
    background-image: linear-gradient(to bottom, #0f1110, #121332);
    border: 0.125vw solid #5189fb;
}
.puerta__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(transparent 50%, rgba(4, 61, 174, .25));
    box-shadow: 0.65vw 0.65vw 0.5vw rgba(81, 137, 251, .6), -0.65vw 0.65vw 0.5vw rgba(81, 137, 251, .6), -0.65vw -0.65vw 0.5vw rgba(81, 137, 251, .6), 0.65vw -0.65vw 0.5vw rgba(81, 137, 251, .6);
}
.puerta__front::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.75vw;
    width: 1vw;
    height: 0.25vw;
    background-color: #9e99c1;
    box-shadow: 0.125vw 0.125vw 0.25vw rgba(81, 137, 251, .6), -0.125vw 0.125vw 0.25vw rgba(81, 137, 251, .6), -0.125vw -0.125vw 0.25vw rgba(81, 137, 251, .6), 0.125vw -0.125vw 0.25vw rgba(81, 137, 251, .6);
}
.puerta-l, .puerta-r {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.5vw;
    height: 0.5vw;
}
.puerta-l__front, .puerta-r__front {
    width: 0.5vw;
    height: 16vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-15.5vw);
}
.puerta-l__back, .puerta-r__back {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-16vw);
}
.puerta-l__right, .puerta-r__right {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-0.5vw) translateY(-16vw);
}
.puerta-l__left, .puerta-r__left {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-16vw);
}
.puerta-l__top, .puerta-r__top {
    width: 0.5vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: translateZ(16vw);
}
.puerta-l__bottom, .puerta-r__bottom {
    width: 0.5vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.5vw);
}
.puerta-l__front, .puerta-r__front {
    background-color: #121332;
}
.puerta-l__back, .puerta-r__back {
    background-color: #0b0c1f;
}
.puerta-l__right, .puerta-r__right {
    background-color: #0b0c1f;
}
.puerta-l__left, .puerta-r__left {
    background-color: #121332;
}
.puerta-l__bottom, .puerta-r__bottom {
    background-color: #0b0c1f;
}
.puerta-r {
    left: calc(100% - .5vw);
}
.puerta-t {
    left: 0;
    top: 0;
    width: 8vw;
    height: 0.5vw;
    transform: translateZ(16vw);
}
.puerta-t__front {
    width: 8vw;
    height: 0.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(0vw);
}
.puerta-t__back {
    width: 8vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-0.5vw);
}
.puerta-t__right {
    width: 0.5vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-0.5vw) translateY(-0.5vw);
}
.puerta-t__left {
    width: 0.5vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.puerta-t__top {
    width: 8vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: translateZ(0.5vw);
}
.puerta-t__bottom {
    width: 8vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-8vw);
}
.puerta-t__front {
    background-color: #121332;
}
.puerta-t__back {
    background-color: #0b0c1f;
}
.puerta-t__right {
    background-color: #0b0c1f;
}
.puerta-t__left {
    background-color: #121332;
}
.puerta-t__top {
    background-color: #1f2158;
}
.puerta-t__bottom {
    background-color: #0b0c1f;
}
.muro {
    position: absolute;
    left: 1vw;
    top: 6vw;
    width: 0.5vw;
    height: 16vw;
    transform: translateZ(0.51vw);
}
.muro__front {
    width: 0.5vw;
    height: 18vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-2vw);
}
.muro__back {
    width: 0.6vw;
    height: 18vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.6vw) translateY(-18vw);
    background-color: #0b0c1f;
    z-index: 10;
    backface-visibility: visible;
}
.muro__right {
    width: 16vw;
    height: 18vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-16vw) translateY(-18vw);
    z-index: 1;
}
.muro__left {
    width: 16vw;
    height: 18vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-18vw);
    background-color: #0b0c1f;
    z-index: 8;
}
.muro__top {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: translateZ(18vw);
}
.muro__bottom {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.5vw);
}
.muro__front {
    background-color: #0b0c1f;
}
.muro__right {
    display: flex;
    justify-content: center;
    background-image: radial-gradient(circle, #1f2158, #0b0c1f);
    overflow: hidden;
}
.muro__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(40, 125, 210, .25), transparent 30%, transparent 70%, rgba(40, 125, 210, .15));
}
.muro__right::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 25%;
    background-image: linear-gradient(to bottom, rgba(4, 5, 13, .75), rgba(4, 5, 13, .95));
    filter: blur(0.75vw);
}
.muro__left {
    background-color: #0b0c1f;
    box-shadow: 0.5vw 0.5vw 0.6vw rgba(81, 137, 251, .3), 0.5vw -0.5vw 0.6vw rgba(81, 137, 251, .3), -0.5vw 0.5vw 0.6vw rgba(81, 137, 251, .3), -0.5vw -0.5vw 0.6vw rgba(81, 137, 251, .3);
    z-index: 2;
}
.muro__top {
    background-color: #0b0c1f;
}
.muro__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background-image: linear-gradient(to left, rgba(40, 125, 210, .5), rgba(81, 137, 251, .25));
}
.muro__bottom {
    background-color: #0b0c1f;
}
.muro__bottom::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5vw;
    height: 100%;
    background-image: linear-gradient(to left, #0b0c1f, transparent 50%);
    transform-origin: right bottom;
    transform: skewY(-20deg);
    filter: blur(0.25vw);
}
.sillon-c {
    position: absolute;
    right: 2vw;
    bottom: 6vw;
    width: 6vw;
    height: 16vw;
    transform: translateZ(0.5vw);
    cursor: pointer;
}
.sillon-c::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-color: rgba(11, 12, 31, .85);
    filter: blur(0.75vw);
}
.sillon-b {
    position: absolute;
    left: 0;
    top: 1vw;
    width: 6vw;
    height: 14vw;
}
.sillon-b__front {
    width: 6vw;
    height: 3vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(11vw);
}
.sillon-b__back {
    width: 6vw;
    height: 3vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-3vw);
}
.sillon-b__right {
    width: 14vw;
    height: 3vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-14vw) translateY(-3vw);
}
.sillon-b__left {
    width: 14vw;
    height: 3vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw);
}
.sillon-b__top {
    width: 6vw;
    height: 14vw;
    transform-origin: top left;
    transform: translateZ(3vw);
}
.sillon-b__bottom {
    width: 6vw;
    height: 14vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-6vw);
}
.sillon-b__front {
    background-color: #121332;
}
.sillon-b__back {
    background-color: #0b0c1f;
}
.sillon-b__right {
    background-color: #0b0c1f;
}
.sillon-b__left {
    background-image: linear-gradient(to bottom, #121332, #0b0c1f);
}
.sillon-b__left::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(40, 125, 210, .1), transparent);
}
.sillon-b__top {
    background-image: linear-gradient(to right, #1f2158, #121332);
    border-left: 0.1vw solid rgba(158, 153, 193, .5);
}
.sillon-b__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(40, 125, 210, .25), transparent);
}
.sillon-b__bottom {
    background-color: #0b0c1f;
}
.sillon-l, .sillon-r {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 6vw;
    height: 1vw;
}
.sillon-l__front, .sillon-r__front {
    width: 6vw;
    height: 4.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-3.5vw);
}
.sillon-l__back, .sillon-r__back {
    width: 6vw;
    height: 4.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-4.5vw);
}
.sillon-l__right, .sillon-r__right {
    width: 1vw;
    height: 4.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-1vw) translateY(-4.5vw);
}
.sillon-l__left, .sillon-r__left {
    width: 1vw;
    height: 4.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-4.5vw);
}
.sillon-l__top, .sillon-r__top {
    width: 6vw;
    height: 1vw;
    transform-origin: top left;
    transform: translateZ(4.5vw);
}
.sillon-l__bottom, .sillon-r__bottom {
    width: 6vw;
    height: 1vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-6vw);
}
.sillon-l__front, .sillon-r__front {
    background-image: linear-gradient(to bottom, #121332, #0b0c1f);
}
.sillon-l__back, .sillon-r__back {
    background-color: #0b0c1f;
}
.sillon-l__right, .sillon-r__right {
    background-image: linear-gradient(to bottom, #0b0c1f, #000);
}
.sillon-l__left, .sillon-r__left {
    background-image: linear-gradient(to bottom, #121332, #0b0c1f);
}
.sillon-l__top, .sillon-r__top {
    background-image: linear-gradient(to right, #1f2158, #0f102b);
    border-bottom: 0.1vw solid rgba(158, 153, 193, .5);
}
.sillon-l__top::before, .sillon-r__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(40, 125, 210, .75), transparent);
}
.sillon-l__bottom, .sillon-r__bottom {
    background-color: #0b0c1f;
}
.sillon-r {
    top: 0;
}
.sillon-t {
    position: absolute;
    right: 0;
    top: 1vw;
    width: 1vw;
    height: 1vw;
    transform-origin: right;
    transform: rotateY(7deg);
}
.sillon-t__front {
    width: 1vw;
    height: 6.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(7.5vw);
}
.sillon-t__back {
    width: 1vw;
    height: 6.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-6.5vw);
}
.sillon-t__right {
    width: 14vw;
    height: 6.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-14vw) translateY(-6.5vw);
}
.sillon-t__left {
    width: 14vw;
    height: 6.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-6.5vw);
}
.sillon-t__top {
    width: 1vw;
    height: 14vw;
    transform-origin: top left;
    transform: translateZ(6.5vw);
}
.sillon-t__bottom {
    width: 1vw;
    height: 14vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1vw);
}
.sillon-t__front {
    background-image: linear-gradient(to bottom, #0b0c1f, #070814);
}
.sillon-t__back {
    background-image: linear-gradient(to bottom, #0b0c1f, #0b0c1f);
}
.sillon-t__right {
    background-image: linear-gradient(to bottom, #0b0c1f, #000);
}
.sillon-t__left {
    background-color: #121332;
}
.sillon-t__top {
    background-image: linear-gradient(to right, #1f2158, #0f102b);
    border-bottom: 0.1vw solid rgba(158, 153, 193, .5);
}
.sillon-t__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(40, 125, 210, .5), transparent);
}
.sillon-t__bottom {
    background-color: #0b0c1f;
}
.mesa-c {
    position: absolute;
    left: 7vw;
    top: 9.5vw;
    width: 10vw;
    height: 9vw;
    transform: translateZ(0.5vw);
}
.mesa-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10%;
    background-color: rgba(11, 12, 31, .95);
    filter: blur(1vw);
    transform: translateZ(0);
}
.mesa {
    position: absolute;
    left: 0;
    top: 0;
    width: 10vw;
    height: 9vw;
    transform: translateZ(2vw);
}
.mesa__front {
    width: 10vw;
    height: 0.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(8.5vw);
}
.mesa__back {
    width: 10vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-10vw) translateY(-0.5vw);
}
.mesa__right {
    width: 9vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(10vw) translateX(-9vw) translateY(-0.5vw);
}
.mesa__left {
    width: 9vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.mesa__top {
    width: 10vw;
    height: 9vw;
    transform-origin: top left;
    transform: translateZ(0.5vw);
}
.mesa__bottom {
    width: 10vw;
    height: 9vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-10vw);
}
.mesa__front {
    background-image: linear-gradient(to right, #0b0c1f, #000);
}
.mesa__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, rgba(81, 137, 251, .125), rgba(180, 205, 253, .25), transparent 55%);
}
.mesa__back {
    background-color: #0b0c1f;
}
.mesa__right {
    background-color: #000;
}
.mesa__left {
    background-color: #121332;
}
.mesa__top {
    background-image: linear-gradient(45deg, #0e0f27, #04050d);
    overflow: hidden;
}
.mesa__top::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 50%;
    background-image: linear-gradient(45deg, rgba(81, 137, 251, .5), rgba(251, 250, 254, .125) 50%, transparent 55%);
    filter: blur(0.5vw);
}
.mesa__top::after {
    content: '';
    position: absolute;
    left: 2vw;
    top: 2vw;
    width: 20%;
    height: 50%;
    border-radius: 50%;
    background-color: rgba(40, 125, 210, .079);
    transform: rotateZ(-40deg);
    filter: blur(0.75vw);
}
.mesa__bottom {
    background-color: #0b0c1f;
}
.mesa-p {
    position: absolute;
    width: 0.25vw;
    height: 0.25vw;
}
.mesa-p__front {
    width: 0.25vw;
    height: 1.75vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-1.5vw);
}
.mesa-p__back {
    width: 0.25vw;
    height: 1.75vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.25vw) translateY(-1.75vw);
}
.mesa-p__right {
    width: 0.25vw;
    height: 1.75vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.25vw) translateX(-0.25vw) translateY(-1.75vw);
}
.mesa-p__left {
    width: 0.25vw;
    height: 1.75vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vw);
}
.mesa-p__top {
    width: 0.25vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: translateZ(1.75vw);
}
.mesa-p__bottom {
    width: 0.25vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.25vw);
}
.mesa-p__front {
    background-color: #0b0c1f;
}
.mesa-p__back {
    background-color: #0b0c1f;
}
.mesa-p__right {
    background-color: #000;
}
.mesa-p__left {
    background-color: #121332;
}
.mesa-p__top {
    background-color: #1f2158;
}
.mesa-p__bottom {
    background-color: #0b0c1f;
}
.mesa-p__bottom::before {
    content: '';
    position: absolute;
    width: 600%;
    height: 200%;
    top: 0;
    right: 0;
    border-radius: 10%;
    transform: translateZ(-0.1vw);
    background-color: rgba(0, 0, 0, .75);
    filter: blur(0.35vw);
}
.mesa-p:nth-of-type(1) {
    left: 0.5vw;
    top: 0.5vw;
}
.mesa-p:nth-of-type(2) {
    right: 0.5vw;
    top: 0.5vw;
}
.mesa-p:nth-of-type(3) {
    left: 0.5vw;
    bottom: 0.5vw;
}
.mesa-p:nth-of-type(4) {
    right: 0.5vw;
    bottom: 0.5vw;
}
.tablet {
    position: absolute;
    left: 13vw;
    top: 12vw;
    width: 2vw;
    height: 2.5vw;
    transform: translateZ(3.01vw) rotateZ(15deg);
    cursor: pointer;
    transition: transform 0.1s linear;
    transform-style: preserve-3d;
}
.tablet__front {
    width: 2vw;
    height: 0.125vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(2.375vw);
}
.tablet__back {
    width: 2vw;
    height: 0.125vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-0.125vw);
}
.tablet__right {
    width: 2.5vw;
    height: 0.125vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-2.5vw) translateY(-0.125vw);
}
.tablet__left {
    width: 2.5vw;
    height: 0.125vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.125vw);
}
.tablet__top {
    width: 2vw;
    height: 2.5vw;
    transform-origin: top left;
    transform: translateZ(0.125vw);
}
.tablet__bottom {
    width: 2vw;
    height: 2.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-2vw);
}
.tablet__front {
    background-color: #8079ae;
}
.tablet__back {
    background-color: #383358;
}
.tablet__right {
    background-color: #383358;
}
.tablet__left {
    background-color: #9e99c1;
}
.tablet__top {
    background-image: url('manifest-cover.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #83abfc;
    border: 0.2vw solid rgba(81, 137, 251, .25);
    animation: pantalla-tablet 0.25s infinite;
}
.tablet__bottom {
    background-color: #000;
    box-shadow: 0.25vw 0.25vw 0.5vw rgba(24, 74, 124, .75), -0.25vw 0.25vw 0.5vw rgba(24, 74, 124, .75), -0.25vw -0.25vw 0.5vw rgba(24, 74, 124, .75), 0.25vw -0.25vw 0.5vw rgba(24, 74, 124, .75);
}
/**********************/
/**********************/
@keyframes pantalla-tablet {
    from {
        background-color: #6a9afb;
   }
}
@keyframes pantalla-tv {
    from {
        background-color: #6a9afb;
        box-shadow: 0.125vw 0.125vw 0vw rgba(81, 137, 251, 0), -0.125vw 0.125vw 0vw rgba(81, 137, 251, 0), 0.125vw -0.125vw 0vw rgba(81, 137, 251, 0), -0.125vw -0.125vw 0vw rgba(81, 137, 251, 0);
   }
}
@keyframes luz-tv {
    from {
        background-image: radial-gradient(rgba(36, 112, 188, .8), rgba(56, 121, 250, .8));
   }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.win-window {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f5f5f5;
    border: 2px solid #d0d0d0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.06), 3px 3px 6px rgba(0,0,0,0.1);
}
.modal-content {
    background: #f5f5f5;
    margin: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    max-height: 85vh;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
    animation: slideIn 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.modal-content .win-content.modal-body {
    padding: 1rem 1.25rem;
}
.modal-content .modal-body h2 {
    color: #374151;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.modal-content .modal-body p {
    line-height: 1.7;
    font-size: 0.95rem;
    color: #4b5563;
    text-align: justify;
}

/* Documentation window */
.docs-window { max-height: 85vh; }
.docs-content {
    overflow-y: auto;
    max-height: calc(85vh - 40px);
    padding: 1.25rem 1.5rem;
}
.docs-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #374151;
    line-height: 1.65;
}
.docs-body h1 {
    font-size: 1.5rem;
    margin: 0 0 0.75rem 0;
    color: #111827;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.5rem;
}
.docs-body h2 {
    font-size: 1.15rem;
    margin: 1.5rem 0 0.5rem 0;
    color: #1f2937;
}
.docs-body p, .docs-body ul { margin: 0 0 0.75rem 0; font-size: 0.9rem; color: #4b5563; }
.docs-body ul { padding-left: 1.5rem; }
.docs-body li { margin-bottom: 0.35rem; }
.docs-lead { font-size: 0.95rem; color: #6b7280; }
.docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0.75rem 0;
}
.docs-table th, .docs-table td {
    border: 1px solid #e0e0e0;
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.docs-table th { background: #f0f0f0; color: #374151; font-weight: 600; }
.docs-table code { font-size: 0.8em; }
.docs-code {
    display: block;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.8rem;
    overflow-x: auto;
    margin: 0.5rem 0;
}
.docs-link { color: #5189fb; text-decoration: none; }
.docs-link:hover { text-decoration: underline; }

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* DApp overlay (при клике на телевизор) */
.dapp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10003;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}
.dapp-overlay.is-visible {
    display: flex;
}
.dapp-frame {
    width: 72vw;
    max-width: 1100px;
    height: 78vh;
    max-height: 720px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}
.dapp-topbar.dapp-topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    color: #374151;
    font-size: 0.85rem;
}
.dapp-topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.6rem 1rem;
    background: #12132a;
    border-bottom: 1px solid rgba(81, 137, 251, 0.3);
    color: #83abfc;
    font-size: 0.85rem;
}
.dapp-agent-name { font-weight: 700; }
.dapp-status {
    padding: 0.2rem 0.5rem;
    background: rgba(81, 137, 251, 0.2);
    border-radius: 4px;
    color: #b7d4ff;
}
.dapp-status.executing { background: rgba(52, 211, 153, 0.2); color: #059669; }
.dapp-status.cooldown { background: rgba(81, 137, 251, 0.15); color: #5189fb; }
.dapp-status.signal { background: rgba(168, 85, 247, 0.15); color: #7c3aed; }
.dapp-heartbeat { margin-left: auto; color: #6b7280; font-size: 0.75rem; }
.dapp-main {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}
.dapp-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.dapp-panel.is-active {
    display: flex;
}
.dapp-panel-think {
    padding: 0.75rem;
    overflow-y: auto;
}

/* Capital Allocation */
.capital-allocation {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
}
.capital-allocation h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.capital-chart {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.capital-allocation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.capital-allocation-table th,
.capital-allocation-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}
.capital-allocation-table th {
    background: linear-gradient(180deg, #f2f2f2, #e8e8e8);
    color: #374151;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.capital-allocation-table td {
    color: #1a1a1a;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.capital-allocation-table .growth-positive {
    color: #4CAF50;
    font-weight: 700;
}
.capital-allocation-table .growth-negative {
    color: #dc2626;
    font-weight: 700;
}

/* Window Resize Handle */
.win-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: nwse-resize;
    z-index: 10;
    background: linear-gradient(135deg, transparent 0%, transparent 40%, #d0d0d0 40%, #d0d0d0 45%, transparent 45%, transparent 55%, #d0d0d0 55%, #d0d0d0 60%, transparent 60%, transparent 100%);
}
.win-resize-handle:hover {
    background: linear-gradient(135deg, transparent 0%, transparent 40%, #5189fb 40%, #5189fb 45%, transparent 45%, transparent 55%, #5189fb 55%, #5189fb 60%, transparent 60%, transparent 100%);
}

/* Trade and Narrative Detail Windows */
.trade-detail-window,
.narrative-detail-window {
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.trade-detail-window .win-content,
.narrative-detail-window .win-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
}
.dapp-think-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.dapp-think-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #374151;
}
.dapp-btn-run {
    padding: 0.4rem 0.8rem;
    background: linear-gradient(180deg, #5189fb, #3b78e0);
    color: #fff;
    border: 2px solid #2563eb;
    border-radius: 2px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.15);
}
.dapp-btn-run:hover {
    background: linear-gradient(180deg, #6099fc, #5189fb);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3), inset -1px -1px 0 rgba(0,0,0,0.12);
}
.dapp-btn-run:active {
    background: linear-gradient(180deg, #3b78e0, #2563eb);
    box-shadow: inset -1px -1px 0 rgba(255,255,255,0.2), inset 1px 1px 0 rgba(0,0,0,0.2);
}
.dapp-think-log {
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    padding: 0.6rem 0.8rem;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
    color: #374151;
    min-height: 120px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.06), inset -1px -1px 0 rgba(255,255,255,0.8);
}
.dapp-think-log .dapp-think-line {
    margin-bottom: 0.2rem;
}
.dapp-think-log .dapp-think-line.thinking { color: #5189fb; }
.dapp-think-results {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dapp-think-result-card {
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
}
.dapp-think-result-card strong { color: #374151; }
.dapp-think-result-card .heat {
    color: #5189fb;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.dapp-panel-feed .dapp-feed-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    background: #f5f5f5;
}
.dapp-panel-narratives {
    padding: 0.75rem;
    overflow-y: auto;
}
.dapp-narratives-analytics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
}
.dapp-narrative-metric {
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    padding: 0.6rem;
    font-size: 0.78rem;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
}
.dapp-narrative-metric .name { font-weight: 600; color: #374151; }
.dapp-narrative-metric .value {
    color: #5189fb;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.dapp-narrative-metric .change.positive { color: #4CAF50; font-family: 'JetBrains Mono', Consolas, monospace; }
.dapp-narrative-metric .change.negative { color: #dc2626; font-family: 'JetBrains Mono', Consolas, monospace; }
.dapp-panel-wallet {
    padding: 0.75rem;
    overflow-y: auto;
}
.dapp-wallet-card {
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    padding: 1rem;
    max-width: 360px;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
}
.dapp-wallet-card h3 { margin: 0 0 0.5rem 0; font-size: 0.9rem; color: #374151; }
.dapp-wallet-address {
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
    word-break: break-all;
    color: #6b7280;
    margin-bottom: 0.75rem;
}
.dapp-wallet-balance {
    font-size: 1.25rem;
    font-weight: 700;
    color: #374151;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.dapp-wallet-balance .usd { font-size: 0.85rem; color: #6b7280; font-weight: 400; }
.dapp-panel-history {
    padding: 0.75rem;
    overflow: auto;
}
.dapp-history-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
}
.dapp-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.dapp-history-table th,
.dapp-history-table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 2px solid #e0e0e0;
}
.dapp-history-table th {
    background: linear-gradient(180deg, #f2f2f2, #e8e8e8);
    color: #374151;
    font-weight: 600;
    border: 1px solid #d0d0d0;
}
.dapp-history-table td {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.dapp-history-table td.pnl-positive { color: #4CAF50; font-weight: 600; }
.dapp-history-table td.pnl-negative { color: #dc2626; font-weight: 600; }
.dapp-frame .dapp-feed-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    background: #f5f5f5;
}
.dapp-feed-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    background: #0a0b14;
}
.dapp-feed {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dapp-entry {
    padding: 0.5rem 0.75rem;
    border-radius: 2px;
    background: #fff;
    border: 2px solid #d0d0d0;
    border-left: 4px solid #5189fb;
    font-size: 0.8rem;
    color: #374151;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
    animation: dappEntryIn 0.3s ease;
}
@keyframes dappEntryIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.dapp-entry .dapp-entry-time { color: #6b7280; margin-right: 0.5rem; }
.dapp-entry .dapp-entry-type { color: #5189fb; margin-right: 0.5rem; font-weight: 600; }
.dapp-entry.tthought .dapp-entry-type { color: #7c3aed; }
.dapp-entry.signal .dapp-entry-type { color: #a855f7; }
.dapp-entry.decision .dapp-entry-type { color: #4CAF50; }
.dapp-entry.execution .dapp-entry-type { color: #5189fb; }
.dapp-entry.result .dapp-entry-type { color: #2563eb; }
.dapp-entry .dapp-entry-tags { margin-top: 0.25rem; font-size: 0.7rem; color: #6b7280; }
.dapp-frame .dapp-sidebar {
    width: 220px;
    flex-shrink: 0;
    padding: 0.75rem;
    background: #f0f0f0;
    border-left: 1px solid #e0e0e0;
    overflow-y: auto;
}
.dapp-sidebar {
    width: 220px;
    flex-shrink: 0;
    padding: 0.75rem;
    background: #0f1020;
    border-left: 1px solid rgba(81, 137, 251, 0.2);
    overflow-y: auto;
}
.dapp-sidebar h3 {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.dapp-positions-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.dapp-position {
    font-size: 0.75rem;
    padding: 0.5rem 0.6rem;
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    color: #374151;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
}
.dapp-position .pnl {
    float: right;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.dapp-position .pnl.positive { color: #4CAF50; }
.dapp-position .pnl.negative { color: #dc2626; }
.dapp-metrics { display: flex; flex-direction: column; gap: 0.35rem; }
.dapp-metric {
    display: flex; justify-content: space-between; font-size: 0.75rem; color: #6b7280;
}
.dapp-metric-value {
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.dapp-metric-value.positive {
    color: #4CAF50;
}
.dapp-metric-value.negative {
    color: #dc2626;
}
.dapp-metric-value {
    color: #374151;
    font-weight: 600;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.dapp-frame .dapp-sidebar h3 { color: #374151; }

/* Trade Detail Modal */
.trade-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}
.trade-detail-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.trade-detail-content {
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.trade-detail-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}
.trade-detail-section {
    margin-bottom: 1.5rem;
}
.trade-detail-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.trade-detail-section h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.trade-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.trade-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
}
.trade-detail-item .label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.trade-detail-item .value {
    font-size: 0.9rem;
    color: #1a1a1a;
    font-weight: 700;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.trade-detail-item .value.status-open {
    color: #4CAF50;
}
.trade-detail-item .value.status-closed {
    color: #6b7280;
}
.trade-reasoning {
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    padding: 1rem;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #374151;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.trade-reasoning p {
    margin: 0 0 0.75rem 0;
}
.trade-reasoning p:last-child {
    margin-bottom: 0;
}
.trade-row:hover {
    background: #f5f5f5;
}
.trade-row.expanded {
    background: #f0f0f0;
    border-bottom: 2px solid #5189fb;
}
.trade-row .expand-icon {
    display: inline-block;
    font-size: 0.7rem;
    color: #5189fb;
    margin-right: 0.25rem;
    transition: transform 0.2s ease;
    vertical-align: middle;
}
.trade-row.expanded .expand-icon {
    transform: rotate(90deg);
}
.trade-detail-row {
    background: #fafafa;
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}
.trade-detail-cell {
    padding: 1.5rem !important;
    background: #fafafa;
    border-top: 2px solid #d0d0d0;
    border-bottom: 2px solid #d0d0d0;
}
.trade-detail-cell .trade-detail-section {
    margin-bottom: 1.5rem;
}
.trade-detail-cell .trade-detail-section:last-child {
    margin-bottom: 0;
}
.trade-detail-cell .trade-detail-section h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.trade-detail-cell .trade-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.trade-detail-cell .trade-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8), inset -1px -1px 0 rgba(0,0,0,0.05);
}
.trade-detail-cell .trade-detail-item .label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.trade-detail-cell .trade-detail-item .value {
    font-size: 0.9rem;
    color: #1a1a1a;
    font-weight: 700;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.trade-detail-cell .trade-detail-item .value.status-open {
    color: #4CAF50;
}
.trade-detail-cell .trade-detail-item .value.status-closed {
    color: #6b7280;
}
.trade-detail-cell .trade-reasoning {
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    padding: 1rem;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #374151;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.trade-detail-cell .trade-reasoning p {
    margin: 0 0 0.75rem 0;
}
.trade-detail-cell .trade-reasoning p:last-child {
    margin-bottom: 0;
}

/* Narrative clickable entries */
.dapp-entry.narrative-clickable {
    border-left: 3px solid #5189fb;
    padding-left: 0.5rem;
}
.dapp-entry-click-hint {
    font-size: 0.7rem;
    color: #6b7280;
    font-style: italic;
    margin-top: 0.25rem;
}

/* Narrative Detail Window */
.narrative-detail-window {
    display: none;
}
.narrative-detail-body {
    padding: 1.25rem;
    overflow-y: auto;
}
.narrative-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.narrative-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    text-align: center;
}
.narrative-stat .label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.narrative-stat .value {
    font-size: 1.1rem;
    color: #1a1a1a;
    font-weight: 700;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.narrative-chart {
    width: 100%;
    min-height: 200px;
    margin-bottom: 1rem;
}
.narrative-reasoning {
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    padding: 1rem;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #374151;
}

/* Polymarket Panel */
.dapp-panel-polymarket {
    padding: 0.75rem;
    overflow-y: auto;
}
.polymarket-events {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.polymarket-event {
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    padding: 1rem;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
}
.polymarket-event-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}
.polymarket-event-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}
.polymarket-event-odds {
    margin-bottom: 0.75rem;
}
.polymarket-odds-bar {
    display: flex;
    height: 32px;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    overflow: hidden;
}
.polymarket-odds-yes {
    background: linear-gradient(180deg, #4CAF50, #43a047);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
.polymarket-odds-no {
    background: linear-gradient(180deg, #dc2626, #b91c1c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
.polymarket-model-bet {
    background: linear-gradient(180deg, #f0f7ff, #e0efff);
    border: 1px solid #5189fb;
    border-radius: 2px;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: #1a1a1a;
    margin-top: 0.75rem;
}
.polymarket-model-bet strong {
    color: #5189fb;
    font-weight: 700;
}
.polymarket-model-bet em {
    color: #6b7280;
    font-size: 0.8rem;
    display: block;
    margin-top: 0.5rem;
}
.polymarket-no-bet {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}
.polymarket-event-link {
    color: #5189fb;
    text-decoration: none;
    font-weight: 600;
}
.polymarket-event-link:hover {
    text-decoration: underline;
    color: #3b78e0;
}

/* Narratives List */
.narratives-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    overflow-y: auto;
}
.narrative-card-expandable {
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    padding: 1rem;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.narrative-card-expandable:hover {
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04), 2px 2px 4px rgba(0,0,0,0.1);
}
.narrative-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
.narrative-card-title h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.narrative-metrics {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
}
.narrative-heat {
    color: #6b7280;
    font-weight: 600;
}
.narrative-change {
    font-weight: 700;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.narrative-change.positive {
    color: #4CAF50;
}
.narrative-change.negative {
    color: #dc2626;
}
.narrative-expand-btn {
    width: 24px;
    height: 24px;
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    border: 1px solid #b3b3b3;
    border-radius: 2px;
    color: #1a1a1a;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b3b3b3;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.narrative-expand-btn:hover {
    background: linear-gradient(180deg, #fff, #ebebeb);
}
.narrative-card-summary {
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.narrative-card-full {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e0e0e0;
}
.narrative-full-analysis {
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
.narrative-full-analysis p {
    margin: 0 0 0.5rem 0;
}
.narrative-list-item {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}
.narrative-factors {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    padding: 0.5rem;
    background: #f9f9f9;
    border-radius: 2px;
}
.narrative-factors strong {
    color: #374151;
    font-style: normal;
}
.dapp-frame .dapp-tabs {
    display: flex;
    gap: 0;
    padding: 0 0.5rem 0.5rem;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
}
.dapp-tabs {
    display: flex;
    gap: 0;
    padding: 0 0.5rem 0.5rem;
    background: #12132a;
    border-top: 1px solid rgba(81, 137, 251, 0.2);
}
.dapp-tab {
    padding: 0.4rem 0.8rem;
    background: linear-gradient(180deg, #f2f2f2, #e0e0e0);
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b3b3b3;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.dapp-tab:hover {
    color: #5189fb;
    background: linear-gradient(180deg, #fff, #ebebeb);
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #ccc;
}
.dapp-tab.active {
    background: linear-gradient(180deg, #5189fb, #3b78e0);
    color: #fff;
    border-color: #2563eb;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.15);
}
.dapp-tab.active:active {
    background: linear-gradient(180deg, #3b78e0, #2563eb);
    box-shadow: inset -1px -1px 0 rgba(255,255,255,0.2), inset 1px 1px 0 rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .modal-content {
        width: 90%;
    }
    .modal-content .modal-body {
        padding: 0.75rem 1rem;
    }
    .modal-content .modal-body h2 {
        font-size: 1.1rem;
    }
    .modal-content .modal-body p {
        font-size: 0.9rem;
    }
}

/* ========== Windows-style (red titlebar, gray content) ========== */
.win-titlebar {
    background: #c42b2b;
    color: #fff;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 13px;
    min-height: 28px;
    box-sizing: border-box;
}
.win-title {
    flex: 1;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    min-width: 0;
}
/* X icon for close button (Windows-style) */
.win-icon-x {
    display: block;
    width: 10px;
    height: 10px;
    position: relative;
    margin: 0 auto;
}
.win-icon-x::before,
.win-icon-x::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.win-icon-x::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.win-icon-x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.win-btn-close .win-icon-x {
    color: #fff;
}
.win-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}
.win-btn {
    width: 18px;
    height: 16px;
    min-width: 18px;
    min-height: 16px;
    border: 1px solid rgba(0,0,0,0.2);
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 #ccc;
}
.win-btn:hover {
    background: linear-gradient(180deg, #f5f9fc, #e8eef2);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #bbb;
}
.win-btn:active {
    background: linear-gradient(180deg, #e8e8e8, #ddd);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.8), inset 0 1px 0 #bbb;
}
.win-btn-close {
    background: linear-gradient(180deg, #e03636, #b31919);
    border-color: rgba(0,0,0,0.25);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 #7a1515;
}
.win-btn-close:hover {
    background: linear-gradient(180deg, #ea4040, #c91d1d);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 #8b1a1a;
}
.win-btn-close:active {
    background: linear-gradient(180deg, #c91d1d, #9c1616);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.2), inset 0 1px 0 #7a1515;
}
.win-content {
    background: #f5f5f5;
    flex: 1;
    overflow: auto;
    min-height: 0;
    color: #374151;
}

/* Inset (recessed) and groupbox - reference style in our colors */
.win-inset {
    background: #fff;
    border: 2px solid #d0d0d0;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.06), inset -1px -1px 0 rgba(255,255,255,0.8);
}
.win-groupbox {
    border: 2px solid #d0d0d0;
    padding: 16px;
    position: relative;
    margin-top: 10px;
    background: #f5f5f5;
}
.win-groupbox-label {
    position: absolute;
    top: -10px;
    left: 10px;
    background: #f5f5f5;
    padding: 0 8px;
    font-weight: 600;
    font-size: 13px;
    color: #374151;
}

/* Social buttons container (left side, vertical, centered) */
.social-buttons {
    position: fixed;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10011;
}

/* Common styles for all social buttons */
.social-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b3b3b3;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    text-decoration: none;
    padding: 4px;
    box-sizing: border-box;
}
.social-btn:hover {
    background: linear-gradient(180deg, #fff, #ebebeb);
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #ccc;
}
.social-btn:active {
    background: linear-gradient(180deg, #e8e8e8, #d8d8d8);
    box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #b3b3b3;
    transform: scale(0.98);
}

/* Twitter/X button */
.twitter-x-btn {
    color: #1a1a1a;
}
.twitter-x-btn:hover {
    color: #1a1a1a;
}
.twitter-x-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* PumpFun button */
.pumpfun-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* GitHub button */
.github-btn {
    color: #1a1a1a;
}
.github-btn:hover {
    color: #1a1a1a;
}
.github-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Dev button */
.dev-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

/* Balance counter (right side, centered vertically) */
.balance-counter {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10011;
    background: linear-gradient(180deg, #e03636, #b31919);
    border: 2px solid #7a1515;
    border-radius: 2px;
    padding: 20px 32px;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.3), 2px 2px 4px rgba(0,0,0,0.1);
    min-width: 280px;
    text-align: center;
}
.balance-label {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.balance-value {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 52px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3), -1px -1px 0 rgba(0,0,0,0.2);
    font-variant-numeric: tabular-nums;
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin-bottom: 12px;
}
.balance-metrics {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}
.metric-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 2px;
    padding: 6px 12px;
    min-width: 70px;
    cursor: pointer;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.1), inset -1px -1px 0 rgba(0,0,0,0.2);
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.metric-btn:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.15), inset -1px -1px 0 rgba(0,0,0,0.25);
}
.metric-btn:active {
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    box-shadow: inset -1px -1px 0 rgba(255,255,255,0.1), inset 1px 1px 0 rgba(0,0,0,0.3);
    transform: scale(0.98);
}
.metric-label {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.metric-value {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    font-variant-numeric: tabular-nums;
}
.balance-value.updating {
    animation: balanceUpdate 0.4s ease;
}
@keyframes balanceUpdate {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Camera toggle (left side, with social buttons) */
.camera-toggle-wrapper {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.camera-toggle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #d0d0d0;
    border: 1px solid #b3b3b3;
    border-radius: 2px;
    padding: 2px;
}
.toggle-btn {
    width: 20px;
    height: 28px;
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    border: 1px solid #b3b3b3;
    border-radius: 1px;
    color: #1a1a1a;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b3b3b3;
    transition: background 0.2s, box-shadow 0.2s;
    padding: 0;
}
.toggle-btn:hover {
    background: linear-gradient(180deg, #fff, #ebebeb);
}
.toggle-btn.active {
    background: linear-gradient(180deg, #5189fb, #3b78e0);
    color: #fff;
    border-color: #2563eb;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.15);
}
.toggle-btn.active:hover {
    background: linear-gradient(180deg, #6099fc, #5189fb);
}
.toggle-btn:active {
    background: linear-gradient(180deg, #e8e8e8, #d8d8d8);
    box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #b3b3b3;
}
.toggle-btn.active:active {
    background: linear-gradient(180deg, #3b78e0, #2563eb);
    box-shadow: inset -1px -1px 0 rgba(255,255,255,0.2), inset 1px 1px 0 rgba(0,0,0,0.2);
}

/* Taskbar for minimized windows */
.win-taskbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: #c42b2b;
    border-top: 2px solid #000;
    z-index: 10010;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
}
.win-taskbar.has-items {
    display: flex;
}
.win-taskbar-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.win-taskbar-item {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    min-height: 22px;
    max-width: 180px;
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b3b3b3;
}
.win-taskbar-item:hover {
    background: linear-gradient(180deg, #e8f0fe, #d0e0fc);
    border-color: #5189fb;
    color: #1e40af;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(81,137,251,0.3);
}
.win-taskbar-item:active {
    background: linear-gradient(180deg, #d0d0d0, #e0e0e0);
    box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #b3b3b3;
}
.win-taskbar-item:hover:active {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #fff;
    border-color: #1d4ed8;
}

/* Painting focus: dimmer + overlays */
.painting-dimmer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.painting-dimmer.is-active {
    display: block;
}
.cuadro-l.is-focused .cuadro-l__front,
.cuadro-r.is-focused .cuadro-r__front {
    box-shadow: 0 0 1.5vw rgba(81, 137, 251, 0.5);
    transition: box-shadow 0.35s ease;
}
.cuadro-l, .cuadro-r {
    cursor: pointer;
}

.painting-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10003;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.painting-overlay.is-visible {
    display: flex;
    pointer-events: auto;
}
.painting-overlay.is-visible .painting-panel {
    opacity: 1;
    transform: scale(1);
}
.painting-panel {
    width: 58vw;
    max-width: 520px;
    max-height: 70vh;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.painting-panel .win-content.painting-panel-scroll-wrap,
.painting-panel .win-content.painting-panel-grid-wrap {
    padding: 0;
}
.painting-panel-title {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    color: #374151;
    border-bottom: 1px solid #e0e0e0;
}
.painting-panel-scroll {
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #f5f5f5;
}
.painting-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
    overflow-y: auto;
    background: #f5f5f5;
}

.narrative-card {
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    border-left: 4px solid #5189fb;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
    animation: narrativeCardIn 0.4s ease backwards;
}
.narrative-card:nth-child(1) { animation-delay: 0.05s; }
.narrative-card:nth-child(2) { animation-delay: 0.12s; }
.narrative-card:nth-child(3) { animation-delay: 0.19s; }
.narrative-card:nth-child(4) { animation-delay: 0.26s; }
.narrative-card:hover {
    background: #fafafa;
    border-color: #c0c0c0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.06);
}
@keyframes narrativeCardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.narrative-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.narrative-name {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}
.narrative-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
}
.narrative-status.status-observing { background: #f0f0f0; color: #6b7280; }
.narrative-status.status-watching { background: rgba(81, 137, 251, 0.15); color: #5189fb; }
.narrative-status.status-active { background: rgba(52, 211, 153, 0.2); color: #059669; }
.narrative-status.status-exited { background: #eee; color: #6b7280; }
.narrative-desc {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0 0 0.4rem 0;
}
.narrative-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #6b7280;
}
.narrative-heat .heat-value {
    color: #5189fb;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    animation: heatPulse 2s ease-in-out infinite;
}
@keyframes heatPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}
.narrative-sources {
    display: flex;
    gap: 0.35rem;
}
.src-icon {
    font-size: 0.7rem;
    opacity: 0.8;
}

.agent-card {
    padding: 0.65rem;
    background: #fff;
    border-radius: 2px;
    border: 2px solid #d0d0d0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.agent-card:hover {
    background: #fafafa;
    border-color: #c0c0c0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,0.06);
}
.agent-card.expanded {
    grid-column: 1 / -1;
}
.agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #5189fb, #2563eb);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agent-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.78rem;
}
.agent-name { color: #374151; font-weight: 600; }
.agent-strategy { color: #6b7280; }
.agent-pnl.positive { color: #4CAF50; }
.agent-pnl.negative { color: #dc2626; }
.agent-status { font-size: 0.7rem; text-transform: uppercase; }
.agent-status.status-live { color: #059669; }
.agent-status.status-paused { color: #6b7280; }
.agent-card-expanded {
    display: none;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e0e0e0;
    font-size: 0.75rem;
    color: #6b7280;
}
.agent-card.expanded .agent-card-expanded {
    display: block;
}
.agent-equity-label { margin-bottom: 0.25rem; }
.agent-equity-placeholder {
    height: 40px;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 0.35rem;
}
.agent-trades, .agent-metrics { margin-top: 0.2rem; }

/* Observation mode (sofa) */
.observation-dimmer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.observation-dimmer.is-active {
    display: block;
}
.observation-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10003;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.observation-overlay.is-visible {
    display: flex;
    pointer-events: auto;
}
.observation-panel {
    width: 42vw;
    max-width: 420px;
    max-height: 60vh;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.observation-panel .win-content {
    padding: 0.75rem;
}
.observation-status {
    font-size: 0.8rem;
    color: #374151;
    margin-bottom: 0.5rem;
}
.observation-feed {
    flex: 1;
    overflow-y: auto;
    font-size: 0.75rem;
    color: #374151;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.observation-entry {
    padding: 0.3rem 0;
    border-bottom: 1px solid #e0e0e0;
}
.observation-time { color: #6b7280; margin-right: 0.35rem; }
.observation-type { color: #374151; font-weight: 600; margin-right: 0.35rem; }
.observation-stand-up {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    border: 2px solid #d0d0d0;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
    align-self: flex-start;
    font-family: inherit;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b3b3b3;
}
.observation-stand-up:hover {
    background: linear-gradient(180deg, #e8f0fe, #d0e0fc);
    color: #1e40af;
    border-color: #5189fb;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(81,137,251,0.25);
}
.observation-stand-up:active {
    background: linear-gradient(180deg, #5189fb, #3b78e0);
    color: #fff;
    box-shadow: inset -1px -1px 0 rgba(255,255,255,0.2), inset 1px 1px 0 rgba(0,0,0,0.15);
}

/* Deploy mode (door) */
.deploy-dimmer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10004;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.deploy-dimmer.is-active {
    display: block;
}
.puerta-c.is-door-open .puerta__front,
.puerta-c.is-door-open .puerta-l__front,
.puerta-c.is-door-open .puerta-r__front {
    box-shadow: 0 0 1.2vw rgba(81, 137, 251, 0.4);
}
.puerta-c {
    cursor: pointer;
}
.deploy-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10005;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.deploy-overlay.is-visible {
    display: flex;
    pointer-events: auto;
}
.deploy-panel {
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.deploy-panel .win-content.deploy-body {
    padding: 1rem;
    overflow-y: auto;
}
.deploy-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    color: #374151;
}
.deploy-steps {
    flex: 1;
    overflow-y: auto;
}
.deploy-step {
    display: none;
    padding: 0.5rem 0;
}
.deploy-step.is-active {
    display: block;
}
.deploy-step h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: #374151;
}
.deploy-step label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #6b7280;
}
.deploy-input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.6rem;
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    color: #374151;
    font-family: inherit;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.06);
}
.deploy-input:focus {
    outline: none;
    border-color: #5189fb;
}
.deploy-input-num { width: 60px; font-variant-numeric: tabular-nums; }
.deploy-avatars, .deploy-strategies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.deploy-avatar, .deploy-strategy {
    padding: 0.5rem 0.75rem;
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b3b3b3;
}
.deploy-avatar:hover, .deploy-strategy:hover {
    background: linear-gradient(180deg, #fff, #ebebeb);
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #ccc;
}
.deploy-avatar.active, .deploy-strategy.active {
    background: linear-gradient(180deg, #5189fb, #3b78e0);
    color: #fff;
    border-color: #2563eb;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.15);
}
.deploy-select {
    display: block;
    margin-top: 0.25rem;
    padding: 0.5rem 0.6rem;
    background: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    color: #374151;
    font-family: inherit;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.06);
}
.deploy-select:focus {
    outline: none;
    border-color: #5189fb;
}
.deploy-launch-state, .deploy-confirmation {
    margin-top: 0.5rem;
}
.deploy-confirmation { display: none; }
.deploy-btn {
    padding: 0.5rem 1.25rem;
    background: linear-gradient(180deg, #4CAF50, #43a047);
    border: 2px solid #2e7d32;
    border-radius: 2px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.15);
}
.deploy-btn:hover {
    background: linear-gradient(180deg, #5bc55f, #4CAF50);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3), inset -1px -1px 0 rgba(0,0,0,0.12);
}
.deploy-btn:active {
    background: linear-gradient(180deg, #43a047, #388e3c);
    box-shadow: inset -1px -1px 0 rgba(255,255,255,0.2), inset 1px 1px 0 rgba(0,0,0,0.2);
}
.deploy-agent-id { font-size: 0.85rem; color: #6b7280; }
.deploy-profile-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #5189fb;
    font-size: 0.85rem;
}
.deploy-nav {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.deploy-nav-btn, .deploy-cancel {
    padding: 0.5rem 0.75rem;
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    border: 2px solid #d0d0d0;
    border-radius: 2px;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b3b3b3;
}
.deploy-nav-btn:hover {
    background: linear-gradient(180deg, #e8f0fe, #d0e0fc);
    color: #1e40af;
    border-color: #5189fb;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(81,137,251,0.25);
}
.deploy-nav-btn:active {
    background: linear-gradient(180deg, #e0e0e0, #d0d0d0);
    box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #b3b3b3;
}
.deploy-cancel { border-color: #d0d0d0; color: #6b7280; }
.deploy-cancel:hover {
    background: linear-gradient(180deg, #fef2f2, #fee2e2);
    border-color: #dc2626;
    color: #dc2626;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(220,38,38,0.2);
}
.deploy-cancel:active {
    background: linear-gradient(180deg, #fee2e2, #fecaca);
    box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 rgba(220,38,38,0.2);
}
.deploy-github-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}
.deploy-github-section h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    color: #374151;
}
.deploy-github-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: #5189fb;
    font-size: 0.9rem;
}
.deploy-github-link:hover { text-decoration: underline; }
.deploy-instructions {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.6;
}
.deploy-instructions li { margin-bottom: 0.35rem; }

/* Pixel-style Modal - dashboard light theme */
.pixel-modal {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    width: 85%;
    max-width: 800px;
    height: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
}

/* pixel-modal uses .win-titlebar from shared Windows style; .pixel-content is also .win-content */
.pixel-modal .win-titlebar {
    border-bottom: 1px solid #e0e0e0;
}
.pixel-content {
    background: #f5f5f5;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
    position: relative;
    min-height: 0;
}

/* Custom scrollbar styling */
.pixel-content::-webkit-scrollbar {
    width: 10px;
}

.pixel-content::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.pixel-content::-webkit-scrollbar-thumb {
    background: #5189fb;
    border-radius: 4px;
}

.pixel-content::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

.manifest-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    image-rendering: pixelated;
}

.prompt {
    color: #5189fb;
    font-weight: bold;
    margin-right: 4px;
}

.typing-cursor {
    display: inline-block;
    animation: blink 1s infinite;
    font-weight: bold;
    color: #5189fb;
    margin-left: 2px;
}

.pixel-footer {
    background: #f0f0f0;
    border-top: 1px solid #e0e0e0;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pixel-footer-left {
    display: flex;
    gap: 8px;
}

.pixel-btn {
    padding: 6px 12px;
    border: 2px solid #d0d0d0;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: 2px;
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    color: #374151;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b3b3b3;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.pixel-btn:active {
    transform: scale(0.98);
    background: linear-gradient(180deg, #e8e8e8, #d8d8d8);
    box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #b3b3b3;
}

.pixel-btn-skip {
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
    color: #374151;
}

.pixel-btn-skip:hover {
    background: linear-gradient(180deg, #e8f0fe, #d0e0fc);
    color: #1e40af;
    border-color: #5189fb;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(81,137,251,0.25);
}

.pixel-btn-skip:hover:active {
    background: linear-gradient(180deg, #5189fb, #3b78e0);
    color: #fff;
    box-shadow: inset -1px -1px 0 rgba(255,255,255,0.2), inset 1px 1px 0 rgba(0,0,0,0.15);
}

.pixel-btn-github {
    background: linear-gradient(180deg, #4b5563, #374151);
    color: #fff;
    border-color: #1f2937;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.1), inset -1px -1px 0 rgba(0,0,0,0.3);
}

.pixel-btn-github:hover {
    background: linear-gradient(180deg, #5189fb, #3b78e0);
    color: #fff;
    border-color: #2563eb;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.2);
}

.pixel-btn-github:active {
    background: linear-gradient(180deg, #3b78e0, #2563eb);
    box-shadow: inset -1px -1px 0 rgba(255,255,255,0.15), inset 1px 1px 0 rgba(0,0,0,0.25);
}

.pixel-footer-right {
    color: #6b7280;
    font-size: 11px;
    font-weight: bold;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pixel-status {
    color: #374151;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .pixel-modal {
        width: 95%;
    }
    
    .pixel-content {
        font-size: 11px;
        padding: 12px;
    }
    
    .pixel-titlebar {
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .pixel-footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .pixel-btn {
        font-size: 10px;
        padding: 5px 10px;
    }
    
    .pixel-status {
        font-size: 10px;
    }
}