Add editable countdown timer with deadline-based timing

Co-authored-by: Shelley <shelley@exe.dev>

site/countdown/style.css

@@ -0,0 +1,101 @@
+body {
+    min-height: 100vh;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Keep the counter vertically centered in the viewport, below the header. */
+header {
+    position: absolute;
+    top: 0;
+}
+
+main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: 10rem;
+}
+
+.timer {
+    text-align: center;
+    min-width: 0;
+    max-width: 100%;
+    margin: 0;
+}
+
+.counter {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    max-width: 100%;
+    overflow-x: auto;
+    font-family: var(--pico-font-family-monospace);
+    font-size: clamp(3rem, 12vw, 6rem);
+    line-height: 1.2;
+    margin-bottom: 1.5rem;
+}
+
+.counter input {
+    box-sizing: content-box;
+    flex: 0 0 auto;
+    width: 1ch;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    text-align: right;
+}
+
+.counter #seconds {
+    width: 2ch;
+    text-align: left;
+}
+
+.counter input:focus {
+    background: transparent;
+    box-shadow: none;
+}
+
+.counter input:focus-visible:not([readonly]) {
+    outline: 2px solid var(--pico-primary);
+    outline-offset: 4px;
+}
+
+.controls {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.controls button {
+    margin: 0;
+    min-width: 6rem;
+}
+
+.counter.finished {
+    animation: flash 1s steps(1, end) infinite;
+}
+
+@keyframes flash {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}