@oddessentials/agent-guild 0.5.0 → 0.6.0

package/web/art/art.css

@@ -1,153 +1,280 @@
-.level-badge { display: none; }
+.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; }
+.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); }
 
-/* The guild look is the dark theme. The rules below nest under the theme
-   attribute that theme.js sets on <html>, so they apply whether the user
-   chose dark or the system did. :where() keeps their specificity as it was
-   inside the media query, so styles.css still loses to them only on order. */
 :where(:root[data-theme="dark"]) {
-  --gold: #e8c47c;
   --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"));
 
-  .provider, .session-card {
-    --pc: #a67cf6;
-    --idle: url("/art/characters/shell/idle.png");
-    --working: url("/art/characters/shell/working.png");
-    --locked: url("/art/characters/shell/locked.png");
-  }
-  .provider[data-id="anthropic"], .session-card[data-provider="anthropic"] {
-    --pc: #d97757;
-    --idle: url("/art/characters/anthropic/idle.png");
-    --working: url("/art/characters/anthropic/working.png");
-    --locked: url("/art/characters/anthropic/locked.png");
-  }
-  .provider[data-id="openai"], .session-card[data-provider="openai"] {
-    --pc: #1fd08f;
-    --idle: url("/art/characters/openai/idle.png");
-    --working: url("/art/characters/openai/working.png");
-    --locked: url("/art/characters/openai/locked.png");
-  }
-  .provider[data-id="google"], .session-card[data-provider="google"] {
-    --pc: #5b9cff;
-    --idle: url("/art/characters/google/idle.png");
-    --working: url("/art/characters/google/working.png");
-    --locked: url("/art/characters/google/locked.png");
-  }
-  .provider[data-id="xai"], .session-card[data-provider="xai"] {
-    --pc: #38d6e8;
-    --idle: url("/art/characters/xai/idle.png");
-    --working: url("/art/characters/xai/working.png");
-    --locked: url("/art/characters/xai/locked.png");
-  }
-
-  .provider-icon[data-provider="anthropic"] { --icon: url("/art/icons/anthropic.png"); }
-  .provider-icon[data-provider="openai"] { --icon: url("/art/icons/openai.png"); }
-  .provider-icon[data-provider="google"] { --icon: url("/art/icons/google.png"); }
-  .provider-icon[data-provider="xai"] { --icon: url("/art/icons/xai.png"); }
-  .provider-icon[data-provider="shell"] { --icon: url("/art/icons/shell.png"); }
-  .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 { background: #0b0c10 url("/art/page.png") center bottom / cover fixed; }
-  .topbar { background: rgba(12, 13, 17, 0.88); backdrop-filter: blur(6px); border-bottom-color: #2a2418; }
-  .brand-mark { display: none; }
-  .brand::before {
-    content: ""; width: 34px; height: 34px; flex: none;
-    background: url("/art/ui/guild-crest.png") center / contain no-repeat;
-  }
-  h1, h2 { font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; letter-spacing: 0.01em; }
-  h1 {
-    font-size: 1.3rem; font-weight: 600; color: var(--gold);
-    background: linear-gradient(180deg, #fbe9bd 0%, #e2b867 55%, #a97b35 100%);
-    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
-  }
-  h2 { color: #f1e2c2; font-size: 1.15rem; font-weight: 600; }
+  body { background: #0b0c10; }
+  .topbar { background: rgba(12, 13, 17, 0.88); backdrop-filter: blur(6px); }
 
   .provider, .session-card {
-    position: relative; isolation: isolate; overflow: hidden;
-    border-radius: 6px; padding: 18px;
     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);
-    transition: border-color 0.2s, box-shadow 0.2s;
   }
   .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::before, .session-card::before {
-    content: ""; position: absolute; z-index: -1; pointer-events: none;
-    background-repeat: no-repeat; background-size: cover; background-position: center top;
-  }
-  .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;
-  }
 
-  .provider { padding-top: 188px; align-content: start; }
-  .provider::before {
+  .provider { padding-top: 188px; }
+  .provider .card-art {
     inset: 0 0 auto 0; height: 250px;
-    background-image: var(--idle);
-    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
-            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
   }
-  .provider.unavailable::before { background-image: var(--locked); }
+  .provider .card-art::before { background-size: cover; background-position: center top; }
   .provider.unavailable { border-color: #2a2d33; }
-  .provider.unavailable::after {
-    background: url("/art/ui/padlock.png") right 16px top 14px / 30px 40px no-repeat border-box;
-  }
   .provider .vendor { color: #f3ead8; }
 
-  .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 { height: 7px; background: #0c0e12; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.18); }
+  .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); }
 
-  .model-stats-head { color: var(--gold); }
   .info { color: #b89a5e; }
   .info:hover, .info:focus-visible { color: var(--gold); }
-  .tip {
-    background: #12141a; color: #e9e2cf; 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.6);
-  }
-  .tip strong { color: var(--gold); font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
-  .stat-bar { height: 7px; background: #0c0e12; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.18); }
   .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 {
-    border-radius: 3px; font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
     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 {
-    color: #2b1b06; border-color: #f6dea6;
-    background: linear-gradient(180deg, #fbe9bd 0%, #e2b867 55%, #a97b35 100%);
-    box-shadow: 0 0 10px rgba(232, 196, 124, 0.6);
-  }
+  .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::after {
-    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
-    border: 44px solid transparent; border-image: url("/art/ui/frame.png") 168;
-  }
   .models::backdrop { background: rgba(5, 6, 9, 0.72); }
-  .models-bar { padding: 20px 24px 12px; }
-  .models-body { padding: 0 24px 14px; }
-  .models-source { padding: 10px 24px 20px; }
   .models-bar, .models-source, .model-columns, .model { border-color: #2a2418; }
   .model-columns { background: #12141a; }
   .model-toggle:hover { background: rgba(232, 196, 124, 0.06); }
@@ -159,7 +286,7 @@
     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 { border-color: #2a2418; }
+  .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 {
@@ -167,86 +294,172 @@
     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-bar { padding: 16px 18px 12px; }
-  .news-filters, .news-status { padding-left: 18px; padding-right: 18px; }
-  .news-body { padding: 0 18px 14px; }
   .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: linear-gradient(#8e8ef6, #6262d6); }
-
-  .session-card { padding-left: 152px; min-height: 196px; }
-  .session-card::before {
-    inset: 0 auto 0 0; width: 168px; background-size: 168px auto;
-    background-image: var(--idle);
-    -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
-            mask-image: linear-gradient(to right, #000 62%, transparent 100%);
-  }
-  .session-card:has(.status-pill.active)::before { background-image: var(--working); }
-  .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::before { filter: grayscale(1) brightness(0.7); }
-  .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 "Palatino Linotype", Palatino, Georgia, serif; color: #f6dea6;
-    text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.8);
-  }
-
-  .session-card .agent {
-    width: 34px; height: 34px; 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.working::after { border-color: var(--fc); }
-  .session-card .agent[data-familiar="flame"] { --fc: #f08a3c; background-image: url("/art/familiars/flame.png"); }
-  .session-card .agent[data-familiar="leaf"] { --fc: #5fd068; background-image: url("/art/familiars/leaf.png"); }
-  .session-card .agent[data-familiar="night"] { --fc: #a66cf0; background-image: url("/art/familiars/night.png"); }
-  .session-card .agent[data-familiar="aether"] { --fc: #7cc8ff; background-image: url("/art/familiars/aether.png"); }
+  .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-radius: 6px; border-color: #4a3d25;
+    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: linear-gradient(#8e8ef6, #6262d6);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 8px rgba(124, 124, 240, 0.25);
+    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 {
-    border-radius: 6px; padding: 28px; background: var(--card-bg);
+    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; color: var(--gold); }
+  .auth pre { background: rgba(12, 13, 17, 0.8); border: 1px solid #2a2418; }
   .notice h2 { color: #ff9a94; }
   .notice.stopping h2 { color: var(--gold); }
-  .status-pill.active { border-color: color-mix(in srgb, var(--ok) 55%, transparent); box-shadow: 0 0 10px rgba(76, 195, 138, 0.25); }
+  .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::before { width: 132px; background-size: 132px auto; }
+    .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); }
 
-  @media (prefers-reduced-motion: reduce) {
-    .provider, .session-card { transition: none; }
+  .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; }
+  .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; }
+}