Space: brand title in Fraunces w/ red dot + 'small minds, big dreams' subtitle; CHARACTERS title small+red; stage fixed-fills full height like main sidebar

app.py

@@ -43,7 +43,7 @@ HIDE_TABS = ('<style>.tab-container[role="tablist"]{position:absolute!important;
 FONTS = ('<link rel="preconnect" href="https://fonts.googleapis.com">'
          '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>'
          '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?'
-         'family=JetBrains+Mono:wght@400;500;700&'
+         'family=Fraunces:opsz,wght@9..144,400..900&family=JetBrains+Mono:wght@400;500;700&'
          'family=Space+Grotesk:wght@400;500;600;700&display=swap">')
 # Parchment theme, applied THEME-INDEPENDENTLY: we override Gradio's own colour +
 # font CSS variables with `!important`, so the app renders identically whether the
@@ -69,13 +69,17 @@ THEME = ('<style>'
          f'body,gradio-app,.gradio-container,.gradio-container.dark,.dark{{{PALETTE_IMP}}}'
          "body,gradio-app,.gradio-container{background:#f3ebdc !important;color:#141821 !important;"
          "font-family:'Space Grotesk',-apple-system,sans-serif !important;}"
-         # Sprite tab fills the content area (like the app): trim Gradio's tab
-         # padding and let the playground use the full page height. The picker keeps
-         # its own border-right (a sidebar the same width as the main one); the
-         # canvas fills the rest — no extra frame.
+         # Sprite tab fills the WHOLE content area, like the main sidebar. The
+         # picker lives in Gradio's flow (pushed ~110px down, bounded by the tab
+         # box) so it can't reach full height there — so we lift the stage out of
+         # flow with position:fixed to span top→bottom, right of the main sidebar.
+         # Gradio still hides it (display:none on the inactive tab's ancestor).
          '.gradio-container .tabitem{padding:0 !important;}'
          '.gradio-container .tabs{border:0 !important;}'
-         '#sprite-stage{height:calc(100vh - 52px) !important;}'
+         '#sprite-stage{position:fixed !important;top:0;bottom:0;right:0;'
+         'left:var(--tac-w,240px);height:auto !important;z-index:1;}'
+         'body.tac-collapsed #sprite-stage{left:0;}'
+         '@media (max-width:768px){#sprite-stage{left:0;}}'
          '</style>')
 HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
         + HIDE_TABS + FONTS + THEME +
@@ -96,10 +100,16 @@ def build_sidebar(nav):
     # sidebar.js against the tab buttons). React-only sandbox items (href but no
     # `space`) and sections with no space-items are skipped.
     b = nav.get("brand", {})
+    # Brand block mirrors the app's .sidebar-title: a big display-font title with a
+    # red dot, plus a small uppercase subtitle.
     out = ['<aside class="tac-sidebar">',
-           f'<div class="tac-brand"><span class="tac-brand-icon">{b.get("icon","")}</span>'
-           f'<span>{b.get("title","")}</span>'
-           f'<button class="tac-collapse tac-toggle" title="Collapse">‹</button></div>']
+           '<div class="tac-brand">'
+           '<div class="tac-brand-row">'
+           f'<strong class="tac-title">{b.get("title","")}</strong>'
+           '<button class="tac-collapse tac-toggle" title="Collapse">‹</button>'
+           '</div>'
+           f'<p class="tac-subtitle">{b.get("subtitle","")}</p>'
+           '</div>']
     first = True  # mark the default page active (matches Gradio's first/open tab)
     for sec in nav.get("sections", []):
         items = [it for it in sec.get("items", []) if it.get("space")]

web/shell/nav.json

@@ -1,6 +1,6 @@
 {
   "_doc": "Shared navigation IR — ONE source for both the React app (src/layout/Sidebar.jsx) and the Gradio Space (tiny-army app.py build_sidebar). Each item carries routing for both hosts: `href` + `view`/`page` drive React's hash router and active state; `space` is the Gradio tab label the item navigates to. React renders items with an `href`; the Space renders items with a `space`. `brand` is used by the Space only (React uses config.name).",
-  "brand": { "title": "Tiny Army", "icon": "⚔️" },
+  "brand": { "title": "Tiny Army", "icon": "⚔️", "subtitle": "small minds, big dreams" },
   "sections": [
     {
       "title": "World",

web/shell/sidebar.css

@@ -39,26 +39,27 @@ body.tac-collapsed .tac-sidebar { transform: translateX(-100%); }
 .gradio-container { transition: margin-left .22s ease; }
 body:not(.tac-collapsed) .gradio-container { margin-left: var(--tac-w); }
 
-.tac-brand {
-  display: flex; align-items: center; gap: 8px;
-  padding: 14px 14px 12px; font-weight: 700; font-size: 16px; letter-spacing: .01em;
-  color: var(--tac-ink); border-bottom: 2px solid var(--tac-border);
+/* Brand block mirrors the app's `.sidebar-title`: a big display-font title with a
+ * red dot, plus a small uppercase subtitle. */
+.tac-brand { padding: 16px 14px 12px; border-bottom: 2px solid var(--tac-border); }
+.tac-brand-row { display: flex; align-items: flex-start; justify-content: space-between; }
+.tac-sidebar .tac-title {
+  display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 900;
+  font-size: 28px; line-height: .92; letter-spacing: -.03em; color: var(--tac-ink) !important;
 }
-.tac-brand .tac-brand-icon { font-size: 18px; }
-/* The collapse/reopen controls are <button>s; a host button theme (Gradio's
- * `.gradio-container button` reset) strips their padding/background. We define a
- * self-contained icon-button look and defend the visual props with `!important`
- * so it renders identically with or without the host theme. */
-.tac-sidebar .tac-brand .tac-collapse {
-  margin-left: auto; cursor: pointer; line-height: 1; font-size: 16px;
-  display: inline-flex !important; align-items: center; justify-content: center;
-  width: 28px; height: 28px; padding: 0 !important;
-  background: var(--tac-bg-2) !important; color: var(--tac-muted) !important;
-  border: 1.5px solid var(--tac-border) !important; border-radius: 6px !important;
+.tac-sidebar .tac-title::after { content: "·"; color: var(--tac-accent); }
+.tac-subtitle {
+  margin: 8px 0 0 !important; font-family: var(--tac-mono); font-size: 9px;
+  color: var(--tac-muted) !important; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
 }
-.tac-sidebar .tac-brand .tac-collapse:hover {
-  background: var(--tac-ink) !important; color: var(--tac-paper) !important;
+/* Plain ‹ collapse control (like the app's .sidebar-collapse); defend against the
+ * host button reset so it stays a borderless glyph. */
+.tac-sidebar .tac-brand .tac-collapse {
+  cursor: pointer; line-height: 1; font-size: 18px; margin-left: 8px; flex-shrink: 0;
+  background: none !important; color: var(--tac-muted) !important;
+  border: 0 !important; padding: 0 !important; box-shadow: none !important;
 }
+.tac-sidebar .tac-brand .tac-collapse:hover { color: var(--tac-ink) !important; }
 
 .tac-section { padding: 12px 8px 0; }
 /* Section headers: red (transmit) with a short ink line prefix, like the app's

web/shell/spriteScene.css

@@ -26,9 +26,12 @@
   width: 240px; flex-shrink: 0; border-right: 2px solid var(--mv-ink);
   background: var(--mv-paper-2); overflow-y: auto; padding: 12px;
 }
+/* It's an <h2>, so the host (Gradio's `.prose h2`) blows it up and blackens it —
+ * defend size + colour with `!important`. */
 .movement-picker-title {
-  margin: 0 0 8px; font-family: var(--mv-mono); font-size: 11px; letter-spacing: .2em;
-  text-transform: uppercase; color: var(--mv-transmit);
+  margin: 0 0 8px !important; font-family: var(--mv-mono); font-size: 11px !important;
+  font-weight: 500 !important; letter-spacing: .2em; line-height: 1.4 !important;
+  text-transform: uppercase; color: var(--mv-transmit) !important;
 }
 .movement-pack { margin-top: 8px; border-top: 1px solid var(--mv-paper); }
 .movement-pack > summary {