:root {
  color-scheme: dark;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --md-primary: #ffdf8a;
  --md-primary-hover: #ffebac;
  --md-on-primary: #311f20;
  --md-primary-container: #724447;
  --md-on-primary-container: #fff4e8;
  --md-secondary-container: #5c373c;
  --md-on-secondary-container: #fff4e8;
  --md-surface: #352125;
  --md-surface-lowest: #463033;
  --md-surface-low: #3e292d;
  --md-surface-container-low: #42292d;
  --md-surface-container: #4e3337;
  --md-surface-container-high: #573a3e;
  --md-surface-container-highest: #67464a;
  --md-on-surface: #fff4e8;
  --md-on-surface-variant: #e0c2ba;
  --md-outline: #b98e86;
  --md-outline-variant: #735052;
  --md-state-hover: rgb(255 202 176 / .09);
  --md-elevation-1: 0 3px 8px rgb(0 0 0 / .44);
  --md-elevation-2: 0 11px 26px rgb(0 0 0 / .57);
}

#app, #practice-app {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 8px;
  min-block-size: 48px;
  color: var(--md-on-surface);
  font-size: clamp(15px, 3.8vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-decoration: none;
  white-space: nowrap;
}
.site-brand:hover { color: var(--md-primary); }
.site-brand img { display: block; flex: none; inline-size: 1.8em; block-size: 1.8em; }
.site-footer {
  margin-block-start: auto;
  padding-block: 12px calc(12px + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--md-outline-variant);
}
.site-credit { margin: 0; color: var(--muted, #e0c2ba); font-size: 14px; text-align: center; }
.site-heart { color: #ff969e; }
.site-copyright { white-space: nowrap; }

.m3-icon {
  font: 400 24px/1 "Material Symbols Outlined";
  font-feature-settings: "liga";
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex: none;
  white-space: nowrap;
  direction: ltr;
  letter-spacing: normal;
}

.site-disclosure {
  min-width: 0;
  border-radius: 14px;
  background: var(--md-surface-container-low);
  box-shadow: var(--md-elevation-1);
}
.site-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 48px;
  padding: .65rem 1rem;
  border-radius: inherit;
  color: var(--md-on-surface);
  font-weight: 650;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.site-disclosure > summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .site-disclosure > summary:hover { background: var(--md-state-hover); }
}
.site-disclosure > summary .m3-icon { color: var(--md-primary); font-size: 1.25rem; }
.site-disclosure[open] > summary .m3-icon { transform: rotate(180deg); }
.disclosure-body {
  margin-inline: 1rem;
  padding-block: .75rem 1rem;
  border-block-start: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  line-height: 1.55;
}
.disclosure-body ul { margin: 0; padding-inline-start: 1.1em; }
.disclosure-body li + li { margin-block-start: .45rem; }

:is(.formula-ink, .math-display, .math-inline) .katex,
:is(.formula-ink, .math-display, .math-inline) .katex :is(.mathnormal, .mathrm, .text) {
  font-family: Kalam, KaTeX_Main, Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
}