Detect and offer platform-specific bridge download

docs/index.css

@@ -1,6 +1,6 @@
 
 :root.theme-light {
-    --page-color: white;
+    --page-color: var(--white-100);
     --text-color-primary: var(--grey-90);
     --text-color-secondary: var(--grey-50);
 }
@@ -41,14 +41,14 @@ body {
 
 body {
     display: flex;
-    margin: initial;
+    margin: initial;`
 }
 
 .container {
-    align-items: center;
     display: grid;
     font-size: 13px;
     margin: auto;
+    margin-top: 10vh;
     min-width: 480px;
     grid-row-gap: 2rem;
     grid-template-areas:
@@ -57,33 +57,27 @@ body {
         "download preview"
         "footer preview";
     grid-template-columns: min-content min-content;
-    grid-template-rows: min-content min-content min-content min-content;
+    grid-template-rows: min-content min-content 1fr min-content;
     overflow-x: hidden;
     padding: 2rem 6rem;
 }
 
-.main {
-    display: contents;
-}
-
-.main-header {
+.site-header {
     align-self: flex-end;
     align-items: flex-end;
     display: flex;
     flex-direction: column;
     grid-area: header;
     justify-content: flex-end;
-}
-.main-content {
-    display: contents;
+    margin-top: 5rem;
 }
 
-.main-title {
+.site-header__title {
     font-size: 5rem;
     font-weight: 400;
     margin-bottom: 0.5rem;
 }
-.main-subtitle {
+.site-header__subtitle {
     background-color: var(--text-color-secondary);
     color: var(--page-color);
     font-size: 2.75rem;
@@ -91,6 +85,10 @@ body {
     margin-right: -1rem;
 }
 
+.site-content {
+    display: contents;
+}
+
 .description {
     font-size: 1.75rem;
     grid-area: description;
@@ -98,11 +96,11 @@ body {
     text-align: right;
     width: 45ch;
 }
-.discription__disclaimer {
+.description__disclaimer {
     color: var(--text-color-secondary);
     font-size: 0.8em;
 }
-.discription__prerelease {
+.description__prerelease {
     color: var(--red-50);
     font-size: 0.8em;
     font-weight: bolder;
@@ -117,34 +115,48 @@ body {
     align-items: flex-end;
     display: flex;
     flex-direction: column;
-    font-size: 2rem;
     grid-area: download;
+    margin-top: 1rem;
     position: relative;
 }
 
 .download__ext,
-.download__app .app-list__app {
-    font-size: 0.85em;
+.download__app {
+    font-size: 1.75rem;
+    margin-bottom: 0.5em;
+}
+
+.download__app-other {
+    margin-top: 1em;
+}
+
+.download__app-other > summary {
+    cursor: pointer;
+    text-align: right;
+    margin-bottom: 0.5rem;
 }
 
 .app-list {
-    align-items: center;
-    column-gap: 1rem;
-    display: grid;
-    grid-template-columns: min-content min-content min-content min-content;
-    grid-template-rows: min-content min-content;
-    margin-top: 1rem;
-    row-gap: 0.5rem;
+    align-items: flex-start;
+    display: flex;
 }
 
+.app-list > *:not(:first-child) {
+    margin-left: 1rem;
+}
+
+.app-list__platform {
+    display: flex;
+    flex-direction: column;
+}
+
+
 .app-list__app {
     cursor: pointer;
-    
 }
 
-.app-list__label {
-    color: var(--text-color-secondary);
-    font-size: 1.75rem;
+.app-list__platform > .app-list__app + .app-list__app {
+    margin-top: 0.5rem;
 }
 
 .app-list__app-label {
@@ -156,7 +168,7 @@ body {
 }
 
 .app-list__rpm {
-    grid-column-start: 4;
+    grid-column-start: 3;
 }
 
 
@@ -182,8 +194,9 @@ body {
     align-self: flex-start;
     grid-row-start: 2;
     margin-left: -60px;
-    width: 462px;
     position: relative;
+    top: calc(-30px + 1rem);
+    width: 462px;
 }
 
 .footer {