/* The public header floats over a complete viewport, with no 56px blank strip. */
iframe[src="https://agentdockai.cn/brand/about-zih.html"] {
  display: block;
  height: 100svh;
  min-height: 480px;
}

/* Keep the catalogue backdrop visible while the opaque About frame loads. */
/* Background only. Content, glass surfaces and layout stay in their own sheet. */
body:has(header.pointer-events-none a[href="/about"][aria-current="page"]) #root > .bg-background {
  background: radial-gradient(ellipse at 75% 12%, rgba(99,102,241,.035), transparent 56%), #f3f5f8;
  background-attachment: fixed;
}
.dark body:has(header.pointer-events-none a[href="/about"][aria-current="page"]) #root > .bg-background {
  background: radial-gradient(ellipse at 75% 12%, rgba(99,102,241,.045), transparent 56%), #171b22;
  background-attachment: fixed;
}
body:has(header.pointer-events-none a[href="/about"][aria-current="page"]) #root > .bg-background::before {
  inset: 0;
  background: url('/brand/catalog-particles-light.svg?v=7') center top / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}
.dark body:has(header.pointer-events-none a[href="/about"][aria-current="page"]) #root > .bg-background::before {
  background-image: url('/brand/catalog-particles-dark.svg?v=7');
  opacity: 1;
}
@media (max-width: 767.98px) {
  body:has(header.pointer-events-none a[href="/about"][aria-current="page"]) #root > .bg-background::before {
    background-position: 66% top;
    opacity: .72;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:has(header.pointer-events-none a[href="/about"][aria-current="page"]) #root > .bg-background::before {
    background-image: url('/brand/catalog-particles-light-still.svg?v=7');
  }
  .dark body:has(header.pointer-events-none a[href="/about"][aria-current="page"]) #root > .bg-background::before {
    background-image: url('/brand/catalog-particles-dark-still.svg?v=7');
  }
}

body:has(header.pointer-events-none a[href="/about"][aria-current="page"]) #root > .bg-background::before {
  content:""; position:fixed; z-index:0; pointer-events:none;
}
iframe[src="https://agentdockai.cn/brand/about-zih.html"] { position:relative; z-index:1; color-scheme:light dark; }
html.about-frame-guard iframe[src="https://agentdockai.cn/brand/about-zih.html"]:not([data-about-ready]) { opacity:0; pointer-events:none; }

/* Native About profile; entrance is provided by the shared PageEnter component. */

/* Compact translucent profile pane. */
.agentdock-about,.agentdock-about * { box-sizing:border-box; }
.agentdock-about {
  color-scheme:light;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
  font-synthesis:none;
  --page:#f1f4f6; --ink:#18212e; --muted:#58677b; --accent:#5659e8;
  --edge:rgba(255,255,255,.64); --control:rgba(255,255,255,.14);
  --material:linear-gradient(125deg,rgba(255,255,255,.20),rgba(255,255,255,.025) 70%),rgba(255,255,255,.08);
  --shadow:0 24px 72px rgba(35,45,70,.065),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.12);
  color:var(--ink);
}
.dark .agentdock-about {
  color-scheme:dark; --page:#1b1f24; --ink:#edf0f7; --muted:#a9b7cb; --accent:#aaa5ff;
  --edge:rgba(255,255,255,.17); --control:rgba(255,255,255,.025);
  --material:linear-gradient(125deg,rgba(255,255,255,.055),rgba(255,255,255,.008) 70%),rgba(25,30,39,.18);
  --shadow:0 24px 72px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(255,255,255,.035);
}
.agentdock-about {
  margin:0; position:relative; isolation:isolate; min-height:100svh;
  padding:96px 24px 40px; display:grid; place-items:center;
  background:transparent; color:var(--ink);
}
.agentdock-about main { position:relative; width:min(480px,100%); min-width:0; transform:translateY(calc(-1 * clamp(32px,8svh,96px))); }
.ad-about-card {
  position:relative; container-type:inline-size; width:100%; aspect-ratio:8 / 5;
  border:1px solid var(--edge); border-radius:24px; overflow:hidden;
  background:var(--material); box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%);
}
.ad-about-cover { display:none; }
.ad-about-content { position:absolute; inset:0; }
.ad-about-portrait { position:absolute; left:6.25cqw; top:7.33%; width:101px; height:101px; border-radius:50%; overflow:hidden; background:#e8edf4; border:2px solid rgba(255,255,255,.78); box-shadow:0 8px 24px rgba(35,45,70,.08); }
.ad-about-portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.ad-about-name-row { position:absolute; left:6.25cqw; top:45%; }
.agentdock-about h1 { margin:0; font-size:clamp(23px,5.416667cqw,26px); font-weight:700; line-height:1.2; letter-spacing:-.04em; }
.ad-about-socials { position:absolute; left:6.25cqw; top:59%; height:21px; display:flex; align-items:center; gap:13px; color:var(--ink); }
.ad-about-social { display:inline-flex; align-items:center; justify-content:center; }
.ad-about-socials svg { display:block; width:18px; height:18px; fill:currentColor; }
.ad-about-socials .ad-about-badge { width:20px; height:20px; color:#5659e8; }
.dark .agentdock-about .ad-about-socials .ad-about-badge { color:#aaa5ff; }
.ad-about-dash { width:13px; height:1px; background:currentColor; }
.ad-about-socials a { color:inherit; text-decoration:none; transition:color .18s; }
.ad-about-socials a:hover { color:var(--accent); }
.ad-about-socials a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }
.ad-about-intro { position:absolute; left:6.25cqw; top:71.667%; margin:0; font-size:13px; font-weight:400; line-height:1.5; }
.ad-about-actions { position:absolute; left:6.25cqw; bottom:16px; width:87.5cqw; height:40px; display:flex; gap:12px; }
.ad-about-action { appearance:none; flex:1; min-width:0; padding:0 10px; border:1px solid var(--edge); border-radius:11px; background:var(--control); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-family:inherit; font-size:13px; font-weight:500; line-height:1.2; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.28); transition:background .18s,transform .18s; }
.ad-about-action:hover { background:rgba(255,255,255,.28); transform:translateY(-1px); }
.dark .agentdock-about .ad-about-action:hover { background:rgba(255,255,255,.08); }
.ad-about-action:active { transform:translateY(0); }
.ad-about-action:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.agentdock-about dialog { width:390px; max-width:calc(100vw - 40px); padding:24px; border:1px solid var(--edge); border-radius:22px; background:var(--page); color:var(--ink); box-shadow:var(--shadow); }
.agentdock-about dialog::backdrop { background:rgba(23,34,56,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.agentdock-about dialog h2 { margin:0 0 8px; font-size:19px; }
.agentdock-about dialog p { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.7; }
.agentdock-about dialog input { display:block; width:100%; padding:11px 9px; border:1px solid var(--edge); border-radius:8px; background:var(--control); color:var(--ink); font:12px/1.4 monospace; }
.ad-about-.agentdock-about dialog-actions { display:flex; gap:10px; margin-top:18px; }
.ad-about-.agentdock-about dialog-actions .ad-about-action { height:36px; }
.ad-about-status { min-height:18px; margin-top:10px; color:var(--accent); font-size:12px; }
@media(max-width:500px) {
  .agentdock-about { padding:88px 20px 32px; }
  .agentdock-about main { transform:translateY(-24px); }
  .ad-about-portrait { top:5cqw; width:23.125cqw; height:23.125cqw; }
  .ad-about-name-row { top:30.729167cqw; }
  .ad-about-socials { top:40.5cqw; }
  .ad-about-intro { top:48.958333cqw; }
  .ad-about-actions { top:56.25cqw; bottom:auto; }
  .ad-about-card { aspect-ratio:960 / 735; border-radius:22px; }
  .ad-about-intro { font-size:12px; }
  .ad-about-socials { gap:11px; }
  .ad-about-socials svg { width:17px; height:17px; }
}
@media(max-height:540px) { .agentdock-about main { transform:none; } }
@supports not (backdrop-filter:blur(1px)) { .ad-about-card { background:var(--page); } }
@media(prefers-reduced-motion:reduce) { .ad-about-action,.ad-about-socials a { transition:none; } .ad-about-action:hover { transform:none; } }

/* Give the two profile actions a clear silhouette over the glass. */
.ad-about-actions .ad-about-action {
  font-weight:600; letter-spacing:.01em;
  border-color:rgba(86,89,232,.30); color:#4548c9;
  background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(221,222,255,.46));
  box-shadow:0 4px 12px rgba(70,73,170,.10),inset 0 1px 0 rgba(255,255,255,.85);
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;
}
.ad-about-actions .ad-about-contact {
  color:#fff; border-color:rgba(86,89,232,.70);
  background:linear-gradient(135deg,#6664ed,#5659df);
  box-shadow:0 5px 15px rgba(86,89,232,.23),inset 0 1px 0 rgba(255,255,255,.25);
}
.ad-about-actions .ad-about-action:hover {
  border-color:rgba(86,89,232,.58);
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(214,215,255,.68));
  box-shadow:0 7px 18px rgba(70,73,170,.17),inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateY(-2px);
}
.ad-about-actions .ad-about-contact:hover {
  border-color:#6664ed; background:linear-gradient(135deg,#7270f5,#4c4fd3);
  box-shadow:0 8px 22px rgba(86,89,232,.32),inset 0 1px 0 rgba(255,255,255,.3);
}
.ad-about-actions .ad-about-action:active { transform:translateY(0); box-shadow:0 2px 6px rgba(70,73,170,.13); }
.dark .agentdock-about .ad-about-actions .ad-about-action {
  color:#d2cfff; border-color:rgba(170,165,255,.4);
  background:linear-gradient(135deg,rgba(170,165,255,.18),rgba(125,119,226,.12));
  box-shadow:0 4px 12px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.12);
}
.dark .agentdock-about .ad-about-actions .ad-about-contact {
  color:#fff; border-color:rgba(181,177,255,.58);
  background:linear-gradient(135deg,#7770de,#625bca);
  box-shadow:0 5px 16px rgba(80,70,185,.3),inset 0 1px 0 rgba(255,255,255,.2);
}
.dark .agentdock-about .ad-about-actions .ad-about-action:hover {
  background:linear-gradient(135deg,rgba(170,165,255,.28),rgba(125,119,226,.22));
  border-color:rgba(190,185,255,.65);
}
.dark .agentdock-about .ad-about-actions .ad-about-contact:hover { background:linear-gradient(135deg,#8780ed,#7068db); }
@media(prefers-reduced-motion:reduce) { .ad-about-actions .ad-about-action { transition:none; } .ad-about-actions .ad-about-action:hover { transform:none; } }




.agentdock-about {
  --edge:rgba(255,255,255,.78);
  --material:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.025) 68%),rgba(255,255,255,.06);
  --shadow:0 18px 55px rgba(47,51,92,.085),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.2);
}
.dark .agentdock-about {
  --edge:rgba(210,210,255,.22);
  --material:linear-gradient(135deg,rgba(201,201,255,.07),rgba(255,255,255,.008) 68%),rgba(23,27,34,.16);
  --shadow:0 18px 55px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.035);
}
.ad-about-card {
  -webkit-backdrop-filter:blur(18px) saturate(135%); backdrop-filter:blur(18px) saturate(135%);
  animation:none;
}
.ad-about-card::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(150deg,rgba(255,255,255,.1),transparent 40%,rgba(115,112,230,.025)); }
.dark .agentdock-about .ad-about-card::before { opacity:.35; }


.agentdock-about { width:100%; --page:#f3f5f8; }
.dark .agentdock-about { --page:#171b22; }
.ad-about-page { position:relative; z-index:1; }

/* Two cards share one fixed footprint, so switching never changes page layout. */
.agentdock-about main.ad-about-deck { aspect-ratio:8 / 5; --ad-deck-slide:62px; }
.ad-about-panel { position:absolute; inset:0; transform-origin:50% 72%; }
.ad-about-panel[data-front="true"] { z-index:3; transform:none; }
.ad-about-panel[data-front="false"] { z-index:1; transform:translate(22px,-22px) rotate(4deg) scale(.96); cursor:pointer; }
.ad-about-panel-content { width:100%; height:100%; }
.ad-about-panel[data-front="false"] .ad-about-panel-content { pointer-events:none; }
.ad-about-panel .ad-about-card { height:100%; }
.ad-about-rear-hit { position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:0; border:0; border-radius:24px; background:transparent; cursor:pointer; }
.ad-about-rear-hit:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.ad-about-panel[data-front="false"] .ad-about-content { opacity:.5; }
.ad-about-content { transition:none; }
.ad-about-deck[data-changing="true"] .ad-about-panel[data-front="false"] { animation:ad-card-to-back .58s cubic-bezier(.22,1,.36,1) both; }
.ad-about-deck[data-changing="true"] .ad-about-panel[data-front="true"] { animation:ad-card-to-front .58s cubic-bezier(.22,1,.36,1) both; }
@keyframes ad-card-to-back {
  0% { transform:none; z-index:3; }
  42% { transform:translate(calc(-1 * var(--ad-deck-slide)),18px) rotate(-9deg) scale(.96); z-index:3; }
  52% { z-index:1; }
  100% { transform:translate(22px,-22px) rotate(4deg) scale(.96); z-index:1; }
}
@keyframes ad-card-to-front {
  0% { transform:translate(22px,-22px) rotate(4deg) scale(.96); z-index:1; }
  42% { transform:translate(var(--ad-deck-slide),-18px) rotate(7deg) scale(.98); z-index:1; }
  52% { z-index:3; }
  100% { transform:none; z-index:3; }
}
.ad-about-selectors { position:absolute; top:calc(100% + 24px); left:50%; transform:translateX(-50%); display:flex; gap:6px; padding:4px; border:1px solid var(--edge); border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(16px); }
.ad-about-selector { display:flex; align-items:center; justify-content:center; gap:7px; min-width:68px; min-height:32px; padding:6px 13px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--muted); font-family:inherit; font-size:12px; font-weight:500; line-height:1.2; cursor:pointer; transition:background .18s,color .18s,box-shadow .18s; }
.ad-about-selector[aria-pressed="true"] { color:var(--accent); background:rgba(255,255,255,.64); border-color:rgba(255,255,255,.72); box-shadow:0 2px 8px rgba(55,50,110,.07); }
.ad-about-selector-dot { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.35; }
.ad-about-selector[aria-pressed="true"] .ad-about-selector-dot { opacity:1; }
.ad-about-selector:hover { color:var(--accent); }
.ad-about-selector:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.dark .ad-about-selectors { background:rgba(35,36,55,.25); }
.dark .ad-about-selector[aria-pressed="true"] { background:rgba(163,155,255,.17); border-color:rgba(200,195,255,.16); }
@media(max-width:500px) {
  .agentdock-about main.ad-about-deck { width:calc(100% - 12px); aspect-ratio:960 / 735; --ad-deck-slide:26px; }
  .ad-about-selectors { top:calc(100% + 20px); }
}
@media(max-height:540px) { .agentdock-about:has(.ad-about-deck) { min-height:480px; } }
@media(prefers-reduced-motion:reduce) {
  .ad-about-deck[data-changing="true"] .ad-about-panel { animation:none; }
  .ad-about-selector,.ad-about-content { transition:none; }
}

/* The resting rear card keeps its glass, just like either moving card.
   Defocus only its foreground content, leaving the glass sampling layer intact. */
.ad-about-panel[data-front="false"] .ad-about-card {
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.ad-about-panel[data-front="false"] .ad-about-content {
  visibility: visible;
  filter: blur(2px);
}
.ad-about-content { transition:none; }

/* Both cards keep the same glass material throughout the exchange. */
/* Content depth follows the same timeline as the physical card.
   Start and end values exactly match the resting states; no reset at 720ms. */
.ad-about-deck[data-changing="true"] .ad-about-panel .ad-about-content {
  visibility: visible;
  transition: none;
}
.ad-about-deck[data-changing="true"] .ad-about-panel[data-front="false"] .ad-about-content {
  animation:ad-content-to-back 720ms cubic-bezier(.22,.8,.24,1) both;
}
.ad-about-deck[data-changing="true"] .ad-about-panel[data-front="true"] .ad-about-content {
  animation:ad-content-to-front 720ms cubic-bezier(.22,.8,.24,1) both;
}
@keyframes ad-content-to-back {
  0% { filter:blur(0px); opacity:1; }
  44% { filter:blur(0px); opacity:1; }
  76%,100% { filter:blur(2px); opacity:.5; }
}
@keyframes ad-content-to-front {
  0% { filter:blur(2px); opacity:.5; }
  44% { filter:blur(2px); opacity:.5; }
  76%,100% { filter:blur(0px); opacity:1; }
}
.ad-about-deck[data-changing="true"] .ad-about-panel .ad-about-card {
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.ad-about-deck[data-changing="true"] .ad-about-panel[data-front="false"] {
  animation: ad-card-pass-back 720ms cubic-bezier(.22,.8,.24,1) both;
}
.ad-about-deck[data-changing="true"] .ad-about-panel[data-front="true"] {
  animation: ad-card-pass-front 720ms cubic-bezier(.22,.8,.24,1) both;
}
@keyframes ad-card-pass-back {
  0% { transform: none; z-index: 3; }
  44% { transform: translate(calc(-1 * var(--ad-deck-slide)),18px) rotate(-7deg) scale(.98); z-index: 3; }
  50% { z-index: 1; }
  76% { transform: translate(16px,-28px) rotate(5deg) scale(.96); z-index: 1; }
  100% { transform: translate(22px,-22px) rotate(4deg) scale(.96); z-index: 1; }
}
@keyframes ad-card-pass-front {
  0% { transform: translate(22px,-22px) rotate(4deg) scale(.96); z-index: 1; }
  44% { transform: translate(var(--ad-deck-slide),-22px) rotate(6deg) scale(.98); z-index: 1; }
  50% { z-index: 3; }
  76% { transform: translate(-3px,2px) rotate(-.6deg) scale(1.006); z-index: 3; }
  100% { transform: none; z-index: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-about-deck[data-changing="true"] .ad-about-panel { animation: none; }
}

@media(prefers-reduced-motion:reduce) { .ad-about-content { transition:none; } }

/* An ancestor's animated opacity/filter creates a temporary backdrop root.
   Keep the glass sampling the page from the very first rendered frame. */
.ad-about-page { animation:ad-about-enter 250ms cubic-bezier(.33,1,.68,1) both; }
@keyframes ad-about-enter { from { transform:translateY(8px); } to { transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) {
  .ad-about-page,.ad-about-deck[data-changing="true"] .ad-about-content { animation:none; }
}