@oddessentials/agent-guild 0.7.1 → 0.9.0

package/web/skins/guild/skin.css

@@ -0,0 +1,502 @@
+/* The Guild skin: the default. Fantasy guild-hall art and a parchment-and-gold palette.
+   Everything here applies only while <html data-skin="guild">; docs/SKINS.md lists every slot. */
+
+:where(:root[data-skin="guild"]) {
+  --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;
+  --shadow: 0 1px 2px rgba(70, 48, 12, 0.08), 0 4px 14px rgba(70, 48, 12, 0.08);
+  --radius: 6px;
+  --font-display: var(--font-brand);
+}
+
+:where(:root[data-skin="guild"][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;
+  --shadow: none;
+}
+
+:where(:root[data-skin="guild"]) {
+  .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("characters/shell/idle.avif") type("image/avif"), url("characters/shell/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/shell/working.avif") type("image/avif"), url("characters/shell/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/shell/locked.avif") type("image/avif"), url("characters/shell/locked.webp") type("image/webp"));
+  }
+  .provider[data-id="anthropic"], .session-card[data-provider="anthropic"] {
+    --pc: #d97757;
+    --idle: image-set(url("characters/anthropic/idle.avif") type("image/avif"), url("characters/anthropic/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/anthropic/working.avif") type("image/avif"), url("characters/anthropic/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/anthropic/locked.avif") type("image/avif"), url("characters/anthropic/locked.webp") type("image/webp"));
+  }
+  .provider[data-id="openai"], .session-card[data-provider="openai"] {
+    --pc: #1fd08f;
+    --idle: image-set(url("characters/openai/idle.avif") type("image/avif"), url("characters/openai/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/openai/working.avif") type("image/avif"), url("characters/openai/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/openai/locked.avif") type("image/avif"), url("characters/openai/locked.webp") type("image/webp"));
+  }
+  .provider[data-id="google"], .session-card[data-provider="google"] {
+    --pc: #5b9cff;
+    --idle: image-set(url("characters/google/idle.avif") type("image/avif"), url("characters/google/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/google/working.avif") type("image/avif"), url("characters/google/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/google/locked.avif") type("image/avif"), url("characters/google/locked.webp") type("image/webp"));
+  }
+  .provider[data-id="xai"], .session-card[data-provider="xai"] {
+    --pc: #38d6e8;
+    --idle: image-set(url("characters/xai/idle.avif") type("image/avif"), url("characters/xai/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/xai/working.avif") type("image/avif"), url("characters/xai/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/xai/locked.avif") type("image/avif"), url("characters/xai/locked.webp") type("image/webp"));
+  }
+
+  .provider-icon[data-provider="anthropic"] { --icon: image-set(url("icons/anthropic.avif") type("image/avif"), url("icons/anthropic.webp") type("image/webp")); }
+  .provider-icon[data-provider="openai"] { --icon: image-set(url("icons/openai.avif") type("image/avif"), url("icons/openai.webp") type("image/webp")); }
+  .provider-icon[data-provider="google"] { --icon: image-set(url("icons/google.avif") type("image/avif"), url("icons/google.webp") type("image/webp")); }
+  .provider-icon[data-provider="xai"] { --icon: image-set(url("icons/xai.avif") type("image/avif"), url("icons/xai.webp") type("image/webp")); }
+  .provider-icon[data-provider="shell"] { --icon: image-set(url("icons/shell.avif") type("image/avif"), url("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: guild-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: guild-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("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("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: guild-aura 3.6s ease-in-out infinite alternate; }
+  .session-card:has(.status-pill.active) .card-aura::after { animation: guild-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("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: guild-level-up 1.2s var(--ease); }
+  .agent.summon { animation: guild-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("ui/empty-state.avif") type("image/avif"), url("ui/empty-state.webp") type("image/webp")) center / contain no-repeat;
+    filter: drop-shadow(0 12px 14px var(--empty-shadow));
+  }
+
+  .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("familiars/flame.png"); }
+  .agent[data-familiar="leaf"] { --fc: #5fd068; background-image: url("familiars/leaf.png"); }
+  .agent[data-familiar="night"] { --fc: #a66cf0; background-image: url("familiars/night.png"); }
+  .agent[data-familiar="aether"] { --fc: #7cc8ff; background-image: url("familiars/aether.png"); }
+
+  .meter-label { padding-left: 18px; background: url("ui/gem-vitality.png") left center / 14px auto no-repeat; }
+  .meter + .meter .meter-label { background-image: url("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("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); }
+
+  @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; }
+  }
+
+  @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 { animation: none; }
+  }
+}
+
+:where(:root[data-skin="guild"][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("page.avif") type("image/avif"), url("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-skin="guild"][data-theme="light"]) {
+  --page-art: image-set(url("page-light.avif") type("image/avif"), url("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; }
+  }
+}
+
+@keyframes guild-deal { from { opacity: 0; transform: translateY(16px) rotate(-1.2deg) scale(0.97); } }
+@keyframes guild-card-enter { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
+@keyframes guild-aura { from { opacity: 0.5; transform: scale(0.97); } to { opacity: 1; transform: scale(1.03); } }
+@keyframes guild-sparks { to { transform: translateY(-96px); } }
+@keyframes guild-level-up { 30% { transform: scale(1.28); filter: brightness(1.5) drop-shadow(0 0 8px #f6dea6); } }
+@keyframes guild-summon { from { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.15); } }
+