@rinova/playground 0.1.5 → 0.7.0

package/dist/style.css

@@ -1,475 +1,2639 @@
-.pw-toast-host[data-v-4f7c0a94] {
-  position: fixed;
-  left: 50%;
-  bottom: 32px;
-  z-index: 2000;
+.pw-api-brief[data-v-20ccf753] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pw-api-brief__item[data-v-20ccf753] {
+  display: inline-flex;
+  min-width: 0;
+}
+.pw-api-brief__chip[data-v-20ccf753] {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  max-width: 100%;
+  padding: 2px 8px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+.pw-api-brief__chip[data-v-20ccf753]:hover {
+  border-color: var(--rp-color-primary);
+}
+.pw-api-brief__name[data-v-20ccf753] {
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+}
+.pw-api-brief__type[data-v-20ccf753],
+.pw-api-brief__default[data-v-20ccf753] {
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 11px;
+  max-width: min(260px, 100%);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pw-demo-grid[data-v-68029d58] {
+  display: grid;
+  grid-template-columns: repeat(var(--pw-demo-columns, 1), minmax(0, 1fr));
+  gap: var(--pw-demo-gap, 12px);
+  width: 100%;
+  min-width: 0;
+}
+.pw-demo-grid.is-auto[data-v-68029d58] {
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--pw-demo-min, 220px), 100%), 1fr));
+}
+@media (max-width: 900px) {
+.pw-demo-grid[data-v-68029d58] {
+    grid-template-columns: minmax(0, 1fr);
+}
+}
+.pw-demo[data-v-a3355761] {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-width: 0;
+  margin: 0;
+}
+.pw-demo__title[data-v-a3355761] {
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+}
+.pw-demo__body[data-v-a3355761] {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  transform: translateX(-50%);
-  pointer-events: none;
+  gap: 12px;
+  min-width: 0;
 }
-.pw-toast[data-v-4f7c0a94] {
-  padding: 8px 14px;
+.pw-demo.is-column .pw-demo__body[data-v-a3355761] {
+  flex-direction: column;
+  align-items: stretch;
+}
+.pw-demo.align-start .pw-demo__body[data-v-a3355761] {
+  align-items: flex-start;
+}
+.pw-demo.align-end .pw-demo__body[data-v-a3355761] {
+  align-items: flex-end;
+}
+.pw-demo.surface-card[data-v-a3355761] {
+  padding: 16px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius);
+  background: var(--rp-color-surface);
+}
+.pw-demo__note[data-v-a3355761] {
+  margin: 0;
+  color: var(--rp-color-text-muted);
+  font-size: 12px;
+}
+.pw-demo__footer[data-v-a3355761] {
+  padding-top: 8px;
+  border-top: 1px dashed var(--rp-color-border);
+}
+.pw-scene-note[data-v-07e42ce6] {
+  padding: 8px 12px;
+  border-left: 3px solid var(--rp-color-primary);
+  border-radius: 0 6px 6px 0;
+  background: color-mix(in srgb, var(--rp-color-primary) 6%, transparent);
+  color: var(--rp-color-text-muted);
+  font-size: 12.5px;
+  line-height: 1.65;
+}
+/**
+ * 文档排版（prose）。
+ *
+ * 这套类名是「公共契约」：`PwProse` 用它渲染手写的 Vue 内容页，
+ * `PwMarkdown` 把 Markdown 转成同样的结构再用同一套样式——
+ * 两条路出来的标题、列表、表格、代码块必须长得一样，所以样式不能 scoped。
+ *
+ * 所有色值只取主题变量，不写死任何颜色。
+ */
+.pw-prose {
+  --pw-prose-width: 720px;
+  --pw-prose-step: var(--rp-color-primary);
+  width: var(--pw-prose-width);
+  max-width: 100%;
+  color: var(--rp-color-text);
+  font-size: 14px;
+  line-height: 1.75;
+  overflow-wrap: break-word;
+  /* 引导语：PwProse 的 lead 与 Markdown 的 <p class="pw-prose__lead"> */
+  /* 步骤：Vue 用 PwSteps，Markdown 用 ::: steps，统一这一套外观 */
+}
+.pw-prose > :first-child {
+  margin-top: 0;
+}
+.pw-prose > :last-child {
+  margin-bottom: 0;
+}
+.pw-prose h1 {
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.35;
+}
+.pw-prose h2 {
+  margin: 26px 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.pw-prose h3 {
+  margin: 18px 0 6px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.pw-prose h4 {
+  margin: 14px 0 4px;
+  color: var(--rp-color-text-muted);
+  font-size: 13px;
+  font-weight: 600;
+}
+.pw-prose p {
+  margin: 0 0 10px;
+}
+.pw-prose ul,
+.pw-prose ol {
+  margin: 0 0 12px;
+  padding-left: 20px;
+}
+.pw-prose li {
+  margin: 3px 0;
+}
+.pw-prose li > ul,
+.pw-prose li > ol {
+  margin: 3px 0 0;
+}
+.pw-prose a {
+  color: var(--rp-color-primary);
+  text-decoration: none;
+}
+.pw-prose a:hover {
+  text-decoration: underline;
+}
+.pw-prose strong {
+  font-weight: 600;
+}
+.pw-prose em {
+  font-style: italic;
+}
+.pw-prose code {
+  padding: 1px 5px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 4px;
+  background: var(--rp-color-surface);
+  font-family: var(--rp-font-mono);
+  font-size: 12.5px;
+}
+.pw-prose pre {
+  margin: 0 0 14px;
+  padding: 12px 14px;
+  overflow-x: auto;
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius);
+  background: var(--rp-color-surface);
+  font-family: var(--rp-font-mono);
+  font-size: 13px;
+  line-height: 1.75;
+}
+.pw-prose pre.shiki {
+  border-color: var(--rp-color-border);
+  background-color: var(--shiki-light-bg);
+}
+.pw-prose pre code {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: inherit;
+}
+.pw-prose table {
+  width: 100%;
+  margin: 0 0 14px;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.pw-prose th,
+.pw-prose td {
+  padding: 6px 10px;
   border: 1px solid var(--rp-color-border);
+  text-align: left;
+  vertical-align: top;
+  /* 中文可以断行，但不要把一个短标签压成一列：
+       给单元格一个下限，auto 布局就不会把「标题区」拆成「标题 / 区」 */
+  min-width: 88px;
+  overflow-wrap: anywhere;
+  /* 行内代码整词不断行：defineSceneMeta(meta) 断成 defineSceneMeta(me / ta) 像拼错 */
+}
+.pw-prose th code,
+.pw-prose td code {
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+.pw-prose th {
+  background: var(--rp-color-surface);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.pw-prose blockquote {
+  margin: 0 0 14px;
+  padding: 8px 12px;
   border-left: 3px solid var(--rp-color-primary);
+  border-radius: 0 var(--rp-radius) var(--rp-radius) 0;
+  background: color-mix(in srgb, var(--rp-color-primary) 6%, transparent);
+  color: var(--rp-color-text-muted);
+}
+.pw-prose img {
+  max-width: 100%;
+  height: auto;
   border-radius: var(--rp-radius);
+}
+.pw-prose hr {
+  margin: 22px 0;
+  border: 0;
+  border-top: 1px solid var(--rp-color-border);
+}
+.pw-prose kbd {
+  padding: 1px 5px;
+  border: 1px solid var(--rp-color-border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: var(--rp-color-surface);
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+}
+.pw-prose__head {
+  margin-bottom: 20px;
+}
+.pw-prose__lead {
+  margin: 0;
+  color: var(--rp-color-text-muted);
+  font-size: 13.5px;
+}
+.pw-prose__steps {
+  margin: 0 0 14px;
+  padding: 0;
+  list-style: none;
+  counter-reset: pw-prose-step;
+}
+.pw-prose__steps > li {
+  position: relative;
+  margin: 0 0 12px;
+  padding-left: 32px;
+  counter-increment: pw-prose-step;
+}
+.pw-prose__steps > li::before {
+  content: counter(pw-prose-step);
+  position: absolute;
+  top: 2px;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 21px;
+  height: 21px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--pw-prose-step) 12%, transparent);
+  color: var(--pw-prose-step);
+  font-size: 11.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.pw-prose__steps > li > :last-child {
+  margin-bottom: 0;
+}
+/* ---------------- 代码块：语言角标 + 复制 ---------------- */
+.pw-prose pre.pw-prose__code {
+  position: relative;
+  /* 顶部留一条工具栏的空间，复制按钮不会压住第一行代码 */
+  padding-top: 27px;
+}
+.pw-prose__lang {
+  position: absolute;
+  top: 8px;
+  left: 14px;
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  pointer-events: none;
+}
+.pw-prose__copy {
+  position: absolute;
+  top: 5px;
+  right: 6px;
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 6px;
   background: var(--rp-color-bg);
+  color: var(--rp-color-text-muted);
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+.pw-prose__copy:hover {
+  border-color: var(--rp-color-primary);
   color: var(--rp-color-text);
+}
+.pw-prose__copy:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
+  outline-offset: 1px;
+  opacity: 1;
+}
+.pw-prose__copy.is-done {
+  border-color: color-mix(in srgb, var(--rp-color-success) 45%, transparent);
+  color: var(--rp-color-success);
+}
+.pw-prose pre.pw-prose__code:hover .pw-prose__copy,
+.pw-prose pre.pw-prose__code:focus-within .pw-prose__copy,
+.pw-prose__copy.is-done {
+  opacity: 1;
+}
+/* shiki 双主题取色：与源码卡片（CodeBlock）同一套约定 */
+.pw-prose pre.shiki span {
+  color: var(--shiki-light);
+}
+:root[data-pw-theme='dark'] .pw-prose pre.shiki span {
+  color: var(--shiki-dark);
+}
+:root[data-pw-theme='dark'] .pw-prose pre.shiki {
+  background-color: var(--shiki-dark-bg);
+}
+/* 演示画布里的内容页跟随画布主题，而不是外壳 */
+[data-pw-stage='light'] .pw-prose pre.shiki span {
+  color: var(--shiki-light);
+}
+[data-pw-stage='light'] .pw-prose pre.shiki {
+  background-color: var(--shiki-light-bg);
+}
+[data-pw-stage='dark'] .pw-prose pre.shiki span {
+  color: var(--shiki-dark);
+}
+[data-pw-stage='dark'] .pw-prose pre.shiki {
+  background-color: var(--shiki-dark-bg);
+}
+.pw-callout[data-v-6a2ac811] {
+  --pw-tone: var(--rp-color-primary);
+  display: flex;
+  gap: 10px;
+  margin: 0 0 14px;
+  padding: 10px 12px;
+  border: 1px solid var(--rp-color-border);
+  border-left: 3px solid var(--pw-tone);
+  border-radius: var(--rp-radius);
+  background: color-mix(in srgb, var(--pw-tone) 7%, transparent);
+}
+.pw-callout--tip[data-v-6a2ac811] {
+  --pw-tone: var(--rp-color-success);
+}
+.pw-callout--warn[data-v-6a2ac811] {
+  --pw-tone: var(--rp-color-warning);
+}
+.pw-callout--danger[data-v-6a2ac811] {
+  --pw-tone: var(--rp-color-danger);
+}
+.pw-callout__icon[data-v-6a2ac811] {
+  flex: 0 0 auto;
+  margin-top: 3px;
+  color: var(--pw-tone);
+}
+.pw-callout__main[data-v-6a2ac811] {
+  min-width: 0;
+  flex: 1;
+}
+.pw-callout__title[data-v-6a2ac811] {
+  margin: 0 0 2px;
+  color: var(--pw-tone);
   font-size: 13px;
-  box-shadow: 0 6px 20px color-mix(in srgb, var(--rp-color-text) 14%, transparent);
+  font-weight: 600;
 }
-.pw-toast--success[data-v-4f7c0a94] {
-  border-left-color: var(--rp-color-success);
+.pw-callout__body[data-v-6a2ac811] {
+  font-size: 13px;
+  line-height: 1.7;
 }
-.pw-toast--warning[data-v-4f7c0a94] {
-  border-left-color: var(--rp-color-warning);
+.pw-callout__body[data-v-6a2ac811] > :last-child {
+  margin-bottom: 0;
 }
-.pw-toast--error[data-v-4f7c0a94] {
-  border-left-color: var(--rp-color-danger);
+.pw-callout__body[data-v-6a2ac811] p {
+  margin: 0 0 6px;
 }
-.pw-toast-enter-active[data-v-4f7c0a94],
-.pw-toast-leave-active[data-v-4f7c0a94] {
-  transition: opacity 0.18s ease, transform 0.18s ease;
+.pw-callout__body[data-v-6a2ac811] code {
+  padding: 1px 4px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 8%, transparent);
+  font-family: var(--rp-font-mono);
+  font-size: 12px;
 }
-.pw-toast-enter-from[data-v-4f7c0a94],
-.pw-toast-leave-to[data-v-4f7c0a94] {
-  opacity: 0;
-  transform: translateY(6px);
+.pw-prose__step-title {
+  margin: 0 0 2px;
+  font-size: 13.5px;
+  font-weight: 600;
+}
+.pw-prose__step-desc {
+  margin: 0;
+  color: var(--rp-color-text-muted);
+  font-size: 13px;
+}
+/**
+ * 文档排版（prose）。
+ *
+ * 这套类名是「公共契约」：`PwProse` 用它渲染手写的 Vue 内容页，
+ * `PwMarkdown` 把 Markdown 转成同样的结构再用同一套样式——
+ * 两条路出来的标题、列表、表格、代码块必须长得一样，所以样式不能 scoped。
+ *
+ * 所有色值只取主题变量，不写死任何颜色。
+ */
+.pw-prose {
+  --pw-prose-width: 720px;
+  --pw-prose-step: var(--rp-color-primary);
+  width: var(--pw-prose-width);
+  max-width: 100%;
+  color: var(--rp-color-text);
+  font-size: 14px;
+  line-height: 1.75;
+  overflow-wrap: break-word;
+  /* 引导语：PwProse 的 lead 与 Markdown 的 <p class="pw-prose__lead"> */
+  /* 步骤：Vue 用 PwSteps，Markdown 用 ::: steps，统一这一套外观 */
+}
+.pw-prose > :first-child {
+  margin-top: 0;
+}
+.pw-prose > :last-child {
+  margin-bottom: 0;
+}
+.pw-prose h1 {
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.35;
+}
+.pw-prose h2 {
+  margin: 26px 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.pw-prose h3 {
+  margin: 18px 0 6px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.pw-prose h4 {
+  margin: 14px 0 4px;
+  color: var(--rp-color-text-muted);
+  font-size: 13px;
+  font-weight: 600;
+}
+.pw-prose p {
+  margin: 0 0 10px;
+}
+.pw-prose ul,
+.pw-prose ol {
+  margin: 0 0 12px;
+  padding-left: 20px;
+}
+.pw-prose li {
+  margin: 3px 0;
+}
+.pw-prose li > ul,
+.pw-prose li > ol {
+  margin: 3px 0 0;
+}
+.pw-prose a {
+  color: var(--rp-color-primary);
+  text-decoration: none;
+}
+.pw-prose a:hover {
+  text-decoration: underline;
+}
+.pw-prose strong {
+  font-weight: 600;
+}
+.pw-prose em {
+  font-style: italic;
+}
+.pw-prose code {
+  padding: 1px 5px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 4px;
+  background: var(--rp-color-surface);
+  font-family: var(--rp-font-mono);
+  font-size: 12.5px;
+}
+.pw-prose pre {
+  margin: 0 0 14px;
+  padding: 12px 14px;
+  overflow-x: auto;
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius);
+  background: var(--rp-color-surface);
+  font-family: var(--rp-font-mono);
+  font-size: 13px;
+  line-height: 1.75;
+}
+.pw-prose pre.shiki {
+  border-color: var(--rp-color-border);
+  background-color: var(--shiki-light-bg);
+}
+.pw-prose pre code {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: inherit;
+}
+.pw-prose table {
+  width: 100%;
+  margin: 0 0 14px;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.pw-prose th,
+.pw-prose td {
+  padding: 6px 10px;
+  border: 1px solid var(--rp-color-border);
+  text-align: left;
+  vertical-align: top;
+  /* 中文可以断行，但不要把一个短标签压成一列：
+       给单元格一个下限，auto 布局就不会把「标题区」拆成「标题 / 区」 */
+  min-width: 88px;
+  overflow-wrap: anywhere;
+  /* 行内代码整词不断行：defineSceneMeta(meta) 断成 defineSceneMeta(me / ta) 像拼错 */
+}
+.pw-prose th code,
+.pw-prose td code {
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+.pw-prose th {
+  background: var(--rp-color-surface);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.pw-prose blockquote {
+  margin: 0 0 14px;
+  padding: 8px 12px;
+  border-left: 3px solid var(--rp-color-primary);
+  border-radius: 0 var(--rp-radius) var(--rp-radius) 0;
+  background: color-mix(in srgb, var(--rp-color-primary) 6%, transparent);
+  color: var(--rp-color-text-muted);
+}
+.pw-prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--rp-radius);
+}
+.pw-prose hr {
+  margin: 22px 0;
+  border: 0;
+  border-top: 1px solid var(--rp-color-border);
+}
+.pw-prose kbd {
+  padding: 1px 5px;
+  border: 1px solid var(--rp-color-border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: var(--rp-color-surface);
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+}
+.pw-prose__head {
+  margin-bottom: 20px;
+}
+.pw-prose__lead {
+  margin: 0;
+  color: var(--rp-color-text-muted);
+  font-size: 13.5px;
+}
+.pw-prose__steps {
+  margin: 0 0 14px;
+  padding: 0;
+  list-style: none;
+  counter-reset: pw-prose-step;
+}
+.pw-prose__steps > li {
+  position: relative;
+  margin: 0 0 12px;
+  padding-left: 32px;
+  counter-increment: pw-prose-step;
+}
+.pw-prose__steps > li::before {
+  content: counter(pw-prose-step);
+  position: absolute;
+  top: 2px;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 21px;
+  height: 21px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--pw-prose-step) 12%, transparent);
+  color: var(--pw-prose-step);
+  font-size: 11.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.pw-prose__steps > li > :last-child {
+  margin-bottom: 0;
+}
+/* ---------------- 代码块：语言角标 + 复制 ---------------- */
+.pw-prose pre.pw-prose__code {
+  position: relative;
+  /* 顶部留一条工具栏的空间，复制按钮不会压住第一行代码 */
+  padding-top: 27px;
+}
+.pw-prose__lang {
+  position: absolute;
+  top: 8px;
+  left: 14px;
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  pointer-events: none;
+}
+.pw-prose__copy {
+  position: absolute;
+  top: 5px;
+  right: 6px;
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 6px;
+  background: var(--rp-color-bg);
+  color: var(--rp-color-text-muted);
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+.pw-prose__copy:hover {
+  border-color: var(--rp-color-primary);
+  color: var(--rp-color-text);
+}
+.pw-prose__copy:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
+  outline-offset: 1px;
+  opacity: 1;
+}
+.pw-prose__copy.is-done {
+  border-color: color-mix(in srgb, var(--rp-color-success) 45%, transparent);
+  color: var(--rp-color-success);
+}
+.pw-prose pre.pw-prose__code:hover .pw-prose__copy,
+.pw-prose pre.pw-prose__code:focus-within .pw-prose__copy,
+.pw-prose__copy.is-done {
+  opacity: 1;
+}
+/* shiki 双主题取色：与源码卡片（CodeBlock）同一套约定 */
+.pw-prose pre.shiki span {
+  color: var(--shiki-light);
+}
+:root[data-pw-theme='dark'] .pw-prose pre.shiki span {
+  color: var(--shiki-dark);
+}
+:root[data-pw-theme='dark'] .pw-prose pre.shiki {
+  background-color: var(--shiki-dark-bg);
+}
+/* 演示画布里的内容页跟随画布主题，而不是外壳 */
+[data-pw-stage='light'] .pw-prose pre.shiki span {
+  color: var(--shiki-light);
+}
+[data-pw-stage='light'] .pw-prose pre.shiki {
+  background-color: var(--shiki-light-bg);
+}
+[data-pw-stage='dark'] .pw-prose pre.shiki span {
+  color: var(--shiki-dark);
+}
+[data-pw-stage='dark'] .pw-prose pre.shiki {
+  background-color: var(--shiki-dark-bg);
+}
+.pw-prose__block > :first-child {
+  margin-top: 0;
+}
+.pw-prose__block > :last-child {
+  margin-bottom: 0;
+}
+.pw-prose__error {
+  margin: 0;
+  color: var(--rp-color-danger);
+  font-size: 13px;
+}
+.pw-toast-host[data-v-4f7c0a94] {
+  position: fixed;
+  left: 50%;
+  bottom: 32px;
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+.pw-toast[data-v-4f7c0a94] {
+  padding: 8px 14px;
+  border: 1px solid var(--rp-color-border);
+  border-left: 3px solid var(--rp-color-primary);
+  border-radius: var(--rp-radius);
+  background: var(--rp-color-bg);
+  color: var(--rp-color-text);
+  font-size: 13px;
+  box-shadow: 0 6px 20px color-mix(in srgb, var(--rp-color-text) 14%, transparent);
+}
+.pw-toast--success[data-v-4f7c0a94] {
+  border-left-color: var(--rp-color-success);
+}
+.pw-toast--warning[data-v-4f7c0a94] {
+  border-left-color: var(--rp-color-warning);
+}
+.pw-toast--error[data-v-4f7c0a94] {
+  border-left-color: var(--rp-color-danger);
+}
+.pw-toast-enter-active[data-v-4f7c0a94],
+.pw-toast-leave-active[data-v-4f7c0a94] {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.pw-toast-enter-from[data-v-4f7c0a94],
+.pw-toast-leave-to[data-v-4f7c0a94] {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.pw-tip[data-v-2657675f] {
+  position: fixed;
+  z-index: 80;
+  max-width: 280px;
+  padding: 4px 8px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 6px;
+  background: var(--rp-color-surface);
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--rp-color-text) 16%, transparent);
+  color: var(--rp-color-text);
+  font-size: 11.5px;
+  line-height: 1.5;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.pw-api {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  /* 页签行固定：flex 布局里 flex: 0 0 auto，滚动交给下面的 __body */
+  /* 内容区：自己滚，滚动条在这个区域右侧 */
+  /* Props 多一列默认值，类型列让出宽度 */
+  /* 默认值列不设宽度：按内容自适应（对象原文单行），说明列吃掉剩余空间 */
+  /* 空值统一用虚线胶囊，和演示胶囊区分开 */
+  /* 演示列内容包一层：td 上用 flex 会破坏表格盒模型，边框会断 */
+}
+.pw-api__head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 20px 24px 10px;
+  border-bottom: 1px solid var(--rp-color-border);
+}
+.pw-api__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px 24px 32px;
+}
+.pw-api__body::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.pw-api__body::-webkit-scrollbar-track,
+.pw-api__body::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pw-api__body::-webkit-scrollbar-button {
+  display: none;
+}
+.pw-api__body::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 16%, transparent);
+}
+.pw-api__body:hover::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 34%, transparent);
+}
+.pw-api__body:hover::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 56%, transparent);
+}
+.pw-api__title {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.pw-api__name {
+  font-size: 15px;
+  font-weight: 600;
+}
+.pw-api__meta {
+  color: var(--rp-color-text-muted);
+  font-size: 12px;
+}
+.pw-api__warn {
+  color: var(--rp-color-warning);
+}
+.pw-api__tabs {
+  display: flex;
+  gap: 4px;
+  margin-left: auto;
+}
+.pw-api__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.pw-api__tab:hover {
+  color: var(--rp-color-text);
+}
+.pw-api__tab.is-active {
+  border-color: var(--rp-color-primary);
+  background: color-mix(in srgb, var(--rp-color-primary) 10%, transparent);
+  color: var(--rp-color-primary);
+}
+.pw-api__count {
+  color: inherit;
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
+}
+.pw-api__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+}
+.pw-api th {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--rp-color-border);
+  color: var(--rp-color-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-align: left;
+  text-transform: uppercase;
+  /* 列宽按内容自适应时，表头不要折成「默认 / 值」 */
+  white-space: nowrap;
+}
+.pw-api td {
+  padding: 8px 10px;
+  border-bottom: 1px solid color-mix(in srgb, var(--rp-color-border) 60%, transparent);
+  vertical-align: top;
+}
+.pw-api tr.is-focus td {
+  background: color-mix(in srgb, var(--rp-color-primary) 8%, transparent);
+}
+.pw-api tr.is-missing .pw-api__desc {
+  color: var(--rp-color-text-muted);
+}
+.pw-api__col-name {
+  width: 13%;
+}
+.pw-api__col-type {
+  width: 32%;
+}
+.pw-api__table.is-props .pw-api__col-type {
+  width: 24%;
+}
+.pw-api__col-default {
+  width: 1%;
+}
+.pw-api__col-demo {
+  width: 14%;
+}
+.pw-api__name-cell code {
+  font-family: var(--rp-font-mono);
+  font-size: 12px;
+}
+.pw-api__name-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+.pw-api__types {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pw-api__type-card {
+  border: 1px solid var(--rp-color-border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.pw-api__type-card.is-focus {
+  border-color: var(--rp-color-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rp-color-primary) 12%, transparent);
+}
+.pw-api__type-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--rp-color-border);
+  background: color-mix(in srgb, var(--rp-color-surface) 60%, transparent);
+}
+.pw-api__type-name {
+  font-family: var(--rp-font-mono);
+  font-size: 12px;
+  font-weight: 600;
+}
+.pw-api__type-kind {
+  padding: 0 6px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--rp-color-primary) 10%, transparent);
+  color: var(--rp-color-primary);
+  font-size: 10px;
+}
+.pw-api__type-file {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 10.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pw-api__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  padding: 2px 8px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.pw-api__copy:hover {
+  border-color: var(--rp-color-primary);
+  color: var(--rp-color-primary);
+}
+.pw-api__required {
+  margin-left: 6px;
+  padding: 0 5px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--rp-color-danger) 12%, transparent);
+  color: var(--rp-color-danger);
+  font-size: 10px;
+}
+.pw-api__type {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--rp-color-text);
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+  text-align: left;
+  cursor: copy;
+  word-break: break-word;
+}
+.pw-api__type:hover {
+  color: var(--rp-color-primary);
+}
+.pw-api__type.is-link {
+  color: var(--rp-color-primary);
+  cursor: pointer;
+  text-decoration: underline dotted;
+  text-underline-offset: 3px;
+}
+.pw-api__signature {
+  margin-top: 3px;
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 10.5px;
+  word-break: break-all;
+}
+.pw-api__default {
+  max-width: 420px;
+  overflow: hidden;
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pw-api__desc {
+  color: var(--rp-color-text);
+}
+.pw-api__empty {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 7px;
+  border: 1px dashed var(--rp-color-border);
+  border-radius: 999px;
+  color: var(--rp-color-text-muted);
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+.pw-api__demo {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.pw-api__demo-link {
+  padding: 1px 7px;
+  white-space: nowrap;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.pw-api__demo-link:hover {
+  border-color: var(--rp-color-primary);
+  color: var(--rp-color-primary);
+}
+/* ---------- 非组件模块（函数 / 常量）专用的两处补充，其余沿用上面的 .pw-api 规则 ---------- */
+.pw-api__rel {
+  margin-left: 8px;
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 11px;
+}
+.pw-api__param + .pw-api__param {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px dashed color-mix(in srgb, var(--rp-color-border) 70%, transparent);
+}
+.pw-api__param code {
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+}
+.pw-api__param-type {
+  margin-left: 4px;
+  color: var(--rp-color-primary);
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+}
+.pw-api__param-default {
+  margin-left: 6px;
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 11px;
+}
+.pw-api__param-desc {
+  margin-top: 2px;
+  color: var(--rp-color-text-muted);
+  font-size: 11.5px;
+  line-height: 1.55;
+}
+/* 函数表：名称列窄一点，把宽度让给参数 */
+.pw-api__table.is-functions .pw-api__col-name {
+  width: 26%;
+}
+.pw-api__table.is-functions .pw-api__signature {
+  margin-top: 4px;
+}
+/* 函数表的列宽：名称 / 参数 / 返回 / 说明 / 场景，说明列不能再被压成四行 */
+.pw-api__table.is-functions .pw-api__col-name {
+  width: 24%;
+}
+.pw-api__table.is-functions > thead > tr > th:nth-child(2) {
+  width: 30%;
+}
+.pw-api__table.is-functions .pw-api__col-type {
+  width: 15%;
+}
+.pw-api__table.is-functions > thead > tr > th:nth-child(4) {
+  width: 22%;
+}
+.pw-api__table.is-functions .pw-api__col-demo {
+  width: 9%;
+}
+/* 签名按空格断行，不把类型名拆成两半（FormatMoneyOptions 不能被拆成 Fo/rmat…） */
+.pw-api__signature {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+/* rinova-playground 外壳主题：只有这 12 个变量，dark 是同一组变量的另一套取值。 */
+:root {
+  --rp-color-bg: #ffffff;
+  --rp-color-surface: #f6f7f9;
+  --rp-color-border: #e4e7ec;
+  --rp-color-text: #1c2024;
+  --rp-color-text-muted: #667085;
+  --rp-color-primary: #2f6feb;
+  --rp-color-primary-contrast: #ffffff;
+  --rp-color-success: #1a7f37;
+  --rp-color-warning: #b7791f;
+  --rp-color-danger: #d1242f;
+  --rp-radius: 8px;
+  --rp-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  color-scheme: light;
+}
+:root[data-pw-theme='dark'] {
+  --rp-color-bg: #16181d;
+  --rp-color-surface: #1c1f26;
+  --rp-color-border: #2b3038;
+  --rp-color-text: #e6e8ec;
+  --rp-color-text-muted: #98a2b3;
+  --rp-color-primary: #5b8def;
+  --rp-color-primary-contrast: #0b1220;
+  --rp-color-success: #3fb950;
+  --rp-color-warning: #d29922;
+  --rp-color-danger: #f85149;
+  color-scheme: dark;
+}
+/**
+ * 演示画布（scene 预览区）自带一套 token，与外壳主题解耦。
+ * 默认浅色：很多组件库只做了浅色，放在暗色外壳里会变成「黑底黑字」。
+ * 由 config.theme.stage 决定取值（'auto' 时跟随外壳），挂到 [data-pw-stage] 上。
+ */
+[data-pw-stage='light'] {
+  --rp-color-bg: #ffffff;
+  --rp-color-surface: #f6f7f9;
+  --rp-color-border: #e4e7ec;
+  --rp-color-text: #1c2024;
+  --rp-color-text-muted: #667085;
+  --rp-color-primary: #2f6feb;
+  --rp-color-primary-contrast: #ffffff;
+  --rp-color-success: #1a7f37;
+  --rp-color-warning: #b7791f;
+  --rp-color-danger: #d1242f;
+  color-scheme: light;
+}
+[data-pw-stage='dark'] {
+  --rp-color-bg: #16181d;
+  --rp-color-surface: #1c1f26;
+  --rp-color-border: #2b3038;
+  --rp-color-text: #e6e8ec;
+  --rp-color-text-muted: #98a2b3;
+  --rp-color-primary: #5b8def;
+  --rp-color-primary-contrast: #0b1220;
+  --rp-color-success: #3fb950;
+  --rp-color-warning: #d29922;
+  --rp-color-danger: #f85149;
+  color-scheme: dark;
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background: var(--rp-color-bg);
+  color: var(--rp-color-text);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+#app {
+  height: 100%;
+}
+.pw-app *,
+.pw-app *::before,
+.pw-app *::after {
+  box-sizing: border-box;
+}
+/* 浅色/深色切换用 View Transitions 的圆形揭开：默认的交叉淡入会和剪辑动画打架，关掉 */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+.pw-input[data-v-d56e665e] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 0 8px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: calc(var(--rp-radius) - 2px);
+  background: var(--rp-color-bg);
+  color: var(--rp-color-text);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.pw-input--sm[data-v-d56e665e] {
+  height: 26px;
+}
+.pw-input--md[data-v-d56e665e] {
+  height: 32px;
+}
+.pw-input[data-v-d56e665e]:focus-within {
+  border-color: var(--rp-color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-color-primary) 16%, transparent);
+}
+.pw-input__field[data-v-d56e665e] {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+.pw-input__field[data-v-d56e665e]::placeholder {
+  color: var(--rp-color-text-muted);
+}
+.pw-input__clear[data-v-d56e665e] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 20%, transparent);
+  color: var(--rp-color-text-muted);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.pw-input__clear[data-v-d56e665e]:hover {
+  color: var(--rp-color-text);
+}
+.pw-code[data-v-14e60795] {
+  height: 100%;
+  overflow: auto;
+  font-family: var(--rp-font-mono);
+  font-size: 12.5px;
+  line-height: 1.65;
+}
+.pw-code[data-v-14e60795]::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.pw-code[data-v-14e60795]::-webkit-scrollbar-track,
+.pw-code[data-v-14e60795]::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pw-code[data-v-14e60795]::-webkit-scrollbar-button {
+  display: none;
+}
+.pw-code[data-v-14e60795]::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 16%, transparent);
+}
+.pw-code[data-v-14e60795]:hover::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 34%, transparent);
+}
+.pw-code[data-v-14e60795]:hover::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 56%, transparent);
+}
+.pw-code__hint[data-v-14e60795],
+.pw-code__error[data-v-14e60795] {
+  margin: 0;
+  padding: 16px;
+  color: var(--rp-color-text-muted);
+  white-space: pre-wrap;
+}
+.pw-code__error[data-v-14e60795] {
+  color: var(--rp-color-danger);
+}
+.pw-code__body[data-v-14e60795] pre {
+  margin: 0;
+  padding: 12px 16px 20px;
+  background: transparent !important;
+  tab-size: 2;
+}
+.pw-code__body[data-v-14e60795] code {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+.pw-code__body[data-v-14e60795] span {
+  color: var(--shiki-light);
+}
+:root[data-pw-theme='dark'] .pw-code__body[data-v-14e60795] span {
+  color: var(--shiki-dark);
+}
+/* 搜索命中：普通命中淡底，当前命中实底 */
+.pw-code__body[data-v-14e60795] .pw-code__hit {
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--rp-color-warning) 32%, transparent);
+  color: inherit;
+}
+.pw-code__body[data-v-14e60795] .pw-code__hit.is-active {
+  background: var(--rp-color-warning);
+  color: var(--rp-color-bg);
+}
+.pw-picker[data-v-d6404e2a] {
+  position: relative;
+}
+.pw-picker__btn[data-v-d6404e2a] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  cursor: pointer;
+}
+.pw-picker__btn[data-v-d6404e2a]:hover {
+  border-color: var(--rp-color-primary);
+  color: var(--rp-color-primary);
+}
+.pw-picker__btn.is-active[data-v-d6404e2a] {
+  border-color: var(--rp-color-primary);
+  background: color-mix(in srgb, var(--rp-color-primary) 10%, transparent);
+  color: var(--rp-color-primary);
+}
+.pw-picker__btn[data-v-d6404e2a]:disabled {
+  cursor: default;
+  opacity: 0.75;
+}
+.pw-picker__menu[data-v-d6404e2a] {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  width: 236px;
+  padding: 6px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 8px;
+  background: var(--rp-color-surface);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--rp-color-text) 14%, transparent);
+}
+.pw-picker__menu-label[data-v-d6404e2a] {
+  padding: 2px 6px 6px;
+  color: var(--rp-color-text-muted);
+  font-size: 10.5px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.pw-picker__item[data-v-d6404e2a] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 5px 6px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--rp-color-text);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.pw-picker__item[data-v-d6404e2a]:hover {
+  background: color-mix(in srgb, var(--rp-color-primary) 10%, transparent);
+  color: var(--rp-color-primary);
+}
+.pw-picker__sep[data-v-d6404e2a] {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--rp-color-border);
+}
+.pw-picker__input[data-v-d6404e2a] {
+  width: 100%;
+  padding: 5px 7px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 6px;
+  background: var(--rp-color-bg);
+  color: var(--rp-color-text);
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+  outline: none;
+}
+.pw-picker__input[data-v-d6404e2a]:focus {
+  border-color: var(--rp-color-primary);
+}
+.pw-picker__hint[data-v-d6404e2a] {
+  margin: 6px 2px 8px;
+  color: var(--rp-color-text-muted);
+  font-size: 10.5px;
+  line-height: 1.5;
+}
+.pw-picker__hint code[data-v-d6404e2a] {
+  font-family: var(--rp-font-mono);
+  font-size: 10.5px;
+}
+.pw-picker__hint.is-invalid[data-v-d6404e2a] {
+  color: var(--rp-color-danger);
+}
+.pw-picker__actions[data-v-d6404e2a] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+.pw-picker__action[data-v-d6404e2a] {
+  padding: 3px 10px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+}
+.pw-picker__action--primary[data-v-d6404e2a] {
+  border-color: var(--rp-color-primary);
+  background: var(--rp-color-primary);
+  color: var(--rp-color-primary-contrast);
+}
+.pw-picker__action--primary[data-v-d6404e2a]:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.is-hidden[data-v-d6404e2a] {
+  visibility: hidden;
+}
+.pw-index[data-v-b676ec15] {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  padding: 18px 14px 24px 18px;
+}
+.pw-index[data-v-b676ec15]::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.pw-index[data-v-b676ec15]::-webkit-scrollbar-track,
+.pw-index[data-v-b676ec15]::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pw-index[data-v-b676ec15]::-webkit-scrollbar-button {
+  display: none;
+}
+.pw-index[data-v-b676ec15]::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 16%, transparent);
+}
+.pw-index[data-v-b676ec15]:hover::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 34%, transparent);
+}
+.pw-index[data-v-b676ec15]:hover::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 56%, transparent);
+}
+.pw-index__inner[data-v-b676ec15] {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding-right: 2px;
+}
+.pw-index__label[data-v-b676ec15] {
+  margin: 0 0 6px;
+  /* 和链接文字同一条 9px 内缩 */
+  padding-left: 9px;
+  color: var(--rp-color-text-muted);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.pw-index__link[data-v-b676ec15] {
+  display: block;
+  padding: 5px 9px;
+  border-radius: 6px;
+  color: var(--rp-color-text-muted);
+  font-size: 12.5px;
+  line-height: 1.5;
+  text-decoration: none;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+.pw-index__link + .pw-index__link[data-v-b676ec15] {
+  margin-top: 1px;
+}
+.pw-index__link[data-v-b676ec15]:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 10%, transparent);
+  color: var(--rp-color-text);
+}
+.pw-index__link[data-v-b676ec15]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
+  outline-offset: -2px;
+}
+.pw-index__link.is-active[data-v-b676ec15] {
+  background: color-mix(in srgb, var(--rp-color-primary) 12%, transparent);
+  color: var(--rp-color-primary);
+  font-weight: 500;
+}
+.pw-boundary[data-v-2b6db55b] {
+  display: contents;
+}
+.pw-boundary--error[data-v-2b6db55b] {
+  display: block;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--rp-color-danger) 45%, transparent);
+  border-radius: var(--rp-radius);
+  background: color-mix(in srgb, var(--rp-color-danger) 8%, transparent);
+}
+.pw-boundary__head[data-v-2b6db55b] {
+  margin: 0 0 6px;
+  color: var(--rp-color-danger);
+  font-size: 13px;
+  font-weight: 600;
+}
+.pw-boundary__message[data-v-2b6db55b] {
+  margin: 0 0 6px;
+  font-family: var(--rp-font-mono);
+  font-size: 12px;
+  word-break: break-word;
+}
+.pw-boundary__file[data-v-2b6db55b] {
+  margin: 0 0 8px;
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+}
+.pw-boundary__stack[data-v-2b6db55b] {
+  font-size: 11.5px;
+}
+.pw-boundary__stack summary[data-v-2b6db55b] {
+  cursor: pointer;
+  color: var(--rp-color-text-muted);
+}
+.pw-boundary__stack pre[data-v-2b6db55b] {
+  max-height: 180px;
+  margin: 6px 0 0;
+  overflow: auto;
+  font-family: var(--rp-font-mono);
+  font-size: 11px;
+  white-space: pre-wrap;
+}
+.pw-plugin-slot[data-v-e9b00509] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+.pw-plugin-slot--header[data-v-e9b00509] {
+  max-width: 220px;
+  height: 28px;
+  overflow: hidden;
+}
+.pw-plugin-slot--sidebarFooter[data-v-e9b00509] {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  max-height: 64px;
+  overflow: hidden;
+  /* 缝位里的错误卡片压成一行，堆栈留在控制台，不把页脚撑爆 */
+}
+.pw-plugin-slot--sidebarFooter[data-v-e9b00509] .pw-boundary--error {
+  padding: 6px 8px;
+}
+.pw-plugin-slot--sidebarFooter[data-v-e9b00509] .pw-boundary__file,
+.pw-plugin-slot--sidebarFooter[data-v-e9b00509] .pw-boundary__stack {
+  display: none;
+}
+.pw-switch[data-v-64fffbcb] {
+  position: relative;
+  width: 34px;
+  height: 20px;
+  flex: 0 0 auto;
+  padding: 0;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 999px;
+  background: var(--rp-color-surface);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+.pw-switch[data-v-64fffbcb]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 55%, transparent);
+  outline-offset: 2px;
+}
+.pw-switch[data-v-64fffbcb]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.pw-switch.is-on[data-v-64fffbcb] {
+  border-color: var(--rp-color-primary);
+  background: var(--rp-color-primary);
+}
+.pw-switch__thumb[data-v-64fffbcb] {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--rp-color-bg);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--rp-color-text) 25%, transparent);
+  transition: transform 0.16s ease;
+}
+.pw-switch.is-on .pw-switch__thumb[data-v-64fffbcb] {
+  transform: translateX(14px);
+}
+.pw-args[data-v-d7e75f4f] {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px dashed var(--rp-color-border);
+  border-radius: var(--rp-radius);
+  background: var(--rp-color-surface);
+}
+.pw-args__head[data-v-d7e75f4f] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.pw-args__title[data-v-d7e75f4f] {
+  color: var(--rp-color-text-muted);
+  font-size: 11.5px;
+  font-weight: 600;
+}
+.pw-args__reset[data-v-d7e75f4f] {
+  margin-left: auto;
+}
+.pw-args__slot + .pw-args__slot[data-v-d7e75f4f] {
+  padding-top: 10px;
+  border-top: 1px dashed var(--rp-color-border);
+}
+.pw-args__slot-head[data-v-d7e75f4f] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.pw-args__slot-name[data-v-d7e75f4f] {
+  color: var(--rp-color-text-muted);
+  font-size: 11.5px;
+  font-weight: 600;
+}
+.pw-args__reset[data-v-d7e75f4f] {
+  display: inline-flex;
+  padding: 2px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  cursor: pointer;
+}
+.pw-args__reset[data-v-d7e75f4f]:hover {
+  color: var(--rp-color-primary);
+}
+.pw-args__grid[data-v-d7e75f4f] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px 20px;
+}
+@media (max-width: 720px) {
+.pw-args__grid[data-v-d7e75f4f] {
+    grid-template-columns: minmax(0, 1fr);
+}
+}
+.pw-args__field[data-v-d7e75f4f] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.pw-args__label[data-v-d7e75f4f] {
+  overflow: hidden;
+  color: var(--rp-color-text-muted);
+  font-size: 11.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pw-args__select[data-v-d7e75f4f] {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 6px;
+  background: var(--rp-color-bg);
+  color: var(--rp-color-text);
+  font-family: inherit;
+  font-size: 12px;
+}
+.pw-source[data-v-9eb680ec] {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius);
+  overflow: hidden;
+}
+.pw-source__head[data-v-9eb680ec] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 0 8px 0 4px;
+}
+.pw-source__toggle[data-v-9eb680ec] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 6px 4px;
+  border: 0;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.pw-source__toggle[data-v-9eb680ec]:hover {
+  color: var(--rp-color-text);
+}
+.pw-source__chevron[data-v-9eb680ec] {
+  flex: 0 0 auto;
+  transition: transform 0.15s ease;
+}
+.pw-source.is-open .pw-source__chevron[data-v-9eb680ec] {
+  transform: rotate(90deg);
+}
+.pw-source__icon[data-v-9eb680ec] {
+  flex: 0 0 auto;
+}
+.pw-source__label[data-v-9eb680ec] {
+  flex: 0 0 auto;
+}
+.pw-source__file[data-v-9eb680ec] {
+  overflow: hidden;
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pw-source__actions[data-v-9eb680ec] {
+  display: flex;
+  gap: 2px;
+}
+.pw-source__action[data-v-9eb680ec] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  cursor: pointer;
+}
+.pw-source__action[data-v-9eb680ec]:hover,
+.pw-source__action.is-on[data-v-9eb680ec] {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 12%, transparent);
+  color: var(--rp-color-primary);
+}
+.pw-source__body[data-v-9eb680ec] {
+  border-top: 1px solid var(--rp-color-border);
+}
+.pw-source__find[data-v-9eb680ec] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--rp-color-border) 60%, transparent);
+  background: color-mix(in srgb, var(--rp-color-surface) 60%, transparent);
+}
+.pw-source__find-icon[data-v-9eb680ec] {
+  flex: 0 0 auto;
+  color: var(--rp-color-text-muted);
+}
+.pw-source__find-input[data-v-9eb680ec] {
+  flex: 1;
+  min-width: 0;
+  padding: 2px 4px;
+  border: 0;
+  background: transparent;
+  color: var(--rp-color-text);
+  font-family: var(--rp-font-mono);
+  font-size: 12px;
+  outline: none;
+}
+.pw-source__find-input[data-v-9eb680ec]::placeholder {
+  color: var(--rp-color-text-muted);
+}
+.pw-source__find-count[data-v-9eb680ec] {
+  flex: 0 0 auto;
+  min-width: 44px;
+  color: var(--rp-color-text-muted);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.pw-source__find-btn[data-v-9eb680ec] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  cursor: pointer;
+}
+.pw-source__find-btn[data-v-9eb680ec]:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 12%, transparent);
+  color: var(--rp-color-text);
+}
+.pw-source__find-btn.is-on[data-v-9eb680ec] {
+  color: var(--rp-color-primary);
+}
+.pw-source__find-btn[data-v-9eb680ec]:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.pw-source__tabs[data-v-9eb680ec] {
+  display: flex;
+  gap: 2px;
+  padding: 6px 8px 0;
+  overflow-x: auto;
+}
+.pw-source__tab[data-v-9eb680ec] {
+  padding: 3px 10px;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-radius: 6px 6px 0 0;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.pw-source__tab.is-active[data-v-9eb680ec] {
+  border-color: var(--rp-color-border);
+  background: var(--rp-color-bg);
+  color: var(--rp-color-text);
+}
+.pw-source__code[data-v-9eb680ec] {
+  max-height: 420px;
+  overflow: auto;
+  counter-reset: pw-line;
+}
+.pw-source__code[data-v-9eb680ec]::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.pw-source__code[data-v-9eb680ec]::-webkit-scrollbar-track,
+.pw-source__code[data-v-9eb680ec]::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pw-source__code[data-v-9eb680ec]::-webkit-scrollbar-button {
+  display: none;
+}
+.pw-source__code[data-v-9eb680ec]::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 16%, transparent);
+}
+.pw-source__code[data-v-9eb680ec]:hover::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 34%, transparent);
+}
+.pw-source__code[data-v-9eb680ec]:hover::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 56%, transparent);
+}
+.pw-source__code[data-v-9eb680ec] .line {
+  display: inline-block;
+  width: 100%;
+}
+.pw-source__code[data-v-9eb680ec] .line::before {
+  counter-increment: pw-line;
+  content: counter(pw-line);
+  display: inline-block;
+  width: 2.2em;
+  margin-right: 0.9em;
+  padding-right: 0.6em;
+  color: var(--rp-color-text-muted);
+  opacity: 0.55;
+  text-align: right;
+  user-select: none;
+}
+.pw-source__hint[data-v-9eb680ec] {
+  margin: 0;
+  padding: 12px;
+  color: var(--rp-color-text-muted);
+  font-size: 12px;
+}
+.pw-output[data-v-31716e5f] {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius);
+  overflow: hidden;
+}
+.pw-output__head[data-v-31716e5f] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--rp-color-border);
+  background: var(--rp-color-surface);
+}
+.pw-output__title[data-v-31716e5f] {
+  color: var(--rp-color-text-muted);
+  font-size: 11.5px;
+  font-weight: 600;
+}
+.pw-output__slot[data-v-31716e5f] {
+  color: var(--rp-color-text-muted);
+  font-family: var(--rp-font-mono);
+  font-size: 11px;
+}
+.pw-output__tabs[data-v-31716e5f] {
+  display: flex;
+  gap: 4px;
+}
+.pw-output__tab[data-v-31716e5f] {
+  padding: 1px 8px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  font-size: 11px;
+  cursor: pointer;
+}
+.pw-output__tab.is-active[data-v-31716e5f] {
+  border-color: var(--rp-color-primary);
+  color: var(--rp-color-primary);
+}
+.pw-output__body[data-v-31716e5f] {
+  max-height: 260px;
+  overflow: auto;
+}
+.pw-output__body[data-v-31716e5f]::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.pw-output__body[data-v-31716e5f]::-webkit-scrollbar-track,
+.pw-output__body[data-v-31716e5f]::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pw-output__body[data-v-31716e5f]::-webkit-scrollbar-button {
+  display: none;
+}
+.pw-output__body[data-v-31716e5f]::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 16%, transparent);
+}
+.pw-output__body[data-v-31716e5f]:hover::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 34%, transparent);
+}
+.pw-output__body[data-v-31716e5f]:hover::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 56%, transparent);
+}
+.pw-scene[data-v-d0fca3aa] {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-bottom: 28px;
+  border-bottom: 1px solid var(--rp-color-border);
+  scroll-margin-top: 16px;
+  /* 文档场景没有 h1，场景标题就是这一段的标题，比正文 h2 高一级 */
+  /* 贴着标题，不再顶到行最右；默认隐藏，鼠标进到场景或键盘聚焦时再出现 */
+  /* 画布自带 token（见 theme.less 的 [data-pw-stage]），与外壳主题解耦。
+     宽度贴合 demo 内容（max-width: 100%），避免组件只有 500px 时拉出一大片空白白卡 */
 }
-/* rinova-playground 外壳主题：只有这 12 个变量，dark 是同一组变量的另一套取值。 */
-:root {
-  --rp-color-bg: #ffffff;
-  --rp-color-surface: #f6f7f9;
-  --rp-color-border: #e4e7ec;
-  --rp-color-text: #1c2024;
-  --rp-color-text-muted: #667085;
-  --rp-color-primary: #2f6feb;
-  --rp-color-primary-contrast: #ffffff;
-  --rp-color-success: #1a7f37;
-  --rp-color-warning: #b7791f;
-  --rp-color-danger: #d1242f;
-  --rp-radius: 8px;
-  --rp-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  color-scheme: light;
+.pw-scene[data-v-d0fca3aa]:last-child {
+  border-bottom: 0;
 }
-:root[data-pw-theme='dark'] {
-  --rp-color-bg: #16181d;
-  --rp-color-surface: #1c1f26;
-  --rp-color-border: #2b3038;
-  --rp-color-text: #e6e8ec;
-  --rp-color-text-muted: #98a2b3;
-  --rp-color-primary: #5b8def;
-  --rp-color-primary-contrast: #0b1220;
-  --rp-color-success: #3fb950;
-  --rp-color-warning: #d29922;
-  --rp-color-danger: #f85149;
-  color-scheme: dark;
+.pw-scene__head[data-v-d0fca3aa] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
-html,
-body {
+.pw-scene__title[data-v-d0fca3aa] {
   margin: 0;
-  padding: 0;
-  height: 100%;
-  background: var(--rp-color-bg);
+  font-size: 15px;
+  font-weight: 600;
+}
+.pw-scene.is-doc .pw-scene__title[data-v-d0fca3aa] {
+  font-size: 18px;
+  letter-spacing: -0.01em;
+}
+.pw-scene__anchor[data-v-d0fca3aa] {
   color: var(--rp-color-text);
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-  font-size: 14px;
-  -webkit-font-smoothing: antialiased;
+  text-decoration: none;
 }
-#app {
-  height: 100%;
+.pw-scene__anchor:hover .pw-scene__hash[data-v-d0fca3aa] {
+  color: var(--rp-color-primary);
 }
-.pw-app *,
-.pw-app *::before,
-.pw-app *::after {
-  box-sizing: border-box;
+.pw-scene__hash[data-v-d0fca3aa] {
+  margin-right: 6px;
+  color: var(--rp-color-text-muted);
+  font-weight: 400;
+  transition: color 0.15s ease;
 }
-.pw-btn[data-v-8c5978c8] {
+.pw-scene__actions[data-v-d0fca3aa] {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 6px;
-  border: 1px solid transparent;
-  border-radius: calc(var(--rp-radius) - 2px);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.pw-scene:hover .pw-scene__actions[data-v-d0fca3aa],
+.pw-scene__actions[data-v-d0fca3aa]:focus-within {
+  opacity: 1;
+}
+.pw-scene__action[data-v-d0fca3aa] {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 6px;
   background: transparent;
-  color: var(--rp-color-text);
+  color: var(--rp-color-text-muted);
   font: inherit;
+  font-size: 11.5px;
   cursor: pointer;
-  white-space: nowrap;
-  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  transition: color 0.15s ease, border-color 0.15s ease;
 }
-.pw-btn--sm[data-v-8c5978c8] {
-  height: 26px;
-  padding: 0 8px;
-  font-size: 12px;
+.pw-scene__action[data-v-d0fca3aa]:hover {
+  border-color: var(--rp-color-primary);
+  color: var(--rp-color-primary);
 }
-.pw-btn--md[data-v-8c5978c8] {
-  height: 32px;
-  padding: 0 12px;
-  font-size: 13px;
+.pw-scene__desc[data-v-d0fca3aa] {
+  margin: 0;
+  color: var(--rp-color-text-muted);
+  font-size: 12.5px;
+  line-height: 1.7;
 }
-.pw-btn--primary[data-v-8c5978c8] {
-  background: var(--rp-color-primary);
-  color: var(--rp-color-primary-contrast);
+.pw-scene__preview[data-v-d0fca3aa] {
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius);
+  overflow: hidden;
+  /* 文档场景（.md）直接铺在页面上：它不是 demo，不该套演示画布的白卡片 */
 }
-.pw-btn--primary[data-v-8c5978c8]:hover:not(:disabled) {
-  filter: brightness(1.06);
+.pw-scene__preview.is-doc[data-v-d0fca3aa] {
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
 }
-.pw-btn--ghost[data-v-8c5978c8] {
-  border-color: var(--rp-color-border);
+.pw-scene__canvas[data-v-d0fca3aa] {
+  padding: 18px;
   background: var(--rp-color-bg);
-  color: var(--rp-color-text-muted);
-}
-.pw-btn--ghost[data-v-8c5978c8]:hover:not(:disabled) {
-  border-color: var(--rp-color-primary);
   color: var(--rp-color-text);
 }
-.pw-btn--text[data-v-8c5978c8]:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--rp-color-primary) 10%, transparent);
-  color: var(--rp-color-text);
+.pw-scene__skeleton[data-v-d0fca3aa] {
+  height: 88px;
+  border-radius: 6px;
+  background: linear-gradient(90deg, var(--rp-color-surface) 0%, color-mix(in srgb, var(--rp-color-border) 40%, transparent) 50%, var(--rp-color-surface) 100%);
+  background-size: 200% 100%;
+  animation: pw-skeleton-d0fca3aa 1.2s linear infinite;
 }
-.pw-btn[data-v-8c5978c8]:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
+.pw-scene__io[data-v-d0fca3aa] {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
 }
-.pw-btn[data-v-8c5978c8]:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 55%, transparent);
-  outline-offset: 1px;
+.pw-scene__io.is-single[data-v-d0fca3aa] {
+  grid-template-columns: minmax(0, 1fr);
 }
-.pw-btn__label[data-v-8c5978c8] {
-  line-height: 1;
+@media (max-width: 900px) {
+.pw-scene__io[data-v-d0fca3aa] {
+    grid-template-columns: minmax(0, 1fr);
+}
+}
+/* 预览宽度由容器决定（设备外壳 / 手动宽度），媒体查询看不到，所以用 container query */
+@container pw-preview (max-width: 760px) {
+.pw-scene__io[data-v-d0fca3aa] {
+    grid-template-columns: minmax(0, 1fr);
 }
-.pw-btn__spinner[data-v-8c5978c8] {
-  width: 12px;
-  height: 12px;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: pw-spin-8c5978c8 0.7s linear infinite;
 }
-@keyframes pw-spin-8c5978c8 {
+@keyframes pw-skeleton-d0fca3aa {
 to {
-    transform: rotate(360deg);
+    background-position: -200% 0;
 }
 }
-.pw-input[data-v-e249cd4b] {
+.pw-page[data-v-089ab888] {
   display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  /* 分组：实心标签，比原来的灰色「Card /」更容易认出来 */
+  /* 箭头把「哪个分组下的哪个页面」说出来；两侧 gap 已经 8px，箭头自身再收 2px */
+  /* 场景数是元信息，用一根竖线隔开，不再贴着标题读成「概览 2 个场景」 */
+  /**
+   * API 视图：外层不滚，改由 .pw-api__body 自己滚。
+   * 这样页签行是固定的，滚动条只属于内容区。
+   */
+}
+.pw-page__head[data-v-089ab888] {
+  /* 三列：左 1fr / 中 auto / 右 1fr —— 宽度控件才能落在页面真正的正中，
+       而不是跟着右侧按钮数量左右飘 */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 0 8px;
-  border: 1px solid var(--rp-color-border);
-  border-radius: calc(var(--rp-radius) - 2px);
-  background: var(--rp-color-bg);
-  color: var(--rp-color-text);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.pw-input--sm[data-v-e249cd4b] {
-  height: 26px;
-}
-.pw-input--md[data-v-e249cd4b] {
-  height: 32px;
-}
-.pw-input[data-v-e249cd4b]:focus-within {
-  border-color: var(--rp-color-primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-color-primary) 16%, transparent);
+  gap: 12px;
+  /* 与侧栏品牌条（.pw-sidebar__brand 的 49px）严格等高：两条横线在分界处必须接上 */
+  height: 49px;
+  padding: 0 24px;
+  border-bottom: 1px solid var(--rp-color-border);
 }
-.pw-input__field[data-v-e249cd4b] {
-  flex: 1;
+.pw-page__lead[data-v-089ab888] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   min-width: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-}
-.pw-input__field[data-v-e249cd4b]::placeholder {
-  color: var(--rp-color-text-muted);
 }
-.pw-input__clear[data-v-e249cd4b] {
-  display: inline-flex;
+.pw-page__center[data-v-089ab888] {
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--rp-color-text-muted) 20%, transparent);
-  color: var(--rp-color-text-muted);
-  font-size: 12px;
-  line-height: 1;
-  cursor: pointer;
+  min-width: 0;
 }
-.pw-input__clear[data-v-e249cd4b]:hover {
-  color: var(--rp-color-text);
+.pw-page__crumb[data-v-089ab888] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-size: 13px;
+  /* 窄窗口下宁可截断页名，也不要竖排成三行 */
+  white-space: nowrap;
 }
-.pw-switch[data-v-64fffbcb] {
-  position: relative;
-  width: 34px;
-  height: 20px;
+.pw-page__group[data-v-089ab888] {
   flex: 0 0 auto;
-  padding: 0;
+  /* 负 margin 抵消标签左右内边距（8px + 1px 边框），让标签里的文字和正文左边缘对齐 */
+  margin-left: -9px;
+  padding: 1px 8px;
   border: 1px solid var(--rp-color-border);
   border-radius: 999px;
   background: var(--rp-color-surface);
-  cursor: pointer;
-  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  color: var(--rp-color-text);
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 18px;
 }
-.pw-switch[data-v-64fffbcb]:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 55%, transparent);
-  outline-offset: 2px;
+.pw-page__sep[data-v-089ab888] {
+  flex: 0 0 auto;
+  margin: 0 -2px;
+  color: color-mix(in srgb, var(--rp-color-text-muted) 70%, transparent);
 }
-.pw-switch[data-v-64fffbcb]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.pw-page__name[data-v-089ab888] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
 }
-.pw-switch.is-on[data-v-64fffbcb] {
-  border-color: var(--rp-color-primary);
-  background: var(--rp-color-primary);
+.pw-page__count[data-v-089ab888] {
+  flex: 0 0 auto;
+  padding-left: 9px;
+  border-left: 1px solid var(--rp-color-border);
+  color: var(--rp-color-text-muted);
+  font-size: 11.5px;
+  line-height: 14px;
 }
-.pw-switch__thumb[data-v-64fffbcb] {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
+.pw-page__actions[data-v-089ab888] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-self: end;
+  min-width: 0;
+}
+.pw-page__scroll[data-v-089ab888] {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 20px 24px 40px;
+  /* 设备壳里的屏幕要有实底，否则外框底色会透上来 */
   background: var(--rp-color-bg);
-  box-shadow: 0 1px 2px color-mix(in srgb, var(--rp-color-text) 25%, transparent);
-  transition: transform 0.16s ease;
 }
-.pw-switch.is-on .pw-switch__thumb[data-v-64fffbcb] {
-  transform: translateX(14px);
+.pw-page__scroll[data-v-089ab888]::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.pw-page__scroll[data-v-089ab888]::-webkit-scrollbar-track,
+.pw-page__scroll[data-v-089ab888]::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pw-page__scroll[data-v-089ab888]::-webkit-scrollbar-button {
+  display: none;
+}
+.pw-page__scroll[data-v-089ab888]::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 16%, transparent);
+}
+.pw-page__scroll[data-v-089ab888]:hover::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 34%, transparent);
+}
+.pw-page__scroll[data-v-089ab888]:hover::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 56%, transparent);
+}
+.pw-page__scroll.is-api[data-v-089ab888] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
 }
-.pw-code[data-v-feddef62] {
+.pw-page__scroll.is-api .pw-page__body[data-v-089ab888] {
+  flex: 1;
+  align-items: stretch;
+  gap: 0;
+  min-height: 0;
+  padding-top: 0;
+}
+.pw-page__scroll.is-api .pw-page__frame[data-v-089ab888] {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
   height: 100%;
-  overflow: auto;
-  font-family: var(--rp-font-mono);
-  font-size: 12.5px;
-  line-height: 1.65;
 }
-.pw-code__hint[data-v-feddef62],
-.pw-code__error[data-v-feddef62] {
-  margin: 0;
-  padding: 16px;
+.pw-page__frame[data-v-089ab888] {
+  flex: 1;
+  min-width: 0;
+  margin: 0 auto;
+  transition: max-width 0.2s ease;
+}
+.pw-page__desc[data-v-089ab888] {
+  margin: 0 0 20px;
   color: var(--rp-color-text-muted);
-  white-space: pre-wrap;
+  font-size: 13px;
+  line-height: 1.75;
 }
-.pw-code__error[data-v-feddef62] {
-  color: var(--rp-color-danger);
+.pw-page__body[data-v-089ab888] {
+  display: flex;
+  align-items: flex-start;
+  gap: 32px;
+  width: 100%;
 }
-.pw-code__body[data-v-feddef62] pre {
-  margin: 0;
-  padding: 12px 16px 20px;
-  background: transparent !important;
-  tab-size: 2;
+.pw-page__main[data-v-089ab888] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 28px;
+  min-width: 0;
 }
-.pw-code__body[data-v-feddef62] code {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
+.pw-view[data-v-089ab888] {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 8px;
+}
+.pw-view__btn[data-v-089ab888] {
+  padding: 3px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--rp-color-text-muted);
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+}
+.pw-view__btn[data-v-089ab888]:hover {
+  color: var(--rp-color-text);
 }
-.pw-code__body[data-v-feddef62] span {
-  color: var(--shiki-light);
+.pw-view__btn.is-active[data-v-089ab888] {
+  background: color-mix(in srgb, var(--rp-color-primary) 12%, transparent);
+  color: var(--rp-color-primary);
+  font-weight: 600;
 }
-:root[data-pw-theme='dark'] .pw-code__body[data-v-feddef62] span {
-  color: var(--shiki-dark);
+.pw-page__api-empty[data-v-089ab888] {
+  margin: 0;
+  color: var(--rp-color-text-muted);
+  font-size: 12.5px;
 }
-.pw-params[data-v-582d049e] {
-  display: flex;
-  flex-direction: column;
-  width: 320px;
-  flex: 0 0 320px;
-  min-height: 0;
-  border-left: 1px solid var(--rp-color-border);
-  background: var(--rp-color-bg);
+.pw-page__api-empty code[data-v-089ab888] {
+  padding: 1px 5px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 4px;
+  font-family: var(--rp-font-mono);
+  font-size: 11.5px;
 }
-.pw-params__head[data-v-582d049e] {
-  display: flex;
+.pw-width[data-v-089ab888] {
+  display: inline-flex;
   align-items: center;
-  gap: 4px;
-  height: 36px;
-  flex: 0 0 36px;
-  padding: 0 8px;
-  border-bottom: 1px solid var(--rp-color-border);
-}
-.pw-params__spacer[data-v-582d049e] {
-  flex: 1;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 8px;
 }
-.pw-params__tab[data-v-582d049e] {
+.pw-width__btn[data-v-089ab888] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
   height: 24px;
-  padding: 0 10px;
   border: 0;
-  border-radius: calc(var(--rp-radius) - 4px);
+  border-radius: 6px;
   background: transparent;
   color: var(--rp-color-text-muted);
-  font-size: 12px;
   cursor: pointer;
-  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
-.pw-params__tab[data-v-582d049e]:hover:not(:disabled) {
+.pw-width__btn[data-v-089ab888]:hover {
   color: var(--rp-color-text);
-  background: color-mix(in srgb, var(--rp-color-text-muted) 10%, transparent);
 }
-.pw-params__tab.is-active[data-v-582d049e] {
+.pw-width__btn.is-active[data-v-089ab888] {
   background: color-mix(in srgb, var(--rp-color-primary) 12%, transparent);
   color: var(--rp-color-primary);
 }
-.pw-params__tab[data-v-582d049e]:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+.pw-width__custom[data-v-089ab888] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 2px;
+  padding-left: 6px;
+  border-left: 1px solid var(--rp-color-border);
 }
-.pw-params__tab[data-v-582d049e]:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 55%, transparent);
-  outline-offset: -1px;
+.pw-width__custom[data-v-089ab888] .pw-input {
+  width: 96px;
+  height: 24px;
+  padding: 0 4px;
+  /* 透明输入框配一个圆形清空按钮，读起来像散落的文字；给一层浅底和描边，值才看得清 */
+  border-color: color-mix(in srgb, var(--rp-color-text) 14%, transparent);
+  background: color-mix(in srgb, var(--rp-color-text) 7%, transparent);
 }
-.pw-params__body[data-v-582d049e] {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
+.pw-width__custom[data-v-089ab888] .pw-input__field {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  /* 数字步进箭头会占掉 3 位数需要的宽度，宽度值本身靠键盘输入，直接藏掉 */
 }
-.pw-params__slots[data-v-582d049e] {
+.pw-width__custom[data-v-089ab888] .pw-input__field::-webkit-outer-spin-button,
+.pw-width__custom[data-v-089ab888] .pw-input__field::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+.pw-width__custom[data-v-089ab888] .pw-input__field[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.pw-width__unit[data-v-089ab888] {
+  color: var(--rp-color-text-muted);
+  font-size: 11px;
+}
+/* ---------------- 预览设备外壳 ---------------- */
+.pw-device-wrap[data-v-089ab888] {
   display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
   flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  /* 自适应：不套壳，铺满 */
+  /* 注意：这些覆盖要和上面的 :not(.is-auto) .pw-device 同权重或更高，否则圆角不生效 */
+  /* 屏幕圆角：与外框同心，内容滚到边缘会被裁掉 */
 }
-.pw-slot[data-v-582d049e] {
-  border-bottom: 1px solid var(--rp-color-border);
+.pw-device-wrap.is-auto[data-v-089ab888] {
+  padding: 0;
+  gap: 0;
 }
-.pw-slot[data-v-582d049e]:last-child {
-  border-bottom: 0;
+.pw-device-wrap[data-v-089ab888]:not(.is-auto) {
+  padding: 18px 20px 12px;
+}
+.pw-device-wrap:not(.is-auto) .pw-device[data-v-089ab888] {
+  /* 目标宽度可能大于可用空间（如 1280 桌面），夹住避免撑破页面 */
+  width: min(var(--pw-device-w), 100%);
+  max-width: 100%;
+  padding: 10px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 30px;
+  background: color-mix(in srgb, var(--rp-color-text) 6%, var(--rp-color-bg));
+  box-shadow: 0 26px 54px -34px color-mix(in srgb, var(--rp-color-text) 60%, transparent);
+}
+.pw-device-wrap--phone:not(.is-auto) .pw-device[data-v-089ab888] {
+  padding: 12px;
+  border-radius: 40px;
+}
+.pw-device-wrap--tablet:not(.is-auto) .pw-device[data-v-089ab888] {
+  padding: 12px;
+  border-radius: 26px;
 }
-.pw-slot--output[data-v-582d049e] {
+.pw-device-wrap--desktop:not(.is-auto) .pw-device[data-v-089ab888] {
   padding: 0;
+  overflow: hidden;
+  border-radius: 12px;
+}
+.pw-device-wrap--phone .pw-page__scroll[data-v-089ab888] {
+  border-radius: 28px;
+}
+.pw-device-wrap--tablet .pw-page__scroll[data-v-089ab888] {
+  border-radius: 15px;
+}
+.pw-device-wrap--desktop .pw-page__scroll[data-v-089ab888] {
+  border-radius: 0;
+}
+.pw-device[data-v-089ab888] {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  width: 100%;
+  /* 预览宽度是容器宽度，不是浏览器窗口宽度：内部响应式用 container query */
+  container-type: inline-size;
+  container-name: pw-preview;
 }
-.pw-slot__head[data-v-582d049e] {
+.pw-device__bar[data-v-089ab888] {
   display: flex;
   align-items: center;
   gap: 6px;
-  height: 26px;
-  padding: 0 8px 0 12px;
-  background: color-mix(in srgb, var(--rp-color-text-muted) 6%, transparent);
+  height: 30px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--rp-color-border);
+  background: var(--rp-color-surface);
 }
-.pw-slot__name[data-v-582d049e] {
-  flex: 1;
-  overflow: hidden;
+.pw-device__bar i[data-v-089ab888] {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 42%, transparent);
+}
+.pw-device__sensor[data-v-089ab888] {
+  position: absolute;
+  top: 5px;
+  left: 50%;
+  width: 56px;
+  height: 4px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 42%, transparent);
+  transform: translateX(-50%);
+}
+.pw-device__caption[data-v-089ab888] {
+  margin: 0;
   color: var(--rp-color-text-muted);
-  font-size: 11.5px;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
 }
-.pw-form[data-v-582d049e] {
+/* 页面级工作区：左边是预览（可能套设备外壳），右边是场景索引 —— 索引不在外壳里 */
+.pw-page__work[data-v-089ab888] {
   display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 12px;
-}
-.pw-form__row[data-v-582d049e] {
-  display: grid;
-  grid-template-columns: 96px 1fr;
-  align-items: center;
-  gap: 10px;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
 }
-.pw-form__label[data-v-582d049e] {
+/* 索引槽：收起时宽度归零（索引自己的宽度和分隔线一起被裁掉） */
+.pw-index-slot[data-v-089ab888] {
+  flex: 0 0 auto;
+  width: 216px;
+  min-height: 0;
   overflow: hidden;
-  color: var(--rp-color-text-muted);
-  font-family: var(--rp-font-mono);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  /* 分隔线画在槽位上：索引内容只有几条时线也要通到页面底部 */
+  border-left: 1px solid var(--rp-color-border);
+  transition: width 0.18s ease;
 }
-.pw-form__select[data-v-582d049e] {
-  height: 26px;
-  padding: 0 6px;
-  border: 1px solid var(--rp-color-border);
-  border-radius: calc(var(--rp-radius) - 2px);
-  background: var(--rp-color-bg);
-  color: var(--rp-color-text);
-  font: inherit;
-  font-size: 12px;
+.pw-index-slot.is-collapsed[data-v-089ab888] {
+  width: 0;
+  border-left-color: transparent;
 }
-.pw-form__select[data-v-582d049e]:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 55%, transparent);
-  outline-offset: 0;
+/* 窗口不够宽时索引直接让位（否则正文只剩三百来像素），开关一起收起。
+   选择器要压过下面的 .pw-head-btn { display: flex }，所以带上 .pw-page__head */
+@media (max-width: 1080px) {
+.pw-index-slot[data-v-089ab888],
+  .pw-page__head .pw-head-btn--index[data-v-089ab888] {
+    display: none;
+}
+}
+@container pw-preview (max-width: 560px) {
+.pw-page__scroll[data-v-089ab888] {
+    padding: 14px 14px 28px;
 }
-.pw-params__hint[data-v-582d049e] {
-  margin: 8px 0 0;
+}
+/* 页头所有图标按钮统一：28×28、圆角 8、1px 边框、图标 14 */
+.pw-head-btn[data-v-089ab888] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 8px;
+  background: transparent;
   color: var(--rp-color-text-muted);
-  font-size: 12px;
+  cursor: pointer;
 }
-.pw-params__hint--empty[data-v-582d049e] {
-  padding: 12px;
-  margin: 0;
+.pw-head-btn[data-v-089ab888]:hover {
+  border-color: var(--rp-color-primary);
+  color: var(--rp-color-primary);
 }
-.pw-group-index[data-v-97e3a4f9] {
-  max-width: 720px;
-  padding: 28px 4px;
+.pw-head-btn.is-active[data-v-089ab888] {
+  border-color: var(--rp-color-primary);
+  background: color-mix(in srgb, var(--rp-color-primary) 10%, transparent);
+  color: var(--rp-color-primary);
 }
-.pw-group-index__head[data-v-97e3a4f9] {
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-  margin-bottom: 20px;
+.pw-head-btn[data-v-089ab888]:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
-.pw-group-index__title[data-v-97e3a4f9] {
-  margin: 0;
-  color: var(--rp-color-text);
-  font-size: 18px;
-  font-weight: 600;
+.pw-plugin-panel[data-v-dffb0514] {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
 }
-.pw-group-index__count[data-v-97e3a4f9] {
-  color: var(--rp-color-text-muted);
-  font-size: 12.5px;
+.pw-plugin-panel__mask[data-v-dffb0514] {
+  position: absolute;
+  inset: 0;
+  /* 用 brightness 压暗背后那一层：明暗两套主题都成立，也不用写死蒙层色值 */
+  backdrop-filter: blur(2px) brightness(0.72);
 }
-.pw-group-index__list[data-v-97e3a4f9] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.pw-plugin-panel__drawer[data-v-dffb0514] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 420px;
+  max-width: 100vw;
+  border-left: 1px solid var(--rp-color-border);
+  border-radius: 12px 0 0 12px;
+  background: var(--rp-color-bg);
+  color: var(--rp-color-text);
+  box-shadow: -18px 0 48px color-mix(in srgb, var(--rp-color-text) 18%, transparent);
+  outline: none;
 }
-.pw-group-index__item[data-v-97e3a4f9] {
-  padding: 12px 0;
+.pw-plugin-panel__head[data-v-dffb0514] {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: 49px;
+  padding: 0 14px 0 16px;
   border-bottom: 1px solid var(--rp-color-border);
 }
-.pw-group-index__item[data-v-97e3a4f9]:last-child {
-  border-bottom: 0;
+.pw-plugin-panel__title[data-v-dffb0514] {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+/* 面板要写明属于哪个插件：同名面板多了才知道该找谁 */
+.pw-plugin-panel__from[data-v-dffb0514] {
+  margin-left: auto;
+  padding-right: 6px;
+  color: var(--rp-color-text-muted);
+  font-size: 10.5px;
 }
-.pw-group-index__link[data-v-97e3a4f9] {
+.pw-plugin-panel__close[data-v-dffb0514] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
   padding: 0;
   border: 0;
+  border-radius: var(--rp-radius);
   background: transparent;
-  color: var(--rp-color-primary);
-  font: inherit;
-  font-size: 14px;
+  color: var(--rp-color-text-muted);
   cursor: pointer;
 }
-.pw-group-index__link[data-v-97e3a4f9]:hover {
-  text-decoration: underline;
+.pw-plugin-panel__close[data-v-dffb0514]:hover {
+  background: var(--rp-color-surface);
+  color: var(--rp-color-text);
 }
-.pw-group-index__desc[data-v-97e3a4f9] {
-  margin: 6px 0 4px;
-  color: var(--rp-color-text-muted);
-  font-size: 12.5px;
-  line-height: 1.6;
+.pw-plugin-panel__close[data-v-dffb0514]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 60%, transparent);
+  outline-offset: 1px;
 }
-.pw-group-index__id[data-v-97e3a4f9] {
-  color: var(--rp-color-text-muted);
-  font-family: var(--rp-font-mono);
-  font-size: 11.5px;
-  opacity: 0.75;
+.pw-plugin-panel__body[data-v-dffb0514] {
+  flex: 1;
+  min-height: 0;
+  padding: 16px;
+  overflow: auto;
 }
-.pw-sidebar[data-v-cda96938] {
+.pw-sidebar[data-v-e1a77ffa] {
   display: flex;
+  flex: 0 0 260px;
   flex-direction: column;
-  width: 264px;
-  flex: 0 0 264px;
+  width: 260px;
   height: 100%;
   border-right: 1px solid var(--rp-color-border);
   background: var(--rp-color-surface);
 }
-.pw-sidebar__brand[data-v-cda96938] {
+.pw-sidebar__brand[data-v-e1a77ffa] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -477,13 +2641,13 @@ to {
   padding: 0 16px;
   border-bottom: 1px solid var(--rp-color-border);
 }
-.pw-sidebar__logo[data-v-cda96938] {
+.pw-sidebar__logo[data-v-e1a77ffa] {
   width: 10px;
   height: 10px;
   border-radius: 3px;
   background: var(--rp-color-primary);
 }
-.pw-sidebar__title[data-v-cda96938] {
+.pw-sidebar__title[data-v-e1a77ffa] {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.01em;
@@ -492,14 +2656,15 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.pw-sidebar__search[data-v-cda96938] {
-  padding: 12px 12px 8px;
+.pw-sidebar__search[data-v-e1a77ffa] {
+  /* 与品牌 logo、分组标题同一条 16px 导轨 */
+  padding: 12px 16px 4px;
 }
-.pw-sidebar__search-icon[data-v-cda96938] {
+.pw-sidebar__search-icon[data-v-e1a77ffa] {
   color: var(--rp-color-text-muted);
   flex: 0 0 auto;
 }
-.pw-sidebar__kbd[data-v-cda96938] {
+.pw-sidebar__kbd[data-v-e1a77ffa] {
   flex: 0 0 auto;
   padding: 1px 4px;
   border: 1px solid var(--rp-color-border);
@@ -509,310 +2674,376 @@ to {
   font-size: 10px;
   line-height: 1.4;
 }
-.pw-sidebar__nav[data-v-cda96938] {
+.pw-sidebar__nav[data-v-e1a77ffa] {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 4px 8px 12px;
+  /* 滚动条出现/消失时列表不横向跳动 */
+  scrollbar-gutter: stable;
+  padding: 4px 16px 16px;
+}
+.pw-sidebar__nav[data-v-e1a77ffa]::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.pw-sidebar__nav[data-v-e1a77ffa]::-webkit-scrollbar-track,
+.pw-sidebar__nav[data-v-e1a77ffa]::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pw-sidebar__nav[data-v-e1a77ffa]::-webkit-scrollbar-button {
+  display: none;
+}
+.pw-sidebar__nav[data-v-e1a77ffa]::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 16%, transparent);
 }
-.pw-nav-group + .pw-nav-group[data-v-cda96938] {
-  margin-top: 10px;
+.pw-sidebar__nav[data-v-e1a77ffa]:hover::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 34%, transparent);
 }
-.pw-nav-group__title[data-v-cda96938] {
-  padding: 6px 8px 4px;
+.pw-sidebar__nav[data-v-e1a77ffa]:hover::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 56%, transparent);
+}
+.pw-nav-group + .pw-nav-group[data-v-e1a77ffa] {
+  padding-top: 6px;
+}
+.pw-nav-group__list[data-v-e1a77ffa] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.pw-nav-group__title[data-v-e1a77ffa] {
+  /* 分组标题吸顶：长列表滚动时始终知道自己在哪一组 */
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 28px;
+  /* 整行 28px 可点，左边缘与页项 hover 底色对齐（16px 导轨）；
+     右缘留 4px，让箭头中心和页项箭头中心重合 */
+  margin: 0;
+  padding: 0 4px 0 0;
+  border: 0;
+  background: var(--rp-color-surface);
   color: var(--rp-color-text-muted);
+  font: inherit;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.06em;
+  text-align: left;
   text-transform: uppercase;
-}
-.pw-nav-group__title-btn[data-v-cda96938] {
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  letter-spacing: inherit;
-  text-transform: inherit;
   cursor: pointer;
+  /* 当前页被收在这个组里时，标题也给出品牌色，别让人找不到自己 */
+}
+.pw-nav-group__title[data-v-e1a77ffa]:hover:not(:disabled) {
+  /* 吸顶标题必须是不透明底色，否则滚动的列表会透过来 */
+  background: color-mix(in srgb, var(--rp-color-text-muted) 8%, var(--rp-color-surface));
+  color: var(--rp-color-text);
+}
+.pw-nav-group__title[data-v-e1a77ffa]:disabled {
+  cursor: default;
+}
+.pw-nav-group__title.has-active[data-v-e1a77ffa] {
+  color: var(--rp-color-primary);
+}
+.pw-nav-group__title:hover:not(:disabled) .pw-nav-group__count[data-v-e1a77ffa] {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 20%, transparent);
+  color: var(--rp-color-text);
+}
+.pw-nav-group__title.has-active .pw-nav-group__count[data-v-e1a77ffa] {
+  background: color-mix(in srgb, var(--rp-color-primary) 16%, transparent);
+  color: var(--rp-color-primary);
+}
+.pw-nav-group__name[data-v-e1a77ffa] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 收起时显示「这一组有几页」，避免收起后看起来是空的 */
+.pw-nav-group__count[data-v-e1a77ffa] {
+  flex: 0 0 auto;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 12%, transparent);
+  color: var(--rp-color-text-muted);
+  font-size: 10px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: 16px;
+  letter-spacing: 0;
+}
+.pw-nav-group__chevron-box[data-v-e1a77ffa] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
 }
-.pw-nav-group__title-btn[data-v-cda96938]:hover {
-  color: var(--rp-color-text);
+.pw-nav-group__chevron[data-v-e1a77ffa] {
+  flex: 0 0 auto;
+  transition: transform 0.15s ease;
 }
-.pw-nav-group__title-btn.is-active[data-v-cda96938] {
-  color: var(--rp-color-primary);
+.pw-nav-group__chevron.is-open[data-v-e1a77ffa] {
+  transform: rotate(90deg);
 }
-.pw-nav-item[data-v-cda96938] {
-  display: block;
+.pw-nav-row[data-v-e1a77ffa] {
+  position: relative;
+}
+.pw-nav-item[data-v-e1a77ffa] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   width: 100%;
-  padding: 6px 8px;
+  min-height: 28px;
+  /* 分组标题在 16px 导轨上，页项再缩进 8px（文字 24px） */
+  padding: 5px 8px;
   border: 0;
   border-radius: calc(var(--rp-radius) - 3px);
   background: transparent;
   color: var(--rp-color-text);
   font: inherit;
   font-size: 13px;
+  line-height: 18px;
   text-align: left;
   cursor: pointer;
+}
+.pw-nav-item.has-children[data-v-e1a77ffa] {
+  padding-right: 28px;
+}
+.pw-nav-item.is-child[data-v-e1a77ffa] {
+  position: relative;
+  font-size: 12.5px;
+  /* 只有当前这一项对应的那一小段竖线用品牌色（线在 x=12，子项盒子从 16 起，所以 -4px）；
+       整条线保持中性，否则看着像「这一组全被选中了」 */
+}
+.pw-nav-item.is-child.is-active[data-v-e1a77ffa]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  width: 2px;
+  border-radius: 2px;
+  background: var(--rp-color-primary);
+}
+.pw-nav__hit[data-v-e1a77ffa] {
+  padding: 0 1px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--rp-color-primary) 24%, transparent);
+  color: inherit;
+  font-weight: 600;
+}
+.pw-nav-item__title[data-v-e1a77ffa] {
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.pw-nav-item[data-v-cda96938]:hover {
+.pw-nav-row.is-branch-active .pw-nav-item[data-v-e1a77ffa]:not(.is-active) {
+  color: color-mix(in srgb, var(--rp-color-primary) 72%, var(--rp-color-text));
+}
+.pw-nav-row.is-branch-active .pw-nav-toggle[data-v-e1a77ffa] {
+  color: var(--rp-color-primary);
+}
+.pw-nav-item[data-v-e1a77ffa]:hover {
   background: color-mix(in srgb, var(--rp-color-text-muted) 10%, transparent);
 }
-.pw-nav-item.is-active[data-v-cda96938] {
+.pw-nav-item.is-active[data-v-e1a77ffa] {
   background: color-mix(in srgb, var(--rp-color-primary) 12%, transparent);
   color: var(--rp-color-primary);
   font-weight: 500;
 }
-.pw-nav-item[data-v-cda96938]:focus-visible {
+.pw-nav-item[data-v-e1a77ffa]:focus-visible {
   outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 55%, transparent);
   outline-offset: -2px;
 }
-.pw-sidebar__empty[data-v-cda96938] {
-  margin: 16px 8px;
-  color: var(--rp-color-text-muted);
-  font-size: 12px;
-}
-.pw-sidebar__footer[data-v-cda96938] {
-  padding: 10px 16px;
-  border-top: 1px solid var(--rp-color-border);
-  color: var(--rp-color-text-muted);
-  font-size: 11px;
-}
-.pw-monaco[data-v-c45e6fcb] {
-  height: 100%;
-  overflow: hidden;
-}
-.pw-source[data-v-16eca20a] {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-}
-.pw-source__head[data-v-16eca20a] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  height: 36px;
-  flex: 0 0 36px;
-  padding: 0 8px 0 12px;
-  border-bottom: 1px solid var(--rp-color-border);
-}
-.pw-source__tabs[data-v-16eca20a] {
-  display: flex;
+.pw-nav-toggle[data-v-e1a77ffa] {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  display: inline-flex;
   align-items: center;
-  gap: 4px;
-  min-width: 0;
-  overflow-x: auto;
-}
-.pw-tab[data-v-16eca20a] {
-  height: 24px;
-  padding: 0 8px;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
   border: 0;
-  border-radius: calc(var(--rp-radius) - 4px);
+  border-radius: 4px;
   background: transparent;
   color: var(--rp-color-text-muted);
-  font-family: var(--rp-font-mono);
-  font-size: 12px;
-  white-space: nowrap;
   cursor: pointer;
-  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  transform: translateY(-50%);
 }
-.pw-tab[data-v-16eca20a]:hover {
+.pw-nav-toggle[data-v-e1a77ffa]:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 14%, transparent);
   color: var(--rp-color-text);
-  background: color-mix(in srgb, var(--rp-color-text-muted) 10%, transparent);
-}
-.pw-tab.is-active[data-v-16eca20a] {
-  background: color-mix(in srgb, var(--rp-color-primary) 12%, transparent);
-  color: var(--rp-color-primary);
-}
-.pw-tab[data-v-16eca20a]:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 55%, transparent);
-  outline-offset: -1px;
-}
-.pw-source__actions[data-v-16eca20a] {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  flex: 0 0 auto;
-}
-.pw-source__body[data-v-16eca20a] {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
 }
-.pw-source__hint[data-v-16eca20a] {
-  display: block;
-  padding: 16px;
-  color: var(--rp-color-text-muted);
-  font-size: 12px;
+.pw-nav-toggle .is-open[data-v-e1a77ffa] {
+  transform: rotate(90deg);
 }
-.pw-stage[data-v-2c6f2a44] {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  background: var(--rp-color-surface);
-  padding: 24px;
+/* 子组件：缩进 + 一条短竖线做「归属」，不做梯子，避免和文字抢注意力 */
+.pw-nav-children[data-v-e1a77ffa] {
+  position: relative;
+  padding-left: 16px;
 }
-.pw-stage__frame[data-v-2c6f2a44] {
+.pw-nav-children[data-v-e1a77ffa]::before {
+  content: '';
+  position: absolute;
+  /* 落在父页文字与子项文字之间（x=28），与子项选中药丸留 4px；
+       从父页行底边起笔，覆盖整个子项区 */
+  left: 12px;
+  top: -2px;
+  bottom: 1px;
+  width: 2px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--rp-color-text-muted) 16%, transparent);
+}
+/* 全局搜索结果：页面 / 场景两段，每条两行（标题 + 位置），点场景直接跳过去 */
+.pw-hits[data-v-e1a77ffa] {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  min-height: 100%;
+  padding: 2px 0 10px;
 }
-.pw-stage__inner[data-v-2c6f2a44] {
+.pw-hits__group[data-v-e1a77ffa] {
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex: 1;
-  min-width: 0;
-  overflow-x: auto;
-  /* 场景内容不要被压缩：窄容器时横向滚动，而不是把按钮挤成几行。
-     max-width 封顶在容器宽度内，宽内容才会真正换行（否则按 max-content 排版，flex-wrap 永远不生效）。 */
-}
-.pw-stage__inner[data-v-2c6f2a44] >  * {
-  flex: 0 0 auto;
-  max-width: 100%;
+  flex-direction: column;
+  gap: 1px;
 }
-.pw-stage__desc[data-v-2c6f2a44] {
-  margin: 0;
+.pw-hits__label[data-v-e1a77ffa] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 2px 3px;
+  padding: 0 6px;
   color: var(--rp-color-text-muted);
-  font-size: 12.5px;
-  line-height: 1.6;
+  font-size: 10.5px;
+  letter-spacing: 0.04em;
 }
-.pw-stage--tablet .pw-stage__frame[data-v-2c6f2a44] {
-  max-width: 820px;
-  margin: 0 auto;
-}
-.pw-stage--mobile .pw-stage__frame[data-v-2c6f2a44] {
-  max-width: 420px;
-  margin: 0 auto;
+.pw-hits__count[data-v-e1a77ffa] {
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.75;
 }
-.pw-stage__loading[data-v-2c6f2a44] {
+.pw-hits__more[data-v-e1a77ffa] {
+  margin: 4px 2px 0;
+  padding: 0 6px;
   color: var(--rp-color-text-muted);
-  font-size: 13px;
+  font-size: 10.5px;
+  line-height: 1.6;
 }
-.pw-stage__error[data-v-2c6f2a44] {
+.pw-hit[data-v-e1a77ffa] {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid color-mix(in srgb, var(--rp-color-danger) 40%, var(--rp-color-border));
-  border-radius: var(--rp-radius);
-  background: var(--rp-color-bg);
+  align-items: flex-start;
+  gap: 1px;
+  width: 100%;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
   color: var(--rp-color-text);
-  font-size: 13px;
-}
-.pw-stage__error strong[data-v-2c6f2a44] {
-  color: var(--rp-color-danger);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
 }
-.pw-stage__error code[data-v-2c6f2a44] {
-  font-family: var(--rp-font-mono);
-  font-size: 12px;
-  color: var(--rp-color-text-muted);
+.pw-hit[data-v-e1a77ffa]:hover {
+  background: color-mix(in srgb, var(--rp-color-text-muted) 10%, transparent);
 }
-.pw-stage__error span[data-v-2c6f2a44] {
-  white-space: pre-wrap;
-  color: var(--rp-color-text-muted);
+.pw-hit[data-v-e1a77ffa]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 55%, transparent);
+  outline-offset: -2px;
 }
-.pw-toolbar[data-v-b90c60a6] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  height: 49px;
-  flex: 0 0 49px;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--rp-color-border);
-  background: var(--rp-color-bg);
+.pw-hit__title[data-v-e1a77ffa] {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 12.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.pw-toolbar__crumb[data-v-b90c60a6] {
+.pw-hit__meta[data-v-e1a77ffa] {
   display: flex;
   align-items: center;
-  gap: 6px;
-  min-width: 0;
-  font-size: 13px;
-}
-.pw-toolbar__group[data-v-b90c60a6] {
+  gap: 5px;
+  max-width: 100%;
+  overflow: hidden;
   color: var(--rp-color-text-muted);
+  font-size: 10.5px;
   white-space: nowrap;
 }
-.pw-toolbar__sep[data-v-b90c60a6] {
-  color: var(--rp-color-border);
-}
-.pw-toolbar__title[data-v-b90c60a6] {
-  font-weight: 500;
+.pw-hit__meta-text[data-v-e1a77ffa] {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.pw-toolbar__actions[data-v-b90c60a6] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
 }
-.pw-width-group[data-v-b90c60a6] {
-  display: inline-flex;
-  padding: 2px;
-  gap: 2px;
-  border: 1px solid var(--rp-color-border);
-  border-radius: calc(var(--rp-radius) - 2px);
-  background: var(--rp-color-surface);
+.pw-hit__reason[data-v-e1a77ffa] {
+  flex: 0 0 auto;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--rp-color-primary) 14%, transparent);
+  color: var(--rp-color-primary);
+  font-style: normal;
 }
-.pw-width-btn[data-v-b90c60a6] {
-  display: inline-flex;
+.pw-sidebar__empty[data-v-e1a77ffa] {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 22px;
-  padding: 0;
-  border: 0;
-  border-radius: 5px;
-  background: transparent;
+  gap: 6px;
+  margin: 16px 8px;
   color: var(--rp-color-text-muted);
-  cursor: pointer;
-}
-.pw-width-btn[data-v-b90c60a6]:hover {
-  color: var(--rp-color-text);
-}
-.pw-width-btn.is-active[data-v-b90c60a6] {
-  background: var(--rp-color-bg);
-  color: var(--rp-color-primary);
-  box-shadow: 0 1px 2px color-mix(in srgb, var(--rp-color-text) 10%, transparent);
+  font-size: 12px;
 }
-.pw-width-btn[data-v-b90c60a6]:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--rp-color-primary) 55%, transparent);
-  outline-offset: -1px;
+.pw-sidebar__footer[data-v-e1a77ffa] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  padding: 9px 16px;
+  border-top: 1px solid var(--rp-color-border);
+  color: var(--rp-color-text-muted);
+  font-size: 10.5px;
 }
-.pw-app[data-v-5c38b5f6] {
+.pw-app[data-v-395342d2] {
   display: flex;
   height: 100vh;
   overflow: hidden;
   background: var(--rp-color-bg);
   color: var(--rp-color-text);
 }
-.pw-main[data-v-5c38b5f6] {
+.pw-app .pw-sidebar[data-v-395342d2] {
+  transition: width 0.18s ease, flex-basis 0.18s ease;
+}
+.pw-app.is-sidebar-collapsed .pw-sidebar[data-v-395342d2] {
+  flex-basis: 0;
+  width: 0;
+  overflow: hidden;
+  border-right-width: 0;
+}
+.pw-main[data-v-395342d2] {
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
   min-width: 0;
 }
-.pw-body[data-v-5c38b5f6] {
+.pw-content[data-v-395342d2] {
   display: flex;
   flex: 1;
   min-height: 0;
+  min-width: 0;
 }
-.pw-source-slot[data-v-5c38b5f6] {
-  height: 42%;
-  min-height: 200px;
-  border-top: 1px solid var(--rp-color-border);
-  background: var(--rp-color-bg);
+.pw-inspector[data-v-395342d2] {
+  flex: 0 0 320px;
+  width: 320px;
+  min-height: 0;
+  border-left: 1px solid var(--rp-color-border);
+  overflow: hidden;
 }
-.pw-empty[data-v-5c38b5f6] {
+.pw-empty[data-v-395342d2] {
   display: flex;
   flex: 1;
   align-items: center;
@@ -820,4 +3051,76 @@ to {
   color: var(--rp-color-text-muted);
   font-size: 13px;
 }
+.pw-empty code[data-v-395342d2] {
+  padding: 1px 5px;
+  border: 1px solid var(--rp-color-border);
+  border-radius: 4px;
+  font-family: var(--rp-font-mono);
+}
+.pw-boot[data-v-44a22d03] {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 100vh;
+  padding: 28px 32px;
+  background: var(--rp-color-bg);
+  color: var(--rp-color-text);
+  box-sizing: border-box;
+}
+.pw-boot__brand[data-v-44a22d03] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pw-boot__logo[data-v-44a22d03] {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  background: var(--rp-color-primary);
+}
+.pw-boot__title[data-v-44a22d03] {
+  font-size: 13px;
+  font-weight: 600;
+}
+.pw-boot__hint[data-v-44a22d03] {
+  margin: 0;
+  color: var(--rp-color-text-muted);
+  font-size: 13px;
+}
+.pw-boot__error[data-v-44a22d03] {
+  max-width: 720px;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--rp-color-danger) 45%, transparent);
+  border-radius: var(--rp-radius);
+  background: color-mix(in srgb, var(--rp-color-danger) 8%, transparent);
+}
+.pw-boot__head[data-v-44a22d03] {
+  margin: 0 0 6px;
+  color: var(--rp-color-danger);
+  font-size: 13px;
+  font-weight: 600;
+}
+.pw-boot__message[data-v-44a22d03] {
+  margin: 0;
+  font-family: var(--rp-font-mono);
+  font-size: 12px;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.pw-boot__stack[data-v-44a22d03] {
+  margin-top: 8px;
+  font-size: 11.5px;
+}
+.pw-boot__stack summary[data-v-44a22d03] {
+  cursor: pointer;
+  color: var(--rp-color-text-muted);
+}
+.pw-boot__stack pre[data-v-44a22d03] {
+  max-height: 260px;
+  margin: 6px 0 0;
+  overflow: auto;
+  font-family: var(--rp-font-mono);
+  font-size: 11px;
+  white-space: pre-wrap;
+}
 /*$vite$:1*/