.vp-studio-showcase{margin:24px auto 56px;max-width:1200px;padding:26px 28px;border:1px solid var(--line,#c7d3df);border-radius:7px;background:var(--surface,var(--paper,#fff));color:var(--ink,#192d36)}
.vp-showcase-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line,#c7d3df);padding-bottom:18px;margin-bottom:18px}
.vp-showcase-heading h2{font-size:26px;line-height:1.4;letter-spacing:0;margin:0 0 7px}
.vp-showcase-heading p{font-size:15px;line-height:1.8;margin:0;color:var(--muted,#536975)}
.vp-studio-showcase button{min-height:44px;border:1px solid var(--line,#c7d3df);border-radius:4px;background:transparent;color:inherit;padding:8px 13px;font:600 14px/1.5 system-ui,'Microsoft YaHei',sans-serif;cursor:pointer}
.vp-studio-showcase button[aria-pressed=true]{background:var(--accent,#176f74);border-color:var(--accent,#176f74);color:white}
.vp-studio-showcase [data-showcase-play]{min-width:140px}
.vp-studio-showcase [data-showcase-play][hidden]{display:block;visibility:hidden;pointer-events:none}
.vp-studio-showcase [data-showcase-play]:disabled{cursor:default;opacity:.7}
.vp-showcase-types{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;min-height:44px}
.vp-showcase-stage{display:grid;grid-template-columns:minmax(230px,.7fr) minmax(0,1.8fr);gap:22px;align-items:center;min-height:420px}
.vp-showcase-stage>div{min-width:0;max-width:100%}
.vp-showcase-steps{display:grid;gap:8px;list-style:none;padding:0;margin:0 0 20px;counter-reset:workflow}
.vp-showcase-steps li{font-size:16px;font-weight:600;line-height:1.65;min-height:49px;padding:10px 12px;border:1px solid var(--line,#c7d3df);border-left:3px solid var(--line,#c7d3df);border-radius:5px;transition:border-color 180ms ease,color 180ms ease,background-color 180ms ease}
.vp-showcase-steps li:before{counter-increment:workflow;content:counter(workflow) ' / ';font:500 13px ui-monospace,Consolas,monospace;color:var(--muted,#536975)}
.vp-showcase-steps li[aria-current=step]{color:var(--accent,#176f74);border-left-color:currentColor;background:color-mix(in srgb,var(--accent,#176f74) 7%,transparent)}
.vp-showcase-data{height:190px;min-width:0;max-width:100%;overflow:auto;border-top:1px solid var(--line,#c7d3df);font-variant-numeric:tabular-nums;scrollbar-gutter:stable}
.vp-showcase-data table{border-collapse:collapse;width:100%;font:12px/1.65 ui-monospace,Consolas,monospace}
.vp-showcase-data caption{text-align:left;font:13px/1.6 system-ui,'Microsoft YaHei',sans-serif;color:var(--muted,#536975);padding:8px 0}
.vp-showcase-data th,.vp-showcase-data td{padding:5px 7px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line,#c7d3df)}
.vp-showcase-paper{position:relative;display:block;margin:0;height:420px;min-width:0;max-width:100%;background:#fff;border:1px solid #c8d3d8;border-radius:7px;box-shadow:0 8px 26px #173e4d0d;overflow:hidden}
.vp-showcase-card{position:absolute;inset:18px;display:block}
.vp-showcase-card[hidden]{display:none}
.vp-showcase-paper img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;background:#fff}
.vp-showcase-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding-top:18px;margin-top:18px;border-top:1px solid var(--line,#c7d3df);min-height:78px}
.vp-showcase-footer p{font-size:13px;line-height:1.7;color:var(--muted,#536975);margin:0;max-width:80ch;min-height:45px}
.vp-showcase-footer a{font-size:15px;font-weight:700;min-height:44px;display:inline-flex;align-items:center;color:var(--accent,#176f74)}
.vp-studio-showcase :is(button,a):focus-visible{outline:3px solid var(--accent,#176f74);outline-offset:3px}
@media(max-width:760px){.vp-studio-showcase{margin:20px 16px 36px;padding:20px 16px}.vp-showcase-heading h2{font-size:23px}.vp-showcase-stage{grid-template-columns:minmax(0,1fr);gap:14px;min-height:0}.vp-showcase-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:14px}.vp-showcase-steps li{font-size:14px;line-height:1.5;min-height:78px;padding:8px 6px;border-left:1px solid var(--line,#c7d3df);border-bottom:3px solid var(--line,#c7d3df)}.vp-showcase-steps li:before{display:block}.vp-showcase-steps li[aria-current=step]{border-bottom-color:currentColor}.vp-showcase-data{height:175px}.vp-showcase-paper{height:260px}.vp-showcase-card{inset:8px}.vp-showcase-footer{grid-template-columns:1fr;gap:8px;min-height:135px}.vp-showcase-footer p{min-height:66px}.vp-showcase-footer a{font-size:14px}}
@media(prefers-reduced-motion:reduce){.vp-showcase-steps li{transition:none}}
html[data-reduced-motion=true] .vp-showcase-steps li{transition:none}