@font-face {
    font-family: display-font;
    src: url("font/AM-JP-UDShinGoNTPr6N-Reg.otf");
    font-weight: 400;
}

@font-face {
    font-family: display-font;
    src: url("font/AM-JP-UDShinGoNTPr6N-DeBold.otf");
    font-weight: 500;
}

@font-face {
    font-family: display-font;
    src: url("font/AM-JP-UDShinGoNTPr6N-Light.otf");
    font-weight: 300;
}

@font-face {
    font-family: nhk-clock;
    src: url("font/NHK-Clock_TTF.ttf");
}

:root {
    --bg: #ffffff;
    --fg: #111827;
    --accent: #0ea5e9;
    --muted: #6b7280;
    --widthLight: 3px;
    --widthMedium: 6px;
    --widthBold: 9px;
    --borderLightOutline: drop-shadow(calc(var(--widthLight) / 1.41421356) calc(var(--widthLight) / 1.41421356) 0 #000)
                          drop-shadow(calc(var(--widthLight) * -1 / 1.41421356) calc(var(--widthLight) / 1.41421356) 0 #000)
                          drop-shadow(calc(var(--widthLight) * -1 / 1.41421356) calc(var(--widthLight) * -1 / 1.41421356) 0 #000)
                          drop-shadow(calc(var(--widthLight) / 1.41421356) calc(var(--widthLight) * -1 / 1.41421356) 0 #000)
                          drop-shadow(calc(var(--widthLight) * 0.38268343) calc(var(--widthLight) * 0.92387953) 0 #000)
                          drop-shadow(calc(var(--widthLight) * -0.92387953) calc(var(--widthLight) * 0.38268343) 0 #000)
                          drop-shadow(calc(var(--widthLight) * -0.70710678) calc(var(--widthLight) * -0.70710678) 0 #000)
                          drop-shadow(calc(var(--widthLight) * 0.92387953) calc(var(--widthLight) * -0.38268343) 0 #000)
                          drop-shadow(calc(var(--widthLight) * -0.38268343) calc(var(--widthLight) * -0.92387953) 0 #000)
                          drop-shadow(calc(var(--widthLight) * 0.70710678) calc(var(--widthLight) * 0.70710678) 0 #000)
                          drop-shadow(calc(var(--widthLight) * -1) 0 0 #000)
                          drop-shadow(calc(var(--widthLight) * 0.92387953) calc(var(--widthLight) * 0.38268343) 0 #000)
                          drop-shadow(calc(var(--widthLight) * -0.38268343) calc(var(--widthLight) * 0.92387953) 0 #000)
                          drop-shadow(calc(var(--widthLight) * 0.70710678) calc(var(--widthLight) * -0.70710678) 0 #000)
                          drop-shadow(calc(var(--widthLight)) 0 0 #000)
                          drop-shadow(calc(var(--widthLight) * -1) 0 0 #000)
                          drop-shadow(0 calc(var(--widthLight)) 0 #000)
                          drop-shadow(0 calc(var(--widthLight) * -1) 0 #000)
                          drop-shadow(calc(var(--widthLight) * -0.907106781) calc(var(--widthLight) * -0.407106781) 0 #000)
                          drop-shadow(calc(var(--widthLight) * 0.407106781) calc(var(--widthLight) * -0.907106781) 0 #000);

    --borderLight: calc(var(--widthLight) / 1.41421356) calc(var(--widthLight) / 1.41421356) 0 #000,
                calc(var(--widthLight) * -1 / 1.41421356) calc(var(--widthLight) / 1.41421356) 0 #000,
                calc(var(--widthLight) * -1 / 1.41421356) calc(var(--widthLight) * -1 / 1.41421356) 0 #000,
                calc(var(--widthLight) / 1.41421356) calc(var(--widthLight) * -1 / 1.41421356) 0 #000,
                calc(var(--widthLight) * 0.38268343) calc(var(--widthLight) * 0.92387953) 0 #000,
                calc(var(--widthLight) * -0.92387953) calc(var(--widthLight) * 0.38268343) 0 #000,
                calc(var(--widthLight) * -0.70710678) calc(var(--widthLight) * -0.70710678) 0 #000,
                calc(var(--widthLight) * 0.92387953) calc(var(--widthLight) * -0.38268343) 0 #000,
                calc(var(--widthLight) * -0.38268343) calc(var(--widthLight) * -0.92387953) 0 #000,
                calc(var(--widthLight) * 0.70710678) calc(var(--widthLight) * 0.70710678) 0 #000,
                calc(var(--widthLight) * -1) 0 0 #000,
                calc(var(--widthLight) * 0.92387953) calc(var(--widthLight) * 0.38268343) 0 #000,
                calc(var(--widthLight) * -0.38268343) calc(var(--widthLight) * 0.92387953) 0 #000,
                calc(var(--widthLight) * 0.70710678) calc(var(--widthLight) * -0.70710678) 0 #000,
                calc(var(--widthLight)) 0 0 #000,
                calc(var(--widthLight) * -1) 0 0 #000,
                0 calc(var(--widthLight)) 0 #000,
                0 calc(var(--widthLight) * -1) 0 #000,
                calc(var(--widthLight) * -0.907106781) calc(var(--widthLight) * -0.407106781) 0 #000,
                calc(var(--widthLight) * 0.407106781) calc(var(--widthLight) * -0.907106781) 0 #000;

    --borderMedium: calc(var(--widthMedium) / 1.41421356) calc(var(--widthMedium) / 1.41421356) 0 #000,
                calc(var(--widthMedium) * -1 / 1.41421356) calc(var(--widthMedium) / 1.41421356) 0 #000,
                calc(var(--widthMedium) * -1 / 1.41421356) calc(var(--widthMedium) * -1 / 1.41421356) 0 #000,
                calc(var(--widthMedium) / 1.41421356) calc(var(--widthMedium) * -1 / 1.41421356) 0 #000,
                calc(var(--widthMedium) * 0.38268343) calc(var(--widthMedium) * 0.92387953) 0 #000,
                calc(var(--widthMedium) * -0.92387953) calc(var(--widthMedium) * 0.38268343) 0 #000,
                calc(var(--widthMedium) * -0.70710678) calc(var(--widthMedium) * -0.70710678) 0 #000,
                calc(var(--widthMedium) * 0.92387953) calc(var(--widthMedium) * -0.38268343) 0 #000,
                calc(var(--widthMedium) * -0.38268343) calc(var(--widthMedium) * -0.92387953) 0 #000,
                calc(var(--widthMedium) * 0.70710678) calc(var(--widthMedium) * 0.70710678) 0 #000,
                calc(var(--widthMedium) * -1) 0 0 #000,
                calc(var(--widthMedium) * 0.92387953) calc(var(--widthMedium) * 0.38268343) 0 #000,
                calc(var(--widthMedium) * -0.38268343) calc(var(--widthMedium) * 0.92387953) 0 #000,
                calc(var(--widthMedium) * 0.70710678) calc(var(--widthMedium) * -0.70710678) 0 #000,
                calc(var(--widthMedium)) 0 0 #000,
                calc(var(--widthMedium) * -1) 0 0 #000,
                0 calc(var(--widthMedium)) 0 #000,
                0 calc(var(--widthMedium) * -1) 0 #000,
                calc(var(--widthMedium) * -0.907106781) calc(var(--widthMedium) * -0.407106781) 0 #000,
                calc(var(--widthMedium) * 0.407106781) calc(var(--widthMedium) * -0.907106781) 0 #000;

    --borderBold: calc(var(--widthBold) / 1.41421356) calc(var(--widthBold) / 1.41421356) 0 #000,
                calc(var(--widthBold) * -1 / 1.41421356) calc(var(--widthBold) / 1.41421356) 0 #000,
                calc(var(--widthBold) * -1 / 1.41421356) calc(var(--widthBold) * -1 / 1.41421356) 0 #000,
                calc(var(--widthBold) / 1.41421356) calc(var(--widthBold) * -1 / 1.41421356) 0 #000,
                calc(var(--widthBold) * 0.38268343) calc(var(--widthBold) * 0.92387953) 0 #000,
                calc(var(--widthBold) * -0.92387953) calc(var(--widthBold) * 0.38268343) 0 #000,
                calc(var(--widthBold) * -0.70710678) calc(var(--widthBold) * -0.70710678) 0 #000,
                calc(var(--widthBold) * 0.92387953) calc(var(--widthBold) * -0.38268343) 0 #000,
                calc(var(--widthBold) * -0.38268343) calc(var(--widthBold) * -0.92387953) 0 #000,
                calc(var(--widthBold) * 0.70710678) calc(var(--widthBold) * 0.70710678) 0 #000,
                calc(var(--widthBold) * -1) 0 0 #000,
                calc(var(--widthBold) * 0.92387953) calc(var(--widthBold) * 0.38268343) 0 #000,
                calc(var(--widthBold) * -0.38268343) calc(var(--widthBold) * 0.92387953) 0 #000,
                calc(var(--widthBold) * 0.70710678) calc(var(--widthBold) * -0.70710678) 0 #000,
                calc(var(--widthBold)) 0 0 #000,
                calc(var(--widthBold) * -1) 0 0 #000,
                0 calc(var(--widthBold)) 0 #000,
                0 calc(var(--widthBold) * -1) 0 #000,
                calc(var(--widthBold) * -0.907106781) calc(var(--widthBold) * -0.407106781) 0 #000,
                calc(var(--widthBold) * 0.407106781) calc(var(--widthBold) * -0.907106781) 0 #000;
    


    --borderLightW: calc(var(--widthLight) / 1.41421356) calc(var(--widthLight) / 1.41421356) 0 #FFF,
                calc(var(--widthLight) * -1 / 1.41421356) calc(var(--widthLight) / 1.41421356) 0 #FFF,
                calc(var(--widthLight) * -1 / 1.41421356) calc(var(--widthLight) * -1 / 1.41421356) 0 #FFF,
                calc(var(--widthLight) / 1.41421356) calc(var(--widthLight) * -1 / 1.41421356) 0 #FFF,
                calc(var(--widthLight) * 0.38268343) calc(var(--widthLight) * 0.92387953) 0 #FFF,
                calc(var(--widthLight) * -0.92387953) calc(var(--widthLight) * 0.38268343) 0 #FFF,
                calc(var(--widthLight) * -0.70710678) calc(var(--widthLight) * -0.70710678) 0 #FFF,
                calc(var(--widthLight) * 0.92387953) calc(var(--widthLight) * -0.38268343) 0 #FFF,
                calc(var(--widthLight) * -0.38268343) calc(var(--widthLight) * -0.92387953) 0 #FFF,
                calc(var(--widthLight) * 0.70710678) calc(var(--widthLight) * 0.70710678) 0 #FFF,
                calc(var(--widthLight) * -1) 0 0 #FFF,
                calc(var(--widthLight) * 0.92387953) calc(var(--widthLight) * 0.38268343) 0 #FFF,
                calc(var(--widthLight) * -0.38268343) calc(var(--widthLight) * 0.92387953) 0 #FFF,
                calc(var(--widthLight) * 0.70710678) calc(var(--widthLight) * -0.70710678) 0 #FFF,
                calc(var(--widthLight)) 0 0 #FFF,
                calc(var(--widthLight) * -1) 0 0 #FFF,
                0 calc(var(--widthLight)) 0 #FFF,
                0 calc(var(--widthLight) * -1) 0 #FFF,
                calc(var(--widthLight) * -0.907106781) calc(var(--widthLight) * -0.407106781) 0 #FFF,
                calc(var(--widthLight) * 0.407106781) calc(var(--widthLight) * -0.907106781) 0 #FFF;

    --borderMediumW: calc(var(--widthMedium) / 1.41421356) calc(var(--widthMedium) / 1.41421356) 0 #FFF,
                calc(var(--widthMedium) * -1 / 1.41421356) calc(var(--widthMedium) / 1.41421356) 0 #FFF,
                calc(var(--widthMedium) * -1 / 1.41421356) calc(var(--widthMedium) * -1 / 1.41421356) 0 #FFF,
                calc(var(--widthMedium) / 1.41421356) calc(var(--widthMedium) * -1 / 1.41421356) 0 #FFF,
                calc(var(--widthMedium) * 0.38268343) calc(var(--widthMedium) * 0.92387953) 0 #FFF,
                calc(var(--widthMedium) * -0.92387953) calc(var(--widthMedium) * 0.38268343) 0 #FFF,
                calc(var(--widthMedium) * -0.70710678) calc(var(--widthMedium) * -0.70710678) 0 #FFF,
                calc(var(--widthMedium) * 0.92387953) calc(var(--widthMedium) * -0.38268343) 0 #FFF,
                calc(var(--widthMedium) * -0.38268343) calc(var(--widthMedium) * -0.92387953) 0 #FFF,
                calc(var(--widthMedium) * 0.70710678) calc(var(--widthMedium) * 0.70710678) 0 #FFF,
                calc(var(--widthMedium) * -1) 0 0 #FFF,
                calc(var(--widthMedium) * 0.92387953) calc(var(--widthMedium) * 0.38268343) 0 #FFF,
                calc(var(--widthMedium) * -0.38268343) calc(var(--widthMedium) * 0.92387953) 0 #FFF,
                calc(var(--widthMedium) * 0.70710678) calc(var(--widthMedium) * -0.70710678) 0 #FFF,
                calc(var(--widthMedium)) 0 0 #FFF,
                calc(var(--widthMedium) * -1) 0 0 #FFF,
                0 calc(var(--widthMedium)) 0 #FFF,
                0 calc(var(--widthMedium) * -1) 0 #FFF,
                calc(var(--widthMedium) * -0.907106781) calc(var(--widthMedium) * -0.407106781) 0 #FFF,
                calc(var(--widthMedium) * 0.407106781) calc(var(--widthMedium) * -0.907106781) 0 #FFF;

    --borderBoldW: calc(var(--widthBold) / 1.41421356) calc(var(--widthBold) / 1.41421356) 0 #FFF,
                calc(var(--widthBold) * -1 / 1.41421356) calc(var(--widthBold) / 1.41421356) 0 #FFF,
                calc(var(--widthBold) * -1 / 1.41421356) calc(var(--widthBold) * -1 / 1.41421356) 0 #FFF,
                calc(var(--widthBold) / 1.41421356) calc(var(--widthBold) * -1 / 1.41421356) 0 #FFF,
                calc(var(--widthBold) * 0.38268343) calc(var(--widthBold) * 0.92387953) 0 #FFF,
                calc(var(--widthBold) * -0.92387953) calc(var(--widthBold) * 0.38268343) 0 #FFF,
                calc(var(--widthBold) * -0.70710678) calc(var(--widthBold) * -0.70710678) 0 #FFF,
                calc(var(--widthBold) * 0.92387953) calc(var(--widthBold) * -0.38268343) 0 #FFF,
                calc(var(--widthBold) * -0.38268343) calc(var(--widthBold) * -0.92387953) 0 #FFF,
                calc(var(--widthBold) * 0.70710678) calc(var(--widthBold) * 0.70710678) 0 #FFF,
                calc(var(--widthBold) * -1) 0 0 #FFF,
                calc(var(--widthBold) * 0.92387953) calc(var(--widthBold) * 0.38268343) 0 #FFF,
                calc(var(--widthBold) * -0.38268343) calc(var(--widthBold) * 0.92387953) 0 #FFF,
                calc(var(--widthBold) * 0.70710678) calc(var(--widthBold) * -0.70710678) 0 #FFF,
                calc(var(--widthBold)) 0 0 #FFF,
                calc(var(--widthBold) * -1) 0 0 #FFF,
                0 calc(var(--widthBold)) 0 #FFF,
                0 calc(var(--widthBold) * -1) 0 #FFF,
                calc(var(--widthBold) * -0.907106781) calc(var(--widthBold) * -0.407106781) 0 #FFF,
                calc(var(--widthBold) * 0.407106781) calc(var(--widthBold) * -0.907106781) 0 #FFF;
}

:root[data-theme="dark"] {
    --bg: #0b1220;
    --fg: #e6eef8;
    --accent: #60a5fa;
    --muted: #9ca3af;
}

.a {
    color: #abb2bf;
    color: #e06c75;
    color: #c678dd;
    color: #d19a66;
    color: #e5c07b;
    color: #57a7fa;
    color: #98c379;
    color: #5c6370;
    color: #6f87b5;
    color: #99cffa;
    color: #3ab890;
    color: #4bb5a9;
    color: #61afef;
    color: #ffffff;
}

* {
    box-sizing: border-box
}

html,body {
    height: 100%
}

body {
    margin: 0;
    font-family: system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100vw;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}

.content {
    padding: 2rem 1.25rem;
    margin: 0 auto;
    display: flex;
    width: 100%;
}

button {
    cursor: pointer;
    background: var(--accent);
    color: var(--bg);
    border: 0;
    padding: 1.5cqw 1.75cqw;
    border-radius: 2.25cqw;
    font-weight: 600;
    transition: transform .06s ease;
    font-size: 6cqw;
}

button:active {
    transform: translateY(1px)
}

button[aria-pressed="true"] {
    opacity: 0.75
}

@media (max-width: 520px) {
    .site-header {
        flex-direction: column;
        align-items: flex-start
    }

    .content {
        padding: 1rem
    }
}

.hide {
    display: none !important;
}

.frame {
    background: #000;
    flex: 5;
    display: flex;
    aspect-ratio: 16 / 9;
    width: 1rem;
    position: relative;
    container-type: size;
    overflow: hidden;

    .inner-frame {
        position: absolute;
        width: 1500px;
        aspect-ratio: 16 / 9;
        transform: scale(calc(100cqw / 1500px));
        transform-origin: top left;
        background: url("image/nhkBg.png");
        background-size: cover;
        font-family: display-font;
        container-type: size;

        .display-time {
            font-family: nhk-clock;
            position: absolute;
            top: 3.5%;
            right: 82.25%;
            font-size: 7.25cqh;
            color: #ffffff;
            z-index: 500;
            letter-spacing: -.09cqw;
            text-shadow: var(--borderLight);
        }

        .headline-info {
            position: absolute;
            top: 7%;
            left: 20.75%;
            font-size: 4.8cqh;
            color: #ffffff;
            z-index: 450;
            line-height: 1;
            text-shadow: var(--borderMedium);

            .line-1 {
                margin-bottom: 1.5cqh;
            }

            :is(.line-1, .line-2) :is(.tnm-lv-1, .tnm-lv-2, .tnm-lv-3, .tnm-forecast, .shindo) {
                position: relative;
                z-index: 450;

                span {
                    position: relative;
                    z-index: 450;
                }
            }
            :is(.line-1, .line-2) :is(.tnm-lv-1, .tnm-lv-2, .tnm-lv-3, .tnm-forecast, .shindo)::after {
                content: "";
                display: inline-block;
                position: absolute;
                z-index: 300;
            }
            :is(.line-1, .line-2) .tnm-lv-1::after {
                width: 110%;
                height: 12%;
                background: #eaea1f;
                bottom: 7%;
                right: -7%;
                border: solid .2cqw;
                border-bottom-color: #b5b521;
                border-left-color: #b5bb11;
                border-top-color: #f5ff4a;
                border-right-color: #f4fc45;
                outline: solid .125cqw #000;
            }
            :is(.line-1, .line-2) .tnm-lv-2::after {
                width: 115%;
                height: 86%;
                background: #ff0803;
                bottom: 6%;
                right: -8%;
                outline: solid .125cqw #000;
            }
            :is(.line-1, .line-2) .tnm-lv-3::after {
                width: 115%;
                height: 86%;
                background: #f802ed;
                bottom: 6%;
                right: -8%;
                outline: solid .125cqw #000;
            }
            :is(.line-1, .line-2) .tnm-forecast::before {
                content: "";
                width: 106.5%;
                height: 62%;
                display: inline-block;
                position: absolute;
                bottom: 6%;
                z-index: 250;
                right: -13.25%;
                border: solid .5cqw #000000;
            }
            :is(.line-1, .line-2) .tnm-forecast::after {
                width: 112%;
                height: 70%;
                bottom: 9%;
                right: -11%;
                border: solid .2cqw #fff;
            }
            :is(.line-1, .line-2) .shindo::after {
                width: 125%;
                height: 21.5%;
                background: #03a400;
                bottom: 7%;
                right: -11.5%;
                outline: solid .125cqw #000;
            }
        }

        .inner-inner-frame {
            position: absolute;
            width: 1500px;
            aspect-ratio: 16 / 9;
            container-type: size;
            background: url("temp2.png");
            background-size: cover;
            clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0% 0%);
            transform-origin: bottom;
            bottom: 0cqh;
            transition: transform .4s linear, clip-path .4s linear, bottom .4s linear;

            &.shrink-content {
                transform: scale(0.885);
                bottom: .5cqh;
                clip-path: polygon(0 100%, 100% 100%, 100% 3.25%, 0% 3.25%);
            }

            .tnm-page-info {
                position: absolute;
                bottom: 0.25%;
                right: 5.5%;
                font-size: 2.4cqh;
                color: #ffffff;
                z-index: 500;
                display: flex;
                text-align: right;
                line-height: 1;

                .page {
                    margin-right: 4.55cqw;
                }
                .update-date {
                    margin-right: 1.1cqw;
                }
            }

            .tnm-title {
                position: absolute;
                font-size: 5cqh;
                color: #ffffff;
                z-index: 400;
                font-weight: 400;
                left: 11.5%;
                bottom: 69.75%;
                background: #000;
                width: 82.9cqh;
                text-align: center;
                border: solid .125cqw #fff;
                line-height: 1.15;
            }

            .tnm-arrival {
                display: flex;
                flex-direction: column;
                font-size: 4.75cqh;
                position: absolute;
                left: 11.5%;
                top: 31.25%;

                :is(.tnm-type, .tnm-area) {
                    height: 6.65cqh;
                    color: #220d00;
                    display: flex;
                    align-items: center;
                }

                :is(.tnm-type, .tnm-area) .name {
                    width: 48.8cqh;
                    display: inline-block;
                    line-height: 1;
                    border-right: solid .375cqh;
                    padding-left: 1.5cqh;
                    font-weight: 500;
                    height: 3cqw;
                    .wrapper {
                        display: inline-block;
                        transform: scaleX(.98);
                        transform-origin: left;
                        white-space: nowrap;
                    }
                }

                :is(.tnm-type, .tnm-area) .time {
                    width: 17.3cqh;
                    line-height: 1;
                    vertical-align: baseline;
                    border-right: solid .375cqh;
                    font-size: 3.25cqh;
                    height: 5.75cqh;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;

                    .condition.char-4 {
                        transform: scaleX(.9);
                    }
                    .condition.char-5 {
                        transform: scaleX(0.725);
                        white-space: nowrap;
                    }

                    .arrival-date {
                        font-size: 1.2cqw;
                        text-align: end;
                        line-height: 1.2;
                        display: flex;
                        flex-direction: column;
                    }
                    .arrival-time {
                        text-align: right;
                        transform: scaleX(0.825);
                        transform-origin: right;
                        width: 6.25cqw;
                        display: flex;
                        justify-content: flex-end;
                        font-size: 4.5cqh;
                    }
                }

                :is(.tnm-type, .tnm-area) .height {
                    width: 16.8cqh;
                    line-height: 1;
                    vertical-align: baseline;
                    font-size: 3.25cqh;
                    height: 5.75cqh;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }

                .tnm-type {
                    .name, .time {
                        border-right-color: #220d00;
                    }
                }

                .tnm-area {
                    background: #0009;
                    color: #ebebec;
                    .name {
                        border-right-color: #ebebec;
                        font-weight: 400;
                    }

                    .time {
                        border-right: none;
                        color: #d5d211;
                        font-size: 4.25cqh;
                    }

                    .height {
                        background: #ffffff;
                        color: #220d00;
                        height: 100%;
                        font-size: 4.5cqh;
                        justify-content: flex-end;
                        padding-right: 4cqh;

                        .unit-meter {
                            transform: scaleX(0.9);
                            transform-origin: right;
                            margin-left: -.1cqw;
                        }
                    }
                }
                .tnm-area + .tnm-area {
                    border-top: .1cqw solid #ccc;
                }

                .tnm-type.lv-1 {
                    background: #e5e312;
                    color: #220d00;
                    .name, .time {
                        border-right-color: #220d00;
                    }
                }

                .tnm-area.lv-1 .height {
                    color: #220d00;
                }

                .tnm-type.lv-2 {
                    background: #ed300f;
                    color: #ebebec;
                    .name, .time {
                        border-right-color: #ebebec;
                    }
                }

                .tnm-area.lv-2 .height {
                    color: #ed300f;
                }

                .tnm-type.lv-3 {
                    background: #ce03f8;
                    color: #ebebec;
                    .name, .time {
                        border-right-color: #ebebec;
                    }
                }

                .tnm-area.lv-3 .height {
                    color: #ce03f8;
                }
            }
        }
    }
}

.panel {
    background: #2e2e2e;
    flex: 1;
    display: flex;
    width: 1rem;
    height: auto;
    flex-direction: column;
    gap: min(.5rem, .5cqw);
    padding: min(.5rem, .5cqw);
    container-type: size;
    .records-tnm, .records-earthquake {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: min(2.5rem, 2.5cqw);
        .tnm-record, .earthquake-record {
            font-size: 5cqw;
            background: #3e3e3e;
            padding: min(2.5rem, 2.5cqw);
            cursor: pointer;
            h2, h3, p {
                margin: 0;
            }

            &:hover {
                background: #505050;
            }
            &.active {
                background: #666457;
            }
        }
    }

    .control {
        .raw-earthquake-info {
            white-space: normal;
            height: 58cqh;
            overflow: auto;
            margin: .5cqh 0 0 0;
        }
    }
}