:root {
  --bg: #fff;
  --bg-1: rgba(255,255,255,0.067);
  --bg-4: rgba(255,255,255,0.267);
  --color: #000;
  --color-c: rgba(0,0,0,0.8);
  --color-4: rgba(0,0,0,0.267);
  --color-1: rgba(0,0,0,0.067);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --bg-1: rgba(0,0,0,0.067);
    --bg-4: rgba(0,0,0,0.267);
    --color: #fff;
    --color-c: rgba(255,255,255,0.8);
    --color-4: rgba(255,255,255,0.267);
    --color-1: rgba(255,255,255,0.067);
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 32px;
  background: var(--bg);
  color: var(--color);
  user-select: none;
}
h1,
h2 {
  margin: 0;
  font-weight: 100;
  font-size: 64px;
}
h2 {
  font-size: 32px;
}
a {
  color: var(--color-c);
  text-decoration: none;
}
a:hover {
  color: var(--color);
}
@font-face {
  font-family: 'Ubuntu Mono';
  src: url("./UbuntuMono-Regular.ttf");
}
body {
  overflow: hidden;
  margin: 0;
  width: 100vw;
  height: 100vh;
  line-height: 1;
  transition: 0.1s filter;
  --time-size: 64px;
}
.invert {
  filter: invert(1);
}
input {
  padding: 8px 12px;
  outline: 0;
  border: 1px solid var(--color-c);
  border-radius: 4px;
  background: none;
  color: var(--color);
  transition: 0.1s background, 0.1s border-color;
}
input:hover {
  background: var(--color-1);
}
input:focus {
  border-color: var(--color);
  background: var(--color-1);
}
button {
  all: unset;
  flex: 1;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--color-c);
  border-radius: 8px;
  text-align: center;
  white-space: nowrap;
  transition: 0.1s scale, 0.1s background;
}
button:hover {
  background: var(--color-4);
}
button:hover:active {
  scale: 0.98;
}
.action-toggle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.actions {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  pointer-events: none;
}
.action {
  padding: 16px;
  color: var(--color-c);
  transition: 0.3s translate cubic-bezier(0.5, 0, 0, 1.6), 0.1s color, 0.1s scale;
  translate: 0 -48px;
}
.action:hover {
  color: var(--color);
}
.action:hover:active {
  scale: 0.9;
}
.action:nth-child(1) {
  transition-delay: 0.1s, 0s, 0s;
}
.action:nth-child(2) {
  transition-delay: 0.05s, 0s, 0s;
}
.actions-show {
  pointer-events: all;
}
.actions-show .action {
  translate: 0 0;
}
.panel {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 64px;
  width: 100vw;
  height: 100vh;
  background: var(--bg-4);
  opacity: 0;
  transition: 0.1s opacity;
  pointer-events: none;
  backdrop-filter: blur(10px);
  gap: 8px;
}
.panel>button {
  flex: 0;
}
.panel-show {
  opacity: 1;
  pointer-events: all;
}
.panel-ops {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  gap: 8px;
}
.clock {
  position: fixed;
  top: 50%;
  left: 50%;
  display: grid;
  translate: -50% -50%;
  grid-template-areas: 'time target' 'time duration' 'line line';
  gap: 8px;
}
.time {
  display: flex;
  font-size: var(--time-size);
  font-family: 'Ubuntu Mono';
  grid-area: time;
}
.time-digit {
  position: relative;
  overflow: hidden;
  width: calc((var(--time-size) / 2));
  height: var(--time-size);
}
.time-digit[num='1'] .time-num {
  translate: 0 calc(-1 * var(--time-size));
}
.time-digit[num='2'] .time-num {
  translate: 0 calc(-2 * var(--time-size));
}
.time-digit[num='3'] .time-num {
  translate: 0 calc(-3 * var(--time-size));
}
.time-digit[num='4'] .time-num {
  translate: 0 calc(-4 * var(--time-size));
}
.time-digit[num='5'] .time-num {
  translate: 0 calc(-5 * var(--time-size));
}
.time-digit[num='6'] .time-num {
  translate: 0 calc(-6 * var(--time-size));
}
.time-digit[num='7'] .time-num {
  translate: 0 calc(-7 * var(--time-size));
}
.time-digit[num='8'] .time-num {
  translate: 0 calc(-8 * var(--time-size));
}
.time-digit[num='9'] .time-num {
  translate: 0 calc(-9 * var(--time-size));
}
.time-num {
  position: relative;
  transition: 0.5s translate cubic-bezier(1, 0, 0, 1);
  translate: 0 0;
}
.time-colon {
  animation: time-colon 1s linear infinite alternate;
}
.line {
  position: relative;
  width: calc(var(--time-size) * 5.5);
  height: 8px;
  background: linear-gradient(45deg, var(--color) 25%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 50%, var(--color) 0, var(--color) 75%, rgba(0,0,0,0) 0);
  background-size: 16px 16px;
  animation: line-bg 1s linear infinite;
  grid-area: line;
}
.line:before {
  position: absolute;
  display: block;
  width: var(--prog);
  height: 100%;
  background: var(--color);
  content: '';
  opacity: 0;
  transition: 1s opacity;
}
.line-active {
  outline: 1px solid var(--color-1);
  background: none;
}
.line-active:before {
  opacity: 1;
}
.timer-target,
.timer-duration {
  text-align: right;
  font-size: calc((var(--time-size) * 2 / 5));
  font-family: 'Ubuntu Mono';
  animation: time-colon 1s linear infinite alternate;
}
.timer-target {
  grid-area: target;
  translate: 0 calc((var(--time-size) / 6));
}
.timer-duration {
  animation-delay: 0.3s;
  grid-area: duration;
}
@-moz-keyframes time-colon {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.7;
  }
}
@-webkit-keyframes time-colon {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.7;
  }
}
@-o-keyframes time-colon {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes time-colon {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.7;
  }
}
@-moz-keyframes line-bg {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0 16px;
  }
}
@-webkit-keyframes line-bg {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0 16px;
  }
}
@-o-keyframes line-bg {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0 16px;
  }
}
@keyframes line-bg {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0 16px;
  }
}