diff --git a/styles.css b/styles.css
index cbbf178..a13bab5 100644
--- a/styles.css
+++ b/styles.css
@@ -480,6 +480,65 @@ textarea:focus {
   left: 1rem;
   width: 1.1rem;
   height: 1.1rem;
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--panel-border-strong);
+  background: #0c0c0c;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.option-card input[type="radio"] {
+  border-radius: 999px;
+}
+
+.option-card input[type="checkbox"] {
+  border-radius: 0.35rem;
+}
+
+.option-card input::before {
+  content: "";
+  display: block;
+  transition: transform 160ms ease;
+  transform: scale(0);
+}
+
+.option-card input:checked {
+  border-color: rgba(52, 141, 255, 0.55);
+  background: rgba(17, 103, 255, 0.12);
+}
+
+.option-card input[type="radio"]::before {
+  width: 0.52rem;
+  height: 0.52rem;
+  border-radius: 999px;
+  background: var(--cool);
+}
+
+.option-card input[type="checkbox"]::before {
+  width: 0.6rem;
+  height: 0.32rem;
+  margin-top: -0.04rem;
+  border-left: 2px solid var(--cool);
+  border-bottom: 2px solid var(--cool);
+  transform: rotate(-45deg) scale(0);
+  transform-origin: center;
+}
+
+.option-card input:checked::before {
+  transform: scale(1);
+}
+
+.option-card input[type="checkbox"]:checked::before {
+  transform: rotate(-45deg) scale(1);
+}
+
+.option-card:has(input:focus-visible) {
+  outline: 2px solid rgba(52, 141, 255, 0.45);
+  outline-offset: 2px;
 }
 
 .option-card:has(input:checked) {