:root { color-scheme: light dark; }

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Bricolage Grotesque', sans-serif;
  margin: 0;
}

.tf-title { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; }
.tf-mono { font-family: 'JetBrains Mono', monospace; }

/* atmospheric backgrounds */
.tf-bg {
  background-color: #f6f7f5;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(20,184,166,0.10), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(59,130,246,0.08), transparent 45%);
}
.dark .tf-bg {
  background-color: #0b1120;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(20,184,166,0.14), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(59,130,246,0.12), transparent 45%);
}

/* entrance animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .5s cubic-bezier(.2,.7,.3,1) both; }

@keyframes taskIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.task-in { animation: taskIn .25s ease both; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-in { animation: toastIn .3s cubic-bezier(.2,.9,.3,1) both; }

/* confetti */
.confetti-piece {
  position: fixed;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 60;
  animation: confettiFly .9s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes confettiFly {
  0%   { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* datetime-local dark styling */
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

input:focus { outline: none; }
</parameter>
</invoke>

Wait, I have a stray closing tag. Let me correct the final file.

======BEGIN styles.css======
:root { color-scheme: light dark; }

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Bricolage Grotesque', sans-serif;
  margin: 0;
}

.tf-title { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; }
.tf-mono { font-family: 'JetBrains Mono', monospace; }

.tf-bg {
  background-color: #f6f7f5;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(20,184,166,0.10), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(59,130,246,0.08), transparent 45%);
}
.dark .tf-bg {
  background-color: #0b1120;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(20,184,166,0.14), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(59,130,246,0.12), transparent 45%);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .5s cubic-bezier(.2,.7,.3,1) both; }

@keyframes taskIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.task-in { animation: taskIn .25s ease both; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-in { animation: toastIn .3s cubic-bezier(.2,.9,.3,1) both; }

.confetti-piece {
  position: fixed;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 60;
  animation: confettiFly .9s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes confettiFly {
  0%   { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

input:focus { outline: none; }