body {
  --surface-solid: #fff;
  --surface-muted: #f4f6f5;
  --surface-border: #e2e7e5;
  --ink-strong: #172923;
  --ink-soft: #718079;
  --accent-rgb: 24, 132, 90;
  --accent: #18845a;
  --accent-strong: #18845a;
  --accent-text: #16704e;
  --accent-soft: #e7f4ed;
  --group-green: #347a62;
  --group-green-soft: #eef5f1;
  --group-blue: #427798;
  --group-blue-soft: #eff4f9;
  --group-rose: #996078;
  --group-rose-soft: #f7f0f3;
  --group-gold: #8c742e;
  --group-gold-soft: #f6f4ec;
  --group-divider: #dce2e5;
  background: #f5f7f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}
.pg { max-width: none; padding: 32px 28px 48px; }
.pg-heading { display: none; }
.axis-notice {
  display: flex; align-items: flex-start; gap: 9px; padding: 12px 15px; margin: 0 0 20px;
  border: 1px solid #bfe5fa; border-radius: 8px; background: #eff9ff;
  color: #376f90; font-size: 12px; line-height: 20px;
}
.axis-icon { display: block; flex: 0 0 auto; width: 17px; height: 17px; }
.axis-notice .axis-icon { color: #36a9e1; margin-top: 2px; }
.axis-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; min-width: 0; }
.axis-filters { display: flex; align-items: center; gap: 3px; overflow-x: auto; max-width: 100%; padding: 3px; border: 1px solid #e7ebe9; border-radius: 8px; background: #edf0ee; scrollbar-width: thin; }
.axis-filter { display: flex; align-items: center; gap: 9px; flex-shrink: 0; min-height: 28px; padding: 5px 11px; border: 0; border-radius: 5px; background: transparent; color: #77837e; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.axis-filter[aria-selected="true"] { color: #182b23; background: #fff; font-weight: 600; box-shadow: 0 1px 3px #1729230d; }
.axis-filter:hover { color: #172923; }
.axis-filter-count { font-weight: 400; color: #929d97; font-variant-numeric: tabular-nums; }
.axis-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-left: auto; color: #7a8781; font-size: 11px; }
.axis-tools .pg-status { margin: 0; font-size: 11px; }
.axis-tools .pg-status.axis-error { color: #b04444; }
.axis-zone { white-space: nowrap; }
.axis-api { display: inline-flex; align-items: center; gap: 5px; color: #6c7a73; text-decoration: none; white-space: nowrap; }
.axis-api:hover { color: #18845a; }
.axis-api .axis-icon { width: 14px; height: 14px; }
.axis-refresh { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 5px; background: transparent; color: #6c7a73; cursor: pointer; }
.axis-refresh:hover { background: #e5ede8; color: #18845a; }
.axis-refresh:disabled { opacity: .45; cursor: wait; }
.axis-filter:focus-visible, .axis-refresh:focus-visible, .axis-api:focus-visible { outline: 2px solid #18845a; outline-offset: 2px; }
.axis-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.groups { border: 0; background: transparent; }
.g-row { --group-accent: var(--group-green); --group-soft: var(--group-green-soft); display: block; padding: 0 0 20px; margin: 0 0 24px; border-bottom: 1px solid var(--group-divider); }
.g-row + .g-row { border-top: 0; }
.g-row:nth-child(4n + 2) { --group-accent: var(--group-blue); --group-soft: var(--group-blue-soft); }
.g-row:nth-child(4n + 3) { --group-accent: var(--group-rose); --group-soft: var(--group-rose-soft); }
.g-row:nth-child(4n + 4) { --group-accent: var(--group-gold); --group-soft: var(--group-gold-soft); }
.g-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.g-key { display: grid; justify-content: stretch; grid-template-columns: minmax(0, 1fr); width: fit-content; max-width: min(100%, 480px); gap: 8px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--group-accent) 15%, transparent); border-left: 3px solid var(--group-accent); border-radius: 6px; background: var(--group-soft); }
.g-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; }
.axis-provider { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--group-accent) 12%, transparent); border-radius: 6px; background: #ffffffb3; color: var(--group-accent); }
.axis-provider .axis-icon { width: 18px; height: 18px; }
.g-heading h2 { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 21px; font-weight: 650; overflow-wrap: anywhere; }
.g-count, .g-meta { display: none; }
.axis-group-total { grid-column: 3; grid-row: 1; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--group-accent) 8%, transparent); color: var(--group-accent); font-size: 10px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.axis-group-summary { grid-column: 2 / 4; grid-row: 2; color: #728078; font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
.g-tabs { display: flex; gap: 4px; margin: 1px 0 0 44px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--group-accent) 12%, transparent); overflow-x: auto; scrollbar-width: thin; }
.g-tab { flex-shrink: 0; padding: 3px 7px; min-height: 24px; font-size: 11px; border-radius: 4px; }
.g-tab.active { background: #ffffffc7; color: var(--group-accent); }
.g-strip { display: flex; align-items: stretch; gap: 18px; padding: 4px 3px 14px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #a5afaa #e3e8e5; scroll-snap-type: x proximity; }
.g-strip::-webkit-scrollbar { height: 6px; }
.g-strip::-webkit-scrollbar-track { background: #e3e8e5; border-radius: 3px; }
.g-strip::-webkit-scrollbar-thumb { background: #a5afaa; border-radius: 3px; }
.g-card { flex: 0 0 290px; border: 1px solid #e1e7e3; border-radius: 8px; box-shadow: 0 1px 2px #182b2310; scroll-snap-align: start; background: #fff; }
.g-card:hover { border-color: #bdcdc3; box-shadow: 0 3px 10px #182b2312; }
.g-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }
.g-card .image { aspect-ratio: 4 / 3; border-bottom: 1px solid #edf0ee; background: #f0f3f1; }
.g-card .image iframe { position: absolute; flex: none; max-width: none; transform-origin: top left; }
.g-card .image .card-badge { display: none; }
.g-card .image.axis-text-thumbnail { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 14px; background: #fafcfb; text-align: left; }
.axis-text-label { flex: none; color: #328366; font-size: 11px; line-height: 16px; font-weight: 600; }
.axis-text-excerpt { min-width: 0; min-height: 0; overflow: hidden; color: #52615a; font: 12px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; pointer-events: none; }
.axis-text-excerpt :is(p, ul, ol, blockquote, pre, table) { margin-bottom: 8px; }
.axis-text-excerpt :is(h1, h2, h3, h4, h5, h6) { margin: 10px 0 6px; font-size: 13px; }
.axis-text-excerpt > :first-child { margin-top: 0; }
.axis-text-excerpt table { display: table; width: 100%; table-layout: fixed; font-size: 11px; }
.axis-text-excerpt :is(th, td) { min-width: 0; padding: 4px; overflow-wrap: anywhere; }
.axis-text-excerpt pre { overflow: hidden; }
.axis-text-excerpt input { pointer-events: none; }
.g-card .info { display: grid; gap: 4px; padding: 10px 13px 11px; min-height: 62px; }
.axis-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.g-card .label { flex: 1; min-width: 0; font: 12px/18px ui-monospace, SFMono-Regular, Consolas, monospace; color: #34463d; font-weight: 500; }
.axis-thinking { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 17px; padding: 0 5px; border-radius: 4px; background: #f1f3f2; color: #758179; }
.axis-thinking.axis-failure { color: #b34e4e; background: #fff1f1; }
.g-card .result { display: none; }
.g-card .bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2px 8px; border: 0; padding: 0; min-height: 16px; }
.g-card .bottom time, .g-card .duration { font: 11px/16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #8a948f; font-variant-numeric: tabular-nums; }
.g-card.failed { opacity: 1; border-style: solid; border-color: #ead6d6; }
.g-card.failed .image { background: #fff7f7; }
.g-card.live { box-shadow: none; border-color: #9dceaf; }
.g-card.live .live-placeholder { height: auto; background: #eaf5ef; }
.g-card.live .result { display: flex; }
.g-empty { width: 100%; padding: 45px 18px; border: 1px dashed #d9e2dc; border-radius: 8px; color: #7c8982; font-size: 12px; }
.g-more { flex-basis: 130px; padding: 16px; font-size: 11px; }
.axis-history-limit { margin: 0; font-size: 11px; color: #85918b; }
.detail-dialog { border-radius: 8px; max-height: calc(100dvh - 32px); color: #26372f; }
.detail-dialog::backdrop { background: #19251f8c; backdrop-filter: blur(5px); }
.detail-title { overflow-wrap: anywhere; }
#detail-dialog { width: min(1240px, calc(100vw - 64px)); height: min(1120px, calc(100dvh - 64px)); max-width: none; max-height: none; border: 1px solid #dfe6e1; box-shadow: 0 28px 90px #10221940; background: #fff; }
#detail-dialog[open] { display: flex; flex-direction: column; }
#detail-dialog .detail-head { flex: none; gap: 12px; align-items: center; background: #fff; padding: 17px 22px; border-bottom: 1px solid #edf0ee; max-height: 25%; overflow: auto; }
#detail-dialog .detail-head > div { flex: 1; min-width: 0; }
#detail-dialog .detail-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; color: #223a2d; font-size: 15px; line-height: 22px; font-weight: 650; }
.axis-detail-mark { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; color: #26825b; background: #e9f5ee; }
.axis-detail-mark .axis-icon { width: 19px; height: 19px; }
.axis-title-divider { color: #c6cfca; font-weight: 400; }
.axis-detail-model { color: #758078; font: 12px/20px ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.axis-detail-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; flex: none; padding: 14px 24px; max-height: 25%; overflow: auto; }
#detail-dialog .detail-meta { flex: 1; min-width: 0; margin: 0; gap: 8px 18px; color: #818a84; font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; }
.axis-detail-state { display: inline-flex; align-items: center; gap: 6px; padding: 1px 7px; border-radius: 4px; color: #28825a; background: #edf7f1; }
.axis-detail-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.axis-detail-state.is-failed { background: #fff0f0; color: #b34e4e; }
#detail-dialog .detail-body { flex: 1; display: block; min-height: 0; max-height: none; overflow: hidden; }
#detail-dialog .detail-main { height: 100%; min-height: 0; }
.axis-zoom { display: flex; flex: none; gap: 2px; margin-left: auto; padding: 3px; border-radius: 6px; background: #f1f4f2; }
.axis-zoom button { padding: 4px 9px; min-height: 26px; border: 0; border-radius: 4px; color: #8b948f; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.axis-zoom button[aria-pressed="true"] { color: #3a4d40; background: #fff; box-shadow: 0 1px 3px #17292312; }
.axis-zoom button:disabled { opacity: .45; cursor: not-allowed; }
.axis-icon-button { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #859088; cursor: pointer; }
.axis-icon-button:hover { color: #25784f; background: #f0f6f2; }
.axis-icon-button:disabled { opacity: .35; cursor: not-allowed; }
#detail-dialog :is(button, [tabindex]):focus-visible { outline: 2px solid #3c9570; outline-offset: 2px; }
#detail-dialog .detail-preview { display: flex; position: relative; flex: 1; min-height: 0; margin: 0 24px 20px; overflow: auto; overscroll-behavior: contain; border: 1px solid #e5eae7; border-radius: 6px; background: #f2f5f3; }
.axis-preview-size { position: relative; flex: none; margin: auto; overflow: hidden; }
#detail-dialog .detail-preview iframe { position: absolute; inset: 0 auto auto 0; width: 1200px; height: 1000px; min-height: 0; max-width: none; transform-origin: top left; background: #fff; }
.axis-preview-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #829087; background: #f2f5f3; font-size: 12px; pointer-events: none; }
#detail-dialog .detail-preview.is-text { display: block; background: #fff; }
.axis-text-answer { box-sizing: border-box; width: 100%; max-width: 90ch; margin: 0 auto; padding: 24px; overflow-wrap: anywhere; tab-size: 4; color: #34463d; font: 14px/1.9 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; }
.axis-preview-empty { margin: auto; max-width: 520px; padding: 32px; text-align: center; overflow-wrap: anywhere; color: #97a19a; }
.axis-preview-empty .axis-icon { width: 28px; height: 28px; margin: 0 auto 14px; }
.axis-preview-empty h3 { font-size: 15px; font-weight: 500; color: #6f7b73; margin: 0 0 9px; }
.axis-preview-empty p { font-size: 12px; line-height: 1.7; margin: 0; }
#detail-dialog .banner-error { flex: none; max-height: 20%; overflow: auto; margin: 0 24px 10px; font-size: 11px; }
.axis-detail-footer { display: flex; align-items: center; gap: 16px; flex: none; padding: 12px 24px; border-top: 1px solid #edf0ee; background: #fff; }
.axis-preview-safety { display: inline-flex; align-items: center; gap: 6px; color: #8a9b8e; font-size: 11px; white-space: nowrap; }
.axis-preview-safety .axis-icon { width: 14px; height: 14px; }
.axis-detail-done { margin-left: auto; flex-shrink: 0; padding: 7px 17px; border: 1px solid #dfe7e1; border-radius: 6px; background: #fff; color: #68776c; font: inherit; font-size: 12px; cursor: pointer; }
.axis-detail-done:hover { color: #286344; border-color: #a9c4b3; background: #f7faf8; }
@media (max-width: 700px) {
  .pg { padding: 18px 16px 32px; }
  .axis-notice { margin-bottom: 14px; padding: 10px 12px; font-size: 11px; line-height: 18px; }
  .axis-toolbar { gap: 10px; margin-bottom: 20px; }
  .axis-filters { width: 100%; }
  .axis-tools { width: 100%; margin: 0; gap: 10px; }
  .axis-tools .pg-status { margin-right: auto; }
  .g-row { margin-bottom: 20px; padding-bottom: 16px; }
  .g-key { padding: 10px; }
  .g-heading { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 9px; }
  .axis-provider { width: 32px; height: 32px; }
  .g-heading h2 { font-size: 14px; }
  .g-tabs { margin-left: 41px; }
  .g-strip { gap: 12px; }
  .g-card { flex-basis: min(290px, calc(100vw - 56px)); }
  .g-card .info { padding: 9px 11px; }
  #detail-dialog { width: calc(100vw - 20px); height: min(760px, calc(100dvh - 20px)); }
  #detail-dialog .detail-head { padding: 12px; gap: 9px; }
  #detail-dialog .detail-title { font-size: 14px; gap: 1px 8px; }
  .axis-detail-mark { flex-basis: 28px; width: 28px; height: 28px; }
  .axis-detail-model { font-size: 11px; }
  .axis-detail-facts { padding: 12px 14px; }
  #detail-dialog .detail-meta { flex-basis: 100%; gap: 4px 12px; font-size: 10px; }
  #detail-dialog .detail-preview { margin: 0 14px 14px; }
  .axis-detail-footer { gap: 8px; padding: 10px 14px; }
  .axis-text-answer { padding: 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-card { transition: none; }
  .g-strip { scroll-behavior: auto; }
}

/* Embedded galleries share the host's neutral canvas; standalone presentation stays unchanged. */
body.axis-embedded { background: #f5f6f8; --ink-strong: #252b30; --ink-soft: #7e8790; }
.axis-embedded .pg { padding: 24px 30px 36px; }
.axis-embedded .axis-notice { background: #f0f5fa; border-color: #dce6ef; color: #74899b; border-radius: 6px; margin-bottom: 18px; }
.axis-embedded .axis-notice .axis-icon { color: #7ca3c0; }
.axis-embedded .axis-filters { background: #e9ecf0; border-color: #e4e7ec; border-radius: 6px; }
.axis-embedded .axis-filter { color: #7e8790; }
.axis-embedded .axis-filter[aria-selected="true"] { color: #333d43; }
.axis-embedded .axis-toolbar { margin-bottom: 26px; }
.axis-embedded .axis-tools { color: #929aa3; }
.axis-embedded .g-heading h2 { color: #303940; font-size: 15px; }
.axis-embedded .axis-group-summary { color: #78838b; }
.axis-embedded .g-card { border-color: #e0e4e8; box-shadow: 0 2px 4px #20262d05; }
.axis-embedded .g-card:hover { border-color: #abbfb3; box-shadow: 0 4px 14px #20262d0d; }
.axis-embedded .g-card .label { color: #49545e; }
.axis-embedded .g-card .bottom time, .axis-embedded .g-card .duration { color: #8d969f; }
.axis-embedded .axis-thinking { color: #7a858f; background: #f2f4f6; }
.axis-embedded .axis-thinking.axis-failure { color: #b34e4e; background: #fff1f1; }
@media (max-width: 700px) { .axis-embedded .pg { padding: 18px 16px 28px; } }
@media (prefers-color-scheme: dark) {
  body.axis-embedded { background: #17191c; color: #e2e6e9; --ink-strong: #e2e6e9; --ink-soft: #a3abb3; --surface-solid: #24282c; --surface-muted: #1e2225; --surface-border: #373e43; --accent: #80bda0; --accent-text: #80bda0; }
  body.axis-embedded { --group-green: #8abfa5; --group-green-soft: #23312c; --group-blue: #8bb5d3; --group-blue-soft: #242e39; --group-rose: #c99aaf; --group-rose-soft: #322a32; --group-gold: #c7b47a; --group-gold-soft: #302f26; --group-divider: #343b40; }
  .axis-embedded .axis-notice { background: #202a32; border-color: #303e49; color: #97acbc; }
  .axis-embedded .axis-filters { background: #212529; border-color: #30363b; }
  .axis-embedded .axis-filter { color: #919ba4; }
  .axis-embedded .axis-filter[aria-selected="true"] { color: #e2e8e4; background: #364039; }
  .axis-embedded .axis-filter-count { color: #8e9b92; }
  .axis-embedded .axis-filter:hover { color: #e4e9e6; }
  .axis-embedded .axis-api, .axis-embedded .axis-refresh { color: #a0aab3; }
  .axis-embedded .axis-refresh:hover { background: #2d3932; color: #93cbb0; }
  .axis-embedded .g-heading h2 { color: #dce2e6; }
  .axis-embedded .axis-provider { background: #ffffff0a; }
  .axis-embedded .axis-group-summary { color: #a2aeb5; }
  .axis-embedded .g-card { background: #24282c; border-color: #363d42; box-shadow: none; }
  .axis-embedded .g-card:hover { border-color: #6c8e7a; }
  .axis-embedded .g-card .image { border-color: #363d42; background: #1d2220; }
  .axis-embedded .g-card .image.axis-text-thumbnail { background: #20272a; }
  .axis-embedded .axis-text-label { color: #8abca3; }
  .axis-embedded .axis-text-excerpt, .axis-embedded .axis-text-answer { color: #c4cec9; }
  .axis-embedded #detail-dialog .detail-preview.is-text { background: #202528; }
  .axis-embedded .g-card .label { color: #cbd4db; }
  .axis-embedded .axis-thinking { color: #a3adb5; background: #30363b; }
  .axis-embedded .axis-thinking.axis-failure { color: #e89b9b; background: #442d31; }
  .axis-embedded .g-card.failed { border-color: #664148; }
  .axis-embedded .g-card.failed .image { background: #342629; }
  .axis-embedded .g-card.live .live-placeholder { background: #24372c; }
  .axis-embedded .g-strip { scrollbar-color: #626e67 #2b322e; }
  .axis-embedded .g-empty { color: #94a29b; border-color: #3a4640; }
  .axis-embedded .g-tab { background: #242a27; color: #a7b4ab; border-color: #39473f; }
  .axis-embedded .g-tab.active { background: #ffffff0d; color: var(--group-accent); }
  .axis-embedded #detail-dialog, .axis-embedded #detail-dialog .detail-head, .axis-embedded .axis-detail-footer { background: #202528; border-color: #363e41; color: #d6ded9; }
  .axis-embedded #detail-dialog .detail-title { color: #d9e3dc; }
  .axis-embedded .axis-detail-model, .axis-embedded #detail-dialog .detail-meta { color: #a0ada5; }
  .axis-embedded .axis-detail-mark, .axis-embedded .axis-detail-state { color: #8bbba0; background: #2d3c32; }
  .axis-embedded .axis-detail-state.is-failed { color: #e89b9b; background: #442d31; }
  .axis-embedded .axis-zoom { background: #171d19; }
  .axis-embedded .axis-zoom button[aria-pressed="true"] { color: #c0d0c5; background: #3a473e; }
  .axis-embedded #detail-dialog .detail-preview, .axis-embedded .axis-preview-loading { background: #191f1b; border-color: #363e39; }
  .axis-embedded .axis-detail-done { background: #29312c; border-color: #3d4a42; color: #a9bbaf; }
}