add: cleaner ui, prior view check, audio element, rendering fixes

app/public/style.css

@@ -14,6 +14,8 @@
     --color-green: hsl(100, 84%, 20%);
     --color-yellow: oklch(47% 0.157 37.304);
     --color-purple: hsl(284, 84%, 20%);
+    --color-green-lowered: hsl(100, 84%, 15%);
+    --color-red-lowered: hsl(0, 84%, 35%);
 
     --shadow-x-offset: 0;
     --shadow-y-offset: 0.125rem;
@@ -207,6 +209,11 @@ video {
     appearance: none;
 }
 
+.button:disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+}
+
 .button.small {
     --h: 28px;
 }
@@ -243,6 +250,24 @@ video {
     background: var(--color-super-raised);
 }
 
+.button.green:not(.dark *) {
+    background: var(--color-green);
+    color: white !important;
+
+    &:hover {
+        background: var(--color-green-lowered) !important;
+    }
+}
+
+.button.red:not(.dark *) {
+    background: var(--color-red);
+    color: white !important;
+
+    &:hover {
+        background: var(--color-red-lowered) !important;
+    }
+}
+
 /* dropdown */
 .dropdown {
     position: relative;
@@ -272,9 +297,8 @@ video {
 }
 
 .dropdown .inner .title {
-    font-weight: 500;
-    border-top: solid 1px var(--color-super-lowered);
-    margin-top: var(--pad-2);
+    font-weight: 600;
+    font-size: 14px;
 }
 
 .dropdown:has(.inner.open) .button:nth-child(1):not(.inner *) {
@@ -710,6 +734,23 @@ span {
     }
 }
 
+.loader {
+    animation: spin linear infinite 2s forwards running;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes spin {
+    from {
+        transform: rotateZ(0deg);
+    }
+
+    to {
+        transform: rotateZ(360deg);
+    }
+}
+
 .items-end {
     align-items: flex-end;
 }
@@ -753,3 +794,32 @@ details .content {
     padding: var(--pad-4);
     background: var(--color-surface);
 }
+
+/* dialog */
+dialog {
+    background: var(--color-surface);
+    color: var(--color-text);
+    box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
+        var(--color-shadow);
+    animation: fadein ease-in-out 1 0.25s forwards running;
+    max-width: 95%;
+    width: 30rem;
+    margin: auto;
+    padding: var(--pad-4);
+    border: 0;
+}
+
+dialog.inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pad-2);
+}
+
+dialog::backdrop {
+    background: hsla(0, 0%, 0%, 25%);
+    backdrop-filter: blur(2px);
+}
+
+dialog:is(.dark *)::backdrop {
+    background: hsla(0, 0%, 100%, 15%);
+}