.yaoyu-hero-titlebar { position: absolute; z-index: 3; top: 0; left: -22.5%; width: 145%; aspect-ratio: 80; background: url("/assets/yaoyu-mir-workbench.png") center top / 100% auto no-repeat; pointer-events: none; }
main._5l06ia_content:has(.yaoyu-hero-intro) { padding-top: 0 !important; }
.yaoyu-hero-intro {
  --hero-ink: #f2f3f5;
  --hero-support: #a5abb4;
  --hero-metal: #dfceb0;
  --hero-metal-border: #534a3a;
  --hero-metal-surface: #171613;
  font-family: "Inter Variable", "Microsoft YaHei UI", "Microsoft YaHei", "Yaoyu Noto Sans SC", sans-serif;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
}
.yaoyu-hero-copy { min-width: 0; }
.yaoyu-hero-brand-art { position: relative; min-width: 0; height: 100%; pointer-events: none; }
.yaoyu-hero-brand-art img { position: absolute; top: 50%; left: 50%; display: block; width: 145%; max-width: none; height: auto; transform: translate(-50%, -50%); }
.yaoyu-hero-title-group { display: block; }
.QI8oKG_title.yaoyu-main-heading { width: auto; max-width: 100%; margin: 0; color: var(--hero-ink); font-size: clamp(36px, 4vw, 56px) !important; line-height: 1.3 !important; letter-spacing: -.012em !important; }
.yaoyu-main-heading > span { display: block; }
.yaoyu-main-heading > .yaoyu-title-primary { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; row-gap: 8px; }
.yaoyu-title-secondary { color: #d5d8dd; --linear-hero-delay: 433ms; }
.yaoyu-free-mount { display: inline-flex; flex: none; perspective: 480px; transform: translateY(2px); }
.yaoyu-free-seal { position: relative; isolation: isolate; display: flex; align-items: stretch; height: 34px; overflow: hidden; border: 1px solid #8d7549; border-radius: 6px; background: linear-gradient(180deg, #26231d 0%, #131414 100%); color: #ead6a7; box-shadow: 0 9px 25px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,221,158,.08), inset 0 1px 0 rgba(255,255,255,.1); transform-origin: left center; backface-visibility: hidden; transform-style: flat; animation: yaoyu-free-unfold 720ms cubic-bezier(.16,1,.3,1) 800ms both; }
.yaoyu-free-body { position: relative; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 0 10px; text-shadow: 0 1px 0 #000; }
.yaoyu-free-symbol { flex: none; width: 23px; height: 18px; }
.yaoyu-free-label { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.yaoyu-free-chip { position: relative; z-index: 10; display: inline-flex; align-items: center; padding: 0 11px; background: linear-gradient(180deg, #e4c88d 0%, #c4a061 54%, #b18a49 100%); box-shadow: inset 1px 0 0 rgba(255,243,207,.3), inset 0 1px 0 rgba(255,255,255,.3); color: #21190d; font-size: 13px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
/* Paint the reflection on one flat surface: rotating a blended 3D layer produces dark clipping seams in Chromium. */
@keyframes yaoyu-free-unfold { from { opacity: 0; transform: translateX(-7px) rotateY(-78deg) scaleX(.84); } to { opacity: 1; transform: none; } }
.yaoyu-free-edge { position: absolute; z-index: 20; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(102deg, rgba(255,245,218,0) 36%, rgba(255,245,218,.035) 39%, rgba(255,245,218,.12) 43%, rgba(255,245,218,.31) 47%, rgba(255,245,218,.46) 50%, rgba(255,245,218,.31) 53%, rgba(255,245,218,.12) 57%, rgba(255,245,218,.035) 61%, rgba(255,245,218,0) 64%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0; animation: yaoyu-free-sweep-paint 1400ms cubic-bezier(.65,0,.35,1) 1350ms both, yaoyu-free-sweep-opacity 1400ms linear 1350ms both; }
@keyframes yaoyu-free-sweep-paint { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes yaoyu-free-sweep-opacity { 0%, 100% { opacity: 0; } 14%, 82% { opacity: 1; } }
.yaoyu-hero-intro .yaoyu-hero-summary { max-width: 640px; margin: 28px 0 0; color: var(--hero-support); font-family: inherit; font-size: 18px; font-weight: 400; line-height: 1.8; letter-spacing: 0; }
.yaoyu-hero-intro .yaoyu-hero-intro-actions { display: flex; width: auto; gap: 16px; margin-top: 28px; }
.yaoyu-hero-intro .yaoyu-hero-button { position: relative; isolation: isolate; overflow: hidden; min-height: 46px; gap: 12px; border: 1px solid; border-radius: 8px; font-family: "Yaoyu Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: .005em; transform: translateY(0); transition: transform 180ms cubic-bezier(.2,0,0,1), border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 220ms ease !important; }
.yaoyu-hero-intro .yaoyu-hero-button::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.18) 48%, transparent 72%); transform: translateX(-135%); transition: transform 620ms cubic-bezier(.2,.7,.2,1); }
.yaoyu-hero-intro .yaoyu-hero-button svg,
.yaoyu-hero-intro .yaoyu-hero-button span { position: relative; z-index: 1; transition: transform 180ms cubic-bezier(.2,0,0,1); }
.yaoyu-hero-intro .yaoyu-hero-button svg { position: relative; z-index: 1; }
.yaoyu-hero-intro .yaoyu-hero-button-primary svg { stroke-width: 1.8; }
.yaoyu-hero-intro .yaoyu-hero-button-arrow { font-size: 19px; font-weight: 700; }
.yaoyu-hero-intro .yaoyu-hero-button-primary { min-width: 156px; border-color: rgba(255,255,255,.82); background: linear-gradient(180deg, #fff 0%, #f0f1f3 52%, #dfe1e5 100%); color: #111214; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.08), 0 2px 3px rgba(0,0,0,.28), 0 10px 28px rgba(0,0,0,.2); }
.yaoyu-hero-intro .yaoyu-hero-button-secondary { min-width: 126px; padding-inline: 18px; border-color: #33363b; background: linear-gradient(180deg, #24262a 0%, #191a1d 52%, #121315 100%); color: #e6e8eb; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.38), 0 10px 24px rgba(0,0,0,.18); }
.yaoyu-hero-intro .yaoyu-hero-button:hover { transform: translateY(-2px); }
.yaoyu-hero-intro .yaoyu-hero-button:hover::before { transform: translateX(135%); }
.yaoyu-hero-intro .yaoyu-hero-button-primary:hover { border-color: #fff; background: linear-gradient(180deg, #fff 0%, #f7f8f9 50%, #e7e9ec 100%); color: #090a0b; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.07), 0 4px 7px rgba(0,0,0,.32), 0 14px 32px rgba(0,0,0,.24); }
.yaoyu-hero-intro .yaoyu-hero-button-secondary:hover { border-color: #6c5a3d; background: linear-gradient(180deg, #2d2a24 0%, #201e1a 52%, #161512 100%); color: #f0dfb9; box-shadow: inset 0 1px 0 rgba(255,226,166,.12), inset 0 -1px 0 rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.42), 0 14px 30px rgba(0,0,0,.2); }
.yaoyu-hero-intro .yaoyu-hero-button-primary:hover svg { transform: translateY(2px); }
.yaoyu-hero-intro .yaoyu-hero-button-secondary:hover .yaoyu-hero-button-arrow { transform: translateX(3px); }
.yaoyu-hero-intro .yaoyu-hero-button:active { transform: translateY(0) scale(.98); transition-duration: 80ms !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.28); }
.yaoyu-hero-intro .yaoyu-hero-button:focus-visible { outline: 2px solid #d9bd82; outline-offset: 3px; }
@media(max-width:900px) {
  .yaoyu-hero-intro { grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; }
  .yaoyu-main-heading > .yaoyu-title-primary { column-gap: 14px; }
}
@media(max-width:640px) {
  .yaoyu-hero-intro { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .yaoyu-hero-brand-art { height: 152px; }
  .yaoyu-hero-brand-art img { width: 260px; }
  .QI8oKG_title.yaoyu-main-heading { font-size: clamp(28px, 7.6vw, 36px) !important; line-height: 1.35 !important; }
  .yaoyu-main-heading > .yaoyu-title-primary { align-items: center; column-gap: 10px; row-gap: 8px; }
  .yaoyu-free-mount { transform: none; }
  .yaoyu-hero-intro .yaoyu-hero-summary { margin-top: 20px; font-size: 16px; line-height: 1.8; }
  .yaoyu-hero-copy-break { display: none; }
  .yaoyu-hero-intro .yaoyu-hero-intro-actions { gap: 8px; margin-top: 24px; }
  .yaoyu-hero-intro .yaoyu-hero-button-primary { min-width: 144px; }
  .yaoyu-hero-intro .yaoyu-hero-button-secondary { min-width: 104px; padding-inline: 8px; }
}
@media(prefers-reduced-motion:reduce) { .yaoyu-free-seal { animation: none !important; transform: none !important; opacity: 1 !important; } .yaoyu-free-edge { display: none !important; animation: none !important; } }
@media(prefers-reduced-motion:reduce) { .yaoyu-hero-intro .yaoyu-hero-button, .yaoyu-hero-intro .yaoyu-hero-button svg, .yaoyu-hero-intro .yaoyu-hero-button span { transition: none !important; } .yaoyu-hero-intro .yaoyu-hero-button:hover, .yaoyu-hero-intro .yaoyu-hero-button:active { transform: none !important; } .yaoyu-hero-intro .yaoyu-hero-button::before { display: none; } }
.yaoyu-code-section .b-30Va_title,
.yaoyu-code-section .b-30Va_descriptionText { font-family: "Inter Variable", "Yaoyu Noto Sans SC", "Microsoft YaHei UI", sans-serif !important; }
.yaoyu-code-section .b-30Va_title { font-size: 40px !important; line-height: 1.32 !important; font-weight: 500 !important; letter-spacing: -.012em !important; }
.yaoyu-code-section .b-30Va_descriptionText { font-size: 20px !important; line-height: 1.75 !important; font-weight: 400 !important; letter-spacing: 0 !important; max-width: 28em; color: #b9bdc5; }
.yaoyu-code-section .b-30Va_header .b-30Va_titleContainer,
.yaoyu-code-section .b-30Va_header .b-30Va_descriptionContainer { align-self: center !important; }
.yaoyu-code-section .b-30Va_header .b-30Va_descriptionContainer { display: block !important; }
.yaoyu-code-section .b-30Va_actionWrapper { display: none !important; }
@media(max-width:1024px) { .yaoyu-code-section .b-30Va_header { row-gap: 24px; } .yaoyu-code-section .b-30Va_title { font-size: 34px !important; } .yaoyu-code-section .b-30Va_descriptionText { font-size: 18px !important; } }
@media(max-width:640px) { .yaoyu-code-section .b-30Va_title { font-size: 30px !important; } .yaoyu-code-section .b-30Va_descriptionText { font-size: 16px !important; line-height: 1.7 !important; } }
.yaoyu-code-demo {
  --code-bg: #0b0d0f;
  --code-panel: #111418;
  --code-panel-2: #15191d;
  --code-line: #2b3036;
  --code-text: #d8dde4;
  --code-muted: #77808b;
  --code-blue: #55bff0;
  --code-gold: #d8a84c;
  position: relative;
  width: min(1240px, calc(100% - 56px));
  margin: 54px auto 0;
  padding-bottom: 58px;
  color: var(--code-text);
  font-family: "Inter Variable", "Yaoyu Noto Sans SC", "Microsoft YaHei UI", sans-serif;
}
.yaoyu-code-video { margin-top: 48px; padding-bottom: 70px; }
.yaoyu-code-video::before {
  inset: -90px 4% -30px;
  background: radial-gradient(ellipse at 50% 50%, rgba(49, 127, 161, .14), transparent 66%);
}
.yaoyu-code-video-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid #333940;
  border-radius: 14px;
  background: #080a0c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 38px 100px rgba(0,0,0,.46);
}
.yaoyu-code-video-frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), inset 0 -60px 90px rgba(0,0,0,.08);
  pointer-events: none;
}
.yaoyu-code-video-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 716;
  object-fit: contain;
}
.yaoyu-code-demo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80px 8% 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(48, 122, 156, .12), transparent 62%);
  filter: blur(28px);
  pointer-events: none;
}
.yaoyu-code-window {
  position: relative;
  height: 670px;
  overflow: hidden;
  border: 1px solid #30353a;
  border-radius: 14px;
  background: var(--code-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 36px 90px rgba(0,0,0,.42);
}
.yaoyu-code-window::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
  pointer-events: none;
}
.yaoyu-code-titlebar {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #30343a;
  background: linear-gradient(180deg, #202328, #181b1f);
  color: #e7eaee;
  font-size: 12px;
}
.yaoyu-code-appmark {
  display: grid;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  place-items: center;
  border: 1px solid rgba(216,168,76,.3);
  border-radius: 5px;
  background: #131518;
  color: #ebc474;
  font-size: 10px;
}
.yaoyu-code-titlebar strong { font-size: 12px; font-weight: 600; }
.yaoyu-code-window-controls {
  position: absolute;
  right: 0;
  display: flex;
  height: 40px;
  align-items: stretch;
  color: #858c94;
}
.yaoyu-code-window-controls span { display: grid; width: 42px; place-items: center; font-size: 12px; }
.yaoyu-code-shell { display: grid; grid-template-columns: 46px 235px minmax(0,1fr); height: 602px; }
.yaoyu-code-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding-top: 13px;
  border-right: 1px solid #292e33;
  background: #14171a;
  color: #737b84;
}
.yaoyu-code-rail span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 6px;
  font-size: 17px;
}
.yaoyu-code-rail .is-active { background: #22272c; color: #dbe2e8; box-shadow: inset 2px 0 0 var(--code-blue); }
.yaoyu-code-explorer { overflow: hidden; border-right: 1px solid #292e33; background: #111417; font-size: 11px; }
.yaoyu-code-pane-title { height: 37px; padding: 12px 14px 0; color: #e0e4e8; font-weight: 650; }
.yaoyu-code-engine { display: grid; gap: 4px; margin: 0 10px 12px; padding: 10px; border: 1px solid #2a3035; border-radius: 6px; background: #171b1f; }
.yaoyu-code-engine small { color: #737c86; }
.yaoyu-code-engine strong { color: #cdd3d9; font-size: 11px; font-weight: 550; }
.yaoyu-code-tree { padding: 4px 9px; color: #a2a9b1; }
.yaoyu-code-tree p { height: 25px; margin: 0; white-space: nowrap; }
.yaoyu-code-tree .depth-1 { padding-left: 12px; }
.yaoyu-code-tree .depth-2 { padding-left: 24px; }
.yaoyu-code-tree .depth-3 { padding-left: 36px; }
.yaoyu-code-tree .depth-4 { padding-left: 48px; }
.yaoyu-code-tree .is-file { margin-block: 2px 7px; border-radius: 4px; background: #23282d; color: #e1e5e9; line-height: 25px; }
.yaoyu-code-workspace { position: relative; min-width: 0; overflow: hidden; background: #0d1012; }
.yaoyu-code-tabs {
  display: flex;
  height: 37px;
  border-bottom: 1px solid #292e33;
  background: #14171a;
  color: #7e858d;
  font-size: 11px;
}
.yaoyu-code-tabs span { display: flex; min-width: 150px; align-items: center; justify-content: center; border-right: 1px solid #292e33; }
.yaoyu-code-tabs .is-active { position: relative; background: #0e1113; color: #d5d9dd; }
.yaoyu-code-tabs .is-active::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--code-blue); }
.yaoyu-code-tabs i { width: 6px; height: 6px; margin-left: 9px; border-radius: 50%; background: #f05d63; }
.yaoyu-code-breadcrumb { height: 31px; padding: 9px 16px 0; color: #69727c; font-size: 10px; white-space: nowrap; }
.yaoyu-code-editor { height: calc(100% - 68px); padding: 9px 0 18px; overflow: hidden; background: linear-gradient(90deg, #101316, #0d1012); font-family: "Berkeley Mono", Consolas, monospace; font-size: 13px; line-height: 1.55; }
.yaoyu-code-editor > div { display: grid; grid-template-columns: 46px minmax(0,1fr); min-height: 21px; }
.yaoyu-code-editor > div > b { padding-right: 13px; color: #4e5963; text-align: right; font-weight: 400; user-select: none; }
.yaoyu-code-editor code { color: #cbd2d8; white-space: pre; }
.yaoyu-code-editor .comment { color: #d5637f; }
.yaoyu-code-editor .keyword { color: #63c76b; font-weight: 650; }
.yaoyu-code-editor .command { color: #e7a63b; }
.yaoyu-code-editor .number { color: #6cc4f3; }
.yaoyu-code-editor .variable { color: #d965c2; }
.yaoyu-code-active-line { position: relative; background: rgba(80,188,239,.06); }
.yaoyu-code-active-line::after { content: ""; position: absolute; left: 0; width: 2px; height: 100%; background: var(--code-blue); opacity: .55; }
.yaoyu-code-caret { display: inline-block; width: 1px; height: 15px; margin-left: 2px; vertical-align: -3px; background: #e7edf2; animation: yaoyu-code-caret 800ms steps(1,end) infinite; }
@keyframes yaoyu-code-caret { 50% { opacity: 0; } }
.yaoyu-wil-panel {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 292px;
  border-top: 1px solid #3b434a;
  background: #101316;
  box-shadow: 0 -18px 44px rgba(0,0,0,.35);
  transform: translateY(calc(100% - 34px));
  transition: transform 520ms cubic-bezier(.2,0,0,1);
}
[data-code-stage="1"] .yaoyu-wil-panel,
[data-code-stage="2"] .yaoyu-wil-panel,
[data-code-stage="3"] .yaoyu-wil-panel,
[data-code-stage="4"] .yaoyu-wil-panel { transform: translateY(0); }
.yaoyu-wil-toolbar {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 24px;
  padding: 0 14px;
  border-bottom: 1px solid #2b3035;
  color: #8c949c;
  font-size: 10px;
}
.yaoyu-wil-toolbar strong { margin-right: auto; color: #dce1e5; font-size: 11px; }
.yaoyu-wil-content { display: grid; grid-template-columns: 190px minmax(0,1fr); height: calc(100% - 34px); }
.yaoyu-wil-list { display: grid; align-content: start; border-right: 1px solid #2a3035; padding-top: 6px; }
.yaoyu-wil-list span { min-height: 40px; padding: 8px 10px; color: #8b939c; font-size: 10px; }
.yaoyu-wil-list .is-active { background: linear-gradient(90deg, rgba(63,158,202,.2), rgba(63,158,202,.04)); color: #d9e1e7; box-shadow: inset 2px 0 0 var(--code-blue); }
.yaoyu-wil-grid { display: grid; grid-template-columns: repeat(8,minmax(48px,1fr)); align-content: start; overflow: hidden; }
.yaoyu-wil-cell { position: relative; display: grid; height: 74px; place-items: center; border-right: 1px solid #2a3035; border-bottom: 1px solid #2a3035; background: #0e1113; }
.yaoyu-wil-cell small { position: absolute; top: 5px; left: 6px; color: #626c75; font-size: 8px; }
.yaoyu-wil-cell b { color: #e6aa35; font-size: 18px; font-style: italic; }
.yaoyu-wil-cell.is-selected { z-index: 1; box-shadow: inset 0 0 0 1px var(--code-blue), 0 0 18px rgba(64,180,230,.17); }
.resource { display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.resource-0 { color: #66d4ff; background: radial-gradient(circle at 35% 30%,#fff,#50c6f1 25%,#086284 67%,transparent 70%); }
.resource-1 { color: #7ae36d; background: radial-gradient(circle at 35% 30%,#e8ffd7,#5fcb58 30%,#1c5c25 67%,transparent 70%); }
.resource-2 { color: #f1c35a; background: linear-gradient(135deg,transparent 35%,#f2cd6d 37% 53%,#754b10 55% 68%,transparent 70%); transform: rotate(-25deg); border-radius: 3px; }
.resource-3 { color: #ef5f65; background: radial-gradient(circle,#ffd5d5 0 18%,#ed5057 20% 45%,#7b1820 47% 65%,transparent 67%); }
.yaoyu-coordinate-modal {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  width: min(620px,calc(100% - 44px));
  padding: 18px;
  border: 1px solid #454b52;
  border-radius: 10px;
  background: #181b1f;
  box-shadow: 0 28px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  opacity: 0 !important;
  transform: translate(-50%,-46%) scale(.965) !important;
  pointer-events: none;
  transition: opacity 260ms ease, transform 360ms cubic-bezier(.2,0,0,1);
}
[data-code-stage="2"] .yaoyu-coordinate-modal,
[data-code-stage="3"] .yaoyu-coordinate-modal { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; }
.yaoyu-coordinate-heading { display: flex; justify-content: space-between; color: #e0e5e9; font-size: 12px; }
.yaoyu-coordinate-modal > p { margin: 7px 0 12px; color: #7e8790; font-size: 9px; }
.yaoyu-coordinate-grid {
  position: relative;
  height: 210px;
  overflow: hidden;
  border: 1px solid #32383e;
  background-color: #0e1113;
  background-image: linear-gradient(rgba(89,111,127,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(89,111,127,.18) 1px,transparent 1px);
  background-size: 18px 18px;
}
.yaoyu-coordinate-grid::before,
.yaoyu-coordinate-grid::after { content:""; position:absolute; background:rgba(76,151,183,.28); }
.yaoyu-coordinate-grid::before { top:50%; right:0; left:0; height:1px; }
.yaoyu-coordinate-grid::after { top:0; bottom:0; left:50%; width:1px; }
.yaoyu-coordinate-person { position:absolute; z-index:2; top:50%; left:50%; width:34px; height:54px; color:#e2b762; transform:translate(-50%,-50%); transition:transform 1500ms cubic-bezier(.4,0,.2,1); filter:drop-shadow(0 0 7px rgba(226,183,98,.35)); }
.yaoyu-coordinate-person svg { width:100%; height:100%; fill:#99733e; stroke:#f0c87c; stroke-width:1.3; }
[data-code-stage="3"] .yaoyu-coordinate-person { transform:translate(calc(-50% - 27px),calc(-50% - 22px)); }
.yaoyu-coordinate-label { position:absolute; z-index:3; top:50%; left:calc(50% + 13px); color:#ffb52c; font:bold 18px "Berkeley Mono",monospace; transform:translateY(-50%); }
.yaoyu-coordinate-fields { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:11px; }
.yaoyu-coordinate-fields span { display:grid; gap:4px; color:#757e87; font-size:8px; }
.yaoyu-coordinate-fields b { padding:5px 6px; border:1px solid #30363c; background:#121518; color:#c9d0d6; font:500 10px "Berkeley Mono",monospace; }
.yaoyu-coordinate-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:12px; color:#9ba2a9; font-size:10px; }
.yaoyu-coordinate-actions span,.yaoyu-coordinate-actions b { padding:6px 12px; border:1px solid #353b41; border-radius:4px; font-weight:500; }
.yaoyu-coordinate-actions b { border-color:#3198ca; background:#238abe; color:#fff; }
.yaoyu-code-statusbar { display:flex; height:28px; align-items:center; gap:18px; padding:0 12px; border-top:1px solid #30343a; background:#171a1e; color:#7f8790; font-size:9px; }
.yaoyu-code-statusbar span:last-child { margin-left:auto; color:#91a1ad; }
.yaoyu-code-story { display:flex; align-items:center; gap:16px; width:min(720px,calc(100% - 32px)); margin:22px auto 0; color:#969da5; font-size:12px; }
.yaoyu-code-story > span { min-width:130px; }
.yaoyu-code-story i { position:relative; flex:1; height:2px; overflow:hidden; border-radius:2px; background:#20252a; }
.yaoyu-code-story b { display:block; width:0; height:100%; background:linear-gradient(90deg,#328fba,#63c9f5); box-shadow:0 0 12px rgba(87,196,240,.45); }
@media(max-width:900px) {
  .yaoyu-code-demo { width:calc(100% - 30px); }
  .yaoyu-code-window { height:600px; }
  .yaoyu-code-shell { grid-template-columns:40px 190px minmax(0,1fr); height:532px; }
  .yaoyu-code-explorer { font-size:10px; }
  .yaoyu-wil-content { grid-template-columns:150px minmax(0,1fr); }
  .yaoyu-wil-grid { grid-template-columns:repeat(6,minmax(45px,1fr)); }
}
@media(max-width:640px) {
  .yaoyu-code-section { display: block !important; }
  .yaoyu-code-demo { width:calc(100% - 20px); margin-top:36px; padding-bottom:38px; }
  .yaoyu-code-window { height:520px; border-radius:10px; }
  .yaoyu-code-titlebar { height:36px; }
  .yaoyu-code-window-controls span { width:28px; }
  .yaoyu-code-shell { grid-template-columns:34px minmax(0,1fr); height:458px; }
  .yaoyu-code-rail { gap:8px; padding-top:9px; }
  .yaoyu-code-rail span { width:27px; height:27px; font-size:14px; }
  .yaoyu-code-explorer { display:none; }
  .yaoyu-code-editor { font-size:10px; }
  .yaoyu-code-editor > div { grid-template-columns:32px minmax(0,1fr); }
  .yaoyu-code-editor > div > b { padding-right:8px; }
  .yaoyu-code-breadcrumb { overflow:hidden; text-overflow:ellipsis; }
  .yaoyu-wil-panel { height:250px; }
  .yaoyu-wil-content { grid-template-columns:1fr; }
  .yaoyu-wil-list { display:none; }
  .yaoyu-wil-grid { grid-template-columns:repeat(4,1fr); }
  .yaoyu-wil-cell { height:72px; }
  .yaoyu-coordinate-modal { width:calc(100% - 22px); padding:13px; }
  .yaoyu-coordinate-grid { height:160px; }
  .yaoyu-coordinate-fields { grid-template-columns:repeat(3,1fr); }
  .yaoyu-coordinate-fields span:nth-child(2),.yaoyu-coordinate-fields span:nth-child(3) { display:none; }
  .yaoyu-code-statusbar { height:26px; gap:9px; }
  .yaoyu-code-statusbar span:nth-child(2) { display:none; }
  .yaoyu-code-story { gap:10px; }
  .yaoyu-code-story > span { min-width:112px; font-size:11px; }
  .yaoyu-code-video { width: calc(100% - 20px); margin-top: 34px; padding-bottom: 46px; }
  .yaoyu-code-video-frame { border-radius: 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .yaoyu-code-caret { animation:none; }
  .yaoyu-wil-panel,.yaoyu-coordinate-modal,.yaoyu-coordinate-person { transition:none; }
}

/* Code-to-canvas relay: keep the original overlapping two-panel silhouette. */
.yaoyu-code-pair { min-height: 650px; margin-top: 48px; padding-bottom: 76px; }
.yaoyu-code-pair-shell { position: relative; height: 590px; isolation: isolate; }
.yaoyu-script-card,
.yaoyu-visual-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid #30363c;
  border-radius: 12px;
  background: #0d1012;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 34px 90px rgba(0,0,0,.45);
  transition: opacity 420ms cubic-bezier(.2,0,0,1), filter 420ms cubic-bezier(.2,0,0,1), transform 420ms cubic-bezier(.2,0,0,1), border-color 220ms ease;
}
.yaoyu-script-card { z-index: 1; top: 46px; left: 0; width: 61%; height: 510px; }
.yaoyu-visual-card { z-index: 3; top: 0; right: 0; width: 56%; height: 548px; opacity: .48; filter: saturate(.55) brightness(.72); transform: translateY(7px) scale(.992); }
.yaoyu-code-pair[data-code-stage="1"] .yaoyu-visual-card,
.yaoyu-code-pair[data-code-stage="2"] .yaoyu-visual-card,
.yaoyu-code-pair[data-code-stage="3"] .yaoyu-visual-card,
.yaoyu-code-pair[data-code-stage="4"] .yaoyu-visual-card { opacity: 1; filter: none; transform: none; border-color: #3a4851; }
.yaoyu-code-pair[data-code-stage="2"] .yaoyu-script-card,
.yaoyu-code-pair[data-code-stage="3"] .yaoyu-script-card,
.yaoyu-code-pair[data-code-stage="4"] .yaoyu-script-card { filter: brightness(.82); }
.yaoyu-pair-card-header { display: flex; height: 48px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #2c3237; background: linear-gradient(180deg,#191d21,#14171a); }
.yaoyu-pair-card-header > div { display: flex; align-items: center; gap: 9px; }
.yaoyu-pair-card-header small { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #46515a; border-radius: 5px; color: #85929c; font: 600 9px "Berkeley Mono",Consolas,monospace; }
.yaoyu-pair-card-header strong { color: #e2e6ea; font-size: 13px; font-weight: 600; }
.yaoyu-pair-card-header > span { display: inline-flex; min-height: 24px; align-items: center; padding: 0 9px; border: 1px solid #353c42; border-radius: 999px; background: #111417; color: #7f8992; font-size: 10px; transition: color 180ms ease,border-color 180ms ease,background 180ms ease; }
.yaoyu-script-tabs,.yaoyu-visual-tabs { display: flex; height: 38px; align-items: stretch; border-bottom: 1px solid #292f34; background: #111417; color: #707983; font-size: 10px; }
.yaoyu-script-tabs span,.yaoyu-visual-tabs span { display: flex; min-width: 132px; align-items: center; justify-content: center; border-right: 1px solid #292f34; }
.yaoyu-script-tabs .is-active,.yaoyu-visual-tabs .is-active { position: relative; background: #0d1012; color: #d6dce1; }
.yaoyu-script-tabs .is-active::before,.yaoyu-visual-tabs .is-active::before { content:""; position:absolute; top:0; right:0; left:0; height:1px; background:#55bff0; }
.yaoyu-script-code { position: relative; height: 384px; overflow: hidden; padding: 16px 0; background: linear-gradient(90deg,#111519,#0d1012); font: 12px/1.72 "Berkeley Mono",Consolas,monospace; }
.yaoyu-script-code > div:not(.yaoyu-script-suggestion) { display: grid; grid-template-columns: 45px minmax(0,1fr); min-height: 24px; }
.yaoyu-script-code > div > b { padding-right: 12px; color: #4f5a64; text-align: right; font-weight: 400; }
.yaoyu-script-code code { overflow: hidden; color: #cbd2d8; white-space: nowrap; }
.yaoyu-script-code .comment { color:#ce667f; }.yaoyu-script-code .keyword{color:#5cc875;font-weight:650}.yaoyu-script-code .command{color:#e5a83f}.yaoyu-script-code .number{color:#63bcec}.yaoyu-script-code .variable{color:#d768c4}
.yaoyu-script-active-line { position: relative; background: rgba(85,191,240,.08); box-shadow: inset 2px 0 0 rgba(85,191,240,.72); }
.yaoyu-script-suggestion { position: absolute; z-index: 2; top: 270px; left: 136px; display: flex; width: 270px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid #394149; border-radius: 6px; background: #1a1f23; color: #d7dde2; box-shadow: 0 16px 36px rgba(0,0,0,.48); font: 11px "Inter Variable","Microsoft YaHei UI",sans-serif; opacity: 1; transform: translateY(0); transition: opacity 180ms ease,transform 180ms ease; }
.yaoyu-script-suggestion strong { color:#75caf0;font-weight:600 }.yaoyu-script-suggestion span{color:#77828c;font-size:9px}
.yaoyu-code-pair:not([data-code-stage="0"]) .yaoyu-script-suggestion { opacity: 0; transform: translateY(-5px); }
.yaoyu-script-footer,.yaoyu-visual-footer { display: flex; height: 40px; align-items: center; gap: 8px; padding: 0 14px; border-top: 1px solid #2b3136; background: #15191c; color: #7d8790; font-size: 10px; }
.yaoyu-script-footer strong,.yaoyu-visual-footer strong { color:#8d98a1;font-weight:500 }.yaoyu-script-footer small{margin-left:auto;color:#65717a}.yaoyu-script-check{display:grid;width:18px;height:18px;place-items:center;border:1px solid #3b444b;border-radius:50%;color:#65717a;font-size:10px}
.yaoyu-code-pair:not([data-code-stage="0"]) .yaoyu-script-check { border-color: rgba(91,201,118,.48); background: rgba(91,201,118,.1); color:#6ed58a; }
.yaoyu-code-pair:not([data-code-stage="0"]) .yaoyu-script-card .yaoyu-pair-card-header > span { border-color:rgba(91,201,118,.3);background:rgba(91,201,118,.07);color:#75d58e; }
.yaoyu-code-handoff { position: absolute; z-index: 5; top: 20px; left: 49%; display: grid; width: 164px; gap: 7px; padding: 8px 10px; border: 1px solid #303940; border-radius: 7px; background: rgba(15,18,21,.94); color: #7d8891; box-shadow: 0 12px 30px rgba(0,0,0,.34); transform: translateX(-50%); }
.yaoyu-code-handoff span { font-size: 9px; text-align:center; }
.yaoyu-code-handoff i { height: 2px; overflow:hidden; border-radius:2px; background:#252b30; }
.yaoyu-code-handoff b { display:block; width:0; height:100%; background:linear-gradient(90deg,#63caee,#e0b65e); box-shadow:0 0 12px rgba(99,202,238,.5); }
.yaoyu-visual-canvas { position: relative; height: 420px; overflow:hidden; background:#090c0e; }
.yaoyu-visual-canvas > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:43% 35%; opacity:.2; filter:saturate(.72) contrast(1.15); transform:scale(1.06); }
.yaoyu-visual-canvas::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,10,.1),rgba(7,9,10,.38)),radial-gradient(circle at 50% 48%,transparent 10%,rgba(4,6,7,.34) 75%);pointer-events:none; }
.yaoyu-visual-grid { position:absolute;z-index:1;inset:0;background-image:linear-gradient(rgba(74,114,133,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(74,114,133,.13) 1px,transparent 1px);background-size:24px 24px;opacity:.7; }
.yaoyu-visual-selection { --move-x:0px;--move-y:0px;position:absolute;z-index:4;top:45%;left:44%;display:grid;width:178px;height:76px;place-items:center;border:1px solid #5cc5ed;background:linear-gradient(180deg,rgba(30,37,42,.88),rgba(12,15,17,.92));color:#e2c27c;box-shadow:0 0 0 1px rgba(92,197,237,.12),0 0 28px rgba(58,168,214,.14);transform:translate(calc(-50% + var(--move-x)),calc(-50% + var(--move-y)));transition:box-shadow 180ms ease; }
.yaoyu-visual-selection span { display:flex;width:132px;height:38px;align-items:center;justify-content:center;border:1px solid #8d7549;border-radius:5px;background:linear-gradient(180deg,#28231a,#171613);box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.3);font-size:13px;font-weight:600;letter-spacing:.08em; }
.yaoyu-visual-selection i { position:absolute;width:6px;height:6px;border:1px solid #aee9ff;background:#11171a;box-shadow:0 0 8px rgba(92,197,237,.48); }.yaoyu-visual-selection i:nth-of-type(1){top:-4px;left:-4px}.yaoyu-visual-selection i:nth-of-type(2){top:-4px;right:-4px}.yaoyu-visual-selection i:nth-of-type(3){bottom:-4px;right:-4px}.yaoyu-visual-selection i:nth-of-type(4){bottom:-4px;left:-4px}
.yaoyu-visual-pointer { --pointer-x:0px;--pointer-y:0px;position:absolute;z-index:6;top:58%;left:58%;width:15px;height:21px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));transform:translate(var(--pointer-x),var(--pointer-y)) rotate(-20deg); }
.yaoyu-visual-pointer::before { content:"";position:absolute;inset:0;background:#edf3f6;clip-path:polygon(0 0,100% 62%,58% 67%,78% 100%,61% 100%,42% 70%,12% 94%); }
.yaoyu-visual-coordinates { position:absolute;z-index:5;right:14px;bottom:14px;display:flex;gap:7px; }.yaoyu-visual-coordinates span{display:flex;min-width:70px;height:28px;align-items:center;justify-content:space-between;padding:0 9px;border:1px solid #323a40;border-radius:5px;background:rgba(13,17,19,.88);color:#79858e;font:9px "Berkeley Mono",Consolas,monospace}.yaoyu-visual-coordinates b{color:#d9e1e6;font-size:11px;font-weight:500}
.yaoyu-visual-footer { justify-content:space-between; }.yaoyu-visual-footer > span{color:#697680;font-family:"Berkeley Mono",Consolas,monospace}.yaoyu-code-pair[data-code-stage="2"] .yaoyu-visual-card .yaoyu-pair-card-header > span{border-color:rgba(85,191,240,.38);background:rgba(85,191,240,.08);color:#79cff2}.yaoyu-code-pair[data-code-stage="3"] .yaoyu-visual-card .yaoyu-pair-card-header > span,.yaoyu-code-pair[data-code-stage="4"] .yaoyu-visual-card .yaoyu-pair-card-header > span{border-color:rgba(91,201,118,.34);background:rgba(91,201,118,.08);color:#75d58e}
.yaoyu-code-pair[data-code-stage="2"] .yaoyu-visual-selection { box-shadow:0 0 0 1px rgba(92,197,237,.18),0 0 34px rgba(58,168,214,.27); }
@media(max-width:900px) {
  .yaoyu-code-pair { min-height:610px; }
  .yaoyu-code-pair-shell { height:550px; }
  .yaoyu-script-card { width:63%;height:470px; }
  .yaoyu-visual-card { width:58%;height:505px; }
  .yaoyu-script-code { height:344px;font-size:10px; }
  .yaoyu-script-suggestion { left:88px;width:230px; }
  .yaoyu-visual-canvas { height:377px; }
}
@media(max-width:640px) {
  .yaoyu-code-pair { min-height:800px;margin-top:36px;padding-bottom:46px; }
  .yaoyu-code-pair-shell { height:760px; }
  .yaoyu-script-card,.yaoyu-visual-card { position:relative;top:auto;right:auto;left:auto;width:100%;border-radius:9px; }
  .yaoyu-script-card { height:390px; }
  .yaoyu-visual-card { z-index:3;height:380px;margin-top:-12px; }
  .yaoyu-pair-card-header { height:43px;padding:0 12px; }
  .yaoyu-pair-card-header strong { font-size:12px; }
  .yaoyu-script-tabs,.yaoyu-visual-tabs { height:34px; }
  .yaoyu-script-tabs span,.yaoyu-visual-tabs span { min-width:108px;font-size:9px; }
  .yaoyu-script-code { height:273px;padding-top:10px;font-size:9px;line-height:1.58; }
  .yaoyu-script-code > div:not(.yaoyu-script-suggestion) { grid-template-columns:32px minmax(0,1fr);min-height:19px; }
  .yaoyu-script-code > div > b { padding-right:8px; }
  .yaoyu-script-suggestion { top:205px;left:62px;width:225px;padding:8px; }
  .yaoyu-script-footer,.yaoyu-visual-footer { height:40px;padding:0 10px;font-size:9px; }
  .yaoyu-code-handoff { top:374px;left:50%;width:150px;padding:6px 9px; }
  .yaoyu-visual-canvas { height:303px; }
  .yaoyu-visual-selection { width:148px;height:68px; }.yaoyu-visual-selection span{width:112px;height:34px;font-size:11px}.yaoyu-visual-coordinates{right:9px;bottom:9px}.yaoyu-visual-coordinates span{min-width:58px;height:25px;padding:0 7px}
}
@media(prefers-reduced-motion:reduce) {
  .yaoyu-script-card,.yaoyu-visual-card,.yaoyu-script-suggestion { transition:none; }
}

/* Let the section background provide depth without masking the recording. */
#code-editor {
  background:
    linear-gradient(to right, #08090a 0%, rgba(8,9,10,.96) 2%, rgba(8,9,10,.7) 5%, rgba(8,9,10,.3) 9%, rgba(8,9,10,.06) 14%, transparent 19%, transparent 81%, rgba(8,9,10,.06) 86%, rgba(8,9,10,.3) 91%, rgba(8,9,10,.7) 95%, rgba(8,9,10,.96) 98%, #08090a 100%),
    linear-gradient(to bottom, transparent calc(100% - 180px), rgba(8,9,10,.22) calc(100% - 125px), rgba(8,9,10,.68) calc(100% - 65px), #08090a 100%),
    radial-gradient(ellipse 78% 52% at 50% 66%, rgba(139,153,173,.2) 0%, rgba(88,102,121,.11) 48%, transparent 100%),
    radial-gradient(ellipse 50% 25% at 28% 39%, rgba(177,185,196,.08), transparent 100%);
}
#code-editor + .-B0yXq_root ._4qHHWa_keyline,
#code-editor + .-B0yXq_root ._4qHHWa_shadow { display: none; }
#code-editor > .b-30Va_footer { display: none !important; }
.yaoyu-video-navigation { display: flex; justify-content: space-between; align-items: center; position: absolute; top: calc(50% + 16px); left: 50%; width: min(1482px, 100%); transform: translate(-50%, -50%); z-index: 3; pointer-events: none; }
.yaoyu-video-navigation button { pointer-events: auto; }
.yaoyu-video-navigation button { display: grid; place-items: center; width: 60px; height: 60px; flex: 0 0 60px; padding: 0; border: 1px solid #363a40; border-radius: 50%; background: linear-gradient(#25282d, #151719); color: #cdd1d7; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.2); cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.yaoyu-video-navigation button svg { width: 26px; height: 26px; }
.yaoyu-video-navigation button:hover { background: #30343a; border-color: #6a727f; color: #fff; transform: translateY(-2px); }
.yaoyu-video-navigation button:active { transform: translateY(0); }
.yaoyu-video-navigation button:focus-visible { outline: 2px solid #c9d2df; outline-offset: 4px; }
.yaoyu-video-navigation button:disabled { opacity: .35; cursor: default; transform: none; }
.yaoyu-video-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.yaoyu-video-caption [data-video-title] { font-size: 14px; color: #c5c9d0; }
.yaoyu-video-caption [data-video-count] { font-size: 12px; color: #858e9b; font-variant-numeric: tabular-nums; letter-spacing: .14em; }
@media (prefers-reduced-motion: reduce) { .yaoyu-video-navigation button { transition: none; } }
@media (max-width: 640px) { .yaoyu-video-navigation { display: none; } }
@media(min-width:641px) {
  /* Recorded video must not inherit the illustration's grain/light overlays. */
  #code-editor ._9Zs8oG_grainOverlay,
  #code-editor ._9Zs8oG_glow {
    display: none !important;
  }
  #code-editor ._9Zs8oG_stage {
    height: auto;
    width: 100%;
    margin-left: 0;
    mask-image: none;
  }
  #code-editor ._9Zs8oG_container { border-top: 0; }
  #code-editor .yaoyu-code-video-panel {
    width: min(1322px, calc(100% - 160px));
    height: auto;
    margin-inline: auto;
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(221,230,241,.1), 0 24px 64px rgba(0,0,0,.3);
    overflow: hidden;
  }
  #code-editor .yaoyu-code-video-panel::after {
    content: none;
  }
}
#code-editor .yaoyu-code-video-panel > ._9Zs8oG_timelineWrapper { display: none; }
#code-editor ._9Zs8oG_initiativesBox { display: none !important; }
#code-editor .yaoyu-code-source-video {
  position: relative;
  inset: auto;
  display: block;
  width: 1322px;
  max-width: 100%;
  margin-inline: auto;
  height: auto;
  transform: none;
  object-fit: contain;
  object-position: top center;
  mask-image: none;
  background: #08090a;
  /* Preserve the source recording's original color and contrast. */
  filter: none !important;
  pointer-events: none;
}
@media(max-width:640px) {
  #code-editor .yaoyu-code-source-video { display: none; }
}
#mall-showcase .yaoyu-mall-native-content { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: calc(100% - 48px); min-height: 0; padding: 12px 12px 16px; }
#mall-showcase .yaoyu-mall-native-media { position: relative; min-height: 0; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: #0d0e10; }
#mall-showcase .yaoyu-mall-native-media::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(13,14,16,.28) 46%, #0d0e10 100%); }
#mall-showcase .yaoyu-mall-native-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#mall-showcase .yaoyu-mall-native-copy { padding: 13px 4px 2px; }
#mall-showcase .yaoyu-mall-native-copy p { max-width: 34ch; margin: 0; color: #c8cbd0; font-size: 14px; line-height: 1.6; }
#mall-showcase .yaoyu-mall-native-copy span { display: block; margin-top: 7px; color: #7f858c; font-size: 12px; line-height: 1.4; }
#mall-showcase .yaoyu-native-mall-frame:hover .yaoyu-mall-native-media img { transform: scale(1.018); }
#mall-showcase .yaoyu-native-mall-frame .NN4GVa_avatarImage { object-fit: cover; }
@media (min-width: 641px) { #mall-showcase .b-30Va_header { padding-bottom: 48px; } #mall-showcase .b-30Va_illustration { margin-top: -16px; } }
@media (prefers-reduced-motion: reduce) { #mall-showcase .yaoyu-mall-native-media img { transition: none; } }
.yaoyu-agent-toolbox-image { display: block; width: 1265px; max-width: none; height: auto; margin-left: 320px; border-radius: 10px; }
.yaoyu-agent-backdrop:has(.yaoyu-agent-toolbox-image) { mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.9) 67%, rgba(0,0,0,.5) 73%, rgba(0,0,0,.12) 79%, transparent 84%), linear-gradient(to right, #000 0%, #000 78%, transparent 100%); mask-composite: intersect; background: transparent; box-shadow: none; }
@media(max-width:900px) { .yaoyu-agent-toolbox-image { width: 900px; margin-left: 0; } }
.yaoyu-agent-demo {
  --agent-bg: #1f1f1f;
  --agent-panel: #242424;
  --agent-raised: #292929;
  --agent-border: #393939;
  --agent-text: #e5e5e5;
  --agent-secondary: #aaa;
  --agent-accent: #adc6b4;
  width: min(1184px, calc(100% - 64px));
  margin: 0 auto;
  color: var(--agent-text);
  font-family: "Inter Variable", "Yaoyu Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  position: relative;
  isolation: isolate;
}
.yaoyu-agent-backdrop { position: absolute; z-index: -1; top: 36px; left: 0; width: 100%; height: 620px; overflow: hidden; pointer-events: none; }
.yaoyu-agent-backdrop .qM9FAa_container { transform: translateX(-40px) !important; }
@media (min-width: 901px) {
  .yaoyu-agent-demo { width: calc(100% - 64px); }
  .yaoyu-agent-demo .yaoyu-agent-window,
  .yaoyu-agent-demo .yaoyu-agent-demo-footer { width: min(640px, 56%); }
  .yaoyu-agent-demo .yaoyu-agent-workspace { grid-template-columns: 128px minmax(0, 1fr); }
  .yaoyu-agent-demo .yaoyu-agent-conversation { padding: 20px 20px 12px; }
  .yaoyu-agent-demo .yaoyu-agent-project { padding-inline: 20px; }
  .yaoyu-agent-demo .yaoyu-agent-composer { width: calc(100% - 32px); }
}
.yaoyu-agent-demo *, .yaoyu-agent-demo *::before, .yaoyu-agent-demo *::after { box-sizing: border-box; }
.yaoyu-agent-demo [hidden] { display: none !important; }
.yaoyu-agent-demo p, .yaoyu-agent-demo ol { margin: 0; }
.yaoyu-agent-demo .yaoyu-agent-icon { display: block; flex: none; width: 18px; height: 18px; }
.yaoyu-agent-window { height: 656px; overflow: hidden; border: 1px solid #454545; border-radius: 10px; background: var(--agent-bg); box-shadow: 0 24px 72px #0004, 0 1px 0 #ffffff0a inset; }
.yaoyu-agent-titlebar { position: relative; height: 38px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #141414; background: linear-gradient(#2b2b2b, #272727); }
.yaoyu-agent-window-title { padding: 0 12px; border: 1px solid #4a4a4a; border-radius: 5px; font-size: 12px; font-weight: 550; line-height: 24px; }
.yaoyu-agent-window-actions { position: absolute; right: 12px; display: flex; align-items: center; gap: 24px; color: var(--agent-secondary); }
.yaoyu-agent-window-actions .yaoyu-agent-icon { width: 16px; height: 16px; }
.yaoyu-agent-workspace { display: grid; grid-template-columns: 184px minmax(0, 1fr); height: calc(100% - 38px); }
.yaoyu-agent-sidebar { position: relative; min-width: 0; padding: 12px 8px; border-right: 1px solid var(--agent-border); background: var(--agent-panel); }
.yaoyu-agent-new { display: flex; align-items: center; gap: 8px; padding: 4px 8px 20px; color: #ddd; font-size: 13px; }
.yaoyu-agent-history-label { padding: 0 10px 8px; font-size: 12px; color: var(--agent-secondary); }
.yaoyu-agent-task { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 6px; background: #393939; color: #ececec; font-size: 12px; line-height: 1.5; }
.yaoyu-agent-task span:first-child { flex: 1; }
.yaoyu-agent-task-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--agent-accent); }
.yaoyu-agent-sidebar-bottom { position: absolute; bottom: 20px; left: 18px; display: flex; align-items: center; gap: 8px; color: var(--agent-secondary); font-size: 12px; }
.yaoyu-agent-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.yaoyu-agent-project { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; height: 48px; padding: 0 28px; border-bottom: 1px solid #2c2c2c; font-size: 12px; color: #cecece; white-space: nowrap; }
.yaoyu-agent-project .yaoyu-agent-icon, .yaoyu-agent-project-label, .yaoyu-agent-path-divider { color: var(--agent-secondary); }
.yaoyu-agent-conversation { position: relative; flex: 1; min-height: 0; padding: 24px 32px 16px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #484848 transparent; }
.yaoyu-agent-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; text-align: center; }
.yaoyu-agent-intro p { font-size: 20px; font-weight: 500; }
.yaoyu-agent-intro > span:last-child { color: var(--agent-secondary); font-size: 13px; }
.yaoyu-agent-user-message { width: fit-content; max-width: 90%; margin-left: auto; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: #2b2b2b; color: #ededed; font-size: 15px; }
.yaoyu-agent-response { max-width: 760px; margin: 20px auto 0; }
.yaoyu-agent-response-heading { display: flex; align-items: baseline; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #323232; }
.yaoyu-agent-elapsed { color: var(--agent-secondary); font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
.yaoyu-agent-step { padding: 0 0 12px; }
.yaoyu-agent-demo .yaoyu-agent-step-text { color: #d2d2d2; font-size: 15px; line-height: 1.85; }
.yaoyu-agent-demo .yaoyu-agent-tool { padding-top: 3px; font-size: 12px; color: var(--agent-secondary); line-height: 1.7; }
.yaoyu-agent-processing { width: fit-content; color: #aaa; font-size: 14px; background: linear-gradient(100deg,#999 0%,#999 37.5%,#eee 50%,#999 62.5%,#999 100%); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: yaoyu-agent-shimmer 3.112s linear infinite; }
.yaoyu-agent-final-copy { color: #d2d2d2; font-size: 15px; line-height: 1.85; }
.yaoyu-agent-demo .yaoyu-agent-final-copy p + p { margin-top: 16px; }
.yaoyu-agent-changes { margin: 20px 0 0; padding: 10px 12px; border: 1px solid #3b423d; border-radius: 6px; background: #222723; font-size: 12px; }
.yaoyu-agent-changes-heading { display: flex; align-items: center; gap: 7px; padding-bottom: 6px; color: #ddd; }
.yaoyu-agent-changes-heading .yaoyu-agent-icon { width: 14px; height: 14px; color: #a8b7ab; }
.yaoyu-agent-changes-heading > span:last-child { margin-left: auto; color: #abc1b1; }
.yaoyu-agent-change-line { display: grid; grid-template-columns: 10px 64px minmax(0, 1fr); column-gap: 8px; color: #bed1c3; line-height: 1.8; }
.yaoyu-agent-change-line > span:nth-child(2) { color: #aebbb1; }
.yaoyu-agent-demo .yaoyu-agent-result { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: #d7e3da; font-size: 13px; }
.yaoyu-agent-result .yaoyu-agent-icon { margin-top: 1px; color: var(--agent-accent); }
.yaoyu-agent-composer { flex: none; width: calc(100% - 48px); max-width: 760px; margin: 12px auto 20px; min-width: 0; height: 100px; padding: 12px 16px 10px; border: 1px solid #3f3f3f; border-radius: 16px; background: #282828; box-shadow: 0 1px 2px #0002; }
.yaoyu-agent-demo .yaoyu-agent-input { display: block; width: 100%; height: 40px; min-height: 0; margin: 0; padding: 0; resize: none; border: none; outline: none; border-radius: 0; background: transparent; color: #e5e5e5; font: inherit; font-size: 14px; line-height: 1.5; box-shadow: none; }
.yaoyu-agent-input::placeholder { color: #aaa; opacity: 1; }
.yaoyu-agent-composer-bottom { display: flex; align-items: center; justify-content: flex-end; height: 30px; }
.yaoyu-agent-input-actions { display: flex; align-items: center; gap: 10px; }
.yaoyu-agent-demo .yaoyu-agent-mic { display: grid; place-items: center; width: 28px; height: 30px; padding: 0; background: transparent; color: #8b8b8b; cursor: default; }
.yaoyu-agent-demo button { appearance: none; cursor: pointer; border: none; font-family: inherit; line-height: 1.5; }
.yaoyu-agent-demo .yaoyu-agent-send { display: grid; place-items: center; width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 50%; background: #bcbcbc; color: #262626; }
.yaoyu-agent-demo .yaoyu-agent-send:hover { background: #ededed; }
.yaoyu-agent-demo button:focus-visible, .yaoyu-agent-demo .yaoyu-agent-input:focus-visible { outline: 2px solid #d6e6dc; outline-offset: 4px; }
.yaoyu-agent-demo-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 8px 2px; color: #aaa; font-size: 12px; }
.yaoyu-agent-demo-caption { display: flex; align-items: center; gap: 8px; }
.yaoyu-agent-caption-dot { width: 5px; height: 5px; border-radius: 50%; background: #919b94; }
.yaoyu-agent-footer-divider { color: #626262; }
.yaoyu-agent-playback { display: flex; gap: 4px; }
.yaoyu-agent-playback button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; min-width: 66px; padding: 4px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #b5b5b5; font-size: 12px; }
.yaoyu-agent-playback button:hover { background: #1b1b1b; color: #eee; }
.yaoyu-agent-playback button:disabled { cursor: default; color: #888; background: transparent; }
.yaoyu-agent-playback .yaoyu-agent-icon { width: 14px; height: 14px; }
.yaoyu-agent-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.yaoyu-agent-demo[data-agent-enhanced] [data-yaoyu-motion="agent-message"],
.yaoyu-agent-demo[data-agent-enhanced] [data-yaoyu-motion="agent-response"],
.yaoyu-agent-demo[data-agent-enhanced] [data-yaoyu-motion="agent-step"],
.yaoyu-agent-demo[data-agent-enhanced] [data-yaoyu-motion="agent-changes"],
.yaoyu-agent-demo[data-agent-enhanced] [data-yaoyu-motion="agent-result"] { animation: yaoyu-agent-reveal 360ms cubic-bezier(.2,0,0,1) both; }
.yaoyu-agent-demo[data-agent-state="paused"] [data-yaoyu-motion],
.yaoyu-agent-demo[data-agent-state="ready"] [data-yaoyu-motion] { animation-play-state: paused; }
@keyframes yaoyu-agent-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes yaoyu-agent-shimmer { 0% { background-position: 125% 0; } 27.908%, 100% { background-position: -25% 0; } }
@media (max-width: 900px) {
  .yaoyu-agent-demo { width: calc(100% - 48px); display: flex; flex-direction: column; }
  .yaoyu-agent-backdrop { position: relative; top: auto; order: 2; height: 280px; margin-top: 16px; }
  .yaoyu-agent-backdrop .qM9FAa_container { width: 1100px; height: 420px; margin: 0; transform: none !important; mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 70%), linear-gradient(to right, #000 0%, #000 25%, transparent 85%) !important; }
  .yaoyu-agent-backdrop .qM9FAa_panel { width: 1500px; padding: 24px; transform: scale(.7); transform-origin: top left; }
  .yaoyu-agent-workspace { grid-template-columns: 160px minmax(0, 1fr); }
  .yaoyu-agent-conversation { padding-right: 20px; padding-left: 20px; }
  .yaoyu-agent-project { padding-inline: 20px; }
  .yaoyu-agent-composer { width: calc(100% - 32px); }
}
@media (max-width: 640px) {
  .yaoyu-agent-section { flex-direction: column !important; }
  .yaoyu-agent-section .b-30Va_header { padding-top: 24px; padding-bottom: 32px; }
  .yaoyu-agent-section .b-30Va_title { font-size: 32px !important; line-height: 1.25 !important; }
  .yaoyu-agent-demo { width: 100%; }
  .yaoyu-agent-window { height: 660px; border-radius: 8px; }
  .yaoyu-agent-workspace { grid-template-columns: minmax(0, 1fr); }
  .yaoyu-agent-sidebar { display: none; }
  .yaoyu-agent-titlebar { height: 34px; }
  .yaoyu-agent-workspace { height: calc(100% - 34px); }
  .yaoyu-agent-window-actions { right: 10px; gap: 12px; }
  .yaoyu-agent-window-actions > :first-child { display: none; }
  .yaoyu-agent-window-title { padding-inline: 8px; border: 0; }
  .yaoyu-agent-project { height: 44px; padding-inline: 16px; gap: 7px; }
  .yaoyu-agent-project-label { display: none; }
  .yaoyu-agent-conversation { padding: 20px 16px 12px; }
  .yaoyu-agent-user-message { max-width: 100%; padding: 10px 12px; font-size: 14px; }
  .yaoyu-agent-intro p { font-size: 18px; }
  .yaoyu-agent-response { margin-top: 16px; }
  .yaoyu-agent-step { gap: 8px; padding-block: 5px; }
  .yaoyu-agent-changes { margin-left: 0; padding: 8px; }
  .yaoyu-agent-change-line { grid-template-columns: 8px 56px minmax(0, 1fr); column-gap: 5px; }
  .yaoyu-agent-composer { width: calc(100% - 24px); height: 106px; margin: 8px auto 12px; padding: 12px; border-radius: 12px; }
  .yaoyu-agent-demo .yaoyu-agent-input { height: 44px; }
  .yaoyu-agent-demo-footer { gap: 4px; }
  .yaoyu-agent-playback button { min-width: 56px; padding-inline: 6px; }
  .yaoyu-agent-section .b-30Va_header { order: 0 !important; }
  .yaoyu-agent-section .yaoyu-agent-demo { order: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .yaoyu-agent-demo [data-yaoyu-motion] { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Compact conversation card, matching the supplied chat reference. */
.yaoyu-agent-demo { --agent-bg: #101112; --agent-panel: #141516; --agent-text: #c9cbd0; --agent-border: #242628; }
.yaoyu-agent-demo .yaoyu-agent-window { position: relative; width: min(460px, 44%); height: 600px; border-color: var(--agent-border); border-radius: 12px; background: var(--agent-bg); box-shadow: none; }
.yaoyu-agent-demo .yaoyu-agent-demo-footer { width: min(520px, 48%); }
.yaoyu-agent-demo .yaoyu-agent-titlebar { height: 48px; padding: 0 22px; justify-content: flex-start; gap: 10px; background: #121314; border-bottom: 1px solid #202224; }
.yaoyu-agent-titlebar > .yaoyu-agent-icon { color: #96a1aa; width: 18px; height: 18px; }
.yaoyu-agent-demo .yaoyu-agent-window-title { padding: 0; border: 0; border-radius: 0; font-size: 15px; font-weight: 500; color: #e0e5e9; }
.yaoyu-agent-channel { font-size: 12px; color: #99a3ac; }
.yaoyu-agent-demo .yaoyu-agent-workspace { display: flex; height: calc(100% - 48px); }
.yaoyu-agent-demo .yaoyu-agent-main { width: 100%; }
.yaoyu-agent-demo .yaoyu-agent-sidebar,
.yaoyu-agent-demo .yaoyu-agent-project { display: none; }
.yaoyu-agent-demo .yaoyu-agent-conversation { padding: 20px 24px 12px; }
.yaoyu-agent-demo .yaoyu-agent-user-message { max-width: 100%; width: 100%; margin: 0; padding: 0; background: transparent; border-radius: 0; color: #c9cbd0; font-size: 14px; line-height: 1.6; }
.yaoyu-agent-message-author { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; color: #d2d4da; font-size: 14px; font-weight: 600; }
.yaoyu-agent-message-author > span { color: #92959d; font-size: 11px; font-weight: 400; }
.yaoyu-agent-demo .yaoyu-agent-response { margin-top: 24px; }
.yaoyu-agent-demo .yaoyu-agent-response-heading { align-items: baseline; gap: 10px; border: 0; padding: 0; margin-bottom: 8px; }
.yaoyu-agent-demo .yaoyu-agent-elapsed { color: #92959d; font-size: 11px; }
.yaoyu-agent-demo .yaoyu-agent-step-text,
.yaoyu-agent-demo .yaoyu-agent-final-copy { font-size: 14px; line-height: 1.65; color: #c9cbd0; }
.yaoyu-agent-demo .yaoyu-agent-step { padding-bottom: 12px; }
.yaoyu-agent-demo .yaoyu-agent-final-copy p + p { margin-top: 12px; }
.yaoyu-agent-demo .yaoyu-agent-changes { margin-top: 14px; background: #171c19; border-color: #29342c; }
.yaoyu-agent-demo .yaoyu-agent-composer { width: calc(100% - 20px); height: 148px; margin: 8px auto 10px; padding: 16px; border: 1px solid #242628; border-radius: 10px; background: #141516; box-shadow: none; }
.yaoyu-agent-demo .yaoyu-agent-input { height: 78px; font-size: 14px; line-height: 1.55; }
.yaoyu-agent-demo .yaoyu-agent-input::placeholder { color: #989ba5; }
.yaoyu-agent-demo .yaoyu-agent-send { width: 30px; min-width: 30px; height: 30px; border: 0; border-radius: 50%; background: #929292; color: #303030; }
.yaoyu-agent-demo .yaoyu-agent-send:hover { background: #bcbcbc; }
.yaoyu-agent-demo .yaoyu-agent-intro { align-items: flex-start; justify-content: flex-start; padding-top: 8px; text-align: left; }
.yaoyu-agent-demo .yaoyu-agent-intro p { font-size: 16px; }
.yaoyu-agent-demo .yaoyu-agent-composer { position: relative; }
.yaoyu-agent-chat-tools { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 12px; color: #747780; pointer-events: none; }
.yaoyu-agent-chat-tools > span { display: flex; align-items: center; justify-content: center; width: 20px; height: 28px; }
.yaoyu-agent-chat-tools svg { width: 18px; height: 18px; }
.yaoyu-agent-demo .yaoyu-agent-mic { display: grid; color: #747474; }
.yaoyu-agent-backdrop .qM9FAa_container { transform: translateX(-100px) !important; }
@media (max-width: 900px) {
  .yaoyu-agent-demo .yaoyu-agent-window,
  .yaoyu-agent-demo .yaoyu-agent-demo-footer { width: min(460px, 100%); }
  .yaoyu-agent-backdrop .qM9FAa_container { transform: none !important; }
}
@media (max-width: 640px) {
  .yaoyu-agent-demo .yaoyu-agent-titlebar { padding-inline: 18px; gap: 8px; }
  .yaoyu-agent-demo .yaoyu-agent-conversation { padding-inline: 18px; }
  .yaoyu-agent-demo .yaoyu-agent-composer { padding: 12px; height: 140px; }
  .yaoyu-agent-channel { font-size: 11px; }
  .yaoyu-agent-chat-tools { gap: 8px; left: 12px; }
  .yaoyu-agent-chat-tools > span:nth-child(n+5) { display: none; }
}