*,*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit;color:currentColor}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}ul,ol{list-style:none}#root,#__next{isolation:isolate}body{font-family:Georgia;font-size:2.2rem;--left-wall: #e5a4a0;--right-wall: #C16F6B;--bottom: #9F4843;--bottom-rise:#FFD4D2;--bottom-rise-two: var(--bottom-rise);--full-glow: red;--dimension: 5;--dim: 100px;background-color:#1a060b;background:#000}article{display:grid;place-items:center;overflow:hidden}section{position:relative;width:100vw;max-width:700px;min-height:90vh}.gabriela{--left-wall: #D46A6A;--right-wall: #AA3939;--bottom: #801515;--bottom-rise:#FFAAAA}.saja1{--left-wall: #FF60BD;--right-wall: #ef2099;--bottom: #8F7AC9;--bottom-rise: #6f0039;--bottom-rise-two: var(--bottom-rise);--half-glow: #ee017c}.gold{--left-wall: #f5f2e2;--right-wall: #f7e69e;--bottom: #a72d79;--bottom-rise: #e24fcf;--bottom-rise-two: var(--bottom-rise);--full-glow: #f5f2e2;--half-glow: #f5f2e2}.what{--left-wall: #E3EBFB;--right-wall: #BCCEFC;--bottom: #e96cb9;--bottom-rise: #e96cb9;--bottom-rise-two: #E989C4;--full-glow: #F5E2F9;--half-glow: #F5E2F9}.plains{position:absolute;bottom:66%;left:50%;translate:-50% 50%;display:grid;gap:0px;grid-template-columns:repeat(var(--dimension),1fr);grid-template-rows:repeat(var(--dimension),1fr);width:fit-content;margin:-2vh auto 0;transform-style:preserve-3d}.plains{background-color:var(--left-wall);transform:rotateX(60deg) rotate(45deg);filter:drop-shadow(0 0 0rem var(--full-glow));transition:1s}.cell{width:var(--dim);height:var(--dim);position:relative;background-color:green;transition:.2s;transform-style:preserve-3d;background:linear-gradient(to left bottom,var(--right-wall) 50%,var(--left-wall) 50.3%);overflow:hidden;user-select:none}.bottom{width:calc(var(--dim) + 1px);height:calc(var(--dim) + 1px);background-color:var(--bottom);position:absolute;transform:translate(calc(var(--dim) - 10px),calc(var(--dim) - 10px));transition:3s ease-out}.cell:active .bottom{transition:.12s ease-in-out;transform:translate(10px,10px);background-color:var(--bottom-rise)}.cell:active .bottom.alt2{background-color:var(--bottom-rise-two)}button{border:2px solid slategrey;box-shadow:0 5px #708090;border-radius:10px;user-select:none;transition:0s}button:active{box-shadow:0 1px #708090;translate:0px 4px}label{display:inline-block;font-size:.8em;color:red;padding:2px 15px 3px;margin:20px 10px 0;border:1px solid red;background-color:transparent;box-shadow:0 5px red;border-radius:5px}label.rumi{border-radius:5px 5px 5px 30px}label.mira{border-radius:5px 5px 30px}label:has(input[type=radio]:checked){background-color:#ff0;box-shadow:0 1px red;translate:0px 4px}button.full{border-radius:10px 60px 10px 30px;padding:15px 15px 10px 5px}button.low,button.half{border-radius:60px 10px 30px;padding:15px 5px 10px 15px}button.heart1{border-radius:10px 10px 50% 50%;padding:0 10px 10px}button.saja-theme{border-radius:5px 5px 30px}button.golden-theme{border-radius:5px 5px 5px 30px}button.trigger:active~.plains .cell .bottom{background-color:var(--bottom-rise)}button.trigger:active~.plains .cell .bottom.alt2{background-color:var(--bottom-rise-two)}button.full:active~.plains .cell .bottom{transition:.14s;transform:translate(10px,10px)}button.full.slow:active~.plains .cell .bottom{transition:3s}button.half:active~.plains .cell .bottom{transition:.14s;transform:translate(30px,30px)}button.low:active~.plains .cell .bottom{transition:.17s;transform:translate(calc(var(--dim) - 20px),calc(var(--dim) - 20px))}button.low.slow:active~.plains .cell .bottom{transition:3s}button.square0:active~.plains .cell .bottom.square0,button.square1:active~.plains .cell .bottom.square1,button.square2:active~.plains .cell .bottom.square2{transition:.14s;transform:translate(15px,15px)}button.alt1:active~.plains .cell .bottom.alt1,button.alt2:active~.plains .cell .bottom.alt2{transition:.1s;transform:translate(20px,20px)}button.heart1:active~.plains .cell .bottom.heart1{transition:.14s;transform:translate(20px,20px)}button:active~.plains{filter:drop-shadow(0 0 5rem var(--full-glow));transition:.1s}button.full:active~.plains{filter:drop-shadow(10px 10px 3rem var(--full-glow)) drop-shadow(-10px -10px 3rem var(--full-glow))}button.full.slow:active~.plains{transition:3s}button.half:active~.plains,button.low:active~.plains{filter:drop-shadow(0 0 2.2rem var(--full-glow))}button.heart1:active~.plains{filter:drop-shadow(0 0 2.2rem var(--full-glow))}button.alt1:active~.plains,button.alt2:active~.plains{filter:drop-shadow(0 0 2.2rem var(--full-glow))}button.square0:active~.plains,button.square1:active~.plains,button.square2:active~.plains{filter:drop-shadow(0 0 2.2rem var(--full-glow))}button{position:absolute}button.full{bottom:160px;left:20px}button.full.slow{bottom:100px;left:115px}button.heart1{bottom:140px;right:231px}button.low{bottom:100px;right:120px}button.low.slow,button.half{bottom:160px;right:20px}button.alt1{bottom:85px;left:20px}button.alt2{bottom:85px;right:20px}button.square0{bottom:30px;left:111px}button.square1{bottom:75px;left:215px}button.square2{bottom:30px;right:120px}button.saja-theme{bottom:5px;left:20px}button.what-theme{bottom:5px;left:206px}button.golden-theme{bottom:5px;right:20px}label.char-color{position:absolute}label.char-color.rumi{bottom:220px;left:110px}label.char-color.zoey{bottom:220px;left:215px}label.char-color.mira{bottom:220px;left:305px}label.zoey:has(input[type=radio]:checked)~.plains .cell .bottom{--bottom-rise: #078bba;--bottom-rise-two: var(--bottom-rise)}label.mira:has(input[type=radio]:checked)~.plains .cell .bottom{--bottom-rise: #b23447;--bottom-rise-two: var(--bottom-rise)}