index.styl

lightMode()
  --background: white
  --foreground: black
  --gray: #666
darkMode()
  --background: black
  --foreground: white
  --gray: #999
:root
  &.dark
    darkMode()
  &.light
    lightMode()
@media (prefers-color-scheme: light)
  :root
    lightMode()
@media (prefers-color-scheme: dark)
  :root
    darkMode()

body
  font-family: 'Roboto', sans-serif
  margin: 0px
  display: flex
  flex-direction: column
  background-color: var(--background)
  color: var(--foreground)
svg
  margin: 10px
  flex-grow: 1
.change
  cursor: pointer
  user-select: none
  fill: var(--background)
  /* debugging targets
    fill: #400
    stroke: #f00
  */
text
  pointer-events: none
  text-anchor: middle
  font-size: 30px
  font-weight: 900
  fill: var(--gray)
  /.started &
    fill: var(--foreground)
text.overtime
  font-size: 8px

.overtime
  display: none
.negative
  .overtime
    display: block
  text
    fill: Crimson

.help
  font-size: 14px
  display: fixed
  bottom: 0px
  padding: 3px 10px
  text-align: center
  background-color: #333
  color: white
  a, a:visited
    color: #ddd
kbd
  background: #666
  padding: 0px 4px
  &:not(.button)
    pointer-events: none
.button
  cursor: pointer
  user-select: none
  &:hover
    background-color: SlateBlue
    kbd
      background-color: DarkViolet
.big
  padding: 0.5rem
  margin-bottom: 0.25rem
  > span
    margin-left: 0.5rem
    font-weight: bold
    font-size: 32px
    vertical-align: -4px
    pointer-events: none
kbd.button:hover
  background-color: DarkViolet
.tip
  display: inline-block
.tip + .tip
  margin-left: 2em