wording, size, port changes

compose.yaml

@@ -2,7 +2,7 @@ services:
   preferences:
     build: .
     ports:
-      - "8000:8000"
+      - "8005:8000"
     environment:
       SHARED_PASSWORD: ${SHARED_PASSWORD:-galnik}
       COOKIE_SECURE: ${COOKIE_SECURE:-0}

static/app.js

@@ -71,7 +71,7 @@ function shell(content) {
     <main class="main">
       <div class="page-heading"><div><h1>Share your preferences</h1><p>Rank your class and role choices, and tell the group which content you would play. You can update your choices any time.</p></div><div class="heading-sigil circle-icon" aria-hidden="true"><img src="/icon.webp" alt=""></div></div>
       <nav class="main-nav" aria-label="Main navigation">
-        <button type="button" class="nav-item ${state.view === "mine" ? "active" : ""}" data-view="mine"><span class="nav-icon">◇</span> My priorities</button>
+        <button type="button" class="nav-item ${state.view === "mine" ? "active" : ""}" data-view="mine"><span class="nav-icon">◇</span> My preferences</button>
         <button type="button" class="nav-item ${state.view === "group" ? "active" : ""}" data-view="group"><span class="nav-icon">▦</span> Group preferences <span class="nav-count">${state.data.people.length}</span></button>
         <button type="button" class="nav-item ${state.view === "account" ? "active" : ""}" data-view="account"><span class="nav-icon">○</span> Account</button>
       </nav>

static/styles.css

@@ -23,7 +23,7 @@ button:focus-visible, input:focus-visible { outline: 2px solid #e6bd69; outline-
 .brand { display: flex; align-items: center; }
 .brand-text { display: grid; gap: 2px; }
 .brand-text strong { font-family: Georgia, serif; color: #f4e3b8; font-size: 16px; letter-spacing: .13em; }
-.brand-text small { color: #87919c; font-size: 8px; letter-spacing: .25em; font-weight: 700; }
+.brand-text small { color: #87919c; font-size: 12px; letter-spacing: .25em; font-weight: 700; }
 .topbar-right { display: flex; align-items: center; gap: 26px; }
 .account { color: #9daab5; font-size: 12px; }
 .account strong { color: #e6e5de; font-weight: 600; }
@@ -209,7 +209,7 @@ tbody tr:hover td, tbody tr:hover th { background: #203242; }
 @media (max-width: 560px) {
   .topbar { padding: 0 16px; min-height: 68px; }
   .brand-text strong { font-size: 12px; }
-  .brand-text small { font-size: 6px; }
+  .brand-text small { font-size: 10px; }
   .topbar-right { gap: 9px; }
   .account { display: none; }
   .page-heading h1 { font-size: 27px; }