:root {
  --ink:       #111111;
  --bg:        #F5F5F2;
  --lg:        #D9D6D4;
  --mg:        #A7A8A6;
  --sg:        #686662;
  --white:     #ffffff;
  --terra:     #9B5429;
  --terra-bg:  #F5EDE6;
  --dteal:     #073942;
  --green:     #2D6A4F;
  --green-bg:  #EAF4EF;
  --amber:     #7D5A00;
  --amber-bg:  #FDF3DC;
  --red:       #8B2020;
  --red-bg:    #FCECEA;
  --pill:      999px;
  --r:         8px;
  --font:      'Gerstner Programm', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pip-active: #C0392B;
  --bottom-panel-height: 0px;
  --keyboard-offset: 0px;
  --intro-logo-size: clamp(84px, 12vw, 124px);
  --intro-logo-offset: clamp(-128px, -14vh, -84px);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}