@oddessentials/agent-guild 0.7.0 → 0.8.0

package/web/styles.css

@@ -12,29 +12,13 @@
   line-gap-override: 0%;
 }
 
+/* Skin-independent tokens. Colours, surfaces, radius and the display font come from
+   the active skin (web/skins/<id>/skin.css), so they are not declared here; the logo treatment, terminal and icons below never change with a skin. */
 :root {
-  --bg: #f3eee3;
-  --surface: #fffcf6;
-  --surface-2: #f5eedf;
-  --border: #e3d7bd;
-  --text: #221b12;
-  --muted: #6b5c45;
-  --heading: #2c2216;
-  --accent: #5a3fc0;
-  --accent-fill: #5a3fc0;
-  --accent-text: #ffffff;
-  --danger: #a8302b;
-  --ok: #1d6e40;
-  --warn: #8a5300;
-  --gold: #b8892f;
-  --gold-ink: #7a5715;
-  --focus: #5a3fc0;
   --wordmark: linear-gradient(180deg, #a77a26 0%, #7a5715 55%, #563c0b 100%);
-  --shadow: 0 1px 2px rgba(70, 48, 12, 0.08), 0 4px 14px rgba(70, 48, 12, 0.08);
   --term-bg: #0f1115;
-  --radius: 6px;
   --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
-  --font-display: "Cinzel", "Cinzel Fallback", "Palatino Linotype", Palatino, Georgia, serif;
+  --font-brand: "Cinzel", "Cinzel Fallback", "Palatino Linotype", Palatino, Georgia, serif;
   --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
   --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
   --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.6A8 8 0 0 1 9.4 4.5a8 8 0 1 0 10.1 10.1z'/%3E%3C/svg%3E");
@@ -48,25 +32,9 @@
   scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
 }
 
-/* theme.js sets data-theme from the saved choice or the system setting before the first paint. */
+/* theme.js sets data-theme and data-skin from the saved choice or the system setting before the first paint. */
 :root[data-theme="dark"] {
-  --bg: #0f1115;
-  --surface: #171a21;
-  --surface-2: #1e222b;
-  --border: #2a303b;
-  --text: #e6e9ef;
-  --muted: #9aa4b2;
-  --heading: #f1e2c2;
-  --accent: #ac9ff7;
-  --accent-fill: #5b40d0;
-  --danger: #ef6b66;
-  --ok: #4cc38a;
-  --warn: #e0a84a;
-  --gold: #e8c47c;
-  --gold-ink: #e8c47c;
-  --focus: #e8c47c;
   --wordmark: linear-gradient(180deg, #fbe9bd 0%, #e2b867 55%, #a97b35 100%);
-  --shadow: none;
   color-scheme: dark;
 }
 
@@ -75,7 +43,7 @@ body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh;
 ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
 h1, h2 { margin: 0; font-family: var(--font-display); color: var(--heading); }
 h1 {
-  font-size: 1.32rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
+  font-family: var(--font-brand); font-size: 1.32rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
   background: var(--wordmark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
 }
 h2 { font-size: 1.02rem; font-weight: 600; letter-spacing: 0.03em; }
@@ -89,6 +57,10 @@ code, pre { font-family: var(--font-mono); }
   position: sticky; top: 0; z-index: 5;
 }
 .brand { display: flex; align-items: center; gap: 10px; }
+.brand::before {
+  content: ""; width: 34px; height: 34px; flex: none;
+  background: url("/brand/crest.png") center / contain no-repeat;
+}
 .version {
   position: relative; font-family: inherit; font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
   background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); font-variant-numeric: tabular-nums; cursor: pointer;
@@ -166,11 +138,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
   font: inherit; font-size: 0.78rem; text-align: left; cursor: pointer;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.model-stats-head::after, .console-link::after, .theme-toggle::before, .model-name::before, .provider .copies summary::before {
+.model-stats-head::after, .console-link::after, .appearance::after, .model-name::before, .provider .copies summary::before {
   content: ""; display: inline-block; flex: none; width: 0.75em; height: 0.75em; margin-left: 0.3em; vertical-align: -0.05em;
   background: currentColor; mask: var(--icon-chevron) center / contain no-repeat;
 }
-.console-link::after { width: 0.7em; height: 0.7em; margin-left: 0.25em; mask-image: var(--icon-external); }
+.console-link::after { content: "\2060"; display: inline; padding-left: 0.7em; margin-left: 0.25em; mask-image: var(--icon-external); }
 .model-stats-head:hover { text-decoration: underline; }
 .model-stats-head:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
 
@@ -312,14 +284,40 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
 .btn.danger { color: var(--danger); }
 .btn.danger:hover { border-color: var(--danger); }
 .btn:disabled { opacity: 0.6; cursor: progress; }
-.stop-manager, .restart-manager, .theme-toggle, .upgrade { white-space: nowrap; }
-.theme-toggle::before { width: 1em; height: 1em; margin: 0 0.4em 0 0; vertical-align: -0.15em; mask-image: var(--icon-sun); }
-.theme-toggle[data-next="dark"]::before { mask-image: var(--icon-moon); }
+.stop-manager, .restart-manager, .appearance, .upgrade { white-space: nowrap; }
+.appearance::before, .appearance-menu .choice > span::before {
+  content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.15em;
+  background: currentColor; mask: var(--icon-sun) center / contain no-repeat;
+}
+:root[data-theme="dark"] .appearance::before, .appearance-menu .choice > .mode-dark::before { mask-image: var(--icon-moon); }
+.appearance::after { margin-left: 0.45em; transform: rotate(90deg); transition: transform 0.15s var(--ease); }
+.appearance:has(+ :popover-open)::after { transform: rotate(-90deg); }
+.appearance-menu {
+  position: fixed; inset: auto; margin: 0; min-width: 190px; padding: 6px; display: none;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); font-size: 0.85rem;
+}
+.appearance-menu:popover-open { display: grid; gap: 4px; animation: fade-in 0.12s var(--ease); }
+.appearance-menu fieldset { margin: 0; padding: 0; border: 0; display: grid; }
+.appearance-menu fieldset + fieldset { padding-top: 4px; border-top: 1px solid var(--border); }
+.appearance-menu legend { padding: 6px 8px 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
+.appearance-menu .choice { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: calc(var(--radius) - 2px); cursor: pointer; }
+.appearance-menu .choice:hover, .appearance-menu .choice:has(:focus-visible) { background: var(--surface-2); }
+.appearance-menu .choice:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
+.appearance-menu .choice input { margin: 0; accent-color: var(--accent-fill); }
+.appearance-menu .choice:has(:checked) { font-weight: 600; }
+#skin-choices .choice > span::before { content: none; }
 .btn.upgrade, .btn.restart-manager.pending { color: var(--warn); border-color: var(--warn); }
 .upgrade-note { font-size: 0.85rem; color: var(--warn); }
 
 .empty { color: var(--muted); margin: 8px 0 0; }
 
+body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
+  content: ""; position: fixed; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
+  background: url("/brand/crest.png") center / contain no-repeat;
+  animation: splash 1.4s ease-in-out infinite alternate;
+}
+
 .auth { max-width: 560px; margin: 60px auto; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 12px; }
 .auth p { margin: 0; color: var(--muted); line-height: 1.5; }
 .auth pre { margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); }
@@ -604,15 +602,16 @@ a.news-link:visited { color: var(--muted); }
 @keyframes stat-fill { from { transform: scaleX(0); } }
 @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
 @keyframes fade-in { from { opacity: 0; } }
+@keyframes splash { from { opacity: 0.3; transform: scale(0.95); } to { opacity: 0.85; transform: scale(1.03); } }
 @keyframes theme-reveal {
   from { clip-path: circle(0 at var(--reveal-x) var(--reveal-y)); }
   to { clip-path: circle(var(--reveal-r) at var(--reveal-x) var(--reveal-y)); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .status-pill.active::before, .agent.working::after, .model-detail .stat-fill, .toast:not([hidden]), .tip:not([hidden]) { animation: none; }
-  .model-name::before, .provider .copies summary::before, .btn, .models, .news-panel, .models::backdrop, .news-panel::backdrop { transition: none; }
-  .github-waiting::before { animation: none; }
+  .status-pill.active::before, .agent.working::after, .model-detail .stat-fill, .toast:not([hidden]), .tip:not([hidden]), .appearance-menu:popover-open { animation: none; }
+  .model-name::before, .provider .copies summary::before, .appearance::after, .btn, .models, .news-panel, .models::backdrop, .news-panel::backdrop { transition: none; }
+  .github-waiting::before, body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after { animation: none; }
   .btn:active:not(:disabled) { transform: none; }
 }
 

package/web/theme.js

@@ -1,10 +1,25 @@
-// Applies the chosen theme before the first paint, so the page never flashes
-// the other one. Loaded in <head> as a plain script; app.js owns the toggle.
+// Applies the chosen skin and light or dark theme before the first paint, so
+// the page never flashes another one. Loaded in <head> as a plain script;
+// app.js owns the controls.
 (function () {
+  // The skins the page offers, in menu order; the first is the default. Each
+  // has a stylesheet at /skins/<id>/skin.css, linked from index.html.
+  var skins = [
+    { id: 'guild', name: 'Guild' },
+    { id: 'professional', name: 'Professional' },
+  ];
+  window.agentGuildSkins = skins;
+
   var theme = null;
-  try { theme = localStorage.getItem('agentGuild.theme'); } catch (e) { /* storage unavailable */ }
+  var skin = null;
+  try {
+    theme = localStorage.getItem('agentGuild.theme');
+    skin = localStorage.getItem('agentGuild.skin');
+  } catch (e) { /* storage unavailable */ }
   if (theme !== 'light' && theme !== 'dark') {
     theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
+  if (!skins.some(function (s) { return s.id === skin; })) skin = skins[0].id;
   document.documentElement.dataset.theme = theme;
+  document.documentElement.dataset.skin = skin;
 })();

package/web/art/art.css

@@ -1,467 +0,0 @@
-.brand::before {
-  content: ""; width: 34px; height: 34px; flex: none;
-  background: url("/art/ui/guild-crest.png") center / contain no-repeat;
-}
-.topbar { border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent) 25%, color-mix(in srgb, var(--gold) 55%, transparent) 75%, transparent) 1; }
-.version { background: transparent; color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
-.version:hover { color: var(--gold-ink); border-color: var(--gold); }
-.version.unread::after {
-  background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--accent) 48%, color-mix(in srgb, var(--accent) 55%, #000) 100%);
-  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent);
-}
-.connection .dot {
-  width: 9px; height: 9px;
-  background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--dot) 48%, color-mix(in srgb, var(--dot) 55%, #000) 100%);
-  box-shadow: 0 0 6px color-mix(in srgb, var(--dot) 70%, transparent);
-}
-.section-head {
-  padding-bottom: 9px; border-bottom: 1px solid;
-  border-image: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 35%, transparent) 45%, transparent 90%) 1;
-}
-
-.provider, .session-card {
-  --pc: #a67cf6;
-  --idle: image-set(url("/art/characters/shell/idle.avif") type("image/avif"), url("/art/characters/shell/idle.webp") type("image/webp"));
-  --working: image-set(url("/art/characters/shell/working.avif") type("image/avif"), url("/art/characters/shell/working.webp") type("image/webp"));
-  --locked: image-set(url("/art/characters/shell/locked.avif") type("image/avif"), url("/art/characters/shell/locked.webp") type("image/webp"));
-}
-.provider[data-id="anthropic"], .session-card[data-provider="anthropic"] {
-  --pc: #d97757;
-  --idle: image-set(url("/art/characters/anthropic/idle.avif") type("image/avif"), url("/art/characters/anthropic/idle.webp") type("image/webp"));
-  --working: image-set(url("/art/characters/anthropic/working.avif") type("image/avif"), url("/art/characters/anthropic/working.webp") type("image/webp"));
-  --locked: image-set(url("/art/characters/anthropic/locked.avif") type("image/avif"), url("/art/characters/anthropic/locked.webp") type("image/webp"));
-}
-.provider[data-id="openai"], .session-card[data-provider="openai"] {
-  --pc: #1fd08f;
-  --idle: image-set(url("/art/characters/openai/idle.avif") type("image/avif"), url("/art/characters/openai/idle.webp") type("image/webp"));
-  --working: image-set(url("/art/characters/openai/working.avif") type("image/avif"), url("/art/characters/openai/working.webp") type("image/webp"));
-  --locked: image-set(url("/art/characters/openai/locked.avif") type("image/avif"), url("/art/characters/openai/locked.webp") type("image/webp"));
-}
-.provider[data-id="google"], .session-card[data-provider="google"] {
-  --pc: #5b9cff;
-  --idle: image-set(url("/art/characters/google/idle.avif") type("image/avif"), url("/art/characters/google/idle.webp") type("image/webp"));
-  --working: image-set(url("/art/characters/google/working.avif") type("image/avif"), url("/art/characters/google/working.webp") type("image/webp"));
-  --locked: image-set(url("/art/characters/google/locked.avif") type("image/avif"), url("/art/characters/google/locked.webp") type("image/webp"));
-}
-.provider[data-id="xai"], .session-card[data-provider="xai"] {
-  --pc: #38d6e8;
-  --idle: image-set(url("/art/characters/xai/idle.avif") type("image/avif"), url("/art/characters/xai/idle.webp") type("image/webp"));
-  --working: image-set(url("/art/characters/xai/working.avif") type("image/avif"), url("/art/characters/xai/working.webp") type("image/webp"));
-  --locked: image-set(url("/art/characters/xai/locked.avif") type("image/avif"), url("/art/characters/xai/locked.webp") type("image/webp"));
-}
-
-.provider-icon[data-provider="anthropic"] { --icon: image-set(url("/art/icons/anthropic.avif") type("image/avif"), url("/art/icons/anthropic.webp") type("image/webp")); }
-.provider-icon[data-provider="openai"] { --icon: image-set(url("/art/icons/openai.avif") type("image/avif"), url("/art/icons/openai.webp") type("image/webp")); }
-.provider-icon[data-provider="google"] { --icon: image-set(url("/art/icons/google.avif") type("image/avif"), url("/art/icons/google.webp") type("image/webp")); }
-.provider-icon[data-provider="xai"] { --icon: image-set(url("/art/icons/xai.avif") type("image/avif"), url("/art/icons/xai.webp") type("image/webp")); }
-.provider-icon[data-provider="shell"] { --icon: image-set(url("/art/icons/shell.avif") type("image/avif"), url("/art/icons/shell.webp") type("image/webp")); }
-.provider-icon:not(.has-image)[data-provider="anthropic"],
-.provider-icon:not(.has-image)[data-provider="openai"],
-.provider-icon:not(.has-image)[data-provider="google"],
-.provider-icon:not(.has-image)[data-provider="xai"],
-.provider-icon:not(.has-image)[data-provider="shell"] {
-  background: var(--icon) center / cover no-repeat; color: transparent;
-}
-
-body::before {
-  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
-  background: var(--page-art) center bottom / cover no-repeat;
-}
-
-.provider, .session-card {
-  position: relative; isolation: isolate; overflow: hidden;
-  border-radius: 6px; padding: 18px;
-  transition: border-color 0.2s, box-shadow 0.2s, transform 0.3s var(--ease);
-}
-.provider:hover { transform: translateY(-3px); }
-.session-card:hover { transform: translateY(-2px); }
-.provider::before {
-  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
-  background: linear-gradient(105deg, transparent 38%, var(--glint) 50%, transparent 62%);
-  transform: translateX(-110%);
-}
-.provider:hover::before { transform: translateX(110%); transition: transform 1s var(--ease); }
-.provider .card-art::before { transition: transform 0.5s var(--ease); }
-.provider:hover .card-art::before { transform: translate(calc(var(--px, 0) * -7px), calc(var(--py, 0) * -5px)) scale(1.045); }
-.providers.deal > .provider { animation: deal 0.55s var(--ease) both; }
-.providers.deal > .provider:nth-child(2) { animation-delay: 0.06s; }
-.providers.deal > .provider:nth-child(3) { animation-delay: 0.12s; }
-.providers.deal > .provider:nth-child(4) { animation-delay: 0.18s; }
-.providers.deal > .provider:nth-child(5) { animation-delay: 0.24s; }
-.providers.deal > .provider:nth-child(6) { animation-delay: 0.3s; }
-.providers.deal > .provider:nth-child(n + 7) { animation-delay: 0.36s; }
-.session-card.enter { animation: card-enter 0.5s var(--ease) both; }
-.provider::after, .session-card::after {
-  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
-  border: 44px solid transparent; border-image: url("/art/ui/frame.png") 168;
-}
-.card-art { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; }
-.card-art::before { content: ""; position: absolute; inset: 0; background: var(--idle) no-repeat; }
-.provider.unavailable .card-art::before { background-image: var(--locked); }
-.provider.unavailable::after {
-  background: url("/art/ui/padlock.png") right 16px top 14px / 30px 40px no-repeat border-box;
-}
-.session-card { min-height: 196px; }
-.session-card .card-art::after {
-  content: ""; position: absolute; inset: 0; background: var(--working) no-repeat;
-  opacity: 0; transition: opacity 0.6s var(--ease);
-}
-.session-card:has(.status-pill.active) .card-art::after { opacity: 1; }
-.card-aura {
-  position: absolute; z-index: -1; overflow: hidden; pointer-events: none;
-  opacity: 0; transition: opacity 0.6s var(--ease);
-}
-.card-aura::before {
-  content: ""; position: absolute; inset: -12%;
-  background: radial-gradient(closest-side, transparent 52%, color-mix(in srgb, var(--pc) 55%, transparent) 84%, transparent);
-}
-.card-aura::after {
-  content: ""; position: absolute; inset: 0 0 auto; height: calc(100% + 96px);
-  background-image:
-    radial-gradient(circle, color-mix(in srgb, var(--pc) 80%, #fff) 0 1.4px, transparent 2.2px),
-    radial-gradient(circle, color-mix(in srgb, var(--pc) 65%, #fff) 0 1px, transparent 1.8px),
-    radial-gradient(circle, #fff3d0 0 0.9px, transparent 1.6px);
-  background-size: 44px 96px, 61px 48px, 37px 96px;
-  background-position: 6px 10px, 30px 30px, 18px 62px;
-}
-.session-card:has(.status-pill.active) .card-aura { opacity: 1; }
-.session-card:has(.status-pill.active) .card-aura::before { animation: aura 3.6s ease-in-out infinite alternate; }
-.session-card:has(.status-pill.active) .card-aura::after { animation: sparks 3.2s linear infinite; }
-body:has(#terminal-panel:not([hidden])) main :is(.card-aura, .status-pill, .agent)::before,
-body:has(#terminal-panel:not([hidden])) main :is(.card-aura, .agent)::after { animation-play-state: paused; }
-.session-card .card-top > .provider-icon { display: none; }
-.session-card .card-top { flex-wrap: wrap; gap: 6px 8px; }
-.session-card .card-title { flex-basis: 100%; }
-
-.level-badge {
-  display: grid; place-items: center; position: absolute; left: 12px; bottom: 12px; z-index: 1;
-  width: 46px; height: 46px; padding-top: 1px;
-  background: url("/art/ui/level-medallion.png") center / contain no-repeat;
-  font: 700 1.05rem var(--font-display); color: #f6dea6;
-  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.8);
-}
-.level-badge.level-up { animation: level-up 1.2s var(--ease); }
-.agent.summon { animation: summon 0.6s var(--ease) both; }
-
-#empty { padding: 4px 16px 8px; text-align: center; }
-#empty::before {
-  content: ""; display: block; width: 190px; height: 206px; margin: 0 auto 12px;
-  background: image-set(url("/art/ui/empty-state.avif") type("image/avif"), url("/art/ui/empty-state.webp") type("image/webp")) center / contain no-repeat;
-  filter: drop-shadow(0 12px 14px var(--empty-shadow));
-}
-
-body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
-  content: ""; position: fixed; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
-  background: url("/art/ui/guild-crest.png") center / contain no-repeat;
-  animation: splash 1.4s ease-in-out infinite alternate;
-}
-
-.agent {
-  border-width: 1px; border-color: var(--fc); place-items: end end; padding: 0 3px 1px 0;
-  background: #0e1016 center / 118% auto no-repeat;
-  color: #fff; font-size: 0.62rem; text-shadow: 0 0 3px #000, 0 1px 2px #000;
-  box-shadow: 0 0 10px color-mix(in srgb, var(--fc) 45%, transparent);
-}
-.session-card .agent { width: 34px; height: 34px; }
-.agent.working::after { border-color: var(--fc); }
-.agent[data-familiar="flame"] { --fc: #f08a3c; background-image: url("/art/familiars/flame.png"); }
-.agent[data-familiar="leaf"] { --fc: #5fd068; background-image: url("/art/familiars/leaf.png"); }
-.agent[data-familiar="night"] { --fc: #a66cf0; background-image: url("/art/familiars/night.png"); }
-.agent[data-familiar="aether"] { --fc: #7cc8ff; background-image: url("/art/familiars/aether.png"); }
-
-.meter-label { padding-left: 18px; background: url("/art/ui/gem-vitality.png") left center / 14px auto no-repeat; }
-.meter + .meter .meter-label { background-image: url("/art/ui/gem-mana.png"); }
-.meter-bar, .stat-bar { height: 7px; }
-.model-stats-head { color: var(--gold-ink); }
-.stat-tier { border-radius: 3px; font-family: var(--font-display); }
-.tier-s .stat-tier { color: #2b1b06; background: linear-gradient(180deg, #fbe9bd 0%, #e2b867 55%, #a97b35 100%); }
-
-.tip {
-  background: #14120f; color: #ece4d1; border: 1px solid #4a3d25;
-  box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 10px 28px rgba(0, 0, 0, 0.45);
-}
-.tip strong { color: #f0cf8a; font-family: var(--font-display); }
-
-.models::after, .auth::after {
-  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
-  border: 54px solid transparent; border-image: url("/art/ui/frame-ornate.png") 232;
-}
-.models-bar { padding: 30px 36px 12px; }
-.models-body { margin: 0 24px; padding: 0 12px 14px; }
-.models-source { padding: 10px 36px 30px; }
-.history-tools { padding: 10px 36px 0; }
-.history-form { padding: 10px 36px 30px; }
-.github-accounts { padding: 10px 36px; }
-.model-group h4, .news-day, .changelog-type { font-family: var(--font-display); letter-spacing: 0.08em; color: var(--gold-ink); }
-.news-bar { padding: 16px 18px 12px; }
-.news-filters, .news-status { padding-left: 18px; padding-right: 18px; }
-.news-body { padding: 0 18px 14px; }
-.news-row { transition: background-color 0.15s; }
-.news-row:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); }
-.news-row:first-child { border-radius: 6px 6px 0 0; }
-.news-row:last-child { border-radius: 0 0 6px 6px; }
-
-.terminal-panel { border-radius: 6px; }
-.panel-bar { padding: 10px 14px; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent) 1; }
-
-.auth { position: relative; border-radius: 6px; padding: 40px 44px; }
-.auth pre { color: var(--gold-ink); }
-
-:where(:root[data-theme="dark"]) {
-  --gold-dim: #8a6d3b;
-  --card-bg: rgba(18, 20, 26, 0.9);
-  --glint: rgba(255, 238, 200, 0.1);
-  --empty-shadow: rgba(0, 0, 0, 0.55);
-  --page-art: image-set(url("/art/page.avif") type("image/avif"), url("/art/page.webp") type("image/webp"));
-
-  body { background: #0b0c10; }
-  .topbar { background: rgba(12, 13, 17, 0.88); backdrop-filter: blur(6px); }
-
-  .provider, .session-card {
-    background: var(--card-bg);
-    border: 1px solid color-mix(in srgb, var(--pc) 35%, #2a303b);
-    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
-  }
-  .provider:hover, .session-card:hover {
-    border-color: color-mix(in srgb, var(--pc) 70%, #2a303b);
-    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.1), 0 0 22px color-mix(in srgb, var(--pc) 22%, transparent);
-  }
-
-  .provider { padding-top: 188px; }
-  .provider .card-art {
-    inset: 0 0 auto 0; height: 250px;
-    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
-  }
-  .provider .card-art::before { background-size: cover; background-position: center top; }
-  .provider.unavailable { border-color: #2a2d33; }
-  .provider .vendor { color: #f3ead8; }
-
-  .session-card { padding-left: 152px; }
-  .session-card .card-art, .session-card .card-aura {
-    inset: 0 auto 0 0; width: 168px;
-    mask-image: linear-gradient(to right, #000 62%, transparent 100%);
-  }
-  .session-card .card-aura {
-    mask-image: linear-gradient(to right, #000 62%, transparent 100%), linear-gradient(transparent, #000 22%, #000 78%, transparent);
-    mask-composite: intersect;
-  }
-  .session-card .card-art::before, .session-card .card-art::after { background-size: 168px auto; background-position: center top; }
-  .session-card:has(.status-pill.active) {
-    border-color: color-mix(in srgb, var(--pc) 75%, #2a303b);
-    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.1), 0 0 26px color-mix(in srgb, var(--pc) 28%, transparent);
-  }
-  .session-card.exited .card-art { filter: grayscale(1) brightness(0.7); }
-
-  .meter-bar, .stat-bar { background: #0c0e12; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.18); }
-  .meter-fill { background: linear-gradient(90deg, #1f9d5c, #52e08f); box-shadow: 0 0 8px rgba(82, 224, 143, 0.55); }
-  .meter + .meter .meter-fill { background: linear-gradient(90deg, #2a62c9, #5ba6ff); box-shadow: 0 0 8px rgba(91, 166, 255, 0.55); }
-  .meter.low .meter-fill { background: var(--warn); box-shadow: 0 0 8px rgba(224, 168, 74, 0.5); }
-  .meter.empty .meter-fill { background: var(--danger); box-shadow: 0 0 8px rgba(239, 107, 102, 0.5); }
-
-  .info { color: #b89a5e; }
-  .info:hover, .info:focus-visible { color: var(--gold); }
-  .stat-fill {
-    background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 55%, #000), var(--tier));
-    box-shadow: 0 0 8px color-mix(in srgb, var(--tier) 50%, transparent);
-  }
-  .stat-tier {
-    background: linear-gradient(color-mix(in srgb, var(--tier) 34%, #1a1d26), #0d0f15);
-    border-color: color-mix(in srgb, var(--tier) 70%, #000);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 6px color-mix(in srgb, var(--tier) 30%, transparent);
-  }
-  .tier-s .stat-tier { border-color: #f6dea6; box-shadow: 0 0 10px rgba(232, 196, 124, 0.6); }
-
-  .models {
-    border-radius: 6px; border-color: #4a3d25; background: #12141a;
-    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 24px 60px rgba(0, 0, 0, 0.6);
-  }
-  .models::backdrop { background: rgba(5, 6, 9, 0.72); }
-  .models-bar, .models-source, .model-columns, .model { border-color: #2a2418; }
-  .model-columns { background: #12141a; }
-  .model-toggle:hover { background: rgba(232, 196, 124, 0.06); }
-  .model-group h4 { color: #c9ab72; }
-  .badge { background: rgba(0, 0, 0, 0.45); border-color: #4a3d25; }
-  .model-pill:hover { border-color: var(--gold-dim); }
-
-  .news-latest {
-    border-radius: 6px; border-color: #4a3d25; background: var(--card-bg);
-    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
-  }
-  .news-row + .news-row, .news-bar, .news-filters, .news-item, .news-status, .changelog-release + .changelog-release { border-color: #2a2418; }
-  .news-link { color: #f3ead8; }
-  a.news-link:visited { color: var(--muted); }
-  .news-panel {
-    background: #12141a; border-left-color: #4a3d25;
-    box-shadow: inset 1px 0 0 rgba(232, 196, 124, 0.08), -24px 0 60px rgba(0, 0, 0, 0.6);
-  }
-  .news-panel::backdrop { background: rgba(5, 6, 9, 0.72); }
-  .news-day { background: #12141a; color: #c9ab72; }
-  .changelog-type { color: #c9ab72; }
-  .news-filter { border-color: #4a3d25; background: rgba(0, 0, 0, 0.35); }
-  .news-filter:hover { border-color: var(--gold-dim); }
-  .news-filter[aria-pressed="true"] { border-color: #b8955a; color: #fff; background: #5b40d0 linear-gradient(#7a5fe6, #4f34bf); }
-
-  .status-pill { background: rgba(0, 0, 0, 0.45); border: 1px solid #4a3d25; }
-  .status-pill.active { border-color: color-mix(in srgb, var(--ok) 55%, transparent); box-shadow: 0 0 10px rgba(76, 195, 138, 0.25); }
-  .model-pill { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
-  .provider .tier { background: rgba(0, 0, 0, 0.45); border-color: #4a3d25; color: var(--gold); }
-
-  .btn {
-    border-color: #4a3d25;
-    background: linear-gradient(#242834, #171a22);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5);
-  }
-  .btn:hover { border-color: var(--gold-dim); }
-  .btn.primary {
-    border-color: #b8955a; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
-    background: #5b40d0 linear-gradient(#7a5fe6, #4f34bf);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 10px rgba(91, 64, 208, 0.35);
-  }
-  .btn.primary:hover { border-color: var(--gold); filter: brightness(1.08); }
-  .btn.danger { color: #ff9a94; }
-  .btn.danger:hover { border-color: #b8524d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 12px rgba(239, 107, 102, 0.3); }
-  .cwd input, .auth input { border-color: #4a3d25; background: rgba(12, 13, 17, 0.8); }
-  .auth {
-    background: var(--card-bg);
-    border: 1px solid #4a3d25; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
-  }
-  .auth pre { background: rgba(12, 13, 17, 0.8); border: 1px solid #2a2418; }
-  .notice h2 { color: #ff9a94; }
-  .notice.stopping h2 { color: var(--gold); }
-  .terminal-panel { border-color: #4a3d25; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 24px 60px rgba(0, 0, 0, 0.6); }
-  .panel-bar { background: linear-gradient(#1a1d25, #121419); }
-
-  @media (max-width: 640px) {
-    .session-card { padding-left: 118px; }
-    .session-card .card-art, .session-card .card-aura { width: 132px; }
-    .session-card .card-art::before, .session-card .card-art::after { background-size: 132px auto; }
-  }
-}
-
-:where(:root[data-theme="light"]) {
-  --page-art: image-set(url("/art/page-light.avif") type("image/avif"), url("/art/page-light.webp") type("image/webp"));
-  --glint: rgba(255, 244, 214, 0.26);
-  --empty-shadow: rgba(70, 48, 12, 0.28);
-  --card-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(70, 48, 12, 0.08), 0 10px 26px rgba(70, 48, 12, 0.1);
-
-  body { background: #eee5d4; }
-  .topbar { background: rgba(255, 252, 246, 0.9); backdrop-filter: blur(6px); }
-
-  .provider, .session-card {
-    background: var(--surface);
-    border: 1px solid #e4d6b6;
-    box-shadow: var(--card-shadow);
-  }
-  .provider:hover, .session-card:hover {
-    border-color: color-mix(in srgb, var(--pc) 40%, #d7c49b);
-    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(70, 48, 12, 0.08), 0 14px 34px rgba(70, 48, 12, 0.15);
-  }
-  .card-art {
-    border-radius: 3px;
-    background: radial-gradient(85% 70% at 50% 34%, color-mix(in srgb, var(--pc) 46%, #1d1726) 0%, #120f17 74%);
-    box-shadow: inset 0 0 0 1px rgba(255, 233, 186, 0.3), 0 0 0 1px #c9a45e, 0 1px 3px rgba(70, 48, 12, 0.3);
-  }
-  .provider .card-art::after {
-    content: ""; position: absolute; inset: 0;
-    background: linear-gradient(transparent 58%, rgba(10, 8, 14, 0.45));
-    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55);
-  }
-
-  .provider { padding-top: 242px; }
-  .provider .card-art { inset: 14px 14px auto; height: 214px; }
-  .provider .card-art::before { background-size: 112% auto; background-position: 50% 4%; }
-  .provider.unavailable .card-art { background: radial-gradient(85% 70% at 50% 34%, #45434a 0%, #17161a 74%); }
-  .provider-icon:not(.has-image)[data-provider] { box-shadow: 0 0 0 1px #c9a45e, 0 1px 3px rgba(70, 48, 12, 0.3); }
-
-  .session-card { padding-left: 160px; }
-  .session-card .card-art, .session-card .card-aura { inset: 14px auto 14px 14px; width: 132px; border-radius: 3px; }
-  .session-card .card-aura { mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
-  .session-card .card-art::before, .session-card .card-art::after { background-size: 160% auto; background-position: 50% 8%; }
-  .session-card:has(.status-pill.active) {
-    border-color: color-mix(in srgb, var(--pc) 55%, #d7c49b);
-    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(70, 48, 12, 0.08), 0 12px 30px color-mix(in srgb, var(--pc) 22%, rgba(70, 48, 12, 0.12));
-  }
-  .session-card.exited .card-art { filter: grayscale(1) brightness(0.9); }
-
-  .meter-bar, .stat-bar { background: #ebe2cd; box-shadow: inset 0 1px 2px rgba(70, 48, 12, 0.2); }
-  .meter-fill { background: linear-gradient(90deg, #1b7a45, #31a868); }
-  .meter + .meter .meter-fill { background: linear-gradient(90deg, #2a57b0, #4382e2); }
-  .meter.low .meter-fill { background: linear-gradient(90deg, #9a5f00, #d08a14); }
-  .meter.empty .meter-fill { background: linear-gradient(90deg, #a8302b, #d24a43); }
-  .stat-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 72%, #3a2a10), var(--tier)); }
-  .stat-tier {
-    background: linear-gradient(color-mix(in srgb, var(--tier) 10%, #fffdf8), color-mix(in srgb, var(--tier) 24%, #fffdf8));
-    border-color: color-mix(in srgb, var(--tier) 55%, #fff);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
-  }
-  .tier-s .stat-tier { color: #3a2604; border-color: #b8892f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(150, 100, 20, 0.35); }
-
-  .models { border-color: #d8c597; box-shadow: 0 24px 60px rgba(40, 28, 8, 0.28); }
-  .models::backdrop { background: rgba(40, 30, 14, 0.38); }
-  .model-toggle:hover { background: #f6eedd; }
-
-  .news-latest { border-color: #e4d6b6; box-shadow: 0 1px 2px rgba(70, 48, 12, 0.08), 0 10px 26px rgba(70, 48, 12, 0.08); }
-  .news-panel { border-left-color: #e2d3b2; box-shadow: -24px 0 60px rgba(40, 28, 8, 0.22); }
-  .news-panel::backdrop { background: rgba(40, 30, 14, 0.3); }
-
-  .status-pill { background: #f6efe0; border: 1px solid #e2d3b2; }
-  .status-pill.active { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 8%, #fffcf6); }
-  .status-pill.exited { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 6%, #fffcf6); }
-  .model-pill { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 9%, #fffcf6); }
-  .provider .tier { color: #5c3f08; border-color: #d4b06a; background: linear-gradient(#fbf0d2, #f1dfb2); }
-
-  .btn {
-    border-color: #d8c597;
-    background: linear-gradient(#fffefa, #f2e9d6);
-    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(70, 48, 12, 0.12);
-  }
-  .btn:hover { border-color: #b8892f; }
-  .btn.primary {
-    border-color: #8f6d2a; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-    background: #5a3fc0 linear-gradient(#6c51d6, #4a30ad);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(74, 48, 173, 0.28);
-  }
-  .btn.primary:hover { border-color: #b8892f; filter: brightness(1.08); }
-  .btn.danger:hover { border-color: #c4625d; }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input {
-    border-color: #dccba5; background: #fffdf8; box-shadow: inset 0 1px 2px rgba(70, 48, 12, 0.06);
-  }
-  .auth { border-color: #e4d6b6; box-shadow: var(--card-shadow); }
-  .auth pre { background: #f6efe0; border: 1px solid #e4d6b6; }
-  .terminal-panel { border-color: #c9b07a; box-shadow: 0 24px 60px rgba(40, 28, 8, 0.35); }
-  .panel-bar { background: linear-gradient(#fffdf8, #f3ead7); }
-
-  @media (max-width: 640px) {
-    .session-card { padding-left: 140px; }
-    .session-card .card-art, .session-card .card-aura { width: 112px; }
-    .session-card .card-art::before, .session-card .card-art::after { background-size: 165% auto; }
-  }
-}
-
-@media (max-width: 640px) {
-  .models::after, .auth::after { border-width: 40px; }
-  .models-bar { padding: 24px 26px 10px; }
-  .models-body { margin: 0 16px; padding: 0 10px 12px; }
-  .models-source { padding: 10px 26px 24px; }
-  .history-tools { padding: 10px 26px 0; }
-  .history-form { padding: 10px 26px 24px; }
-  .github-accounts { padding: 10px 26px; }
-  .auth { padding: 32px 30px; }
-}
-
-@keyframes deal { from { opacity: 0; transform: translateY(16px) rotate(-1.2deg) scale(0.97); } }
-@keyframes card-enter { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
-@keyframes aura { from { opacity: 0.5; transform: scale(0.97); } to { opacity: 1; transform: scale(1.03); } }
-@keyframes sparks { to { transform: translateY(-96px); } }
-@keyframes level-up { 30% { transform: scale(1.28); filter: brightness(1.5) drop-shadow(0 0 8px #f6dea6); } }
-@keyframes summon { from { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.15); } }
-@keyframes splash { from { opacity: 0.3; transform: scale(0.95); } to { opacity: 0.85; transform: scale(1.03); } }
-
-@media (prefers-reduced-motion: reduce) {
-  .provider, .session-card, .card-aura, .session-card .card-art::after, .provider .card-art::before { transition: none; }
-  .provider:hover, .session-card:hover, .provider:hover .card-art::before { transform: none; }
-  .provider::before { display: none; }
-  .providers.deal > .provider, .session-card.enter, .level-badge.level-up, .agent.summon,
-  .session-card:has(.status-pill.active) .card-aura::before, .session-card:has(.status-pill.active) .card-aura::after,
-  body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after { animation: none; }
-}