/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .shrink {
    flex-shrink: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .capitalize {
    text-transform: capitalize;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow\/blur {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}
:root {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: gray transparent;
  --header-height: 84px;
  --bottom-nav-height: 88px;
  --side-nav-width: 88px;
}
.app-tooltip {
  position: absolute;
  z-index: 9999;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--text-color-primary);
  color: var(--background-color);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-70);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.app-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}
*, *:before, *:after {
  box-sizing: inherit;
}
button, [role="button"], [role="option"], [role="tab"], [role="switch"], [role="tablist"], [role="listbox"], [role="menu"], label, summary, select {
  cursor: default;
}
button, [role="button"], [role="option"], [role="tab"], [role="switch"], [role="tablist"], [role="listbox"], [role="menu"], label, summary, select, .app-header, .bn-tabbar, .empty-container-title, .empty-container-subtitle, .detail-section-header, .detail-section-title, .detail-status-label, .detail-schedule-legend-label, .detail-schedule-labels-pill, .detail-schedule-label-cell, .badge-label, .badge-text, .github-stat-label {
  user-select: none;
  -webkit-user-select: none;
}
:root {
  --background-color: #f2f2f2;
  --background-color-secondary: #ffffff;
  --popup-background: rgba(230, 230, 230, 0.5);
  --text-color-primary: #1a1a1a;
  --text-color-secondary: #333333;
  --text-color-accent: #2a9e47;
  --color-status-free: #2a9e47;
  --color-status-free-soon: #5a7a10;
  --color-status-partial: #f0b429;
  --color-status-busy: #e53935;
  --accent-gradient: linear-gradient(135deg, #0d7a30, #2ecc5a);
  --busy-gradient: linear-gradient(135deg, #ff5252, #e53935);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --text-70: 0.7rem;
  --text-72: 0.72rem;
  --text-75: 0.75rem;
  --text-80: 0.8rem;
  --text-85: 0.85rem;
  --text-90: 0.9rem;
  --text-100: 1rem;
  --text-110: 1.1rem;
  --text-125: clamp(1.15rem, 1.09rem + 0.3vw, 1.25rem);
  --text-150: clamp(1.3rem, 1.16rem + 0.7vw, 1.5rem);
  --text-175: clamp(1.45rem, 1.26rem + 0.95vw, 1.75rem);
  --text-200: clamp(1.6rem, 1.36rem + 1.2vw, 2rem);
  --glass-tint: rgba(250, 250, 250, 0.7);
  --glass-outline: rgba(0, 0, 0, 0.25);
  --glass-shadow-color: rgba(0, 0, 0, 0.1);
  --glass-specular: rgb(255 255 255);
  --glass-highlight: inset -1px 0 2px 0 rgba(0, 0, 0, 0.25), inset 1px 0 2px 0 rgba(0, 0, 0, 0.25),
    inset 0 -1px 2px 0 var(--glass-specular), inset 0 1px 2px 0 var(--glass-specular),
    inset 0 -8px 4px 0 rgba(0, 0, 0, 0.02), inset 0 8px 4px 0 rgba(0, 0, 0, 0.02);
  --glass-blur-sm: 4px;
  --glass-blur-md: 8px;
  --glass-blur-lg: 18px;
  --glass-tint-clear: rgba(250, 250, 250, 0.35);
  --glass-blur-clear: 8px;
  --glass-stroke-gradient: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(94, 94, 94, 0.25) 25%,
    rgba(94, 94, 94, 0.8) 50%,
    rgba(94, 94, 94, 0.25) 75%,
    rgba(255, 255, 255, 1) 100%
  );
  --glass-stroke-opacity: 0.8;
  --bevel: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px rgba(255, 255, 255, 0.1);
  --glow-accent: 0 2px 8px var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --glow-accent: 0 2px 8px color-mix(in srgb, var(--text-color-accent) 40%, transparent);
  }
  --glow-info: 0 2px 8px rgba(33, 150, 243, 0.4);
  --shadow-groove: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-dim: 0 1px 2px rgba(0, 0, 0, 0.5);
  --press-scale: 0.9;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --press-in-dur: 0.11s;
  --press-in-ease: cubic-bezier(0.3, 0, 0.4, 1);
  --press-out-dur: 0.5s;
  --color-now: #2196f3;
  --color-accent-dark: #28a745;
  --color-accent-dark-hover: #218838;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1e1e1e;
    --background-color-secondary: #2a2a2a;
    --popup-background: rgba(100, 100, 100, 0.75);
    --text-color-primary: #eaeaea;
    --text-color-secondary: #cccccc;
    --text-color-accent: #3ce065;
    --color-status-free: #3ce065;
    --color-status-free-soon: var(--color-status-free);
    @supports (color: color-mix(in lab, red, red)) {
      --color-status-free-soon: color-mix(
      in srgb,
      var(--color-status-free) 70%,
      var(--color-status-partial)
    );
    }
    --color-status-partial: #f5a623;
    --color-status-busy: #ff5252;
    --accent-gradient: linear-gradient(135deg, #1fa840, #90ffb8);
    --busy-gradient: linear-gradient(135deg, #f44336, #ff867f);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.6);
    --glass-tint: rgba(21, 21, 21, 0.8);
    --glass-tint-clear: rgba(21, 21, 21, 0.35);
    --glass-outline: rgba(255, 255, 255, 0.25);
    --glass-shadow-color: rgba(0, 0, 0, 0.1);
    --glass-highlight: inset -1px 0 2px 0 rgba(0, 0, 0, 0.75), inset 1px 0 2px 0 rgba(0, 0, 0, 0.75),
      inset 0 -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 2px 0 rgba(255, 255, 255, 0.2),
      inset 0 -8px 4px 0 rgba(255, 255, 255, 0.02), inset 0 8px 4px 0 rgba(255, 255, 255, 0.02);
    --glass-stroke-gradient: linear-gradient(
      to bottom,
      rgba(223, 223, 223, 0.35) 0%,
      rgba(41, 41, 41, 0.5) 25%,
      rgba(0, 0, 0, 1) 50%,
      rgba(41, 41, 41, 0.5) 75%,
      rgba(223, 223, 223, 0.35) 100%
    );
  }
}
@media (dynamic-range: high) {
  @supports (color: color(display-p3 1 1 1)) {
    :root {
      --glass-specular: color(display-p3 200% 200% 200%);
    }
  }
}
:root[data-blur="off"] {
  --glass-blur-sm: 0px;
  --glass-blur-md: 0px;
  --glass-blur-lg: 0px;
  --glass-blur-clear: 0px;
  --glass-tint: rgba(250, 250, 250, 0.94);
  --glass-tint-clear: rgba(250, 250, 250, 0.9);
}
@media (prefers-color-scheme: dark) {
  :root[data-blur="off"] {
    --glass-tint: rgba(21, 21, 21, 0.94);
    --glass-tint-clear: rgba(21, 21, 21, 0.9);
  }
}
:root[data-blur="off"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html, body {
  touch-action: manipulation;
}
html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: transparent;
}
@media (pointer: fine) {
  html {
    scrollbar-gutter: stable;
  }
}
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  scroll-behavior: smooth;
  text-align: center;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.noscript-overlay {
  position: fixed;
  inset: 0px;
  z-index: 9999;
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-spring: ease;
    --press-in-ease: ease;
    --press-out-dur: 0.15s;
  }
}
@supports (view-transition-name: none) {
  ::view-transition-old(splash-icon) {
    animation: none;
  }
  ::view-transition-new(splash-icon) {
    animation: none;
    opacity: 0;
  }
  ::view-transition-group(splash-icon) {
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
}
h1 {
  font-size: 3rem;
  font-weight: bold;
  color: var(--text-color-primary);
}
h2 {
  font-size: 2.25rem;
  font-weight: bold;
  color: var(--text-color-primary);
}
h3 {
  font-size: var(--text-175);
  font-weight: 600;
  color: var(--text-color-primary);
}
h4 {
  font-size: var(--text-150);
  font-weight: 500;
  color: var(--text-color-primary);
}
p {
  font-size: var(--text-100);
  color: var(--text-color-primary);
}
a {
  color: var(--text-color-accent);
}
.body-text {
  font-size: var(--text-100);
  color: var(--text-color-primary);
}
.body-small-text {
  font-size: var(--text-85);
  color: var(--text-color-primary);
}
.caption-text {
  font-size: var(--text-75);
  color: var(--text-color-primary);
}
label {
  font-size: var(--text-75);
  font-weight: medium;
  color: var(--text-color-primary);
}
.quote-text {
  font-size: var(--text-100);
  font-style: italic;
  color: var(--text-color-primary);
}
.button-text {
  font-size: var(--text-80);
  font-weight: medium;
  color: var(--text-color-primary);
}
.transparent-button {
  background-color: transparent;
  border-color: transparent;
}
.secondary {
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 70%, transparent);
  }
}
.info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: color-mix(in srgb, #f5a623 15%, transparent);
  border: 1px solid color-mix(in srgb, #f5a623 30%, transparent);
  mix-blend-mode: multiply;
  width: fit-content;
  align-self: center;
  margin: 0 auto;
}
@media (prefers-color-scheme: dark) {
  .info-box {
    mix-blend-mode: screen;
  }
}
.info-box-icon {
  margin: 0;
  font-size: var(--text-150);
}
.info-box-title {
  margin: 0;
  color: #d4820a;
  font-weight: bold;
}
@media (prefers-color-scheme: dark) {
  .info-box-title {
    color: #f5a623;
  }
}
.info-box-content {
  margin: 0;
  font-size: var(--text-90);
  color: #d4820a;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #d4820a 80%, var(--text-color-primary));
  }
  font-weight: 600;
}
.header-top-strip {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 11px;
  background-color: var(--background-color);
}
.header {
  padding-top: calc(env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 11px;
  left: 0;
  right: 0;
  z-index: 1000;
  user-select: none;
  isolation: isolate;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: env(safe-area-inset-top);
  background-color: var(--background-color);
  z-index: 0;
  pointer-events: none;
}
.header-blur-layers {
  position: absolute;
  inset: 0px;
  bottom: -0.5rem;
  pointer-events: none;
  z-index: -1;
}
.header-blur-layer {
  position: absolute;
  inset: 0px;
}
.header-blur-layer:nth-child(1) {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12.5%, black 25%, transparent 37.5%);
  -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 12.5%, black 25%, transparent 37.5% );
}
.header-blur-layer:nth-child(2) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient( to bottom, transparent 12.5%, black 25%, black 37.5%, transparent 50% );
  -webkit-mask-image: linear-gradient( to bottom, transparent 12.5%, black 25%, black 37.5%, transparent 50% );
}
.header-blur-layer:nth-child(3) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask-image: linear-gradient( to bottom, transparent 25%, black 37.5%, black 50%, transparent 62.5% );
  -webkit-mask-image: linear-gradient( to bottom, transparent 25%, black 37.5%, black 50%, transparent 62.5% );
}
.header-blur-layer:nth-child(4) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask-image: linear-gradient(to bottom, transparent 37.5%, black 50%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 37.5%, black 50%, black 100%);
}
.header-fade-overlay {
  position: absolute;
  inset: 0px;
  background: linear-gradient( to bottom, var(--background-color) 0%, var(--background-color) 45%, var(--background-color) 70%, transparent 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( to bottom, var(--background-color) 0%, color-mix(in srgb, var(--background-color) 70%, transparent) 45%, color-mix(in srgb, var(--background-color) 25%, transparent) 70%, transparent 100% );
  }
}
.header-top-line-container {
  position: relative;
  z-index: 1;
  padding: 0 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  line-height: 2rem;
}
.header-title-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.header-title-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0.5rem;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
}
.header-title-beta-container > h4 {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.header-title-beta-container {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.2em;
}
.header-title {
  font-size: var(--text-200);
  font-weight: bold;
  background: var(--text-color-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .header-title {
    mix-blend-mode: normal;
  }
}
.header-logo {
  width: auto;
  height: 2rem;
  user-select: none;
  -webkit-user-drag: none;
}
.header-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.header-button {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  color: var(--text-color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.header-button::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  pointer-events: none;
}
#favourite-btn {
  display: none;
}
body.detail-open #favourite-btn {
  display: flex;
}
#favourite-btn .hgi-star {
  font-size: 1.375rem;
}
#favourite-btn .star-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
#favourite-btn.favourite-btn--active {
  color: #f0b429;
}
.pulse-indicator {
  --pulse-color: var(--text-color-secondary);
}
.pulse-indicator.green {
  --pulse-color: var(--text-color-accent);
}
.pulse-indicator.yellow {
  --pulse-color: #f0b429;
}
.pulse-indicator.red {
  --pulse-color: #e53935;
}
.pulse-indicator {
  position: relative;
  width: 1rem;
  height: 1rem;
}
.pulse-indicator::before, .pulse-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.pulse-indicator::before {
  width: 100%;
  height: 100%;
  background: var(--pulse-color);
  animation: pulse-dot 2s ease-out infinite;
}
.pulse-indicator::after {
  width: 100%;
  height: 100%;
  border: 2px solid var(--pulse-color);
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}
@keyframes pulse-dot {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.data-fetch-popover-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.data-reload-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: var(--text-85);
}
.data-reload-icon {
  font-size: var(--text-100);
  transition: transform 0.3s ease;
}
.data-reload-icon.spinning {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.header-nav-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
body.detail-open .header-nav-row, body.info-open .header-nav-row {
  min-height: 3.5rem;
}
.hgi-stroke {
  font-size: 22px !important;
}
@keyframes slide-in-top {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-20px);
    scale: 0.92;
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
    scale: 1;
  }
}
.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  padding-bottom: calc(var(--bottom-nav-height, 88px) + 20px);
}
@media (min-width: 600px) {
  .footer {
    padding-bottom: 1rem;
  }
}
.version-info-button > label {
  text-decoration: underline;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.info-label {
  text-align: end;
}
.slide-in-top {
  animation: slide-in-top 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.body-container {
  padding-top: 1.5rem;
  padding-bottom: var(--bottom-nav-height, 88px);
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 600px) {
  .body-container {
    padding-bottom: 0;
  }
}
.tab-content {
  padding: 0 1rem;
  content-visibility: hidden;
}
@media (min-width: 600px) {
  .tab-content {
    padding-left: calc(20px + var(--side-nav-width, 88px) + 1.5rem);
  }
}
.tab-content.visible {
  content-visibility: visible;
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: appear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes appear {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.95, 1);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1, 1);
  }
}
@keyframes disappear {
  from {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  to {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.95);
  }
}
@keyframes i18n-pop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.i18n-animate {
  animation: i18n-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.section-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: start;
  padding: 1rem 0;
}
.section-header-title, .section-header-subtitle, .subsection-header-title, .subsection-header-subtitle {
  margin: 0;
  padding: 0;
}
.section-header-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-size: var(--text-110);
  font-weight: bold;
  color: #000;
  opacity: 0.5;
}
.section-header-title-icon {
  flex: none;
  font-size: 1em;
  width: 1em;
  height: 1em;
  line-height: 1;
}
@media (prefers-color-scheme: dark) {
  .section-header-title {
    color: #fff;
  }
}
.section-header-subtitle {
  font-size: 1.35rem;
}
@media (max-width: 600px) {
  .section-header-title {
    font-size: var(--text-175);
  }
  .section-header-subtitle {
    font-size: var(--text-100);
  }
}
.subsection-header-title {
  font-size: var(--text-150);
  font-weight: 600;
}
.subsection-header-subtitle {
  font-size: var(--text-85);
}
@media (max-width: 600px) {
  .subsection-header-title {
    font-size: var(--text-125);
  }
  .subsection-header-subtitle {
    font-size: var(--text-75);
  }
}
.form {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: 1rem;
}
.picker-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  container-type: inline-size;
}
.picker-substack {
  display: contents;
}
.picker-row > *, .picker-substack > * {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}
.available-classroom-results {
  color: var(--text-color-primary);
}
#available-classrooms-form {
  position: sticky;
  top: calc(var(--header-height, 84px) + 2.25rem);
  z-index: 10;
  gap: 8px;
}
@keyframes skeleton-shimmer {
  from {
    background-position: 200% center;
  }
  to {
    background-position: -200% center;
  }
}
.date-picker-skeleton {
  display: none;
}
form[data-loading] .date-picker-skeleton {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  margin-top: 2rem;
  align-self: center;
  background-color: var(--background-color-secondary);
  box-shadow: var(--bevel), var(--shadow);
}
form[data-loading] .date-picker-skeleton > div {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient( 90deg, var(--text-color-primary) 25%, var(--text-color-primary) 50%, var(--text-color-primary) 75% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--text-color-primary) 6%, transparent) 25%, color-mix(in srgb, var(--text-color-primary) 12%, transparent) 50%, color-mix(in srgb, var(--text-color-primary) 6%, transparent) 75% );
  }
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
}
ul li::marker {
  color: var(--text-color-accent);
}
.popover {
  position: absolute;
  z-index: 1000;
  max-width: 35%;
  word-wrap: break-word;
  padding: 12px 16px;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  color: var(--text-color-primary);
  border-radius: 12px;
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  opacity: 0;
  transform: scale(0.78) translateY(var(--popover-closed-ty, -6px));
  pointer-events: none;
  transition: opacity 120ms ease-out, transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1);
  will-change: opacity, transform;
}
.popover::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .popover {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
  @media (prefers-color-scheme: dark) {
    .popover {
      background: var(--background-color-secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--background-color-secondary) 95%, white);
      }
    }
  }
}
@media (max-width: 600px) {
  .popover {
    max-width: 60%;
  }
}
.popover[data-show] {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  backdrop-filter: inherit;
  -webkit-backdrop-filter: inherit;
  transform: rotate(45deg);
}
.arrow[data-side="top"] {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.arrow[data-side="bottom"] {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.arrow[data-side="left"] {
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.arrow[data-side="right"] {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
@supports (anchor-name: --a) {
  .popover {
    position: fixed;
    inset: auto;
    top: anchor(bottom);
    right: anchor(right);
    margin: 8px 0 0 0;
    position-try-fallbacks: --popover-above, flip-inline, --popover-above flip-inline;
    position-visibility: anchors-visible;
  }
  @position-try --popover-above {
    inset: auto;
    bottom: anchor(top);
    right: anchor(right);
    margin: 0 0 8px 0;
  }
}
.popover-title {
  font-size: 1.65rem;
  margin: 0;
  align-self: center;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .popover-title {
    mix-blend-mode: normal;
  }
}
.popover-title.green {
  background: linear-gradient(135deg, #0d7a30, #2ecc5a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.popover-title.yellow {
  background: linear-gradient(135deg, #b07d00, #f0b429);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.popover-title.red {
  background: linear-gradient(135deg, #a01010, #e53935);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.popover-subtitle {
  font-size: var(--text-125);
  margin: 0 0 0.5rem 0;
}
.changelog-logo {
  width: auto;
  height: 4rem;
  margin-bottom: 0.5rem;
  user-select: none;
  -webkit-user-drag: none;
}
.changelog-container {
  text-align: start;
  display: flex;
  flex-direction: column;
}
.popover ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
}
.popover ul li {
  font-size: var(--text-90);
  color: var(--text-color-secondary);
  padding-left: 16px;
  position: relative;
}
.popover ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.45em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-color-secondary);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: center;
  padding: 0.6rem 1rem;
  margin: 0.5rem;
  background-color: rgba(30, 30, 30, 0.08);
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 600;
  color: #24292f;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.hero-badge:hover {
  transform: scale(1.1);
  background-color: rgba(30, 30, 30, 0.15);
}
.hero-icon {
  width: 1.4rem;
  height: 1.4rem;
  color: #24292f;
}
.hero-text {
  font-size: var(--text-90);
}
@media (prefers-color-scheme: dark) {
  .hero-badge {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  .hero-badge:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }
  .hero-icon {
    color: #fff;
  }
}
.button-primary {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  font-size: var(--text-100);
  font-weight: bold;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  width: fit-content;
  align-self: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background-color: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--text-color-accent) 28%, var(--background-color-secondary) );
  }
  border: 1.5px solid var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1.5px solid color-mix(in srgb, var(--text-color-accent) 45%, transparent);
  }
  color: var(--text-color-accent);
  box-shadow: inset 1px 2px 0 rgba(255, 255, 255, 0.4), inset -1px -1px 0 rgba(255, 255, 255, 0.15), var(--shadow);
  transition: scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
@media (hover: hover) {
  .button-primary:hover {
    scale: 1.05;
    background-color: var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix( in srgb, var(--text-color-accent) 38%, var(--background-color-secondary) );
    }
    box-shadow: inset 1px 2px 0 rgba(255, 255, 255, 0.4), inset -1px -1px 0 rgba(255, 255, 255, 0.15), 0 4px 20px var(--text-color-accent), var(--shadow);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 1px 2px 0 rgba(255, 255, 255, 0.4), inset -1px -1px 0 rgba(255, 255, 255, 0.15), 0 4px 20px color-mix(in srgb, var(--text-color-accent) 35%, transparent), var(--shadow);
    }
  }
}
.button-primary:active {
  scale: 0.96;
  transition: scale 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease, background-color 0.12s ease;
}
.button-primary:not(:active) {
  transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease;
}
.button-primary.button-secondary {
  background: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-accent) 12%, transparent);
  }
  border-color: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text-color-accent) 25%, transparent);
  }
  box-shadow: none;
}
@media (hover: hover) {
  .button-primary.button-secondary:hover {
    background: var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-color-accent) 20%, transparent);
    }
    box-shadow: none;
  }
}
.button-secondary:active {
  scale: 0.93;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .no-safari .bn-tabbar, .no-safari .bn-search-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--background-color-secondary);
  }
  @media (prefers-color-scheme: dark) {
    .no-safari .bn-tabbar, .no-safari .bn-search-btn {
      background: rgba(55, 55, 55, 0.96);
    }
  }
}
.samsung .bn-tabbar, .samsung .bn-search-btn, .samsung .header-button {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--background-color-secondary);
}
.samsung .header-title, .samsung .popover-title {
  mix-blend-mode: normal;
  -webkit-text-fill-color: unset;
  background: none;
  color: var(--text-color-accent);
}
.samsung .info-box {
  mix-blend-mode: normal;
}
.samsung .arrow {
  display: none;
}
@media (min-width: 1100px) {
  .section-header-title {
    font-size: var(--text-175);
  }
  .section-header-subtitle {
    font-size: var(--text-110);
  }
  .subsection-header-title {
    font-size: var(--text-125);
  }
  .building-name {
    font-size: var(--text-150);
  }
  .classroom-name, .classroom-status-txt {
    font-size: var(--text-125);
  }
  #available-classrooms-container.visible {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 1.5rem;
    padding-right: 2rem;
  }
  #available-classrooms-container > .favourites-section {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  #available-classrooms-container > .section-header {
    grid-column: 1;
    grid-row: 2;
  }
  #available-classrooms-form {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    position: static;
    gap: 1rem;
  }
  .picker-row:has(.dcp-popup--docked), .picker-row:has(.trc-popup--docked), .picker-row:has(.cp-panel-host--docked) {
    align-items: flex-start;
  }
  date-chip-picker:has(.dcp-popup--docked), time-range-chip-picker:has(.trc-popup--docked), .picker-row > .cp-panel-host--docked {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
  }
  .cp-panel-host--docked {
    display: block;
  }
  .picker-row .picker-substack {
    display: flex;
    flex-flow: row wrap;
    gap: 0.75rem;
    flex: 1 1 0;
    width: auto;
    align-content: flex-start;
    align-items: flex-start;
  }
  #available-classrooms-results {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    position: sticky;
    top: calc(var(--header-height, 84px) + 1rem);
    max-height: calc(100dvh - var(--header-height, 84px) - 2rem);
    overflow-y: auto;
    margin: 1rem -2rem 1rem -2.25rem;
    padding-inline: 2.25rem 2rem;
  }
  #available-classrooms-results.empty {
    position: static;
    align-self: stretch;
    max-height: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.date-picker {
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.date-picker-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 50rem;
  align-self: center;
  touch-action: none;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.75rem;
  margin-top: 2rem;
  user-select: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.date-picker-container::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .date-picker-container {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
  @media (prefers-color-scheme: dark) {
    .date-picker-container {
      background: var(--background-color-secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--background-color-secondary) 95%, white);
      }
    }
  }
}
@media (max-width: 600px) {
  .date-picker-container {
    max-width: 90%;
  }
}
.date-picker-items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 auto;
  width: 100%;
}
.date-indicator {
  position: absolute;
  opacity: 0;
  border-radius: var(--radius-pill);
  transform-origin: center;
  transition: box-shadow 0.15s ease;
  will-change: transform;
}
.date-indicator.date-indicator--lifted {
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.date-indicator::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: 0;
  transition: opacity 0.15s ease;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.date-indicator.date-indicator--lifted::after {
  opacity: var(--glass-stroke-opacity);
}
.date-indicator-inner {
  --dp-pill-bg: rgba(0, 0, 0, 0.08);
  --dp-pill-highlight: rgba(255, 255, 255, 0.3);
  --dp-pill-border: rgba(255, 255, 255, 0.1);
  position: absolute;
  inset: 0px;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  background: var(--dp-pill-bg);
  transition: backdrop-filter 0.15s ease, -webkit-backdrop-filter 0.15s ease, box-shadow 0.15s ease;
}
@media (prefers-color-scheme: dark) {
  .date-indicator-inner {
    --dp-pill-bg: rgba(255, 255, 255, 0.08);
    --dp-pill-highlight: rgba(255, 255, 255, 0.08);
    --dp-pill-border: rgba(255, 255, 255, 0.06);
  }
}
.date-indicator--lifted .date-indicator-inner {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 var(--dp-pill-highlight), inset 0 0 0 1px var(--dp-pill-border);
}
.date-indicator-active-row {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
}
.date-indicator-cell {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
}
.date-indicator-cell .date-day-of-week, .date-indicator-cell .date-number {
  color: var(--text-color-accent);
  font-weight: bold;
  opacity: 1;
}
.date-indicator-hit {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
  touch-action: none;
  cursor: default;
  will-change: transform;
}
@keyframes date-indicator-shake {
  0% {
    transform: translateX(var(--indicator-x)) rotate(0deg);
  }
  20% {
    transform: translateX(calc(var(--indicator-x) - 6px)) rotate(-4deg);
  }
  40% {
    transform: translateX(calc(var(--indicator-x) + 6px)) rotate(4deg);
  }
  60% {
    transform: translateX(calc(var(--indicator-x) - 4px)) rotate(-2deg);
  }
  80% {
    transform: translateX(calc(var(--indicator-x) + 4px)) rotate(2deg);
  }
  100% {
    transform: translateX(var(--indicator-x)) rotate(0deg);
  }
}
.date-indicator.shake {
  animation: date-indicator-shake 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
#today-indicator {
  position: absolute;
  transform: translateX(-50%);
  background: var(--text-color-accent);
  color: white;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: var(--text-72);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--glow-accent);
  transform-origin: bottom center;
  opacity: 0;
  animation: today-indicator-appear 0.65s linear 0.15s forwards;
  animation-delay: 0.35s;
  will-change: transform scale;
  transition: scale 0.15s ease, background-color 0.2s ease;
  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text-color-accent);
  }
  &.hidden {
    display: none;
  }
  &:hover {
    scale: 1.05;
    background: var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-color-accent) 85%, black);
    }
  }
}
@media (prefers-color-scheme: dark) {
  #today-indicator {
    background: var(--color-accent-dark);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
  }
  #today-indicator::after {
    border-top-color: var(--color-accent-dark);
  }
  #today-indicator:hover {
    background: var(--color-accent-dark-hover);
  }
}
@keyframes today-indicator-appear {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(82px) scale(0, 0);
    filter: blur(16px);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  25% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(0.25, 0.85);
    filter: blur(2px);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  75% {
    transform: translateX(-50%) translateY(0) scale(1.08, 1.06);
    filter: blur(0);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1, 1);
    filter: blur(0);
  }
}
.date-element-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 2.5rem;
  padding: 0.4rem;
  z-index: 1;
  will-change: color;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.date-element-container.date-skipped {
  cursor: not-allowed;
}
.date-picker--hide-sundays .date-element-container:has(.date-sunday) {
  display: none;
}
.date-day-of-week {
  font-weight: bold;
  color: var(--text-color-primary);
}
.date-sunday {
  color: #e53935;
}
@media (prefers-color-scheme: dark) {
  .date-sunday {
    color: #cc3535;
  }
}
.date-number {
  color: var(--text-color-secondary);
  opacity: 0.5;
}
date-chip-picker {
  display: block;
  min-width: 0;
}
date-chip-picker[data-loading] .dcp-trigger__value {
  display: none;
}
date-chip-picker:not([data-loading]) .dcp-trigger__skeleton {
  display: none;
}
.dcp-trigger__skeleton {
  display: block;
  width: 4.5rem;
  height: 14px;
  border-radius: 5px;
  background: linear-gradient( 90deg, var(--text-color-primary) 25%, var(--text-color-primary) 50%, var(--text-color-primary) 75% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--text-color-primary) 6%, transparent) 25%, color-mix(in srgb, var(--text-color-primary) 12%, transparent) 50%, color-mix(in srgb, var(--text-color-primary) 6%, transparent) 75% );
  }
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
}
.dcp-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  color: var(--text-color-primary);
  -webkit-tap-highlight-color: transparent;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dcp-trigger, .dcp-popup {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
  @media (prefers-color-scheme: dark) {
    .dcp-trigger, .dcp-popup {
      background: var(--background-color-secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--background-color-secondary) 95%, white);
      }
    }
  }
}
.dcp-trigger::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.dcp-trigger[aria-expanded="true"] {
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color), 0 0 0 3px var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color), 0 0 0 3px color-mix(in srgb, var(--text-color-accent) 10%, transparent);
  }
}
.dcp-trigger:focus-visible {
  outline: 2px solid var(--text-color-accent);
  outline-offset: 2px;
}
.dcp-trigger__icon, .dcp-trigger__chevron {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}
.dcp-trigger__icon {
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 75%, transparent);
  }
}
.dcp-trigger__chevron {
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
  }
  transition: transform 0.2s ease;
}
.dcp-trigger[aria-expanded="true"] .dcp-trigger__chevron {
  transform: rotate(180deg);
}
.dcp-trigger__box {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dcp-trigger__label {
  font-size: 8px;
  line-height: 8px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
  }
}
.dcp-trigger__value {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow: hidden;
  white-space: nowrap;
}
.dcp-trigger__value-main {
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  color: var(--text-color-primary);
}
.dcp-trigger__value-month {
  font-size: 10px;
  line-height: 10px;
  font-weight: 400;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 65%, transparent);
  }
}
.dcp-trigger__today-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(28%, -42%);
  z-index: 1;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  background: var(--text-color-accent);
  box-shadow: 0 2px 8px var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--text-color-accent) 35%, transparent);
  }
}
.dcp-trigger__today-badge[hidden] {
  display: none;
}
.dcp-trigger--today {
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), inset -1px 1px 4px 0 var(--text-color-accent), 0 4px 40px 0 var(--glass-shadow-color);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), inset -1px 1px 4px 0 color-mix(in srgb, var(--text-color-accent) 15%, transparent), 0 4px 40px 0 var(--glass-shadow-color);
  }
}
@media (prefers-color-scheme: dark) {
  .dcp-trigger__today-badge {
    background: var(--color-accent-dark);
  }
}
date-chip-picker.dcp-anim .dcp-trigger {
  visibility: hidden;
}
.dcp-trigger__icon, .dcp-trigger__box, .dcp-trigger__chevron {
  transition: opacity 0.24s ease;
}
date-chip-picker.dcp-content-hidden .dcp-trigger__icon, date-chip-picker.dcp-content-hidden .dcp-trigger__box, date-chip-picker.dcp-content-hidden .dcp-trigger__chevron {
  opacity: 0;
  transition: none;
}
.dcp-overlay {
  position: fixed;
  inset: 0px;
  z-index: 1100;
  background: transparent;
  pointer-events: none;
}
.dcp-overlay.is-active {
  pointer-events: auto;
}
.dcp-popup {
  position: fixed;
  z-index: 1200;
  margin: 0;
  inset: auto;
  border: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  overflow: clip;
  border-radius: 22px;
  text-align: left;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  backdrop-filter: blur(var(--glass-blur-md));
  color: var(--text-color-primary);
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 12px 40px 0 var(--glass-shadow-color);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.42s ease;
  will-change: transform;
}
.dcp-popup.liquid-glass {
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.42s ease, translate var(--press-out-dur) var(--ease-spring), scale var(--press-out-dur) var(--ease-spring), filter 0.2s ease;
}
.dcp-popup.liquid-glass.lg-pressing {
  transition: border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), translate var(--press-in-dur) var(--press-in-ease), scale var(--press-in-dur) var(--press-in-ease), filter 0.2s ease;
}
.dcp-popup.liquid-glass.lg-dragging {
  transition: border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), translate 0s, scale 0s, filter 0.2s ease;
}
.dcp-popup.liquid-glass:hover {
  scale: 1;
}
.dcp-popup__inner {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 20px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.dcp-popup--open .dcp-popup__inner {
  opacity: 1;
  transform: none;
  transition-delay: 0.16s;
}
.dcp-popup--closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dcp-popup__title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 55%, transparent);
  }
}
.dcp-popup__title-icon {
  font-size: 16px;
  line-height: 1;
}
.dcp-popup__inner .date-picker {
  align-self: stretch;
}
.dcp-popup__inner .date-picker-container {
  margin-top: 3rem;
  max-width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .dcp-popup, .dcp-popup.liquid-glass, .dcp-popup__inner, .dcp-overlay, .dcp-trigger__chevron {
    transition: none;
  }
  .dcp-popup__inner {
    transform: none;
  }
}
.dcp-trigger[hidden] {
  display: none;
}
.dcp-popup--docked {
  position: static;
  inset: auto;
  width: max-content !important;
  max-width: 100%;
  height: auto !important;
  max-height: none;
  z-index: auto;
  border-radius: 22px !important;
  transition: none;
  will-change: auto;
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 24px 0 var(--glass-shadow-color);
}
.dcp-popup--docked .dcp-popup__inner {
  opacity: 1;
  transform: none;
  transition: none;
}
.dcp-popup--docked.liquid-glass {
  transition: translate var(--press-out-dur) var(--ease-spring), scale var(--press-out-dur) var(--ease-spring), filter 0.2s ease;
}
.dcp-popup--docked.liquid-glass:hover {
  scale: 1.03;
  filter: none;
}
#data-fetch-btn.dfc-anim {
  visibility: hidden;
}
#data-fetch-btn .pulse-indicator {
  transition: opacity 0.24s ease;
}
#data-fetch-btn.dfc-content-hidden .pulse-indicator {
  opacity: 0;
  transition: none;
}
.dfc-overlay {
  position: fixed;
  inset: 0px;
  z-index: 1100;
  background: transparent;
  pointer-events: none;
}
.dfc-overlay.is-active {
  pointer-events: auto;
}
.dfc-popup {
  position: fixed;
  z-index: 1200;
  margin: 0;
  inset: auto;
  border: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  overflow: clip;
  border-radius: 20px;
  text-align: left;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  backdrop-filter: blur(var(--glass-blur-md));
  color: var(--text-color-primary);
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 12px 40px 0 var(--glass-shadow-color);
  will-change: transform;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dfc-popup {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
  @media (prefers-color-scheme: dark) {
    .dfc-popup {
      background: var(--background-color-secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--background-color-secondary) 95%, white);
      }
    }
  }
}
.dfc-popup::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.dfc-popup, .dfc-popup.liquid-glass {
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.42s ease, translate var(--press-out-dur) var(--ease-spring), scale var(--press-out-dur) var(--ease-spring), filter 0.2s ease;
}
.dfc-popup.liquid-glass.lg-pressing {
  transition: border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), translate var(--press-in-dur) var(--press-in-ease), scale var(--press-in-dur) var(--press-in-ease), filter 0.2s ease;
}
.dfc-popup.liquid-glass.lg-dragging {
  transition: border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), translate 0s, scale 0s, filter 0.2s ease;
}
.dfc-popup.liquid-glass:hover {
  scale: 1;
}
.dfc-popup:focus, .dfc-popup:focus-visible {
  outline: none;
}
.dfc-popup__inner {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.dfc-popup--open .dfc-popup__inner {
  opacity: 1;
  transform: none;
  transition-delay: 0.16s;
  overflow-y: auto;
}
.dfc-popup--closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dfc-popup .data-fetch-popover-container {
  gap: 0;
}
@media (prefers-reduced-motion: reduce) {
  .dfc-popup, .dfc-popup.liquid-glass, .dfc-popup__inner, .dfc-overlay, #data-fetch-btn .pulse-indicator {
    transition: none;
  }
  .dfc-popup__inner {
    transform: none;
  }
}
.time-picker > input[type="time"] {
  display: none;
}
:root {
  --tp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --tp-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}
.time-pickers-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tp-overlay {
  position: fixed;
  inset: 0px;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  display: none;
  z-index: 1100;
  transition: opacity 0.35s ease;
}
.tp-overlay--active {
  opacity: 1;
  pointer-events: auto;
  display: block;
}
.samsung .tp-overlay--active {
  background: rgba(0, 0, 0, 0.55);
}
.tp-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 18px;
  background: var(--background-color-secondary);
  border: 1.5px solid var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1.5px solid color-mix(in srgb, var(--text-color-accent) 20%, transparent);
  }
  color: var(--text-color-primary);
  box-shadow: var(--bevel), var(--shadow);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
  touch-action: manipulation;
}
@media (hover: hover) {
  .tp-card:hover {
    scale: 1.02;
    background: var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-color-accent) 8%, var(--background-color-secondary));
    }
    box-shadow: var(--bevel), 0 4px 20px var(--text-color-accent), var(--shadow);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--bevel), 0 4px 20px color-mix(in srgb, var(--text-color-accent) 20%, transparent), var(--shadow);
    }
  }
}
.tp-card:active {
  scale: 0.97;
}
@media (min-width: 52rem) {
  .tp-card {
    display: none;
  }
}
.tp-popup__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
.tp-popup__header-text {
  display: flex;
  flex-direction: column;
  text-align: start;
}
.tp-popup__switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-pill);
  border: none;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-80);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-accent) 14%, transparent);
  }
  color: var(--text-color-accent);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s ease, scale 0.15s ease;
}
.tp-popup__switch .hgi-stroke {
  font-size: 16px !important;
}
@media (hover: hover) {
  .tp-popup__switch:hover {
    background: var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-color-accent) 22%, transparent);
    }
  }
}
.tp-popup__switch:active {
  scale: 0.94;
}
.tp-popup--inline .tp-popup__switch {
  display: none;
}
@media (min-width: 52rem) {
  .time-pickers-container > .time-picker {
    flex: 0 0 17rem;
    overflow: hidden;
  }
}
.tp-card--inline {
  cursor: default;
  pointer-events: none;
}
.tp-popup--inline {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none !important;
  border-radius: var(--radius-card, 18px) !important;
  transition: none !important;
}
.tp-popup--inline .tp-popup__done {
  display: none;
}
.tp-popup--inline .tp-popup__inner {
  padding: 1rem 1.25rem;
}
.tp-popup--inline .tp-popup__time-input {
  font-size: 2.75rem;
}
.tp-card--morphing {
  visibility: hidden;
}
.tp-card__icon-wrap {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-accent) 15%, transparent);
  }
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-color-accent);
}
.tp-card__icon-wrap .hgi-stroke {
  font-size: 20px !important;
}
.tp-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex: 1;
}
.tp-card__label {
  font-size: var(--text-72);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 55%, transparent);
  }
}
.tp-card__time {
  font-family: "DS-Digital", "Courier New", monospace;
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--text-color-accent);
  letter-spacing: 0.04em;
  line-height: 1.1;
  display: inline-block;
}
.tp-card__chevron {
  font-size: 20px !important;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 30%, transparent);
  }
  flex-shrink: 0;
}
.tp-popup {
  position: fixed;
  z-index: 1200;
  background: var(--background-color-secondary);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  flex-direction: column;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.42s ease;
  will-change: transform;
}
.tp-popup__inner {
  opacity: 0;
  transition: opacity 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  height: 100%;
}
.tp-popup--open .tp-popup__inner {
  opacity: 1;
  transition-delay: 0.28s;
}
.tp-popup__title {
  font-size: var(--text-72);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
  }
  margin: 0;
  align-self: flex-start;
}
.tp-popup__input-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}
.tp-popup__clock {
  font-size: 22px !important;
  color: var(--text-color-accent);
  flex-shrink: 0;
}
@font-face {
  font-family: "DS-Digital";
  src: url("/fonts/DS-DIGIB.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.tp-popup__time-input {
  flex: 0 0 auto;
  font-family: "DS-Digital", "Courier New", monospace;
  font-size: 4rem;
  font-weight: normal;
  color: var(--text-color-accent);
  letter-spacing: 0.06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
.tp-popup__time-input::-webkit-calendar-picker-indicator {
  display: none;
}
.tp-popup__time-input::-webkit-inner-spin-button {
  display: none;
}
.tp-popup__time-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
.tp-popup__time-input::-webkit-datetime-edit-hour-field:focus, .tp-popup__time-input::-webkit-datetime-edit-minute-field:focus {
  background: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-accent) 25%, transparent);
  }
  border-radius: var(--radius-xs);
  color: var(--text-color-accent);
  outline: none;
}
.tp-popup__done {
  min-width: 8rem;
}
.tp-popup__quick-btns {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.tp-popup__step {
  width: 2.75rem;
  height: 2.75rem;
  min-width: unset;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-popup__step .hgi-stroke {
  font-size: 20px !important;
}
.tp-popup__step-btns {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.trs-wrapper {
  position: relative;
  width: 100%;
  padding: 0.75rem 1rem 0.5rem;
  border-radius: 22px;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.trs-wrapper::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .trs-wrapper {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
  @media (prefers-color-scheme: dark) {
    .trs-wrapper {
      background: var(--background-color-secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--background-color-secondary) 95%, white);
      }
    }
  }
}
.trs-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 0.25rem;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 55%, transparent);
  }
  text-align: start;
}
.trs-title-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.trs-bar-wrapper {
  position: relative;
  padding-top: 1.6rem;
  padding-bottom: 1.8rem;
}
.trs-badge {
  position: absolute;
  top: 0.1rem;
  transform: translateX(-50%);
  --badge-bg: var(--text-color-accent);
  background: var(--badge-bg);
  color: white;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--text-72);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--badge-bg);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--badge-bg) 40%, transparent);
  }
  border: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 2;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease;
}
@media (hover: hover) {
  .trs-badge:hover {
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 4px 14px var(--badge-bg);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 14px color-mix(in srgb, var(--badge-bg) 55%, transparent);
    }
  }
}
.trs-badge:active {
  transform: translateX(-50%) scale(0.93) !important;
}
.trs-badge--dragging {
  transform-origin: bottom center;
  transform: translate(-50%, -50%) scale(1.2) !important;
  box-shadow: 0 6px 18px var(--badge-bg) !important;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--badge-bg) 60%, transparent) !important;
  }
  font-size: var(--text-85) !important;
  padding: 4px 12px !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, font-size 0.15s ease, padding 0.15s ease !important;
}
.trs-badge::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--badge-bg);
}
@media (prefers-color-scheme: dark) {
  .trs-badge {
    --badge-bg: var(--color-accent-dark);
  }
}
.trs-bar {
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 6%, transparent);
  }
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 8%, transparent);
  }
  box-shadow: var(--shadow-groove);
  position: relative;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: default;
}
.trs-range {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  background-color: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--text-color-accent) 28%, transparent);
  }
  background-image: none;
  box-shadow: inset 0 0 0 1.5px var(--text-color-accent), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 12px var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-color-accent) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 12px color-mix(in srgb, var(--text-color-accent) 16%, transparent);
  }
  cursor: default;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.trs-range:active {
  background-color: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--text-color-accent) 36%, transparent);
  }
}
@media (prefers-color-scheme: dark) {
  .trs-range {
    background-color: var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--text-color-accent) 32%, transparent);
    }
    background-image: none;
    box-shadow: inset 0 0 0 1.5px var(--text-color-accent), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 16px rgba(0, 0, 0, 0.25);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-color-accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 16px rgba(0, 0, 0, 0.25);
    }
  }
}
.trs-duration {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--text-72);
  font-weight: 800;
  color: var(--text-color-accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
  .trs-duration {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.3);
  }
}
.trs-handle {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 28px;
  border-radius: 5px;
  background: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-accent) 85%, white);
  }
  border: 1.5px solid var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1.5px solid color-mix(in srgb, var(--text-color-accent) 95%, transparent);
  }
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: default;
  touch-action: none;
  z-index: 3;
  outline: none;
  transition: box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.trs-handle.trs-handle--from {
  transform: translate(-50%, -50%) translateZ(0);
  border-radius: 5px;
}
.trs-handle.trs-handle--to {
  transform: translate(-50%, -50%) translateZ(0);
  border-radius: 5px;
}
@media (prefers-color-scheme: dark) {
  .trs-handle {
    background: var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-color-accent) 75%, #1a1a1a);
    }
    border-color: var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--text-color-accent) 90%, transparent);
    }
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}
.trs-handle::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
}
.trs-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 -4px 0 rgba(255, 255, 255, 0.75), 0 4px 0 rgba(255, 255, 255, 0.75);
  border-radius: 1px;
}
@media (prefers-color-scheme: dark) {
  .trs-handle::after {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 -4px 0 rgba(255, 255, 255, 0.55), 0 4px 0 rgba(255, 255, 255, 0.55);
  }
}
.trs-handle:focus-visible {
  box-shadow: 0 0 0 3px var(--text-color-accent), 0 1px 6px rgba(0, 0, 0, 0.14);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-color-accent) 40%, transparent), 0 1px 6px rgba(0, 0, 0, 0.14);
  }
}
@media (hover: hover) {
  .trs-handle.trs-handle--from:hover, .trs-handle.trs-handle--to:hover {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}
.trs-handle.trs-handle--from.trs-handle--dragging, .trs-handle.trs-handle--to.trs-handle--dragging {
  transform: translate(-50%, -50%) translateZ(0) scale(1.2) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: none !important;
}
.trs-now-badge {
  position: absolute;
  top: calc(1.6rem + 3rem + 0.4rem);
  transform: translateX(-50%);
  transform-origin: top center;
  background: var(--color-now);
  color: white;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--text-72);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--glow-info);
  pointer-events: auto;
  user-select: none;
  z-index: 1;
  opacity: 0;
  animation: today-indicator-appear 0.65s ease-out 0.35s forwards;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease;
}
@media (hover: hover) {
  .trs-now-badge:hover {
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 4px 14px rgba(33, 150, 243, 0.55);
  }
}
.trs-now-badge:active {
  transform: translateX(-50%) scale(0.93) !important;
}
.trs-now-badge::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--color-now);
}
.trs-now-line {
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--color-now);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: today-indicator-appear 0.65s ease-out 0.35s forwards;
}
.trs-now-line::before, .trs-now-line::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  background: inherit;
  border-radius: 50%;
  transform: translateX(-50%);
}
.trs-now-line::before {
  top: -3px;
}
.trs-now-line::after {
  bottom: -3px;
}
.trs-bar--snapping .trs-handle, .trs-bar--snapping .trs-badge, .trs-bar--snapping .trs-range {
  transition: left 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes trs-text-update {
  from {
    opacity: 0.5;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.trs-badge-text--changing {
  animation: trs-text-update 0.15s ease-out;
}
.trs-grid-line {
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: 0;
  border-left: 1px dashed var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1px dashed color-mix(in srgb, var(--text-color-primary) 10%, transparent);
  }
  pointer-events: none;
  z-index: 0;
  transform: translateX(-50%);
}
.trs-ticks {
  position: absolute;
  top: 0.1rem;
  left: 0;
  right: 0;
  height: 1.4rem;
}
.trs-tick-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 45%, transparent);
  }
  white-space: nowrap;
}
time-range-chip-picker {
  display: block;
  min-width: 0;
}
time-range-chip-picker .time-pickers-container {
  display: none;
}
time-range-chip-picker[data-loading] .trc-trigger__value {
  display: none;
}
time-range-chip-picker:not([data-loading]) .trc-trigger__skeleton {
  display: none;
}
.trc-trigger__skeleton {
  display: block;
  width: 5rem;
  height: 14px;
  border-radius: 5px;
  background: linear-gradient( 90deg, var(--text-color-primary) 25%, var(--text-color-primary) 50%, var(--text-color-primary) 75% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--text-color-primary) 6%, transparent) 25%, color-mix(in srgb, var(--text-color-primary) 12%, transparent) 50%, color-mix(in srgb, var(--text-color-primary) 6%, transparent) 75% );
  }
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
}
.trc-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  color: var(--text-color-primary);
  -webkit-tap-highlight-color: transparent;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .trc-trigger, .trc-popup {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
  @media (prefers-color-scheme: dark) {
    .trc-trigger, .trc-popup {
      background: var(--background-color-secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--background-color-secondary) 95%, white);
      }
    }
  }
}
.trc-trigger::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.trc-trigger[aria-expanded="true"] {
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color), 0 0 0 3px var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color), 0 0 0 3px color-mix(in srgb, var(--text-color-accent) 10%, transparent);
  }
}
.trc-trigger:focus-visible {
  outline: 2px solid var(--text-color-accent);
  outline-offset: 2px;
}
.trc-trigger__icon, .trc-trigger__chevron {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}
.trc-trigger__icon {
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 75%, transparent);
  }
}
.trc-trigger__chevron {
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
  }
  transition: transform 0.2s ease;
}
.trc-trigger[aria-expanded="true"] .trc-trigger__chevron {
  transform: rotate(180deg);
}
.trc-trigger__box {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.trc-trigger__label {
  font-size: 8px;
  line-height: 8px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
  }
}
.trc-trigger__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  color: var(--text-color-primary);
}
.trc-trigger__value-sep {
  font-weight: 400;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 45%, transparent);
  }
}
time-range-chip-picker.trc-anim .trc-trigger {
  visibility: hidden;
}
.trc-trigger__icon, .trc-trigger__box, .trc-trigger__chevron {
  transition: opacity 0.24s ease;
}
time-range-chip-picker.trc-content-hidden .trc-trigger__icon, time-range-chip-picker.trc-content-hidden .trc-trigger__box, time-range-chip-picker.trc-content-hidden .trc-trigger__chevron {
  opacity: 0;
  transition: none;
}
.trc-overlay {
  position: fixed;
  inset: 0px;
  z-index: 1100;
  background: transparent;
  pointer-events: none;
}
.trc-overlay.is-active {
  pointer-events: auto;
}
.trc-popup {
  position: fixed;
  z-index: 1200;
  margin: 0;
  inset: auto;
  border: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  overflow: clip;
  border-radius: 22px;
  text-align: left;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  backdrop-filter: blur(var(--glass-blur-md));
  color: var(--text-color-primary);
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 12px 40px 0 var(--glass-shadow-color);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.42s ease;
  will-change: transform;
}
.trc-popup.liquid-glass {
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.42s ease, translate var(--press-out-dur) var(--ease-spring), scale var(--press-out-dur) var(--ease-spring), filter 0.2s ease;
}
.trc-popup.liquid-glass.lg-pressing {
  transition: border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), translate var(--press-in-dur) var(--press-in-ease), scale var(--press-in-dur) var(--press-in-ease), filter 0.2s ease;
}
.trc-popup.liquid-glass.lg-dragging {
  transition: border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), translate 0s, scale 0s, filter 0.2s ease;
}
.trc-popup.liquid-glass:hover {
  scale: 1;
  filter: none;
}
.trc-popup__inner {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.trc-popup--open .trc-popup__inner {
  opacity: 1;
  transform: none;
  transition-delay: 0.16s;
}
.trc-popup--closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.trc-popup__inner .trs-wrapper {
  padding: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.trc-popup__inner .trs-wrapper::after {
  display: none;
}
.trc-popup__inner .trs-title {
  cursor: default;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.trc-popup.liquid-glass.lg-pressing, .trc-popup.liquid-glass.lg-dragging {
  filter: brightness(1.08) saturate(1.2);
}
@media (prefers-reduced-motion: reduce) {
  .trc-popup, .trc-popup.liquid-glass, .trc-popup__inner, .trc-overlay, .trc-trigger__chevron {
    transition: none;
  }
  .trc-popup__inner {
    transform: none;
  }
}
.trc-trigger[hidden] {
  display: none;
}
.trc-popup--docked {
  position: static;
  inset: auto;
  width: 26rem !important;
  max-width: 100%;
  height: auto !important;
  max-height: none;
  z-index: auto;
  border-radius: 22px !important;
  transition: none;
  will-change: auto;
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 24px 0 var(--glass-shadow-color);
}
.trc-popup--docked .trc-popup__inner {
  opacity: 1;
  transform: none;
  transition: none;
}
.trc-popup--docked.liquid-glass {
  transition: translate var(--press-out-dur) var(--ease-spring), scale var(--press-out-dur) var(--ease-spring), filter 0.2s ease;
}
.trc-popup--docked.liquid-glass:hover {
  scale: 1.03;
  filter: none;
}
.available-classrooms-container {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background-color: transparent;
  border: 4px solid transparent;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.results-filter-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0.25rem 0.5rem 0;
  gap: 1rem;
}
.results-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1.5px solid color-mix(in srgb, var(--text-color-accent) 40%, transparent);
  }
  background: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-accent) 15%, transparent);
  }
  color: var(--text-color-accent);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-80);
  font-weight: 700;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.results-filter-btn:not(.active) {
  background: transparent;
  opacity: 0.45;
}
.results-filter-btn .hgi-stroke {
  font-size: var(--text-100) !important;
}
.available-classrooms-container.hide-partial [data-status="partially-free"] {
  display: none;
}
.available-classrooms-container.hide-partial [data-all-partial="true"] {
  display: none;
}
.available-classrooms-container.empty {
  flex: 1;
  padding: 4rem 0;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}
.empty-container-icon {
  color: var(--text-color-secondary);
  opacity: 0.75;
  font-size: 7rem !important;
}
.empty-container-title {
  font-size: var(--text-150);
  font-weight: 700;
  color: var(--text-color-secondary);
  opacity: 0.75;
  margin: 0;
}
.empty-container-subtitle {
  font-size: var(--text-90);
  font-weight: 630;
  color: var(--text-color-secondary);
  opacity: 0.6;
  margin: 0 3rem;
}
.list-outer-container {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.building-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.75rem;
}
.building-section-header {
  grid-column: 1 / -1;
  position: sticky;
  top: calc(var(--header-height, 84px) + 2.25rem + var(--picker-bar-height, 0px) + 0.5rem);
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem;
  text-align: start;
  animation: card-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@media (min-width: 1100px) {
  .building-section-header {
    top: 1rem;
  }
}
.building-section-titles {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  appearance: none;
  border: none;
  font: inherit;
  text-align: start;
  cursor: default;
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.building-section-titles::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.building-section-btn {
  flex: none;
}
.building-section-btn i {
  font-size: 1.25rem;
  line-height: 1;
}
.building-name {
  font-size: var(--text-110);
  font-weight: 700;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
}
.building-alt-name {
  font-size: var(--text-75);
  font-weight: 600;
  line-height: 1.1;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
}
@media (prefers-color-scheme: dark) {
  .building-name, .building-alt-name {
    color: rgba(255, 255, 255, 0.5);
  }
}
.classroom-list-item-container {
  display: contents;
}
.classroom-list-item-container .classroom-card {
  animation: card-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.list-outer-container.appeared .classroom-card, .list-outer-container.appeared .building-section-header {
  animation: none !important;
}
:has(> .list-outer-container.appeared) {
  animation: none !important;
}
@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.classroom-card {
  position: relative;
  aspect-ratio: 154 / 196;
  max-width: 24rem;
  text-align: start;
  padding: 0;
  border-radius: var(--radius-lg);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--background-color-secondary);
  box-shadow: 0 0 0 0.1px var(--glass-outline), 0 4px 40px 0 var(--glass-shadow-color);
  transition: transform 0.15s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 155px auto 197px;
  &:hover {
    transform: scale(1.02);
  }
  &.classroom-card--pressed {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
  &:focus-visible {
    outline: 2px solid var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 2px solid color-mix(in srgb, var(--text-color-accent) 72%, white);
    }
    outline-offset: 3px;
  }
}
.classroom-card-clip {
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
}
.classroom-card::before {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  box-shadow: var(--glass-highlight);
  pointer-events: none;
  z-index: 1;
}
.classroom-card::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.classroom-card-photo {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.classroom-card-photo.loaded {
  opacity: 1;
}
.classroom-card--photo.photo-failed .classroom-card-photo {
  display: none;
}
.classroom-card--photo.photo-failed::before {
  content: "\f1e97";
  font-family: "hugeicons-stroke-rounded";
  font-size: var(--text-200);
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 20%, transparent);
  }
  z-index: 0;
  pointer-events: none;
}
.classroom-card-scrim {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient( to bottom, rgba(217, 217, 217, 0) 53%, rgba(217, 217, 217, 0.8) 80%, rgba(217, 217, 217, 1) 89% );
}
@media (prefers-color-scheme: dark) {
  .classroom-card-scrim {
    background: linear-gradient( to bottom, rgba(26, 26, 26, 0) 53%, rgba(26, 26, 26, 0.8) 80%, rgba(26, 26, 26, 1) 89% );
  }
}
.classroom-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.1rem;
}
.classroom-status-txt {
  flex: 0 0 auto;
  font-size: var(--text-80);
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.classroom-status-txt.free {
  color: var(--color-status-free);
}
.classroom-status-txt.free-soon {
  color: var(--color-status-free-soon);
}
.classroom-status-txt.partially-free, .classroom-status-txt.occupied-soon {
  color: var(--color-status-partial);
}
.classroom-status-txt.not-free, .classroom-status-txt.occupied {
  color: var(--color-status-busy);
}
.classroom-name {
  font-size: var(--text-150);
  font-weight: 800;
  margin: 0;
  color: var(--text-color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.classroom-card-meta-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.classroom-card-building {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-80);
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 55%, transparent);
  }
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.classroom-card-fav-star {
  display: none;
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  line-height: 0;
  color: #f0b429;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
}
.classroom-card-fav-star .star-icon {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
}
.classroom-card-fav-star .star-icon path {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 2.5px;
}
@media (prefers-color-scheme: dark) {
  .classroom-card-fav-star .star-icon path {
    stroke: rgba(255, 255, 255, 0.65);
  }
}
@supports (color: contrast-color(white)) {
  .classroom-card-fav-star .star-icon path {
    stroke: contrast-color(var(--background-color-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, contrast-color(var(--background-color-secondary)) 60%, transparent);
    }
  }
}
.classroom-card--fav .classroom-card-fav-star {
  display: block;
}
#available-classrooms-results.bo-active {
  justify-content: flex-start;
}
.bo-stage {
  position: relative;
  width: 100%;
  flex: none;
}
#available-classrooms-results.bo-animating .bo-stage {
  overflow: clip;
  overflow-clip-margin: 3rem;
}
#available-classrooms-results.bo-animating :is(.bo-card, .classroom-card, .building-section-titles, .bo-close, .bo-title) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#available-classrooms-results.bo-animating .bo-topbar {
  position: relative;
  top: auto;
}
.building-section.bo-offstage {
  visibility: hidden;
}
.building-section.bo-onstage .classroom-card {
  content-visibility: visible;
  box-shadow: 0 0 0 0.1px var(--glass-outline), 0 2px 8px 0 var(--glass-shadow-color);
}
#available-classrooms-results.bo-animating .classroom-card::before, #available-classrooms-results.bo-animating .classroom-card::after {
  display: none;
}
#available-classrooms-results.bo-restore .classroom-card {
  transition: transform 0.15s ease, box-shadow 0.35s ease;
}
.results-filter-row[hidden] {
  display: none;
}
.bo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.85rem;
  padding: 0.25rem 0.25rem 1rem;
}
@media (max-width: 600px) {
  .bo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
}
.bo-floor-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-125);
  font-weight: 700;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.5);
  text-align: start;
  margin: 0;
  padding: 0.75rem 0.25rem;
}
.bo-floor-label i {
  font-size: 1.1em;
  line-height: 1.1em;
}
@media (prefers-color-scheme: dark) {
  .bo-floor-label {
    color: rgba(255, 255, 255, 0.5);
  }
}
.bo-floor-label:not(:first-child) {
  margin-top: 0.5rem;
}
.bo-topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: calc(var(--header-height, 84px) + 2.25rem + var(--picker-bar-height, 0px) + 0.5rem);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0.25rem 0.35rem;
  pointer-events: none;
}
.bo-topbar > * {
  pointer-events: auto;
}
@media (min-width: 600px) {
  .bo-topbar {
    top: calc(var(--header-height, 84px) + 1.25rem);
  }
}
@media (min-width: 1100px) {
  .bo-topbar {
    top: 1rem;
  }
}
.bo-title {
  margin: 0;
  padding: 0.4rem 1.05rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-125);
  font-weight: 800;
  color: var(--text-color-primary);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.bo-close {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-color: transparent;
  border-radius: var(--radius-pill);
  color: var(--text-color-secondary);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.bo-close::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  pointer-events: none;
}
.bo-close .hgi-stroke {
  font-size: 1.25rem;
}
.bo-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  contain: paint;
  display: flex;
  flex-direction: column;
  min-height: 11.5rem;
  padding: 0.9rem;
  border-radius: var(--radius-lg);
  text-align: start;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 30px 0 var(--glass-shadow-color);
}
.bo-card::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.bo-card[role="button"] {
  transition: transform 0.16s ease;
}
.bo-card[role="button"]:active {
  transform: scale(0.97);
}
.bo-card--inactive {
  opacity: 0.5;
}
.bo-card-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.bo-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}
.bo-card-name {
  font-size: var(--text-125);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-color-primary);
}
.bo-card-alt {
  font-size: var(--text-80);
  font-weight: 600;
  color: var(--text-color-secondary);
}
.bo-card-total {
  margin-top: 0.15rem;
  font-size: var(--text-72);
  font-weight: 700;
}
.bo-card-counts {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.bo-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 14%, transparent);
  }
  font-size: var(--text-70);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.bo-count b {
  font-size: var(--text-85);
  font-weight: 800;
}
.bo-count.is-zero {
  opacity: 0.32;
}
.bo-count.free {
  color: var(--color-status-free);
}
.bo-count.partially-free {
  color: var(--color-status-partial);
}
.bo-count.occupied {
  color: var(--color-status-busy);
}
:root {
  --settings-glass-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.settings-overlay {
  position: fixed;
  inset: 0px;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  display: none;
  z-index: 1100;
  transition: opacity 0.35s ease;
}
.settings-overlay--active {
  opacity: 1;
  pointer-events: auto;
  display: block;
}
.samsung .settings-overlay--active {
  background: rgba(0, 0, 0, 0.55);
}
.settings-popup {
  position: fixed;
  z-index: 1200;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border-radius: 50%;
  box-shadow: var(--settings-glass-shadow);
  flex-direction: column;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.42s ease, background 0.42s ease;
  will-change: transform;
}
.settings-popup::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .settings-popup {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
}
.settings-popup__clip {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: clip;
  border-radius: inherit;
}
.settings-popup__inner {
  opacity: 0;
  transition: opacity 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0 1.25rem 1.5rem;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.settings-popup--open .settings-popup__inner {
  opacity: 1;
  transition-delay: 0.28s;
}
.settings-popup__title-row {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -1.25rem;
  padding: 1.25rem 1.25rem 0.875rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.settings-popup__title-row::before {
  content: "";
  position: absolute;
  inset: 0px;
  bottom: -2.5rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--glass-tint);
  -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.settings-close-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-right: -0.125rem;
  border-radius: 50%;
  border: none;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 10%, transparent);
  }
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 55%, transparent);
  }
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.settings-close-btn .hgi-stroke {
  font-size: 18px !important;
}
.settings-popup--open .settings-close-btn {
  opacity: 1;
  transition-delay: 0.28s;
}
@media (hover: hover) {
  .settings-close-btn:hover {
    background: var(--text-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-color-primary) 16%, transparent);
    }
    color: var(--text-color-primary);
  }
}
.settings-btn--morphing {
  visibility: hidden;
}
.settings-popup__title {
  font-size: var(--text-175);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text-color-primary);
  margin: 0;
  padding: 0 0.25rem;
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.settings-section__header {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 0.25rem;
  text-align: center;
}
.settings-section__icon-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 48%, transparent);
  }
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-section__icon-badge .hgi-stroke {
  font-size: var(--text-100) !important;
}
.settings-section__header-label {
  font-size: var(--text-100);
  font-weight: bold;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 48%, transparent);
  }
}
.settings-group {
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 6%, transparent);
  }
  border-radius: 11px;
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.6rem 0.875rem;
}
.settings-row + .settings-row, .settings-warning + .settings-row {
  border-top: 0.5px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 0.5px solid color-mix(in srgb, var(--text-color-primary) 10%, transparent);
  }
}
.settings-row__icon-title-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.settings-row__icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--badge-color, var(--text-color-accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-row__icon-badge .hgi-stroke {
  font-size: 17px !important;
}
.settings-row__label {
  flex: 1;
  font-size: var(--text-100);
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--text-color-primary);
}
.settings-lang-btn__flag {
  font-size: var(--text-100);
  line-height: 1;
}
.settings-lang-btn__name {
  font-size: var(--text-75);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.settings-seg-icon {
  font-size: var(--text-110) !important;
  line-height: 1;
}
.settings-row__label-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  text-align: left;
}
.settings-row__sublabel {
  font-size: var(--text-75);
  font-weight: 400;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 48%, transparent);
  }
  letter-spacing: -0.01em;
}
.settings-row__sublabel:empty {
  display: none;
}
.settings-toggle {
  position: relative;
  width: 61px;
  height: 31px;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 10%, transparent);
  }
  box-shadow: inset 0 0 0 1.5px var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-color-primary) 18%, transparent);
  }
  border: none;
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.settings-toggle.on {
  background: #34c759;
  box-shadow: none;
}
.settings-toggle__items {
  position: absolute;
  inset: 3px;
}
.settings-toggle__cell {
  position: absolute;
  top: 0;
  width: 36px;
  height: 25px;
  touch-action: pan-y;
}
.settings-toggle__cell--off {
  left: 0;
}
.settings-toggle__cell--on {
  left: 19px;
}
.settings-toggle .seg-pill-inner {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0.5px 1px rgba(0, 0, 0, 0.1), inset 0 0.5px 0 rgba(255, 255, 255, 0.6);
}
.settings-toggle .seg-pill.seg-pill--lifted .seg-pill-inner {
  background: var(--seg-pill-bg);
}
.settings-toggle .seg-hit {
  touch-action: pan-y;
}
.settings-stepper {
  display: flex;
  align-items: center;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 10%, transparent);
  }
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.settings-stepper__btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.settings-stepper__btn .hgi-stroke {
  font-size: 16px !important;
}
@media (hover: hover) {
  .settings-stepper__btn:not(:disabled):hover {
    background: var(--text-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-color-primary) 12%, transparent);
    }
  }
}
.settings-stepper__btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.settings-stepper__value {
  min-width: 2.25rem;
  text-align: center;
  font-size: var(--text-80);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-color-primary);
  font-family: inherit;
}
.settings-warning {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0.625rem 0.625rem;
  padding: 0.625rem 0.75rem;
  background: color-mix(in srgb, #ff9f0a 12%, transparent);
  border: 1px solid color-mix(in srgb, #ff9f0a 30%, transparent);
  border-radius: 10px;
  overflow: hidden;
  max-height: 5rem;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease, padding 0.25s ease;
}
.settings-warning--hidden {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}
.settings-warning__icon {
  font-size: 18px !important;
  color: #cc7a00;
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
  .settings-warning__icon {
    color: #ff9f0a;
  }
}
.settings-warning__text {
  font-size: var(--text-80);
  font-weight: 600;
  line-height: 1.35;
  color: #cc7a00;
  letter-spacing: -0.015em;
}
@media (prefers-color-scheme: dark) {
  .settings-warning__text {
    color: #ff9f0a;
  }
}
.settings-row--campus-picker {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.settings-campus-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 10%, transparent);
  }
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-90);
  font-weight: 500;
  color: var(--text-color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}
.settings-campus-select:disabled {
  opacity: 0.4;
  cursor: default;
}
.seg {
  --seg-pill-bg: rgba(0, 0, 0, 0.08);
  --seg-pill-highlight: rgba(255, 255, 255, 0.3);
  --seg-pill-border: rgba(255, 255, 255, 0.1);
  --seg-color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --seg-color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
  }
  --seg-active-color: var(--text-color-primary);
  position: relative;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (prefers-color-scheme: dark) {
  .seg {
    --seg-pill-bg: rgba(255, 255, 255, 0.08);
    --seg-pill-highlight: rgba(255, 255, 255, 0.08);
    --seg-pill-border: rgba(255, 255, 255, 0.06);
  }
}
.seg-track {
  position: relative;
  padding: 3px;
  border-radius: var(--radius-pill);
  touch-action: none;
  background: var(--glass-tint);
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 20px 0 var(--glass-shadow-color);
}
.seg-track::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.seg-items {
  position: relative;
  display: flex;
  align-items: stretch;
}
.seg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0.4rem 0.75rem;
  background: none;
  border: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--seg-color);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.seg-item:focus-visible {
  outline: 2px solid var(--text-color-accent);
  outline-offset: -3px;
  border-radius: var(--radius-pill);
}
.seg-separator {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  margin: 6px 2px;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 15%, transparent);
  }
}
.seg-pill {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  will-change: transform;
  transform-origin: center;
  transition: box-shadow 0.15s ease;
}
.seg-pill.seg-pill--lifted {
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 20px 0 var(--glass-shadow-color);
}
.seg-pill::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: 0;
  transition: opacity 0.15s ease;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.seg-pill.seg-pill--lifted::after {
  opacity: var(--glass-stroke-opacity);
}
.seg-pill-inner {
  position: absolute;
  inset: 0px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--seg-pill-bg);
  transition: background 0.15s ease, backdrop-filter 0.15s ease, -webkit-backdrop-filter 0.15s ease, box-shadow 0.15s ease;
}
.seg-pill.seg-pill--lifted .seg-pill-inner {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 var(--seg-pill-highlight), inset 0 0 0 1px var(--seg-pill-border);
}
.seg-active-row {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
}
.seg-active-cell {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0.4rem 0.75rem;
  color: var(--seg-active-color);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  pointer-events: none;
}
.seg-hit {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  cursor: default;
  will-change: transform;
  transform-origin: center;
}
.search-overlay-backdrop[hidden] {
  display: none;
}
.search-overlay-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 850;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.search-overlay-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}
body.search-overlay-open {
  overflow: hidden;
}
.tab-content.visible, .footer {
  transition: opacity 0.2s ease;
}
body.search-overlay-open .tab-content.visible, body.search-overlay-open .footer {
  opacity: 0.4;
}
body.search-overlay-open .bn-wrapper {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
html.search-vt .header-blur-layer, html.search-vt .bn-tabbar, html.search-vt .bn-search-btn, html.search-vt .search-overlay-header .search-bar-wrapper, html.search-vt .search-overlay-close, html.search-vt .search-overlay-results {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.search-vt .bn-search-btn {
  will-change: auto;
}
.search-overlay-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--search-kb, 0px) + 16px + env(safe-area-inset-bottom, 0px));
  width: min(100% - 2rem, 640px);
  margin-inline: auto;
  max-height: calc(100dvh - var(--search-kb, 0px) - 32px - env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column-reverse;
  gap: 0.85rem;
  min-height: 0;
}
.search-overlay-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.search-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--background-color-secondary);
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.25rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 6%, transparent);
  }
  box-sizing: border-box;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.search-bar-wrapper .hgi-stroke {
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 40%, transparent);
  }
  font-size: var(--text-125) !important;
  flex-shrink: 0;
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-100);
  font-weight: 500;
  color: var(--text-color-primary);
}
.search-input::placeholder {
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 35%, transparent);
  }
}
.search-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 10%, transparent);
  }
  border: none;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 55%, transparent);
  }
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.search-clear-btn:hover {
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 16%, transparent);
  }
}
.search-clear-btn .hgi-stroke {
  font-size: var(--text-100) !important;
}
.search-input:not(:placeholder-shown) ~ .search-clear-btn {
  opacity: 1;
  pointer-events: auto;
}
.search-overlay-results mark {
  background: rgba(255, 194, 0, 0.45);
  color: inherit;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
  .search-overlay-results mark {
    background: rgba(255, 194, 0, 0.3);
  }
}
.search-overlay-header .search-bar-wrapper {
  margin: 0;
  max-width: none;
  flex: 1;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border-color: transparent;
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.search-overlay-header .search-bar-wrapper:focus-within {
  box-shadow: 0 0 0 3px var(--text-color-accent), 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-color-accent) 22%, transparent), 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  }
}
.search-overlay-header .search-input {
  user-select: text;
  -webkit-user-select: text;
}
.search-overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--text-color-secondary);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.search-overlay-close .hgi-stroke {
  font-size: var(--text-125) !important;
}
.search-overlay-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.75rem;
  border-radius: var(--radius-xl);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.search-overlay-results:empty {
  display: none;
}
.search-overlay-results .search-grid {
  display: grid;
  gap: 1rem;
  padding: 0;
  animation: appear 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.search-overlay-results .search-grid.appeared {
  animation: none;
}
.search-overlay-results .search-grid--classroom {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
@media (max-width: 600px) {
  .search-overlay-results .search-grid {
    gap: 0.75rem;
  }
}
.search-section-label {
  font-size: var(--text-75);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 45%, transparent);
  }
  padding: 0 0.25rem 0.5rem;
}
.search-section-label:not(:first-child) {
  margin-top: 1.25rem;
}
.search-event-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.search-event-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: var(--radius-lg, 1rem);
  background-color: var(--background-color-secondary);
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 6%, transparent);
  }
  box-shadow: var(--shadow);
}
.search-event-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.search-event-title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-95);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-color-primary);
}
.search-event-sessions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.search-event-session {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: start;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: var(--radius-md, 0.75rem);
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 5%, transparent);
  }
}
.search-event-session .ses-when {
  font-size: var(--text-80);
  font-weight: 700;
  color: var(--text-color-accent);
}
.search-event-session .ses-where {
  font-size: var(--text-75);
  font-weight: 600;
}
.search-event-more {
  font-size: var(--text-72);
  font-weight: 600;
  padding: 0.15rem 0.7rem 0;
}
@media (max-width: 599px) {
  .search-overlay-results .search-grid--classroom {
    zoom: 0.72;
  }
  body.search-overlay-open.search-covers-header .header {
    opacity: 0;
    pointer-events: none;
  }
  body.search-overlay-open .header {
    transition: opacity 0.2s ease;
  }
}
@supports (view-transition-name: none) {
  .search-overlay-backdrop {
    transition: none;
  }
  ::view-transition-group(search-fab-morph) {
    animation-duration: 0.34s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
    overflow: clip;
  }
  ::view-transition-old(search-fab-morph), ::view-transition-new(search-fab-morph) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  ::view-transition-old(search-fab-morph) {
    animation-name: sfm-fade-out;
    animation-duration: 0.16s;
  }
  ::view-transition-new(search-fab-morph) {
    animation-name: sfm-fade-in;
    animation-duration: 0.34s;
  }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 0.28s;
  }
}
@keyframes sfm-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes sfm-fade-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(search-fab-morph), ::view-transition-old(search-fab-morph), ::view-transition-new(search-fab-morph), ::view-transition-old(root), ::view-transition-new(root) {
    animation: none !important;
  }
}
@media (min-width: 600px) {
  .search-overlay-panel {
    left: 50%;
    right: auto;
    top: 27vh;
    bottom: auto;
    transform: translateX(-50%);
    margin-inline: 0;
    max-height: 65vh;
    flex-direction: column;
  }
  body.search-overlay-open .bn-wrapper {
    opacity: 1;
    pointer-events: auto;
  }
  body.search-overlay-open #bn-search-btn {
    opacity: 0;
    pointer-events: none;
  }
}
.search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  gap: 1.5rem;
  flex: 1;
}
.search-too-many-notice {
  text-align: center;
  font-size: var(--text-75);
  color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-color-primary) 45%, transparent);
  }
  padding: 0.75rem 1rem 0.25rem;
}
#classroom-detail-overlay:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--background-color);
}
@supports not (view-transition-name: none) {
  #classroom-detail-overlay:not([hidden]) {
    opacity: 0;
    transition: opacity 0.22s ease;
    will-change: opacity;
  }
}
#classroom-detail-overlay:not([hidden]):has(.detail-photo-container) {
  margin-top: calc(-1 * var(--header-height, 84px) - 0.5rem);
  padding-top: calc(var(--header-height, 84px) + 0.5rem);
}
#classroom-detail-overlay.visible {
  opacity: 1;
}
body.detail-open .tab-content {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}
body.detail-open .footer {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.detail-open .tab-content, body.detail-open .tab-content * {
  animation: none !important;
  transition: none !important;
}
.detail-photo-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 5%, transparent);
  }
  animation: detail-skeleton-pulse 1.4s ease-in-out infinite;
  align-self: center;
  flex-shrink: 0;
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  margin-top: calc(-1 * var(--header-height, 84px) - 0.5rem);
}
@media (max-width: 599px) {
  .detail-photo-container {
    width: 100%;
    aspect-ratio: auto;
    height: 38vh;
    min-height: 280px;
    border-radius: 0;
    box-shadow: none;
  }
}
@media (min-width: 600px) {
  .detail-photo-container {
    width: 100%;
    max-width: none;
    aspect-ratio: 21 / 9;
    border-radius: 0;
    box-shadow: none;
  }
}
.detail-photo-container.loaded {
  animation: none;
  background: var(--background-color-secondary);
}
@media (max-width: 599px) {
  .detail-photo-container.loaded {
    background: var(--background-color);
  }
}
.detail-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
.detail-photo.loaded {
  opacity: 1;
  transform: scale(1.001);
}
.detail-photo-gradient {
  position: absolute;
  inset: 0px;
  top: auto;
  height: 180px;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  mask-image: linear-gradient( to top, black 0%, black 20%, rgba(0, 0, 0, 0.5) 60%, transparent 100% );
  -webkit-mask-image: linear-gradient( to top, black 0%, black 20%, rgba(0, 0, 0, 0.5) 60%, transparent 100% );
  background: linear-gradient( to top, var(--background-color) 0%, var(--background-color) 30%, transparent 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( to top, var(--background-color) 0%, color-mix(in srgb, var(--background-color) 80%, transparent) 30%, transparent 100% );
  }
}
.detail-photo.loaded + .detail-photo-gradient {
  opacity: 1;
}
#detail-back-btn {
  position: fixed;
  left: 1rem;
  top: calc(11px + var(--header-height, 84px) - 1.75rem);
  transform: translateY(-50%);
  z-index: 1002;
}
#detail-back-btn[hidden] {
  display: none;
}
.detail-header {
  padding: 1.25rem 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  align-items: flex-start;
}
.detail-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}
@media (min-width: 600px) {
  .detail-title-row {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: auto;
  }
}
.detail-status-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
@media (min-width: 600px) {
  .detail-status-wrapper {
    align-items: center;
  }
}
.detail-status-label {
  font-size: var(--text-70);
  font-weight: 700;
  color: var(--text-color-secondary);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
}
.detail-title-row .classroom-status-txt {
  font-size: var(--text-100);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
@media (min-width: 600px) {
  .detail-header {
    align-items: center;
  }
}
@media (max-width: 599px) {
  .detail-header {
    padding-top: 1rem;
    gap: 0;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    text-align: left;
  }
  .detail-title-row {
    display: contents;
  }
  .detail-title {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    padding-top: 0.25rem;
    width: fit-content;
    max-width: 100%;
  }
  .detail-status-wrapper {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 0.25rem;
  }
  .detail-subtitle {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 0.25rem;
    text-align: left;
    align-self: start;
  }
  .detail-stats {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
  }
  #classroom-detail-overlay:has(.detail-photo-container) .detail-header {
    margin-top: -6rem;
  }
}
.detail-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-color-primary);
  user-select: none;
}
.detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.detail-stat {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-85);
  font-weight: 600;
  color: var(--text-color-secondary);
}
.detail-stat .hgi-stroke {
  font-size: var(--text-110) !important;
  color: var(--text-color-accent);
}
.detail-back-btn {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--glass-tint);
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  color: var(--text-color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  color-scheme: light dark;
}
.detail-back-btn::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .detail-back-btn {
    box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .detail-back-btn {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
  @media (prefers-color-scheme: dark) {
    .detail-back-btn {
      background: var(--background-color-secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--background-color-secondary) 95%, white);
      }
    }
  }
}
.detail-content {
  width: 100%;
  padding: 1rem 1.25rem 4rem;
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}
.detail-subtitle {
  margin: 0 0 1.5rem;
  font-size: var(--text-100);
  font-weight: 600;
  text-align: left;
}
@media (min-width: 600px) {
  .detail-subtitle {
    text-align: center;
    margin-bottom: 2rem;
  }
}
.detail-section {
  margin-bottom: 2rem;
}
.detail-section-title {
  font-size: var(--text-70);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-color-secondary);
  margin: 0 0 0.75rem;
}
.detail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.detail-section-header .detail-section-title {
  margin-bottom: 0;
}
.detail-schedule-legend {
  display: flex;
  gap: 0.75rem;
}
.detail-schedule-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.detail-schedule-legend-box {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--busy-gradient);
  border: 1px solid var(--color-status-busy);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-status-busy) 20%, black);
  }
  opacity: 0.85;
}
@media (prefers-color-scheme: dark) {
  .detail-schedule-legend-box {
    border-color: var(--color-status-busy);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-status-busy) 20%, white);
    }
  }
}
.detail-schedule-legend-label {
  font-size: var(--text-70);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-secondary);
  opacity: 0.8;
}
.detail-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.detail-feature-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.875rem 0.4rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-90);
  font-weight: 600;
  color: var(--text-color-primary);
  background: var(--glass-tint);
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
}
.detail-feature-chip::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .detail-feature-chip {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
}
.detail-feature-chip .hgi-stroke {
  font-size: var(--text-110);
  color: var(--text-color-accent);
}
.detail-no-features {
  font-size: var(--text-90);
  margin: 0;
}
@media (min-width: 600px) {
  .detail-schedule-inner {
    padding-left: 4.5rem;
  }
}
.detail-schedule-grid {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 0.875rem;
  align-items: center;
  margin-bottom: 0.25rem;
}
.detail-schedule-labels-pill {
  position: relative;
  flex-shrink: 0;
  width: 3.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border-radius: var(--radius-pill);
  padding: 0.75rem 0.5rem;
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.detail-schedule-labels-pill::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .detail-schedule-labels-pill {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
  @media (prefers-color-scheme: dark) {
    .detail-schedule-labels-pill {
      background: var(--background-color-secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--background-color-secondary) 95%, white);
      }
    }
  }
}
.detail-schedule-labels-pill .date-element-container {
  aspect-ratio: unset;
  width: 100%;
  height: 2.625rem;
}
.detail-schedule-label-cell--today .date-day-of-week, .detail-schedule-label-cell--today .date-number {
  color: var(--text-color-accent);
  font-weight: bold;
  opacity: 1;
}
.detail-desktop-today-indicator {
  display: none;
}
@media (min-width: 600px) {
  .detail-desktop-today-indicator {
    display: block;
    position: absolute;
    right: calc(100% + 8px);
    background: var(--text-color-accent);
    color: white;
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: var(--text-72);
    font-weight: 800;
    white-space: nowrap;
    cursor: default;
    box-shadow: var(--glow-accent);
    opacity: 0;
    animation: detail-today-indicator-appear 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
    will-change: transform, opacity;
    transition: scale 0.15s ease;
  }
  .detail-desktop-today-indicator::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--text-color-accent);
  }
  .detail-desktop-today-indicator.hidden {
    display: none;
  }
}
@media (min-width: 600px) and (prefers-color-scheme: dark) {
  .detail-desktop-today-indicator {
    background: var(--color-accent-dark);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
  }
  .detail-desktop-today-indicator::after {
    border-left-color: var(--color-accent-dark);
  }
}
@keyframes detail-today-indicator-appear {
  0% {
    opacity: 0;
    transform: translateX(-10px) scale(0.75);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}
.detail-schedule-bars {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.detail-schedule-grid-lines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}
.detail-schedule-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 1px;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 8%, transparent);
  }
}
.detail-schedule-row {
  position: relative;
  z-index: 1;
}
.detail-schedule-bar-wrapper {
  position: relative;
}
.detail-schedule-bar {
  position: relative;
  height: 2.625rem;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 5%, transparent);
  }
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 10%, transparent);
  }
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.detail-schedule-block {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: calc(var(--block-start) + 2px);
  width: calc(var(--block-size) - 4px);
  border-radius: var(--radius-xs);
  background: var(--busy-gradient);
  opacity: 0.85;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-status-busy);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-status-busy) 20%, black);
  }
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.detail-schedule-block:hover, .detail-schedule-block:focus-visible {
  opacity: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.detail-schedule-block:focus-visible {
  outline: 2px solid var(--text-color-accent, #2ecc5a);
  outline-offset: 1px;
}
@media (prefers-color-scheme: dark) {
  .detail-schedule-block {
    border-color: var(--color-status-busy);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-status-busy) 20%, white);
    }
  }
}
.timeline-occupation-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  position-anchor: none;
  position-try-fallbacks: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(280px, 70vw);
  text-align: start;
}
.timeline-popover-time {
  font-size: var(--text-85);
  font-weight: 600;
  color: var(--text-color-accent, inherit);
}
.timeline-popover-title {
  font-size: var(--text-90);
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}
.timeline-popover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--text-80);
  color: var(--text-color-secondary);
}
.timeline-popover-badge {
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--color-status-busy);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-status-busy) 18%, transparent);
  }
  color: var(--color-status-busy);
  font-weight: 600;
}
.detail-schedule--hide-sundays .detail-schedule-row--sunday, .detail-schedule--hide-sundays .detail-schedule-label-cell--sunday {
  display: none;
}
.detail-schedule-row--sunday .detail-schedule-bar {
  background: color-mix(in srgb, #e53935 8%, transparent);
  border-color: color-mix(in srgb, #e53935 15%, transparent);
}
.detail-schedule-ticks .timeline-time-indicator--now {
  position: absolute;
  top: 1px;
  left: var(--pos);
  transform: translateX(-50%);
  z-index: 10;
  background: var(--color-now);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-70);
  font-weight: 800;
  box-shadow: var(--glow-info);
}
.detail-schedule-ticks .timeline-time-indicator--now::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-now);
}
.detail-schedule-bar-wrapper .timeline-time-indicator--now {
  display: none;
}
.detail-schedule-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  transform: translateX(-50%);
  background: var(--color-now);
  pointer-events: none;
  z-index: 4;
}
.detail-schedule-now-line::before, .detail-schedule-now-line::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  background: inherit;
  border-radius: 50%;
  transform: translateX(-50%);
}
.detail-schedule-now-line::before {
  top: -3px;
}
.detail-schedule-now-line::after {
  bottom: -3px;
}
.detail-schedule-query-region {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--qfrom);
  width: calc(var(--qto) - var(--qfrom));
  background: var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-accent) 12%, transparent);
  }
  border-left: 1.5px solid var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1.5px solid color-mix(in srgb, var(--text-color-accent) 50%, transparent);
  }
  border-right: 1.5px solid var(--text-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-right: 1.5px solid color-mix(in srgb, var(--text-color-accent) 50%, transparent);
  }
  pointer-events: none;
  z-index: 1;
}
.detail-schedule-ticks .detail-schedule-query-indicator {
  position: absolute;
  top: 1px;
  left: var(--qpos);
  transform: translateX(-50%);
  background: var(--text-color-accent);
  color: white;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: var(--text-70);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--glow-accent);
  user-select: none;
  z-index: 10;
  pointer-events: none;
}
.detail-schedule-ticks .detail-schedule-query-indicator::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text-color-accent);
}
@media (prefers-color-scheme: dark) {
  .detail-schedule-ticks .detail-schedule-query-indicator {
    background: var(--color-accent-dark);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
  }
  .detail-schedule-ticks .detail-schedule-query-indicator::after {
    border-top-color: var(--color-accent-dark);
  }
}
.detail-schedule-bar-wrapper .detail-schedule-query-indicator {
  display: none;
}
.detail-schedule-bar-wrapper .timeline-hover-cursor {
  position: absolute;
  top: 0;
  transform: translateX(-50%) translateY(calc(-100% - 8px));
  background: var(--background-color);
  color: var(--text-color-primary);
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 18%, transparent);
  }
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: var(--text-72);
  font-weight: bold;
  white-space: nowrap;
  box-shadow: var(--shadow);
  pointer-events: none;
  user-select: none;
  z-index: 10;
}
.detail-schedule-bar-wrapper .timeline-hover-cursor::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-top-color: color-mix(in srgb, var(--text-color-primary) 18%, transparent);
  }
}
.detail-schedule-bar-wrapper .timeline-hover-cursor::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--background-color);
}
.detail-schedule-bar .timeline-hover-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 35%, transparent);
  }
  pointer-events: none;
  z-index: 5;
}
.detail-schedule-ticks {
  position: relative;
  height: 3rem;
  margin-left: calc(3.75rem + 0.875rem);
  margin-bottom: 0.15rem;
  overflow: visible;
}
.detail-schedule-tick {
  position: absolute;
  bottom: 0;
  left: var(--pos);
  transform: translateX(-50%);
  pointer-events: none;
}
.detail-schedule-tick--quarter {
  opacity: 0.4;
  font-size: 0.5rem;
}
.detail-schedule-tick span {
  font-size: 0.6rem;
  color: var(--text-color-secondary);
  font-weight: 600;
}
.detail-schedule-day-selector, .timeline-now-bar-line {
  display: none;
}
@media (max-width: 599px) {
  .detail-schedule-day-selector, .timeline-now-bar-line {
    display: block;
  }
  .detail-schedule-ticks .timeline-time-indicator--now, .detail-schedule-now-line {
    display: none;
  }
  .detail-schedule-picker {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 90% !important;
    align-self: center;
    opacity: 1 !important;
  }
  .detail-schedule-day-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: visible;
    position: relative;
    padding-top: 2rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .detail-today-indicator {
    position: absolute;
    transform: translateX(-50%);
    background: var(--text-color-accent);
    color: white;
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: var(--text-72);
    font-weight: 800;
    white-space: nowrap;
    box-shadow: var(--glow-accent);
    transform-origin: bottom center;
    opacity: 0;
    animation: today-indicator-appear 0.65s linear 0.35s forwards;
    will-change: transform, scale;
    transition: scale 0.15s ease, background-color 0.2s ease;
  }
  .detail-today-indicator::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text-color-accent);
  }
  .detail-today-indicator.hidden {
    display: none;
  }
  .detail-today-indicator:hover {
    scale: 1.05;
    background: var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-color-accent) 85%, black);
    }
  }
  #detail-schedule-container {
    --schedule-bar-height: clamp(240px, 48svh, 480px);
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .detail-schedule-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0.625rem;
    overflow: visible;
  }
  @media (max-width: 600px) {
    .detail-schedule-inner {
      width: 15rem;
      align-self: center;
      padding-right: 3.5rem;
    }
  }
  .detail-schedule-ticks {
    flex-shrink: 0;
    width: 3.5rem;
    height: var(--schedule-bar-height);
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    overflow: visible;
  }
  .detail-schedule-tick span {
    font-size: var(--text-70);
  }
  .detail-schedule-tick {
    left: auto;
    right: 0;
    bottom: auto;
    top: var(--pos);
    transform: translateY(-50%);
    text-align: right;
  }
  .detail-schedule-bar-wrapper .timeline-time-indicator--now {
    position: absolute;
    display: block;
    left: calc(100% + 0.5rem);
    right: auto;
    top: var(--pos);
    transform: translateY(-50%);
    transform-origin: left center;
    background: var(--color-now);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--text-70);
    font-weight: 800;
    white-space: nowrap;
    box-shadow: var(--glow-info);
    user-select: none;
    z-index: 10;
    animation: now-indicator-appear-mobile 0.65s linear 0.35s forwards;
  }
  .detail-schedule-bar-wrapper .timeline-time-indicator--now::after {
    top: 50%;
    right: 95%;
    left: auto;
    border-top-color: transparent;
    border-right-color: var(--color-now);
    transform: translateY(-50%);
  }
  @keyframes now-indicator-appear-mobile {
    0% {
      opacity: 0;
      transform: translateX(-40px) translateY(-50%) scale(0, 0);
      filter: blur(16px);
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    25% {
      opacity: 1;
      transform: translateX(0) translateY(-50%) scale(0.85, 0.25);
      filter: blur(2px);
      animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    75% {
      transform: translateX(0) translateY(-50%) scale(1.06, 1.08);
      filter: blur(0);
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(-50%) scale(1, 1);
      filter: blur(0);
    }
  }
  .detail-schedule-grid {
    flex: 1;
    flex-direction: row;
    gap: 0;
    min-width: 0;
    max-width: 18rem;
  }
  .detail-schedule-grid-lines {
    left: 0;
  }
  .detail-schedule-now-line {
    display: none;
  }
  .detail-schedule-row {
    display: none;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    gap: 0;
  }
  .detail-schedule-row.selected {
    display: flex;
    animation: detail-row-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .detail-schedule-row.selected .detail-schedule-block {
    animation: detail-block-appear 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--idx) * 0.04s + 0.1s);
  }
  @keyframes detail-row-fade-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes detail-block-appear {
    from {
      opacity: 0;
      transform: scaleX(0.85) scaleY(0.85);
      filter: blur(4px);
    }
    to {
      opacity: 0.85;
      transform: scaleX(1) scaleY(1);
      filter: blur(0);
    }
  }
  .detail-schedule-labels-pill {
    display: none;
  }
  .detail-schedule-bar-wrapper {
    flex: 1;
  }
  .detail-schedule-bar {
    height: var(--schedule-bar-height);
    width: 100%;
    border-radius: var(--radius-md);
  }
  .detail-schedule-block {
    top: calc(var(--block-start) + 2px);
    height: calc(var(--block-size) - 4px);
    left: 3px;
    right: 3px;
    width: auto;
    bottom: auto;
    border-radius: 6px;
  }
  .detail-schedule-grid-line {
    left: 0;
    right: 0;
    top: var(--pos);
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .detail-schedule--hide-sundays .detail-schedule-day--sunday {
    display: none;
  }
  .detail-schedule-bar-wrapper .timeline-hover-cursor {
    left: calc(100% + 0.5rem);
    top: 0;
    right: auto;
    transform: translateY(-50%);
  }
  .detail-schedule-bar-wrapper .timeline-hover-cursor::before, .detail-schedule-bar-wrapper .timeline-hover-cursor::after {
    display: none;
  }
  .detail-schedule-bar .timeline-hover-line {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }
  .timeline-now-bar-line {
    position: absolute;
    left: 3px;
    right: 3px;
    top: var(--pos);
    height: 2px;
    background: var(--color-now);
    transform: translateY(-50%);
    z-index: 4;
    pointer-events: none;
  }
  .timeline-now-bar-line::before, .timeline-now-bar-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    background: inherit;
    border-radius: 50%;
    transform: translateY(-50%);
  }
  .timeline-now-bar-line::before {
    left: -3px;
  }
  .timeline-now-bar-line::after {
    right: -3px;
  }
  .detail-schedule-query-region {
    left: 0;
    right: 0;
    width: auto;
    bottom: auto;
    top: var(--qfrom);
    height: calc(var(--qto) - var(--qfrom));
    border-left: none;
    border-right: none;
    border-top: 1.5px solid var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1.5px solid color-mix(in srgb, var(--text-color-accent) 50%, transparent);
    }
    border-bottom: 1.5px solid var(--text-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1.5px solid color-mix(in srgb, var(--text-color-accent) 50%, transparent);
    }
  }
  .detail-schedule-ticks .detail-schedule-query-indicator {
    display: none;
  }
  .detail-schedule-bar-wrapper .detail-schedule-query-indicator {
    display: block;
    position: absolute;
    left: calc(100% + 0.5rem);
    top: var(--qpos);
    transform: translateY(-50%);
    background: var(--text-color-accent);
    color: white;
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    font-size: var(--text-70);
    font-weight: 800;
    white-space: nowrap;
    box-shadow: var(--glow-accent);
    user-select: none;
    z-index: 10;
    pointer-events: none;
  }
  .detail-schedule-bar-wrapper .detail-schedule-query-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 95%;
    left: auto;
    border: 4px solid transparent;
    border-right-color: var(--text-color-accent);
    transform: translateY(-50%);
  }
  @media (prefers-color-scheme: dark) {
    .detail-schedule-bar-wrapper .detail-schedule-query-indicator {
      background: var(--color-accent-dark);
      box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
    }
    .detail-schedule-bar-wrapper .detail-schedule-query-indicator::after {
      border-right-color: var(--color-accent-dark);
    }
  }
}
.detail-schedule-loading {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.detail-schedule-skeleton {
  height: 1.625rem;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 8%, transparent);
  }
  border-radius: 0.4rem;
  animation: detail-skeleton-pulse 1.4s ease-in-out infinite;
}
.detail-schedule-skeleton:nth-child(odd) {
  animation-delay: 0.1s;
}
@keyframes detail-skeleton-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}
.header-ctl-vt #favourite-btn, .header-ctl-vt #detail-back-btn {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@keyframes header-ctl-scale-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes header-ctl-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}
.bn-wrapper.detail-open {
  opacity: 0 !important;
  pointer-events: none !important;
}
@supports (view-transition-name: none) {
  #classroom-detail-overlay:not([hidden]) {
    transition: none;
  }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 0.25s;
  }
  ::view-transition-group(app-header) {
    animation: none;
    z-index: 2;
  }
  ::view-transition-old(app-header) {
    animation: none;
    opacity: 1;
  }
  ::view-transition-new(app-header) {
    animation: none;
    opacity: 0;
  }
  :root:not(.no-safari).header-vt-fixed .header {
    position: fixed;
  }
  :root:not(.no-safari).header-vt-fixed .body-container {
    padding-top: calc(1.5rem + var(--header-height, 0px));
  }
  ::view-transition-group(classroom-detail-zoom) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
  ::view-transition-old(classroom-detail-zoom), ::view-transition-new(classroom-detail-zoom) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
  }
  #detail-back-btn {
    view-transition-name: detail-back-btn;
  }
  #favourite-btn {
    view-transition-name: favourite-btn;
  }
  ::view-transition-group(detail-back-btn), ::view-transition-group(favourite-btn) {
    z-index: 3;
  }
  ::view-transition-new(detail-back-btn):only-child, ::view-transition-new(favourite-btn):only-child {
    animation: header-ctl-scale-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: center;
  }
  ::view-transition-old(detail-back-btn):only-child, ::view-transition-old(favourite-btn):only-child {
    animation: header-ctl-scale-out 0.2s ease-in both;
    transform-origin: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(detail-back-btn):only-child, ::view-transition-new(favourite-btn):only-child, ::view-transition-old(detail-back-btn):only-child, ::view-transition-old(favourite-btn):only-child {
    animation: none;
  }
}
@media (max-width: 599px) and (prefers-color-scheme: dark) {
  .detail-today-indicator {
    background: var(--color-accent-dark);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
  }
  .detail-today-indicator::after {
    border-top-color: var(--color-accent-dark);
  }
  .detail-today-indicator:hover {
    background: var(--color-accent-dark-hover);
  }
}
#info-page-overlay:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--background-color);
  opacity: 0;
  transition: opacity 0.22s ease;
  will-change: opacity;
}
#info-page-overlay.visible {
  opacity: 1;
}
body.info-open .tab-content {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}
body.info-open .footer {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.info-open .header-title-btn {
  visibility: hidden;
}
.info-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 1.5rem 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.info-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 2rem;
}
.info-hero-icon {
  width: 120px;
  height: 120px;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 28%;
  corner-shape: superellipse;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 12px rgba(0, 0, 0, 0.08), 0 16px 28px rgba(0, 0, 0, 0.12);
  position: relative;
}
.info-hero-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0.25rem 0 0;
  line-height: 1.1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .info-hero-title {
    mix-blend-mode: normal;
  }
}
.info-hero-badge {
  margin: 0;
  padding: 0;
  font-size: var(--text-100);
  line-height: 1;
}
@supports (view-transition-name: none) {
  #info-page-overlay {
    transition: none;
  }
  ::view-transition-group(info-logo) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  ::view-transition-old(info-logo), ::view-transition-new(info-logo) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  ::view-transition-group(info-title) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  ::view-transition-old(info-title), ::view-transition-new(info-title) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  ::view-transition-group(info-badge) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  ::view-transition-old(info-badge), ::view-transition-new(info-badge) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
.info-body {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.info-page strong {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.info-page h2 {
  width: 100%;
  text-align: start !important;
  margin: 0;
}
.info-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  margin-top: 2rem;
  align-items: start;
}
@media (min-width: 650px) {
  .info-two-col {
    grid-template-columns: 1fr 1fr;
  }
}
.about-me-section {
  width: 100%;
}
.about-me-section h2 {
  text-align: center;
}
@media (min-width: 650px) {
  .about-me-section h2 {
    text-align: left;
  }
}
.about-me-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 1.5rem 0;
  width: 100%;
}
.about-me-photo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: scale(0.75);
}
.about-me-section.is-visible .about-me-photo {
  animation: photo-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
@keyframes photo-pop-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.about-me-bubbles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
}
.message-bubble {
  background-color: #fafafa;
  color: #000;
  padding: 0 0.9rem;
  border-radius: 1.15rem;
  max-width: 75%;
  font-size: var(--text-100);
  line-height: 1.4;
  text-align: left;
  margin: 0;
  position: relative;
  width: fit-content;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.02);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateX(-20px) translateY(10px) scale(0.8);
  transform-origin: left bottom;
}
.about-me-section.is-visible .message-bubble {
  animation: message-pop-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 2.2rem;
  padding: 0 0.8rem !important;
  margin-bottom: 3px;
}
.about-me-section.is-visible .typing-indicator {
  animation: typing-indicator-cycle 5s ease-in-out forwards;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  background-color: #939399;
  border-radius: 50%;
  display: inline-block;
  animation: dot-jump 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes dot-jump {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}
@keyframes typing-indicator-cycle {
  0% {
    opacity: 0;
    max-height: 0;
    transform: scale(0.8);
    margin-bottom: 0;
  }
  4% {
    opacity: 1;
    max-height: 50px;
    transform: scale(1);
    margin-bottom: 3px;
  }
  12% {
    opacity: 1;
    max-height: 50px;
    transform: scale(1);
    margin-bottom: 3px;
  }
  16% {
    opacity: 0;
    max-height: 0;
    transform: scale(0.8);
    margin-bottom: 0;
  }
  28% {
    opacity: 0;
    max-height: 0;
    transform: scale(0.8);
    margin-bottom: 0;
  }
  32% {
    opacity: 1;
    max-height: 50px;
    transform: scale(1);
    margin-bottom: 3px;
  }
  42% {
    opacity: 1;
    max-height: 50px;
    transform: scale(1);
    margin-bottom: 3px;
  }
  46% {
    opacity: 0;
    max-height: 0;
    transform: scale(0.8);
    margin-bottom: 0;
  }
  58% {
    opacity: 0;
    max-height: 0;
    transform: scale(0.8);
    margin-bottom: 0;
  }
  62% {
    opacity: 1;
    max-height: 50px;
    transform: scale(1);
    margin-bottom: 3px;
  }
  72% {
    opacity: 1;
    max-height: 50px;
    transform: scale(1);
    margin-bottom: 3px;
  }
  76% {
    opacity: 0;
    max-height: 0;
    transform: scale(0.8);
    margin-bottom: 0;
  }
  100% {
    opacity: 0;
    max-height: 0;
    transform: scale(0.8);
    margin-bottom: 0;
  }
}
@keyframes message-pop-in {
  0% {
    opacity: 0;
    max-height: 0;
    transform: translateX(-20px) translateY(10px) scale(0.8);
    padding-top: 0;
    padding-bottom: 0;
  }
  100% {
    opacity: 1;
    max-height: 500px;
    transform: translateX(0) translateY(0) scale(1);
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
}
.about-me-section.is-visible .message-bubble:nth-child(1) {
  animation-delay: 0.8s;
}
.about-me-section.is-visible .message-bubble:nth-child(2) {
  animation-delay: 2.3s;
}
.about-me-section.is-visible .message-bubble:nth-child(3) {
  animation-delay: 3.8s;
}
.about-me-section.is-visible .message-bubble:not(:nth-last-child(2)) {
  border-bottom-left-radius: 0.25rem;
}
.about-me-section.is-visible .message-bubble:not(:first-child) {
  border-top-left-radius: 0.25rem;
}
@media (prefers-color-scheme: dark) {
  .message-bubble {
    background-color: #323235;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.05);
  }
}
.badge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin: 2.5rem 0;
  width: 100%;
}
@media (min-width: 800px) {
  .badge-container {
    flex-direction: row;
    justify-content: center;
  }
}
.info-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--background-color-secondary);
  color: var(--text-color-primary);
  padding: 1.2rem 1.6rem;
  border-radius: var(--radius-xl);
  text-decoration: none;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(15px) scale(0.95);
  width: 100%;
  max-width: 320px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.info-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .info-badge::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  }
}
.info-badge:hover::after {
  left: 150%;
}
.info-badge--stable {
  background-color: var(--color-status-free) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--color-status-free) 12%, var(--background-color-secondary) ) !important;
  }
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-status-free);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-status-free) 30%, transparent);
  }
}
@media (prefers-color-scheme: dark) {
  .info-badge--stable {
    background-color: var(--color-status-free) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix( in srgb, var(--color-status-free) 15%, var(--background-color-secondary) ) !important;
    }
    border-color: var(--color-status-free);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-status-free) 40%, transparent);
    }
  }
}
@media (hover: hover) {
  .info-badge--stable:hover {
    background-color: var(--color-status-free) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix( in srgb, var(--color-status-free) 18%, var(--background-color-secondary) ) !important;
    }
    box-shadow: 0 12px 24px var(--color-status-free), 0 18px 48px var(--color-status-free);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 12px 24px color-mix(in srgb, var(--color-status-free) 8%, transparent), 0 18px 48px color-mix(in srgb, var(--color-status-free) 10%, transparent);
    }
  }
}
.info-badge--beta {
  border: 3px solid transparent !important;
  background: linear-gradient( #007aff, #007aff ) padding-box, repeating-linear-gradient(-45deg, #f1e05a, #f1e05a 12px, #000 12px, #000 24px) border-box;
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( color-mix(in srgb, #007aff 10%, var(--background-color-secondary)), color-mix(in srgb, #007aff 10%, var(--background-color-secondary)) ) padding-box, repeating-linear-gradient(-45deg, #f1e05a, #f1e05a 12px, #000 12px, #000 24px) border-box;
  }
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.2s ease;
}
@keyframes hazard-crawl {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 0, 48px 0;
  }
}
@media (hover: hover) {
  .info-badge--beta:hover {
    background: linear-gradient( #007aff, #007aff ) padding-box, repeating-linear-gradient(-45deg, #f1e05a, #f1e05a 12px, #000 12px, #000 24px) border-box;
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( color-mix(in srgb, #007aff 15%, var(--background-color-secondary)), color-mix(in srgb, #007aff 15%, var(--background-color-secondary)) ) padding-box, repeating-linear-gradient(-45deg, #f1e05a, #f1e05a 12px, #000 12px, #000 24px) border-box;
    }
    animation: hazard-crawl 1s linear infinite;
  }
}
.visible .info-badge {
  animation: badge-pop-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.info-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  text-align: center;
}
.info-disclaimer {
  font-size: var(--text-80);
  color: var(--text-color-secondary);
  opacity: 0.6;
  margin: 0;
}
.polinetwork-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.35rem 0.75rem 0.35rem 0.45rem;
  border-radius: var(--radius-2xl);
  text-decoration: none;
  font-size: var(--text-85);
  font-weight: 500;
  color: #1156ae;
  background-color: #1156ae;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, #1156ae 10%, var(--background-color-secondary));
  }
  border: 1px solid color-mix(in srgb, #1156ae 25%, transparent);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
}
.polinetwork-chip img {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-xs);
  object-fit: cover;
  flex-shrink: 0;
}
.polinetwork-chip strong {
  font-weight: 700;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: #1156ae;
}
@media (hover: hover) {
  .polinetwork-chip:hover {
    transform: translateY(-2px) scale(1.04);
    background-color: #1156ae;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, #1156ae 16%, var(--background-color-secondary));
    }
  }
}
.polinetwork-chip:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}
@media (prefers-color-scheme: dark) {
  .polinetwork-chip {
    color: color-mix(in srgb, #1156ae 70%, #fff);
    background-color: #1156ae;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, #1156ae 14%, var(--background-color-secondary));
    }
    border-color: color-mix(in srgb, #1156ae 35%, transparent);
  }
  .polinetwork-chip strong {
    color: color-mix(in srgb, #1156ae 70%, #fff);
  }
}
.visible .info-badge:nth-child(1) {
  animation-delay: 0.15s;
}
.visible .info-badge:nth-child(2) {
  animation-delay: 0.25s;
}
.visible .info-badge:nth-child(3) {
  animation-delay: 0.35s;
}
@keyframes badge-pop-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (hover: hover) {
  .info-badge:hover {
    transform: translateY(-10px) scale(1.15);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.05), 0 24px 50px rgba(0, 0, 0, 0.1);
  }
}
.info-badge:active {
  transform: translateY(-2px) scale(0.98);
  opacity: 0.95;
  transition-duration: 0.1s;
}
.info-badge svg, .info-badge img {
  width: 3.5rem;
  height: 3.5rem;
  margin-right: 1.25rem;
  flex-shrink: 0;
}
.info-badge svg {
  fill: currentColor;
}
.info-badge img {
  border-radius: 28%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.info-badge .badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}
.info-badge .badge-text .top-text {
  font-size: var(--text-75);
  font-weight: 700;
  letter-spacing: 0.02rem;
  opacity: 0.9;
  margin-bottom: 2px;
  color: var(--text-color-accent);
}
.info-badge .badge-text .bottom-text {
  font-size: 1.35rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--text-color-primary);
}
.info-badge .badge-description {
  font-size: var(--text-80);
  font-weight: 500;
  opacity: 0.75;
  margin-top: 5px;
  color: var(--text-color-secondary);
}
.info-badge .badge-label {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: #f1e05a;
  color: #000;
  font-size: var(--text-70);
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: rotate(3deg);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .info-badge {
    background-color: var(--background-color-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
  .info-badge img {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}
.github-stats-section {
  width: 100%;
}
.github-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.github-repo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-size: var(--text-100);
  font-weight: 600;
  color: var(--text-color-secondary);
  text-decoration: none;
  padding: 0.4rem 0.75rem 0.4rem 0.6rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 12%, transparent);
  }
  background: var(--background-color-secondary);
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.github-repo-chip svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  flex-shrink: 0;
}
@media (hover: hover) {
  .github-repo-chip:hover {
    color: var(--text-color-primary);
    border-color: var(--text-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--text-color-primary) 28%, transparent);
    }
    transform: scale(1.05);
  }
}
.github-repo-chip:active {
  transform: scale(0.95);
}
.github-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.github-stat-card {
  background-color: var(--background-color-secondary);
  border-radius: var(--radius-lg);
  padding: 1.1rem 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 8%, transparent);
  }
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
}
@media (hover: hover) {
  .github-stat-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--text-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--text-color-primary) 18%, transparent);
    }
    background-color: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix( in srgb, var(--background-color-secondary) 95%, var(--text-color-primary) );
    }
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(0, 0, 0, 0.08);
  }
  .github-stat-card:hover .github-stat-icon {
    transform: translateY(-2px) rotate(-8deg);
  }
  .github-stat-card:hover .github-stat-number {
    transform: scale(1.05);
  }
}
.github-stat-card:active {
  transform: translateY(-2px) scale(0.97);
  transition-duration: 0.1s;
}
.github-stats-section.is-visible .github-stat-card {
  animation: github-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.github-stats-section.is-visible .github-stat-card:nth-child(1) {
  animation-delay: 0.05s;
}
.github-stats-section.is-visible .github-stat-card:nth-child(2) {
  animation-delay: 0.12s;
}
.github-stats-section.is-visible .github-stat-card:nth-child(3) {
  animation-delay: 0.19s;
}
.github-stats-section.is-visible .github-stat-card:nth-child(4) {
  animation-delay: 0.26s;
}
@keyframes github-card-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.github-stat-icon {
  font-size: 1.4rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.15rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.github-stat-number {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.github-stat-date {
  font-size: var(--text-100);
}
.github-stat-label {
  font-size: var(--text-70);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-secondary);
  opacity: 0.75;
  margin-top: 0.1rem;
}
@media (prefers-color-scheme: dark) {
  .github-stat-card {
    border-color: var(--text-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--text-color-primary) 12%, transparent);
    }
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.2);
  }
}
.star-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  margin-bottom: 0.1rem;
}
.star-avatar-stack {
  display: flex;
  align-items: center;
  padding: 2px;
}
.star-avatar {
  position: relative;
  flex-shrink: 0;
  margin-left: -7px;
}
.star-avatar:first-child {
  margin-left: 0;
}
.star-avatar img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px var(--background-color-secondary), 0 2px 5px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.star-avatar::after {
  content: attr(data-login);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text-color-primary);
  color: var(--background-color-secondary);
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.15rem 0.4rem;
  border-radius: 0.35rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}
@media (hover: hover) {
  .star-avatar:hover {
    z-index: 10 !important;
  }
  .star-avatar:hover img {
    transform: translateY(-4px) scale(1.15);
    box-shadow: 0 0 0 2px var(--background-color-secondary), 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  .star-avatar:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.github-extended {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.github-subsection {
  opacity: 0;
  transform: translateY(12px);
}
.github-extended.is-visible .github-subsection {
  animation: github-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.github-extended.is-visible .github-subsection:nth-child(1) {
  animation-delay: 0.05s;
}
.github-extended.is-visible .github-subsection:nth-child(2) {
  animation-delay: 0.15s;
}
.github-extended.is-visible .github-subsection:nth-child(3) {
  animation-delay: 0.25s;
}
.github-subsection-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  font-size: var(--text-85);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-color-secondary);
  opacity: 0.8;
}
.github-subsection-header .hgi-stroke {
  font-size: var(--text-100);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.create-issue-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-size: var(--text-90);
  font-weight: 600;
  color: #e5534b;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #e5534b 85%, var(--text-color-primary));
  }
  text-decoration: none;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border-radius: var(--radius-2xl);
  border: 1px solid color-mix(in srgb, #e5534b 30%, transparent);
  background: #e5534b;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #e5534b 10%, var(--background-color-secondary));
  }
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-top: 0.5rem;
}
.create-issue-btn .hgi-stroke {
  font-size: var(--text-110);
}
@media (hover: hover) {
  .create-issue-btn:hover {
    color: color-mix(in srgb, #e5534b 100%, transparent);
    border-color: color-mix(in srgb, #e5534b 50%, transparent);
    background: #e5534b;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, #e5534b 15%, var(--background-color-secondary));
    }
    transform: scale(1.05);
  }
}
.create-issue-btn:active {
  transform: scale(0.95);
}
.github-skeleton {
  border-radius: 0.6rem;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 8%, transparent);
  }
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.lang-bar {
  display: flex;
  border-radius: 100px;
  overflow: hidden;
  height: 8px;
  width: 100%;
  gap: 2px;
  background: var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-color-primary) 8%, transparent);
  }
  transition: transform 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
  .lang-bar:hover {
    height: 12px;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  .lang-bar:hover .lang-segment:not(:hover) {
    opacity: 0.5;
    filter: grayscale(0.2);
  }
  .lang-segment:hover {
    transform: scaleX(1.02);
    z-index: 1;
  }
}
.lang-segment {
  height: 100%;
  min-width: 1px;
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.lang-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.6rem;
}
.lang-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-80);
}
.lang-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lang-name {
  font-weight: 600;
  color: var(--text-color-primary);
}
.lang-pct {
  color: var(--text-color-secondary);
  opacity: 0.75;
}
.contributors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.contributor-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text-color-primary);
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  background: var(--background-color-secondary);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 8%, transparent);
  }
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) {
  .contributor-item:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: var(--text-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--text-color-primary) 18%, transparent);
    }
    background-color: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix( in srgb, var(--background-color-secondary) 95%, var(--text-color-primary) );
    }
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.06);
  }
  .contributor-item:hover .contributor-avatar {
    transform: scale(1.1);
  }
}
.contributor-item:active {
  transform: translateY(-1px) scale(0.97);
}
.contributor-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.contributor-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.contributor-login {
  font-size: var(--text-90);
  font-weight: 700;
  color: var(--text-color-primary);
}
.contributor-count {
  font-size: var(--text-75);
  color: var(--text-color-secondary);
  opacity: 0.7;
}
@media (prefers-color-scheme: dark) {
  .contributor-item {
    border-color: var(--text-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--text-color-primary) 12%, transparent);
    }
  }
}
.info-pwa-section {
  width: 100%;
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--background-color-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 8%, transparent);
  }
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(14px);
}
.info-pwa-section.is-visible {
  animation: github-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.info-pwa-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}
.info-pwa-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.info-pwa-title-row > .hgi-stroke {
  font-size: var(--text-200);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}
.info-pwa-header h2 {
  margin: 0 0 0.3rem !important;
}
.info-pwa-subtitle {
  font-size: var(--text-90);
  color: var(--text-color-secondary);
  margin: 0;
  line-height: 1.4;
}
.pwa-tabbar {
  display: none;
  position: relative;
  background: #dddddd67;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pwa-tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% / var(--tabs)) - 4px);
  background: rgba(218, 218, 218, 0.821);
  border-radius: var(--radius-pill);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.pwa-tab {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  z-index: 1;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.pwa-tab.active {
  color: var(--text-color-accent);
  font-weight: 700;
}
.pwa-tab .info-pwa-platform-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.pwa-tab .hgi-stroke {
  font-size: var(--text-110) !important;
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}
@media (prefers-color-scheme: dark) {
  .pwa-tabbar {
    background: rgba(71, 71, 71, 0.294);
  }
  .pwa-tab {
    color: #aaa;
  }
  .pwa-tab-indicator {
    background: #5e5e5e70;
    box-shadow: var(--shadow-dim);
  }
}
.info-pwa-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 599px) {
  .pwa-tabbar {
    display: flex;
  }
  .info-pwa-cards {
    grid-template-columns: 1fr;
  }
  .info-pwa-card {
    display: none;
  }
  .info-pwa-card.active {
    display: block;
    animation: pwa-card-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
@keyframes pwa-card-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.info-pwa-card {
  background: var(--background-color);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.1rem 1.25rem;
  border: 1px solid var(--text-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-color-primary) 6%, transparent);
  }
}
.info-pwa-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-90);
  font-weight: 700;
  color: var(--text-color-primary);
  margin-bottom: 0.85rem;
}
.info-pwa-platform-icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--text-color-secondary);
  flex-shrink: 0;
}
.info-pwa-card-title .hgi-stroke {
  font-size: var(--text-125) !important;
  color: var(--text-color-secondary);
  background: none;
  -webkit-text-fill-color: var(--text-color-secondary);
}
.info-pwa-steps {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.info-pwa-steps li {
  font-size: var(--text-85);
  color: var(--text-color-secondary);
  line-height: 1.45;
}
.info-pwa-steps li strong {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .info-pwa-section {
    border-color: var(--text-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--text-color-primary) 12%, transparent);
    }
  }
  .info-pwa-card {
    border-color: var(--text-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--text-color-primary) 10%, transparent);
    }
  }
}
.bn-wrapper {
  --bn-pill-bg: rgba(0, 0, 0, 0.08);
  --bn-pill-highlight: rgba(255, 255, 255, 0.3);
  --bn-pill-border: rgba(255, 255, 255, 0.1);
  --bn-tab-color: #555;
  --bn-tab-active-color: var(--text-color-accent);
  position: fixed;
  left: 0;
  right: 0;
  top: 100dvh;
  transform: translateY(calc(-100% - 28px - env(safe-area-inset-bottom)));
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.75rem 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.bn-group {
  position: relative;
  transition: opacity 0.2s ease;
}
.bn-group--inactive .bn-active-row .bn-tab-content {
  color: var(--bn-tab-color);
}
@media (prefers-color-scheme: dark) {
  .bn-wrapper {
    --bn-pill-bg: rgba(255, 255, 255, 0.08);
    --bn-pill-highlight: rgba(255, 255, 255, 0.08);
    --bn-pill-border: rgba(255, 255, 255, 0.06);
  }
}
.bn-tabbar {
  pointer-events: auto;
  position: relative;
  touch-action: none;
  background: var(--glass-tint);
  padding: 4px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 20px 0 var(--glass-shadow-color);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
}
.bn-tabbar::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.bn-tabbar-items {
  display: flex;
  width: 100%;
}
.bn-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.1875rem;
  background: none;
  border: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--bn-tab-color);
}
.bn-tab-item:focus-visible {
  outline: 2px solid var(--bn-tab-active-color);
  outline-offset: -4px;
  border-radius: 999px;
}
.bn-tab-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
}
.bn-tab-content .hgi-stroke {
  font-size: var(--text-110);
  -webkit-text-stroke: 0.4px currentColor;
}
.bn-tab-label {
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bn-pill-outer {
  pointer-events: none;
  position: absolute;
  border-radius: 999px;
  will-change: transform;
  transform-origin: center;
  transition: box-shadow 0.15s ease;
}
.bn-pill-outer.bn-pill--lifted {
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 20px 0 var(--glass-shadow-color);
}
.bn-pill-outer::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: 0;
  transition: opacity 0.15s ease;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.bn-pill-outer.bn-pill--lifted::after {
  opacity: var(--glass-stroke-opacity);
}
.bn-pill-inner {
  position: absolute;
  inset: 0px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bn-pill-bg);
  transition: backdrop-filter 0.15s ease, -webkit-backdrop-filter 0.15s ease, box-shadow 0.15s ease;
}
.bn-pill-outer.bn-pill--lifted .bn-pill-inner {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 var(--bn-pill-highlight), inset 0 0 0 1px var(--bn-pill-border);
}
.bn-active-row {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
}
.bn-active-row .bn-tab-content {
  color: var(--bn-tab-active-color);
}
.bn-active-row .bn-tab-label {
  max-width: none;
}
.bn-tab-active {
  position: absolute;
  padding: 0.625rem 1.1875rem;
}
.bn-pill-hit {
  pointer-events: auto;
  position: absolute;
  touch-action: none;
  cursor: default;
  will-change: transform;
  transform-origin: center;
}
.bn-search-btn {
  position: relative;
  pointer-events: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1875rem;
  border: none;
  border-radius: var(--radius-pill);
  -webkit-tap-highlight-color: transparent;
  background: var(--glass-tint);
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 20px 0 var(--glass-shadow-color);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  color: var(--bn-tab-color);
  will-change: transform;
}
.bn-search-btn::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  pointer-events: none;
}
.bn-search-btn:focus-visible {
  outline: 2px solid var(--bn-tab-active-color);
  outline-offset: -4px;
}
.bn-search-btn-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
}
.bn-search-btn-inner .hgi-stroke {
  font-size: var(--text-110);
  -webkit-text-stroke: 0.4px currentColor;
}
.bn-search-btn.active {
  color: var(--bn-tab-active-color);
}
.bn-search-btn.active .bn-tab-label {
  font-weight: 800;
}
@media (min-width: 600px) {
  .bn-wrapper {
    top: calc(var(--header-height, 84px) + 2rem + 20px);
    left: 20px;
    right: auto;
    bottom: auto;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0;
  }
  .bn-tabbar-items {
    flex-direction: column;
  }
  .bn-tab-item, .bn-tab-active {
    padding: 1.25rem 0.75rem;
  }
  .bn-tab-content .hgi-stroke {
    font-size: var(--text-125);
  }
  .bn-tab-label {
    font-size: var(--text-75);
  }
  .bn-active-row {
    bottom: auto;
    right: 0;
  }
  .bn-tabbar, .bn-pill-outer.bn-pill--lifted, .bn-search-btn {
    box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  }
  .bn-search-btn {
    padding: 1rem;
  }
  .bn-search-btn-inner .hgi-stroke {
    font-size: var(--text-125);
  }
}
html:has(#search-classrooms-container.visible):not(:has(body.detail-open)):not( :has(body.info-open) ), html:has(#search-classrooms-container.visible):not(:has(body.detail-open)):not(:has(body.info-open)) body {
  touch-action: none;
  overscroll-behavior: none;
  scrollbar-width: none;
}
html:has(#search-classrooms-container.visible):not(:has(body.detail-open)):not( :has(body.info-open) )::-webkit-scrollbar, html:has(#search-classrooms-container.visible):not(:has(body.detail-open)):not(:has(body.info-open)) body::-webkit-scrollbar {
  display: none;
}
:root {
  --campus-map-overshoot: 80px;
}
#search-classrooms-container.visible {
  position: relative;
  flex: none;
  margin-top: calc(-1 * var(--header-height, 84px) - 1.5rem);
  height: calc(100lvh + var(--campus-map-overshoot));
  z-index: 0;
  display: block;
  padding: 0;
  animation: campus-map-fade-in 0.3s ease both;
}
body.detail-open #search-classrooms-container.visible, body.info-open #search-classrooms-container.visible {
  position: absolute;
  height: 0;
  overflow: hidden;
}
@keyframes campus-map-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #search-classrooms-container.visible {
    animation: none;
  }
}
html:has(#search-classrooms-container.visible) .footer {
  position: relative;
  z-index: 5;
}
.campus-map {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
}
.campus-map:focus, .campus-map canvas:focus {
  outline: none;
}
.campus-map .mapboxgl-canvas-container.mapboxgl-interactive, .campus-map .mapboxgl-canvas-container.mapboxgl-interactive:active {
  cursor: default !important;
}
.campus-map .mapboxgl-ctrl-top-right {
  top: calc(env(safe-area-inset-top) + var(--header-height, 84px) + 0.5rem);
  right: 0.75rem;
  z-index: 0;
}
.campus-map .mapboxgl-ctrl-bottom-left, .campus-map .mapboxgl-ctrl-bottom-right {
  position: fixed;
  bottom: calc( var(--campus-sheet-collapsed-height, 192px) + 8px + 8px + env(safe-area-inset-bottom) );
  z-index: 0;
}
.campus-map .mapboxgl-ctrl-bottom-left {
  left: var(--bn-tabbar-outer-inset, 28px);
}
.campus-map .mapboxgl-ctrl-bottom-right {
  right: var(--bn-tabbar-outer-inset, 28px);
}
@media (min-width: 600px) {
  .campus-map .mapboxgl-ctrl-bottom-left, .campus-map .mapboxgl-ctrl-bottom-right {
    bottom: 10px;
  }
  .campus-map .mapboxgl-ctrl-bottom-left {
    left: 10px;
  }
  .campus-map .mapboxgl-ctrl-bottom-left, .campus-map .mapboxgl-ctrl-bottom-right {
    display: flex;
    align-items: flex-end;
  }
  .campus-map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl, .campus-map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
    margin: 0;
  }
  .campus-map .mapboxgl-ctrl-bottom-right {
    right: calc(420px + 20px + 20px + env(safe-area-inset-right, 0px));
  }
}
.campus-map .mapboxgl-ctrl-attrib {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.campus-map .mapboxgl-ctrl-attrib:not(.mapboxgl-compact), .campus-map .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  border-radius: var(--radius-pill);
}
.campus-map .mapboxgl-ctrl-attrib.mapboxgl-compact:not(.mapboxgl-compact-show) {
  background-color: transparent;
}
.campus-map .mapboxgl-ctrl-attrib a {
  color: var(--text-color-secondary);
  font-size: var(--text-70, 0.7rem);
}
@media (hover: hover) {
  .campus-map .mapboxgl-ctrl-attrib a:hover {
    color: var(--text-color-primary);
  }
}
.campus-map .mapboxgl-ctrl-attrib-button {
  position: absolute;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill) !important;
  background: var(--glass-tint) !important;
  background-image: none !important;
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.campus-map .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button {
  display: flex !important;
}
.campus-map .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button {
  top: 50%;
  transform: translateY(-50%);
}
.campus-map .mapboxgl-ctrl-attrib-button::after {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  pointer-events: none;
}
.campus-map .mapboxgl-ctrl-attrib-button .mapboxgl-ctrl-icon .hgi-stroke {
  font-size: 0.85rem;
  line-height: 1;
  color: var(--text-color-secondary);
}
.campus-map .mapboxgl-ctrl-attrib-button:focus {
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.campus-map .mapboxgl-ctrl-attrib-button:focus-visible {
  outline: 2px solid var(--text-color-accent);
  outline-offset: 2px;
}
.campus-map .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
  transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete;
}
.campus-map .mapboxgl-ctrl-attrib.mapboxgl-compact:not(.mapboxgl-compact-show) .mapboxgl-ctrl-attrib-inner {
  opacity: 0;
  transform: translateX(6px);
}
.campus-map .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner {
  opacity: 1;
  transform: translateX(0);
}
@starting-style {
  .campus-map .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner {
    opacity: 0;
    transform: translateX(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .campus-map .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
    transition: none;
  }
}
.campus-map .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group {
  margin: 0 0 0.5rem !important;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.campus-map .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group:last-child {
  margin-bottom: 0 !important;
}
.campus-map .mapboxgl-ctrl-group button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill) !important;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  transition: filter 0.2s ease, scale var(--press-out-dur) var(--ease-spring);
}
.campus-map .mapboxgl-ctrl-group button::after {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  pointer-events: none;
}
@media (hover: hover) {
  .campus-map .mapboxgl-ctrl-compass:hover {
    filter: brightness(1.11) saturate(1.35);
  }
}
.campus-map .mapboxgl-ctrl-compass:active {
  scale: 0.94;
  filter: brightness(1.11) saturate(1.35);
}
.campus-map .mapboxgl-ctrl-group button:not(:disabled):hover {
  background-color: transparent;
}
.campus-map .mapboxgl-ctrl-icon {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: none !important;
}
.campus-map .mapboxgl-ctrl-icon .hgi-stroke {
  font-size: 1.375rem;
  line-height: 1;
  color: var(--text-color-secondary);
}
.campus-map .mapboxgl-ctrl-geolocate-active .hgi-gps-01, .campus-map .mapboxgl-ctrl-geolocate-background .hgi-gps-01 {
  color: var(--color-now);
}
.campus-map .mapboxgl-ctrl-geolocate-active-error .hgi-gps-01, .campus-map .mapboxgl-ctrl-geolocate-background-error .hgi-gps-01, .campus-map .mapboxgl-ctrl-geolocate:disabled .hgi-gps-01 {
  color: var(--color-status-busy);
}
.campus-map .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon::before, .campus-map .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0.7rem;
  height: 0.6rem;
  transform: translateX(-50%);
}
.campus-map .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon::before {
  top: calc(50% - 0.6rem);
  clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
  background: var(--color-status-busy);
}
.campus-map .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon::after {
  top: 50%;
  clip-path: polygon(15% 0%, 85% 0%, 50% 100%);
  background: var(--text-color-secondary);
  opacity: 0.4;
}
.campus-marker {
  --marker-accent: var(--text-color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.4rem 0.7rem 0.4rem 0.55rem;
  border: none;
  border-radius: var(--radius-pill, 999px);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: var(--text-87, 0.875rem);
  line-height: 1;
  color: var(--text-color-primary);
  white-space: nowrap;
  background: var(--glass-tint, rgba(250, 250, 250, 0.7));
  box-shadow: 0 0 0 0.1px var(--glass-outline, rgba(0, 0, 0, 0.25)), 0 4px 16px var(--glass-shadow-color, rgba(0, 0, 0, 0.18));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.campus-marker:active {
  transform: scale(0.94);
}
@media (hover: hover) {
  .campus-marker:hover {
    transform: scale(1.04);
  }
}
.campus-marker__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--marker-accent);
  box-shadow: 0 0 0 3px var(--marker-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marker-accent) 25%, transparent);
  }
}
.campus-marker--building {
  padding: 0.3rem 0.6rem;
  font-weight: 600;
  font-size: var(--text-75, 0.8125rem);
  color: var(--text-color-secondary);
}
.campus-marker--building .campus-marker__dot {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--text-color-secondary);
  box-shadow: none;
}
.campus-map-error {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  font-weight: 600;
  color: var(--text-color-secondary);
}
.campus-sheet-wheel-guard {
  position: absolute;
  inset: 0px;
  z-index: 1;
  pointer-events: none;
}
.campus-sheet-wheel-guard.busy {
  pointer-events: auto;
}
.campus-sheet {
  position: fixed;
  left: var(--campus-sheet-inset, 8px);
  right: var(--campus-sheet-inset, 8px);
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 1;
  height: var(--campus-sheet-size, 192px);
  max-height: 85vh;
  will-change: height;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.campus-sheet-glass {
  position: absolute;
  inset: 0px;
  border-radius: var(--campus-sheet-radius, 28px);
  corner-shape: superellipse;
  background: var(--glass-tint);
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 20px 0 var(--glass-shadow-color);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  transform-origin: bottom;
  transition: filter 0.2s ease, background 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease;
}
.campus-sheet-glass.lg-active {
  filter: brightness(1.11) saturate(1.35);
}
.campus-sheet-glass.is-collapsed {
  background: var(--glass-tint-clear);
  backdrop-filter: blur(var(--glass-blur-clear));
  -webkit-backdrop-filter: blur(var(--glass-blur-clear));
}
.campus-sheet-glass::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.campus-sheet-clip {
  position: absolute;
  inset: 0px;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
}
.campus-sheet-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0 1.5rem;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}
.campus-sheet-grabber {
  width: 36px;
  height: 5px;
  border-radius: var(--radius-pill, 999px);
  background: var(--glass-outline);
  opacity: 0.6;
}
.campus-sheet-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: calc(1rem + 5px) 1.25rem 1rem;
}
.campus-sheet-content {
  --csheet-fade-bottom: 5.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: hidden;
  touch-action: none;
  padding: var(--campus-sheet-header-height, 4.75rem) 1.25rem max(var(--csheet-fade-bottom), calc(var(--bn-tabbar-height, 76px) + 1.5rem));
  -webkit-mask-image: linear-gradient( to bottom, transparent 0, transparent calc(var(--campus-sheet-header-height, 4.75rem) - 4rem), #fff var(--campus-sheet-header-height, 4.75rem), #fff calc(100% - var(--csheet-fade-bottom)), transparent 100% );
  mask-image: linear-gradient( to bottom, transparent 0, transparent calc(var(--campus-sheet-header-height, 4.75rem) - 4rem), #fff var(--campus-sheet-header-height, 4.75rem), #fff calc(100% - var(--csheet-fade-bottom)), transparent 100% );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.campus-sheet-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0 0.5rem;
}
.campus-sheet-leftgroup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.campus-sheet-titlebox {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  text-align: start;
}
.campus-sheet-title {
  margin: 0;
  font-size: var(--text-150);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-color-primary);
}
.campus-sheet-subtitle {
  font-size: var(--text-80);
}
.campus-sheet-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.campus-sheet-recenter, .campus-sheet-backbtn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--text-color-secondary);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
}
.campus-sheet-recenter.liquid-glass, .campus-sheet-backbtn.liquid-glass {
  transition: opacity 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), display 0.32s allow-discrete, translate var(--press-out-dur) var(--ease-spring), scale var(--press-out-dur) var(--ease-spring), filter 0.2s ease;
}
.campus-sheet-recenter::after, .campus-sheet-backbtn::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  mask-image: radial-gradient( circle closest-side, transparent calc(100% - 0.5px), #fff calc(100% - 0.5px) );
  pointer-events: none;
}
.campus-sheet-recenter .hgi-stroke, .campus-sheet-backbtn .hgi-stroke {
  font-size: 1.25rem;
}
.campus-sheet-recenter.liquid-glass[hidden], .campus-sheet-backbtn.liquid-glass[hidden] {
  display: none;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, display 0.2s allow-discrete;
}
@starting-style {
  .campus-sheet-recenter:not([hidden]), .campus-sheet-backbtn:not([hidden]) {
    opacity: 0;
    transform: scale(0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .campus-sheet-recenter.liquid-glass, .campus-sheet-recenter.liquid-glass[hidden], .campus-sheet-backbtn.liquid-glass, .campus-sheet-backbtn.liquid-glass[hidden] {
    transition: none;
  }
}
@media (max-width: 599.98px) {
  .campus-sheet[data-detent="full"] .campus-sheet-recenter {
    display: none;
  }
}
.campus-sheet-pageswap {
  position: relative;
}
.campus-sheet-pageswap.csp-animating {
  overflow: hidden;
}
.campus-sheet-page.csp-fade-out {
  animation: csp-fade-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.campus-sheet-page.csp-fade-in {
  animation: csp-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes csp-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes csp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .campus-sheet-page.csp-fade-out, .campus-sheet-page.csp-fade-in {
    animation: none;
  }
}
.campus-sheet-grid {
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.campus-sheet-card {
  min-height: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.campus-sheet-card-address {
  font-size: var(--text-80);
}
.campus-sheet-classroom-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.75rem;
}
@media (min-width: 600px) {
  .campus-sheet {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 420px;
    height: var(--campus-sheet-size, 96px);
    max-height: calc(100dvh - var(--header-height, 84px) - 2rem - 40px);
  }
  .campus-sheet-glass {
    border-radius: 28px;
    box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  }
  .campus-sheet-content {
    padding: var(--campus-sheet-header-height, 4.75rem) 1.25rem var(--csheet-fade-bottom);
  }
}
.favourites-section {
  margin-bottom: 1.25rem;
}
.favourites-carousel {
  --fade-left: 1rem;
  --fade-right: 1rem;
  --mask-left: var(--fade-left);
  --mask-right: var(--fade-right);
  --shadow-room: 3rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  margin-top: calc(0.75rem - var(--shadow-room));
  margin-bottom: calc(-1 * var(--shadow-room));
  margin-left: calc(-1 * var(--fade-left));
  margin-right: calc(-1 * var(--fade-right));
  padding-block: var(--shadow-room);
  padding-left: var(--fade-left);
  padding-right: var(--fade-right);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient( to right, transparent, #000 var(--mask-left), #000 calc(100% - var(--mask-right)), transparent );
  mask-image: linear-gradient( to right, transparent, #000 var(--mask-left), #000 calc(100% - var(--mask-right)), transparent );
}
.favourites-carousel::-webkit-scrollbar {
  display: none;
}
.favourites-carousel > .classroom-card {
  scroll-snap-align: center;
  flex: 0 0 clamp(9.5rem, 42vw, 11rem);
  height: auto;
  content-visibility: visible;
  contain-intrinsic-size: auto;
}
.favourites-empty {
  margin: 0.5rem 0 0;
  font-size: var(--text-90, 0.9rem);
}
@media (min-width: 600px) {
  .favourites-carousel {
    --fade-left: calc(20px + var(--side-nav-width, 88px) + 1.5rem);
    --fade-right: 1.5rem;
    --mask-left: 1.5rem;
    --mask-right: 1.5rem;
    margin-right: 0;
  }
  .favourites-carousel > .classroom-card {
    flex-basis: 10.5rem;
  }
}
.liquid-glass {
  translate: 0 0;
  scale: 1;
  transition: translate var(--press-out-dur) var(--ease-spring), scale var(--press-out-dur) var(--ease-spring), filter 0.2s ease;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.liquid-glass.lg-pressing, .liquid-glass.lg-dragging, .liquid-glass.lg-settling {
  z-index: 9999;
}
.liquid-glass.lg-pressing {
  transition: translate var(--press-in-dur) var(--press-in-ease), scale var(--press-in-dur) var(--press-in-ease), filter 0.2s ease;
}
.liquid-glass.lg-dragging {
  transition: translate 0s, scale 0s, filter 0.2s ease;
}
@media (hover: hover) {
  .liquid-glass:not(.popover):hover {
    scale: 1.045;
  }
}
.liquid-glass.lg-pressing, .liquid-glass.lg-dragging {
  filter: brightness(1.11) saturate(1.35);
}
@media (prefers-reduced-motion: reduce) {
  .liquid-glass:hover {
    scale: 1;
  }
}
.popover.liquid-glass {
  transition: opacity 120ms ease-out, transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1), translate var(--press-out-dur) var(--ease-spring), scale var(--press-out-dur) var(--ease-spring), filter 0.2s ease;
}
.popover.liquid-glass.lg-pressing {
  transition: opacity 120ms ease-out, transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1), translate var(--press-in-dur) var(--press-in-ease), scale var(--press-in-dur) var(--press-in-ease), filter 0.2s ease;
}
.popover.liquid-glass.lg-dragging {
  transition: opacity 120ms ease-out, transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1), translate 0s, scale 0s, filter 0.2s ease;
}
.kb-help-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.kb-help-backdrop[hidden] {
  display: none;
}
.kb-help-backdrop.visible {
  opacity: 1;
}
.kb-help-panel {
  position: relative;
  width: min(380px, 100%);
  padding: 24px;
  border-radius: var(--radius-xl);
  color: var(--text-color-primary);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  box-shadow: 0 0 0 0.1px var(--glass-outline), var(--glass-highlight), 0 4px 40px 0 var(--glass-shadow-color);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}
.kb-help-panel::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .kb-help-panel {
    background: var(--background-color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
    }
  }
}
.kb-help-backdrop.visible .kb-help-panel {
  transform: none;
}
.kb-help-title {
  margin: 0 0 16px;
  font-size: 1.1rem;
  font-weight: 700;
}
.kb-help-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  align-items: center;
}
.kb-help-list dt {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.kb-help-list dd {
  margin: 0;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}
.kb-help-list kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-shadow-color, rgba(0, 0, 0, 0.15));
  border-bottom-width: 2px;
  background: var(--background-color);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 599px) {
  .kb-help-backdrop {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kb-help-backdrop, .kb-help-panel {
    transition: none;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}
/*$vite$:1*/