From 419d32286aa5712c88bb61e382ae484442e15973 Mon Sep 17 00:00:00 2001
From: firestar5683 <168790843+firestar5683@users.noreply.github.com>
Date: Wed, 11 Nov 2026 00:05:54 -0600
Subject: [PATCH] Split guided setup styles below the source size limit

---
 .../tests/browser/developer-settings.cjs      |  2 +-
 .../galaxy/tests/browser/layout-scenes.cjs    |  2 +-
 .../tests/browser/navigation-compact.cjs      |  4 +-
 .../tests/browser/navigation-preferences.cjs  |  2 +-
 .../galaxy/tests/browser/settings-state.cjs   |  2 +-
 .../galaxy/tests/browser/widget-layers.cjs    |  2 +-
 openpilot/starpilot/galaxy/web/css/galaxy.css | 58 -------------------
 openpilot/starpilot/galaxy/web/css/setup.css  | 58 +++++++++++++++++++
 openpilot/starpilot/galaxy/web/index.html     |  1 +
 prebuilt.json                                 |  2 +-
 10 files changed, 67 insertions(+), 66 deletions(-)
 create mode 100644 openpilot/starpilot/galaxy/web/css/setup.css

diff --git a/openpilot/starpilot/galaxy/tests/browser/developer-settings.cjs b/openpilot/starpilot/galaxy/tests/browser/developer-settings.cjs
index c7208200ea..7946619664 100644
--- a/openpilot/starpilot/galaxy/tests/browser/developer-settings.cjs
+++ b/openpilot/starpilot/galaxy/tests/browser/developer-settings.cjs
@@ -10,7 +10,7 @@ const assert = require('node:assert/strict')
     let enabled = false, parked = true
     page.on('pageerror', error => errors.push(error.message))
     await page.route('**/developer-settings-test', route => route.fulfill({ contentType: 'text/html', body:
-      '<link rel="stylesheet" href="css/galaxy.css"><link rel="stylesheet" href="css/settings.css"><div id="test"></div>' }))
+      '<link rel="stylesheet" href="css/galaxy.css"><link rel="stylesheet" href="css/setup.css"><link rel="stylesheet" href="css/settings.css"><div id="test"></div>' }))
     await page.route('**/api/**', route => {
       const path = new URL(route.request().url()).pathname
       let data
diff --git a/openpilot/starpilot/galaxy/tests/browser/layout-scenes.cjs b/openpilot/starpilot/galaxy/tests/browser/layout-scenes.cjs
index 3b85dbe76f..12ce4b25a2 100644
--- a/openpilot/starpilot/galaxy/tests/browser/layout-scenes.cjs
+++ b/openpilot/starpilot/galaxy/tests/browser/layout-scenes.cjs
@@ -37,7 +37,7 @@ print(json.dumps(dict(native=native,projection=projection)))
       }
       if (pathname.startsWith('/api/')) return route.fulfill({ json: pathname === '/api/starport/layout' ? fixtures.projection : fixtures.native })
       if (pathname === '/') return route.fulfill({ contentType: 'text/html', body: `
-        <meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css">
+        <meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css">
         <main class="gx-content"><div id="app"></div></main><script type="module">
         import {createApp} from '/vendor/vue/vue.esm-browser.js'; import {OnroadLayoutPage} from '/js/onroad-layout.js';
         window.editor=createApp(OnroadLayoutPage,{mode:'local',projection:location.search.includes('projection'),unauthorized(){}}).mount('#app');</script>` })
diff --git a/openpilot/starpilot/galaxy/tests/browser/navigation-compact.cjs b/openpilot/starpilot/galaxy/tests/browser/navigation-compact.cjs
index bd6b4e4d56..34d8d28b8e 100644
--- a/openpilot/starpilot/galaxy/tests/browser/navigation-compact.cjs
+++ b/openpilot/starpilot/galaxy/tests/browser/navigation-compact.cjs
@@ -34,9 +34,9 @@ const status = { enabled: true, hasKey: true, isMetric: true, status: 'noDestina
       if (pathname.startsWith('/api/')) return route.fulfill({ json: status })
       if (pathname === '/' && new URL(request.url()).searchParams.has('shell')) return route.fulfill({ contentType: 'text/html', body:
         `<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/vendor/bootstrap-icons/bootstrap-icons.min.css">
-        <link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css"><div id="galaxy-app"></div><script type="module" src="/js/app.js"></script>` })
+        <link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css"><div id="galaxy-app"></div><script type="module" src="/js/app.js"></script>` })
       if (pathname === '/') return route.fulfill({ contentType: 'text/html', body: `<meta name="viewport" content="width=device-width,initial-scale=1">
-        <link rel="stylesheet" href="/vendor/bootstrap-icons/bootstrap-icons.min.css"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css"><main class="gx-content"><div id="app"></div></main>
+        <link rel="stylesheet" href="/vendor/bootstrap-icons/bootstrap-icons.min.css"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css"><main class="gx-content"><div id="app"></div></main>
         <script type="module">import {createApp} from '/vendor/vue/vue.esm-browser.js';
         import {NavigationPage} from '/js/navigation.js';
         window.navigation = createApp(NavigationPage,{mode:'local',unauthorized:()=>{}}).mount('#app');</script>` })
diff --git a/openpilot/starpilot/galaxy/tests/browser/navigation-preferences.cjs b/openpilot/starpilot/galaxy/tests/browser/navigation-preferences.cjs
index 986b966fb5..a5a97e16aa 100644
--- a/openpilot/starpilot/galaxy/tests/browser/navigation-preferences.cjs
+++ b/openpilot/starpilot/galaxy/tests/browser/navigation-preferences.cjs
@@ -25,7 +25,7 @@ const status = { enabled: true, hasKey: true, isMetric: true, status: 'noDestina
       }
       if (pathname.startsWith('/api/')) return route.fulfill({ json: status })
       if (pathname === '/') return route.fulfill({ contentType: 'text/html', body: `<meta name="viewport" content="width=device-width,initial-scale=1">
-        <link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css">
+        <link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css">
         <main class="gx-content"><div id="app"></div></main><script type="module">
         import {createApp} from '/vendor/vue/vue.esm-browser.js'; import {NavigationPage} from '/js/navigation.js';
         window.navigation = createApp(NavigationPage,{mode:'local',initialTab:'setup',unauthorized:()=>{}}).mount('#app');</script>` })
diff --git a/openpilot/starpilot/galaxy/tests/browser/settings-state.cjs b/openpilot/starpilot/galaxy/tests/browser/settings-state.cjs
index 3d558406cc..203c09e9e1 100644
--- a/openpilot/starpilot/galaxy/tests/browser/settings-state.cjs
+++ b/openpilot/starpilot/galaxy/tests/browser/settings-state.cjs
@@ -9,7 +9,7 @@ const { execFileSync } = require('node:child_process')
     const errors = []
     page.on('pageerror', error => errors.push(error.message))
     await page.route('**/settings-state-test', route => route.fulfill({ contentType: 'text/html', body:
-      '<link rel="stylesheet" href="css/galaxy.css"><link rel="stylesheet" href="css/settings.css"><div id="test"></div>' }))
+      '<link rel="stylesheet" href="css/galaxy.css"><link rel="stylesheet" href="css/setup.css"><link rel="stylesheet" href="css/settings.css"><div id="test"></div>' }))
     await page.goto((process.env.GALAXY_URL || 'http://127.0.0.1:8765/') + 'settings-state-test')
     const pages = await page.evaluate(async () => {
       const vue = await import('./vendor/vue/vue.esm-browser.js')
diff --git a/openpilot/starpilot/galaxy/tests/browser/widget-layers.cjs b/openpilot/starpilot/galaxy/tests/browser/widget-layers.cjs
index 8a60e69bdf..3ed7e88cdc 100644
--- a/openpilot/starpilot/galaxy/tests/browser/widget-layers.cjs
+++ b/openpilot/starpilot/galaxy/tests/browser/widget-layers.cjs
@@ -24,7 +24,7 @@ const projection = JSON.parse(execFileSync(process.env.PYTHON || 'python3', ['-c
       if (pathname === '/' && new URL(route.request().url()).searchParams.has('shell')) return route.fulfill({contentType:'text/html', body:
         readFileSync(path.join(web, 'index.html'))})
       if (pathname.startsWith('/api/')) return route.fulfill({json: pathname === '/api/starport/layout' ? projection : snapshot})
-      if (pathname === '/') return route.fulfill({contentType:'text/html', body:`<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css"><main class="gx-content"><div id="app"></div></main><script type="module">
+      if (pathname === '/') return route.fulfill({contentType:'text/html', body:`<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css"><main class="gx-content"><div id="app"></div></main><script type="module">
         import {createApp} from '/vendor/vue/vue.esm-browser.js';
         import {OnroadLayoutPage} from '/js/onroad-layout.js';
         window.editor = createApp(OnroadLayoutPage, {mode:'local', projection:new URLSearchParams(location.search).has('projection'), unauthorized:()=>{}}).mount('#app');
diff --git a/openpilot/starpilot/galaxy/web/css/galaxy.css b/openpilot/starpilot/galaxy/web/css/galaxy.css
index 7c6725284a..75617cccf2 100644
--- a/openpilot/starpilot/galaxy/web/css/galaxy.css
+++ b/openpilot/starpilot/galaxy/web/css/galaxy.css
@@ -1858,61 +1858,3 @@ progress { max-width: 100%; accent-color: var(--primary); }
 .gx-tuner__diagnostics dd { margin-bottom: 12px; }
 }
 .gx-tuner__manual .gx-row { padding-inline: 0; }
-/* Guided setup layout and emphasis; shared rows, buttons, fields and notices keep Galaxy defaults. */
-.gx-card.gx-guided { display: grid; gap: var(--sp-5); padding: var(--panel-padding); background-image: radial-gradient(120% 38% at 50% 0, var(--primary-container), transparent 72%); }
-.gx-guided__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
-.gx-guided__step { position: relative; display: grid; justify-items: center; gap: var(--sp-2); text-align: center; }
-.gx-guided__step::before, .gx-guided__step::after { content: ""; position: absolute; top: 15px; height: 2px; width: calc(50% - 8px); background: var(--outline); }
-.gx-guided__step::before { left: 0; }
-.gx-guided__step::after { right: 0; }
-.gx-guided__step:first-child::before, .gx-guided__step:last-child::after { display: none; }
-.gx-guided__step.is-done::before, .gx-guided__step.is-done::after, .gx-guided__step.is-current::before,
-.gx-guided__step.is-done + .gx-guided__step::before { background: var(--success); }
-.gx-guided__node { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--surface-container-high); color: var(--on-surface-variant); font-weight: var(--fw-bold); }
-.gx-guided__step.is-current .gx-guided__node { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 var(--sp-1) var(--primary-container), 0 var(--sp-1) var(--sp-4) var(--primary-glow); }
-.gx-guided__step.is-done .gx-guided__node { background: var(--success); color: var(--background); }
-.gx-guided__step-label, .gx-guided__hint { font-size: var(--fs-sm); color: var(--on-surface-variant); }
-.gx-guided__header, .gx-guided__section, .gx-guided__body { display: grid; gap: var(--sp-3); min-width: 0; }
-.gx-guided__header > *, .gx-guided__subhead, .gx-guided__hint { margin: 0; }
-.gx-guided__header { max-width: 34rem; gap: var(--sp-2); }
-.gx-guided__title { font-size: clamp(1.625rem, 2.5vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
-.gx-guided__lede { color: var(--on-surface-variant); font-size: var(--fs-base); line-height: 1.5; }
-.gx-guided__subhead { font-size: var(--fs-base); color: var(--on-surface-variant); }
-.gx-guided__body:empty { display: none; }
-.gx-guided__option { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch-target); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
-.gx-guided__option:hover:not(:has(:disabled)) { background: var(--glass-bg-hover); }
-.gx-guided__option:has(:checked) { background: var(--primary-container); color: var(--on-primary-container); }
-.gx-guided__option:has(:disabled), .gx-guided__choice:has(:disabled) { opacity: .6; cursor: default; }
-.gx-guided__option:focus-within, .gx-guided__choice:focus-within { outline: 2px solid var(--primary); outline-offset: -2px; }
-.gx-guided__options { background: var(--surface-container); }
-.gx-guided__options > li + li { border-top: 1px solid var(--outline); }
-.gx-guided__option input { flex: none; order: 1; width: var(--sp-5); height: var(--sp-5); margin: 0; accent-color: var(--primary); }
-.gx-guided__option:has(:checked) .gx-guided__tile { background: var(--primary); color: var(--on-primary); }
-.gx-guided__segmented { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--radius-sm); background: var(--surface-container-high); }
-.gx-guided__choice { flex: 1 1 7rem; min-width: 0; min-height: var(--touch-target); padding: var(--sp-2); border-radius: calc(var(--radius-sm) - var(--sp-1)); text-align: center; text-wrap: balance; box-shadow: none; background: transparent; color: var(--on-surface-variant); }
-.gx-guided__choice:has(:checked) { background: var(--primary); color: var(--on-primary); }
-.gx-guided__choice:has(:checked):hover { background: var(--primary-hover); }
-.gx-guided__tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-container); color: var(--primary); font-size: var(--fs-lg); }
-.gx-guided__checklist > .gx-starport-row { flex-wrap: nowrap; }
-.gx-guided__mark { flex: none; display: grid; place-items: center; width: 28px; font-size: var(--fs-lg); color: var(--on-surface-variant); }
-.gx-guided__checklist > li.is-done .gx-guided__mark, .gx-guided__checklist > li.is-worked .gx-guided__mark { color: var(--success); }
-.gx-guided__checklist > li.is-active .gx-guided__mark, .gx-guided__checklist > li.is-current .gx-guided__mark, .gx-guided__checklist > li.is-retry .gx-guided__mark { color: var(--primary); }
-.gx-guided__checklist > li.is-failed .gx-guided__mark { color: var(--error); }
-.gx-guided__callout { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: 0; padding: var(--sp-4); border-radius: var(--radius-sm); background: var(--primary-container); }
-.gx-guided__callout--quiet { background: var(--surface-container); color: var(--on-surface-variant); }
-.gx-guided__footer { display: grid; gap: var(--sp-3); }
-.gx-guided .gx-starport-cta { min-height: calc(var(--touch-target) + var(--sp-2)); border-radius: var(--radius-md); font-size: var(--fs-base); }
-.gx-guided__footer .gx-guided__hint { text-align: center; }
-.gx-guided__link { justify-self: center; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--primary); font: inherit; cursor: pointer; }
-.gx-guided__link:hover:not(:disabled) { text-decoration: underline; }
-.gx-guided__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
-.gx-guided__link:disabled { opacity: .5; cursor: default; }
-
-.gx-slider-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
-.gx-alert-preview { min-width: 118px; min-height: 44px; gap: 8px; white-space: nowrap; }
-.gx-alert-preview[aria-busy="true"] .bi { animation: gx-preview-pulse .7s ease-in-out infinite alternate; }
-.gx-alert-preview-note { margin: 0; font-size: var(--fs-xs); color: var(--on-surface-variant); line-height: 1.4; }
-@keyframes gx-preview-pulse { to { opacity: .35; } }
-@media (prefers-reduced-motion: reduce) { .gx-alert-preview[aria-busy="true"] .bi { animation: none; } }
-.gx-slider-header--preview { align-items: center; flex-wrap: wrap; }
-.gx-slider-header .gx-slider-actions .gx-setting-default { margin: 0; }
diff --git a/openpilot/starpilot/galaxy/web/css/setup.css b/openpilot/starpilot/galaxy/web/css/setup.css
new file mode 100644
index 0000000000..3bfceb8d63
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/css/setup.css
@@ -0,0 +1,58 @@
+/* Guided setup layout and emphasis; shared rows, buttons, fields and notices keep Galaxy defaults. */
+.gx-card.gx-guided { display: grid; gap: var(--sp-5); padding: var(--panel-padding); background-image: radial-gradient(120% 38% at 50% 0, var(--primary-container), transparent 72%); }
+.gx-guided__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
+.gx-guided__step { position: relative; display: grid; justify-items: center; gap: var(--sp-2); text-align: center; }
+.gx-guided__step::before, .gx-guided__step::after { content: ""; position: absolute; top: 15px; height: 2px; width: calc(50% - 8px); background: var(--outline); }
+.gx-guided__step::before { left: 0; }
+.gx-guided__step::after { right: 0; }
+.gx-guided__step:first-child::before, .gx-guided__step:last-child::after { display: none; }
+.gx-guided__step.is-done::before, .gx-guided__step.is-done::after, .gx-guided__step.is-current::before,
+.gx-guided__step.is-done + .gx-guided__step::before { background: var(--success); }
+.gx-guided__node { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--surface-container-high); color: var(--on-surface-variant); font-weight: var(--fw-bold); }
+.gx-guided__step.is-current .gx-guided__node { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 var(--sp-1) var(--primary-container), 0 var(--sp-1) var(--sp-4) var(--primary-glow); }
+.gx-guided__step.is-done .gx-guided__node { background: var(--success); color: var(--background); }
+.gx-guided__step-label, .gx-guided__hint { font-size: var(--fs-sm); color: var(--on-surface-variant); }
+.gx-guided__header, .gx-guided__section, .gx-guided__body { display: grid; gap: var(--sp-3); min-width: 0; }
+.gx-guided__header > *, .gx-guided__subhead, .gx-guided__hint { margin: 0; }
+.gx-guided__header { max-width: 34rem; gap: var(--sp-2); }
+.gx-guided__title { font-size: clamp(1.625rem, 2.5vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
+.gx-guided__lede { color: var(--on-surface-variant); font-size: var(--fs-base); line-height: 1.5; }
+.gx-guided__subhead { font-size: var(--fs-base); color: var(--on-surface-variant); }
+.gx-guided__body:empty { display: none; }
+.gx-guided__option { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch-target); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
+.gx-guided__option:hover:not(:has(:disabled)) { background: var(--glass-bg-hover); }
+.gx-guided__option:has(:checked) { background: var(--primary-container); color: var(--on-primary-container); }
+.gx-guided__option:has(:disabled), .gx-guided__choice:has(:disabled) { opacity: .6; cursor: default; }
+.gx-guided__option:focus-within, .gx-guided__choice:focus-within { outline: 2px solid var(--primary); outline-offset: -2px; }
+.gx-guided__options { background: var(--surface-container); }
+.gx-guided__options > li + li { border-top: 1px solid var(--outline); }
+.gx-guided__option input { flex: none; order: 1; width: var(--sp-5); height: var(--sp-5); margin: 0; accent-color: var(--primary); }
+.gx-guided__option:has(:checked) .gx-guided__tile { background: var(--primary); color: var(--on-primary); }
+.gx-guided__segmented { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--radius-sm); background: var(--surface-container-high); }
+.gx-guided__choice { flex: 1 1 7rem; min-width: 0; min-height: var(--touch-target); padding: var(--sp-2); border-radius: calc(var(--radius-sm) - var(--sp-1)); text-align: center; text-wrap: balance; box-shadow: none; background: transparent; color: var(--on-surface-variant); }
+.gx-guided__choice:has(:checked) { background: var(--primary); color: var(--on-primary); }
+.gx-guided__choice:has(:checked):hover { background: var(--primary-hover); }
+.gx-guided__tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-container); color: var(--primary); font-size: var(--fs-lg); }
+.gx-guided__checklist > .gx-starport-row { flex-wrap: nowrap; }
+.gx-guided__mark { flex: none; display: grid; place-items: center; width: 28px; font-size: var(--fs-lg); color: var(--on-surface-variant); }
+.gx-guided__checklist > li.is-done .gx-guided__mark, .gx-guided__checklist > li.is-worked .gx-guided__mark { color: var(--success); }
+.gx-guided__checklist > li.is-active .gx-guided__mark, .gx-guided__checklist > li.is-current .gx-guided__mark, .gx-guided__checklist > li.is-retry .gx-guided__mark { color: var(--primary); }
+.gx-guided__checklist > li.is-failed .gx-guided__mark { color: var(--error); }
+.gx-guided__callout { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: 0; padding: var(--sp-4); border-radius: var(--radius-sm); background: var(--primary-container); }
+.gx-guided__callout--quiet { background: var(--surface-container); color: var(--on-surface-variant); }
+.gx-guided__footer { display: grid; gap: var(--sp-3); }
+.gx-guided .gx-starport-cta { min-height: calc(var(--touch-target) + var(--sp-2)); border-radius: var(--radius-md); font-size: var(--fs-base); }
+.gx-guided__footer .gx-guided__hint { text-align: center; }
+.gx-guided__link { justify-self: center; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--primary); font: inherit; cursor: pointer; }
+.gx-guided__link:hover:not(:disabled) { text-decoration: underline; }
+.gx-guided__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+.gx-guided__link:disabled { opacity: .5; cursor: default; }
+
+.gx-slider-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
+.gx-alert-preview { min-width: 118px; min-height: 44px; gap: 8px; white-space: nowrap; }
+.gx-alert-preview[aria-busy="true"] .bi { animation: gx-preview-pulse .7s ease-in-out infinite alternate; }
+.gx-alert-preview-note { margin: 0; font-size: var(--fs-xs); color: var(--on-surface-variant); line-height: 1.4; }
+@keyframes gx-preview-pulse { to { opacity: .35; } }
+@media (prefers-reduced-motion: reduce) { .gx-alert-preview[aria-busy="true"] .bi { animation: none; } }
+.gx-slider-header--preview { align-items: center; flex-wrap: wrap; }
+.gx-slider-header .gx-slider-actions .gx-setting-default { margin: 0; }
diff --git a/openpilot/starpilot/galaxy/web/index.html b/openpilot/starpilot/galaxy/web/index.html
index f67aa034f5..988eb76bcd 100644
--- a/openpilot/starpilot/galaxy/web/index.html
+++ b/openpilot/starpilot/galaxy/web/index.html
@@ -13,6 +13,7 @@
   <link rel="manifest" href="./manifest.webmanifest" crossorigin="use-credentials">
   <link rel="stylesheet" href="./vendor/bootstrap-icons/bootstrap-icons.min.css">
   <link rel="stylesheet" href="./css/galaxy.css">
+  <link rel="stylesheet" href="./css/setup.css">
   <link rel="stylesheet" href="./css/settings.css">
   <link rel="stylesheet" href="./css/navigation.css">
 </head>
diff --git a/prebuilt.json b/prebuilt.json
index 190a8fe2c9..a56abc70ac 100644
--- a/prebuilt.json
+++ b/prebuilt.json
@@ -1 +1 @@
-{"protected_inventory_sha256": "31ce110ba2691075ad8ce0928854106876165f405a7798693daa2542961b2967", "schema_version": 1}
+{"protected_inventory_sha256": "3ae90477c066ee82cc45593c3e6ed22c9222917eb9708bb9f303a6e00de0fb05", "schema_version": 1}