:root {
    --bg-dark: #090d16;
    --panel-bg: rgba(16, 25, 40);
    --panel-bg-light: #1b3341;
    --panel-border-3: rgba(0, 240, 255, .03);
    --panel-border-15: rgba(0, 240, 255, .15);
    --panel-border-20: rgba(0, 240, 255, .2);
    --panel-border-40: rgba(0, 240, 255, .4);
    --panel-border-50: rgba(0, 240, 255, .5);
    --panel-border-60: rgba(0, 240, 255, .6);
    --accent-cyan: #00f0ff;
    --accent-green: #00ff88;
    --accent-red: #ff3366;
    --accent-orange: #ff9900;
    --text-main: #ddd;
    --text-muted: #94a3b8;
    --text-header: #b4f0f7;
    --text-header-secondary: #b4f0f7c0;
    --icon-color: #b4f0f7;
    --card-border-20: rgba(222, 254, 250, .2);
    --card-border-40: rgba(222, 254, 250, .4);
    --card-border-60: rgba(222, 254, 250, .6);
    --card-border-80: rgba(222, 254, 250, .8);
    --score-ring: #6f97a4;
    --score-0: #D84B6D;
    --score-0-20: #D84B6D34;
    --score-25: #EB5252;
    --score-50: #EF9650;
    --score-75: #F8D85A;
    --score-75-20: #F8D85A34;
    --score-100: #90E485;
    --font-family: Teko, Arial, sans-serif;
}

@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 100;
    src: url(fonts/Teko-Light.ttf) format('truetype');
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 200;
    src: url(fonts/Teko-Light.ttf) format('truetype');
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/Teko-Light.ttf) format('truetype');
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Teko-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/Teko-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/Teko-SemiBold.ttf) format('truetype');
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/Teko-SemiBold.ttf) format('truetype');
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 800;
    src: url(fonts/Teko-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 900;
    src: url(fonts/Teko-Bold.ttf) format('truetype');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-attachment: fixed;
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 50% 30%, var(--panel-border-20) 0%, transparent 50%),
        radial-gradient(circle at 20% 60%, var(--score-0-20) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--score-75-20) 0%, transparent 40%),
        linear-gradient(var(--panel-border-3) .1rem, transparent .1rem),
        linear-gradient(90deg, var(--panel-border-3) .1rem, transparent .1rem);
    background-size: cover, cover, cover, 2rem 2rem, 2rem 2rem;
    color: var(--text-main);
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    padding: 1rem 1rem 1rem 0;
}

.ambient-glow {
    animation: animationGlow 10s ease-in-out infinite alternate;
    background: radial-gradient(circle, var(--panel-border-60) 0%, transparent 70%);
    filter: blur(4rem);
    height: 45%;
    left: 45%;
    pointer-events: none;
    position: fixed;
    top: 35%;
    width: 35%;
    z-index: 0;
}
@keyframes animationGlow {
    0% { opacity: .7; transform: translate(0, 0) scale(.9); }
    100% { opacity: 1; transform: translate(20%, 25%) scale(1.1); }
}

.grid {
    align-items: center;
    display: grid;
    grid-template-columns: 19rem calc(var(--grid-margin) + var(--panel-font-size) * 25) calc(var(--panel-font-size) * 20);
    gap: 1rem;
    flex: 1;
}

.panel {
    display: flex;
    flex-direction: column;
    font-size: var(--panel-font-size);
    gap: 1em;
}
.control {
    z-index: 1;
}
.panel.schoolcard {
    z-index: 2;
}
.panel.details {
    z-index: 1;
}

.panel .title {
    padding-bottom: .5em;
}

.chart .bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    padding-top: 1rem;
}

.chart .bars .col {
    flex: 1;
    background: var(--panel-border-15);
    border-top: 2px solid var(--accent-cyan);
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
    position: relative;
}
.chart .bars .col.active {
    background: rgba(0, 255, 136, 0.3);
    border-top-color: var(--accent-green);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
}

.chart .label {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: .5rem;
}
.chart .label .active {
    color: var(--accent-green);
}

/*               */
/* Generic Card */
/*             */

.panel.schoolcard, .panel.statcard {
    align-items: center;
    backdrop-filter: blur(.1em);
    -webkit-backdrop-filter: blur(.1em);
    background: rgba(255, 255, 255, 0.15);
    border: .2em solid var(--card-border-60);
    border-radius: 2em;
    box-shadow: 0 0 .5em var(--card-border-60), inset 0 0 2em var(--panel-border-40), 0 0 2em var(--card-border-20);
    height: 41.25em;
    margin-left: auto;
    overflow: visible;
    padding: 0;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 25em;
}
.panel.schoolcard:hover, .panel.statcard:hover {
    border-color: var(--card-border-80);
}

.panel .inlay {
    background: var(--panel-bg);
    border: .1em solid var(--panel-border-40);
    border-radius: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    height: 100%;
    margin: .75em 0;
    transition: border-color 0.3s ease;
    width: calc(100% - 1.5em);
    z-index: 0;
}
.panel.statcard .inlay {
    gap: 0;
    position: relative;
}
.panel.statcard .inlay::before {
    border-radius: 50%;
    bottom: calc(50% - 3em);
    box-shadow: 0 0 8em #ffffff60, inset 0 0 7em #55556660;
    content: '';
    filter: blur(.5em);
    left: calc(50% - 3em);
    position: absolute;
    right: calc(50% - 3em);
    top: calc(50% - 3em);
}
.panel:hover .inlay {
    border-color: var(--panel-border-60);
}

.panel .header {
    align-items: center;
    background: var(--panel-bg-light);
    background-clip: padding-box;
    border-bottom: solid .2em transparent;
    border-radius: 1.5em 1.5em 0 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
}
.panel .header::before, .panel.statcard .attention::before, .panel.statcard .footer::before {
    background: linear-gradient(to right, var(--panel-bg-light) 0, var(--text-header) 50%, var(--panel-bg-light) 100%);
    border-radius: inherit;
    bottom: 0;
    content: '';
    left: 0;
    margin: 0 0 -.1em 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
.panel.statcard .footer::before {
    margin: -.1em 0 0 0;
}

/*                    */
/* School Card Frame */
/*                  */

.panel.schoolcard {
/*    margin-top: -5.5em;*/
}

/*                     */
/* School Card Header */
/*                   */

.panel.schoolcard .header .main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .25em;
    padding: .75em .75em .25em .75em;
    width: 75%;
}

.panel.schoolcard .header h2 {
    color: var(--text-header);
    font-size: 2.25em;
    font-style: italic;
    font-weight: 500;
    height: 1.9em;
    letter-spacing: .02em;
    line-height: 1em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 .1em .3em var(--panel-bg);
    text-transform: uppercase;
    transition: text-shadow 0.3s ease;
}

.panel.schoolcard .header .district {
    color: var(--text-header-secondary);
    font-size: 1.5em;
    font-weight: 300;
    letter-spacing: .03em;
    line-height: 1em;
    text-transform: uppercase;
}

.panel.schoolcard .header .image {
    align-items: center;
    display: flex;
    flex: 0;
    padding: .75em;
    gap: .25em;
}

.panel.schoolcard .header .image svg {
    height: 4.5em;
    width: 4.5em;
}

/*                    */
/* School Campus Map */
/*                  */

.map {
    align-items: center;
    display: flex;
    height: 13em;
    justify-content: center;
    margin-bottom: 6em;
    perspective: 60em;
    perspective-origin: 50% 40%;
}

.map .tile {
    --x-offset: calc(sin(var(--rotate)) * .6em);
    --y-offset: calc(cos(var(--rotate)) * .6em);

    background: #162c3f;
    border: .1em solid var(--panel-border-50);
    border-radius: 1.5em;
    box-shadow: var(--x-offset) var(--y-offset) 0 #060b17, 0 0 3.5em var(--card-border-40);
    height: 22em;
    overflow: hidden;
    position: relative;
    transform: rotateX(50deg) rotateZ(var(--rotate));
    transform-style: preserve-3d;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    width: 22em;
}
.panel.schoolcard:hover .map .tile {
    box-shadow: var(--x-offset) var(--y-offset) 0 #060b17, 0 0 4em var(--card-border-40);
}

.map svg {
    backface-visibility: hidden;
}

.map svg .campus-polygon {
    fill: #707f83;
    stroke: #aec7cf;
    stroke-width: .75px;
}

.map svg .street {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.map svg .street.bg-default {
    stroke: #36483b50;
    stroke-width: 3;
}
.map svg .street.default {
    stroke: #676525;
    stroke-width: 1;
}
.map svg .street.bg-safe {
    stroke: #19685750;
    stroke-width: 4;
}
.map svg .street.safe {
    stroke: #00ff88;
    stroke-width: 1.8;
}
.map svg .street.bg-danger {
    stroke: #8f3a4780;
    stroke-width: 4;
}
.map svg .street.danger {
    stroke: #ff3344;
    stroke-width: 1.4;
}

.map svg .building .ground-shadow {
    fill: #000;
    filter: blur(4px);
}
.map svg .building .wall {
    stroke: #fef9da;
    stroke-opacity: .5;
    stroke-width: .5px;
}
.map svg .building .roof-top {
    fill: #444a5a;
    stroke: #fef9da;
    stroke-width: .5px;
}

.map svg .entry {
    fill: #00f0ff;
    animation: entryPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes entryPing {
    0% { r: 2px; opacity: 1; }
    100% { r: 10px; opacity: 0; }
}

/*                    */
/* School Card Score */
/*                  */

.panel.schoolcard .score {
    align-items: center;
    display: flex;
    padding: 0 .75em;
    width: 100%;
}

.panel.schoolcard .score .gauge {
    align-items: center;
    background: var(--panel-bg);
    border-radius: 50%;
    display: flex;
    height: 6em;
    justify-content: center;
    margin: .4em;
    min-width: 6em;
    position: relative;
    width: 6em;
}
.panel.schoolcard .score .gauge::before {
    border: .1em solid var(--score-ring);
    border-radius: inherit;
    bottom: -.35em;
    box-shadow: 0 0 1em var(--card-border-40);
    content: '';
    left: -.35em;
    position: absolute;
    right: -.35em;
    top: -.35em;
}

.panel.schoolcard .score .gauge .pointer {
    height: 5em;
    pointer-events: none;
    position: absolute;
    transform: rotate(-135deg);
    transition: transform 0.5s ease;
    width: 5em;
}
.panel.schoolcard .score .gauge .pointer::before {
    border-left: .2em solid #fff;
    box-shadow: 0 0 .2em var(--panel-bg);
    content: '';
    height: 1em;
    left: 50%;
    position: absolute;
    top: -.5em;
}

.panel.schoolcard .score .gauge .inner {
    align-items: center;
    background: var(--panel-bg);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    height: 5em;
    justify-content: center;
    position: relative;
    width: 5em;
}
.panel.schoolcard .score .gauge .inner::before {
    border-radius: inherit;
    bottom: 1.5em;
    box-shadow: 0 0 1.5em var(--card-border-60), inset 0 0 1em var(--card-border-40);
    content: '';
    filter: blur(.3em);
    left: 1.5em;
    position: absolute;
    right: 1.5em;
    top: 1.5em;
}
.panel.schoolcard:hover .score .gauge .inner::before {
    box-shadow: 0 0 1.5em var(--card-border-80), inset 0 0 1.4em var(--card-border-40);
}

.panel.schoolcard .score .number {
    color: #ffffff;
    font-size: 2.7em;
    font-weight: 800;
    line-height: .65em;
    margin-top: .75em;
}

.panel.schoolcard .score .label {
    color: #fff;
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    margin-top: .4em;
    max-width: 3.4em;
    text-align: center;
}

.panel.schoolcard .score .gauge-annotation {
    align-items: center;
    display: flex;
    position: relative;
}
.panel.schoolcard.with-image .score .gauge-annotation {
    display: none;
}

.panel.schoolcard .score .gauge-annotation .line {
    background: var(--score-ring);
    box-shadow: 0 0 1em var(--card-border-40);
    height: .1em;
    margin: -1em -.5em 0 -.15em;
    transform: rotate(-40deg);
    transform-origin: left center;
    width: 2em;
}

.panel.schoolcard .score .gauge-annotation .title {
    border-bottom: .1em solid var(--score-ring);
    color: var(--text-header-secondary);
    font-size: 1.25em;
    font-weight: 300;
    letter-spacing: .03em;
    line-height: .1em;
    margin-top: -3.4em;
    text-shadow: 0 0 1em var(--card-border-40);
    text-transform: uppercase;
    white-space: nowrap;
}

/*                    */
/* Schhol Card Image */
/*                  */

.panel.schoolcard .score .photo {
    background: var(--card-border-20);
    border: .1em solid var(--score-ring);
    border-radius: .5em;
    box-shadow: 0 0 .5em rgba(0, 0, 0, 1), inset 0 0 .75em rgba(0, 0, 0, .5);
    height: 5em;
    margin: -1.7em 0 0 0;
    overflow: hidden;
    position: relative;
    width: 9em;
}
.panel.schoolcard:not(.with-image) .score .photo {
    display: none;
}

.panel.schoolcard .score .photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.panel.schoolcard .score .photo .scanline {
    background: linear-gradient(90deg, transparent 0%, var(--card-border-40) 10%, var(--card-border-80) 50%, var(--card-border-40) 90%, transparent 100%);
    box-shadow: 0 0 .2em var(--panel-border-60), 0 0 .2em var(--panel-border-40);
    height: .1em;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.panel.schoolcard:hover .score .photo .scanline {
    animation: scanAnimation 8s ease-in-out infinite;
}

@keyframes scanAnimation {
    0% { top: 0; opacity: 0; }
    90% { top: 0; opacity: 0; }
    91% { opacity: 1; }
    92% { opacity: 1; }
    95% { top: calc(100% - .1em); opacity: 0; }
    98% { opacity: 1; }
    99% { opacity: 1; }
    100% { top: 0; opacity: 0; }
}

.panel.schoolcard .score .photo-annotation {
    align-items: center;
    display: flex;
    margin-left: auto;
    position: relative;
}
.panel.schoolcard:not(.with-image) .score .photo-annotation {
    display: none;
}

.panel.schoolcard .score .photo-annotation .line {
    background: var(--score-ring);
    box-shadow: 0 0 1em var(--card-border-40);
    height: .1em;
    margin: .5em -.5em 0 -1em;
    transform: rotate(-40deg);
    transform-origin: left center;
    width: 2em;
}

.panel.schoolcard .score .photo-annotation .link {
    border-bottom: .1em solid var(--score-ring);
    box-shadow: 0 0 1em var(--card-border-40);
    margin: 5.5em -1.5em 0 0;
    transform: rotate(90deg);
    width: 5em;
}

/*                     */
/* School Map Compass */
/*                   */

.panel.schoolcard .map .compass {
    align-items: center;
    background: var(--panel-bg);
    border: .1em solid var(--panel-border-60);
    border-radius: 50%;
    box-shadow: 0 0 .75em var(--card-border-40);
    display: flex;
    flex-direction: column;
    height: 2.5em;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    right: .5em;
    top: .5em;
    width: 2.5em;
}

.panel.schoolcard .map .compass .arrow {
    border-bottom: .7em solid var(--accent-cyan);
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    filter: drop-shadow(0 0 .2em var(--accent-cyan));
    height: 0;
    pointer-events: none;
    width: 0;
}

.panel.schoolcard .map .compass .label {
    color: var(--text-main);
    font-size: 0.9em;
    font-weight: 900;
    line-height: 1.1em;
    margin: .1em 0 -.2em 0;
    pointer-events: none;
}

/*                       */
/* School Card Controls */
/*                     */

.panel.schoolcard .controls {
    align-items: center;
    display: flex;
    gap: 1.5em;
    justify-content: space-between;
    margin: -2em 0 1em 0;
    padding: 0 1.25em;
    width: 100%;
    z-index: 1;
}

.panel.schoolcard .controls button {
    align-items: center;
    background: var(--panel-bg);
    border: .1em solid var(--accent-cyan);
    border-radius: 3em;
    box-shadow: 0 0 1em var(--card-border-20);
    color: var(--accent-cyan);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    font-size: 1em;
    height: 4.5em;
    letter-spacing: .025em;
    padding-top: .5em;
    text-transform: uppercase;
    transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    user-select: none;
    width: 4.5em;
}
.panel.schoolcard .controls button:hover {
    background: var(--panel-border-15);
    box-shadow: 0 0 1em var(--card-border-60);
    color: #ffffff;
}

.panel.schoolcard .controls button svg {
    height: 2em;
    width: 2em;
}

/*                       */
/* Statistic Card Frame */
/*                     */

.panel.statcard {
    height: 33em;
    transform: rotate(5deg);
    width: 20em;
}

/*                        */
/* Statistic Card Header */
/*                      */

.panel.statcard .header .main {
    padding: .75em .75em .25em .75em;
    width: 100%;
}

.panel.statcard .header h3 {
    color: var(--text-header);
    font-size: 1.7em;
    font-style: italic;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 .1em .3em var(--panel-bg);
    text-transform: uppercase;
    white-space: nowrap;
}

.panel.statcard .header .address {
    color: var(--text-header-secondary);
    font-size: 1.3em;
    font-weight: 300;
    letter-spacing: .02em;
    line-height: 1em;
    text-transform: uppercase;
}

.panel.statcard .attention {
    background: var(--panel-bg);
    color: var(--score-50);
    letter-spacing: .02em;
    line-height: 1.1em;
    padding: .5em .75em;
    position: relative;
    text-align: center;
}

/*                */
/* Traffic Signs */
/*              */

.panel.statcard .trafficsigns {
    flex: 1;
    height: 2em;
    max-height: 23.05em;
    overflow-y: scroll;
    padding-top: .3em;
    scrollbar-width: none;
}

.panel.statcard .trafficsigns .list {
    align-items: center;
    display: flex;
    gap: .75em;
    overflow: hidden;
    padding: .25em .75em;
    position: relative;
}

.panel.statcard .trafficsigns .sign {
    align-items: center;
    background: #fff;
    border: .3em solid var(--accent-red);
    border-radius: 50%;
    color: #000;
    display: flex;
    font-family: Arial, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    height: 2.2em;
    justify-content: center;
    margin: .1em auto;
    position: relative;
    width: 2.2em;
}
.panel.statcard .trafficsigns .sign.small > span {
    font-size: .9em;
}
.panel.statcard .trafficsigns .sign::before {
    border: .07em solid #fff;
    border-radius: 50%;
    content: '';
    position: absolute;
    height: 2.2em;
    width: 2.2em;
}

.panel.statcard .trafficsigns .streets {
    flex-grow: 1;
}

.panel.statcard .trafficsigns .list .row {
    display: flex;
    font-size: .9em;
    letter-spacing: .02em;
    line-height: 1.2em;
    justify-content: space-between;
}
.panel.statcard .trafficsigns .list .row .name {
    color: var(--text-header-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 11em;
}
.panel.statcard .trafficsigns .list .row .distance {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
.panel.statcard .trafficsigns .list.danger .row .distance {
    color: var(--score-25);
}
.panel.statcard .trafficsigns .list.good .row .distance {
    color: var(--score-100);
}

/*                        */
/* Statistic Card Footer */
/*                      */

.panel.statcard .footer {
    background: var(--panel-bg);
    border-radius: 0 0 1.6em 1.6em;
    font-size: .9em;
    letter-spacing: .025em;
    padding: .2em .75em;
    position: relative;
    text-align: center;
}

.panel.statcard .footer .safe-metric {
    color: var(--text-header);
}
.panel.statcard .footer .safe-metric .highlight {
    color: #fff;
    font-size: 1.1em;
    letter-spacing: .05em;
    vertical-align: middle;
}

/*                */
/* Control Panel */
/*              */

.control {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: auto;
    max-height: calc(100vh - 2rem);
    overflow-y: scroll;
    scrollbar-width: none;
}

.control .box {
    background: var(--panel-bg);
    border: .1rem solid var(--panel-border-40);
    border-left: none;
    border-radius: 0 1rem 1rem 0;
    border-right: .2rem solid var(--panel-border-40);
    box-shadow:
        inset 0 0 .4rem var(--panel-border-60),
        0 0 .4rem var(--card-border-20);
    display: flex;
    flex-direction: column;
    margin: 0 0 0 -.2rem;
    min-height: min-content;
    overflow: hidden;
    width: 19rem;
}
.control .box.info {
    background: var(--panel-bg-light);
}
.beta .control .box.beta {
    border-color: var(--score-75);
    display: block !important;
}

.control .bar {
    background: var(--panel-bg-light);
    border-bottom: .1rem solid var(--panel-border-20);
    box-shadow: inset 0 0 1em var(--panel-border-20);
    padding: .5rem 1rem;
}
.beta .control .beta .bar {
    background: var(--score-75);
}

.control .bar .title {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: .06rem;
    text-transform: uppercase;
}
.control .bar .title.city {
    background: var(--panel-border-20);
    border: .1rem solid var(--panel-border-50);
    border-radius: 1rem;
    color: var(--icon-color);
    display: inline-block;
    font-size: .9rem;
    margin-left: .25rem;
    padding: 0.15rem .5rem 0 .5rem;
    transform: rotate(-3deg);
}
.beta .control .beta .bar .title {
    color: #000;
}

.control .body {
    margin: .75rem 1rem;
}

.control .body label {
    font-size: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.control .body .select-wrapper, .control .body .button {
    background: var(--panel-bg-light);
    border: .1rem solid var(--panel-border-20);
    border-radius: .5rem;
    margin: .4rem 0 .6rem .75rem;
    position: relative;
    transition: all .2s ease;
}
.control .body .button {
    align-items: center;
    color: inherit;
    display: flex;
    gap: .5rem;
    justify-content: center;
    padding: .35rem .5rem .25rem .5rem;
    text-decoration: none;
}
.control .body .select-wrapper:hover, .control .body .button:hover {
    border-color: var(--panel-border-60);
    color: var(--accent-cyan);
}
.control .body .select-wrapper::before {
    border-bottom: .45rem solid var(--panel-border-40);
    border-left: .3rem solid transparent;
    border-right: .3rem solid transparent;
    content: '';
    pointer-events: none;
    position: absolute;
    right: .5rem;
    top: calc(50% - .15rem);
    transform: rotate(180deg);
    transition: all .2s ease;
}
.control .body .select-wrapper:hover::before {
    border-bottom-color: var(--panel-border-60);
}
.beta .control .beta .body .button {
    background: var(--score-75);
    color: #000;
}
.beta .control .beta .body .button:hover {
    border-color: var(--score-0);
    color: var(--score-0);
}

.control .box.info .body .select-wrapper {
    border-color: var(--panel-border-60);
}
.control .box.info .body .select-wrapper:hover {
    border-color: var(--accent-cyan);
}
.control .box.info .body .select-wrapper::before {
    border-bottom-color: var(--panel-border-60);
}
.control .box.info .body .select-wrapper:hover::before {
    border-bottom-color: var(--accent-cyan);
}
.control .box.info .body .select-wrapper select {
    background: var(--panel-bg-light);
    box-shadow: inset 0 0 4em var(--panel-border-20);
}

.control .body .button svg {
    flex-shrink: 0;
    height: 1.25rem;
    width: 1.25rem;
}

.control .body .select-wrapper select {
    appearance: none;
    background: var(--panel-bg-light);
    border: none;
    border-radius: inherit;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .03rem;
    outline: none;
    padding: .35rem 1.2rem .25rem .5rem;
    text-overflow: ellipsis;
    width: 100%;
}
/*.control .body .select-wrapper:hover select {
    color: var(--accent-cyan);
}*/

.control .body .button-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 2fr;
    gap: .5rem;
    margin: 1rem 0;
}
.beta .control .beta .body .button-grid {
    grid-template-columns: repeat(2, 1fr);
}
.control .body .button-grid .button {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}

.control .body a {
    color: var(--panel-border-60);
    text-decoration: underline;
    text-decoration-color: var(--panel-border-60);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.control .body a:hover {
    color: var(--accent-cyan);
    text-decoration-color: var(--accent-cyan);
}

/*               */
/* Mobile First */
/*             */

@media (orientation: portrait) {
    body {
        overflow-y: scroll;
        padding: 1rem .5rem;
        scrollbar-width: none;
    }

    .grid {
        grid-template-columns: 1fr 1fr;
        grid-template-columns: calc(var(--grid-margin) + var(--panel-font-size) * 25) calc(var(--grid-margin) + var(--panel-font-size) * 20);
    }

    .control {
        flex-direction: row;
        grid-column: span 2;
        margin-top: 1.75rem;
    }

    .control .box {
        border-left: .2rem solid var(--panel-border-40);
        border-radius: 0 0 1rem 1rem;
        border-top: none;
        display: none;
        margin: -.2rem 0 0 0;
        width: stretch;
    }
    .control .box.info {
        display: contents;
    }
    .control .box.info .body {
        display: none;
    }
    .beta .control .box.beta {
        display: none !important;
    }
    .control .box.active {
        display: flex;
    }
    .control .box.info.active .body {
        display: initial;
    }
    .beta .control .box.beta.active {
        display: flex !important;
    }

    .control .box .close {
        background: var(--panel-border-20);
        border: .1rem solid var(--panel-border-50);
        border-radius: 50%;
        cursor: pointer;
        display: inline !important;
        float: inline-end;
        font-size: 1.5rem;
        line-height: 1.3rem;
        padding-top: .2rem;
        text-align: center;
        width: 1.68rem;
    }
    .control .box.beta .close {
        background: var(--score-0);
        border-color: var(--score-0);
    }

    .control .info.box .bar {
        left: 0;
        overflow: hidden;
        position: fixed;
        right: 0;
        text-overflow: ellipsis;
        top: 0;
        white-space: nowrap;
    }

    .control .info .body .button-grid {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 0;
    }
    .beta .control .info .body .button-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .control .info .body .button {
        text-transform: uppercase;
    }
    .beta #button-show-beta {
        display: flex !important;
    }

    .panel.schoolcard {
        margin: 0 0 0 auto;
    }
    .panel.statcard {
        margin: 0 auto 0 0;
    }
}