div+css实现一个摩斯密码翻译器代码
代码语言:html
所属分类:其他
代码描述:div+css实现一个摩斯密码翻译器代码,鼠标按住中间的圆圈模拟莫斯信号输入,短按是点,长按是段。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto+Mono&display=swap");
html {
width: 100vw;
height: 100vh;
}
html body {
width: 100%;
height: 100%;
display: flex;
box-sizing: border-box;
touch-action: none;
}
html body *, html body *::before, html body *::after {
box-sizing: inherit;
touch-action: inherit;
}
@-webkit-keyframes hide {
0% {
opacity: 1;
--position: initial;
}
99.999% {
opacity: 1;
--position: initial;
}
100% {
opacity: 0;
--position: absolute;
}
}
@keyframes hide {
0% {
opacity: 1;
--position: initial;
}
99.999% {
opacity: 1;
--position: initial;
}
100% {
opacity: 0;
--position: absolute;
}
}
@-webkit-keyframes reveal {
0% {
opacity: 0;
--position: absolute;
}
99.999% {
opacity: 0;
--position: absolute;
}
100% {
opacity: 1;
--position: initial;
}
}
@keyframes reveal {
0% {
opacity: 0;
--position: absolute;
}
99.999% {
opacity: 0;
--position: absolute;
}
100% {
opacity: 1;
--position: initial;
}
}
@-webkit-keyframes enable {
0% {
pointer-events: none;
}
99.999% {
pointer-events: none;
}
100% {
pointer-events: auto;
}
}
@keyframes enable {
0% {
pointer-events: none;
}
99.999% {
pointer-events: none;
}
100% {
pointer-events: auto;
}
}
@-webkit-keyframes disable {
0% {
color: black;
}
0.001% {
color: grey;
}
100% {
color: grey;
}
}
@keyframes disable {
0% {
color: black;
}
0.001% {
color: grey;
}
100% {
color: grey;
}
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
grid-template-areas: "translation" "morse-code" "touch";
--screen: 100vmin;
--break-point: clamp(0px, var(--screen) - 500px, 50vmin);
--width: calc(var(--screen) - var(--break-point));
width: var(--width);
font-size: var(--width);
height: calc(var(--width) * 1.2);
border: 0.0175em solid grey;
background-color: white;
border-radius: 5%/4%;
overflow: hidden;
margin: auto;
position: relative;
font-family: "Open Sans", sans-serif;
--dot: "•";
--dash: "-";
}
.container .touch40.start ~ .layer40 {
--start-A: paused;
}
.container .touch40.start:checked ~ .layer40 {
--start-A: running;
}
.container .touch40 ~ .layer40 {
--state40: paused;
--checked-A-1: ;
--LEVEL-A-1: ;
--touched-A-1: + 0s;
}
.container .touch40:active ~ .layer40 {
--state40: running;
--start-A: paused;
}
.container .touch40:checked ~ .layer40 {
--checked-A-1: initial;
--LEVEL-A-0: ;
--LEVEL-A-1: initial;
--touched-A-1: + 0.25s;
}
.container .layer40 {
-webkit-animation: touch-A-1 2s var(--state40) linear forwards;
animation: touch-A-1 2s var(--state40) linear forwards;
}
.container .touch39 ~ .layer39 {
--state39: paused;
--checked-A-2: ;
--LEVEL-A-2: ;
--touched-A-2: + 0s;
}
.container .touch39:active ~ .layer39 {
--state39: running;
--start-A: paused;
}
.container .touch39:checked ~ .layer39 {
--checked-A-2: initial;
--LEVEL-A-1: ;
--LEVEL-A-2: initial;
--touched-A-2: + 0.25s;
}
.container .layer39 {
-webkit-animation: touch-A-2 2s var(--state39) linear forwards;
animation: touch-A-2 2s var(--state39) linear forwards;
}
.container .touch38 ~ .layer38 {
--state38: paused;
--checked-A-3: ;
--LEVEL-A-3: ;
--touched-A-3: + 0s;
}
.container .touch38:active ~ .layer38 {
--state38: running;
--start-A: paused;
}
.container .touch38:checked ~ .layer38 {
--checked-A-3: initial;
--LEVEL-A-2: ;
--LEVEL-A-3: initial;
--touched-A-3: + 0.25s;
}
.container .layer38 {
-webkit-animation: touch-A-3 2s var(--state38) linear forwards;
animation: touch-A-3 2s var(--state38) linear forwards;
}
.container .touch37 ~ .layer37 {
--state37: paused;
--checked-A-4: ;
--LEVEL-A-4: ;
--touched-A-4: + 0s;
}
.container .touch37:active ~ .layer37 {
--state37: running;
--start-A: paused;
}
.container .touch37:checked ~ .layer37 {
--checked-A-4: initial;
--LEVEL-A-3: ;
--LEVEL-A-4: initial;
--touched-A-4: + 0.25s;
}
.container .layer37 {
-webkit-animation: touch-A-4 2s var(--state37) linear forwards;
animation: touch-A-4 2s var(--state37) linear forwards;
}
.container .layer37.end {
--touched-A: calc(2s var(--touched-A-1) var(--touched-A-2) var(--touched-A-3) var(--touched-A-4));
-webkit-animation: touch-A-4 2s var(--state37) linear forwards, enable var(--touched-A) var(--start-A) linear forwards;
animation: touch-A-4 2s var(--state37) linear forwards, enable var(--touched-A) var(--start-A) linear forwards;
}
.container .layer37.end::before {
-webkit-animation: reveal var(--touched-A) var(--start-A) linear forwards;
animation: reveal var(--touched-A) var(--start-A) linear forwards;
}
.container .layer37.end > .start {
-webkit-animation: reveal var(--touched-A) var(--start-A) linear forwards;
animation: reveal var(--touched-A) var(--start-A) linear forwards;
}
.container .layer37.end > .timer {
-webkit-animation: expire var(--touched-A) var(--start-A) linear;
animation: expire var(--touched-A) var(--start-A) linear;
}
.container .layer37.end > .timer::before {
-webkit-animation: flash var(--touched-A) var(--start-A) linear backwards;
animation: flash var(--touched-A) var(--start-A) linear backwards;
}
.container .layer37.end > .clear {
-webkit-animation: disable var(--touched-A) var(--start-A) linear backwards;
animation: disable var(--touched-A) var(--start-A) linear backwards;
}
.container .touch36.start ~ .layer36 {
--start-B: paused;
}
.container .touch36.start:checked ~ .layer36 {
--start-B: running;
}
.container .touch36 ~ .layer36 {
--state36: paused;
--checked-B-1: ;
--LEVEL-B-1: ;
--touched-B-1: + 0s;
}
.container .touch36:active ~ .layer36 {
--state36: running;
--start-B: paused;
}
.container .touch36:checked ~ .layer36 {
--checked-B-1: initial;
--LEVEL-B-0: ;
--LEVEL-B-1: initial;
--touched-B-1: + 0.25s;
}
.container .layer36 {
-webkit-animation: touch-B-1 2s var(--state36) linear forwards;
animation: touch-B-1 2s var(--state36) linear forwards;
}
.container .touch35 ~ .layer35 {
--state35: paused;
--checked-B-2: ;
--LEVEL-B-2: ;
--touched-B-2: + 0s;
}
.container .touch35:active ~ .layer35 {
--state35: running;
--start-B: paused;
}
.container .touch35:checked ~ .layer35 {
--checked-B-2: initial;
--LEVEL-B-1: ;
--LEVEL-B-2: initial;
--touched-B-2: + 0.25s;
}
.container .layer35 {
-webkit-animation: touch-B-2 2s var(--state35) linear forwards;
animation: touch-B-2 2s var(--state35) linear forwards;
}
.container .touch34 ~ .layer34 {
--state34: paused;
--checked-B-3: ;
--LEVEL-B-3: ;
--touched-B-3: + 0s;
}
.container .touch34:active ~ .layer34 {
--state34: running;
--start-B: paused;
}
.container .touch34:checked ~ .layer34 {
--checked-B-3: initial;
--LEVEL-B-2: ;
--LEVEL-B-3: initial;
--touched-B-3: + 0.25s;
}
.container .layer34 {
-webkit-animation: touch-B-3 2s var(--state34) linear forwards;
animation: touch-B-3 2s var(--state34) linear forwards;
}
.container .touch33 ~ .layer33 {
--state33: paused;
--checked-B-4: ;
--LEVEL-B-4: ;
--touched-B-4: + 0s;
}
.container .touch33:active ~ .layer33 {
--state33: running;
--start-B: paused;
}
.container .touch33:checked ~ .layer33 {
--checked-B-4: initial;
--LEVEL-B-3: ;
--LEVEL-B-4: initial;
--touched-B-4: + 0.25s;
}
.container .layer33 {
-webkit-animation: touch-B-4 2s var(--state33) linear forwards;
animation: touch-B-4 2s var(--state33) linear forwards;
}
.container .layer33.end {
--touched-B: calc(2s var(--touched-B-1) var(--touched-B-2) var(--touched-B-3) var(--touched-B-4));
-webkit-animation: touch-B-4 2s var(--state33) linear forwards, enable var(--touched-B) var(--start-B) linear forwards;
animation: touch-B-4 2s var(--state33) linear forwards, enable var(--touched-B) var(--start-B) linear forwards;
}
.container .layer33.end::before {
-webkit-animation: reveal var(--touched-B) var(--start-B) linear forwards;
animation: reveal var(--touched-B) var(--start-B) linear forwards;
}
.container .layer33.end > .start {
-webkit-animation: reveal var(--touched-B) var(--start-B) linear forwards;
animation: reveal var(--touched-B) var(--start-B) linear forwards;
}
.container .layer33.end > .timer {
-webkit-animation: reveal var(--touched-A) var(--start-A) linear forwards, expire var(--touched-B) var(--start-B) linear;
animation: reveal var(--touched-A) var(--start-A) linear forwards, expire var(--touched-B) var(--start-B) linear;
}
.container .layer33.end > .timer::before {
-webkit-animation: flash var(--touched-B) var(--start-B) linear backwards;
animation: flash var(--touched-B) var(--start-B) linear backwards;
}
.container .layer33.end > .clear {
-webkit-animation: reveal var(--touched-A) var(--start-A) linear forwards, disable var(--touched-B) var(--start-B) linear backwards;
animation: reveal var(--touched-A) var(--start-A) linear forwards, disable var(--touched-B) var(--start-B) linear backwards;
}
.container .touch32.start ~ .layer32 {
--start-C: paused;
}
.container .touch32.start:checked ~ .layer32 {
--start-C: running;
}
.container .touch32 ~ .layer32 {
--state32: paused;
--checked-C-1: ;
--LEVEL-C-1: ;
--touched-C-1: + 0s;
}
.container .touch32:active ~ .layer32 {
--state32: running;
--start-C: paused;
}
.container .touch32:checked ~ .layer32 {
--checked-C-1: initial;
--LEVEL-C-0: ;
--LEVEL-C-1: initial;
--touched-C-1: + 0.25s;
}
.container .layer32 {
-webkit-animation: touch-C-1 2s var(--state32) linear forwards;
animation: touch-C-1 2s var(--state32) linear forwards;
}
.container .touch31 ~ .layer31 {
--state31: paused;
--checked-C-2: ;
--LEVEL-C-2: ;
--touched-C-2: + 0s;
}
.container .touch31:active ~ .layer31 {
--state31: running;
--start-C: paused;
}
.container .touch31:checked ~ .layer31 {
--checked-C-2: initial;
--LEVEL-C-1: ;
--LEVEL-C-2: initial;
--touched-C-2: + 0.25s;
}
.container .layer31 {
-webkit-animation: touch-C-2 2s var(--state31) linear forwards;
animation: touch-C-2 2s var(--state31) linear forwards;
}
.container .touch30 ~ .layer30 {
--state30: paused;
--checked-C-3: ;
--LEVEL-C-3: ;
--touched-C-3: + 0s;
}
.container .touch30:active ~ .layer30 {
--state30: running;
--start-C: paused;
}
.container .touch30:checked ~ .layer30 {
--checked-C-3: initial;
--LEVEL-C-2: ;
--LEVEL-C-3: initial;
--touched-C-3: + 0.25s;
}
.container .layer30 {
-webkit-animation: touch-C-3 2s var(--state30) linear forwards;
animation: touch-C-3 2s var(--state30) linear forwards;
}
.container .touch29 ~ .layer29 {
--state29: paused;
--checked-C-4: ;
--LEVEL-C-4: ;
--touched-C-4: + 0s;
}
.container .touch29:active ~ .layer29 {
--state29: running;
--start-C: paused;
}
.container .touch29:checked ~ .layer29 {
--checked-C-4: initial;
--LEVEL-C-3: ;
--LEVEL-C-4: initial;
--touched-C-4: + 0.25s;
}
.container .layer29 {
-webkit-animation: touch-C-4 2s var(--state29) linear forwards;
animation: touch-C-4 2s var(--state29) linear forwards;
}
.container .layer29.end {
--touched-C: calc(2s var(--touched-C-1) var(--touched-C-2) var(--touched-C-3) var(--touched-C-4));
-webkit-animation: touch-C-4 2s var(--state29) linear forwards, enable var(--touched-C) var(--start-C) linear forwards;
animation: touch-C-4 2s var(--state29) linear forwards, enable var(--touched-C) var(--start-C) linear forwards;
}
.container .layer29.end::before {
-webkit-animation: reveal var(--touched-C) var(--start-C) linear forwards;
animation: reveal var(--touched-C) var(--start-C) linear forwards;
}
.container .layer29.end > .start {
-webkit-animation: reveal var(--touched-C) var(--start-C) linear forwards;
animation: reveal var(--touched-C) var(--start-C) linear forwards;
}
.container .layer29.end > .timer {
-webkit-animation: reveal var(--touched-B) var(--start-B) linear forwards, expire var(--touched-C) var(--start-C) linear;
animation: reveal var(--touched-B) var(--start-B) linear forwards, expire var(--touched-C) var(--start-C) linear;
}
.container .layer29.end > .timer::before {
-webkit-animation: flash var(--touched-C) var(--start-C) linear backwards;
animation: flash var(--touched-C) var(--start-C) linear backwards;
}
.container .layer29.end > .clear {
-webkit-animation: reveal var(--touched-B) var(--start-B) linear forwards, disable var(--touched-C) var(--start-C) linear backwards;
animation: reveal var(--touched-B) var(--start-B) linear forwards, disable var(--touched-C) var(--start-C) linear backwards;
}
.container .touch28.start ~ .layer28 {
--start-D: paused;
}
.container .touch28.start:checked ~ .layer28 {
--start-D: running;
}
.container .touch28 ~ .layer28 {
--state28: paused;
--checked-D-1: ;
--LEVEL-D-1: ;
--touched-D-1: + 0s;
}
.container .touch28:active ~ .layer28 {
--state28: running;
--start-D: paused;
}
.container .touch28:checked ~ .layer28 {
--checked-D-1: initial;
--LEVEL-D-0: ;
--LEVEL-D-1: initial;
--touched-D-1: + 0.25s;
}
.container .layer28 {
-webkit-animation: touch-D-1 2s var(--state28) linear forwards;
animation: touch-D-1 2s var(--state28) linear forwards;
}
.container .touch27 ~ .layer27 {
--state27: paused;
--checked-D-2: ;
--LEVEL-D-2: ;
--touched-D-2: + 0s;
}
.container .touch27:active ~ .layer27 {
--state27: running;
--start-D: paused;
}
.container .touch27:checked ~ .layer27 {
--checked-D-2: initial;
--LEVEL-D-1: ;
--LEVEL-D-2: initial;
--touched-D-2: + 0.25s;
}
.container .layer27 {
-webkit-animation: touch-D-2 2s var(--state27) linear forwards;
animation: touch-D-2 2s var(--state27) linear forwards;
}
.container .touch26 ~ .layer26 {
--state26: paused;
--checked-D-3: ;
--LEVEL-D-3: ;
--touched-D-3: + 0s;
}
.container .touch26:active ~ .layer26 {
--state26: running;
--start-D: paused;
}
.container .touch26:checked ~ .layer26 {
--checked-D-3: initial;
--LEVEL-D-2: ;
--LEVEL-D-3: initial;
--touched-D-3: + 0.25s;
}
.container .layer26 {
-webkit-animation: touch-D-3 2s var(--state26) linear forwards;
animation: touch-D-3 2s var(--state26) linear forwards;
}
.container .touch25 ~ .layer25 {
--state25: paused;
--checked-D-4: ;
--LEVEL-D-4: ;
--touched-D-4: + 0s;
}
.container .touch25:active ~ .layer25 {
--state25: running;
--start-D: paused;
}
.container .touch25:checked ~ .layer25 {
--checked-D-4: initial;
--LEVEL-D-3: ;
--LEVEL-D-4: initial;
--touched-D-4: + 0.25s;
}
.container .layer25 {
-webkit-animation: touch-D-4 2s var(--state25) linear forwards;
animation: touch-D-4 2s var(--state25) linear forwards;
}
.container .layer25.end {
--touched-D: calc(2s var(--touched-D-1) var(--touched-D-2) var(--touched-D-3) var(--touched-D-4));
-webkit-animation: touch-D-4 2s var(--state25) linear forwards, enable var(--touched-D) var(--start-D) linear forwards;
animation: touch-D-4 2s var(--state25) linear forwards, enable var(--touched-D) var(--start-D) linear forwards;
}
.container .layer25.end::before {
-webkit-animation: reveal var(--touched-D) var(--start-D) linear forwards;
animation: reveal var(--touched-D) var(--start-D) linear forwards;
}
.container .layer25.end > .start {
-webkit-animation: reveal var(--touched-D) var(--start-D) linear forwards;
animation: reveal var(--touched-D) var(--start-D) linear forwards;
}
.container .layer25.end > .timer {
-webkit-animation: reveal var(--touched-C) var(--start-C) linear forwards, expire var(--touched-D) var(--start-D) linear;
animation: reveal var(--touched-C) var(--start-C) linear forwards, expire var(--touched-D) var(--start-D) linear;
}
.container .layer25.end > .timer::before {
-webkit-animation: flash var(--touched-D) var(--start-D) linear backwards;
animation: flash var(--touched-D) var(--start-D) linear backwards;
}
.container .layer25.end > .clear {
-webkit-animation: reveal var(--touched-C) var(--start-C) linear forwards, disable var(--touched-D) var(--start-D) linear backwards;
animation: reveal var(--touched-C) var(--start-C) linear forwards, disable var(--touched-D) var(--start-D) linear backwards;
}
.container .touch24.start ~ .layer24 {
--start-E: paused;
}
.container .touch24.start:checked ~ .layer24 {
--start-E: running;
}
.container .touch24 ~ .layer24 {
--state24: paused;
--checked-E-1: ;
--LEVEL-E-1: ;
--touched-E-1: + 0s;
}
.container .touch24:active ~ .layer24 {
--state24: running;
--start-E: paused;
}
.container .touch24:checked ~ .layer24 {
--checked-E-1: initial;
--LEVEL-E-0: ;
--LEVEL-E-1: initial;
--touched-E-1: + 0.25s;
}
.container .layer24 {
-webkit-animation: touch-E-1 2s var(--state24) linear forwards;
animation: touch-E-1 2s var(--state24) linear forwards;
}
.container .touch23 ~ .layer23 {
--state23: paused;
--checked-E-2: ;
--LEVEL-E-2: ;
--touched-E-2: + 0s;
}
.container .touch23:active ~ .layer23 {
--state23: running;
--start-E: paused;
}
.container .touch23:checked ~ .layer23 {
--checked-E-2: initial;
--LEVEL-E-1: ;
--LEVEL-E-2: initial;
--touched-E-2: + 0.25s;
}
.container .layer23 {
-webkit-animation: touch-E-2 2s var(--state23) linear forwards;
animation: touch-E-2 2s var(--state23) linear forwards;
}
.container .touch22 ~ .layer22 {
--state22: paused;
--checked-E-3: ;
--LEVEL-E-3: ;
--touched-E-3: + 0s;
}
.container .touch22:active ~ .layer22 {
--state22: running;
--start-E: paused;
}
.container .touch22:checked ~ .layer22 {
--checked-E-3: initial;
--LEVEL-E-2: ;
--LEVEL-E-3: initial;
--touched-E-3: + 0.25s;
}
.container .layer22 {
-webkit-animation: touch-E-3 2s var(--state22) linear forwards;
animation: touch-E-3 2s var(--state22) linear forwards;
}
.container .touch21 ~ .layer21 {
--state21: paused;
--checked-E-4: ;
--LEVEL-E-4: ;
--touched-E-4: + 0s;
}
.container .touch21:active ~ .layer21 {
--state21: running;
--start-E: paused;
}
.container .touch21:checked ~ .layer21 {
--checked-E-4: initial;
--LEVEL-E-3: ;
--LEVEL-E-4: initial;
--touched-E-4: + 0.25s;
}
.container .layer21 {
-webkit-animation: touch-E-4 2s var(--state21) linear forwards;
animation: touch-E-4 2s var(--state21) linear forwards;
}
.container .layer21.end {
--touched-E: calc(2s var(--touched-E-1) var(--touched-E-2) var(--touched-E-3) var(--touched-E-4));
-webkit-animation: touch-E-4 2s var(--state21) linear forwards, enable var(--touched-E) var(--start-E) linear forwards;
animation: touch-E-4 2s var(--state21) linear forwards, enable var(--touched-E) var(--start-E) linear forwards;
}
.container .layer21.end::before {
-webkit-animation: reveal var(--touched-E) var(--start-E) linear forwards;
animation: reveal var(--touched-E) var(--start-E) linear forwards;
}
.container .layer21.end > .start {
-webkit-animation: reveal var(--touched-E) var(--start-E) linear forwards;
animation: reveal var(--touched-E) var(--start-E) linear forwards;
}
.container .layer21.end > .timer {
-webkit-animation: reveal var(--touched-D) var(--start-D) linear forwards, expire var(--touched-E) var(--start-E) linear;
animation: reveal var(--touched-D) var(--start-D) linear forwards, expire var(--touched-E) var(--start-E) linear;
}
.container .layer21.end > .timer::before {
-webkit-animation: flash var(--touched-E) var(--start-E) linear backwards;
animation: flash var(--touched-E) var(--start-E) linear backwards;
}
.container .layer21.end > .clear {
-webkit-animation: reveal var(--touched-D) var(--start-D) linear forwards, disable var(--touched-E) var(--start-E) linear backwards;
animation: reveal var(--touched-D) var(--start-D) linear forwards, disable var(--touched-E) var(--start-E) linear backwards;
}
.container .touch20.start ~ .layer20 {
--start-F: paused;
}
.container .touch20.start:checked ~ .layer20 {
--start-F: running;
}
.container .touch20 ~ .layer20 {
--state20: paused;
--checked-F-1: ;
--LEVEL-F-1: ;
--touched-F-1: + 0s;
}
.container .touch20:active ~ .layer20 {
--state20: running;
--start-F: paused;
}
.container .touch20:checked ~ .layer20 {
--checked-F-1: initial;
--LEVEL-F-0: ;
--LEVEL-F-1: initial;
--touched-F-1: + 0.25s;
}
.container .layer20 {
-webkit-animation: touch-F-1 2s var(--state20) linear forwards;
animation: touch-F-1 2s var(--state20) linear forwards;
}
.container .touch19 ~ .layer19 {
--state19: paused;
--checked-F-2: ;
--LEVEL-F-2: ;
--touched-F-2: + 0s;
}
.container .touch19:active ~ .layer19 {
--state19: running;
--start-F: paused;
}
.container .touch19:checked ~ .layer19 {
--checked-F-2: initial;
--LEVEL-F-1: ;
--LEVEL-F-2: initial;
--touched-F-2: + 0.25s;
}
.container .layer19 {
-webkit-animation: touch-F-2 2s var(--state19) linear forwards;
animation: touch-F-2 2s var(--state19) linear forwards;
}
.container .touch18 ~ .layer18 {
--state18: paused;
--checked-F-3: ;
--LEVEL-F-3: ;
--touched-F-3: + 0s;
}
.container .touch18:active ~ .layer18 {
--state18: running;
--start-F: paused;
}
.container .touch18:checked ~ .layer18 {
--checked-F-3: initial;
--LEVEL-F-2: ;
--LEVEL-F-3: initial;
--touched-F-3: + 0.25s;
}
.container .layer18 {
-webkit-animation: touch-F-3 2s var(--state18) linear forwards;
animation: touch-F-3 2s var(--state18) linear forwards;
}
.container .touch17 ~ .layer17 {
--state17: paused;
--checked-F-4: ;
--LEVEL-F-4: ;
--touched-F-4: + 0s;
}
.container .touch17:active ~ .layer17 {
--state17: running;
--start-F: paused;
}
.container .touch17:checked ~ .layer17 {
--checked-F-4: initial;
--LEVEL-F-3: ;
--LEVEL-F-4: initial;
--touched-F-4: + 0.25s;
}
.container .layer17 {
-webkit-animation: touch-F-4 2s var(--state17) linear forwards;
animation: touch-F-4 2s var(--state17) linear forwards;
}
.container .layer17.end {
--touched-F: calc(2s var(--touched-F-1) var(--touched-F-2) var(--touched-F-3) var(--touched-F-4));
-webkit-animation: touch-F-4 2s var(--state17) linear forwards, enable var(--touched-F) var(--start-F) linear forwards;
animation: touch-F-4 2s var(--state17) linear forwards, enable var(--touched-F) var(--start-F) linear forwards;
}
.container .layer17.end::before {
-webkit-animation: reveal var(--touched-F) var(--start-F) linear forwards;
animation: reveal var(--touched-F) var(--start-F) linear forwards;
}
.container .layer17.end > .start {
-webkit-animation: reveal var(--touched-F) var(--start-F) linear forwards;
animation: reveal var(--touched-F) var(--start-F) linear forwards;
}
.container .layer17.end > .timer {
-webkit-animation: reveal var(--touched-E) var(--start-E) linear forwards, expire var(--touched-F) var(--start-F) linear;
animation: reveal var(--touched-E) var(--start-E) linear forwards, expire var(--touched-F) var(--start-F) linear;
}
.container .layer17.end > .timer::before {
-webkit-animation: flash var(--touched-F) var(--start-F) linear backwards;
animation: flash var(--touched-F) var(--start-F) linear backwards;
}
.container .layer17.end > .clear {
-webkit-animation: reveal var(--touched-E) var(--start-E) linear forwards, disable var(--touched-F) var(--start-F) linear backwards;
animation: reveal var(--touched-E) var(--start-E) linear forwards, disable var(--touched-F) var(--start-F) linear backwards;
}
.container .touch16.start ~ .layer16 {
--start-G: paused;
}
.container .touch16.start:checked ~ .layer16 {
--start-G: running;
}
.container .touch16 ~ .layer16 {
--state16: paused;
--checked-G-1: ;
--LEVEL-G-1: ;
--touched-G-1: + 0s;
}
.container .touch16:active ~ .layer16 {
--state16: running;
--start-G: paused;
}
.container .touch16:checked ~ .layer16 {
--checked-G-1: initial;
--LEVEL-G-0: ;
--LEVEL-G-1: initial;
--touched-G-1: + 0.25s;
}
.container .layer16 {
-webkit-animation: touch-G-1 2s var(--state16) linear forwards;
animation: touch-G-1 2s var(--state16) linear forwards;
}
.container .touch15 ~ .layer15 {
--state15: paused;
--checked-G-2: ;
--LEVEL-G-2: ;
--touched-G-2: + 0s;
}
.container .touch15:active ~ .layer15 {
--state15: running;
--start-G: paused;
}
.container .touch15:checked ~ .layer15 {
--checked-G-2: initial;
--LEVEL-G-1: ;
--LEVEL-G-2: initial;
--touched-G-2: + 0.25s;
}
.container .layer15 {
-webkit-animation: touch-G-2 2s var(--state15) linear forwards;
animation: touch-G-2 2s var(--state15) linear forwards;
}
.container .touch14 ~ .layer14 {
--state14: paused;
--checked-G-3: ;
--LEVEL-G-3: ;
--touched-G-3: + 0s;
}
.container .touch14:active ~ .layer14 {
--state14: running;
--start-G: paused;
}
.container .touch14:checked ~ .layer14 {
--checked-G-3: initial;
--LEVEL-G-2: ;
--LEVEL-G-3: initial;
--touched-G-3: + 0.25s;
}
.container .layer14 {
-webkit-animation: touch-G-3 2s var(--state14) linear forwards;
animation: touch-G-3 2s var(--state14) linear forwards;
}
.container .touch13 ~ .layer13 {
--state13: paused;
--checked-G-4: ;
--LEVEL-G-4: ;
--touched-G-4: + 0s;
}
.container .touch13:active ~ .layer13 {
--state13: running;
--start-G: paused;
}
.container .touch13:checked ~ .layer13 {
--checked-G-4: initial;
--LEVEL-G-3: ;
--LEVEL-G-4: initial;
--touched-G-4: + 0.25s;
}
.container .layer13 {
-webkit-animation: touch-G-4 2s var(--state13) linear forwards;
animation: touch-G-4 2s var(--state13) linear forwards;
}
.container .layer13.end {
--touched-G: calc(2s var(--touched-G-1) var(--touched-G-2) var(--touched-G-3) var(--touched-G-4));
-webkit-animation: touch-G-4 2s var(--state13) linear forwards, enable var(--touched-G) var(--start-G) linear forwards;
animation: touch-G-4 2s var(--state13) linear forwards, enable var(--touched-G) var(--start-G) linear forwards;
}
.container .layer13.end::before {
-webkit-animation: reveal var(--touched-G) var(--start-G) linear forwards;
animation: reveal var(--touched-G) var(--start-G) linear forwards;
}
.container .layer13.end > .start {
-webkit-animation: reveal var(--touched-G) var(--start-G) linear forwards;
animation: reveal var(--touched-G) var(--start-G) linear forwards;
}
.container .layer13.end > .timer {
-webkit-animation: reveal var(--touched-F) var(--start-F) linear forwards, expire var(--touched-G) var(--start-G) linear;
animation: reveal var(--touched-F) var(--start-F) linear forwards, expire var(--touched-G) var(--start-G) linear;
}
.container .layer13.end > .timer::before {
-webkit-animation: flash var(--touched-G) var(--start-G) linear backwards;
animation: flash var(--touched-G) var(--start-G) linear backwards;
}
.container .layer13.end > .clear {
-webkit-animation: reveal var(--touched-F) var(--start-F) linear forwards, disable var(--touched-G) var(--start-G) linear backwards;
animation: reveal var(--touched-F) var(--start-F) linear forwards, disable var(--touched-G) var(--start-G) linear backwards;
}
.container .touch12.start ~ .layer12 {
--start-H: paused;
}
.container .touch12.start:checked ~ .layer12 {
--start-H: running;
}
.container .touch12 ~ .layer12 {
--state12: paused;
--checked-H-1: ;
--LEVEL-H-1: ;
--touched-H-1: + 0s;
}
.container .touch12:active ~ .layer12 {
--state12: running;
--start-H: paused;
}
.container .touch12:checked ~ .layer12 {
--checked-H-1: initial;
--LEVEL-H-0: ;
--LEVEL-H-1: initial;
--touched-H-1: + 0.25s;
}
.container .layer12 {
-webkit-animation: touch-H-1 2s var(--state12) linear forwards;
animation: touch-H-1 2s var(--state12) linear forwards;
}
.container .touch11 ~ .layer11 {
--state11: paused;
--checked-H-2: ;
--LEVEL-H-2: ;
--touched-H-2: + 0s;
}
.container .touch11:active ~ .layer11 {
--state11: running;
--start-H: paused;
}
.container .touch11:checked ~ .layer11 {
--checked-H-2: initial;
--LEVEL-H-1: ;
--LEVEL-H-2: initial;
--touched-H-2: + 0.25s;
}
.container .layer11 {
-webkit-animation: touch-H-2 2s var(--state11) linear forwards;
animation: touch-H-2 2s var(--state11) linear forwards;
}
.container .touch10 ~ .layer10 {
--state10: paused;
--checked-H-3: ;
--LEVEL-H-3: ;
--touched-H-3: + 0s;
}
.container .touch10:active ~ .layer10 {
--state10: running;
--start-H: paused;
}
.container .touch10:checked ~ .layer10 {
--checked-H-3: initial;
--LEVEL-H-2: ;
--LEVEL-H-3: initial;
--touched-H-3: + 0.25s;
}
.container .layer10 {
-webkit-animation: touch-H-3 2s var(--state10) linear forwards;
animation: touch-H-3 2s var(--state10) linear forwards;
}
.container .touch9 ~ .layer9 {
--state9: paused;
--checked-H-4: ;
--LEVEL-H-4: ;
--touched-H-4: + 0s;
}
.container .touch9:active ~ .layer9 {
--state9: running;
--start-H: paused;
}
.container .touch9:checked ~ .layer9 {
--checked-H-4: initial;
--LEVEL-H-3: ;
--LEVEL-H-4: initial;
--touched-H-4: + 0.25s;
}
.container .layer9 {
-webkit-animation: touch-H-4 2s var(--state9) linear forwards;
animation: touch-H-4 2s var(--state9) linear forwards;
}
.container .layer9.end {
--touched-H: calc(2s var(--touched-H-1) var(--touched-H-2) var(--touched-H-3) var(--touched-H-4));
-webkit-animation: touch-H-4 2s var(--state9) linear forwards, enable var(--touched-H) var(--start-H) linear forwards;
animation: touch-H-4 2s var(--state9) linear forwards, enable var(--touched-H) var(--start-H) linear forwards;
}
.container .layer9.end::before {
-webkit-animation: reveal var(--touched-H) var(--start-H) linear forwards;
animation: reveal var(--touched-H) var(--start-H) linear forwards;
}
.container .layer9.end > .start {
-webkit-animation: reveal var(--touched-H) var(--start-H) linear forwards;
animation: reveal var(--touched-H) var(--start-H) linear forwards;
}
.container .layer9.end > .timer {
-webkit-animation: reveal var(--touched-G) var(--start-G) linear forwards, expire var(--touched-H) var(--start-H) linear;
animation: reveal var(--touched-G) var(--start-G) linear forwards, expire var(--touched-H) var(--start-H) linear;
}
.container .layer9.end > .timer::before {
-webkit-animation: flash var(--touched-H) var(--start-H) linear backwards;
animation: flash var(--touched-H) var(--start-H) linear backwards;
}
.container .layer9.end > .clear {
-webkit-animation: reveal var(--touched-G) var(--start-G) linear forwards, disable var(--touched-H) var(--start-H) linear backwards;
animation: reveal var(--touched-G) var(--start-G) linear forwards, disable var(--touched-H) var(--start-H) linear backwards;
}
.container .touch8.start ~ .layer8 {
--start-I: paused;
}
.container .touch8.start:checked ~ .layer8 {
--start-I: running;
}
.container .touch8 ~ .layer8 {
--state8: paused;
--checked-I-1: ;
--LEVEL-I-1: ;
--touched-I-1: + 0s;
}
.container .touch8:active ~ .layer8 {
--state8: running;
--start-I: paused;
}
.container .touch8:checked ~ .layer8 {
--checked-I-1: initial;
--LEVEL-I-0: ;
--LEVEL-I-1: initial;
--touched-I-1: + 0.25s;
}
.container .layer8 {
-webkit-animation: touch-I-1 2s var(--state8) linear forwards;
animation: touch-I-1 2s var(--state8) linear forwards;
}
.container .touch7 ~ .layer7 {
--state7: paused;
--checked-I-2: ;
--LEVEL-I-2: ;
--touched-I-2: + 0s;
}
.container .touch7:active ~ .layer7 {
--state7: running;
--start-I: paused;
}
.container .touch7:checked ~ .layer7 {
--checked-I-2: initial;
--LEVEL-I-1: ;
--LEVEL-I-2: initial;
--touched-I-2: + 0.25s;
}
.container .layer7 {
-webkit-animation: touch-I-2 2s var(--state7) linear forwards;
animation: touch-I-2 2s var(--state7) linear forwards;
}
.container .touch6 ~ .layer6 {
--state6: paused;
--checked-I-3: ;
--LEVEL-I-3: ;
--touched-I-3: + 0s;
}
.container .touch6:active ~ .layer6 {
--state6: running;
--start-I: paused;
}
.container .touch6:checked ~ .layer6 {
--checked-I-3: initial;
--LEVEL-I-2: ;
--LEVEL-I-3: initial;
--touched-I-3: + 0.25s;
}
.container .layer6 {
-webkit-animation: touch-I-3 2s var(--state6) linear forwards;
animation: touch-I-3 2s var(--state6) linear forwards;
}
.container .touch5 ~ .layer5 {
--state5: paused;
--checked-I-4: ;
--LEVEL-I-4: ;
--touched-I-4: + 0s;
}
.container .touch5:active ~ .layer5 {
--state5: running;
--start-I: paused;
}
.container .touch5:checked ~ .layer5 {
--checked-I-4: initial;
--LEVEL-I-3: ;
--LEVEL-I-4: initial;
--touched-I-4: + 0.25s;
}
.container .layer5 {
-webkit-animation: touch-I-4 2s var(--state5) linear forwards;
animation: touch-I-4 2s var(--state5) linear forwards;
}
.container .layer5.end {
--touched-I: calc(2s var(--touched-I-1) var(--touched-I-2) var(--touched-I-3) var(--touched-I-4));
-webkit-animation: touch-I-4 2s var(--state5) linear forwards, enable var(--touched-I) var(--start-I) linear forwards;
animation: touch-I-4 2s var(--state5) linear forwards, enable var(--touched-I) var(--start-I) linear forwards;
}
.container .layer5.end::before {
-webkit-animation: reveal var(--touched-I) var(--start-I) linear forwards;
animation: reveal var(--touched-I) var(--start-I) linear forwards;
}
.container .layer5.end > .start {
-webkit-animation: reveal var(--touched-I) var(--start-I) linear forwards;
animation: reveal var(--touched-I) var(--start-I) linear forwards;
}
.container .layer5.end > .timer {
-webkit-animation: reveal var(--touched-H) var(--start-H) linear forwards, expire var(--touched-I) var(--start-I) linear;
animation: reveal var(--touched-H) var(--start-H) linear forwards, expire var(--touched-I) var(--start-I) linear;
}
.container .layer5.end > .timer::before {
-webkit-animation: flash var(--touched-I) var(--start-I) linear backwards;
animation: flash var(--touched-I) var(--start-I) linear backwards;
}
.container .layer5.end > .clear {
-webkit-animation: reveal var(--touched-H) var(--start-H) linear forwards, disable var(--touched-I) var(--start-I) linear backwards;
animation: reveal var(--touched-H) var(--start-H) linear forwards, disable var(--touched-I) var(--start-I) linear backwards;
}
.container .touch4.start ~ .layer4 {
--start-J: paused;
}
.container .touch4.start:checked ~ .layer4 {
--start-J: running;
}
.container .touch4 ~ .layer4 {
--state4: paused;
--checked-J-1: ;
--LEVEL-J-1: ;
--touched-J-1: + 0s;
}
.container .touch4:active ~ .layer4 {
--state4: running;
--start-J: paused;
}
.container .touch4:checked ~ .layer4 {
--checked-J-1: initial;
--LEVEL-J-0: ;
--LEVEL-J-1: initial;
--touched-J-1: + 0.25s;
}
.container .layer4 {
-webkit-animation: touch-J-1 2s var(--state4) linear forwards;
animation: touch-J-1 2s var(--state4) linear forwards;
}
.container .touch3 ~ .layer3 {
--state3: paused;
--checked-J-2: ;
--LEVEL-J-2: ;
--touched-J-2: + 0s;
}
.container .touch3:active ~ .layer3 {
--state3: running;
--start-J: paused;
}
.container .touch3:checked ~ .layer3 {
--checked-J-2: initial;
--LEVEL-J-1: ;
--LEVEL-J-2: initial;
--touched-J-2: + 0.25s;
}
.container .layer3 {
-webkit-animation: touch-J-2 2s var(--state3) linear forwards;
animation: touch-J-2 2s var(--state3) linear forwards;
}
.container .touch2 ~ .layer2 {
--state2: paused;
--checked-J-3: ;
--LEVEL-J-3: ;
--touched-J-3: + 0s;
}
.container .touch2:active ~ .layer2 {
--state2: running;
--start-J: paused;
}
.container .touch2:checked ~ .layer2 {
--checked-J-3: initial;
--LEVEL-J-2: ;
--LEVEL-J-3: initial;
--touched-J-3: + 0.25s;
}
.container .layer2 {
-webkit-animation: touch-J-3 2s var(--state2) linear forwards;
animation: touch-J-3 2s var(--state2) linear forwards;
}
.container .touch1 ~ .layer1 {
--state1: paused;
--checked-J-4: ;
--LEVEL-J-4: ;
--touched-J-4: + 0s;
}
.container .touch1:active ~ .layer1 {
--state1: running;
--start-J: paused;
}
.container .touch1:checked ~ .layer1 {
--checked-J-4: initial;
--LEVEL-J-3: ;
--LEVEL-J-4: initial;
--touched-J-4: + 0.25s;
}
.container .layer1 {
-webkit-animation: touch-J-4 2s var(--state1) linear forwards;
animation: touch-J-4 2s var(--state1) linear forwards;
}
.container .layer1.end {
--touched-J: calc(2s var(--touched-J-1) var(--touched-J-2) var(--touched-J-3) var(--touched-J-4));
-webkit-animation: touch-J-4 2s var(--state1) linear forwards, enable var(--touched-J) var(--start-J) linear forwards;
animation: touch-J-4 2s var(--state1) linear forwards, enable var(--touched-J) var(--start-J) linear forwards;
}
.container .layer1.end::before {
-webkit-animation: reveal var(--touched-J) var(--start-J) linear forwards;
animation: reveal var(--touched-J) var(--start-J) linear forwards;
}
.container .layer1.end > .start {
-webkit-animation: reveal var(--touched-J) var(--start-J) linear forwards;
animation: reveal var(--touched-J) var(--start-J) linear forwards;
}
.container .layer1.end > .timer {
-webkit-animation: reveal var(--touched-I) var(--start-I) linear forwards, expire var(--touched-J) var(--start-J) linear;
animation: reveal var(--touched-I) var(--start-I) linear forwards, expire var(--touched-J) var(--start-J) linear;
}
.container .layer1.end > .timer::before {
-webkit-animation: flash var(--touched-J) var(--start-J) linear backwards;
animation: flash var(--touched-J) var(--start-J) linear backwards;
}
.container .layer1.end > .clear {
-webkit-animation: reveal var(--touched-I) var(--start-I) linear forwards, disable var(--touched-J) var(--start-J) linear backwards;
animation: reveal var(--touched-I) var(--start-I) linear forwards, disable var(--touched-J) var(--start-J) linear backwards;
}
.container .code-A-1 {
-webkit-animation: hide var(--touched-A) var(--start-A) linear forwards;
animation: hide var(--touched-A) var(--start-A) linear forwards;
}
.container .code-A-1::before {
content: var(--checked-A-1, var(--code-A-1));
}
.container .code-A-2 {
-webkit-animation: hide var(--touched-A) var(--start-A) linear forwards;
animation: hide var(--touched-A) var(--start-A) linear forwards;
}
.container .code-A-2::before {
content: var(--checked-A-2, var(--code-A-2));
}
.container .code-A-3 {
-webkit-animation: hide var(--touched-A) var(--start-A) linear forwards;
animation: hide var(--touched-A) var(--start-A) linear forwards;
}
.container .code-A-3::before {
content: var(--checked-A-3, var(--code-A-3));
}
.container .code-A-4 {
-webkit-animation: hide var(--touched-A) var(--start-A) linear forwards;
animation: hide var(--touched-A) var(--start-A) linear forwards;
}
.container .code-A-4::before {
content: var(--checked-A-4, var(--code-A-4));
}
.container .letter-A {
--LEVEL-A-0: ;
--ROOT-VALUE: "ROOT";
--ROOT-LEFT: var(--LEFT-A-1, var(--E-NODE));
--ROOT-RIGHT: var(--RIGHT-A-1, var(--T-NODE));
--ROOT-NODE: var(--LEVEL-A-0, var(--ROOT-VALUE)) var(--ROOT-LEFT) var(--ROOT-RIGHT);
--E-VALUE: "E";
--E-LEFT: var(--LEFT-A-2, var(--I-NODE));
--E-RIGHT: var(--RIGHT-A-2, var(--A-NODE));
--E-NODE: var(--LEVEL-A-1, var(--E-VALUE)) var(--E-LEFT) var(--E-RIGHT);
--T-VALUE: "T";
--T-LEFT: var(--LEFT-A-2, var(--N-NODE));
--T-RIGHT: var(--RIGHT-A-2, var(--M-NODE));
--T-NODE: var(--LEVEL-A-1, var(--T-VALUE)) var(--T-LEFT) var(--T-RIGHT);
--I-VALUE: "I";
--I-LEFT: var(--LEFT-A-3, var(--S-NODE));
--I-RIGHT: var(--RIGHT-A-3, var(--U-NODE));
--I-NODE: var(--LEVEL-A-2, var(--I-VALUE)) var(--I-LEFT) var(--I-RIGHT);
--A-VALUE: "A";
--A-LEFT: var(--LEFT-A-3, var(--R-NODE));
--A-RIGHT: var(--RIGHT-A-3, var(--W-NODE));
--A-NODE: var(--LEVEL-A-2, var(--A-VALUE)) var(--A-LEFT) var(--A-RIGHT);
--N-VALUE: "N";
--N-LEFT: var(--LEFT-A-3, var(--D-NODE));
--N-RIGHT: var(--RIGHT-A-3, var(--K-NODE));
--N-NODE: var(--LEVEL-A-2, var(--N-VALUE)) var(--N-LEFT) var(--N-RIGHT);
--M-VALUE: "M";
--M-LEFT: var(--LEFT-A-3, var(--G-NODE));
--M-RIGHT: var(--RIGHT-A-3, var(--O-NODE));
--M-NODE: var(--LEVEL-A-2, var(--M-VALUE)) var(--M-LEFT) var(--M-RIGHT);
--S-VALUE: "S";
--S-LEFT: var(--LEFT-A-4, var(--H-NODE));
--S-RIGHT: var(--RIGHT-A-4, var(--V-NODE));
--S-NODE: var(--LEVEL-A-3, var(--S-VALUE)) var(--S-LEFT) var(--S-RIGHT);
--U-VALUE: "U";
--U-LEFT: var(--LEFT-A-4, var(--F-NODE));
--U-RIGHT: var(--RIGHT-A-4, var(---NODE));
--U-NODE: var(--LEVEL-A-3, var(--U-VALUE)) var(--U-LEFT) var(--U-RIGHT);
--R-VALUE: "R";
--R-LEFT: var(--LEFT-A-4, var(--L-NODE));
--R-RIGHT: var(--RIGHT-A-4, var(---NODE));
--R-NODE: var(--LEVEL-A-3, var(--R-VALUE)) var(--R-LEFT) var(--R-RIGHT);
--W-VALUE: "W";
--W-LEFT: var(--LEFT-A-4, var(--P-NODE));
--W-RIGHT: var(--RIGHT-A-4, var(--J-NODE));
--W-NODE: var(--LEVEL-A-3, var(--W-VALUE)) var(--W-LEFT) var(--W-RIGHT);
--D-VALUE: "D";
--D-LEFT: var(--LEFT-A-4, var(--B-NODE));
--D-RIGHT: var(--RIGHT-A-4, var(--X-NODE));
--D-NODE: var(--LEVEL-A-3, var(--D-VALUE)) var(--D-LEFT) var(--D-RIGHT);
--K-VALUE: "K";
--K-LEFT: var(--LEFT-A-4, var(--C-NODE));
--K-RIGHT: var(--RIGHT-A-4, var(--Y-NODE));
--K-NODE: var(--LEVEL-A-3, var(--K-VALUE)) var(--K-LEFT) var(--K-RIGHT);
--G-VALUE: "G";
--G-LEFT: var(--LEFT-A-4, var(--Z-NODE));
--G-RIGHT: var(--RIGHT-A-4, var(--Q-NODE));
--G-NODE: var(--LEVEL-A-3, var(--G-VALUE)) var(--G-LEFT) var(--G-RIGHT);
--O-VALUE: "O";
--O-LEFT: var(--LEFT-A-4, var(---NODE));
--O-RIGHT: var(--RIGHT-A-4, var(---NODE));
--O-NODE: var(--LEVEL-A-3, var(--O-VALUE)) var(--O-LEFT) var(--O-RIGHT);
--H-VALUE: "H";
--H-LEFT: ;
--H-RIGHT: ;
--H-NODE: var(--LEVEL-A-4, var(--H-VALUE)) var(--H-LEFT) var(--H-RIGHT);
--V-VALUE: "V";
--V-LEFT: ;
--V-RIGHT: ;
--V-NODE: var(--LEVEL-A-4, var(--V-VALUE)) var(--V-LEFT) var(--V-RIGHT);
--F-VALUE: "F";
--F-LEFT: ;
--F-RIGHT: ;
--F-NODE: var(--LEVEL-A-4, var(--F-VALUE)) var(--F-LEFT) var(--F-RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-A-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
--L-VALUE: "L";
--L-LEFT: ;
--L-RIGHT: ;
--L-NODE: var(--LEVEL-A-4, var(--L-VALUE)) var(--L-LEFT) var(--L-RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-A-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
--P-VALUE: "P";
--P-LEFT: ;
--P-RIGHT: ;
--P-NODE: var(--LEVEL-A-4, var(--P-VALUE)) var(--P-LEFT) var(--P-RIGHT);
--J-VALUE: "J";
--J-LEFT: ;
--J-RIGHT: ;
--J-NODE: var(--LEVEL-A-4, var(--J-VALUE)) var(--J-LEFT) var(--J-RIGHT);
--B-VALUE: "B";
--B-LEFT: ;
--B-RIGHT: ;
--B-NODE: var(--LEVEL-A-4, var(--B-VALUE)) var(--B-LEFT) var(--B-RIGHT);
--X-VALUE: "X";
--X-LEFT: ;
--X-RIGHT: ;
--X-NODE: var(--LEVEL-A-4, var(--X-VALUE)) var(--X-LEFT) var(--X-RIGHT);
--C-VALUE: "C";
--C-LEFT: ;
--C-RIGHT: ;
--C-NODE: var(--LEVEL-A-4, var(--C-VALUE)) var(--C-LEFT) var(--C-RIGHT);
--Y-VALUE: "Y";
--Y-LEFT: ;
--Y-RIGHT: ;
--Y-NODE: var(--LEVEL-A-4, var(--Y-VALUE)) var(--Y-LEFT) var(--Y-RIGHT);
--Z-VALUE: "Z";
--Z-LEFT: ;
--Z-RIGHT: ;
--Z-NODE: var(--LEVEL-A-4, var(--Z-VALUE)) var(--Z-LEFT) var(--Z-RIGHT);
--Q-VALUE: "Q";
--Q-LEFT: ;
--Q-RIGHT: ;
--Q-NODE: var(--LEVEL-A-4, var(--Q-VALUE)) var(--Q-LEFT) var(--Q-RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-A-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-A-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
--LETTER: var(--ROOT-NODE);
-webkit-animation: reveal var(--touched-A) var(--start-A) linear forwards;
animation: reveal var(--touched-A) var(--start-A) linear forwards;
}
.container .code-B-1 {
-webkit-animation: hide var(--touched-B) var(--start-B) linear forwards;
animation: hide var(--touched-B) var(--start-B) linear forwards;
}
.container .code-B-1::before {
content: var(--checked-B-1, var(--code-B-1));
}
.container .code-B-2 {
-webkit-animation: hide var(--touched-B) var(--start-B) linear forwards;
animation: hide var(--touched-B) var(--start-B) linear forwards;
}
.container .code-B-2::before {
content: var(--checked-B-2, var(--code-B-2));
}
.container .code-B-3 {
-webkit-animation: hide var(--touched-B) var(--start-B) linear forwards;
animation: hide var(--touched-B) var(--start-B) linear forwards;
}
.container .code-B-3::before {
content: var(--checked-B-3, var(--code-B-3));
}
.container .code-B-4 {
-webkit-animation: hide var(--touched-B) var(--start-B) linear forwards;
animation: hide var(--touched-B) var(--start-B) linear forwards;
}
.container .code-B-4::before {
content: var(--checked-B-4, var(--code-B-4));
}
.container .letter-B {
--LEVEL-B-0: ;
--ROOT-VALUE: "ROOT";
--ROOT-LEFT: var(--LEFT-B-1, var(--E-NODE));
--ROOT-RIGHT: var(--RIGHT-B-1, var(--T-NODE));
--ROOT-NODE: var(--LEVEL-B-0, var(--ROOT-VALUE)) var(--ROOT-LEFT) var(--ROOT-RIGHT);
--E-VALUE: "E";
--E-LEFT: var(--LEFT-B-2, var(--I-NODE));
--E-RIGHT: var(--RIGHT-B-2, var(--A-NODE));
--E-NODE: var(--LEVEL-B-1, var(--E-VALUE)) var(--E-LEFT) var(--E-RIGHT);
--T-VALUE: "T";
--T-LEFT: var(--LEFT-B-2, var(--N-NODE));
--T-RIGHT: var(--RIGHT-B-2, var(--M-NODE));
--T-NODE: var(--LEVEL-B-1, var(--T-VALUE)) var(--T-LEFT) var(--T-RIGHT);
--I-VALUE: "I";
--I-LEFT: var(--LEFT-B-3, var(--S-NODE));
--I-RIGHT: var(--RIGHT-B-3, var(--U-NODE));
--I-NODE: var(--LEVEL-B-2, var(--I-VALUE)) var(--I-LEFT) var(--I-RIGHT);
--A-VALUE: "A";
--A-LEFT: var(--LEFT-B-3, var(--R-NODE));
--A-RIGHT: var(--RIGHT-B-3, var(--W-NODE));
--A-NODE: var(--LEVEL-B-2, var(--A-VALUE)) var(--A-LEFT) var(--A-RIGHT);
--N-VALUE: "N";
--N-LEFT: var(--LEFT-B-3, var(--D-NODE));
--N-RIGHT: var(--RIGHT-B-3, var(--K-NODE));
--N-NODE: var(--LEVEL-B-2, var(--N-VALUE)) var(--N-LEFT) var(--N-RIGHT);
--M-VALUE: "M";
--M-LEFT: var(--LEFT-B-3, var(--G-NODE));
--M-RIGHT: var(--RIGHT-B-3, var(--O-NODE));
--M-NODE: var(--LEVEL-B-2, var(--M-VALUE)) var(--M-LEFT) var(--M-RIGHT);
--S-VALUE: "S";
--S-LEFT: var(--LEFT-B-4, var(--H-NODE));
--S-RIGHT: var(--RIGHT-B-4, var(--V-NODE));
--S-NODE: var(--LEVEL-B-3, var(--S-VALUE)) var(--S-LEFT) var(--S-RIGHT);
--U-VALUE: "U";
--U-LEFT: var(--LEFT-B-4, var(--F-NODE));
--U-RIGHT: var(--RIGHT-B-4, var(---NODE));
--U-NODE: var(--LEVEL-B-3, var(--U-VALUE)) var(--U-LEFT) var(--U-RIGHT);
--R-VALUE: "R";
--R-LEFT: var(--LEFT-B-4, var(--L-NODE));
--R-RIGHT: var(--RIGHT-B-4, var(---NODE));
--R-NODE: var(--LEVEL-B-3, var(--R-VALUE)) var(--R-LEFT) var(--R-RIGHT);
--W-VALUE: "W";
--W-LEFT: var(--LEFT-B-4, var(--P-NODE));
--W-RIGHT: var(--RIGHT-B-4, var(--J-NODE));
--W-NODE: var(--LEVEL-B-3, var(--W-VALUE)) var(--W-LEFT) var(--W-RIGHT);
--D-VALUE: "D";
--D-LEFT: var(--LEFT-B-4, var(--B-NODE));
--D-RIGHT: var(--RIGHT-B-4, var(--X-NODE));
--D-NODE: var(--LEVEL-B-3, var(--D-VALUE)) var(--D-LEFT) var(--D-RIGHT);
--K-VALUE: "K";
--K-LEFT: var(--LEFT-B-4, var(--C-NODE));
--K-RIGHT: var(--RIGHT-B-4, var(--Y-NODE));
--K-NODE: var(--LEVEL-B-3, var(--K-VALUE)) var(--K-LEFT) var(--K-RIGHT);
--G-VALUE: "G";
--G-LEFT: var(--LEFT-B-4, var(--Z-NODE));
--G-RIGHT: var(--RIGHT-B-4, var(--Q-NODE));
--G-NODE: var(--LEVEL-B-3, var(--G-VALUE)) var(--G-LEFT) var(--G-RIGHT);
--O-VALUE: "O";
--O-LEFT: var(--LEFT-B-4, var(---NODE));
--O-RIGHT: var(--RIGHT-B-4, var(---NODE));
--O-NODE: var(--LEVEL-B-3, var(--O-VALUE)) var(--O-LEFT) var(--O-RIGHT);
--H-VALUE: "H";
--H-LEFT: ;
--H-RIGHT: ;
--H-NODE: var(--LEVEL-B-4, var(--H-VALUE)) var(--H-LEFT) var(--H-RIGHT);
--V-VALUE: "V";
--V-LEFT: ;
--V-RIGHT: ;
--V-NODE: var(--LEVEL-B-4, var(--V-VALUE)) var(--V-LEFT) var(--V-RIGHT);
--F-VALUE: "F";
--F-LEFT: ;
--F-RIGHT: ;
--F-NODE: var(--LEVEL-B-4, var(--F-VALUE)) var(--F-LEFT) var(--F-RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-B-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
--L-VALUE: "L";
--L-LEFT: ;
--L-RIGHT: ;
--L-NODE: var(--LEVEL-B-4, var(--L-VALUE)) var(--L-LEFT) var(--L-RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-B-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
--P-VALUE: "P";
--P-LEFT: ;
--P-RIGHT: ;
--P-NODE: var(--LEVEL-B-4, var(--P-VALUE)) var(--P-LEFT) var(--P-RIGHT);
--J-VALUE: "J";
--J-LEFT: ;
--J-RIGHT: ;
--J-NODE: var(--LEVEL-B-4, var(--J-VALUE)) var(--J-LEFT) var(--J-RIGHT);
--B-VALUE: "B";
--B-LEFT: ;
--B-RIGHT: ;
--B-NODE: var(--LEVEL-B-4, var(--B-VALUE)) var(--B-LEFT) var(--B-RIGHT);
--X-VALUE: "X";
--X-LEFT: ;
--X-RIGHT: ;
--X-NODE: var(--LEVEL-B-4, var(--X-VALUE)) var(--X-LEFT) var(--X-RIGHT);
--C-VALUE: "C";
--C-LEFT: ;
--C-RIGHT: ;
--C-NODE: var(--LEVEL-B-4, var(--C-VALUE)) var(--C-LEFT) var(--C-RIGHT);
--Y-VALUE: "Y";
--Y-LEFT: ;
--Y-RIGHT: ;
--Y-NODE: var(--LEVEL-B-4, var(--Y-VALUE)) var(--Y-LEFT) var(--Y-RIGHT);
--Z-VALUE: "Z";
--Z-LEFT: ;
--Z-RIGHT: ;
--Z-NODE: var(--LEVEL-B-4, var(--Z-VALUE)) var(--Z-LEFT) var(--Z-RIGHT);
--Q-VALUE: "Q";
--Q-LEFT: ;
--Q-RIGHT: ;
--Q-NODE: var(--LEVEL-B-4, var(--Q-VALUE)) var(--Q-LEFT) var(--Q-RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-B-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-B-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
--LETTER: var(--ROOT-NODE);
-webkit-animation: reveal var(--touched-B) var(--start-B) linear forwards;
animation: reveal var(--touched-B) var(--start-B) linear forwards;
}
.container .code-C-1 {
-webkit-animation: hide var(--touched-C) var(--start-C) linear forwards;
animation: hide var(--touched-C) var(--start-C) linear forwards;
}
.container .code-C-1::before {
content: var(--checked-C-1, var(--code-C-1));
}
.container .code-C-2 {
-webkit-animation: hide var(--touched-C) var(--start-C) linear forwards;
animation: hide var(--touched-C) var(--start-C) linear forwards;
}
.container .code-C-2::before {
content: var(--checked-C-2, var(--code-C-2));
}
.container .code-C-3 {
-webkit-animation: hide var(--touched-C) var(--start-C) linear forwards;
animation: hide var(--touched-C) var(--start-C) linear forwards;
}
.container .code-C-3::before {
content: var(--checked-C-3, var(--code-C-3));
}
.container .code-C-4 {
-webkit-animation: hide var(--touched-C) var(--start-C) linear forwards;
animation: hide var(--touched-C) var(--start-C) linear forwards;
}
.container .code-C-4::before {
content: var(--checked-C-4, var(--code-C-4));
}
.container .letter-C {
--LEVEL-C-0: ;
--ROOT-VALUE: "ROOT";
--ROOT-LEFT: var(--LEFT-C-1, var(--E-NODE));
--ROOT-RIGHT: var(--RIGHT-C-1, var(--T-NODE));
--ROOT-NODE: var(--LEVEL-C-0, var(--ROOT-VALUE)) var(--ROOT-LEFT) var(--ROOT-RIGHT);
--E-VALUE: "E";
--E-LEFT: var(--LEFT-C-2, var(--I-NODE));
--E-RIGHT: var(--RIGHT-C-2, var(--A-NODE));
--E-NODE: var(--LEVEL-C-1, var(--E-VALUE)) var(--E-LEFT) var(--E-RIGHT);
--T-VALUE: "T";
--T-LEFT: var(--LEFT-C-2, var(--N-NODE));
--T-RIGHT: var(--RIGHT-C-2, var(--M-NODE));
--T-NODE: var(--LEVEL-C-1, var(--T-VALUE)) var(--T-LEFT) var(--T-RIGHT);
--I-VALUE: "I";
--I-LEFT: var(--LEFT-C-3, var(--S-NODE));
--I-RIGHT: var(--RIGHT-C-3, var(--U-NODE));
--I-NODE: var(--LEVEL-C-2, var(--I-VALUE)) var(--I-LEFT) var(--I-RIGHT);
--A-VALUE: "A";
--A-LEFT: var(--LEFT-C-3, var(--R-NODE));
--A-RIGHT: var(--RIGHT-C-3, var(--W-NODE));
--A-NODE: var(--LEVEL-C-2, var(--A-VALUE)) var(--A-LEFT) var(--A-RIGHT);
--N-VALUE: "N";
--N-LEFT: var(--LEFT-C-3, var(--D-NODE));
--N-RIGHT: var(--RIGHT-C-3, var(--K-NODE));
--N-NODE: var(--LEVEL-C-2, var(--N-VALUE)) var(--N-LEFT) var(--N-RIGHT);
--M-VALUE: "M";
--M-LEFT: var(--LEFT-C-3, var(--G-NODE));
--M-RIGHT: var(--RIGHT-C-3, var(--O-NODE));
--M-NODE: var(--LEVEL-C-2, var(--M-VALUE)) var(--M-LEFT) var(--M-RIGHT);
--S-VALUE: "S";
--S-LEFT: var(--LEFT-C-4, var(--H-NODE));
--S-RIGHT: var(--RIGHT-C-4, var(--V-NODE));
--S-NODE: var(--LEVEL-C-3, var(--S-VALUE)) var(--S-LEFT) var(--S-RIGHT);
--U-VALUE: "U";
--U-LEFT: var(--LEFT-C-4, var(--F-NODE));
--U-RIGHT: var(--RIGHT-C-4, var(---NODE));
--U-NODE: var(--LEVEL-C-3, var(--U-VALUE)) var(--U-LEFT) var(--U-RIGHT);
--R-VALUE: "R";
--R-LEFT: var(--LEFT-C-4, var(--L-NODE));
--R-RIGHT: var(--RIGHT-C-4, var(---NODE));
--R-NODE: var(--LEVEL-C-3, var(--R-VALUE)) var(--R-LEFT) var(--R-RIGHT);
--W-VALUE: "W";
--W-LEFT: var(--LEFT-C-4, var(--P-NODE));
--W-RIGHT: var(--RIGHT-C-4, var(--J-NODE));
--W-NODE: var(--LEVEL-C-3, var(--W-VALUE)) var(--W-LEFT) var(--W-RIGHT);
--D-VALUE: "D";
--D-LEFT: var(--LEFT-C-4, var(--B-NODE));
--D-RIGHT: var(--RIGHT-C-4, var(--X-NODE));
--D-NODE: var(--LEVEL-C-3, var(--D-VALUE)) var(--D-LEFT) var(--D-RIGHT);
--K-VALUE: "K";
--K-LEFT: var(--LEFT-C-4, var(--C-NODE));
--K-RIGHT: var(--RIGHT-C-4, var(--Y-NODE));
--K-NODE: var(--LEVEL-C-3, var(--K-VALUE)) var(--K-LEFT) var(--K-RIGHT);
--G-VALUE: "G";
--G-LEFT: var(--LEFT-C-4, var(--Z-NODE));
--G-RIGHT: var(--RIGHT-C-4, var(--Q-NODE));
--G-NODE: var(--LEVEL-C-3, var(--G-VALUE)) var(--G-LEFT) var(--G-RIGHT);
--O-VALUE: "O";
--O-LEFT: var(--LEFT-C-4, var(---NODE));
--O-RIGHT: var(--RIGHT-C-4, var(---NODE));
--O-NODE: var(--LEVEL-C-3, var(--O-VALUE)) var(--O-LEFT) var(--O-RIGHT);
--H-VALUE: "H";
--H-LEFT: ;
--H-RIGHT: ;
--H-NODE: var(--LEVEL-C-4, var(--H-VALUE)) var(--H-LEFT) var(--H-RIGHT);
--V-VALUE: "V";
--V-LEFT: ;
--V-RIGHT: ;
--V-NODE: var(--LEVEL-C-4, var(--V-VALUE)) var(--V-LEFT) var(--V-RIGHT);
--F-VALUE: "F";
--F-LEFT: ;
--F-RIGHT: ;
--F-NODE: var(--LEVEL-C-4, var(--F-VALUE)) var(--F-LEFT) var(--F-RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-C-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
--L-VALUE: "L";
--L-LEFT: ;
--L-RIGHT: ;
--L-NODE: var(--LEVEL-C-4, var(--L-VALUE)) var(--L-LEFT) var(--L-RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-C-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
--P-VALUE: "P";
--P-LEFT: ;
--P-RIGHT: ;
--P-NODE: var(--LEVEL-C-4, var(--P-VALUE)) var(--P-LEFT) var(--P-RIGHT);
--J-VALUE: "J";
--J-LEFT: ;
--J-RIGHT: ;
--J-NODE: var(--LEVEL-C-4, var(--J-VALUE)) var(--J-LEFT) var(--J-RIGHT);
--B-VALUE: "B";
--B-LEFT: ;
--B-RIGHT: ;
--B-NODE: var(--LEVEL-C-4, var(--B-VALUE)) var(--B-LEFT) var(--B-RIGHT);
--X-VALUE: "X";
--X-LEFT: ;
--X-RIGHT: ;
--X-NODE: var(--LEVEL-C-4, var(--X-VALUE)) var(--X-LEFT) var(--X-RIGHT);
--C-VALUE: "C";
--C-LEFT: ;
--C-RIGHT: ;
--C-NODE: var(--LEVEL-C-4, var(--C-VALUE)) var(--C-LEFT) var(--C-RIGHT);
--Y-VALUE: "Y";
--Y-LEFT: ;
--Y-RIGHT: ;
--Y-NODE: var(--LEVEL-C-4, var(--Y-VALUE)) var(--Y-LEFT) var(--Y-RIGHT);
--Z-VALUE: "Z";
--Z-LEFT: ;
--Z-RIGHT: ;
--Z-NODE: var(--LEVEL-C-4, var(--Z-VALUE)) var(--Z-LEFT) var(--Z-RIGHT);
--Q-VALUE: "Q";
--Q-LEFT: ;
--Q-RIGHT: ;
--Q-NODE: var(--LEVEL-C-4, var(--Q-VALUE)) var(--Q-LEFT) var(--Q-RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-C-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
---VALUE: "";
---LEFT: ;
---RIGHT: ;
---NODE: var(--LEVEL-C-4, var(---VALUE)) var(---LEFT) var(---RIGHT);
--LETTER: var(--ROOT-NODE);
-webkit-animation: reveal var(--touched-C) var(--start-C) linear forwards;
animation: reveal var(--touched-C) var(--start-C) linear forwards;
}
.container .code-D-1 {
-webkit-animation: hide var(--touched-D) var(--start-D) linear forwards;
animation: hide var(--touched-D) var(--start-D) linear forwards;
}
.container .code-D-1::before {
content: var(--checked-D-1, var(--code-D-1));
}
.container .code-D-2 {
-webkit-animation: hide var(--touched-D) var(--start-D) linear forwards;
animation: hide var(--touched-D) var(--start-D) linear forwards;
}
.container .code-D-2::before {
content: var(--checked-D-2, var(--code-D-2));
}
.container .code-D-3 {
-webkit-animation: hide var(--touched-D) var(--start-D) linear forwards;
animation: hide var(--touched-D) var(--start-D) linear forwards;
}
.container .code-D-3::before {
content: var(--checked-D-3, var(--code-D-3));
}
.container .code-D-4 {
-webkit-animation: hide var(--touched-D) var(--start-D) linear forwards;
animation: hide var(--touched-D) var(--start-D) linear forwards;
}
.container .code-D-4::before {
content: var(--checked-D-4, var(--code-D-4));
}
.container .letter-D {
--LEVEL-D-0: ;
--ROOT-VALUE: "ROOT";
--ROOT-LEFT: var(--LEFT-D-1, var(--E-NODE));
--ROOT-RIGHT: var(--RIGHT-D-1, var(--T-NODE));
--ROOT-NODE: var(--LEVEL-D-0, var(--ROOT-VALUE)) var(--ROOT-LEFT) var(--ROOT-RIGHT);
--E-VALUE: "E";
--E-LEFT: var(--LEFT-D-2, var(--I-NODE));
--E-RIGHT: var(--RIGHT-D-2, var(--A-NODE));
--E-NODE: var(--LEVEL-D-1, var(--E-VALUE)) var(--E-LEFT) var(--E-RIGHT);
--T-VALUE: "T";
--T-LEFT: var(--LEFT-D-2, var(--N-NODE));
--T-RIGHT: var(--RIGHT-D-2, var(--M-NODE));
--T-NODE: var(--LEVEL-D-1, var(--T-VALUE)) var(--T-LEFT) var(--T-RIGHT);
--I-VALUE: "I";
--I-LEFT: var(--LEFT-D-3, var(--S-NODE));
--I-RIGHT: var(--RIGHT-D-3, var(--U-NODE));
--I-NODE: var(--LEVEL-D-2, var(--I-VALUE)) var(--I-LEFT) var(--I-RIGHT);
--A-VALUE: "A";
--A-LEFT: var(--LEFT-D-3, var(--R-NODE));
--A-RIGHT: var(--RIGHT-D-3, var(--W-NODE));
--A-NODE: var(--LEVEL-D-2, var(--A-VALUE)) var(--A-LEFT) var(--A-RIGHT);
--N-VALUE: "N";
--N-LEFT: var(--LEFT-D-3, var(--D-NODE));
--N-RIGHT: var(--RIGHT-D-3, var(--K-NODE));
--N-NODE: var(--LEVEL-D-2, var(--N-VALUE)) var(--N-LEFT) var(--N-RIGHT);
--M-VALUE: "M";
--M-LEFT: var(--LEFT-D-3, var(--G-NODE));
--M-RIGHT: var(--RIGHT-D-3, var(--O-NODE));
--M-NODE: var(--LEVEL-D-2, var(--M-VALUE)) var(--M-LEFT) var(--M-RIGHT);
--S-VALUE: "S";
--S-LEFT: var(--LEFT-D-4, var(--H-NODE));
--S-RIGHT: var(--RIGHT-D-4, var(--V-NODE));
--S-NODE: var(--LEVEL-D-3, var(--S-VALUE)) var(--S-LEFT) var(--S-RIGHT);
--U-VALUE: "U";
--U-LEFT: var(--LEFT-D-4, var(--F-NODE));
--U-RIGHT: var(--RIGHT-D-4, var(---NODE));
--U-NODE: var(--LEVEL-D-3, var(--U-VALUE)) var(--U-LEFT) var(--U-RIGHT);
--R-VALUE: "R";
--R-LEFT: var(--LEFT-D-4, var(--L-NODE));
--R-RIGHT: var(--RIGHT-D-4, var(---NODE));
--R-NODE: var(--LEVEL-D-3, var(--R-VALUE)) var(--R-LEFT) var(--R-RIGHT);
--W-VALUE: "W";
--W-LEFT: var(--LEFT-D-4, var(--P-NODE));
--W-RIGHT: var(--RIGHT-D-4, var(--J-NODE));
--W-NODE: var(--LEVEL-D-3, var(--W-VALUE)) var(--W-LEFT) var(--W-RIGHT);
--D-VALUE: "D";
--D-LEFT: var(--LEFT-D-4, var(--B-NODE));
--D-RIGHT: var(--RIGHT-D-4, var(--X-NODE));
--D-NODE: var(--LEVEL-D-3, var(--D-VALUE)) var(--D-LEFT) var(--D-RIGHT);
--K-VALUE: "K";
--K-LEFT: var(--LEFT-D-4, var(--C-NODE));
--K-RIGHT: var(--RIGHT-D-4, var(--Y-NODE));
--K-NODE: var(--LEVEL-D-3, var(--K-VALUE)) var(--K-LEFT) var(--K-RIGHT);
--G-VALUE: "G";
--G-LEFT: var(--LEFT-D-4, var(--Z-NODE));
--G-RIGHT: var(--RIGHT-D-4, var(--Q-NODE));
--G-NODE: var(--LEVEL-D-3, var(--G-VALUE)) var(--G-LEFT) var(--G-RIGHT);
--O-VALUE: "O";
--O-LEFT: var(--LEFT-D-4, var(---NODE));
--O-RIGHT: var(--RIGHT-D-4, var(---NODE));
--O-NODE: var(--LEVEL.........完整代码请登录后点击上方下载按钮下载查看
网友评论0