.slide-left-enter-active,.slide-left-leave-active,.slide-right-enter-active,.slide-right-leave-active{transition:all .3s ease-out}.slide-left-enter-from,.slide-left-leave-to{transform:translate(-100%)}.slide-right-enter-from,.slide-right-leave-to{transform:translate(100%)}:root,::backdrop{--ui-color-white: 255 255 255;--ui-color-mist: 250 250 250;--ui-color-haze: 245 245 245;--ui-color-fog: 240 240 240;--ui-color-storm: 233 233 233;--ui-color-gray: 220 220 220;--ui-color-dark: 56 56 56;--ui-color-darker: 35 35 35;--ui-color-blue: 231 248 255;--ui-color-blue-dark: 105 185 245;--ui-color-blue-darker: 14 190 255;--ui-color-yellow: 249 254 215;--ui-color-green: 147 230 185;--ui-color-green-dark: 0 202 115;--ui-color-red: 200 0 60;--ui-color-meadow: 255 153 0;--ui-color-forest-am: 245 125 0;--ui-color-forest-pm: 242 67 4;--ui-color-lunch-bunch: 255 52 173;--ui-color-lunch-bunch-gym: 160 0 200;--ui-color-fullday: 0 145 171;--ui-color-treehouse: 91 182 83;--ui-color-garden: 190 217 56;--app-color: var(--color, var(--ui-color-blue-dark))}body{margin:0;overflow:hidden;display:flex;height:100vh;font-size:clamp(1em,1.3em,4vmin)}#app{flex:1;display:flex;position:relative;z-index:1}main{flex:1;display:flex}main header{display:flex;align-items:center;justify-content:space-between;gap:3ch}main a:any-link{text-decoration:none}h1,h2,h3,h4{margin:0;font-weight:400}sup{line-height:.5}hr{border:none;background:var(--hr-color, currentColor);opacity:var(--hr-opacity, .35);height:var(--hr-size, .15ch);margin:var(--hr-margin, .5ch 0ch);border-radius:var(--hr-size, 1ch)}hr.breathe{margin:2ch 1ch}.app-content{padding:3ch;overflow:auto}ul.grid{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(var(--grid-columns, auto-fill),var(--grid-column-size, minmax(12em, 1fr)));gap:2ch}ul.grid[columns]{--grid-column-size: 1fr}ul.grid[columns="2"]{--grid-columns: 2}ul.grid[columns="3"]{--grid-columns: 3}ul.grid[columns="4"]{--grid-columns: 4}ul.grid[columns="5"]{--grid-columns: 5}ul.grid li{--hr-margin: .65ch 30%;--line-height: 1.4;background:rgb(var(--grid-item-bg, var(--ui-color-darker)/30%));color:rgb(var(--grid-item-fg, var(--ui-color-white)));transition:.2s ease-out;border-radius:var(--grid-item-border-radius, 1ch);overflow:hidden;aspect-ratio:var(--grid-item-aspect-ratio, 1);display:flex;align-items:center;justify-content:center}ul.grid li.is-selected{--grid-item-fg: var(--grid-item-selected-fg, var(--ui-color-dark));--grid-item-bg: var(--color, var(--ui-color-gray));box-shadow:0 0 0 .35ch rgb(var(--ui-color-dark)),0 0 0 .7ch rgb(var(--ui-color-white))}ul.grid li.is-locked{--grid-item-fg: var(--grid-item-locked-fg, var(--ui-color-dark));--grid-item-bg: var(--color, var(--ui-color-gray)) / 35%;box-shadow:0 0 0 .35ch rgb(var(--ui-color-dark)),0 0 0 .7ch rgb(var(--ui-color-white))}ul.grid li>*{text-align:center;padding:var(--grid-item-padding, 1ch);font-weight:400;font-size:85%;width:var(--grid-item-width, 100%);aspect-ratio:var(--grid-item-aspect-ratio, 1)}@media screen and (orientation: portrait){ul.grid[min-columns="1"]{--grid-columns: 1}ul.grid[min-columns="2"]{--grid-columns: 2}ul.grid[min-columns="3"]{--grid-columns: 3}ul.grid[min-columns="4"]{--grid-columns: 4}}.fake-button{display:flex;justify-content:center;background:rgb(var(--color, var(--ui-color-dark))/20%);color:var(--fake-button-color, rgb(var(--ui-color-white)));overflow:hidden}.fake-button[href]{background:rgb(var(--color, var(--ui-color-dark)));color:rgb(var(--fake-button-color, var(--ui-color-dark)))}.fake-button[href]:not(.static){animation:pulse 3s ease-out 3}.fake-button>*{flex:var(--fake-button-inner-flex, 1);padding:var(--fake-button-padding, 1ch 2ch);display:block}.fake-button .icon-text--text{flex:1}.fake-button .icon-text--icon{line-height:1}.text--caps{text-transform:uppercase}.text--small{font-size:smaller}.text--small-caps{text-transform:uppercase;font-size:80%}.text--big{font-size:115%}.text--bigger{font-size:130%}.text--center{text-align:center}.link-ish .icon-text--text{text-decoration:underline}.no-pointer-events{pointer-events:none}.app-springboard{--space: .15ch;--base-color-bg: var(--ui-color-dark);flex:1;display:grid;grid-template-areas:"header header" "rooms action" "rooms teachers";grid-template-columns:3fr 2fr;grid-template-rows:auto auto 1fr;gap:var(--space) 0;overflow:hidden;color:rgb(var(--ui-color-white));background:rgb(var(--ui-color-darker))}.app-springboard .tranny{transition:.9s ease-out}.app-springboard h1,.app-springboard h2,.app-springboard h3{margin:0 0 var(--space) 0}.app-springboard .is-current{--button-fg: rgb(var(--ui-color-blue-dark))}.app-springboard .header{--color-1: var(--ui-color-blue);--color-2: var(--color, var(--color-1));grid-area:header;flex:none;padding:1ch 2ch;color:rgb(var(--ui-color-dark));background:linear-gradient(90deg,rgb(var(--color-1)),rgb(var(--color-2)))}.app-springboard .header>*{margin:0;padding:0}.app-springboard .rooms{--grid-item-bg: var(--ui-color-dark);--grid-item-aspect-ratio: 7/3;grid-area:rooms;overflow:auto;padding:2ch}.app-springboard .rooms li{--grid-item-fg: var(--grid-item-color)}.app-springboard .rooms li.is-selected{--grid-item-bg: var(--grid-item-color);--grid-item-fg: var(--ui-color-dark)}.app-springboard .action{--button-width: 100%;--button-border-radius: 0;--fake-button-inner-flex: none;--fake-button-padding: 2ch;grid-area:action;background:rgb(var(--color, var(--base-color-bg))/20%)}.app-springboard .teachers{--grid-item-bg: var(--ui-color-dark) / 65%;--grid-item-fg: var(--color);--grid-item-aspect-ratio: 1;--grid-item-border-radius: 50%;--grid-item-padding: 0;--hr-margin: 2ch 0;--hr-size: .5ch;grid-area:teachers;overflow:auto;background:rgb(var(--color, var(--base-color-bg))/20%);color:rgb(var(--grid-item-fg));padding:2ch}.shuffle-move,.shuffle-enter-active,.shuffle-leave-active{transition:.2s ease-out}.shuffle-enter-from,.shuffle-leave-to{transform:translate(1em) scale(.5);opacity:0}.shuffle-leave-active{position:absolute}@keyframes pulse{0%{transform:scale(1)}7%{transform:scale(1.025)}8%{box-shadow:0 0 0 0 rgb(var(--color));transform:scale(1)}35%{box-shadow:0 0 0 3em rgb(var(--color)/0)}36%{box-shadow:0 0 0 0 rgb(var(--color)/0)}}.app-attendance{--fake-button-border-radius: 0;--fake-button-color: rgb(var(--ui-color-white));flex:1;display:grid;grid-template-areas:"menu header header" "tools content data";grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;overflow:hidden;color:rgb(var(--ui-color-dark));background:rgb(var(--ui-color-haze));touch-action:manipulation}.app-attendance>menu{grid-area:menu;background:rgb(var(--color));margin:0;padding:0}.app-attendance>menu>*{--color: var(--ui-color-dark) / 20%}.app-attendance>header{color:rgb(var(--ui-color-dark));background:linear-gradient(90deg,rgb(var(--color, var(--ui-color-blue-dark))),rgb(var(--ui-color-blue)));grid-area:header;padding:1ch 2ch}.app-attendance>.tools{grid-area:tools;display:flex;flex-direction:column;align-items:center;gap:1ch;background:rgb(var(--ui-color-darker));color:rgb(var(--ui-color-white));padding:2ch 0}.app-attendance>.tools>*{padding:1ch}.app-attendance>.tools>*>*{display:flex;flex-direction:column;gap:.5ch;line-height:1.5}.app-attendance>.content{grid-area:content;overflow:auto;overscroll-behavior:none;scroll-behavior:smooth;padding-bottom:30vh}.app-attendance>.data{grid-area:data;color:rgb(var(--color));background:rgb(var(--ui-color-darker));overflow:auto;padding:2ch;font-size:65%;width:14em}fieldset{display:grid;grid-template-columns:repeat(var(--grid-columns, auto-fit),var(--grid-column-size, minmax(10em, 1fr)));gap:2ch;position:relative;border:none}fieldset:has(legend){padding:1.3em 0 0}legend{position:absolute;top:0;text-transform:uppercase;font-size:small}textarea,input[type=text]{font:inherit;padding:1ch;border:none;border-radius:var(--input-border-radius, 1ch);background:var(--input-background, rgb(var(--ui-color-white)));color:var(--input-color, rgb(var(--ui-color-dark)));border:var(--input-border, .2ch solid rgb(var(--input-border-color, var(--ui-color-dark)/35%)));box-sizing:border-box;outline:none}textarea:focus,input[type=text]:focus{--input-border-color: var(--ui-color-blue-dark)}textarea:not([size]),input[type=text]:not([size]){width:100%}select{--caret-size: 0ch;--background: transparent;appearance:none;cursor:pointer;font-size:inherit;font-family:inherit;padding:0;margin:0;border:none;outline:none;width:100%;height:100%;text-align:center;text-align:-webkit-center;flex-direction:column;justify-content:center;color:var(--input-color, rgb(var(--ui-color-dark)));background:var(--caret-bg, var(--background))}select:focus{border-color:rgb(var(--ui-color-blue-dark))}select[disabled]{opacity:.65;cursor:default;filter:saturate(0%)}select[disabled]+*:is(.icon-text,.icon){opacity:.65;filter:saturate(0%)}.input-group{--input-border: none;--input-border-radius: 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(10em,1fr));gap:.2ch;border-radius:.5ch;background:var(--input-group-background, rgb(var(--ui-color-white)));border:.2ch solid rgb(var(--input-group-border-color, var(--ui-color-dark)/35%));overflow:hidden}.input-group:focus-within{--input-group-border-color: var(--ui-color-blue-dark);--input-group-background: rgb(var(--ui-color-blue-dark))}.input-radio{--scale: scale(1);--cursor: pointer;--opacity: 1;--timing: .2s;--color-checked: rgb(var(--ui-color-blue-dark));--color-hover: rgb(var(--ui-color-blue));--ring-color: currentColor;--check-color: transparent;--ring-dasharray: 1 0;--ring-dashoffset: -.25;--check-dasharray: 1 0;--check-dashoffset: 0;display:inline-flex;align-items:center;gap:1ch;position:relative;cursor:var(--cursor);opacity:var(--opacity);user-select:none;line-height:1.3}.input-radio.is-disabled{--cursor: not-allowed;--opacity: .5}.input-radio:not(.is-disabled):focus-within,.input-radio:not(.is-disabled):hover{--ring-color: var(--color-hover)}.input-radio svg{flex:none;transform:var(--scale);transform-origin:50% 50%;transition:transform var(--timing) linear;width:1.5em;height:1.5em}.input-radio svg .ring{stroke:var(--ring-color);stroke-dasharray:var(--ring-dasharray);stroke-dashoffset:var(--ring-dashoffset)}.input-radio svg .check{stroke:var(--check-color);stroke-dasharray:var(--check-dasharray);stroke-dashoffset:var(--check-dashoffset)}.input-radio svg .ring,.input-radio svg .check{stroke-linecap:round;stroke-linejoin:round;transition:var(--timing) linear}.input-radio input[type=radio]{position:absolute;opacity:0;cursor:inherit}.input-radio input[type=radio]~span:not(:empty){flex:1}.input-radio input[type=radio]:checked~svg{--check-color: currentColor;--ring-dasharray: 1 .2;--check-dashoffset: 1;line-height:0}.input-radio input[type=radio]:not([disabled]):active~svg{--scale: scale(.85)}.input-radio input[type=radio]:not([disabled]):checked~svg{--check-color: var(--color-checked)}.input-checkbox{--scale: scale(1);--cursor: pointer;--opacity: 1;--timing: .2s;--color-checked: rgb(var(--ui-color-blue-darker));--color-hover: rgb(var(--ui-color-blue-dark));--ring-color: currentColor;--check-color: transparent;--ring-dasharray: 1 0;--ring-dashoffset: -.35;--check-dasharray: 1 0;--check-dashoffset: 0;display:inline-flex;align-items:center;gap:1ch;position:relative;cursor:var(--cursor);opacity:var(--opacity);user-select:none;line-height:1.3}.input-checkbox.is-disabled{--cursor: not-allowed;--opacity: .5}.input-checkbox:not(.is-disabled):focus-within,.input-checkbox:not(.is-disabled):hover{--ring-color: var(--color-hover)}.input-checkbox svg{flex:none;transform:var(--scale);transform-origin:50% 50%;transition:transform var(--timing) linear;width:1.3em;height:1.3em}.input-checkbox svg .ring{stroke:var(--ring-color);stroke-dasharray:var(--ring-dasharray);stroke-dashoffset:var(--ring-dashoffset)}.input-checkbox svg .check{stroke:var(--check-color);stroke-dasharray:var(--check-dasharray);stroke-dashoffset:var(--check-dashoffset)}.input-checkbox svg .ring,.input-checkbox svg .check{stroke-linecap:round;stroke-linejoin:round;transition:var(--timing) linear}.input-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:inherit}.input-checkbox input[type=checkbox]~span:not(:empty){flex:1}.input-checkbox input[type=checkbox]:checked~svg{--check-color: currentColor;--ring-dasharray: 1 .2;--check-dashoffset: 1}.input-checkbox input[type=checkbox]:not([disabled]):active~svg{--scale: scale(.85)}.input-checkbox input[type=checkbox]:not([disabled]):checked~svg{--check-color: var(--color-checked)}table[data-grid]{--cell-border-width: .1ch;background:rgb(var(--ui-color-white)) repeating-linear-gradient(135deg,rgb(var(--ui-color-haze)) 0,rgb(var(--ui-color-haze)) 1em,rgb(var(--ui-color-fog)) 1em,rgb(var(--ui-color-fog)) 2em);margin:0;border:none;border-collapse:separate;border-spacing:0;table-layout:auto;min-width:100%;box-shadow:0 var(--cell-border-width) 0 0 rgb(var(--ui-color-dark)/10%)}table[data-grid] td,table[data-grid] th{position:var(--cell-position, relative);min-width:5em;text-align:var(--cell-text-align, center);font-weight:500;padding:1ch}table[data-grid] td:not(:last-child),table[data-grid] th:not(:last-child){border-right:var(--cell-border-right, var(--cell-border-width) solid var(--cell-border-color))}table[data-grid] td.spacer,table[data-grid] th.spacer{width:100%;min-width:0;padding:0}table[data-grid] thead th{vertical-align:bottom;white-space:nowrap;font-size:90%}table[data-grid] .sub-header th{border-bottom:var(--cell-border-width) solid var(--cell-border-color);font-weight:400}table[data-grid] .sub-header th[colspan],table[data-grid] .sub-header th:first-child{--cell-text-align: right}table[data-grid] tbody th{--cell-text-align: left}table[data-grid] tfoot th{border-top:var(--cell-border-width) solid var(--cell-border-color);padding:1ch 2ch;font-size:var(--text-size-small)}table[data-grid] tfoot th:not(.key){--cell-border-right: none}table[data-grid] tfoot th[colspan],table[data-grid] tfoot th:first-child{--cell-text-align: right}table[data-grid] thead th,table[data-grid] tbody .key,table[data-grid] tfoot th{--cell-position: sticky;z-index:1}table[data-grid] .key{left:0;z-index:3}table[data-grid] thead th{top:0;z-index:2}table[data-grid] .sub-header th{--cell-position: relative;z-index:1}table[data-grid] tfoot th{bottom:0}table[data-grid] thead{--cell-color: rgb(var(--ui-color-white));--cell-background: rgb(var(--ui-color-dark));--cell-border-color: rgb(var(--ui-color-darker))}table[data-grid] thead tr:not(.sub-header){background-color:var(--cell-background)}table[data-grid] thead tr.sub-header{--button-font-size: smaller;--button-fg: rgb(var(--color));--cell-background: rgb(var(--ui-color-dark) / 90%)}table[data-grid] tfoot{--button-font-size: smaller;--cell-color: rgb(var(--ui-color-dark));--cell-background: rgb(var(--ui-color-fog));--cell-border-color: rgb(var(--ui-color-dark) / 10%)}table[data-grid] tbody{--cell-color: rgb(var(--ui-color-dark));--cell-background: rgb(var(--ui-color-white));--cell-border-color: rgb(var(--ui-color-dark) / 10%)}table[data-grid] tbody tr:where(:nth-child(odd)){--cell-background: rgb(var(--ui-color-mist))}table[data-grid] tbody tr:where(:nth-child(even)){--cell-background: rgb(var(--ui-color-white))}table[data-grid] tbody tr:hover{--cell-background: rgb(var(--ui-color-blue))}table[data-grid] tbody th{--cell-border-color: rgb(var(--ui-color-dark) / 30%)}table[data-grid] tr>*{background:var(--cell-background);color:var(--cell-color, inherit)}table[data-grid] small{opacity:var(--remote-opacity, .6);font-weight:400}table[data-grid] .clickable-cell{--local-button-width: 100%;--local-button-height: 100%;--local-button-padding: 0;line-height:1}table[data-grid] .clickable-cell>*{position:absolute;top:0;right:0;bottom:0;left:0}table[data-grid] .clickable-cell>label{--input-color: transparent;--remote-opacity: 1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--button-fg);overflow:hidden}table[data-grid] .clickable-cell select{position:absolute;top:0;right:0;bottom:0;left:0}span.icon{display:var(--icon-display, inline-flex);align-items:var(--icon-align, center);justify-content:var(--icon-justify, center);line-height:var(--icon-line-height, initial);color:var(--icon-color, inherit);transition:.2s ease-out}span.icon-text{display:var(--icon-text-display, inline-flex);align-items:var(--icon-text-align, center);gap:var(--icon-text-gap, .5ch)}span.icon-text[flipped]{flex-direction:row-reverse}span.icon-text[tight]{--icon-text-gap: 0}button{--icon-color: var(--button-fg, inherit);flex:var(--button-flex, none);display:var(--button-display, inline-flex);align-items:center;justify-content:center;gap:1ch;font:inherit;font-size:var(--button-font-size, inherit);font-weight:var(--button-font-weight, inherit);color:var(--button-fg, inherit);background:var(--button-bg, transparent);border:var(--button-border, none);box-shadow:var(--button-box-shadow, none);padding:var(--button-padding, 0);border-radius:var(--button-border-radius, 1ch);line-height:var(--button-line-height, inherit);width:var(--button-width, auto);height:var(--button-height, auto);cursor:pointer;text-transform:inherit;transition:.2s ease-out}button[flex="1"]{--button-flex: 1}button[flex="2"]{--button-flex: 2}button[flex="3"]{--button-flex: 3}button[disabled]{opacity:.65;cursor:default;filter:saturate(0%)}button.icon{--button-interactive-scale-up: 1;--button-width: var(--local-button-width, 1.3em);--button-height: var(--local-button-height, 1.3em);--button-border-radius: var(--local-button-border-radius, 50%);--button-line-height: 0;--button-padding: var(--local-button-padding, .5ch)}button.icon.primary{--button-font-weight: inherit;--button-fg: rgb(var(--ui-color-blue-dark));--button-bg: none}button.icon-text{--button-interactive-scale-up: 1;--button-interactive-opacity: 1}button.primary{--button-bg: rgb(var(--ui-color-blue-dark));--button-fg: rgb(var(--ui-color-white));--button-padding: .65ch 2ch;--button-font-weight: 600}button.danger{--button-bg: rgb(var(--ui-color-red));--button-fg: rgb(var(--ui-color-white));--button-padding: .65ch 2ch}button.cancel{--button-bg: rgb(var(--ui-color-darker) / 65%);--button-fg: rgb(var(--ui-color-white));--button-padding: .65ch 1ch}button.default{--button-bg: rgb(var(--ui-color-darker));--button-fg: rgb(var(--ui-color-white));--button-padding: .65ch 1ch}button.link:hover{--button-fg: rgb(var(--ui-color-blue-dark))}button.block{--button-display: flex}button.small{--button-font-size: var(--font-size-small, smaller);margin:-.65ch 0}button.fluffy{--button-padding: var(--local-button-padding, 1ch 1.5ch)}button.bulky{--button-padding: var(--local-button-padding, 1.5ch)}button:not([disabled]):hover,button:not([disabled]):focus{opacity:var(--button-interactive-opacity, .8)}button:not([disabled]):not(.reduce-motion):hover,button:not([disabled]):not(.reduce-motion):focus{transform:scale(var(--button-interactive-scale-up, 1.05))}button:not([disabled]):not(.reduce-motion):active{transform:scale(var(--button-interactive-scale-down, .95))}.ui-danger,.ui-danger-hover:hover,.ui-danger-hover:focus{--button-fg: rgb(var(--ui-color-red))}.ui-success,.ui-success-hover:hover,.ui-success-hover:focus{--button-fg: rgb(var(--ui-color-green-dark))}:root,::backdrop{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.2;font-weight:400;color-scheme:light dark;color:rgb(var(--ui-color-dark));background-color:rgb(var(--ui-color-mist));font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}@media screen and (prefers-color-scheme: dark){:root{color:rgb(var(--ui-color-haze));background-color:rgb(var(--ui-color-darker))}}@media screen and (prefers-color-scheme: light){:root{color:rgb(var(--ui-color-dark));background-color:rgb(var(--ui-color-mist))}}