Apply supplied SVG branding and polish device settings

apps/web/src/style.css

@@ -116,17 +116,14 @@ button:active:not(:disabled) {
   border-bottom: 1px solid var(--line);
 }
 .wordmark {
-  font-size: 43px;
-  font-weight: 750;
-  letter-spacing: -3.5px;
+  display: block;
+  width: 64px;
+  height: 32px;
   border: 0;
   background: none;
   padding: 0;
   line-height: 1;
 }
-.wordmark span {
-  color: var(--brand);
-}
 .desktop-nav {
   display: flex;
   gap: 34px;
@@ -1257,9 +1254,6 @@ h1 span {
     height: 80px;
     gap: 0;
   }
-  .wordmark {
-    font-size: 37px;
-  }
   .desktop-nav {
     display: none;
   }
@@ -2893,9 +2887,6 @@ a.button {
 .site-header {
   gap: 18px;
 }
-.site-header .wordmark {
-  font-size: 32px;
-}
 .header-brand {
   display: flex;
   align-items: flex-end;
@@ -3035,7 +3026,8 @@ a.button {
     gap: 10px;
   }
   .site-header .wordmark {
-    font-size: 28px;
+    width: 56px;
+    height: 28px;
   }
   .device-footer {
     align-items: flex-start;
@@ -3447,8 +3439,9 @@ a.button {
   font-size: 13px;
 }
 .service-brand {
-  font-size: 30px;
-  letter-spacing: -0.07em;
+  display: block;
+  width: 64px;
+  height: 32px;
 }
 .service-info p {
   margin: 0;
@@ -3500,3 +3493,48 @@ a.button {
   color: var(--muted);
   font-size: 12px;
 }
+
+.brand-logo {
+  display: block;
+  color: var(--ink);
+}
+.wordmark .brand-logo {
+  width: 100%;
+  height: 100%;
+}
+.brand-logo svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.modal .device-settings-form {
+  height: auto;
+  align-items: flex-end;
+}
+.modal .device-settings-form input,
+.modal .device-settings-form .button {
+  height: 44px;
+  min-height: 44px;
+  border-radius: 12px;
+  padding: 8px 12px;
+}
+.modal .device-settings-form .button {
+  min-width: 72px;
+}
+.modal .device-settings-form input:focus-visible {
+  outline-offset: -2px;
+}
+.modal .discovery-setting {
+  border: 0;
+  padding-bottom: 0;
+}
+.modal .discovery-setting input {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+@media (max-width: 639px) {
+  .modal .device-settings-form {
+    align-items: stretch;
+  }
+}