.demo-main--wide{max-width:1680px}.pd-page{padding:0 0 64px;max-width:1680px}.pd-view[hidden],.pd-edit[hidden],.pd-dirty[hidden]{display:none}.pd-hero h1{margin:0 0 var(--z-space-2, 8px);font-size:var(--z-font-size-2xl);font-weight:var(--z-font-weight-semibold, 600)}.pd-hero p{margin:0;max-width:82ch;color:var(--z-color-text-secondary);font-size:var(--z-font-size-sm, 13px);line-height:1.7}.pd-chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--z-space-3, 12px);margin:var(--z-space-4, 16px) 0 0;padding:0;list-style:none;counter-reset:chain}.pd-chain li{position:relative;padding:10px 12px 10px 34px;border:1px solid var(--z-color-border);border-radius:var(--z-radius-md, 8px);background:var(--z-color-bg);font-size:var(--z-font-size-xs, 12px);color:var(--z-color-text-secondary);line-height:1.5;counter-increment:chain}.pd-chain li:before{content:counter(chain);position:absolute;left:10px;top:10px;width:16px;height:16px;border-radius:50%;background:var(--z-color-primary-soft);color:var(--z-color-primary-strong, var(--z-color-primary));font-size:10px;line-height:16px;text-align:center}.pd-chain code{display:block;margin-bottom:2px;font-family:var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12px;color:var(--z-color-text)}.pd-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--z-space-2, 8px);margin:var(--z-space-5, 20px) 0 var(--z-space-3, 12px)}.pd-toolbar__spacer{margin-left:auto}.pd-modes{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--z-color-border);border-radius:var(--z-radius-md, 8px);background:var(--z-color-bg-secondary)}.pd-mode{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:4px 14px;border-radius:var(--z-radius-sm, 4px);background:transparent;color:var(--z-color-text-secondary);font:inherit;font-size:var(--z-font-size-xs, 12px);line-height:18px;cursor:pointer}.pd-mode:hover{color:var(--z-color-text)}.pd-mode.is-active{background:var(--z-color-bg);color:var(--z-color-primary-strong, var(--z-color-primary));font-weight:var(--z-font-weight-medium, 500);box-shadow:var(--z-shadow-sm)}.pd-mode:focus-visible{outline:2px solid var(--z-color-primary);outline-offset:1px}.pd-toolbar__sep{width:1px;height:18px;background:var(--z-color-border)}.pd-edit__bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--z-space-2, 8px);margin:0 0 var(--z-space-3, 12px);font-size:var(--z-font-size-xs, 12px);color:var(--z-color-text-secondary)}.pd-dirty{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:var(--z-radius-full, 999px);background:var(--z-color-warning-soft);color:var(--z-color-warning-strong);font-weight:var(--z-font-weight-medium, 500);line-height:18px}.pd-edit__warn{color:var(--z-color-warning-strong)}.pd-edit__warn[hidden]{display:none}.pd-edit__tip{font-family:var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);color:var(--z-color-text)}.pd-edit__hint{margin-left:auto}.pd-pane{min-width:0;border:1px solid var(--z-color-border);border-radius:var(--z-radius-md, 8px);background:var(--z-color-bg);overflow:hidden}.pd-pane__head{display:flex;align-items:baseline;gap:var(--z-space-2, 8px);padding:8px 12px;border-bottom:1px solid var(--z-color-border);background:var(--z-color-bg-secondary)}.pd-pane__head h2{margin:0;font-size:var(--z-font-size-sm, 13px);font-weight:var(--z-font-weight-semibold, 600)}.pd-pane__meta{margin-left:auto;font-size:var(--z-font-size-xs, 12px);color:var(--z-color-text-secondary);white-space:nowrap}.pd-code{margin:0;padding:12px 0;scrollbar-width:thin;max-height:620px;overflow:auto;font-family:var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12px;line-height:1.7;color:var(--z-color-text);-moz-tab-size:2;tab-size:2}.pd-code::-webkit-scrollbar{width:10px;height:10px}.pd-code::-webkit-scrollbar-thumb{background:var(--z-color-border);border-radius:var(--z-radius-sm);border:2px solid transparent;background-clip:content-box}.pd-code--json{max-height:480px;padding:12px;white-space:pre}.pd-preview{padding:var(--z-space-3, 12px);background:var(--z-color-canvas);min-height:360px}.pd-ast{margin-top:var(--z-space-4, 16px)}.pd-ast .pd-pane__head{border:1px solid var(--z-color-border);border-bottom:0;border-radius:var(--z-radius-md, 8px) var(--z-radius-md, 8px) 0 0}.pd-ast .pd-code--json{border:1px solid var(--z-color-border);border-radius:0 0 var(--z-radius-md, 8px) var(--z-radius-md, 8px);background:var(--z-color-bg)}.pd-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--z-space-3, 12px);margin-top:var(--z-space-5, 20px)}.pd-note{padding:var(--z-space-3, 12px);border:1px solid var(--z-color-border);border-radius:var(--z-radius-md, 8px);background:var(--z-color-bg)}.pd-note h3{margin:0 0 6px;font-size:var(--z-font-size-sm, 13px);font-weight:var(--z-font-weight-semibold, 600)}.pd-note p{margin:0;font-size:var(--z-font-size-xs, 12px);line-height:1.65;color:var(--z-color-text-secondary)}.pd-pane__meta{display:flex;align-items:center;gap:8px}.pd-lint{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:var(--z-radius-full, 999px);font-size:var(--z-font-size-xs, 12px);font-weight:var(--z-font-weight-medium, 500);line-height:18px}.pd-lint-wrap{display:inline-flex;align-items:center;gap:6px}.pd-lint-label{font-size:var(--z-font-size-xs, 12px);color:var(--z-color-text-secondary)}.pd-lint--ok{color:var(--z-color-success-strong, #15803d);background:var(--z-color-success-soft, #f0fdf4)}.pd-lint--error{color:var(--z-color-danger-strong, #b91c1c);background:var(--z-color-danger-soft, #fef2f2)}.pd-lint-list{margin:0;padding:8px 14px 10px;list-style:none;border-top:1px solid var(--z-color-divider);max-height:180px;overflow:auto;font-family:var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:var(--z-font-size-xs, 12px);background:var(--z-color-danger-soft, #fef2f2);color:var(--z-color-danger-strong, #b91c1c)}.pd-lint-list li{padding:2px 0;white-space:pre-wrap}.pd-console{margin-top:var(--z-space-4, 16px);border:1px solid var(--z-color-border);border-radius:var(--z-radius-md, 8px);background:var(--z-color-bg);overflow:hidden}.pd-console__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--z-space-2, 8px);padding:8px 12px;border-bottom:1px solid var(--z-color-border);background:var(--z-color-bg-secondary)}.pd-console__head h2{margin:0;font-size:var(--z-font-size-sm, 13px);font-weight:var(--z-font-weight-semibold, 600)}.pd-console__count{min-width:18px;padding:0 6px;border-radius:var(--z-radius-full, 999px);background:var(--z-color-primary-soft);color:var(--z-color-primary-strong, var(--z-color-primary));font-size:11px;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}.pd-console__hint{font-size:var(--z-font-size-xs, 12px);color:var(--z-color-text-secondary)}#pd-console-clear{margin-left:auto}.pd-console__list{margin:0;padding:6px 0;list-style:none;max-height:220px;overflow:auto;font-family:var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:var(--z-font-size-xs, 12px);line-height:1.7}.pd-console__list:empty:after{content:"—";display:block;padding:0 12px;color:var(--z-color-text-secondary)}.pd-console__row{display:grid;grid-template-columns:62px 132px minmax(0,1fr);gap:10px;align-items:baseline;padding:2px 12px}.pd-console__row:nth-child(odd){background:var(--z-color-bg-secondary)}.pd-console__time{color:var(--z-color-text-secondary);font-variant-numeric:tabular-nums}.pd-console__chan{color:var(--z-color-primary-strong, var(--z-color-primary))}.pd-console__body{color:var(--z-color-text);overflow-wrap:anywhere}