Clock

@grid: 4x1 / 50vmin ^.8; 

:container {
  border-radius: 50%;
  border: 1cqmin solid #000;
  outline: 1.8cqmin solid;
  outline-offset: 2px;
  background-color: #fdfff7; 
  background-image:
    @doodle(
      @grid: 12x1;
      @content: @I(- @i(-1));
      @place: @plot(r: .8; dir: -90; rotate: -90;);
      font-size: 12cqmin;
      font-family: sans-serif;
      font-weight: bold;
    ),
    @doodle(
      @grid: 60x1;
      background: #000;
      @size: @pn(6cqmin, @m4(3cqmin)) @pn(.6cqmin, @m4(.3cqmin));
      @place: @plot(r: 1;);
    );
}

@place: center;
clip-path: polygon(50% -50%, 100% 65%, 0 65%);
background: #000;

@nth(3) {
  @size: .5cqmin 90%;
  background: red;
  rotate: round(down, @TS(*6, %360deg), 6deg);
}
@nth(2) {
  @size: .8cqmin 70%;
  rotate: @TS(/60, *6, %360deg);
}
@nth(1) {
  @size: 1.8cqmin 50%;
  rotate: @TS(/60, /12, *6, %360deg);
}
@nth(4) {
  @size: 2cqmin; 
  border-radius: 50%;
  clip-path: none;
  background: red;
}