* {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-family: "Noto Sans TC", sans-serif;
    letter-spacing: 0;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    color: #2e384d;
    word-wrap: anywhere;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-touch-callout: inherit;
    -webkit-user-select: inherit;
    -khtml-user-select: inherit;
    -moz-user-select: inherit;
    -ms-user-select: inherit;
    user-select: inherit
}

*::-webkit-scrollbar {
    display: none
}

* [can-select=false],
* [can-select="0"],
* .ban-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

* [can-select=true],
* [can-select="1"],
* .can-select {
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial
}

*::before,
*::after {
    box-sizing: border-box
}

input:not([type=radio]):not([type=checkbox]),
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none
}

a[href]:not([href=""]),
button {
    cursor: pointer
}

button * {
    pointer-events: none
}

span,
b,
strong,
i,
em,
time {
    line-height: inherit;
    font-family: inherit;
    font-size: inherit;
    color: inherit
}

* {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans", sans-serif;
    letter-spacing: 1px;
    text-align: left;
    color: #000;
    box-sizing: border-box
}

html {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden
}

body {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #14141b;
    width: 100%;
    height: 100%;
    overflow: hidden scroll
}

body section.timer {
    --width: calc(100vw / 40);
    --height: calc(var(--width) * 3);
    --triHeight: calc(var(--width) / 2);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--width);
    width: 100%;
    height: 100%
}

body section.timer>* {
    flex-shrink: 0
}

body section.timer div.colon {
    width: var(--width);
    height: calc(var(--height) + var(--width)*2)
}

body section.timer div.colon[data-value=mouth]::before {
    opacity: 0
}

body section.timer div.colon[data-value=none]::before,
body section.timer div.colon[data-value=none]::after {
    opacity: 0
}

body section.timer div.colon::before {
    content: "";
    position: absolute;
    top: 0;
    width: var(--width);
    height: var(--width);
    background-color: #fff
}

body section.timer div.colon::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: var(--width);
    height: var(--width);
    background-color: #fff
}

body section.timer div.number {
    position: relative;
    width: calc(var(--width)*2 + var(--triHeight) + var(--height));
    height: calc(var(--width)*3 + var(--triHeight)*2 + var(--height) + var(--height))
}

body section.timer div.number[data-value="0"] span:nth-child(1),
body section.timer div.number[data-value="0"] span:nth-child(2),
body section.timer div.number[data-value="0"] span:nth-child(3),
body section.timer div.number[data-value="0"] span:nth-child(5),
body section.timer div.number[data-value="0"] span:nth-child(6),
body section.timer div.number[data-value="0"] span:nth-child(7) {
    opacity: 1
}

body section.timer div.number[data-value="1"] span:nth-child(3),
body section.timer div.number[data-value="1"] span:nth-child(5) {
    opacity: 1
}

body section.timer div.number[data-value="2"] span:nth-child(2),
body section.timer div.number[data-value="2"] span:nth-child(3),
body section.timer div.number[data-value="2"] span:nth-child(4),
body section.timer div.number[data-value="2"] span:nth-child(6),
body section.timer div.number[data-value="2"] span:nth-child(7) {
    opacity: 1
}

body section.timer div.number[data-value="3"] span:nth-child(2),
body section.timer div.number[data-value="3"] span:nth-child(3),
body section.timer div.number[data-value="3"] span:nth-child(4),
body section.timer div.number[data-value="3"] span:nth-child(5),
body section.timer div.number[data-value="3"] span:nth-child(6) {
    opacity: 1
}

body section.timer div.number[data-value="4"] span:nth-child(1),
body section.timer div.number[data-value="4"] span:nth-child(3),
body section.timer div.number[data-value="4"] span:nth-child(4),
body section.timer div.number[data-value="4"] span:nth-child(5) {
    opacity: 1
}

body section.timer div.number[data-value="5"] span:nth-child(1),
body section.timer div.number[data-value="5"] span:nth-child(2),
body section.timer div.number[data-value="5"] span:nth-child(4),
body section.timer div.number[data-value="5"] span:nth-child(5),
body section.timer div.number[data-value="5"] span:nth-child(6) {
    opacity: 1
}

body section.timer div.number[data-value="6"] span:nth-child(1),
body section.timer div.number[data-value="6"] span:nth-child(2),
body section.timer div.number[data-value="6"] span:nth-child(4),
body section.timer div.number[data-value="6"] span:nth-child(5),
body section.timer div.number[data-value="6"] span:nth-child(6),
body section.timer div.number[data-value="6"] span:nth-child(7) {
    opacity: 1
}

body section.timer div.number[data-value="7"] span:nth-child(1),
body section.timer div.number[data-value="7"] span:nth-child(2),
body section.timer div.number[data-value="7"] span:nth-child(3),
body section.timer div.number[data-value="7"] span:nth-child(5) {
    opacity: 1
}

body section.timer div.number[data-value="8"] span:nth-child(1),
body section.timer div.number[data-value="8"] span:nth-child(2),
body section.timer div.number[data-value="8"] span:nth-child(3),
body section.timer div.number[data-value="8"] span:nth-child(4),
body section.timer div.number[data-value="8"] span:nth-child(5),
body section.timer div.number[data-value="8"] span:nth-child(6),
body section.timer div.number[data-value="8"] span:nth-child(7) {
    opacity: 1
}

body section.timer div.number[data-value="9"] span:nth-child(1),
body section.timer div.number[data-value="9"] span:nth-child(2),
body section.timer div.number[data-value="9"] span:nth-child(3),
body section.timer div.number[data-value="9"] span:nth-child(4),
body section.timer div.number[data-value="9"] span:nth-child(5),
body section.timer div.number[data-value="9"] span:nth-child(6) {
    opacity: 1
}

body section.timer div.number[data-value=eye] span:nth-child(1),
body section.timer div.number[data-value=eye] span:nth-child(2),
body section.timer div.number[data-value=eye] span:nth-child(3),
body section.timer div.number[data-value=eye] span:nth-child(4) {
    opacity: 1
}

body section.timer div.number[data-value="-"] span:nth-child(4) {
    opacity: 1
}

body section.timer div.number span {
    position: absolute;
    display: block;
    width: var(--height);
    height: var(--width);
    background-color: #fff;
    transition: .3s;
    opacity: 0
}

body section.timer div.number span:nth-child(1) {
    top: calc(var(--width) + var(--width) + var(--triHeight)/2);
    left: calc(var(--width)*-1);
    transform: rotate(-90deg)
}

body section.timer div.number span:nth-child(2) {
    top: 0;
    left: calc(var(--width) + var(--triHeight)/2)
}

body section.timer div.number span:nth-child(3) {
    top: calc(var(--width) + var(--width) + var(--triHeight)/2);
    right: calc(var(--width)*-1);
    transform: rotate(-90deg)
}

body section.timer div.number span:nth-child(4) {
    top: calc(var(--width) + var(--triHeight) + var(--height));
    left: calc(var(--width) + var(--triHeight)/2)
}

body section.timer div.number span:nth-child(5) {
    top: calc(var(--width) + var(--width) + var(--triHeight)/2 + var(--width) + var(--triHeight) + var(--height));
    right: calc(var(--width)*-1);
    transform: rotate(-90deg)
}

body section.timer div.number span:nth-child(6) {
    top: calc(var(--width)*2 + var(--triHeight)*2 + var(--height)*2);
    left: calc(var(--width) + var(--triHeight)/2)
}

body section.timer div.number span:nth-child(7) {
    top: calc(var(--width) + var(--width) + var(--triHeight)/2 + var(--width) + var(--triHeight) + var(--height));
    left: calc(var(--width)*-1);
    transform: rotate(-90deg)
}

body section.timer div.number span::before {
    content: "";
    position: absolute;
    left: calc(var(--triHeight)*-1 + .5px);
    width: var(--triHeight);
    height: var(--width);
    clip-path: polygon(0 var(--triHeight), 0 var(--triHeight), var(--triHeight) var(--width), var(--triHeight) 0);
    background-color: inherit
}

body section.timer div.number span::after {
    content: "";
    position: absolute;
    right: calc(var(--triHeight)*-1 + .5px);
    width: var(--triHeight);
    height: var(--width);
    clip-path: polygon(0 0, 0 var(--width), var(--triHeight) var(--triHeight), var(--triHeight) var(--triHeight));
    background-color: inherit
}

body section.bottom {
    position: fixed;
    bottom: 2rem
}

body section.bottom p {
    padding: 0 1rem;
    max-width: 20rem;
    line-height: 1.5rem;
    text-align: center;
    color: #fff;
    font-size: .75rem
}