:root {
  --md-primary: #3178c6;
  --md-on-primary: #ffffff;
  --md-primary-shadow: rgba(49, 120, 198, 0.3);
  --md-surface: #eef1f6;
  --md-surface-card: #ffffff;
  --md-surface-inactive: #f5f7fa;
  --md-surface-editor: #1b1b1f;
  --md-on-surface: #1a1c1e;
  --md-on-surface-secondary: #5f6368;
  --md-on-surface-tertiary: #80868b;
  --md-outline: #dadce0;
  --md-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --md-elevation-2: 0 1px 3px rgba(0, 0, 0, 0.08);
  --md-elevation-active:
    0 2px 8px var(--md-primary-shadow),
    0 1px 3px rgba(49, 120, 198, 0.2);
  --md-elevation-button:
    0 1px 3px var(--md-primary-shadow),
    0 1px 2px rgba(0, 0, 0, 0.06);
  --md-radius-container: 16px;
  --md-radius-item: 12px;
  --md-radius-button: 20px;
  --md-font-family: "Google Sans", "Roboto", system-ui, sans-serif;
  --md-font-mono: "Roboto Mono", "Fira Code", monospace;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--md-font-family);
  background: var(--md-surface);
  color: var(--md-on-surface);
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}