html, body { user-select: none; user-focus: none; -webkit-user-select: none; margin: 0; font-family: sans-serif }
#p { transform: rotateZ(45deg); transform-origin: 200px 200px; will-change: transform; }

.chart .vals { stroke: #000; fill: none; }
#sc { transform: translate(360px,120px); clip-path: url(#cp); }
#tc { transform: translate(360px,260px); clip-path: url(#cp); }
.cm { transform: translate(var(--x)); }
.xline { stroke: #999; stroke-dasharray: 10; stroke-dashoffset: 5; }
.yline { stroke: #999; }
.l { transform: translate(-360px,20px); font-family: sans-serif; }
.value { transform: translate(-75px,20px); font-family: sans-serif; }
#a { touch-action: none; }

#svg.active .er { fill: #f00; }
#svg.active .eb { fill: #00f; }

@keyframes cl {
    0% { transform: translate(0); }
    100% { transform: translate(-180px); }
}

.cl { animation: cl 1.8s infinite linear; }
.active #a {
    fill: #ddd;
}

#switch {
    rotate: 0;
    transform-origin: 180px 40px;
}

.active #switch {
    rotate: 26deg;
    transition: rotate .1s;
}

#c :not(#a) {
    pointer-events: none;
}

#svg { width: 800px; height: 600px; overflow: visible; --x: "0"; margin-top:30px; }
#m { transform: translate(360px, 0); }
#c { transform: translate(360px, 320px); }

@media screen and (max-width: 768px) {
    #svg { width: 360px; height: 640px;}
    #svg > :last-child { transform: translate(-75px,-100px); }
    #sc { transform: translate(360px, 0px); }
    #tc { transform: translate(360px, 140px); }
    #m { transform: translate(-30px,180px); }
    #c { transform: translate(-30px, 490px); }
}

#h {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}

#f {
    background-color: #eee;
    width: 100%;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
}

a {
    color: #037;
}