@font-face {
  font-family: "PoemUI JetBrains Mono";
  src: url("./assets/fonts/JetBrainsMono-Regular-v2.304.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #f0f1f3;
  --page-strong: #fbfbfc;
  --surface: rgba(255, 255, 255, 0.68);
  --surface-strong: rgba(255, 255, 255, 0.86);
  --surface-soft: rgba(255, 255, 255, 0.46);
  --surface-solid: #ffffff;
  --pui-glass-tint: rgba(255, 255, 255, 0.72);
  --pui-scroll-area-gradient-overlay-material-color: rgba(255, 255, 255, 0.32);
  --pui-scroll-area-gradient-overlay-color-context: var(--surface-solid);
  --text: #1f2025;
  --muted: #565a63;
  --subtle: #8f8f96;
  --border: rgba(17, 18, 23, 0.14);
  --glass-border: rgba(255, 255, 255, 0.7);
  --highlight: rgba(255, 255, 255, 0.78);
  --brand: #111217;
  --brand-2: #3b3c42;
  --brand-soft: rgba(17, 18, 23, 0.08);
  --pui-bg-inverse: #242424;
  --pui-text-on-inverse: #ffffff;
  --danger: #d54941;
  --danger-soft: rgba(213, 73, 65, 0.13);
  --success: #2ba471;
  --success-soft: rgba(43, 164, 113, 0.13);
  --warning: #e37318;
  --warning-soft: rgba(227, 115, 24, 0.14);
  --info: #0052d9;
  --info-soft: rgba(0, 82, 217, 0.12);
  --pui-chart-accent-neutral: #71717a;
  --pui-chart-accent-violet: #7c3aed;
  --pui-chart-accent-blue: #2563eb;
  --pui-chart-accent-teal: #0d9488;
  --pui-chart-accent-pink: #db2777;
  --pui-chart-accent-amber: #d97706;
  --pui-chart-gradient-neutral: linear-gradient(90deg, rgba(113, 113, 122, .28), rgba(113, 113, 122, .66) 52%, #71717a 100%);
  --pui-chart-gradient-violet: linear-gradient(90deg, rgba(124, 58, 237, .28), rgba(124, 58, 237, .66) 52%, #7c3aed 100%);
  --pui-chart-gradient-blue: linear-gradient(90deg, rgba(37, 99, 235, .28), rgba(37, 99, 235, .66) 52%, #2563eb 100%);
  --pui-chart-gradient-teal: linear-gradient(90deg, rgba(13, 148, 136, .28), rgba(13, 148, 136, .66) 52%, #0d9488 100%);
  --pui-chart-gradient-pink: linear-gradient(90deg, rgba(219, 39, 119, .28), rgba(219, 39, 119, .66) 52%, #db2777 100%);
  --pui-chart-gradient-amber: linear-gradient(90deg, rgba(217, 119, 6, .28), rgba(217, 119, 6, .66) 52%, #d97706 100%);
  --pui-chart-gradient-vertical-neutral: linear-gradient(0deg, rgba(113, 113, 122, .28), rgba(113, 113, 122, .66) 52%, #71717a 100%);
  --pui-chart-gradient-vertical-violet: linear-gradient(0deg, rgba(124, 58, 237, .28), rgba(124, 58, 237, .66) 52%, #7c3aed 100%);
  --pui-chart-gradient-vertical-blue: linear-gradient(0deg, rgba(37, 99, 235, .28), rgba(37, 99, 235, .66) 52%, #2563eb 100%);
  --pui-chart-gradient-vertical-teal: linear-gradient(0deg, rgba(13, 148, 136, .28), rgba(13, 148, 136, .66) 52%, #0d9488 100%);
  --pui-chart-gradient-vertical-pink: linear-gradient(0deg, rgba(219, 39, 119, .28), rgba(219, 39, 119, .66) 52%, #db2777 100%);
  --pui-chart-gradient-vertical-amber: linear-gradient(0deg, rgba(217, 119, 6, .28), rgba(217, 119, 6, .66) 52%, #d97706 100%);
  --pui-chart-cell-gradient-neutral: linear-gradient(145deg, #71717a 0%, rgba(113, 113, 122, .58) 100%);
  --pui-chart-cell-gradient-violet: linear-gradient(145deg, #7c3aed 0%, rgba(124, 58, 237, .58) 100%);
  --pui-chart-cell-gradient-blue: linear-gradient(145deg, #2563eb 0%, rgba(37, 99, 235, .58) 100%);
  --pui-chart-cell-gradient-teal: linear-gradient(145deg, #0d9488 0%, rgba(13, 148, 136, .58) 100%);
  --pui-chart-cell-gradient-pink: linear-gradient(145deg, #db2777 0%, rgba(219, 39, 119, .58) 100%);
  --pui-chart-cell-gradient-amber: linear-gradient(145deg, #d97706 0%, rgba(217, 119, 6, .58) 100%);
  --pui-chart-area-fill-start: .42;
  --pui-chart-area-fill-end: .04;
  --pui-chart-fade-outline: rgba(24, 24, 27, .12);
  --pui-chart-grid-line: rgba(24, 24, 27, .07);
  --pui-chart-track: rgba(113, 113, 122, .12);
  --pui-chart-cell-radius: var(--pui-preview-radius-step-4);
  --shadow: 0 24px 70px rgba(17, 18, 23, 0.14), inset 0 1px 0 var(--highlight);
  --shadow-soft: 0 12px 34px rgba(17, 18, 23, 0.1), inset 0 1px 0 var(--highlight);
  --shadow-floating: var(--shadow);
  --shadow-edge-top: 0 12px 30px rgba(17, 18, 23, 0.12);
  --shadow-edge-bottom: 0 -12px 30px rgba(17, 18, 23, 0.12);
  --shadow-edge-left: 12px 0 30px rgba(17, 18, 23, 0.12);
  --shadow-edge-right: -12px 0 30px rgba(17, 18, 23, 0.12);
  --pui-tabbar-split-color: color-mix(in srgb, var(--text) 10%, transparent);
  --pui-tabbar-content-height: 56px;
  --blur: blur(24px) saturate(180%);
  --pui-overlay-blur: blur(10px);
  --pui-popup-overlay-blur: blur(10px);
  --pui-site-radius-control: var(--pui-preview-radius-step-22);
  --pui-site-radius-surface: var(--pui-preview-radius-step-30);
  --pui-site-radius-popup: var(--pui-preview-radius-step-42);
  --pui-duration-fast: 500ms;
  --pui-duration-normal: 500ms;
  --pui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: var(--pui-ease-standard);
  /* Exact H5 mirror of the 2rpx PUI layout grid. */
  --pui-preview-space-step-1: 1px;
  --pui-preview-space-step-2: 2px;
  --pui-preview-space-step-3: 3px;
  --pui-preview-space-step-4: 4px;
  --pui-preview-space-step-5: 5px;
  --pui-preview-space-step-6: 6px;
  --pui-preview-space-step-7: 7px;
  --pui-preview-space-step-8: 8px;
  --pui-preview-space-step-9: 9px;
  --pui-preview-space-step-10: 10px;
  --pui-preview-space-step-11: 11px;
  --pui-preview-space-step-12: 12px;
  --pui-preview-space-step-13: 13px;
  --pui-preview-space-step-14: 14px;
  --pui-preview-space-step-15: 15px;
  --pui-preview-space-step-16: 16px;
  --pui-preview-space-step-17: 17px;
  --pui-preview-space-step-18: 18px;
  --pui-preview-space-step-19: 19px;
  --pui-preview-space-step-20: 20px;
  --pui-preview-space-step-21: 21px;
  --pui-preview-space-step-22: 22px;
  --pui-preview-space-step-23: 23px;
  --pui-preview-space-step-24: 24px;
  --pui-preview-space-step-25: 25px;
  --pui-preview-space-step-26: 26px;
  --pui-preview-space-step-27: 27px;
  --pui-preview-space-step-28: 28px;
  --pui-preview-space-step-29: 29px;
  --pui-preview-space-step-30: 30px;
  --pui-preview-space-step-31: 31px;
  --pui-preview-space-step-32: 32px;
  --pui-scroll-area-gradient-overlay-size-sm: var(--pui-preview-space-step-20);
  --pui-scroll-area-gradient-overlay-size-md: var(--pui-preview-space-step-32);
  --pui-scroll-area-gradient-overlay-size-lg: var(--pui-preview-space-step-44);
  --pui-scroll-area-gradient-overlay-size: var(--pui-scroll-area-gradient-overlay-size-md);
  --pui-preview-space-step-33: 33px;
  --pui-preview-space-step-34: 34px;
  --pui-preview-space-step-35: 35px;
  --pui-preview-space-step-36: 36px;
  --pui-preview-space-step-42: 42px;
  --pui-preview-space-step-44: 44px;
  --pui-preview-space-step-64: 64px;
  --pui-preview-space-step-240: 240px;
  --pui-preview-space-xxs: var(--pui-preview-space-step-2);
  --pui-preview-space-xs: var(--pui-preview-space-step-4);
  --pui-preview-space-sm: var(--pui-preview-space-step-6);
  --pui-preview-space: var(--pui-preview-space-step-10);
  --pui-preview-space-normal: var(--pui-preview-space);
  --pui-preview-space-md: var(--pui-preview-space-step-8);
  --pui-preview-space-lg: var(--pui-preview-space-step-14);
  --pui-preview-space-xl: var(--pui-preview-space-step-20);
  --pui-preview-space-xxl: var(--pui-preview-space-step-28);
  --pui-preview-space-3xl: var(--pui-preview-space-step-36);
  --pui-section-gap: var(--pui-preview-space-step-18);
  --pui-preview-content-gap: var(--pui-preview-space-step-8);
  --pui-preview-panel-padding-compact: var(--pui-preview-space-step-10);
  --pui-preview-panel-padding: var(--pui-preview-space-step-14);
  --pui-preview-panel-padding-spacious: var(--pui-preview-space-step-18);
  --pui-preview-section-gap: var(--pui-preview-panel-padding-spacious);
  --pui-surface-inset: var(--pui-preview-panel-padding);
  --pui-surface-stack-gap: var(--pui-preview-content-gap);
  --pui-surface-section-gap: var(--pui-preview-section-gap);
  --pui-surface-section-gap: var(--pui-preview-section-gap);
  --pui-preview-device-padding: var(--pui-preview-panel-padding);
  --pui-preview-shadow-bleed: var(--pui-preview-panel-padding);
  --pui-preview-component-layout-padding: calc(var(--pui-preview-device-padding) + var(--pui-preview-shadow-bleed));
  --pui-site-page-gutter: var(--pui-preview-space-step-32);
  --pui-site-mobile-catalog-max-height: 360px;
  --pui-site-mobile-catalog-search-height: 46px;
  --pui-site-page-gutter-mobile: var(--pui-preview-space-step-12);
  --pui-site-toolbar-padding-block-start: var(--pui-preview-space-step-12);
  --pui-site-toolbar-padding-block-end: var(--pui-preview-space-step-12);
  --pui-site-toolbar-padding-block-start-mobile: var(--pui-preview-space-step-10);
  --pui-site-toolbar-padding-block-end-mobile: var(--pui-preview-space-step-10);
  --pui-site-toolbar-title-gap: var(--pui-preview-space-xxs);
  --pui-site-toolbar-column-gap: var(--pui-preview-space-xl);
  --pui-site-stage-padding-block-start: var(--pui-preview-space-xxl);
  --pui-site-stage-padding-block-end: var(--pui-preview-space-step-64);
  --pui-site-stage-padding-block-end-mobile: var(--pui-site-page-gutter);
  /* Exact H5 mirror of the public PUI typography contract. */
  --pui-font-family-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --pui-font-family-mono: "PoemUI JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --pui-font-family-icon: "PoemUI Roundline";
  --pui-font-size-caption: 12px;
  --pui-font-size-mini: var(--pui-font-size-caption);
  --pui-font-size-label: 13px;
  --pui-font-size-body-small: 13px;
  --pui-font-size-body-medium: 14px;
  --pui-font-size-body-large: 16px;
  --pui-font-size-title-small: 16px;
  --pui-font-size-title-medium: 18px;
  --pui-font-size-title-large: 20px;
  --pui-font-size-headline: 24px;
  --pui-font-size-display: 32px;
  --pui-line-height-caption: 17px;
  --pui-line-height-mini: var(--pui-line-height-caption);
  --pui-line-height-label: 18px;
  --pui-line-height-body-small: 19px;
  --pui-line-height-body-medium: 20px;
  --pui-line-height-body-large: 23px;
  --pui-line-height-title-small: 23px;
  --pui-line-height-title-medium: 25px;
  --pui-line-height-title-large: 28px;
  --pui-line-height-headline: 32px;
  --pui-line-height-display: 40px;
  --pui-line-height-none: 1;
  --pui-line-height-tight: 1.25;
  --pui-line-height-normal: 1.5;
  --pui-line-height-relaxed: 1.75;
  --pui-font-weight-regular: 400;
  --pui-font-weight-medium: 500;
  --pui-font-weight-semibold: 600;
  --pui-font-weight-bold: 700;
  --pui-font-weight-heavy: 800;
  --pui-letter-spacing-tight: -0.02em;
  --pui-letter-spacing-normal: 0;
  --pui-letter-spacing-wide: 0.04em;
  /* Site and component geometry are named separately from the spacing scale. */
  --pui-preview-device-height: 622px;
  --pui-preview-device-width-default: 393px;
  --pui-preview-device-scrollbar-size: var(--pui-preview-space-step-6);
  --pui-preview-device-scrollbar-color: color-mix(in srgb, var(--text) 34%, transparent);
  --pui-preview-tabs-row-height: 40px;
  --pui-preview-actions-row-height: var(--pui-preview-space-step-36);
  --pui-preview-popup-close-reserve: var(--pui-preview-actions-row-height);
  --pui-preview-actions-group-width: calc((var(--pui-preview-actions-row-height) * 3) + (var(--pui-preview-content-gap) * 2));
  --pui-site-preview-utility-toolbar-height: calc(var(--pui-preview-actions-row-height) + var(--pui-preview-content-gap));
  --pui-site-preview-utility-toolbar-height-mobile: calc((var(--pui-preview-actions-row-height) * 2) + (var(--pui-preview-content-gap) * 2));
  --pui-site-preview-device-control-width: 180px;
  --pui-preview-prop-json-height: 120px;
  --pui-site-toolbar-offset: 56px;
  --pui-site-topbar-height: 57px;
  --pui-site-toolbar-offset-mobile: 96px;
  --pui-site-icon-toolbar-offset: 138px;
  --pui-site-icon-search-height: 40px;
  --pui-site-icon-scale-item-height: 40px;
  --pui-site-appearance-menu-width: 264px;
  --pui-site-appearance-menu-z-index: 40;
  --pui-popover-preview-anchor-distance: 58px;
  --pui-navigation-menu-preview-mask-top: 58px;
  --pui-navigation-menu-preview-mask-bottom: 400px;
  --pui-preview-radius-step-1: 1px;
  --pui-preview-radius-step-2: 2px;
  --pui-preview-radius-step-4: 4px;
  --pui-preview-radius-step-5: 5px;
  --pui-preview-radius-step-6: 6px;
  --pui-preview-radius-step-7: 7px;
  --pui-preview-radius-step-8: 8px;
  --pui-preview-radius-step-9: 9px;
  --pui-preview-radius-step-10: 10px;
  --pui-preview-radius-step-11: 11px;
  --pui-preview-radius-step-12: 12px;
  --pui-preview-radius-step-13: 13px;
  --pui-preview-radius-step-14: 14px;
  --pui-preview-radius-step-15: 15px;
  --pui-preview-radius-step-16: 16px;
  --pui-preview-radius-step-18: 18px;
  --pui-preview-radius-step-20: 20px;
  --pui-preview-radius-step-22: 22px;
  --pui-preview-radius-step-24: 24px;
  --pui-preview-radius-step-26: 26px;
  --pui-preview-radius-step-28: 28px;
  --pui-preview-radius-step-30: 30px;
  --pui-preview-radius-step-32: 32px;
  --pui-preview-radius-step-34: 34px;
  --pui-preview-radius-step-42: 42px;
  --pui-preview-radius-step-99: 99px;
  --pui-preview-radius-small: var(--pui-preview-radius-step-6);
  --pui-preview-radius-medium: var(--pui-preview-radius-step-8);
  --pui-preview-radius-large: var(--pui-preview-radius-step-12);
  --pui-preview-radius-xlarge: var(--pui-preview-radius-step-16);
  --pui-preview-radius-xxlarge: var(--pui-preview-radius-step-20);
  --pui-preview-radius-round: 999px;
  --pui-navbar-preview-capsule-width: 88px;
  --pui-navbar-preview-capsule-height: 32px;
  --pui-navbar-preview-capsule-inset-right: var(--pui-preview-space-step-7);
  --pui-navbar-preview-capsule-mirror-left: var(--pui-navbar-preview-capsule-inset-right);
  --pui-navbar-preview-capsule-reserve: calc(var(--pui-navbar-preview-capsule-width) + var(--pui-navbar-preview-capsule-inset-right));
  --pui-navbar-preview-content-height: calc(var(--pui-preview-space-step-24) * 2);
  --pui-navbar-preview-action-width: calc(var(--pui-preview-space-step-28) * 2);
  --pui-navbar-preview-capsule-top: var(--pui-preview-space-step-8);
  --pui-navbar-preview-capsule-divider-height: var(--pui-preview-space-step-16);
  --pui-navbar-preview-capsule-dot-size: var(--pui-preview-space-step-4);
  --pui-navbar-preview-capsule-control-size: var(--pui-preview-space-step-16);
  --pui-navbar-preview-capsule-border-width: var(--pui-preview-space-step-1);
  --pui-preview-doc-title-size: var(--pui-font-size-title-large);
  --pui-preview-doc-title-line-height: var(--pui-line-height-title-large);
  --pui-preview-doc-body-size: var(--pui-font-size-body-small);
  --pui-preview-doc-body-line-height: var(--pui-line-height-body-medium);
  --pui-preview-doc-section-size: var(--pui-font-size-body-medium);
  --pui-preview-doc-section-line-height: var(--pui-line-height-body-medium);
  --pui-preview-doc-meta-size: var(--pui-font-size-caption);
  --pui-preview-doc-meta-line-height: var(--pui-line-height-caption);
  font-family: var(--pui-font-family-sans);
}

/* shadcn-aligned documentation baseline: neutral, compact, and effect-free by default. */
:root {
  color-scheme: light;
  --page: #ffffff;
  --page-strong: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #f4f4f5;
  --surface-solid: #ffffff;
  --text: #18181b;
  --muted: #52525b;
  --subtle: #a1a1aa;
  --border: #e4e4e7;
  --glass-border: #e4e4e7;
  --highlight: transparent;
  --brand: #18181b;
  --brand-2: #27272a;
  --brand-soft: #f4f4f5;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --pui-alert-default-tinted-fg: #3f3f46;
  --pui-alert-default-tinted-secondary: #52525b;
  --pui-alert-info-tinted-fg: #1d4ed8;
  --pui-alert-info-tinted-secondary: #1e40af;
  --pui-alert-success-tinted-fg: #15803d;
  --pui-alert-success-tinted-secondary: #166534;
  --pui-alert-warning-tinted-fg: #92400e;
  --pui-alert-warning-tinted-secondary: #78350f;
  --pui-alert-danger-tinted-fg: #b91c1c;
  --pui-alert-danger-tinted-secondary: #991b1b;
  --shadow: none;
  --shadow-soft: none;
  --blur: none;
  --pui-site-radius-control: var(--pui-preview-radius-small);
  --pui-site-radius-surface: var(--pui-preview-radius-medium);
  --pui-site-radius-popup: var(--pui-preview-radius-large);
}

body,
.app-shell {
  background: var(--page);
}

.app-shell {
  background-image: none;
}

.app-shell[data-theme="dark"] {
  --page: #09090b;
  --page-strong: #09090b;
  --surface: #09090b;
  --surface-strong: #09090b;
  --surface-soft: #18181b;
  --surface-solid: #18181b;
  --pui-glass-tint: rgba(24, 24, 27, 0.72);
  --pui-scroll-area-gradient-overlay-material-color: rgba(24, 24, 27, 0.32);
  --pui-scroll-area-gradient-overlay-color-context: var(--surface-solid);
  --text: #fafafa;
  --muted: #d4d4d8;
  --subtle: #71717a;
  --border: #27272a;
  --glass-border: #27272a;
  --highlight: transparent;
  --brand: #fafafa;
  --brand-2: #e4e4e7;
  --brand-soft: #27272a;
  --pui-bg-inverse: #242424;
  --pui-text-on-inverse: #ffffff;
  --danger: #f87171;
  --danger-soft: #381919;
  --success: #4ade80;
  --success-soft: #14301e;
  --warning: #fbbf24;
  --warning-soft: #34270d;
  --info: #60a5fa;
  --info-soft: #172554;
  --pui-chart-accent-neutral: #a1a1aa;
  --pui-chart-accent-violet: #a78bfa;
  --pui-chart-accent-blue: #60a5fa;
  --pui-chart-accent-teal: #2dd4bf;
  --pui-chart-accent-pink: #f472b6;
  --pui-chart-accent-amber: #fbbf24;
  --pui-chart-gradient-neutral: linear-gradient(90deg, rgba(161, 161, 170, .28), rgba(161, 161, 170, .66) 52%, #a1a1aa 100%);
  --pui-chart-gradient-violet: linear-gradient(90deg, rgba(167, 139, 250, .28), rgba(167, 139, 250, .66) 52%, #a78bfa 100%);
  --pui-chart-gradient-blue: linear-gradient(90deg, rgba(96, 165, 250, .28), rgba(96, 165, 250, .66) 52%, #60a5fa 100%);
  --pui-chart-gradient-teal: linear-gradient(90deg, rgba(45, 212, 191, .28), rgba(45, 212, 191, .66) 52%, #2dd4bf 100%);
  --pui-chart-gradient-pink: linear-gradient(90deg, rgba(244, 114, 182, .28), rgba(244, 114, 182, .66) 52%, #f472b6 100%);
  --pui-chart-gradient-amber: linear-gradient(90deg, rgba(251, 191, 36, .28), rgba(251, 191, 36, .66) 52%, #fbbf24 100%);
  --pui-chart-gradient-vertical-neutral: linear-gradient(0deg, rgba(161, 161, 170, .28), rgba(161, 161, 170, .66) 52%, #a1a1aa 100%);
  --pui-chart-gradient-vertical-violet: linear-gradient(0deg, rgba(167, 139, 250, .28), rgba(167, 139, 250, .66) 52%, #a78bfa 100%);
  --pui-chart-gradient-vertical-blue: linear-gradient(0deg, rgba(96, 165, 250, .28), rgba(96, 165, 250, .66) 52%, #60a5fa 100%);
  --pui-chart-gradient-vertical-teal: linear-gradient(0deg, rgba(45, 212, 191, .28), rgba(45, 212, 191, .66) 52%, #2dd4bf 100%);
  --pui-chart-gradient-vertical-pink: linear-gradient(0deg, rgba(244, 114, 182, .28), rgba(244, 114, 182, .66) 52%, #f472b6 100%);
  --pui-chart-gradient-vertical-amber: linear-gradient(0deg, rgba(251, 191, 36, .28), rgba(251, 191, 36, .66) 52%, #fbbf24 100%);
  --pui-chart-cell-gradient-neutral: linear-gradient(145deg, #a1a1aa 0%, rgba(161, 161, 170, .58) 100%);
  --pui-chart-cell-gradient-violet: linear-gradient(145deg, #a78bfa 0%, rgba(167, 139, 250, .58) 100%);
  --pui-chart-cell-gradient-blue: linear-gradient(145deg, #60a5fa 0%, rgba(96, 165, 250, .58) 100%);
  --pui-chart-cell-gradient-teal: linear-gradient(145deg, #2dd4bf 0%, rgba(45, 212, 191, .58) 100%);
  --pui-chart-cell-gradient-pink: linear-gradient(145deg, #f472b6 0%, rgba(244, 114, 182, .58) 100%);
  --pui-chart-cell-gradient-amber: linear-gradient(145deg, #fbbf24 0%, rgba(251, 191, 36, .58) 100%);
  --pui-chart-area-fill-start: .42;
  --pui-chart-area-fill-end: .04;
  --pui-chart-fade-outline: rgba(250, 250, 250, .18);
  --pui-chart-grid-line: rgba(250, 250, 250, .1);
  --pui-chart-track: rgba(161, 161, 170, .16);
  --pui-alert-default-tinted-fg: #f4f4f5;
  --pui-alert-default-tinted-secondary: #d4d4d8;
  --pui-alert-info-tinted-fg: #bfdbfe;
  --pui-alert-info-tinted-secondary: #93c5fd;
  --pui-alert-success-tinted-fg: #bbf7d0;
  --pui-alert-success-tinted-secondary: #86efac;
  --pui-alert-warning-tinted-fg: #fde68a;
  --pui-alert-warning-tinted-secondary: #fcd34d;
  --pui-alert-danger-tinted-fg: #fecaca;
  --pui-alert-danger-tinted-secondary: #fca5a5;
  background-image: none;
}

.app-shell[data-frost="on"] {
  --surface: rgba(255, 255, 255, 0.78);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --pui-scroll-area-gradient-overlay-color-context: var(--pui-scroll-area-gradient-overlay-material-color);
  --blur: blur(18px) saturate(140%);
}

.app-shell[data-theme="dark"][data-frost="on"] {
  --surface: rgba(9, 9, 11, 0.76);
  --surface-strong: rgba(9, 9, 11, 0.9);
  --pui-scroll-area-gradient-overlay-color-context: var(--pui-scroll-area-gradient-overlay-material-color);
}

.app-shell[data-shadow="on"] {
  --shadow: 0 12px 28px rgba(24, 24, 27, 0.12);
  --shadow-soft: 0 4px 14px rgba(24, 24, 27, 0.08);
}

.app-shell[data-theme="dark"][data-shadow="on"] {
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.24);
}

.app-shell[data-radius="large"] {
  --pui-preview-radius-small: var(--pui-preview-radius-step-9);
  --pui-preview-radius-medium: var(--pui-preview-radius-step-14);
  --pui-preview-radius-large: var(--pui-preview-radius-step-20);
  --pui-preview-radius-xlarge: var(--pui-preview-radius-step-24);
  --pui-preview-radius-xxlarge: var(--pui-preview-radius-step-28);
  --pui-site-radius-control: var(--pui-preview-radius-step-14);
  --pui-site-radius-surface: var(--pui-preview-radius-step-18);
  --pui-site-radius-popup: var(--pui-preview-radius-step-24);
  --pui-chart-cell-radius: var(--pui-preview-radius-step-6);
}

.app-shell[data-spacing="equal"] {
  --pui-surface-stack-gap: var(--pui-surface-inset);
  --pui-surface-section-gap: var(--pui-surface-inset);
}

.topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 56px;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-xl);
  gap: var(--pui-preview-space-step-22);
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.brand__mark {
  width: 28px;
  height: 28px;
  background: var(--brand);
  border: 0;
  border-radius: var(--pui-preview-radius-small);
  box-shadow: none;
}

.brand__name {
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-body-medium);
}

.brand__sub {
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
  line-height: var(--pui-line-height-caption);
}

.brand__version,
.status {
  height: 22px;
  padding: 0 var(--pui-preview-space-step-7);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
}

.topbar__nav {
  justify-content: flex-start;
  gap: var(--pui-preview-panel-padding-spacious);
}

.topbar__link {
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-medium);
}

.topbar__link.is-active::after {
  bottom: calc(0px - var(--pui-preview-panel-padding-spacious));
  height: 1px;
  background: var(--brand);
  border-radius: 0;
}

.topbar__controls {
  gap: var(--pui-preview-space-sm);
}

.theme-toggle,
.visual-toggle,
.icon-button,
.mini-action,
.tab,
.device-select {
  border: 1px solid var(--border);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.theme-toggle,
.visual-toggle {
  height: 30px;
  padding: 0 var(--pui-preview-content-gap);
  gap: var(--pui-preview-space-sm);
  background: var(--surface);
  border-radius: var(--pui-site-radius-control);
}

.visual-toggle {
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.visual-toggle__dot {
  width: 7px;
  height: 7px;
  background: var(--subtle);
}

.visual-toggle.is-active .visual-toggle__dot {
  background: var(--brand);
  box-shadow: none;
}

.theme-toggle__track {
  width: 30px;
  height: 18px;
  background: var(--brand);
}

.theme-toggle__thumb {
  top: var(--pui-preview-space-step-3);
  left: var(--pui-preview-space-lg);
  width: 12px;
  height: 12px;
}

.app-shell[data-theme="dark"] .theme-toggle__thumb {
  left: var(--pui-preview-space-xs);
}

.workspace {
  grid-template-columns: 244px minmax(0, 1fr) 328px;
  min-height: calc(100vh - 56px);
}

.sidebar,
.inspector {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.sidebar {
  padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12) var(--pui-preview-space-xxl);
  border-right: 1px solid var(--border);
}

.inspector {
  padding: var(--pui-preview-space-step-22) var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-xxl);
  border-left: 1px solid var(--border);
}

.search {
  height: 34px;
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: var(--pui-site-radius-control);
}

.search:focus-within {
  border-color: var(--border);
  box-shadow: none;
}

.component-group {
  margin: 0 0 var(--pui-preview-panel-padding-spacious);
}

.component-group__title {
  margin: 0 var(--pui-preview-content-gap) var(--pui-preview-space-sm);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  letter-spacing: 0;
}

.component-item {
  min-height: 32px;
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--pui-site-radius-control);
}

.component-item:hover,
.component-item.is-active {
  color: var(--text);
  background: var(--surface-soft);
  box-shadow: none;
}

.status-dot {
  padding: 0;
  font-size: var(--pui-font-size-caption);
  background: transparent;
  border: 0;
}

.main {
  background: var(--page);
}

.preview-toolbar {
  position: sticky;
  top: var(--pui-site-toolbar-offset);
  z-index: 10;
  padding: var(--pui-preview-space-step-24) var(--pui-preview-space-step-32) var(--pui-preview-space-step-16);
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.preview-kicker,
.inspector__category {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
}

.preview-toolbar h1,
.inspector h2 {
  color: var(--text);
  font-weight: var(--pui-font-weight-bold);
  letter-spacing: 0;
}

.preview-toolbar h1 {
  margin-top: var(--pui-preview-space-xs);
  font-size: var(--pui-font-size-headline);
  line-height: var(--pui-line-height-headline);
}

.tabs {
  gap: var(--pui-preview-space-xxs);
  padding: var(--pui-preview-space-xxs);
  background: var(--surface-soft);
  border: 0;
  border-radius: var(--pui-site-radius-control);
}

.tab {
  height: 30px;
  padding: 0 var(--pui-preview-space-normal);
  background: transparent;
  border: 0;
  border-radius: calc(var(--pui-site-radius-control) - var(--pui-preview-radius-step-2));
}

.tab.is-active {
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: none;
}

.device-select,
.icon-button {
  height: 32px;
  background: var(--surface);
  border-radius: var(--pui-site-radius-control);
}

.preview-stage {
  min-height: calc(100vh - 154px);
  padding: var(--pui-preview-space-step-32);
  background: var(--page);
}

.phone {
  width: min(100%, 393px);
  min-height: 680px;
  padding: var(--pui-preview-space-step-16);
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-popup);
  box-shadow: var(--shadow);
}

.phone__status {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

.phone__title {
  padding: var(--pui-preview-space-step-16) 0;
  color: var(--text);
  font-size: var(--pui-font-size-title-medium);
  font-weight: var(--pui-font-weight-bold);
  border-bottom: 1px solid var(--border);
}

.phone__content {
  min-height: 560px;
  padding-top: var(--pui-preview-space-step-16);
}

.spec-sheet {
  width: min(100%, 720px);
  margin: var(--pui-preview-space-xxl) auto 0;
}

.spec-sheet__head,
.state-grid,
.code-stage,
.icon-library__hero {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.spec-sheet__head {
  padding: 0 0 var(--pui-preview-space-step-16);
  border-bottom: 1px solid var(--border);
}

.state-grid {
  gap: var(--pui-preview-space-step-12);
  padding: var(--pui-preview-space-step-16) 0 0;
}

.state-grid > div,
.meta-grid > div,
.compat-item,
.prop-control {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: none;
}

.inspector__header {
  padding-bottom: var(--pui-preview-panel-padding-spacious);
  border-bottom: 1px solid var(--border);
}

.inspector__header p,
.inspector__header h2,
.inspector__header > div > p {
  letter-spacing: 0;
}

.meta-grid {
  margin: var(--pui-preview-panel-padding-spacious) 0;
}

.meta-grid div,
.state-grid div {
  padding: var(--pui-preview-space-normal);
}

.panel {
  margin-top: var(--pui-preview-panel-padding-spacious);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.panel__title {
  padding: 0 0 var(--pui-preview-content-gap);
  border-bottom: 0;
}

.prop-control {
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-normal);
}

.prop-control input,
.prop-control select,
.prop-control textarea {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: calc(var(--pui-site-radius-control) - var(--pui-preview-radius-step-2));
  box-shadow: none;
}

.code {
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: none;
}

.pui-button,
.pui-cell,
.pui-field,
.pui-dialog,
.pui-empty,
.pui-result,
.pui-grid,
.pui-image,
.badge-host,
.pui-popup-preview,
.overlay-panel {
  border-radius: var(--pui-site-radius-surface);
  box-shadow: none;
}

.pui-button--primary,
.pui-button--success,
.pui-button--warning,
.pui-button--danger {
  background-image: none;
}

.pui-button--primary {
  color: #fafafa;
  background: #18181b;
}

.app-shell[data-theme="dark"] .pui-button--primary {
  color: #18181b;
  background: #fafafa;
}

.pui-cell,
.pui-field,
.pui-dialog,
.pui-empty,
.pui-result,
.pui-grid,
.pui-image,
.pui-popup-preview,
.overlay-panel {
  background: var(--surface-solid);
  border: 1px solid var(--border);
}

.pui-tag,
.pui-badge,
.pui-avatar,
.pui-switch,
.pui-rate button.is-active {
  box-shadow: none;
}

.demo-note {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-label);
}

.pui-alert-demo,
.card-demo,
.field-demo,
.label-demo,
.select-demo,
.button-group-demo,
.native-overlay-demo > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur);
}

.pui-alert-demo {
  display: flex;
  justify-content: space-between;
  gap: var(--pui-preview-space-step-12);
  padding: var(--pui-preview-space-lg);
}

.pui-alert-demo > div,
.card-demo header,
.field-demo,
.label-demo {
  display: grid;
  gap: var(--pui-preview-space-step-5);
}

.pui-alert-demo {
  align-items: start;
}

.pui-alert-demo__icon {
  flex: 0 0 auto;
  margin-top: var(--pui-preview-space-step-1);
}

.pui-alert-demo > button {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
}

.pui-alert-demo span,
.card-demo header span,
.field-demo span,
.label-demo span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-label);
}

.pui-alert-demo > button {
  align-self: start;
  color: var(--muted);
  background: transparent;
  border: 0;
}

.pui-alert-demo--success { background: var(--success-soft); }
.pui-alert-demo--warning { background: var(--warning-soft); }
.pui-alert-demo--danger { background: var(--danger-soft); }
.pui-alert-demo--vertical-center,
.pui-alert-demo--vertical-center .pui-alert-demo__main { align-items: center; }
.pui-alert-demo--vertical-center .pui-alert-demo__icon { margin-top: 0; }
.pui-alert-demo--tinted { color: var(--pui-alert-tinted-fg); }
.pui-alert-demo--tinted .pui-alert-demo__main strong { color: var(--pui-alert-tinted-fg); }
.pui-alert-demo--tinted .pui-alert-demo__main span,
.pui-alert-demo--tinted .pui-alert-demo__close { color: var(--pui-alert-tinted-secondary); }
.pui-alert-demo--tinted.pui-alert-demo--default {
  --pui-alert-tinted-fg: var(--pui-alert-default-tinted-fg);
  --pui-alert-tinted-secondary: var(--pui-alert-default-tinted-secondary);
}
.pui-alert-demo--tinted.pui-alert-demo--info {
  --pui-alert-tinted-fg: var(--pui-alert-info-tinted-fg);
  --pui-alert-tinted-secondary: var(--pui-alert-info-tinted-secondary);
}
.pui-alert-demo--tinted.pui-alert-demo--success {
  --pui-alert-tinted-fg: var(--pui-alert-success-tinted-fg);
  --pui-alert-tinted-secondary: var(--pui-alert-success-tinted-secondary);
}
.pui-alert-demo--tinted.pui-alert-demo--warning {
  --pui-alert-tinted-fg: var(--pui-alert-warning-tinted-fg);
  --pui-alert-tinted-secondary: var(--pui-alert-warning-tinted-secondary);
}
.pui-alert-demo--tinted.pui-alert-demo--danger {
  --pui-alert-tinted-fg: var(--pui-alert-danger-tinted-fg);
  --pui-alert-tinted-secondary: var(--pui-alert-danger-tinted-secondary);
}

.aspect-demo {
  display: grid;
  place-items: center;
  width: 100%;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: var(--pui-site-radius-surface);
}
.aspect-demo.is-bordered { border-color: var(--border); }

.breadcrumb-demo,
.button-group-demo,
.select-demo,
.otp-demo,
.spinner-demo {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-content-gap);
}

.breadcrumb-demo { flex-wrap: wrap; }
.breadcrumb-demo button { padding: 0; color: var(--muted); font-size: var(--pui-font-size-caption); background: transparent; border: 0; }
.breadcrumb-demo button.is-active { color: var(--text); font-weight: var(--pui-font-weight-bold); }
.breadcrumb-demo span { color: var(--subtle); }

.button-group-demo { overflow: hidden; }
.button-group-demo--vertical { flex-direction: column; align-items: stretch; }
.button-group-demo--block { display: flex; width: 100%; }
.button-group-demo button,
.select-demo button,
.tooltip-demo {
  min-height: 34px;
  padding: 0 var(--pui-preview-space-normal);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
}

.button-group-demo { gap: 0; }
.button-group-demo button { border-radius: 0; border-right: 0; }
.button-group-demo button:first-child { border-radius: var(--pui-site-radius-control) 0 0 var(--pui-site-radius-control); }
.button-group-demo button:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--pui-site-radius-control) var(--pui-site-radius-control) 0; }
.button-group-demo--vertical button { width: 100%; border-right: 1px solid var(--border); border-bottom: 0; }
.button-group-demo--vertical button:first-child { border-radius: var(--pui-site-radius-control) var(--pui-site-radius-control) 0 0; }
.button-group-demo--vertical button:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 var(--pui-site-radius-control) var(--pui-site-radius-control); }

.card-demo { overflow: hidden; }
.card-demo header,
.card-demo p,
.card-demo footer { padding: var(--pui-preview-space-step-16); margin: 0; }
.card-demo p { color: var(--muted); font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-medium); }
.card-demo footer { padding-top: 0; }

.field-demo,
.label-demo { padding: var(--pui-preview-space-step-12); }
.field-demo strong,
.label-demo { font-size: var(--pui-font-size-body-small); }
.field-demo i,
.label-demo i { color: var(--danger); font-style: normal; }
.field-demo input,
.label-demo input,
.otp-demo input { min-width: 0; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--pui-site-radius-control); }
.field-demo input,.label-demo input { height: 36px; padding: 0 var(--pui-preview-space-normal); }
.field-demo .is-error { color: var(--danger); }


.otp-demo { gap: var(--pui-preview-space-sm); }
.otp-demo input { width: 36px; height: 42px; text-align: center; }

.native-overlay-demo { display: grid; place-items: center; min-height: 190px; padding: var(--pui-preview-space-lg); background: rgba(24,24,27,.08); border-radius: var(--pui-site-radius-surface); }
.native-overlay-demo > div { display: grid; gap: var(--pui-preview-space-normal); width: min(100%, 260px); padding: var(--pui-preview-space-step-16); }
.native-overlay-demo p { margin: 0; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-label); }
.native-overlay-demo button { height: 32px; color: #fafafa; font-size: var(--pui-font-size-caption); background: #18181b; border: 0; border-radius: var(--pui-site-radius-control); }

.select-demo { gap: 0; overflow: hidden; }
.select-demo button { border-radius: 0; border-right: 0; }
.select-demo button:last-child { border-right: 1px solid var(--border); }
.select-demo button.is-active,.tooltip-demo { color: #fafafa; background: #18181b; border-color: #18181b; }

.spinner-demo { justify-content: center; min-height: 110px; color: var(--muted); }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 224px minmax(0, 1fr); }
  .inspector { grid-column: 1 / -1; border-top: 1px solid var(--border); border-left: 0; }
  .topbar__controls { max-width: 360px; }
}

@media (max-width: 760px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; padding: var(--pui-preview-content-gap) var(--pui-preview-space-step-12); gap: var(--pui-preview-space-normal); }
  .topbar__nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding-bottom: var(--pui-preview-space-xxs); }
  .topbar__controls { max-width: 150px; }
  .visual-toggle__text { display: none; }
  .workspace { display: block; }
  .sidebar { display: none; }
  .preview-toolbar { top: var(--pui-site-toolbar-offset-mobile); padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-lg) var(--pui-preview-space-step-12); }
  .preview-stage { padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12); }
  .phone { min-height: 620px; padding: var(--pui-preview-space-lg); }
  .phone__content { min-height: 510px; }
  .inspector { padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-lg); }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: linear-gradient(145deg, var(--page-strong), var(--page) 54%, #e8eaee);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(236deg, rgba(17, 18, 23, 0.06), transparent 38%),
    linear-gradient(145deg, var(--page-strong), var(--page) 56%, #e8eaee);
}

.app-shell[data-theme="dark"] {
  color-scheme: dark;
  --page: #080d14;
  --page-strong: #111824;
  --surface: rgba(26, 36, 52, 0.66);
  --surface-strong: rgba(34, 47, 68, 0.84);
  --surface-soft: rgba(255, 255, 255, 0.08);
  --surface-solid: #17202e;
  --text: #f6f8fb;
  --muted: #b8c4d5;
  --subtle: #7f8da3;
  --border: rgba(187, 213, 255, 0.16);
  --glass-border: rgba(213, 231, 255, 0.18);
  --highlight: rgba(255, 255, 255, 0.13);
  --brand: #ffffff;
  --brand-2: #d7d7da;
  --brand-soft: rgba(255, 255, 255, 0.14);
  --danger: #ff8a80;
  --danger-soft: rgba(255, 138, 128, 0.15);
  --success: #4bd3a0;
  --success-soft: rgba(75, 211, 160, 0.14);
  --warning: #f0b85b;
  --warning-soft: rgba(240, 184, 91, 0.14);
  --shadow: 0 24px 76px rgba(0, 0, 0, 0.38), inset 0 1px 0 var(--highlight);
  --shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--highlight);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(238deg, rgba(255, 255, 255, 0.06), transparent 40%),
    linear-gradient(145deg, #111824, #080d14 58%, #0c121d);
}

.app-shell[data-frost="off"] {
  --blur: none;
}

.app-shell[data-shadow="off"] {
  --shadow: none;
  --shadow-soft: none;
}

.app-shell[data-shadow="off"] *:not(.pui-config-provider-preview):not(.pui-config-provider-preview *),
.app-shell[data-shadow="off"] *:not(.pui-config-provider-preview):not(.pui-config-provider-preview *)::before,
.app-shell[data-shadow="off"] *:not(.pui-config-provider-preview):not(.pui-config-provider-preview *)::after {
  box-shadow: none !important;
  filter: none !important;
}

.app-shell[data-radius="normal"] {
  --pui-site-radius-control: var(--pui-preview-radius-step-14);
  --pui-site-radius-surface: var(--pui-preview-radius-xxlarge);
  --pui-site-radius-popup: var(--pui-preview-radius-step-28);
}

.app-shell[data-radius="normal"] .phone,
.app-shell[data-radius="normal"] .spec-sheet__head,
.app-shell[data-radius="normal"] .state-grid,
.app-shell[data-radius="normal"] .code-stage,
.app-shell[data-radius="normal"] .icon-library__hero {
  border-radius: var(--pui-preview-radius-step-24);
}

.app-shell[data-radius="normal"] .pui-button,
.app-shell[data-radius="normal"] .pui-cell,
.app-shell[data-radius="normal"] .pui-field,
.app-shell[data-radius="normal"] .pui-dialog,
.app-shell[data-radius="normal"] .pui-empty,
.app-shell[data-radius="normal"] .pui-result,
.app-shell[data-radius="normal"] .prop-control,
.app-shell[data-radius="normal"] .compat-item,
.app-shell[data-radius="normal"] .icon-card,
.app-shell[data-radius="normal"] .pui-grid button,
.app-shell[data-radius="normal"] .pui-image,
.app-shell[data-radius="normal"] .badge-host {
  border-radius: var(--pui-preview-radius-large);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pui-preview-panel-padding-spacious);
  min-height: 64px;
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-22);
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--highlight);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--pui-preview-space-normal);
  color: inherit;
  text-decoration: none;
}

.brand__mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: var(--pui-preview-radius-step-14);
  box-shadow: 0 14px 32px rgba(17, 18, 23, 0.18), inset -8px -8px 0 rgba(255, 255, 255, 0.18);
}

.brand__text {
  display: grid;
  min-width: 0;
}

.brand__title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-space-sm);
}

.brand__name {
  font-size: var(--pui-font-size-title-medium);
  font-weight: var(--pui-font-weight-heavy);
  line-height: var(--pui-line-height-body-large);
}

.brand__sub {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand__version,
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: 24px;
  padding: 0 var(--pui-preview-content-gap);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  background: var(--surface-soft);
  border: var(--pui-navbar-preview-capsule-border-width) solid var(--glass-border);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: inset 0 1px 0 var(--highlight);
}

.topbar__nav,
.topbar__controls,
.toolbar-actions,
.tabs,
.pui-row {
  display: flex;
  align-items: center;
}

.topbar__nav {
  justify-content: center;
  gap: var(--pui-preview-space-step-22);
  min-width: 0;
  overflow-x: auto;
}

.topbar__link {
  position: relative;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

.topbar__link.is-active {
  color: var(--brand);
}

.topbar__link.is-active::after {
  position: absolute;
  right: 0;
  bottom: calc(0px - var(--pui-preview-space-step-22));
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: var(--pui-preview-radius-round);
  content: "";
}

.topbar__controls {
  justify-content: flex-end;
  gap: var(--pui-preview-space-normal);
  min-width: 0;
  overflow-x: auto;
}

.theme-toggle,
.visual-toggle,
.icon-button,
.mini-action,
.tab,
.device-select {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  cursor: pointer;
}

.theme-toggle,
.visual-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--pui-preview-space-normal);
  height: 38px;
  padding: 0 var(--pui-preview-space-step-11);
  background: var(--surface);
  border-radius: var(--pui-preview-radius-round);
  cursor: pointer;
}

.visual-toggle {
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.visual-toggle__dot {
  width: 10px;
  height: 10px;
  background: var(--subtle);
  border-radius: var(--pui-preview-radius-round);
}

.visual-toggle.is-active .visual-toggle__dot {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 16px rgba(17, 18, 23, 0.28);
}

.theme-toggle__icon {
  min-width: 32px;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.theme-toggle__track {
  position: relative;
  width: 42px;
  height: 22px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: var(--pui-preview-radius-round);
}

.theme-toggle__thumb {
  position: absolute;
  top: var(--pui-preview-space-step-3);
  left: var(--pui-preview-space-step-21);
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: var(--pui-preview-radius-round);
  transition: left 500ms ease;
}

.app-shell[data-theme="dark"] .theme-toggle__thumb {
  left: var(--pui-preview-space-step-5);
}

.workspace {
  display: grid;
  grid-template-columns: 292px minmax(560px, 1fr) 380px;
  min-height: calc(100vh - 64px);
}

.sidebar,
.inspector {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.sidebar {
  position: sticky;
  top: var(--pui-preview-space-step-64);
  height: calc(100vh - 64px);
  padding: var(--pui-preview-space-step-16) var(--pui-preview-space-step-12) var(--pui-preview-space-step-24);
  overflow: auto;
  border-right: 1px solid var(--border);
  box-shadow: inset 1px 0 0 var(--highlight);
}

.search,
.icon-search {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-step-9);
  height: 40px;
  padding: 0 var(--pui-preview-space-step-12);
  color: var(--subtle);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-xlarge);
  box-shadow: inset 0 1px 0 var(--highlight);
}

.search__icon,
.fallback-icon {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: var(--pui-preview-radius-round);
}

.search__icon::after {
  display: block;
  width: 6px;
  height: 2px;
  margin: var(--pui-preview-space-normal) 0 0 var(--pui-preview-space-normal);
  background: currentColor;
  border-radius: var(--pui-preview-radius-round);
  transform: rotate(45deg);
  content: "";
}

.search input,
.icon-search input,
.prop-control input,
.prop-control select,
.prop-control textarea {
  min-width: 0;
  width: 100%;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
}

.prop-control textarea.is-invalid {
  color: var(--danger);
}

.component-group {
  margin-top: var(--pui-preview-panel-padding-spacious);
}

.component-group__title {
  margin: 0 var(--pui-preview-content-gap) var(--pui-preview-content-gap);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  letter-spacing: 0;
  text-transform: uppercase;
}

.component-group__section {
  margin-top: var(--pui-preview-space-normal);
}

.component-group__section:first-of-type {
  margin-top: 0;
}

.component-group__section-title {
  margin: 0 var(--pui-preview-space-normal) var(--pui-preview-space-xxs);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-small);
}

.component-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  width: 100%;
  min-height: 34px;
  margin: var(--pui-preview-space-xxs) 0;
  padding: 0 var(--pui-preview-space-step-9) 0 var(--pui-preview-space-normal);
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-bold);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--pui-preview-radius-step-13);
  cursor: pointer;
}

.component-item:hover {
  background: var(--surface-soft);
}

.component-item.is-active {
  color: var(--surface-solid);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 45%),
    linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 26px rgba(17, 18, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.component-item__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot {
  height: 20px;
  padding: 0 var(--pui-preview-space-step-7);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-body-medium);
  border-radius: var(--pui-preview-radius-round);
  opacity: 0.86;
}

.status-dot--done,
.status--done {
  color: var(--success);
  background: var(--success-soft);
}

.status-dot--next,
.status--next {
  color: var(--brand);
  background: var(--brand-soft);
}

.status-dot--beta,
.status--beta {
  color: var(--info);
  background: var(--info-soft);
}

.status-dot--experimental,
.status--experimental {
  color: var(--subtle);
  background: var(--surface-soft);
}

.status-dot--planned,
.status-dot--research,
.status--planned,
.status--research {
  color: var(--warning);
  background: var(--warning-soft);
}

.main {
  min-width: 0;
}

.preview-toolbar {
  position: sticky;
  top: var(--pui-preview-space-step-64);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-panel-padding-spacious);
  min-height: 74px;
  padding: var(--pui-preview-space-step-12) var(--pui-preview-space-step-26);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--highlight);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.preview-kicker {
  margin: 0 0 var(--pui-preview-space-step-3);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.preview-toolbar h1 {
  margin: 0;
  font-size: var(--pui-font-size-title-large);
  line-height: var(--pui-line-height-title-large);
}

.toolbar-actions {
  justify-content: flex-end;
  gap: var(--pui-preview-space-normal);
}

.tabs {
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-xs);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: inset 0 1px 0 var(--highlight);
}

.tab {
  height: 30px;
  padding: 0 var(--pui-preview-space-step-12);
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-heavy);
  background: transparent;
  border-color: transparent;
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
  cursor: pointer;
}

.tab.is-active {
  color: var(--surface-solid);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 18px rgba(17, 18, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.device-select,
.icon-button,
.mini-action {
  height: 38px;
  color: var(--text);
  background: var(--surface);
  border-radius: var(--pui-preview-radius-step-15);
  cursor: pointer;
}

.device-select {
  max-width: 190px;
  padding: 0 var(--pui-preview-space-step-12);
}

.icon-button {
  width: 38px;
  font-weight: var(--pui-font-weight-heavy);
}

.preview-stage {
  display: grid;
  grid-template-columns: minmax(340px, var(--device-width, 393px)) minmax(260px, 420px);
  align-items: start;
  justify-content: center;
  gap: var(--pui-preview-space-xxl);
  padding: var(--pui-preview-space-step-34) var(--pui-preview-space-step-26);
}

.app-shell[data-device="compact"] {
  --device-width: 375px;
}

.app-shell[data-device="iphone"] {
  --device-width: 393px;
}

.app-shell[data-device="wide"] {
  --device-width: 430px;
}

.phone {
  min-width: 0;
  min-height: 720px;
  padding: var(--pui-preview-panel-padding-spacious);
  color: var(--text);
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.94)),
    #f6f9ff;
  border: 5px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--pui-site-radius-popup);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.phone--dark {
  --surface: rgba(26, 36, 52, 0.66);
  --surface-strong: rgba(34, 47, 68, 0.84);
  --surface-soft: rgba(255, 255, 255, 0.08);
  --surface-solid: #17202e;
  --text: #f6f8fb;
  --muted: #b8c4d5;
  --subtle: #7f8da3;
  --border: rgba(187, 213, 255, 0.16);
  --glass-border: rgba(213, 231, 255, 0.18);
  --highlight: rgba(255, 255, 255, 0.13);
  --brand: #ffffff;
  --brand-2: #d7d7da;
  --brand-soft: rgba(255, 255, 255, 0.14);
  --danger: #ff8a80;
  --danger-soft: rgba(255, 138, 128, 0.15);
  --success: #4bd3a0;
  --success-soft: rgba(75, 211, 160, 0.14);
  --warning: #f0b85b;
  --warning-soft: rgba(240, 184, 91, 0.14);
  color: var(--text);
  background: linear-gradient(180deg, #151f2d, #0a1019);
  border-color: #121a26;
}

.phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-heavy);
}

.signal {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

.phone__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-heavy);
}

.phone__content {
  min-height: 620px;
}

.demo-section {
  display: grid;
  gap: var(--pui-preview-space-sm);
  margin-top: var(--pui-preview-space-lg);
}

.demo-section:first-child {
  margin-top: var(--pui-preview-space-xs);
}

.demo-tap-row,
.demo-reset,
.demo-option {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
}

.demo-link,
.toast-placeholder {
  min-height: 42px;
  padding: 0 var(--pui-preview-space-lg);
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-heavy);
}

.demo-option.is-active .pui-cell {
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.pui-row {
  flex-wrap: wrap;
  gap: var(--pui-preview-space-xs);
}

.pui-row--center {
  justify-content: center;
  min-height: 160px;
}

.pui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-content-gap);
  min-width: 66px;
  min-height: 44px;
  padding: 0 var(--pui-preview-space-step-15);
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-bold);
  background: color-mix(in srgb, var(--surface-solid) 80%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-11);
  box-shadow: 0 1px 3px rgba(17, 18, 23, 0.06);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: transform 500ms ease, opacity 500ms ease, background 500ms ease, box-shadow 500ms ease;
}

.pui-button--small {
  min-height: 36px;
  padding: 0 var(--pui-preview-space-step-12);
  font-size: var(--pui-font-size-body-small);
}

.pui-button--large {
  min-height: 50px;
  padding: 0 var(--pui-preview-panel-padding-spacious);
  border-radius: var(--pui-preview-radius-step-13);
  font-size: var(--pui-font-size-body-large);
}

.pui-button--primary {
  color: var(--surface-solid);
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 2px 6px rgba(17, 18, 23, 0.12);
}

.pui-button--danger.pui-button--base {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 2px 6px rgba(213, 73, 65, 0.12);
}

.pui-button--danger {
  color: var(--danger);
  background: var(--danger-soft);
}

.pui-button--danger.pui-button--base {
  background: var(--danger);
}

.pui-button--outline {
  color: var(--brand);
  background: transparent;
  border-color: currentColor;
  box-shadow: none;
}

.pui-button--text {
  color: var(--brand);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.pui-button--surface-transparent,
.pui-button--surface-transparent.is-disabled {
  background: transparent;
  background-color: transparent !important;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pui-button:active {
  opacity: 0.72;
  transform: scale(0.98);
  box-shadow: none;
}

.pui-button--block {
  width: 100%;
  min-width: 0;
}

.pui-button-preview {
  --pui-button-size: 44px;
}

.pui-button-preview.pui-button--extra-small {
  --pui-button-size: 32px;
}

.pui-button-preview.pui-button--small {
  --pui-button-size: 36px;
}

.pui-button-preview.pui-button--large {
  --pui-button-size: 50px;
}

.pui-button-preview__icon,
.pui-button-preview__slot-icon,
.pui-button-preview__suffix,
.pui-button-preview__content {
  display: inline-flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.pui-button-preview__content {
  overflow: hidden;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-button-preview.pui-button--icon-only {
  width: var(--pui-button-size);
  min-width: var(--pui-button-size);
  max-width: var(--pui-button-size);
  height: var(--pui-button-size);
  min-height: var(--pui-button-size);
  padding: 0;
  flex: 0 0 var(--pui-button-size);
  gap: 0;
  line-height: var(--pui-line-height-none);
}

.pui-button-preview.pui-button--icon-only.pui-button--round,
.pui-button-preview.pui-button--icon-only.pui-button--circle {
  border-radius: var(--pui-preview-radius-round);
}

.pui-button-preview.pui-button--icon-only > .pui-button-preview__icon,
.pui-button-preview.pui-button--icon-only > .pui-button-preview__slot-icon {
  width: var(--pui-button-size);
  min-width: var(--pui-button-size);
  height: var(--pui-button-size);
  min-height: var(--pui-button-size);
  line-height: var(--pui-line-height-none);
}

.pui-icon {
  --pui-icon-size: 20px;
  --pui-icon-line-height: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pui-icon-size);
  height: var(--pui-icon-size);
  font-size: var(--pui-icon-size);
  line-height: var(--pui-icon-line-height);
  color: currentColor;
  vertical-align: middle;
}

.pui-icon--small {
  --pui-icon-size: 16px;
}

.pui-icon--large {
  --pui-icon-size: 42px;
}

.pui-icon__glyph {
  display: block;
  width: 1em;
  height: 1em;
  color: inherit;
  font-family: var(--pui-font-family-icon);
  font-size: inherit;
  font-style: normal;
  font-weight: normal;
  line-height: var(--pui-icon-line-height);
  text-align: center;
}

.pui-icon__fallback-glyph {
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--muted);
  font-size: max(10px, .55em);
  font-weight: var(--pui-font-weight-semibold);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-small);
}

.pui-icon--fallback .pui-icon__fallback-glyph {
  display: grid;
}

.pui-button.is-disabled,
.pui-switch.is-disabled {
  opacity: 0.48;
}

.pui-spinner {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--pui-preview-radius-round);
  animation: spin 500ms linear infinite;
}

.pui-spinner--ticks {
  border: 0;
  background: conic-gradient(from 0deg, transparent 0 8%, currentColor 8% 16%, transparent 16% 25%, currentColor 25% 33%, transparent 33% 41%, currentColor 41% 50%, transparent 50% 58%, currentColor 58% 66%, transparent 66% 75%, currentColor 75% 83%, transparent 83% 91%, currentColor 91% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 46%, #000 49% 100%);
  mask: radial-gradient(circle, transparent 0 46%, #000 49% 100%);
}

.pui-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--pui-preview-space-xs);
  min-height: 58px;
  padding: var(--pui-preview-space-step-12) var(--pui-preview-space-lg);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-step-18);
  box-shadow: none;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.pui-cell--has-icon {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.pui-cell + .pui-cell {
  margin-top: 0;
}

.pui-cell-group {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--pui-preview-space-sm);
}

.pui-cell-group__header {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--pui-preview-space-step-2);
}

.pui-cell-group__title {
  min-width: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-body-medium);
  overflow-wrap: anywhere;
}

.pui-cell-group__description {
  min-width: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
  overflow-wrap: anywhere;
}

.pui-cell-group__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--pui-preview-space-sm);
}

.pui-cell-group--card .pui-cell-group__content {
  gap: 0;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-18);
}

.pui-cell-group--card .pui-cell-group__content > .pui-cell {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pui-cell-group--card .pui-cell-group__content > .pui-cell + .pui-cell {
  border-top: 1px solid transparent;
}

.pui-cell__media {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 0;
  overflow: hidden;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: var(--pui-preview-radius-step-7);
}

.pui-cell__media-visual {
  display: inline-flex;
  margin: 0;
}

.pui-cell__main {
  min-width: 0;
}

.pui-cell__main > strong {
  display: block;
  overflow: hidden;
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-cell__main > span {
  display: block;
  margin-top: var(--pui-preview-space-step-3);
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-cell > em {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-style: normal;
  white-space: nowrap;
}

.pui-cell > b {
  color: var(--subtle);
  font-size: var(--pui-font-size-title-large);
}

.pui-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--pui-preview-space-step-5);
  height: 28px;
  padding: 0 var(--pui-preview-space-normal);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: inset 0 1px 0 var(--highlight);
}

.pui-tag--primary {
  color: var(--brand);
  background: var(--brand-soft);
}

.pui-tag--success {
  color: var(--success);
  background: var(--success-soft);
}

.pui-tag--warning {
  color: var(--warning);
  background: var(--warning-soft);
}

.pui-tag--danger {
  color: var(--danger);
  background: var(--danger-soft);
}

.pui-tag--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

.pui-config-card,
.token-row,
.pui-field,
.pui-dialog,
.pui-empty,
.pui-result,
.upload-zone,
.picker-wheel,
.toast-demo,
.pui-notice,
.pui-navbar,
.pui-tabs,
.pui-tabbar,
.pui-steps,
.collapse-item,
.overlay-panel,
.dropdown-panel,
.pull-refresh,
.sticky-demo > div:first-child {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.pui-config-card {
  display: grid;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-panel-padding-spacious);
}

.pui-config-card span,
.pui-config-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
}

/* ConfigProvider H5 mirror: local component-tree tokens, independent from the documentation shell. */
.pui-config-provider-preview {
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #f4f4f5;
  --surface-solid: #ffffff;
  --pui-glass-tint: rgba(255, 255, 255, 0.72);
  --pui-scroll-area-gradient-overlay-material-color: rgba(255, 255, 255, 0.32);
  --pui-scroll-area-gradient-overlay-color-context: var(--surface-solid);
  --text: #18181b;
  --muted: #52525b;
  --subtle: #a1a1aa;
  --border: #e4e4e7;
  --glass-border: #e4e4e7;
  --brand: #18181b;
  --brand-2: #27272a;
  --brand-soft: #f4f4f5;
  --shadow: none;
  --shadow-soft: none;
  --blur: none;
  --preview-surface: var(--surface);
  --preview-surface-soft: var(--surface-soft);
  --preview-border: var(--glass-border);
  --preview-shadow: var(--shadow);
  --preview-shadow-card: var(--shadow-soft);
  --preview-blur: var(--blur);
  --pui-preview-radius-small: var(--pui-preview-radius-step-6);
  --pui-preview-radius-medium: var(--pui-preview-radius-step-8);
  --pui-preview-radius-large: var(--pui-preview-radius-step-12);
  --pui-preview-radius-xlarge: var(--pui-preview-radius-step-16);
  --pui-preview-radius-xxlarge: var(--pui-preview-radius-step-20);
  --pui-site-radius-control: var(--pui-preview-radius-small);
  --pui-site-radius-surface: var(--pui-preview-radius-medium);
  --pui-site-radius-popup: var(--pui-preview-radius-large);
  --pui-preview-radius-card: var(--pui-site-radius-surface);
  --pui-preview-radius-control: var(--pui-site-radius-control);
  --pui-preview-radius-floating: var(--pui-preview-radius-large);
  --pui-preview-radius-popup: var(--pui-site-radius-popup);
  display: grid;
  gap: var(--pui-preview-content-gap);
  color: var(--text);
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pui-config-provider-preview.pui-theme--dark {
  --surface: #18181b;
  --surface-strong: #18181b;
  --surface-soft: #27272a;
  --surface-solid: #18181b;
  --pui-glass-tint: rgba(24, 24, 27, 0.72);
  --pui-scroll-area-gradient-overlay-material-color: rgba(24, 24, 27, 0.32);
  --pui-scroll-area-gradient-overlay-color-context: var(--surface-solid);
  --text: #fafafa;
  --muted: #d4d4d8;
  --subtle: #71717a;
  --border: #27272a;
  --glass-border: #27272a;
  --brand: #fafafa;
  --brand-2: #e4e4e7;
  --brand-soft: #27272a;
}

.pui-config-provider-preview.pui-frosted-glass--on {
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.7);
  --pui-scroll-area-gradient-overlay-color-context: var(--pui-scroll-area-gradient-overlay-material-color);
  --blur: blur(13px) saturate(150%);
}

.pui-config-provider-preview.pui-theme--dark.pui-frosted-glass--on {
  --surface: rgba(24, 24, 27, 0.72);
  --surface-strong: rgba(24, 24, 27, 0.88);
  --glass-border: rgba(255, 255, 255, 0.13);
  --pui-scroll-area-gradient-overlay-color-context: var(--pui-scroll-area-gradient-overlay-material-color);
}

.pui-config-provider-preview.pui-shadow--on {
  --shadow: 0 6px 16px rgba(24, 24, 27, 0.12);
  --shadow-soft: 0 3px 9px rgba(24, 24, 27, 0.08);
}

.pui-config-provider-preview.pui-theme--dark.pui-shadow--on {
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  --shadow-soft: 0 3px 9px rgba(0, 0, 0, 0.24);
}

.pui-config-provider-preview.pui-radius--large {
  --pui-preview-radius-small: var(--pui-preview-radius-step-9);
  --pui-preview-radius-medium: var(--pui-preview-radius-step-14);
  --pui-preview-radius-large: var(--pui-preview-radius-step-20);
  --pui-preview-radius-xlarge: var(--pui-preview-radius-step-24);
  --pui-preview-radius-xxlarge: var(--pui-preview-radius-step-28);
  --pui-site-radius-control: var(--pui-preview-radius-step-14);
  --pui-site-radius-surface: var(--pui-preview-radius-step-18);
  --pui-site-radius-popup: var(--pui-preview-radius-step-24);
}

.pui-config-provider-preview.pui-border--off,
.pui-config-provider-preview.pui-border--off.pui-frosted-glass--on {
  --border: transparent;
  --glass-border: transparent;
}

.pui-config-provider-preview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-preview-space-xs);
}

body .app-shell[data-page-mode] .preview-stage .pui-config-provider-contract-showcase {
  display: grid;
  min-width: 0;
  gap: var(--pui-section-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-config-provider-demo-group {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-config-provider-demo-group + .pui-config-provider-demo-group {
  margin-top: var(--pui-preview-section-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-config-provider-demo-group > header {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
}

body .app-shell[data-page-mode] .preview-stage .pui-config-provider-demo-group > header strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .preview-stage .pui-config-provider-demo-group > header span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.pui-divider {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.pui-divider::before,
.pui-divider::after {
  flex: 1;
  height: 1px;
  background: var(--border);
  content: "";
}

.badge-host {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-step-24);
  box-shadow: var(--shadow-soft);
}

.pui-badge {
  position: absolute;
  top: calc(0px - var(--pui-preview-space-xs));
  right: calc(0px - var(--pui-preview-space-xs));
  min-width: 22px;
  height: 22px;
  padding: 0 var(--pui-preview-space-sm);
  color: #fff;
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  line-height: var(--pui-line-height-body-large);
  text-align: center;
  background: var(--danger);
  border: 2px solid var(--surface-solid);
  border-radius: var(--pui-preview-radius-round);
}

.pui-badge--dot {
  min-width: 12px;
  width: 12px;
  height: 12px;
  padding: 0;
}

.pui-badge--success {
  background: var(--success);
}

.avatar-stack {
  display: grid;
  grid-auto-columns: 60px;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  min-height: 128px;
  padding: var(--pui-preview-space-step-24);
}

.pui-avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: #fff;
  font-size: var(--pui-font-size-headline);
  font-weight: var(--pui-font-weight-heavy);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 4px solid var(--surface-solid);
  border-radius: var(--pui-preview-radius-step-26);
  box-shadow: none;
}

.pui-avatar--blue {
  background: linear-gradient(135deg, #3b3c42, #8f8f96);
}

.pui-avatar--image {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent),
    linear-gradient(135deg, #17202e, #d7d7da);
}

.pui-avatar--small {
  width: 52px;
  height: 52px;
  border-radius: var(--pui-preview-radius-xxlarge);
  font-size: var(--pui-font-size-body-large);
}

.pui-image {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  color: var(--muted);
  font-weight: var(--pui-font-weight-heavy);
  background:
    linear-gradient(135deg, rgba(69, 213, 255, 0.22), transparent),
    linear-gradient(145deg, var(--surface), var(--surface-soft));
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-step-24);
  box-shadow: var(--shadow-soft);
}

button.pui-image {
  width: 100%;
  border: 1px solid var(--glass-border);
}

.pui-image--interactive {
  cursor: pointer;
}

.pui-image--loading {
  color: var(--brand);
  background: var(--brand-soft);
}

.pui-image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pui-preview-space-xs);
}

.pui-image--small {
  aspect-ratio: 1;
  border-radius: var(--pui-preview-radius-step-18);
}

.pui-image--error {
  color: var(--danger);
  background: var(--danger-soft);
}

.pui-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pui-preview-space-xs);
}

.pui-grid button {
  display: grid;
  place-items: center;
  gap: var(--pui-preview-content-gap);
  min-height: 82px;
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-xxlarge);
  box-shadow: none;
}

.pui-grid button.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.pui-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-step-12) var(--pui-preview-space-lg);
}

.pui-field span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.pui-field input,
.pui-field textarea {
  min-width: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
}

.pui-field textarea {
  min-height: 96px;
  resize: none;
}

.pui-field button {
  color: var(--brand);
  background: transparent;
  border: 0;
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.pui-field em {
  grid-column: 1 / -1;
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-style: normal;
  text-align: right;
}

.pui-field--success {
  border-color: rgba(16, 163, 127, 0.36);
}

.pui-field--warning {
  border-color: rgba(217, 130, 0, 0.38);
}

.pui-field--danger {
  border-color: rgba(229, 72, 77, 0.38);
}

.pui-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  padding: 0;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  cursor: pointer;
}

.pui-switch i {
  position: absolute;
  top: var(--pui-preview-space-step-3);
  left: var(--pui-preview-space-step-3);
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: var(--pui-preview-radius-round);
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.18);
}

.pui-switch.is-checked {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.pui-switch.is-checked i {
  left: var(--pui-preview-space-step-21);
}

.picker-wheel {
  display: grid;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-step-16);
  text-align: center;
}

.picker-wheel span {
  color: var(--subtle);
}

.picker-wheel strong {
  padding: var(--pui-preview-space-step-12);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-step-14);
}

.pui-search {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
  max-width: 100%;
  transition: opacity var(--pui-search-duration, 500ms) var(--pui-search-ease, var(--ease-standard));
}

.pui-stepper {
  display: inline-grid;
  align-items: center;
  grid-template-columns: auto minmax(0, var(--pui-stepper-input-width, 60px)) auto;
  max-width: 100%;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid transparent;
  border-radius: var(--pui-preview-radius-medium);
  box-shadow: var(--shadow-soft);
  transition:
    opacity var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)),
    background-color var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)),
    border-color var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)),
    border-radius var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)),
    box-shadow var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard));
}

.pui-stepper--filled { background: var(--surface-soft); }
.pui-stepper--outline { border-color: var(--border); }

.pui-stepper:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
}

.pui-stepper__button-track,
.pui-stepper__input-track {
  display: flex;
  min-width: 0;
  align-items: stretch;
  overflow: hidden;
}

.pui-stepper__button-track > .pui-stepper__button {
  flex: 0 0 auto;
  color: var(--text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transition: opacity var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)), color var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)), background-color var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard));
}

.pui-stepper__button-track > .pui-stepper__button.is-limit {
  color: var(--subtle);
  opacity: .5;
}

.pui-stepper__input-track {
  width: var(--pui-stepper-input-width, 60px);
}

.pui-stepper__input.pui-input-preview {
  flex: 1 1 auto;
  width: var(--pui-stepper-input-width, 60px);
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: color var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard));
}

.pui-stepper__input .pui-input-preview__control {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pui-stepper--outline .pui-stepper__input {
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.pui-stepper.is-disabled { opacity: .5; }
.pui-stepper.is-readonly { opacity: .72; }
.pui-stepper.is-input-disabled .pui-stepper__input { opacity: .5; }

.pui-slider {
  position: relative;
  display: block;
  height: 30px;
  margin: var(--pui-preview-content-gap) var(--pui-preview-space-normal);
}

.pui-slider::before,
.pui-slider span {
  position: absolute;
  top: var(--pui-preview-space-step-13);
  left: 0;
  height: 6px;
  border-radius: var(--pui-preview-radius-round);
  content: "";
}

.pui-slider::before {
  right: 0;
  background: var(--pui-slider-track, var(--surface-soft));
}

.pui-slider span {
  background: var(--pui-slider-active, var(--text));
  transition: width var(--pui-slider-duration, 500ms) var(--pui-slider-ease, var(--ease-standard));
}

.pui-slider i {
  position: absolute;
  top: 50%;
  width: var(--pui-slider-thumb-size, 28px);
  height: var(--pui-slider-thumb-size, 28px);
  margin-left: calc(var(--pui-slider-thumb-size, var(--pui-preview-space-xxl)) / -2);
  background: var(--surface-solid);
  border: 3px solid var(--text);
  border-radius: var(--pui-preview-radius-round);
  transform: translateY(-50%);
  transition: left var(--pui-slider-duration, 500ms) var(--pui-slider-ease, var(--ease-standard)), border-color var(--pui-slider-duration, 500ms) var(--pui-slider-ease, var(--ease-standard));
}

.pui-slider input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.pui-slider.is-disabled {
  opacity: 0.5;
}

.pui-slider.is-readonly {
  opacity: 0.72;
}

.pui-slider.is-dragging span,
.pui-slider.is-dragging i,
.pui-slider.is-reduced-motion span,
.pui-slider.is-reduced-motion i {
  transition-duration: 1ms;
}

.pui-slider input:disabled {
  cursor: not-allowed;
}

.pui-rate {
  display: flex;
  gap: var(--pui-preview-content-gap);
  color: var(--surface-soft);
  font-size: var(--pui-font-size-display);
}

.pui-rate button {
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: var(--pui-line-height-none);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.pui-rate button.is-active {
  color: #ffbd45;
  filter: drop-shadow(0 5px 12px rgba(255, 189, 69, 0.3));
}

.upload-zone,
.pui-empty,
.pui-result {
  display: grid;
  place-items: center;
  gap: var(--pui-preview-content-gap);
  min-height: 190px;
  padding: var(--pui-preview-space-xl);
  text-align: center;
}

.upload-zone span,
.pui-empty span,
.pui-result span,
.pui-dialog p,
.overlay-panel p {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-medium);
}

.toast-demo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  min-height: 42px;
  padding: 0 var(--pui-preview-space-step-16);
  color: #fff;
  background: rgba(16, 24, 40, 0.78);
  border-radius: var(--pui-preview-radius-round);
}

.toast-demo--column { flex-direction: column; justify-content: center; min-width: 104px; min-height: 104px; }
.toast-preview-scrim { position: absolute; inset: 0; background: rgba(9, 9, 11, .42); pointer-events: none; }
.toast-launcher { display: flex; justify-content: center; min-width: 0; }

.pui-dialog {
  display: grid;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-xl);
}

.pui-dialog h3 {
  margin: 0;
  font-size: var(--pui-font-size-title-medium);
}

.pui-dialog > .pui-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--pui-preview-space-xs);
}

.pui-progress {
  height: 12px;
  overflow: hidden;
  background: var(--pui-progress-track, var(--surface-soft));
  border-radius: var(--pui-preview-radius-round);
}

.pui-progress span {
  display: block;
  height: 100%;
  background: var(--pui-progress-active, var(--progress-color, var(--brand)));
  border-radius: inherit;
}

.pui-progress-ring {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 96px;
  height: 96px;
  color: var(--brand);
  font-weight: var(--pui-font-weight-heavy);
  background: conic-gradient(var(--brand) 64%, var(--surface-soft) 0);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
}

.skeleton-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--pui-preview-space-sm);
}

.skeleton-row span,
.skeleton-row i,
.skeleton-card {
  display: block;
  background: linear-gradient(90deg, var(--surface-soft), var(--surface), var(--surface-soft));
  border-radius: var(--pui-preview-radius-round);
}

.skeleton-row span {
  height: 54px;
  border-radius: var(--pui-preview-radius-step-18);
}

.skeleton-row i {
  height: 12px;
  margin: var(--pui-preview-space-sm) 0;
}

.skeleton-card {
  height: 118px;
  border-radius: var(--pui-preview-radius-step-22);
}

.pui-notice {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  min-height: 42px;
  padding: 0 var(--pui-preview-space-step-12);
  color: var(--warning);
  background: var(--warning-soft);
}

.pui-navbar,
.pui-tabs,
.pui-tabbar,
.pui-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 var(--pui-preview-space-step-12);
}

.pui-navbar button,
.pui-tabs button,
.pui-tabbar button {
  color: var(--muted);
  background: transparent;
  border: 0;
  font-weight: var(--pui-font-weight-heavy);
}

.pui-navbar-showcase {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
}

.pui-navbar-preview-host {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.pui-navbar-preview-host.is-fixed {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 2;
}

.pui-navbar-preview-host.is-fixed.has-placeholder {
  height: 48px;
}

.pui-navbar-preview-host.is-fixed.has-placeholder.has-safe-top {
  height: 68px;
}

.pui-navbar-preview-host.is-fixed .pui-navbar-preview {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.pui-navbar-preview {
  --pui-navbar-preview-safe-height: 0px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  color: var(--text);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transform-origin: top center;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: opacity var(--pui-navbar-preview-duration) var(--pui-ease-standard), transform var(--pui-navbar-preview-duration) var(--pui-ease-standard), background-color var(--pui-navbar-preview-duration) var(--pui-ease-standard), border-color var(--pui-navbar-preview-duration) var(--pui-ease-standard), box-shadow var(--pui-navbar-preview-duration) var(--pui-ease-standard);
}

.pui-navbar-preview.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.pui-navbar-preview.is-transparent {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pui-navbar-preview.is-bordered {
  border-bottom: 1px solid var(--glass-border);
}

.pui-navbar-preview.is-borderless {
  border-bottom: 0;
}

.pui-navbar-preview.is-disabled {
  pointer-events: none;
}

.pui-navbar-preview.is-disabled .pui-navbar-preview__content {
  opacity: 0.58;
}

.pui-navbar-preview__safe {
  display: none;
  height: 20px;
}

.pui-navbar-preview.has-safe-top .pui-navbar-preview__safe {
  display: block;
}

.pui-navbar-preview.has-safe-top {
  --pui-navbar-preview-safe-height: var(--pui-preview-space-step-20);
}

.pui-navbar-preview__content {
  position: relative;
  box-sizing: border-box;
  display: block;
  height: var(--pui-navbar-preview-content-height);
  min-height: var(--pui-navbar-preview-content-height);
  padding: 0;
}

.pui-navbar-preview.has-capsule .pui-navbar-preview__content {
  height: calc(var(--pui-navbar-preview-capsule-top) * 2 + var(--pui-navbar-preview-capsule-height));
  min-height: calc(var(--pui-navbar-preview-capsule-top) * 2 + var(--pui-navbar-preview-capsule-height));
}

.pui-navbar-preview__capsule {
  position: absolute;
  top: calc(var(--pui-navbar-preview-safe-height) + var(--pui-navbar-preview-capsule-top));
  right: var(--pui-navbar-preview-capsule-inset-right);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pui-navbar-preview-capsule-width);
  height: var(--pui-navbar-preview-capsule-height);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-round);
  pointer-events: none;
}

.pui-navbar-preview__capsule-more {
  display: inline-flex;
  gap: var(--pui-preview-space-step-4);
  align-items: center;
}

.pui-navbar-preview__capsule-more i {
  display: block;
  width: var(--pui-navbar-preview-capsule-dot-size);
  height: var(--pui-navbar-preview-capsule-dot-size);
  background: currentColor;
  border-radius: var(--pui-preview-radius-round);
}

.pui-navbar-preview__capsule-divider {
  width: 1px;
  height: var(--pui-navbar-preview-capsule-divider-height);
  margin: 0 var(--pui-preview-space-step-8);
  background: var(--glass-border);
}

.pui-navbar-preview__capsule-circle {
  box-sizing: border-box;
  width: var(--pui-navbar-preview-capsule-control-size);
  height: var(--pui-navbar-preview-capsule-control-size);
  border: var(--pui-navbar-preview-capsule-border-width) solid currentColor;
  border-radius: var(--pui-preview-radius-round);
}

.pui-navbar-preview__action {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-xs);
  width: var(--pui-navbar-preview-action-width);
  min-width: 0;
  overflow: hidden;
}

.pui-navbar-preview__action.is-left {
  left: 0;
  justify-content: flex-start;
  overflow: visible;
}

.pui-navbar-preview.has-capsule .pui-navbar-preview__action.is-left {
  box-sizing: border-box;
  left: var(--pui-navbar-preview-capsule-mirror-left);
  justify-content: center;
  width: var(--pui-navbar-preview-capsule-width);
  padding-left: 0;
}

.pui-navbar-preview__mirror-capsule {
  display: inline-flex;
  box-sizing: border-box;
  width: var(--pui-navbar-preview-capsule-width);
  max-width: 100%;
  height: var(--pui-navbar-preview-capsule-height);
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
  -webkit-backdrop-filter: var(--blur-soft, var(--blur));
  backdrop-filter: var(--blur-soft, var(--blur));
}

.pui-navbar-preview__mirror-capsule .pui-button { min-width: 0; flex: 1 1 0; }
.pui-navbar-preview__mirror-capsule-divider { display: block; width: 1px; height: calc(100% - var(--pui-preview-space-normal)); flex: 0 0 auto; background: var(--glass-border); }

.pui-navbar-preview__action.is-right {
  right: 0;
  justify-content: flex-end;
}

.pui-navbar-preview__title {
  position: absolute;
  top: 0;
  right: var(--pui-navbar-preview-action-width);
  bottom: 0;
  left: var(--pui-navbar-preview-action-width);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-xs);
  min-width: 0;
  padding: 0 var(--pui-preview-space-xs);
  overflow: hidden;
}

.pui-navbar-preview.has-capsule .pui-navbar-preview__title {
  right: var(--pui-navbar-preview-capsule-reserve);
  left: var(--pui-navbar-preview-capsule-reserve);
}

.pui-navbar-preview__title strong {
  min-width: 0;
  overflow: hidden;
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-body-large);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-navbar-preview__placeholder {
  width: 100%;
  min-height: 48px;
  pointer-events: none;
}

.pui-navbar-preview-host.has-safe-top .pui-navbar-preview__placeholder {
  min-height: 68px;
}

.pui-navbar-showcase__page {
  display: grid;
  gap: var(--pui-section-gap);
  box-sizing: border-box;
  min-width: 0;
  padding: var(--pui-preview-content-gap);
}

.pui-navbar-demo-section {
  display: grid;
  gap: var(--pui-preview-content-gap);
  min-width: 0;
}

.pui-navbar-demo-section h3 {
  margin: 0;
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.pui-navbar-demo-section + .pui-navbar-demo-section h3 {
  margin-top: var(--pui-section-gap);
}

.pui-navbar-preview__feedback {
  min-width: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .pui-navbar-preview {
    transition-duration: 1ms !important;
  }
}

/* TopLoading: a 4rpx rail belongs to the current PUI Surface, never to a
   second diagnostic panel. The DOM remains mounted through enter/update/leave. */
.pui-top-loading-showcase {
  display: grid;
  align-content: center;
  gap: var(--pui-preview-section-gap);
  min-height: 100%;
}

.pui-top-loading-showcase__card {
  position: relative;
  overflow: hidden;
}

.pui-top-loading-preview {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: var(--brand-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pui-top-loading-duration) var(--ease-standard);
}

.pui-top-loading-preview.is-active { opacity: 1; }

.pui-top-loading-preview__bar,
.pui-top-loading-preview__one,
.pui-top-loading-preview__two {
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform-origin: left center;
}

.pui-top-loading-preview__bar {
  opacity: 0;
  transform: scaleX(var(--pui-top-loading-progress));
  transition: opacity var(--pui-top-loading-duration) var(--ease-standard),
    transform var(--pui-top-loading-duration) var(--ease-standard),
    background-color var(--pui-top-loading-duration) var(--ease-standard);
}

.pui-top-loading-preview.is-determinate .pui-top-loading-preview__bar,
.pui-top-loading-preview.is-success .pui-top-loading-preview__bar { opacity: 1; }

.pui-top-loading-preview.is-success .pui-top-loading-preview__bar {
  background: var(--success);
  transform: scaleX(1);
}

.pui-top-loading-preview__one {
  animation: pui-top-loading-preview-one var(--pui-top-loading-duration) var(--ease-standard) infinite;
}

.pui-top-loading-preview__two {
  animation: pui-top-loading-preview-two var(--pui-top-loading-duration) var(--ease-standard) infinite;
}

.pui-top-loading-preview.is-determinate .pui-top-loading-preview__one,
.pui-top-loading-preview.is-determinate .pui-top-loading-preview__two,
.pui-top-loading-preview.is-success .pui-top-loading-preview__one,
.pui-top-loading-preview.is-success .pui-top-loading-preview__two { opacity: 0; }

.pui-top-loading-showcase__triggers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
}

.pui-top-loading-showcase__triggers .pui-button-preview:last-child {
  grid-column: 1 / -1;
}

@keyframes pui-top-loading-preview-one {
  0% { transform: translateX(-100%) scaleX(.28); }
  58% { transform: translateX(35%) scaleX(.68); }
  100% { transform: translateX(135%) scaleX(.2); }
}

@keyframes pui-top-loading-preview-two {
  0%, 28% { transform: translateX(-110%) scaleX(.14); }
  78% { transform: translateX(50%) scaleX(.34); }
  100% { transform: translateX(140%) scaleX(.12); }
}

/* DynamicMessage owns a single edge-to-edge device layer. The page below
   remains scrollable and readable while the retained island updates in place. */
.pui-dynamic-message-showcase {
  --pui-dynamic-message-feed-clearance: calc(var(--pui-preview-space-step-42) + var(--pui-preview-space-step-28));
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--pui-preview-content-gap);
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: var(--pui-preview-device-padding);
  padding-top: calc(var(--pui-preview-device-padding) + var(--pui-preview-content-gap));
}

.pui-dynamic-message-preview-layer {
  position: absolute;
  z-index: 30;
  top: var(--pui-preview-space-step-18);
  right: var(--pui-preview-panel-padding);
  left: var(--pui-preview-panel-padding);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.pui-dynamic-message-preview {
  --pui-dynamic-message-compact-width: 180px;
  --pui-dynamic-message-expanded-width: 320px;
  --pui-dynamic-message-compact-height: 48px;
  --pui-dynamic-message-expanded-height: 56px;
  --pui-dynamic-message-frosted-filter-on: blur(14px) saturate(1.2);
  --pui-dynamic-message-shadow-on: 0 18px 44px rgba(0, 0, 0, .34);
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--pui-preview-space-step-8);
  width: 100%;
  max-width: var(--pui-dynamic-message-compact-width);
  min-height: var(--pui-dynamic-message-compact-height);
  max-height: 120px;
  padding: var(--pui-preview-space-step-8);
  overflow: hidden;
  color: #fafafa;
  --pui-dynamic-message-bg: #09090b;
  background: var(--pui-dynamic-message-bg);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  opacity: 0;
  transform: translateY(-12px);
  transform-origin: top center;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--pui-dynamic-message-compact-duration) var(--ease-standard),
    transform var(--pui-dynamic-message-compact-duration) var(--ease-standard),
    max-width var(--pui-dynamic-message-panel-duration) var(--ease-standard),
    min-height var(--pui-dynamic-message-panel-duration) var(--ease-standard),
    border-radius var(--pui-dynamic-message-panel-duration) var(--ease-standard),
    visibility 0s linear var(--pui-dynamic-message-duration);
}

.app-shell[data-frost="on"] .pui-dynamic-message-preview.is-frosted-inherit {
  --pui-dynamic-message-bg: rgba(9, 9, 11, .78);
}

.pui-dynamic-message-preview.is-frosted-on {
  --pui-dynamic-message-bg: rgba(9, 9, 11, .78);
  -webkit-backdrop-filter: var(--pui-dynamic-message-frosted-filter-on);
  backdrop-filter: var(--pui-dynamic-message-frosted-filter-on);
}

.pui-dynamic-message-preview.is-frosted-off {
  --pui-dynamic-message-bg: #09090b;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pui-dynamic-message-preview.is-shadow-on {
  box-shadow: var(--pui-dynamic-message-shadow-on) !important;
}

body .app-shell[data-page-mode][data-shadow="off"] .preview-stage .pui-dynamic-message-preview.is-shadow-on {
  box-shadow: var(--pui-dynamic-message-shadow-on) !important;
}

.pui-dynamic-message-preview.is-shadow-off {
  box-shadow: none;
}

.pui-dynamic-message-preview.is-phase-compact,
.pui-dynamic-message-preview.is-phase-expanding,
.pui-dynamic-message-preview.is-phase-visible,
.pui-dynamic-message-preview.is-phase-collapsing {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.pui-dynamic-message-preview.is-phase-expanding,
.pui-dynamic-message-preview.is-phase-visible {
  max-width: var(--pui-dynamic-message-expanded-width);
  min-height: var(--pui-dynamic-message-expanded-height);
  border-radius: var(--pui-preview-radius-xlarge);
}

.pui-dynamic-message-preview.is-phase-visible {
  pointer-events: auto;
}

.pui-dynamic-message-preview.is-phase-leave-compact {
  opacity: 0;
  transform: translateY(-12px);
  visibility: visible;
}

.pui-dynamic-message-preview__edge-flow {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 3px) 100%, calc(100% - 3px) 3px, 0 3px);
}

.pui-dynamic-message-preview__edge-beam {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg,
    transparent 44%,
    transparent 47%,
    var(--pui-dynamic-message-accent, var(--info)) 49.2%,
    var(--pui-dynamic-message-accent, var(--info)) 50.8%,
    transparent 53%,
    transparent 56%);
  background-repeat: no-repeat;
  background-size: 240% 240%;
  background-position: 0 0;
  opacity: 0;
  will-change: background-position, opacity;
}

.pui-dynamic-message-preview__indicator,
.pui-dynamic-message-preview__content,
.pui-dynamic-message-preview__action,
.pui-dynamic-message-preview__close {
  position: relative;
  z-index: 2;
}

.pui-dynamic-message-preview.is-loading { --pui-dynamic-message-accent: #d4d4d8; }
.pui-dynamic-message-preview.is-info { --pui-dynamic-message-accent: var(--info); }
.pui-dynamic-message-preview.is-success { --pui-dynamic-message-accent: var(--success); }
.pui-dynamic-message-preview.is-warning { --pui-dynamic-message-accent: var(--warning); }
.pui-dynamic-message-preview.is-error { --pui-dynamic-message-accent: var(--danger); }

.pui-dynamic-message-preview__indicator {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--pui-dynamic-message-accent);
  background: rgba(255, 255, 255, .08);
  border-radius: var(--pui-preview-radius-round);
  opacity: 1;
  transition: opacity var(--pui-dynamic-message-duration) var(--ease-standard);
}

.pui-dynamic-message-preview__indicator[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

.pui-dynamic-message-preview__content {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-step-2);
}

.pui-dynamic-message-preview__content strong,
.pui-dynamic-message-preview__content span {
  min-width: 0;
  overflow: hidden;
}

.pui-dynamic-message-preview__content strong {
  color: #fafafa;
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-dynamic-message-preview__content span {
  display: -webkit-box;
  max-height: 0;
  color: #d4d4d8;
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
  opacity: 0;
  transform: translateY(4px);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: max-height var(--pui-dynamic-message-panel-duration) var(--ease-standard),
    opacity var(--pui-dynamic-message-panel-duration) var(--ease-standard),
    transform var(--pui-dynamic-message-panel-duration) var(--ease-standard);
}

.pui-dynamic-message-preview__action,
.pui-dynamic-message-preview__close {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-width var(--pui-dynamic-message-panel-duration) var(--ease-standard),
    opacity var(--pui-dynamic-message-panel-duration) var(--ease-standard);
}

.pui-dynamic-message-preview.is-edge-flowing .pui-dynamic-message-preview__edge-flow {
  opacity: 1;
}

.pui-dynamic-message-preview.is-edge-flowing .pui-dynamic-message-preview__edge-beam {
  animation: pui-dynamic-message-edge-flow var(--pui-dynamic-message-edge-flow-duration, 1500ms) var(--ease-standard) both;
}

.pui-dynamic-message-preview.is-reduced-motion .pui-dynamic-message-preview__edge-flow {
  opacity: 0;
}

.pui-dynamic-message-preview.is-reduced-motion .pui-dynamic-message-preview__edge-beam {
  animation: none;
}

.pui-dynamic-message-preview.is-phase-expanding .pui-dynamic-message-preview__content span,
.pui-dynamic-message-preview.is-phase-visible .pui-dynamic-message-preview__content span {
  max-height: calc(var(--pui-line-height-body-small) + var(--pui-line-height-body-small));
  opacity: 1;
  transform: translateY(0);
}

.pui-dynamic-message-preview.is-phase-expanding.has-action .pui-dynamic-message-preview__action,
.pui-dynamic-message-preview.is-phase-visible.has-action .pui-dynamic-message-preview__action,
.pui-dynamic-message-preview.is-phase-expanding.has-close .pui-dynamic-message-preview__close,
.pui-dynamic-message-preview.is-phase-visible.has-close .pui-dynamic-message-preview__close {
  width: var(--pui-button-size) !important;
  min-width: var(--pui-button-size) !important;
  max-width: var(--pui-button-size) !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pui-dynamic-message-preview.is-phase-expanding.has-action .pui-dynamic-message-preview__action,
.pui-dynamic-message-preview.is-phase-visible.has-action .pui-dynamic-message-preview__action {
  width: auto !important;
  min-width: 0 !important;
  max-width: 96px !important;
}

.pui-dynamic-message-showcase__feed {
  min-height: 0;
  overflow: auto;
  padding-top: var(--pui-dynamic-message-feed-clearance);
  padding-bottom: var(--pui-preview-content-gap);
  border-radius: var(--pui-preview-radius-large);
}

.pui-dynamic-message-showcase__feed .pui-cell {
  border-radius: 0;
}

.pui-dynamic-message-showcase__triggers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
}

.pui-dynamic-message-showcase__triggers .pui-button-preview:last-child {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  .pui-top-loading-preview,
  .pui-top-loading-preview__bar,
  .pui-dynamic-message-preview,
  .pui-dynamic-message-preview__content,
  .pui-dynamic-message-preview__indicator,
  .pui-dynamic-message-preview__content span,
  .pui-dynamic-message-preview__action,
  .pui-dynamic-message-preview__close { transition-duration: 1ms !important; }

  .pui-dynamic-message-preview__edge-flow { opacity: 0 !important; }
  .pui-dynamic-message-preview__edge-beam { animation: none !important; }

  .pui-top-loading-preview__one,
  .pui-top-loading-preview__two { animation: none !important; }
}

@keyframes pui-dynamic-message-edge-flow {
  0% {
    background-position: 0 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    background-position: 100% 100%;
    opacity: 0;
  }
}

/* Checkbox: native input semantics with WXML-mappable surfaces and motion. */
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-showcase {
  display: grid;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview {
  --pui-checkbox-preview-mark-size: 18px;
  display: inline-flex;
  gap: var(--pui-preview-space-step-7);
  align-items: flex-start;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  padding: var(--pui-preview-space-xxs) 0;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pui-preview-radius-control);
  transition: color var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), background-color var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), border-color var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), border-radius var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), box-shadow var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), opacity var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--small { --pui-checkbox-preview-mark-size: 15px; gap: var(--pui-preview-space-step-5); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--large { --pui-checkbox-preview-mark-size: 21px; gap: var(--pui-preview-space-step-9); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--right { flex-direction: row-reverse; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-block { display: flex; width: 100%; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-bordered { padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12); background: var(--preview-surface); border-color: var(--border); box-shadow: var(--preview-shadow-card); -webkit-backdrop-filter: var(--preview-blur); backdrop-filter: var(--preview-blur); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-bordered.is-checked,
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-bordered.is-indeterminate { border-color: var(--text); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-invalid { border-color: var(--danger); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-disabled { opacity: .45; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-readonly { opacity: .72; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-loading { opacity: .68; }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__target {
  position: relative;
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  min-height: 26px;
  margin: 0;
  place-items: center;
  cursor: pointer;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__target input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__target:focus-within .pui-checkbox-preview__mark {
  outline: 2px solid color-mix(in srgb, var(--text) 18%, transparent);
  outline-offset: 2px;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__target:active .pui-checkbox-preview__mark { transform: scale(.94); }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__mark {
  position: relative;
  display: grid;
  width: var(--pui-checkbox-preview-mark-size);
  height: var(--pui-checkbox-preview-mark-size);
  overflow: hidden;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--pui-control-outline-color);
  border-radius: calc(var(--pui-preview-radius-control) * .66);
  transform: scale(1);
  place-items: center;
  transition: color var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), background-color var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), border-color var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), border-radius var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), transform var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-checked .pui-checkbox-preview__mark,
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-indeterminate .pui-checkbox-preview__mark { color: var(--surface-solid); background: var(--text); border-color: var(--text); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-invalid .pui-checkbox-preview__mark { border-color: var(--danger); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-invalid.is-checked .pui-checkbox-preview__mark,
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-invalid.is-indeterminate .pui-checkbox-preview__mark { background: var(--danger); border-color: var(--danger); }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__indicator {
  position: absolute;
  inset: 0;
  display: grid;
  opacity: 0;
  transform: scale(.45) rotate(-8deg);
  place-items: center;
  transition: opacity var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease), transform var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-checked .pui-checkbox-preview__indicator--check { opacity: 1; transform: scale(1) rotate(0); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-indeterminate .pui-checkbox-preview__indicator--check { opacity: 0; transform: scale(.45) rotate(-8deg); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-indeterminate .pui-checkbox-preview__indicator--mixed { opacity: 1; transform: scale(1) rotate(0); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__mark .pui-loading { color: currentColor; }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-sample {
  flex: 0 0 28px;
  width: 28px;
  min-height: 28px;
  gap: 0;
  padding: 0;
  border: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-sample .pui-checkbox-preview__target {
  width: 28px;
  min-height: 28px;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 26px;
  padding: var(--pui-preview-space-step-1) 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
  transition: opacity var(--pui-checkbox-preview-duration) var(--pui-checkbox-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--right .pui-checkbox-preview__body { text-align: right; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__body:hover:not(:disabled) { opacity: .74; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-content-disabled .pui-checkbox-preview__body,
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-readonly .pui-checkbox-preview__body { cursor: default; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__label { min-width: 0; font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-label); overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--small .pui-checkbox-preview__label { font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--large .pui-checkbox-preview__label { font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-medium); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__label b { margin-right: var(--pui-preview-space-step-3); color: var(--danger); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__body > small,
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__slot-content small { margin-top: var(--pui-preview-space-xxs); color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__default-slot { display: inline-flex; align-items: center; margin-top: var(--pui-preview-space-step-5); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__default-slot .pui-tag { padding: var(--pui-preview-space-step-1) var(--pui-preview-space-step-5); font-size: var(--pui-font-size-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__slot-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pui-preview-space-step-3) var(--pui-preview-space-step-7); align-items: center; min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__slot-content strong { min-width: 0; font-size: var(--pui-font-size-caption); overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__slot-content small { grid-column: 1 / -1; }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--pui-preview-space-step-7);
  align-items: center;
  min-width: 0;
  padding: var(--pui-preview-space-step-9) var(--pui-preview-space-step-11);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-control);
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__event span { min-width: 0; overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__event code { color: var(--subtle); font: inherit; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pui-preview-space-sm); min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__methods .pui-button-preview { width: 100%; min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__group { display: grid; gap: var(--pui-preview-space-step-7); min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__group-event { min-width: 0; color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }

body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-checkbox-preview.is-bordered,
body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-checkbox-preview__event { background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-checkbox-preview.is-bordered,
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-checkbox-preview__event { box-shadow: none; }

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-bordered { padding-right: var(--pui-preview-space-normal); padding-left: var(--pui-preview-space-normal); }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-checkbox-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-checkbox-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-checkbox-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* Checkbox / CheckboxGroup public contract overrides. */
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--pui-section-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-showcase__section {
  display: flex;
  flex-direction: column;
  gap: var(--pui-preview-content-gap);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-showcase__section > h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview {
  --pui-checkbox-preview-ease: cubic-bezier(.2, 0, 0, 1);
  --pui-checkbox-preview-mark-size: 18px;
  min-height: 32px;
  padding: var(--pui-preview-space-sm) var(--pui-preview-space-normal);
  background: var(--preview-surface);
  border-color: var(--border);
  box-shadow: var(--preview-shadow-card);
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-checked,
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-indeterminate { border-color: color-mix(in srgb, var(--text) 44%, var(--border)); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-borderless { padding-right: 0; padding-left: 0; background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-disabled { opacity: .45; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-readonly { opacity: .72; }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__native-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__indicator--unchecked { opacity: 1; transform: scale(1) rotate(0); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-checked .pui-checkbox-preview__indicator--unchecked,
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview.is-indeterminate .pui-checkbox-preview__indicator--unchecked { opacity: 0; transform: scale(.45) rotate(-8deg); }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--icon-circle .pui-checkbox-preview__mark { border-radius: var(--pui-preview-radius-round); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--icon-rectangle .pui-checkbox-preview__mark { border-radius: calc(var(--pui-preview-radius-control) * .45); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--icon-line .pui-checkbox-preview__mark { color: var(--text); background: transparent; border-color: transparent; border-radius: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--icon-line.is-checked .pui-checkbox-preview__mark,
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview--icon-line.is-indeterminate .pui-checkbox-preview__mark { color: var(--text); background: transparent; border-color: transparent; }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__body {
  padding: 0;
  cursor: pointer;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__label,
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__body > small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__label { font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-small); }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__body > small { font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__group {
  display: flex;
  flex-flow: row wrap;
  gap: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__group > .pui-checkbox-preview.is-block { flex-basis: 100%; }
body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__group.is-horizontal > .pui-checkbox-preview { flex: 1 1 92px; }

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__feedback {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  overflow-wrap: anywhere;
}

body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-checkbox-preview { box-shadow: none; }
body .app-shell[data-frost="off"][data-page-mode] .preview-stage .pui-checkbox-preview { -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-checkbox-showcase__grid { grid-template-columns: minmax(0, 1fr); }
  body .app-shell[data-page-mode] .preview-stage .pui-checkbox-preview__group.is-horizontal > .pui-checkbox-preview { flex-basis: 84px; }
}

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pull-refresh-showcase__methods .pui-button {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pull-refresh-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pull-refresh-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pull-refresh-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}


body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase {
  display: grid;
  gap: var(--pui-preview-space-normal);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase__canvas {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--preview-border);
  border-radius: var(--pui-preview-radius-card);
  isolation: isolate;
}

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase__anchor {
  position: absolute;
  top: 44%;
  z-index: 2;
  display: inline-flex;
  min-width: 0;
  transform: translateY(-50%);
}

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase__canvas--top .pui-tooltip-showcase__anchor,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase__canvas--bottom .pui-tooltip-showcase__anchor {
  left: 50%;
  transform: translate(-50%, -50%);
}

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase__canvas--left .pui-tooltip-showcase__anchor { right: var(--pui-preview-panel-padding-spacious); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase__canvas--right .pui-tooltip-showcase__anchor { left: var(--pui-preview-panel-padding-spacious); }

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview {
  position: absolute;
  z-index: var(--pui-tooltip-preview-z-index, 3);
  display: block;
  box-sizing: border-box;
  width: max-content;
  min-width: 60px;
  max-width: min(var(--pui-tooltip-preview-max-width, 210px), calc(100% - 24px));
  padding: var(--pui-preview-space-step-7) var(--pui-preview-space-step-9);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  white-space: normal;
  overflow-wrap: anywhere;
  background: var(--surface-solid);
  border: 1px solid var(--preview-border);
  border-radius: var(--pui-preview-radius-control);
  box-shadow: var(--preview-shadow-card);
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
  transition: opacity var(--pui-tooltip-preview-duration, 500ms) var(--pui-tooltip-preview-ease, ease), transform var(--pui-tooltip-preview-duration, 500ms) var(--pui-tooltip-preview-ease, ease), background-color var(--pui-tooltip-preview-duration, 500ms) var(--pui-tooltip-preview-ease, ease), border-color var(--pui-tooltip-preview-duration, 500ms) var(--pui-tooltip-preview-ease, ease), border-radius var(--pui-tooltip-preview-duration, 500ms) var(--pui-tooltip-preview-ease, ease), box-shadow var(--pui-tooltip-preview-duration, 500ms) var(--pui-tooltip-preview-ease, ease);
  will-change: opacity, transform;
}

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview.is-active { opacity: 1; pointer-events: auto; }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview.is-active.is-disabled { opacity: .64; }

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top { bottom: calc(100% + var(--pui-tooltip-preview-offset, var(--pui-preview-space-sm))); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom { top: calc(100% + var(--pui-tooltip-preview-offset, var(--pui-preview-space-sm))); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left { right: calc(100% + var(--pui-tooltip-preview-offset, var(--pui-preview-space-sm))); max-width: min(var(--pui-tooltip-preview-max-width, 210px), 150px); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right { left: calc(100% + var(--pui-tooltip-preview-offset, var(--pui-preview-space-sm))); max-width: min(var(--pui-tooltip-preview-max-width, 210px), 150px); }

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.pui-tooltip-preview--align-start { left: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.pui-tooltip-preview--align-center,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.pui-tooltip-preview--align-center { left: 50%; }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.pui-tooltip-preview--align-end,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.pui-tooltip-preview--align-end { right: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.pui-tooltip-preview--align-start { top: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.pui-tooltip-preview--align-center,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.pui-tooltip-preview--align-center { top: 50%; }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.pui-tooltip-preview--align-end,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.pui-tooltip-preview--align-end { bottom: 0; }

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.pui-tooltip-preview--align-end { transform: translateY(4px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.pui-tooltip-preview--align-center { transform: translate(-50%, 4px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.pui-tooltip-preview--align-end { transform: translateY(-4px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.pui-tooltip-preview--align-center { transform: translate(-50%, -4px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.pui-tooltip-preview--align-end { transform: translateX(4px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.pui-tooltip-preview--align-center { transform: translate(4px, -50%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.pui-tooltip-preview--align-end { transform: translateX(-4px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.pui-tooltip-preview--align-center { transform: translate(-4px, -50%) scale(.98); }

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.is-active.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.is-active.pui-tooltip-preview--align-end,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.is-active.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.is-active.pui-tooltip-preview--align-end { transform: translateY(0) scale(1); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.is-active.pui-tooltip-preview--align-center,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.is-active.pui-tooltip-preview--align-center { transform: translate(-50%, 0) scale(1); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.is-active.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.is-active.pui-tooltip-preview--align-end,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.is-active.pui-tooltip-preview--align-start,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.is-active.pui-tooltip-preview--align-end { transform: translateX(0) scale(1); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.is-active.pui-tooltip-preview--align-center,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.is-active.pui-tooltip-preview--align-center { transform: translate(0, -50%) scale(1); }

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  content: '';
  background: var(--surface-solid);
  border: 1px solid var(--preview-border);
}
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top::before { bottom: calc(0px - var(--pui-preview-space-step-5)); border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom::before { top: calc(0px - var(--pui-preview-space-step-5)); border-right: 0; border-bottom: 0; transform: translateX(-50%) rotate(45deg); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left::before { right: calc(0px - var(--pui-preview-space-step-5)); border-bottom: 0; border-left: 0; transform: translateY(-50%) rotate(45deg); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right::before { left: calc(0px - var(--pui-preview-space-step-5)); border-top: 0; border-right: 0; transform: translateY(-50%) rotate(45deg); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.pui-tooltip-preview--align-start::before,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.pui-tooltip-preview--align-start::before { left: var(--pui-preview-space-step-16); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.pui-tooltip-preview--align-center::before,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.pui-tooltip-preview--align-center::before { left: 50%; }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--top.pui-tooltip-preview--align-end::before,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--bottom.pui-tooltip-preview--align-end::before { right: var(--pui-preview-space-step-12); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.pui-tooltip-preview--align-start::before,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.pui-tooltip-preview--align-start::before { top: var(--pui-preview-space-step-16); }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.pui-tooltip-preview--align-center::before,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.pui-tooltip-preview--align-center::before { top: 50%; }
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left.pui-tooltip-preview--align-end::before,
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right.pui-tooltip-preview--align-end::before { bottom: var(--pui-preview-space-step-12); }

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview__slot {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-space-sm);
}

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase__methods {
  position: absolute;
  right: var(--pui-preview-space-step-12);
  bottom: var(--pui-preview-space-step-42);
  left: var(--pui-preview-space-step-12);
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-content-gap);
  flex-wrap: wrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase__canvas > p {
  position: absolute;
  right: var(--pui-preview-space-step-12);
  bottom: var(--pui-preview-space-step-12);
  left: var(--pui-preview-space-step-12);
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase__canvas { min-height: 292px; }
  body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--left,
  body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview--right { max-width: min(var(--pui-tooltip-preview-max-width, 210px), 126px); }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-tooltip-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

.pui-tabs {
  justify-content: flex-start;
  gap: var(--pui-preview-content-gap);
}

.pui-tabs button {
  height: 32px;
  padding: 0 var(--pui-preview-space-step-12);
  border-radius: var(--pui-preview-radius-round);
}

.pui-tabs .is-active,
.pui-tabbar .is-active {
  color: var(--brand);
  background: var(--brand-soft);
}

.tabbar-screen {
  display: grid;
  gap: var(--pui-preview-space-step-240);
  min-height: 420px;
}

.pui-tabbar {
  position: sticky;
  bottom: 0;
  justify-content: space-around;
}

.pui-tabbar button {
  display: grid;
  place-items: center;
  gap: var(--pui-preview-space-step-3);
  min-width: 64px;
  min-height: 44px;
  font-size: var(--pui-font-size-caption);
}

.pui-steps span,
.pui-steps button {
  position: relative;
  flex: 1;
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  text-align: center;
  background: transparent;
  border: 0;
}

.pui-steps span::before,
.pui-steps button::before {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto var(--pui-preview-space-sm);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-round);
  content: "";
}

.pui-steps .is-done,
.pui-steps .is-active {
  color: var(--brand);
}

.pui-steps .is-done::before,
.pui-steps .is-active::before {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.back-top {
  position: absolute;
  right: var(--pui-preview-space-normal);
  bottom: var(--pui-preview-space-normal);
  width: 44px;
  height: 44px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 0;
  border-radius: var(--pui-preview-radius-round);
  box-shadow: var(--shadow-soft);
}

.long-list,
.index-list,
.sticky-demo,
.watermark-demo {
  position: relative;
}

.index-list strong {
  display: block;
  margin: var(--pui-preview-space-normal) 0 var(--pui-preview-space-sm);
  color: var(--brand);
}

.index-bar {
  position: absolute;
  top: var(--pui-preview-space-xl);
  right: var(--pui-preview-content-gap);
  display: grid;
  gap: var(--pui-preview-space-xxs);
}

.index-bar button {
  width: 18px;
  height: 18px;
  color: var(--brand);
  background: transparent;
  border: 0;
  border-radius: var(--pui-preview-radius-round);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  text-align: center;
}

.index-bar button.is-active {
  color: #fff;
  background: var(--brand);
}

.side-demo {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--pui-preview-space-xs);
}

.side-demo nav {
  display: grid;
  align-content: start;
  gap: var(--pui-preview-space-xs);
}

.side-demo nav button {
  min-height: 38px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-14);
}

.side-demo nav .is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.list-footer {
  display: block;
  width: 100%;
  padding: var(--pui-preview-space-normal) 0;
  color: var(--subtle);
  background: transparent;
  border: 0;
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  text-align: center;
}

.collapse-item {
  width: 100%;
  padding: var(--pui-preview-space-lg);
  color: var(--text);
  text-align: left;
  border: 1px solid var(--glass-border);
}

.collapse-item p {
  margin: var(--pui-preview-content-gap) 0 0;
  color: var(--muted);
}

.swipe-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 58px;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--pui-preview-radius-step-18);
}

.swipe-cell > button:first-child {
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
}

.swipe-cell .pui-cell {
  border-radius: var(--pui-preview-radius-step-18) 0 0 var(--pui-preview-radius-step-18);
}

.swipe-cell button {
  color: #fff;
  background: var(--brand);
  border: 0;
  font-weight: var(--pui-font-weight-heavy);
}

.swipe-cell .danger {
  background: var(--danger);
}

.count-down {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-content-gap);
  min-height: 120px;
}

.count-down span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  font-size: var(--pui-font-size-headline);
  font-weight: var(--pui-font-weight-heavy);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: var(--pui-preview-radius-step-18);
  box-shadow: var(--shadow-soft);
}

.count-down i {
  color: var(--subtle);
  font-style: normal;
  font-weight: var(--pui-font-weight-heavy);
}

.pui-table {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-step-18);
  box-shadow: var(--shadow-soft);
}

.pui-table table {
  width: 100%;
  min-width: 360px;
  border-spacing: 0;
}

.pui-table th,
.pui-table td {
  padding: var(--pui-preview-space-step-12);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.pui-table th {
  color: var(--text);
  background: var(--surface-soft);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--pui-preview-space-step-7);
}

.calendar-grid button {
  aspect-ratio: 1;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-13);
  font-weight: var(--pui-font-weight-heavy);
}

.calendar-grid .is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.overlay-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  overflow: hidden;
  background: rgba(16, 24, 40, 0.28);
  border-radius: var(--pui-preview-radius-step-26);
}

.overlay-box > span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: var(--pui-font-weight-heavy);
}

.overlay-panel {
  position: absolute;
  right: var(--pui-preview-space-step-12);
  bottom: var(--pui-preview-space-step-12);
  left: var(--pui-preview-space-step-12);
  display: grid;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-panel-padding-spacious);
}

.pui-popup-preview {
  --pui-popup-preview-inset: var(--pui-surface-inset);
  --pui-popup-preview-stack-gap: var(--pui-surface-stack-gap);
  --pui-popup-preview-section-gap: var(--pui-surface-section-gap);
  gap: 0;
  overflow: hidden;
  padding: 0;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-color: color-mix(in srgb, #fff 76%, transparent);
  border-radius: var(--pui-preview-radius-step-30);
  box-shadow: var(--shadow);
}

.pui-popup-preview__header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: start;
  gap: var(--pui-preview-content-gap);
  min-height: 58px;
  padding: var(--pui-preview-space-step-12) var(--pui-preview-space-step-12) var(--pui-preview-space-sm);
}

.pui-popup-preview__actions {
  display: flex;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
}

.pui-popup-preview__actions--right {
  justify-content: flex-end;
}

.pui-popup-preview__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text);
  font-size: var(--pui-font-size-title-medium);
  font-weight: var(--pui-font-weight-heavy);
  line-height: var(--pui-line-height-none);
  background: color-mix(in srgb, #fff 62%, transparent);
  border: 0;
  border-radius: var(--pui-preview-radius-round);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 68%, transparent), var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.pui-popup-preview__icon svg {
  width: 16px;
  height: 16px;
}

.pui-popup-preview__icon--check {
  color: var(--success);
}

.pui-popup-preview__icon--close {
  color: var(--muted);
}

.pui-popup-preview__title-area {
  min-width: 0;
  padding-top: var(--pui-preview-space-step-1);
  text-align: center;
}

.pui-popup-preview__title-area strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: var(--pui-font-size-title-small);
  font-weight: var(--pui-font-weight-heavy);
  line-height: var(--pui-line-height-body-large);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-popup-preview__title-area span {
  display: block;
  overflow: hidden;
  margin-top: var(--pui-preview-space-xxs);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-popup-preview__body {
  display: grid;
  gap: var(--pui-preview-space-sm);
  padding: var(--pui-preview-space-sm) var(--pui-preview-space-step-16) var(--pui-preview-panel-padding-spacious);
}

.app-shell[data-spacing="equal"] .pui-popup-preview {
  gap: var(--pui-popup-preview-section-gap);
}

.app-shell[data-spacing="equal"] .pui-popup-preview__body {
  gap: var(--pui-popup-preview-stack-gap);
  padding: 0 var(--pui-popup-preview-inset) var(--pui-popup-preview-inset);
}

.app-shell[data-spacing="equal"] .pui-popup-preview__header {
  gap: var(--pui-popup-preview-stack-gap);
  padding: var(--pui-popup-preview-inset) var(--pui-popup-preview-inset) 0;
}

.pui-popup-preview__body p {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-medium);
}

.pui-popup-preview__body .pui-popup-preview__feedback {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

.overlay-box--top .overlay-panel {
  top: var(--pui-preview-space-step-12);
  bottom: auto;
}

.overlay-box--left .overlay-panel,
.overlay-box--right .overlay-panel {
  top: var(--pui-preview-space-step-12);
  bottom: var(--pui-preview-space-step-12);
  width: 72%;
}

.overlay-box--left .overlay-panel {
  right: auto;
}

.overlay-box--right .overlay-panel {
  left: auto;
}

.pui-dropdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pui-preview-content-gap);
}

.pui-dropdown button {
  height: 42px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-xlarge);
  box-shadow: var(--shadow-soft);
  font-weight: var(--pui-font-weight-heavy);
}

.dropdown-panel {
  padding: var(--pui-preview-space-step-12);
}

.overlay-mask-button {
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  border: 0;
  font-weight: var(--pui-font-weight-heavy);
}

.pull-refresh-showcase,
.virtual-list-showcase,
.sticky-showcase,
.watermark-showcase {
  display: grid;
  gap: var(--pui-preview-space-normal);
}

.virtual-list-preview__viewport,
.virtual-list-preview__empty,
.sticky-preview,
.watermark-preview {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.pull-refresh-preview {
  position: relative;
  max-height: 420px;
  min-height: 280px;
  overflow-y: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.pull-refresh-preview.is-scrollbar-hidden {
  scrollbar-width: none;
}

.pull-refresh-preview.is-scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.pull-refresh-preview__indicator {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  box-sizing: border-box;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  pointer-events: none;
  transition: height var(--pull-refresh-duration, 500ms) var(--pull-refresh-ease, var(--ease-standard));
}

.pull-refresh-preview__indicator > div {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-7);
  padding: var(--pui-preview-space-step-5) var(--pui-preview-space-step-12) var(--pui-preview-space-step-9);
}

.pull-refresh-preview__status-icon {
  transition: transform var(--pull-refresh-duration, 500ms) var(--pull-refresh-ease, var(--ease-standard));
}

.pull-refresh-preview.is-disabled {
  opacity: 0.56;
  touch-action: auto;
}

.pull-refresh-preview__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--pui-preview-space-step-1);
  padding: var(--pui-preview-content-gap);
  background: transparent;
  transition: transform var(--pull-refresh-duration, 500ms) var(--pull-refresh-ease, var(--ease-standard));
}

.pull-refresh-preview__header {
  margin: 0 0 var(--pui-preview-content-gap);
}

.pull-refresh-preview.is-dragging .pull-refresh-preview__indicator,
.pull-refresh-preview.is-dragging .pull-refresh-preview__content {
  transition-duration: 0ms;
}

.pull-refresh-preview.is-ready .pull-refresh-preview__indicator > div,
.pull-refresh-preview.is-loading .pull-refresh-preview__indicator > div {
  color: var(--brand);
}

.pull-refresh-preview.is-ready .pull-refresh-preview__status-icon {
  transform: rotate(180deg);
}

.pull-refresh-preview.is-complete .pull-refresh-preview__indicator > div {
  color: var(--success);
}

@media (prefers-reduced-motion: reduce) {
  .pull-refresh-showcase *,
  .pull-refresh-showcase *::before,
  .pull-refresh-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

.advanced-event {
  min-height: 18px;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-normal);
}

.virtual-list-preview__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-space-sm) var(--pui-preview-space-step-12);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
}

.virtual-list-preview__summary span {
  min-width: 0;
}

.virtual-list-preview__summary strong {
  color: var(--text);
}

.virtual-list-preview {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.virtual-list-preview.is-borderless {
  border-color: transparent;
}

.virtual-list-preview__viewport {
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.virtual-list-preview__viewport.is-scrollbar-hidden {
  scrollbar-width: none;
}

.virtual-list-preview__viewport.is-scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.virtual-list-preview__viewport.is-borderless {
  border-color: transparent;
}

.virtual-list-preview__viewport.is-disabled {
  opacity: 0.56;
}

.virtual-list-preview__viewport > [data-virtual-list-content] {
  min-width: 0;
}

.virtual-list-preview__spacer {
  width: 1px;
  pointer-events: none;
}

.virtual-list-preview__item {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--glass-border);
  font: inherit;
  text-align: left;
  transition: color var(--virtual-list-duration) var(--virtual-list-ease), background-color var(--virtual-list-duration) var(--virtual-list-ease), opacity var(--virtual-list-duration) var(--virtual-list-ease), box-shadow var(--virtual-list-duration) var(--virtual-list-ease);
}

.virtual-list-preview__item[aria-disabled="false"] {
  cursor: pointer;
}

.virtual-list-preview__item:hover[aria-disabled="false"] {
  background: var(--surface-soft);
}

.virtual-list-preview__item:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 36%, transparent); outline-offset: -2px; }

.virtual-list-preview__item.is-selected {
  color: var(--brand);
  background: var(--brand-soft);
}

.virtual-list-preview__item.is-active {
  box-shadow: inset 2px 0 0 var(--brand);
}

.virtual-list-preview__item.is-disabled {
  opacity: 0.5;
}

.virtual-list-preview__item-body {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.virtual-list-preview__item-body > .pui-cell {
  box-sizing: border-box;
  height: 100%;
  padding: var(--pui-preview-space-step-7) var(--pui-preview-space-normal);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.virtual-list-preview__item-body .pui-cell__main {
  min-width: 0;
}

.virtual-list-preview__accessory {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  max-width: 42%;
  padding: 0 var(--pui-preview-space-normal) 0 var(--pui-preview-space-xs);
}

.virtual-list-preview__custom-item {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  padding: var(--pui-preview-space-step-7) var(--pui-preview-space-normal);
}

.virtual-list-preview__custom-item > span {
  display: grid;
  flex: 1;
  gap: var(--pui-preview-space-xxs);
  min-width: 0;
}

.virtual-list-preview__custom-item strong,
.virtual-list-preview__custom-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.virtual-list-preview__custom-item strong {
  font-size: var(--pui-font-size-body-small);
}

.virtual-list-preview__custom-item small,
.virtual-list-preview__value,
.virtual-list-preview__item em {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-style: normal;
}

.virtual-list-preview__value {
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.virtual-list-preview__badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--pui-preview-space-xs);
  color: var(--surface);
  background: var(--brand);
  border-radius: var(--pui-preview-radius-round);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  line-height: var(--pui-line-height-none);
}

.virtual-list-preview__badge.is-dot {
  min-width: 7px;
  width: 7px;
  height: 7px;
  padding: 0;
}

.virtual-list-preview__selected-icon {
  flex: 0 0 auto;
  color: var(--brand);
}

.virtual-list-preview__state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--pui-preview-space-normal);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--pui-preview-space-xl);
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-bold);
  text-align: center;
}

.virtual-list-preview__state.is-error {
  color: var(--danger);
}

.virtual-list-preview__slot {
  min-width: 0;
  padding: var(--pui-preview-space-normal);
}

.virtual-list-preview__slot.is-header {
  border-bottom: 1px solid var(--glass-border);
}

.virtual-list-preview__slot.is-footer {
  display: flex;
  gap: var(--pui-preview-content-gap);
  border-top: 1px solid var(--glass-border);
}

.virtual-list-preview__slot.is-footer .pui-button {
  flex: 1;
  min-width: 0;
}

.virtual-list-showcase__methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
}

.virtual-list-showcase__methods .pui-button {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .virtual-list-showcase *,
  .virtual-list-showcase *::before,
  .virtual-list-showcase *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

.sticky-preview {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-width: none;
  background: var(--surface-soft);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sticky-preview::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sticky-preview__boundary {
  position: relative;
  min-width: 0;
}

.sticky-preview__content {
  box-sizing: border-box;
  min-width: 0;
  padding-block: var(--pui-preview-device-padding);
}

.sticky-preview__header {
  position: sticky;
  inset-inline: 0;
  width: calc(100% - 16px);
  margin-inline: var(--pui-preview-content-gap);
  min-width: 0;
  background: var(--surface);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
}

.sticky-preview.is-disabled .sticky-preview__header {
  position: relative;
  top: auto !important;
}

body .app-shell[data-page-mode] .preview-stage .sticky-preview__content > .pui-cell,
body .app-shell[data-page-mode] .preview-stage .sticky-preview__boundary > .pui-cell {
  margin: 0;
  background: var(--surface-solid);
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .app-shell[data-page-mode] .preview-stage .sticky-preview__header > .pui-cell {
  border-radius: inherit;
}

.sticky-showcase {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 0;
}

.watermark-preview {
  position: relative;
  min-width: 0;
  min-height: 202px;
  overflow: hidden;
  isolation: isolate;
  /* Watermark is a transparent overlay. Its content slot owns the visible PUI surface. */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.watermark-preview__content-text {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-lg) 0;
  min-width: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

.watermark-preview__slot-action {
  position: relative;
  z-index: 0;
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-lg);
}

.watermark-preview__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.watermark-preview__mark {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  overflow: visible;
  text-align: center;
  transform-origin: center;
  transition: left var(--watermark-duration, 500ms) var(--pui-ease-standard), top var(--watermark-duration, 500ms) var(--pui-ease-standard), transform var(--watermark-duration, 500ms) var(--pui-ease-standard);
}

.watermark-preview__image {
  display: block;
  flex: none;
  max-width: 56px;
  max-height: 56px;
}

.watermark-preview__image.is-grayscale {
  filter: grayscale(1);
}

.watermark-preview__text {
  display: block;
  min-width: 0;
  line-height: var(--pui-line-height-body-small);
  overflow-wrap: anywhere;
}

.watermark-preview.is-reduced-motion,
.watermark-preview.is-reduced-motion *,
.watermark-preview.is-reduced-motion *::before,
.watermark-preview.is-reduced-motion *::after {
  transition-duration: 1ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .watermark-showcase *,
  .watermark-showcase *::before,
  .watermark-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 420px) {
  .watermark-preview {
    min-height: 188px;
  }
}

.token-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  gap: var(--pui-preview-space-step-12);
  padding: var(--pui-preview-space-step-12);
}

.token-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-row i {
  height: 34px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: var(--pui-preview-radius-large);
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-space-normal);
}

.color-grid span {
  display: grid;
  align-items: end;
  min-height: 92px;
  padding: var(--pui-preview-space-normal);
  color: #fff;
  border-radius: var(--pui-preview-radius-xxlarge);
  box-shadow: var(--shadow-soft);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.color-doc {
  display: grid;
  gap: var(--pui-preview-space-step-24);
}

.color-doc__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pui-preview-space-xxl);
  padding-bottom: var(--pui-preview-space-step-22);
  border-bottom: 1px solid var(--border);
}

.color-doc__summary > div:first-child {
  min-width: 0;
}

.color-doc__summary > div:first-child > span,
.color-doc__mode header span {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.color-doc__summary h3,
.color-doc__mode h3 {
  margin: var(--pui-preview-space-sm) 0 0;
  color: var(--text);
}

.color-doc__summary h3 {
  font-size: var(--pui-font-size-title-large);
  line-height: var(--pui-line-height-title-large);
}

.color-doc__summary p {
  max-width: 680px;
  margin: var(--pui-preview-content-gap) 0 0;
  color: var(--muted);
  line-height: var(--pui-line-height-relaxed);
}

.color-doc__facts {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: var(--pui-preview-content-gap);
}

.color-doc__facts strong {
  display: grid;
  min-width: 72px;
  padding: var(--pui-preview-space-step-12);
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-14);
  font-size: var(--pui-font-size-title-medium);
}

.color-doc__facts span {
  margin-top: var(--pui-preview-space-step-3);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.color-doc__usage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pui-preview-space-normal);
}

.color-doc__usage div {
  display: grid;
  gap: var(--pui-preview-space-step-5);
  padding: var(--pui-preview-space-lg) var(--pui-preview-space-step-16);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-xlarge);
}

.color-doc__usage strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-small);
}

.color-doc__usage span,
.color-doc__rule span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-normal);
}

.color-doc__mode {
  display: grid;
  gap: var(--pui-preview-space-step-16);
  padding: var(--pui-preview-panel-padding-spacious);
  border: 1px solid;
  border-radius: var(--pui-preview-radius-xxlarge);
}

.color-doc__mode--light {
  color: #18181b;
  background: #fff;
  border-color: #e4e4e7;
}

.color-doc__mode--dark {
  color: #fafafa;
  background: #09090b;
  border-color: #27272a;
}

.color-doc__mode header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pui-preview-space-step-16);
}

.color-doc__mode--light header span {
  color: #71717a;
}

.color-doc__mode--dark header span {
  color: #a1a1aa;
}

.color-doc__mode h3 {
  color: inherit;
  font-size: var(--pui-font-size-title-small);
}

.color-doc__mode header > strong {
  color: inherit;
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  white-space: nowrap;
}

.color-doc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: var(--pui-preview-space-normal);
}

.color-doc__swatch {
  min-width: 0;
  overflow: hidden;
  border: 1px solid;
  border-radius: var(--pui-preview-radius-step-15);
}

.color-doc__mode--light .color-doc__swatch {
  background: #fff;
  border-color: #e4e4e7;
}

.color-doc__mode--dark .color-doc__swatch {
  background: #18181b;
  border-color: #27272a;
}

.color-doc__sample {
  display: grid;
  min-height: 82px;
  place-items: center;
  background-image: linear-gradient(45deg, rgba(127, 127, 127, 0.08) 25%, transparent 25%, transparent 75%, rgba(127, 127, 127, 0.08) 75%), linear-gradient(45deg, rgba(127, 127, 127, 0.08) 25%, transparent 25%, transparent 75%, rgba(127, 127, 127, 0.08) 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

.color-doc__sample span {
  font-size: var(--pui-font-size-title-medium);
  font-weight: var(--pui-font-weight-heavy);
  letter-spacing: -0.03em;
}

.color-doc__copy {
  display: grid;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-step-11) var(--pui-preview-space-step-12) var(--pui-preview-space-step-12);
}

.color-doc__copy code {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-doc__copy span {
  min-height: 34px;
  color: inherit;
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  opacity: 0.68;
}

.color-doc__copy strong {
  color: inherit;
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  opacity: 0.86;
  overflow-wrap: anywhere;
}

.color-doc--compact .color-doc__grid {
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
}

.color-doc--compact .color-doc__sample {
  min-height: 58px;
}

.color-doc--compact .color-doc__copy span {
  display: none;
}

.color-doc__rule {
  display: grid;
  gap: var(--pui-preview-space-step-5);
  padding: var(--pui-preview-space-step-16) var(--pui-preview-panel-padding-spacious);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-xlarge);
}

.color-doc__rule strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-small);
}

.color-doc__rule code {
  color: var(--text);
  font-size: var(--pui-font-size-caption);
}

@media (max-width: 720px) {
  .color-doc__summary {
    align-items: stretch;
    flex-direction: column;
  }

  .color-doc__facts,
  .color-doc__usage {
    grid-template-columns: 1fr;
  }

  .color-doc__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .color-doc__mode header {
    align-items: flex-start;
    flex-direction: column;
  }

  .color-doc__grid,
  .color-doc--compact .color-doc__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.typography-doc {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space);
  color: var(--text);
}

.typography-doc__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pui-preview-space);
  align-items: end;
  padding-bottom: var(--pui-preview-space);
  border-bottom: 1px solid var(--border);
}

.typography-doc__summary > div:first-child > span,
.typography-doc__role header span,
.typography-doc__overflow span {
  color: var(--subtle);
  font-size: var(--pui-preview-doc-meta-size);
  font-weight: var(--pui-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.typography-doc__summary h3 {
  margin: var(--pui-preview-space-step-5) 0 0;
  font-size: var(--pui-preview-doc-title-size);
  line-height: var(--pui-preview-doc-title-line-height);
}

.typography-doc__summary p {
  max-width: 660px;
  margin: var(--pui-preview-space-sm) 0 0;
  color: var(--muted);
  font-size: var(--pui-preview-doc-body-size);
  line-height: var(--pui-preview-doc-body-line-height);
}

.typography-doc__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: var(--pui-preview-space-xs);
}

.typography-doc__facts strong {
  display: grid;
  min-height: 64px;
  place-content: center;
  padding: var(--pui-preview-space-xs);
  text-align: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

.typography-doc__facts span {
  margin-top: var(--pui-preview-space-step-3);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  letter-spacing: 0.04em;
}

.typography-doc__principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pui-preview-space-xs);
}

.typography-doc__principles div {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-sm);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

.typography-doc__principles strong {
  font-size: var(--pui-font-size-caption);
}

.typography-doc__principles span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typography-doc__roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-space-xs);
}

.typography-doc__role {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--pui-preview-space-sm);
  padding: var(--pui-preview-space);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.typography-doc__role header {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pui-preview-space-xs);
}

.typography-doc__role header strong {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typography-doc__sample {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.typography-doc__metrics {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--pui-preview-space-sm);
  align-items: center;
}

.typography-doc__metrics code,
.typography-doc__metrics span {
  max-width: 100%;
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-step-7);
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
}

.typography-doc--compact .typography-doc__roles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.typography-doc--compact .typography-doc__role {
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-sm);
}

.typography-doc__overflow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-space-xs);
}

.typography-doc__overflow > div {
  min-width: 0;
  padding: var(--pui-preview-space-sm);
  background: var(--surface-soft);
  border-radius: var(--pui-site-radius-surface);
}

.typography-doc__overflow p {
  margin: var(--pui-preview-content-gap) 0 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-label);
}

.typography-doc__truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typography-doc__clamp {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.typography-doc__rule {
  display: flex;
  gap: var(--pui-preview-space-sm);
  align-items: flex-start;
  padding: var(--pui-preview-space-sm);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  background: var(--surface-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--pui-site-radius-surface) var(--pui-site-radius-surface) 0;
}

.typography-doc__rule strong {
  flex: 0 0 auto;
  color: var(--text);
}

@media (max-width: 720px) {
  .typography-doc__summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .typography-doc__facts,
  .typography-doc__principles,
  .typography-doc__roles,
  .typography-doc--compact .typography-doc__roles,
  .typography-doc__overflow {
    grid-template-columns: minmax(0, 1fr);
  }

  .typography-doc__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .typography-doc__role header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.spacing-doc {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space);
  color: var(--text);
}

.spacing-doc__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pui-preview-space);
  align-items: end;
  padding-bottom: var(--pui-preview-space);
  border-bottom: 1px solid var(--border);
}

.spacing-doc__summary > div:first-child > span,
.spacing-doc__usage header span {
  color: var(--subtle);
  font-size: var(--pui-preview-doc-meta-size);
  font-weight: var(--pui-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spacing-doc__summary h3 {
  margin: var(--pui-preview-space-step-5) 0 0;
  font-size: var(--pui-preview-doc-title-size);
  line-height: var(--pui-preview-doc-title-line-height);
}

.spacing-doc__summary p {
  max-width: 660px;
  margin: var(--pui-preview-space-sm) 0 0;
  color: var(--muted);
  font-size: var(--pui-preview-doc-body-size);
  line-height: var(--pui-preview-doc-body-line-height);
}

.spacing-doc__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: var(--pui-preview-space-xs);
}

.spacing-doc__facts strong {
  display: grid;
  min-height: 64px;
  place-content: center;
  padding: var(--pui-preview-space-xs);
  text-align: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

.spacing-doc__facts span {
  margin-top: var(--pui-preview-space-step-3);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  letter-spacing: 0.04em;
}

.spacing-doc__guidance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pui-preview-space-xs);
}

.spacing-doc__guidance div {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-sm);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

.spacing-doc__guidance strong {
  font-size: var(--pui-font-size-caption);
}

.spacing-doc__guidance span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.spacing-doc__tokens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pui-preview-space-xs);
}

.spacing-doc__token {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.spacing-doc__token.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-soft);
}

.spacing-doc__token header {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pui-preview-space-sm);
}

.spacing-doc__token header strong {
  font-size: var(--pui-font-size-caption);
}

.spacing-doc__value {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spacing-doc__ruler {
  display: flex;
  height: 18px;
  min-width: 0;
  align-items: center;
  padding: 0 var(--pui-preview-space-sm);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-round);
}

.spacing-doc__ruler i {
  display: block;
  min-width: 2px;
  height: 6px;
  background: var(--brand);
  border-radius: var(--pui-preview-radius-round);
}

.spacing-doc__token code {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spacing-doc--compact .spacing-doc__guidance {
  display: none;
}

.spacing-doc--compact .spacing-doc__tokens {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.spacing-doc--compact .spacing-doc__token {
  gap: var(--pui-preview-space-sm);
  padding: var(--pui-preview-content-gap);
}

.spacing-doc--compact .spacing-doc__token header {
  align-items: flex-start;
  flex-direction: column;
}

.spacing-doc__usage {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-sm);
  padding: var(--pui-preview-space);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

.spacing-doc__usage header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-space-xs);
}

.spacing-doc__usage h4 {
  margin: var(--pui-preview-space-step-3) 0 0;
  font-size: var(--pui-font-size-body-medium);
}

.spacing-doc__usage header > code {
  max-width: 50%;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spacing-doc__demo-stage {
  min-width: 0;
  min-height: 100px;
  background: repeating-linear-gradient(135deg, transparent 0 8px, var(--border) 8px 9px);
  border: 1px dashed var(--border);
  border-radius: var(--pui-site-radius-surface);
}

.spacing-doc__demo-stage--padding > div,
.spacing-doc__demo-stage--margin > div {
  display: grid;
  min-width: 0;
  min-height: 64px;
  place-content: center;
  gap: var(--pui-preview-space-step-3);
  padding: var(--pui-preview-space-sm);
  text-align: center;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
}

.spacing-doc__demo-stage strong {
  font-size: var(--pui-font-size-caption);
}

.spacing-doc__demo-stage span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

.spacing-doc__demo-stage--gap {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: var(--pui-preview-space-sm);
}

.spacing-doc__demo-stage--gap span {
  display: grid;
  min-width: 0;
  min-height: 48px;
  flex: 1;
  place-content: center;
  padding: var(--pui-preview-space-xs);
  overflow: hidden;
  color: var(--text);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
}

.spacing-doc__rule {
  display: flex;
  gap: var(--pui-preview-space-sm);
  align-items: flex-start;
  padding: var(--pui-preview-space-sm);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  background: var(--surface-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--pui-site-radius-surface) var(--pui-site-radius-surface) 0;
}

.spacing-doc__rule strong {
  flex: 0 0 auto;
  color: var(--text);
}

@media (max-width: 720px) {
  .spacing-doc__summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .spacing-doc__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .spacing-doc__guidance,
  .spacing-doc__tokens,
  .spacing-doc--compact .spacing-doc__tokens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spacing-doc__usage header {
    align-items: flex-start;
    flex-direction: column;
  }

  .spacing-doc__usage header > code {
    max-width: 100%;
  }
}

@media (max-width: 440px) {
  .spacing-doc__guidance,
  .spacing-doc__tokens,
  .spacing-doc--compact .spacing-doc__tokens {
    grid-template-columns: minmax(0, 1fr);
  }
}

.utility-demo {
  width: 100%;
  background: var(--surface-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-site-radius-surface);
}

.utility-demo--flex {
  display: flex;
  align-items: center;
}

.utility-demo--column {
  display: flex;
  flex-direction: column;
}

.utility-demo--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.utility-demo div {
  min-width: 0;
  padding: var(--pui-preview-space-step-12);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-step-14);
}

.utility-demo .has-shadow {
  box-shadow: var(--shadow-soft);
}

.utility-doc {
  --pui-space-xxs: var(--pui-preview-space-xxs);
  --pui-space-xs: var(--pui-preview-space-xs);
  --pui-space-sm: var(--pui-preview-space-sm);
  --pui-space-normal: var(--pui-preview-space-normal);
  --pui-space-lg: var(--pui-preview-space-lg);
  --pui-space-xl: var(--pui-preview-space-xl);
  --pui-space-xxl: var(--pui-preview-space-xxl);
  --pui-space-3xl: var(--pui-preview-space-3xl);
  --pui-radius-small: var(--pui-preview-radius-small);
  --pui-radius-medium: var(--pui-preview-radius-medium);
  --pui-radius-large: var(--pui-preview-radius-large);
  --pui-radius-xlarge: var(--pui-preview-radius-xlarge);
  --pui-radius-xxlarge: var(--pui-preview-radius-xxlarge);
  --pui-radius-round: var(--pui-preview-radius-round);
  --pui-bg-page: var(--page);
  --pui-bg-container: var(--surface-solid);
  --pui-bg-muted: var(--surface-soft);
  --pui-bg-active: color-mix(in srgb, var(--text) 9%, var(--surface-solid));
  --pui-text-primary: var(--text);
  --pui-text-secondary: var(--muted);
  --pui-text-placeholder: var(--subtle);
  --pui-text-disabled: color-mix(in srgb, var(--subtle) 68%, transparent);
  --pui-text-inverse: var(--pui-text-on-inverse);
  --pui-border-color: var(--border);
  --pui-color-brand: var(--brand);
  --pui-color-success: var(--success);
  --pui-color-success-light: var(--success-soft);
  --pui-color-warning: var(--warning);
  --pui-color-warning-light: var(--warning-soft);
  --pui-color-danger: var(--danger);
  --pui-color-danger-light: var(--danger-soft);
  --pui-color-info: var(--info);
  --pui-color-info-light: var(--info-soft);
  --pui-shadow-brand: var(--preview-shadow-card, none);
  --pui-shadow-card: var(--preview-shadow-card, none);
  --pui-shadow-glow: var(--preview-shadow-card, none);
  display: grid;
  gap: var(--pui-preview-space);
  min-width: 0;
}

.utility-doc__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: var(--pui-preview-space);
  align-items: end;
  padding-bottom: var(--pui-preview-space);
  border-bottom: 1px solid var(--border);
}

.utility-doc__summary > div:first-child {
  min-width: 0;
}

.utility-doc__summary > div:first-child > span,
.utility-doc__live header span,
.utility-doc__category header > span {
  color: var(--subtle);
  font-size: var(--pui-preview-doc-meta-size);
  font-weight: var(--pui-font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.utility-doc__summary h3 {
  margin: var(--pui-preview-space-step-5) 0 0;
  color: var(--text);
  font-size: var(--pui-preview-doc-title-size);
  line-height: var(--pui-preview-doc-title-line-height);
}

.utility-doc__summary p {
  margin: var(--pui-preview-space-sm) 0 0;
  color: var(--muted);
  font-size: var(--pui-preview-doc-body-size);
  line-height: var(--pui-preview-doc-body-line-height);
}

.utility-doc__category p {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-preview-doc-body-size);
  line-height: var(--pui-preview-doc-body-line-height);
}

.utility-doc__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pui-preview-space-xs);
}

.utility-doc__facts strong {
  display: grid;
  gap: var(--pui-preview-space-xxs);
  min-width: 0;
  color: var(--text);
  font-size: var(--pui-preview-doc-section-size);
  line-height: var(--pui-preview-doc-section-line-height);
}

.utility-doc__facts span {
  overflow: hidden;
  color: var(--subtle);
  font-size: var(--pui-preview-doc-meta-size);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-preview-doc-meta-line-height);
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-doc__live {
  display: grid;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
  padding: var(--pui-preview-space-normal);
  background: var(--preview-surface, var(--surface));
  border: 1px solid var(--preview-border, var(--border));
  border-radius: var(--pui-preview-radius-card, var(--pui-site-radius-surface));
  box-shadow: var(--preview-shadow-card, none);
  -webkit-backdrop-filter: var(--preview-blur, none);
  backdrop-filter: var(--preview-blur, none);
}

.utility-doc__browser,
.utility-doc__theme-lab {
  display: grid;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
  padding: var(--pui-preview-space-normal);
  background: var(--preview-surface, var(--surface));
  border: 1px solid var(--preview-border, var(--border));
  border-radius: var(--pui-preview-radius-card, var(--pui-site-radius-surface));
  box-shadow: var(--preview-shadow-card, none);
  -webkit-backdrop-filter: var(--preview-blur, none);
  backdrop-filter: var(--preview-blur, none);
}

.utility-doc__browser > header,
.utility-doc__theme-lab > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
}

.utility-doc__browser > header > div:first-child,
.utility-doc__theme-lab > header > div:first-child {
  display: grid;
  gap: var(--pui-preview-space-step-3);
  min-width: 0;
}

.utility-doc__browser > header span,
.utility-doc__theme-lab > header span {
  color: var(--subtle);
  font-size: var(--pui-preview-doc-meta-size);
  font-weight: var(--pui-font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.utility-doc__browser h4,
.utility-doc__theme-lab h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-preview-doc-section-size);
  line-height: var(--pui-preview-doc-section-line-height);
}

.utility-doc__live > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
}

.utility-doc__live h4 {
  margin: var(--pui-preview-space-step-3) 0 0;
  color: var(--text);
  font-size: var(--pui-preview-doc-section-size);
  line-height: var(--pui-preview-doc-section-line-height);
}

.utility-doc__category h4 {
  margin: var(--pui-preview-space-step-3) 0 0;
  color: var(--text);
  font-size: var(--pui-preview-doc-section-size);
  line-height: var(--pui-preview-doc-section-line-height);
}

.utility-doc__live > header > code {
  max-width: 56%;
  overflow: hidden;
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-sm);
  color: var(--muted);
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-control, var(--pui-site-radius-control));
}

.utility-doc__background {
  box-sizing: border-box;
  max-width: 100%;
  gap: var(--pui-utility-preview-gap);
  padding: var(--pui-utility-preview-gap);
  background: var(--surface-soft);
  border: 1px dashed var(--border);
  border-radius: var(--pui-preview-radius-card, var(--pui-site-radius-surface));
}

.utility-doc__background.is-full { width: 100%; }
.utility-doc__background.is-fit { width: fit-content; }
.utility-doc__background--flex { display: flex; }
.utility-doc__background--column { display: flex; flex-direction: column; }
.utility-doc__background--grid { display: grid; grid-template-columns: repeat(var(--utility-columns), minmax(0, 1fr)); }
.utility-doc__background.is-wrap { flex-wrap: wrap; }
.utility-doc__background.is-nowrap { flex-wrap: nowrap; overflow-x: auto; }
.utility-doc__background--align-start { align-items: flex-start; }
.utility-doc__background--align-center { align-items: center; }
.utility-doc__background--align-end { align-items: flex-end; }
.utility-doc__background--align-between { justify-content: space-between; }

.utility-doc__background > article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pui-preview-space-xs);
  box-sizing: border-box;
  min-width: 0;
  min-height: 48px;
  padding: var(--pui-preview-space-sm);
  color: var(--text);
  background: var(--preview-surface, var(--surface-solid));
  border: 1px solid var(--preview-border, var(--border));
  border-radius: var(--pui-preview-radius-control, var(--pui-site-radius-control));
}

.utility-doc__background--flex > article {
  flex: 1 1 148px;
}

.utility-doc__background--column > article {
  width: 100%;
}

.utility-doc__background > article.has-shadow {
  box-shadow: var(--preview-shadow-card, none);
}

.utility-doc__background > article > span {
  display: grid;
  min-width: 0;
}

.utility-doc__background > article strong,
.utility-doc__background > article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-doc__background > article strong { font-size: var(--pui-font-size-caption); }
.utility-doc__background > article small { color: var(--subtle); font-size: var(--pui-font-size-caption); }

/* H5 mirror of the utility classes used by the live composition. The values
   are injected from the theme.wxss build data by utilitiesPreview(). */
.utility-doc .pui-bg-page { background-color: var(--pui-bg-page); }
.utility-doc .pui-bg-container { background-color: var(--pui-bg-container); }
.utility-doc .pui-text-primary { color: var(--pui-text-primary); }
.utility-doc .pui-border { border-color: var(--pui-border-color); }
.utility-doc .pui-border-solid { border-style: solid; }
.utility-doc .pui-shadow-card { box-shadow: var(--pui-shadow-card, var(--preview-shadow-card, none)); }
.utility-doc .pui-theme--dark.pui-dark-bg-muted,
.utility-doc .pui-theme--dark .pui-dark-bg-muted { background-color: var(--pui-bg-muted); }
.utility-doc .pui-theme--dark.pui-dark-bg-active,
.utility-doc .pui-theme--dark .pui-dark-bg-active { background-color: var(--pui-bg-active); }
.utility-doc .pui-theme--dark.pui-dark-text-success,
.utility-doc .pui-theme--dark .pui-dark-text-success { color: var(--pui-color-success); }
.utility-doc .pui-theme--dark.pui-dark-border,
.utility-doc .pui-theme--dark .pui-dark-border { border-color: var(--pui-border-color); }
.utility-doc .pui-theme--dark.pui-dark-shadow-card,
.utility-doc .pui-theme--dark .pui-dark-shadow-card { box-shadow: var(--pui-shadow-card, var(--preview-shadow-card, none)); }

.utility-doc__filter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--pui-preview-space-xs);
  min-width: 0;
}

.utility-doc__filter .utility-doc__filter-button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  padding-inline: var(--pui-preview-space-step-8);
}

.utility-doc__filter-button .pui-button-preview__content {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-doc__filter-button .pui-button-preview__suffix {
  flex: 0 0 auto;
  margin-left: auto;
}

.utility-doc__catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-space-sm);
  min-width: 0;
}

.utility-doc__category {
  display: grid;
  min-width: 0;
  padding: 0;
  background: var(--preview-surface, var(--surface));
  border: 1px solid var(--preview-border, var(--border));
  border-radius: var(--pui-preview-radius-card, var(--pui-site-radius-surface));
}

.utility-doc__category > .utility-doc__category-body {
  display: grid;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
  padding: var(--pui-preview-space-normal);
}

.utility-doc__category-title {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: var(--pui-preview-space-xs) !important;
}

.utility-doc__category-title > span {
  display: grid;
  gap: var(--pui-preview-space-step-1);
  min-width: 0;
}

.utility-doc__category-title small {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.utility-doc__class-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-preview-space-step-5);
  align-content: flex-start;
}

.utility-doc__class-tags .pui-tag {
  max-width: 100%;
  overflow: hidden;
}

.utility-doc__class-tags .pui-tag__content {
  overflow: hidden;
  font-family: var(--pui-font-family-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-doc__class-tags .utility-doc__example-button {
  min-width: 0;
  max-width: 100%;
}

.utility-doc__example-button .pui-button-preview__content {
  min-width: 0;
  overflow: hidden;
  font-family: var(--pui-font-family-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-doc__category > footer {
  justify-content: flex-start;
  min-width: 0;
  padding: var(--pui-preview-space-sm) var(--pui-preview-space-normal);
}

.utility-doc__category > footer code {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-doc__category > footer span {
  margin-left: auto;
  white-space: nowrap;
}

.utility-doc__mini {
  box-sizing: border-box;
  min-width: 0;
  min-height: 78px;
  padding: var(--pui-preview-space-sm);
  background: var(--surface-soft);
  border: 1px dashed var(--border);
  border-radius: var(--pui-preview-radius-control, var(--pui-site-radius-control));
}

.utility-doc__semantic-preview {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  height: 64px;
  min-width: 0;
  overflow: hidden;
}

.utility-doc__semantic-current {
  position: relative;
  height: 64px;
  min-width: 0;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.utility-doc__semantic-reset {
  justify-self: end;
  align-self: center;
}

.utility-doc__semantic-preview .utility-doc__mini {
  width: 100%;
  height: 64px;
  min-height: 0;
  overflow: hidden;
}

.utility-doc__semantic-preview[data-utility-preview-safety="trace"] .utility-doc__semantic-current::after,
.utility-doc__semantic-preview[data-utility-preview-safety="state"] .utility-doc__semantic-current::after,
.utility-doc__semantic-preview[data-utility-preview-safety="viewport-clipped"] .utility-doc__semantic-current::after {
  position: absolute;
  inset: var(--pui-preview-space-xs);
  z-index: 3;
  background: var(--brand);
  border-radius: var(--pui-preview-radius-small);
  content: "";
  opacity: .08;
  pointer-events: none;
}

.utility-doc__mini i,
.utility-doc__mini b,
.utility-doc__mini em {
  box-sizing: border-box;
  display: block;
  background: var(--preview-surface, var(--surface-solid));
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
}

.utility-doc__mini.is-flex { display: flex; align-items: center; gap: var(--pui-preview-space-sm); }
.utility-doc__mini.is-flex i { flex: 1; height: 34px; }
.utility-doc__semantic-media { display: none; width: 100%; height: 100%; object-fit: cover; }
.utility-doc__mini.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pui-preview-space-step-5); }
.utility-doc__mini.is-grid i { min-height: 24px; }
.utility-doc__mini.is-spacing { display: grid; place-items: center; }
.utility-doc__semantic-surface {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: calc(100% - var(--pui-preview-space-normal));
  height: calc(100% - var(--pui-preview-space-normal));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-small);
}
.utility-doc__semantic-items {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-xs);
  width: 100%;
  min-width: 0;
}
.utility-doc__semantic-items i {
  flex: 0 1 var(--pui-preview-space-lg);
  width: var(--pui-preview-space-lg);
  height: var(--pui-preview-space-sm);
  min-width: 0;
  background: var(--brand);
}
.utility-doc__mini.is-sizing { position: relative; display: grid; place-items: center; }
.utility-doc__mini.is-sizing::before {
  position: absolute;
  inset: var(--pui-preview-space-xs);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-small);
  content: "";
  opacity: .56;
}
.utility-doc__semantic-measure {
  box-sizing: border-box;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 50%;
  height: 50%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--brand);
  border-radius: var(--pui-preview-radius-small);
}
.utility-doc__semantic-measure i {
  width: var(--pui-preview-space-lg);
  height: var(--pui-preview-space-xs);
  max-width: 100%;
  max-height: 100%;
  background: var(--pui-text-on-inverse);
}
.utility-doc__mini.is-position { position: relative; overflow: hidden; }
.utility-doc__mini.is-position i { position: absolute; inset: var(--pui-preview-space-normal); }
.utility-doc__mini.is-position b { position: absolute; top: var(--pui-preview-space-step-5); right: var(--pui-preview-space-step-5); width: 22px; height: 22px; background: var(--brand); }
.utility-doc__mini.is-position em { position: absolute; bottom: var(--pui-preview-space-step-5); left: var(--pui-preview-space-step-5); width: 38px; height: 14px; }
.utility-doc__mini.is-visual { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pui-preview-space-step-5); }
.utility-doc__mini.is-visual i:nth-child(1) { background: var(--surface-solid); }
.utility-doc__mini.is-visual i:nth-child(2) { background: var(--brand); }
.utility-doc__mini.is-visual i:nth-child(3) { background: var(--success-soft); border-color: var(--success); }
.utility-doc__mini.is-visual i:nth-child(4) { background: var(--danger-soft); border-color: var(--danger); }
.utility-doc__mini.is-background { display: grid; place-items: center; color: var(--text); }
.utility-doc__mini.is-background .utility-doc__semantic-surface {
  align-content: center;
  justify-items: start;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-sm);
}
.utility-doc__mini.is-background .utility-doc__semantic-surface i {
  width: 72%;
  height: var(--pui-preview-space-xs);
  background: currentColor;
  opacity: .5;
}
.utility-doc__mini.is-background .utility-doc__semantic-surface i:last-child { width: 44%; }
.utility-doc__mini.is-background strong { font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-small); }
.utility-doc__mini.is-background span { color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.utility-doc__mini.is-typography {
  display: grid;
  align-content: center;
  padding-inline: var(--pui-preview-space-xs);
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}
.utility-doc__semantic-text {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.utility-doc__mini.is-behavior { display: grid; align-content: center; gap: var(--pui-preview-content-gap); color: var(--muted); font-size: var(--pui-font-size-caption); }
.utility-doc__mini.is-behavior i { height: 10px; overflow: hidden; }
.utility-doc__mini.is-behavior b { width: 68%; height: 100%; background: var(--brand); border: 0; border-radius: 0; }
.utility-doc__mini.is-accessibility { display: flex; align-items: center; gap: var(--pui-preview-space-step-5); }
.utility-doc__mini.is-accessibility i { flex: 1; padding: var(--pui-preview-space-step-7) var(--pui-preview-space-xs); color: var(--muted); font-size: var(--pui-font-size-caption); font-style: normal; text-align: center; }
.utility-doc__mini.is-dark { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-space-sm); }
.utility-doc__mini.is-dark i { display: grid; gap: var(--pui-preview-space-xs); padding: var(--pui-preview-space-step-5); color: #18181b; font-size: var(--pui-font-size-caption); font-style: normal; background: #fff; border-color: #e4e4e7; }
.utility-doc__mini.is-dark i:last-child { color: #fafafa; background: #09090b; border-color: #27272a; }
.utility-doc__mini.is-dark b { height: 27px; background: #f4f4f5; border-color: #e4e4e7; }
.utility-doc__mini.is-dark i:last-child b { background: #27272a; border-color: #3f3f46; }

.utility-doc__theme-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--pui-preview-space-step-5);
}

.utility-doc__theme-button { min-width: 0; }

.utility-doc__themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-space-sm);
  min-width: 0;
}

.utility-doc__theme-panel {
  display: grid;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
  padding: var(--pui-preview-space-sm);
  color: var(--utility-theme-text);
  background: var(--utility-theme-page);
  border: 1px solid var(--utility-theme-border);
  border-radius: var(--pui-preview-radius-card, var(--pui-site-radius-surface));
}

.utility-doc__theme-panel > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pui-preview-space-xs);
}

.utility-doc__theme-panel > header > span {
  display: grid;
  gap: var(--pui-preview-space-step-1);
  min-width: 0;
  color: var(--utility-theme-text);
  letter-spacing: normal;
  text-transform: none;
}

.utility-doc__theme-panel > header strong { font-size: var(--pui-font-size-body-small); }
.utility-doc__theme-panel > header small { color: var(--utility-theme-secondary); font-size: var(--pui-font-size-caption); }
.utility-doc__theme-surface { display: grid; gap: var(--pui-preview-content-gap); padding: var(--pui-preview-space-normal); background: var(--utility-theme-container); border: 1px solid var(--utility-theme-border); border-radius: var(--pui-preview-radius-control, var(--pui-site-radius-control)); }
.utility-doc__theme-surface > div:first-child { display: grid; gap: var(--pui-preview-space-xxs); }
.utility-doc__theme-surface strong { color: var(--utility-theme-text); font-size: var(--pui-font-size-body-small); }
.utility-doc__theme-surface span { color: var(--utility-theme-secondary); font-size: var(--pui-font-size-caption); }
.utility-doc__theme-status { display: flex; align-items: center; gap: var(--pui-preview-space-sm); padding: var(--pui-preview-space-step-7); background: var(--utility-theme-success-light); border-radius: var(--pui-preview-radius-step-5); }
.utility-doc__theme-status i { width: 8px; height: 8px; background: var(--utility-theme-success); border-radius: var(--pui-preview-radius-round); }
.utility-doc__theme-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-space-step-5); }
.utility-doc__theme-actions b { padding: var(--pui-preview-space-sm); color: var(--utility-theme-text); font-size: var(--pui-font-size-caption); text-align: center; background: var(--utility-theme-muted); border: 1px solid var(--utility-theme-border); border-radius: var(--pui-preview-radius-step-5); }
.utility-doc__theme-actions b:last-child { background: var(--utility-theme-active); }
.utility-doc__theme-panel > code { overflow: hidden; color: var(--utility-theme-secondary); font-family: var(--pui-font-family-mono); font-size: var(--pui-font-size-caption); text-overflow: ellipsis; white-space: nowrap; }

.utility-doc__rules {
  display: flex;
  gap: var(--pui-preview-space-sm);
  align-items: flex-start;
  padding: var(--pui-preview-space-sm);
  color: var(--muted);
  font-size: var(--pui-preview-doc-body-size);
  line-height: var(--pui-preview-doc-body-line-height);
  background: var(--surface-soft);
  border-left: 3px solid var(--text);
  border-radius: 0 var(--pui-preview-radius-card, var(--pui-site-radius-surface)) var(--pui-preview-radius-card, var(--pui-site-radius-surface)) 0;
}

.utility-doc__rules strong {
  flex: 0 0 auto;
  color: var(--text);
}

@media (max-width: 720px) {
  .utility-doc__summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .utility-doc__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .utility-doc__catalog {
    grid-template-columns: minmax(0, 1fr);
  }

  .utility-doc__filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .utility-doc__theme-lab > header {
    display: grid;
  }

  .utility-doc__theme-switcher {
    justify-content: flex-start;
  }

  .utility-doc__themes {
    grid-template-columns: minmax(0, 1fr);
  }

  .utility-doc__live > header {
    display: grid;
  }

  .utility-doc__live > header > code {
    max-width: 100%;
    text-align: left;
  }

  .utility-doc__background--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .utility-doc__live,
  .utility-doc__browser,
  .utility-doc__theme-lab {
    padding: var(--pui-preview-space-sm);
  }

  .utility-doc__filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .utility-doc__browser > header {
    display: grid;
  }

  .utility-doc__background--grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .utility-doc__rules {
    display: grid;
  }
}

.spec-sheet {
  display: grid;
  gap: var(--pui-preview-space-step-16);
}

.spec-sheet__head,
.state-grid,
.code-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.spec-sheet__head {
  display: grid;
  gap: var(--pui-preview-space-normal);
  padding: var(--pui-preview-space-step-22);
}

.spec-sheet__head .status {
  justify-self: start;
}

.spec-sheet__head h2 {
  margin: 0;
  font-size: var(--pui-font-size-headline);
  line-height: var(--pui-line-height-title-large);
}

.spec-sheet__head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-large);
}

.state-grid {
  display: grid;
  gap: var(--pui-preview-space-step-1);
  overflow: hidden;
}

.state-grid div,
.meta-grid div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--pui-preview-space-step-12);
  padding: var(--pui-preview-space-step-12) var(--pui-preview-space-lg);
  background: var(--surface-soft);
}

.state-grid span,
.meta-grid span {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.state-grid strong,
.meta-grid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector {
  position: sticky;
  top: var(--pui-preview-space-step-64);
  height: calc(100vh - 64px);
  padding: var(--pui-preview-space-step-22);
  overflow: auto;
  border-left: 1px solid var(--border);
  box-shadow: inset 1px 0 0 var(--highlight);
}

.inspector__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pui-preview-space-step-12);
  align-items: start;
}

.inspector__category {
  margin: 0 0 var(--pui-preview-space-sm);
  color: var(--brand);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.inspector h2 {
  margin: 0;
  font-size: var(--pui-font-size-title-large);
  line-height: var(--pui-line-height-title-medium);
}

.inspector p {
  margin: var(--pui-preview-content-gap) 0 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-medium);
}

.meta-grid {
  display: grid;
  gap: var(--pui-preview-space-step-1);
  margin-top: var(--pui-preview-panel-padding-spacious);
  overflow: hidden;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-18);
  box-shadow: var(--shadow-soft);
}

.panel {
  margin-top: var(--pui-preview-space-step-22);
}

.panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-space-step-12);
  margin-bottom: var(--pui-preview-space-normal);
}

.panel__title h3 {
  margin: 0;
  font-size: var(--pui-font-size-body-large);
}

.panel__title span,
#propsCount {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.props-panel {
  display: grid;
  gap: var(--pui-preview-space-normal);
}

.prop-control {
  display: grid;
  gap: var(--pui-preview-space-step-7);
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-xlarge);
  box-shadow: var(--shadow-soft);
}

.prop-control > .prop-control__label {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.prop-control > .prop-control__label em {
  float: right;
  color: var(--brand);
  font-style: normal;
}

.prop-control--row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.prop-control input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.prop-control input[type="range"] {
  accent-color: var(--brand);
}

.code {
  margin: 0;
  padding: var(--pui-preview-space-lg);
  overflow: auto;
  color: var(--brand);
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-body-small);
  background: rgba(12, 18, 28, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-18);
  box-shadow: inset 0 1px 0 var(--highlight);
  white-space: pre-wrap;
}

.app-shell[data-theme="dark"] .code {
  background: rgba(0, 0, 0, 0.22);
}

.code--large {
  min-height: 260px;
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-medium);
}

.mini-action {
  height: 30px;
  padding: 0 var(--pui-preview-space-normal);
  color: var(--brand);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.compat-list {
  display: grid;
  gap: var(--pui-preview-content-gap);
}

.compat-list--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--pui-preview-space-step-16);
}

.compat-item {
  display: grid;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-step-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-xlarge);
  box-shadow: var(--shadow-soft);
}

.compat-item strong {
  font-size: var(--pui-font-size-caption);
}

.compat-item span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-label);
}

.code-stage {
  grid-column: 1 / -1;
  width: min(100%, 980px);
  margin: 0 auto;
  padding: var(--pui-preview-space-xl);
}

.code-stage__header {
  display: flex;
  justify-content: space-between;
  gap: var(--pui-preview-space-step-12);
  margin-bottom: var(--pui-preview-space-lg);
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-heavy);
}

.preview-stage--icons {
  display: block;
}

.icon-library {
  width: min(100%, 1080px);
  margin: 0 auto;
}

.icon-library__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pui-preview-space-step-22);
  padding: var(--pui-preview-space-step-24);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.icon-library__hero p {
  margin: 0 0 var(--pui-preview-content-gap);
  color: var(--brand);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.icon-library__hero h2 {
  margin: 0;
  font-size: var(--pui-font-size-headline);
  line-height: var(--pui-line-height-headline);
}

.icon-library__hero span {
  display: block;
  max-width: 660px;
  margin-top: var(--pui-preview-space-normal);
  color: var(--muted);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-large);
}

.icon-library__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: var(--pui-preview-space-normal);
}

.icon-library__stats strong {
  display: grid;
  align-content: center;
  min-height: 76px;
  padding: var(--pui-preview-space-step-12);
  font-size: var(--pui-font-size-headline);
  background: var(--surface-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-step-18);
  box-shadow: inset 0 1px 0 var(--highlight);
}

.icon-library__stats span {
  margin: var(--pui-preview-space-xxs) 0 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

.icon-demo-section {
  margin-top: var(--pui-preview-section-gap);
}

.icon-demo-section + .icon-demo-section {
  margin-top: var(--pui-preview-section-gap);
}

.icon-demo-section__head {
  margin-bottom: var(--pui-preview-content-gap);
}

.icon-demo-section__head h3,
.icon-demo-section__head p {
  margin: 0;
}

.icon-demo-section__head h3 {
  color: var(--text);
  font-size: var(--pui-font-size-title-small);
  line-height: var(--pui-line-height-title-small);
}

.icon-demo-section__head p {
  margin-top: var(--pui-preview-space-xs);
  color: var(--muted);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.icon-scale-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-preview-content-gap);
}

.icon-scale-row > span {
  display: inline-flex;
  align-items: center;
  gap: var(--pui-preview-space-xs);
  min-height: var(--pui-site-icon-scale-item-height);
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-normal);
  color: var(--text);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-medium);
}

.icon-scale-row em {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-style: normal;
  line-height: var(--pui-line-height-caption);
}

.icon-toolbar {
  position: sticky;
  top: var(--pui-site-icon-toolbar-offset);
  z-index: 5;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--pui-preview-space-step-12);
  margin-top: var(--pui-preview-panel-padding-spacious);
  padding: var(--pui-preview-space-step-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-22);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.icon-search .pui-icon {
  flex: 0 0 auto;
  color: var(--subtle);
}

.icon-category-list {
  display: flex;
  gap: var(--pui-preview-content-gap);
  overflow-x: auto;
}

.icon-category {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 var(--pui-preview-space-step-12);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  cursor: pointer;
}

.icon-category.is-active {
  color: var(--surface-solid);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(17, 18, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.icon-resultbar {
  display: flex;
  justify-content: space-between;
  margin: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-xs) var(--pui-preview-space-step-12);
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-heavy);
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--pui-preview-space-step-12);
}

.icon-library__toast-layer {
  position: fixed;
  z-index: 40;
  right: var(--pui-preview-space-step-24);
  bottom: var(--pui-preview-space-step-24);
  left: var(--pui-preview-space-step-24);
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.icon-library__toast-layer .pui-toast-preview {
  box-sizing: border-box;
  max-width: min(100%, 360px);
  padding: var(--pui-preview-space-step-12) var(--pui-preview-space-step-16);
  color: var(--pui-text-on-inverse);
  background: var(--pui-bg-inverse);
  border-color: transparent;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.icon-library__toast-layer .pui-toast-preview .toast-demo__message {
  min-width: 0;
  overflow-wrap: anywhere;
}

.icon-card {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 136px;
  padding: var(--pui-preview-space-lg) var(--pui-preview-space-normal) var(--pui-preview-space-step-12);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-22);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  cursor: pointer;
}

.icon-card:hover,
.icon-card:focus-visible {
  color: var(--brand);
  outline: 0;
  transform: translateY(-1px);
}

.icon-card__glyph {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--pui-preview-radius-xxlarge);
  box-shadow: inset 0 1px 0 var(--highlight);
}

.icon-card__glyph svg {
  width: 28px;
  height: 28px;
}

.icon-card__name,
.icon-card__category {
  display: block;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.icon-card__name {
  margin-top: var(--pui-preview-space-normal);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-heavy);
}

.icon-card__category {
  margin-top: var(--pui-preview-space-xs);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Dialog must keep its own short enter/exit transition instead of inheriting
   the page-level visual-token transition. */
body .app-shell[data-page-mode] .preview-stage .pui-dialog--preview {
  transition: opacity var(--pui-dialog-duration, 500ms) var(--pui-dialog-ease, ease), transform var(--pui-dialog-duration, 500ms) var(--pui-dialog-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 1280px) {
  .workspace {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .inspector {
    position: static;
    grid-column: 1 / -1;
    height: auto;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .topbar__nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    order: 3;
  }

  .workspace {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    max-height: 360px;
  }

  .preview-toolbar {
    top: 0;
  }

  .preview-stage {
    grid-template-columns: 1fr;
  }

  .phone {
    width: min(100%, var(--device-width, 393px));
    margin: 0 auto;
  }

  .icon-toolbar {
    position: static;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .topbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pui-preview-space-step-12);
    padding: var(--pui-preview-space-step-12) var(--pui-preview-space-lg);
  }

  .brand {
    flex: 1 1 220px;
  }

  .topbar__controls {
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: var(--pui-preview-space-sm);
    overflow: visible;
  }

  .visual-toggle,
  .theme-toggle {
    gap: var(--pui-preview-space-sm);
    height: 34px;
    padding: 0 var(--pui-preview-content-gap);
  }

  .visual-toggle {
    font-size: var(--pui-font-size-caption);
  }

  .visual-toggle__dot {
    width: 8px;
    height: 8px;
  }

  .theme-toggle__icon {
    display: none;
  }

  .theme-toggle__track {
    width: 38px;
  }

  .topbar__nav {
    width: 100%;
  }

  .preview-toolbar {
    display: grid;
    gap: var(--pui-preview-space-step-12);
    padding: var(--pui-preview-space-lg);
  }

  .toolbar-actions {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 38px;
    width: 100%;
    gap: var(--pui-preview-content-gap);
    overflow: visible;
  }

  .tabs {
    min-width: 0;
  }

  .tab {
    padding: 0 var(--pui-preview-content-gap);
    white-space: nowrap;
  }

  .device-select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .icon-button {
    width: 38px;
    padding: 0;
  }

  .preview-stage {
    padding: var(--pui-preview-space-step-16) var(--pui-preview-space-step-12);
  }

  .phone {
    min-height: 640px;
    padding: var(--pui-preview-space-lg);
    border-width: 4px;
    border-radius: var(--pui-preview-radius-step-34);
  }

  .phone__content {
    min-height: 540px;
  }

  .inspector {
    padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-lg);
  }

  .icon-library__hero {
    grid-template-columns: 1fr;
    padding: var(--pui-preview-panel-padding-spacious);
  }

  .icon-library__hero h2 {
    font-size: var(--pui-font-size-title-large);
    line-height: var(--pui-line-height-title-large);
  }

  .icon-library__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .compat-list--grid {
    grid-template-columns: 1fr;
  }

  .state-grid div,
  .meta-grid div {
    grid-template-columns: 78px minmax(0, 1fr);
  }
}

/* Final cascade: this block follows legacy preview rules and defines the public documentation look. */
:root {
  --page: #ffffff;
  --page-strong: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #f4f4f5;
  --surface-solid: #ffffff;
  --text: #18181b;
  --muted: #52525b;
  --subtle: #a1a1aa;
  --border: #e4e4e7;
  --glass-border: #e4e4e7;
  --highlight: transparent;
  --brand: #18181b;
  --brand-2: #27272a;
  --brand-soft: #f4f4f5;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --shadow: none;
  --shadow-soft: none;
  --blur: none;
  --pui-site-radius-control: var(--pui-preview-radius-small);
  --pui-site-radius-surface: var(--pui-preview-radius-medium);
  --pui-site-radius-popup: var(--pui-preview-radius-large);
}

body,
.app-shell { background: var(--page); background-image: none; }

.app-shell[data-theme="dark"] {
  --page: #09090b;
  --page-strong: #09090b;
  --surface: #09090b;
  --surface-strong: #09090b;
  --surface-soft: #18181b;
  --surface-solid: #18181b;
  --text: #fafafa;
  --muted: #d4d4d8;
  --subtle: #71717a;
  --border: #27272a;
  --glass-border: #27272a;
  --brand: #fafafa;
  --brand-2: #e4e4e7;
  --brand-soft: #27272a;
  --danger: #f87171;
  --danger-soft: #381919;
  --success: #4ade80;
  --success-soft: #14301e;
  --warning: #fbbf24;
  --warning-soft: #34270d;
  --info: #60a5fa;
  --info-soft: #172554;
  background-image: none;
}

.app-shell[data-frost="on"] { --surface: rgba(255,255,255,.78); --surface-strong: rgba(255,255,255,.9); --blur: blur(18px) saturate(140%); }
.app-shell[data-theme="dark"][data-frost="on"] { --surface: rgba(9,9,11,.76); --surface-strong: rgba(9,9,11,.9); }
.app-shell[data-shadow="on"] { --shadow: 0 12px 28px rgba(24,24,27,.12); --shadow-soft: 0 4px 14px rgba(24,24,27,.08); }
.app-shell[data-theme="dark"][data-shadow="on"] { --shadow: 0 12px 28px rgba(0,0,0,.32); --shadow-soft: 0 4px 14px rgba(0,0,0,.24); }
.app-shell[data-radius="large"] { --pui-site-radius-control: var(--pui-preview-radius-step-14); --pui-site-radius-surface: var(--pui-preview-radius-step-18); --pui-site-radius-popup: var(--pui-preview-radius-step-24); }

.topbar { grid-template-columns: auto minmax(0,1fr) auto; min-height:56px; padding:var(--pui-preview-content-gap) var(--pui-preview-space-xl); gap:var(--pui-preview-space-step-22); background:var(--surface-strong); border-bottom:1px solid var(--border); box-shadow:none; }
.brand__mark { width:28px; height:28px; background:var(--brand); border:0; border-radius:var(--pui-preview-radius-small); box-shadow:none; }
.brand__name { font-size: var(--pui-font-size-body-large); font-weight: var(--pui-font-weight-bold); line-height: var(--pui-line-height-body-medium); }
.brand__sub { font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-medium); line-height: var(--pui-line-height-caption); }
.brand__version,.status { height:22px; padding:0 var(--pui-preview-space-step-7); color:var(--muted); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--pui-preview-radius-round); box-shadow:none; }
.topbar__nav { justify-content:flex-start; gap:var(--pui-preview-panel-padding-spacious); }
.topbar__link { font-size: var(--pui-font-size-body-small); font-weight: var(--pui-font-weight-medium); }
.topbar__link.is-active::after { bottom:calc(0px - var(--pui-preview-panel-padding-spacious)); height:1px; background:var(--brand); border-radius:0; }
.topbar__controls { gap:var(--pui-preview-space-sm); }
.theme-toggle,.visual-toggle,.icon-button,.mini-action,.tab,.device-select { border:1px solid var(--border); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.theme-toggle,.visual-toggle { height:30px; padding:0 var(--pui-preview-content-gap); gap:var(--pui-preview-space-sm); background:var(--surface); border-radius:var(--pui-site-radius-control); }
.visual-toggle { font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); }
.visual-toggle__dot { width:7px; height:7px; background:var(--subtle); }
.visual-toggle.is-active .visual-toggle__dot { background:var(--brand); box-shadow:none; }
.theme-toggle__track { width:30px; height:18px; background:var(--brand); }
.theme-toggle__thumb { top:var(--pui-preview-space-step-3); left:var(--pui-preview-space-lg); width:12px; height:12px; }
.app-shell[data-theme="dark"] .theme-toggle__thumb { left:var(--pui-preview-space-xs); }

.workspace { grid-template-columns:244px minmax(0,1fr) 328px; min-height:calc(100vh - 56px); }
.sidebar,.inspector { background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); }
.sidebar { padding:var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12) var(--pui-preview-space-xxl); border-right:1px solid var(--border); }
.inspector { padding:var(--pui-preview-space-step-22) var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-xxl); border-left:1px solid var(--border); }
.search { height:34px; background:var(--surface-soft); border:1px solid transparent; border-radius:var(--pui-site-radius-control); }
.search:focus-within { border-color:var(--border); box-shadow:none; }
.component-group { margin:0 0 var(--pui-preview-panel-padding-spacious); }
.component-group__title { margin:0 var(--pui-preview-content-gap) var(--pui-preview-space-sm); color:var(--muted); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); letter-spacing:0; }
.component-item { min-height:32px; padding:var(--pui-preview-space-sm) var(--pui-preview-content-gap); color:var(--muted); background:transparent; border:0; border-radius:var(--pui-site-radius-control); }
.component-item:hover,.component-item.is-active { color:var(--text); background:var(--surface-soft); box-shadow:none; }
.status-dot { padding:0; font-size: var(--pui-font-size-caption); background:transparent; border:0; }
.main { background:var(--page); }

.preview-toolbar { top:var(--pui-site-toolbar-offset); padding:var(--pui-preview-space-step-24) var(--pui-preview-space-step-32) var(--pui-preview-space-step-16); background:var(--surface-strong); border-bottom:1px solid var(--border); box-shadow:none; }
.preview-kicker,.inspector__category { color:var(--muted); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-medium); }
.preview-toolbar h1,.inspector h2 { color:var(--text); font-weight: var(--pui-font-weight-bold); letter-spacing:0; }
.preview-toolbar h1 { margin-top:var(--pui-preview-space-xs); font-size: var(--pui-font-size-headline); line-height: var(--pui-line-height-headline); }
.tabs { gap:var(--pui-preview-space-xxs); padding:var(--pui-preview-space-xxs); background:var(--surface-soft); border:0; border-radius:var(--pui-site-radius-control); }
.tab { height:30px; padding:0 var(--pui-preview-space-normal); background:transparent; border:0; border-radius:calc(var(--pui-site-radius-control) - var(--pui-preview-radius-step-2)); }
.tab.is-active { color:var(--text); background:var(--surface-solid); border:1px solid var(--border); box-shadow:none; }
.device-select,.icon-button { height:32px; background:var(--surface); border-radius:var(--pui-site-radius-control); }
.preview-stage { min-height:calc(100vh - 154px); padding:var(--pui-preview-space-step-32); background:var(--page); }
.phone { width:min(100%,393px); min-height:680px; padding:var(--pui-preview-space-step-16); color:var(--text); background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--pui-site-radius-popup); box-shadow:var(--shadow); }
.phone__status { color:var(--muted); font-size: var(--pui-font-size-caption); }
.phone__title { padding:var(--pui-preview-space-step-16) 0; color:var(--text); font-size: var(--pui-font-size-title-medium); font-weight: var(--pui-font-weight-bold); border-bottom:1px solid var(--border); }
.phone__content { min-height:560px; padding-top:var(--pui-preview-space-step-16); }
.spec-sheet { width:min(100%,720px); margin:var(--pui-preview-space-xxl) auto 0; }
.spec-sheet__head,.state-grid,.code-stage,.icon-library__hero { background:transparent; border:0; border-radius:0; box-shadow:none; }
.spec-sheet__head { padding:0 0 var(--pui-preview-space-step-16); border-bottom:1px solid var(--border); }
.state-grid { gap:var(--pui-preview-space-step-12); padding:var(--pui-preview-space-step-16) 0 0; }
.state-grid > div,.meta-grid > div,.compat-item,.prop-control { background:var(--surface); border:1px solid var(--border); border-radius:var(--pui-site-radius-control); box-shadow:none; }
.inspector__header { padding-bottom:var(--pui-preview-panel-padding-spacious); border-bottom:1px solid var(--border); }
.meta-grid { margin:var(--pui-preview-panel-padding-spacious) 0; }
.meta-grid div,.state-grid div { padding:var(--pui-preview-space-normal); }
.panel { margin-top:var(--pui-preview-panel-padding-spacious); padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.panel__title { padding:0 0 var(--pui-preview-content-gap); border-bottom:0; }
.prop-control { padding:var(--pui-preview-content-gap) var(--pui-preview-space-normal); }
.prop-control input,.prop-control select,.prop-control textarea { background:var(--surface-solid); border:1px solid var(--border); border-radius:calc(var(--pui-site-radius-control) - var(--pui-preview-radius-step-2)); box-shadow:none; }
.code { color:var(--text); background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--pui-site-radius-control); box-shadow:none; }
.pui-button,.pui-cell,.pui-field,.pui-dialog,.pui-empty,.pui-result,.pui-grid,.pui-image,.badge-host,.pui-popup-preview,.overlay-panel { border-radius:var(--pui-site-radius-surface); box-shadow:none; }
.pui-button--primary,.pui-button--success,.pui-button--warning,.pui-button--danger { background-image:none; }
.pui-button--primary { color:#fafafa; background:#18181b; }
.app-shell[data-theme="dark"] .pui-button--primary { color:#18181b; background:#fafafa; }
.pui-cell,.pui-field,.pui-dialog,.pui-empty,.pui-result,.pui-grid,.pui-image,.pui-popup-preview,.overlay-panel { background:var(--surface-solid); border:1px solid var(--border); }
.pui-tag,.pui-badge,.pui-avatar,.pui-switch,.pui-rate button.is-active { box-shadow:none; }

.pui-action-sheet-showcase .overlay-box,
.pui-overlay-showcase .overlay-box {
  min-height: 310px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-9);
}

.pui-overlay-showcase__mask { position: absolute; inset: 0; border: 0; }
.pui-overlay-showcase__content { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--pui-preview-space-step-9); width: min(84%, 250px); padding: var(--pui-preview-space-step-19); color: var(--text); text-align: center; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-step-9); }

/* Equal spacing is component-level Surface governance.  It never rewrites the
   global space grid or the internal rhythm of continuous list rows. */
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog--preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-popover-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-card-showcase {
  --pui-surface-inset: var(--pui-preview-panel-padding);
  --pui-surface-stack-gap: var(--pui-surface-inset);
  --pui-surface-section-gap: var(--pui-surface-inset);
}

body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog--preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog-preview__body { gap: var(--pui-surface-stack-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-popover-preview { padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-card-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--pui-surface-section-gap);
}

body .app-shell[data-spacing="equal"] .preview-stage .pui-card-showcase header {
  padding: var(--pui-surface-inset) var(--pui-surface-inset) 0;
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-card-showcase__content {
  padding: 0 var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-card-showcase footer {
  padding: 0 var(--pui-surface-inset) var(--pui-surface-inset);
}

/* Final component-mirror cascade: this block intentionally follows the
   Popup/Dialog/Sheet runtime rules so equal mode wins without changing the
   normal mode cascade. */
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview {
  gap: var(--pui-surface-section-gap);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview__header {
  padding: var(--pui-surface-inset) var(--pui-surface-inset) 0;
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview__scroll {
  padding: 0 var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview__footer {
  padding: 0 var(--pui-surface-inset) var(--pui-surface-inset);
}

/* Last cascade wins over page-mode mirror declarations emitted above. */
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog--preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog-preview__body { gap: var(--pui-surface-stack-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__head { padding: var(--pui-surface-inset) var(--pui-surface-inset) 0; }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__content.is-active { padding: 0 var(--pui-surface-inset) var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__footer { gap: var(--pui-surface-stack-gap); padding: 0 var(--pui-surface-inset) var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__description { padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__items,
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__items--list { padding-left: var(--pui-surface-inset); padding-right: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__footer { padding: 0 var(--pui-surface-inset) var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-popover-preview { padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-navigation-menu-preview__panel { gap: var(--pui-surface-stack-gap); padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview { display: grid; gap: var(--pui-surface-section-gap); padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__header,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__body,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__footer { padding-left: 0; padding-right: 0; }
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview__panel-inner { gap: var(--pui-surface-stack-gap); padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-collapsible-preview__content-inner,
body .app-shell[data-spacing="equal"] .preview-stage .pui-upload-preview__files,
body .app-shell[data-spacing="equal"] .preview-stage .pui-swiper-preview__viewport { gap: var(--pui-surface-stack-gap); }

/* Product update route: the version control is a real PUI Button, while the
   page itself owns one continuous release Surface and no nested cards. */
.brand__home {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-space-step-9);
  color: inherit;
  text-decoration: none;
}

.release-notes-trigger-mount {
  display: inline-flex;
  flex: 0 0 auto;
}

.brand__version.pui-button-preview {
  min-width: 0;
  height: 20px;
  min-height: 20px;
  padding: 0 var(--pui-preview-space-sm);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
}

.brand__version.pui-button-preview.is-active {
  color: var(--text);
  border-color: var(--text);
}

.brand__version.pui-button-preview:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.release-notes-page {
  display: grid;
  box-sizing: border-box;
  width: min(100%, 860px);
  min-width: 0;
  margin: 0 auto;
  gap: var(--pui-section-gap);
}

.release-notes-page__hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--pui-preview-content-gap);
}

.release-notes-page__hero-icon {
  display: grid;
  width: 44px;
  height: 44px;
  color: var(--page);
  background: var(--brand);
  border-radius: var(--pui-site-radius-control);
  place-items: center;
}

.release-notes-page__hero > div {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xs);
}

.release-notes-page__eyebrow {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.release-notes-page__hero h2,
.release-note__header h3,
.release-note__header p,
.release-note__highlight p {
  margin: 0;
}

.release-notes-page__hero h2 {
  color: var(--text);
  font-size: var(--pui-font-size-title-large);
  line-height: var(--pui-line-height-title-large);
}

.release-notes-page__hero p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.release-notes-list {
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-floating);
}

.release-note {
  display: grid;
  min-width: 0;
  gap: var(--pui-surface-stack-gap);
  padding: var(--pui-surface-inset);
}

.release-note + .release-note {
  border-top: 1px solid var(--border);
}

.release-note__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--pui-preview-content-gap);
}

.release-note__title {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xs);
}

.release-note__meta,
.release-note__highlight-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pui-preview-space-sm);
}

.release-note__meta time {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.release-note__header h3 {
  color: var(--text);
  font-size: var(--pui-font-size-title-small);
  line-height: var(--pui-line-height-title-small);
}

.release-note__header p,
.release-note__highlight p {
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

.release-note__count {
  display: inline-flex;
  flex: 0 0 auto;
}

.release-note__highlights {
  display: grid;
  min-width: 0;
}

.release-note__highlight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-content-gap) 0;
}

.release-note__highlight + .release-note__highlight {
  border-top: 1px solid var(--border);
}

.release-note__icon {
  display: grid;
  width: 32px;
  height: 32px;
  color: var(--brand);
  place-items: center;
}

.release-note__highlight > div {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xs);
}

.release-note__highlight-heading strong {
  min-width: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.app-shell[data-frost="on"] .release-notes-list {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.app-shell[data-border="off"] .release-notes-list {
  border-color: transparent;
}

.app-shell[data-spacing="equal"] .release-note {
  gap: var(--pui-surface-inset);
}

@media (max-width: 700px) {
  .brand__home {
    gap: var(--pui-preview-space-sm);
  }

  .brand__sub {
    display: none;
  }

  .release-notes-page {
    gap: var(--pui-preview-section-gap);
  }

  .release-notes-page__hero-icon {
    width: 40px;
    height: 40px;
  }

  .release-note__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .release-note__count {
    justify-self: start;
  }
}

/* Search cancel is a compact text action, not a minimum-touch-target primary control. */
body .app-shell[data-page-mode] .preview-stage .pui-search-cancel.pui-button-preview {
  width: auto !important;
  min-width: 0 !important;
  padding-inline: 0 !important;
}

/* Semantic notice tones must win over the optional frosted Surface cascade. */
body .app-shell[data-page-mode] .preview-stage .pui-notice-preview--primary { color: var(--brand); background: var(--brand-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-notice-preview--success { color: var(--success); background: var(--success-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-notice-preview--warning { color: var(--warning); background: var(--warning-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-notice-preview--danger { color: var(--danger); background: var(--danger-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-notice-preview__icon:not(.pui-notice-preview__icon--suffix) .pui-button {
  color: inherit;
  background: transparent;
}

/* Chart components are transparent display leaves. */
.pui-chart-showcase{display:flex;flex-direction:column;gap:var(--pui-section-gap);width:100%;min-width:0;background:transparent;border:0;box-shadow:none}
.pui-chart-showcase__heading,.pui-bar-chart-preview__heading,.pui-waffle-preview__heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pui-preview-space);min-width:0}
.pui-chart-showcase__heading>span{display:flex;align-items:baseline;gap:var(--pui-preview-space);min-width:0}.pui-chart-showcase__heading small,.pui-bar-chart-preview__heading span,.pui-waffle-preview__heading span,.pui-bar-chart-preview__group small,.pui-waffle-preview__unit{color:var(--muted);font-size:var(--pui-font-size-caption);line-height:var(--pui-line-height-caption)}
.pui-chart-showcase__data-toggle{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pui-preview-content-gap);width:100%;min-width:0}
.pui-area-chart-preview,.pui-bar-chart-preview,.pui-waffle-preview,.pui-donut-chart-preview,.pui-radar-chart-preview{display:flex;flex-direction:column;box-sizing:border-box;width:100%;min-width:0;gap:var(--pui-preview-content-gap);color:var(--text);background:transparent;border:0;box-shadow:none}
.pui-area-chart-preview__plot{display:flex;flex-direction:column;min-width:0}.pui-area-chart-preview__plot svg{display:block;width:100%;height:var(--pui-area-chart-height);overflow:visible}.pui-area-chart-preview--small{--pui-area-chart-height:132px}.pui-area-chart-preview--medium{--pui-area-chart-height:160px}.pui-area-chart-preview--large{--pui-area-chart-height:188px}
.pui-area-chart-preview__grid line{stroke:var(--pui-chart-grid-line);stroke-width:1;vector-effect:non-scaling-stroke}.pui-area-chart-preview__area{opacity:0;transform:translateY(5px);transform-origin:center bottom;transition:opacity var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay),transform var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay)}.pui-area-chart-preview__line{fill:none;stroke:var(--pui-chart-accent);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay)}.pui-area-chart-preview__dot{fill:var(--surface-solid);stroke:var(--pui-chart-accent);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay)}
.pui-area-chart-preview.is-entered .pui-area-chart-preview__area{opacity:1;transform:translateY(0)}.pui-area-chart-preview.is-entered .pui-area-chart-preview__line{stroke-dashoffset:0}.pui-area-chart-preview.is-entered .pui-area-chart-preview__dot{opacity:1}.pui-area-chart-preview__axis{display:grid;grid-template-columns:repeat(var(--pui-area-chart-points,6),minmax(0,1fr));align-items:center;color:var(--muted);font-size:var(--pui-font-size-caption);line-height:var(--pui-line-height-caption);text-align:center}.pui-area-chart-preview__axis span:first-child{text-align:left}.pui-area-chart-preview__axis span:last-child{text-align:right}
.pui-bar-chart-preview__plot,.pui-waffle-preview__plot{display:flex;flex-direction:column;gap:var(--pui-preview-space);min-width:0}
.pui-bar-chart-preview__scale{display:flex;align-items:center;justify-content:space-between;gap:var(--pui-preview-space);color:var(--muted);font-size:var(--pui-font-size-caption);line-height:var(--pui-line-height-caption);font-variant-numeric:tabular-nums}
.pui-bar-chart-preview__item,.pui-waffle-preview__item,.pui-bar-chart-preview__tracks{display:flex;flex-direction:column;gap:var(--pui-preview-space-xs);min-width:0}
.pui-bar-chart-preview__track{display:flex;width:100%;height:var(--pui-chart-bar-size);min-width:0;overflow:hidden;background:var(--pui-chart-track);border-radius:var(--pui-preview-radius-round)}
.pui-bar-chart-preview__segment{flex:0 0 var(--pui-bar-ratio);width:var(--pui-bar-ratio);height:100%;background:var(--pui-chart-gradient);opacity:.24;transform:scaleX(0);transform-origin:left center;transition:transform var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay),opacity var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay)}
.pui-bar-chart-preview.is-entered .pui-bar-chart-preview__segment{opacity:1;transform:scaleX(1)}
.pui-bar-chart-preview__group{display:grid;grid-template-columns:minmax(48px,auto) minmax(0,1fr);align-items:center;gap:var(--pui-preview-space-sm)}
.pui-bar-chart-preview--small{--pui-chart-bar-size:8px}.pui-bar-chart-preview--medium{--pui-chart-bar-size:12px}.pui-bar-chart-preview--large{--pui-chart-bar-size:16px}
.pui-bar-chart-preview--grid .pui-bar-chart-preview__track{background-color:var(--pui-chart-track);background-image:linear-gradient(90deg,transparent 24%,var(--pui-chart-grid-line) 25%,transparent 26%,transparent 49%,var(--pui-chart-grid-line) 50%,transparent 51%,transparent 74%,var(--pui-chart-grid-line) 75%,transparent 76%)}
.pui-bar-chart-preview--vertical.pui-bar-chart-preview--grid .pui-bar-chart-preview__track{background-image:linear-gradient(0deg,transparent 24%,var(--pui-chart-grid-line) 25%,transparent 26%,transparent 49%,var(--pui-chart-grid-line) 50%,transparent 51%,transparent 74%,var(--pui-chart-grid-line) 75%,transparent 76%)}
.pui-bar-chart-preview--vertical .pui-bar-chart-preview__plot{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr);align-items:end;gap:var(--pui-preview-space);min-height:160px}
.pui-bar-chart-preview--vertical .pui-bar-chart-preview__item{height:100%;justify-content:flex-end}.pui-bar-chart-preview--vertical .pui-bar-chart-preview__heading{order:2;justify-content:center;flex-wrap:wrap;text-align:center}.pui-bar-chart-preview--vertical .pui-bar-chart-preview__tracks{flex:1;justify-content:flex-end}.pui-bar-chart-preview--vertical .pui-bar-chart-preview__track{flex-direction:column-reverse;width:var(--pui-chart-bar-size);height:130px;margin:0 auto}.pui-bar-chart-preview--vertical .pui-bar-chart-preview__segment{flex-basis:var(--pui-bar-ratio);width:100%;height:var(--pui-bar-ratio);background:var(--pui-chart-gradient-vertical);transform:scaleY(0);transform-origin:center bottom}.pui-bar-chart-preview--vertical.is-entered .pui-bar-chart-preview__segment{transform:scaleY(1)}
.pui-bar-chart-preview--vertical.pui-bar-chart-preview--grouped .pui-bar-chart-preview__tracks{flex-direction:row;align-items:flex-end;justify-content:center}.pui-bar-chart-preview--vertical .pui-bar-chart-preview__group{display:flex;flex-direction:column-reverse;align-items:center;gap:var(--pui-preview-space-xs)}.pui-bar-chart-preview--vertical .pui-bar-chart-preview__group .pui-bar-chart-preview__track{height:110px}
.pui-waffle-preview__grid{display:grid;grid-template-columns:repeat(var(--pui-waffle-columns),var(--pui-waffle-cell-size));gap:var(--pui-preview-space-xs);max-width:100%}.pui-waffle-preview__cell{box-sizing:border-box;width:var(--pui-waffle-cell-size);height:var(--pui-waffle-cell-size);background:var(--pui-chart-cell-gradient);box-shadow:inset 0 0 0 1px var(--pui-chart-fade-outline);opacity:0;transform:translateY(3px) scale(.76);transition:opacity var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay),transform var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay)}.pui-waffle-preview.is-entered .pui-waffle-preview__cell{opacity:var(--pui-waffle-opacity);transform:translateY(0) scale(1)}.pui-waffle-preview__cell.is-group-start{margin-left:var(--pui-preview-space-xs)}
.pui-area-chart-preview.is-replay-reset .pui-area-chart-preview__area,.pui-area-chart-preview.is-replay-reset .pui-area-chart-preview__line,.pui-area-chart-preview.is-replay-reset .pui-area-chart-preview__dot,.pui-bar-chart-preview.is-replay-reset .pui-bar-chart-preview__segment,.pui-waffle-preview.is-replay-reset .pui-waffle-preview__cell,.pui-donut-chart-preview.is-replay-reset :is(.pui-donut-chart-preview__arc,.pui-donut-chart-preview__endpoint),.pui-radar-chart-preview.is-replay-reset :is(.pui-radar-chart-preview__area,.pui-radar-chart-preview__line,.pui-radar-chart-preview__dot){transition:none!important;transition-delay:0ms!important}
.pui-waffle-preview--rounded .pui-waffle-preview__cell{border-radius:var(--pui-chart-cell-radius)}.pui-waffle-preview--circle .pui-waffle-preview__cell{border-radius:var(--pui-preview-radius-round)}.pui-waffle-preview--square .pui-waffle-preview__cell{border-radius:0}.pui-waffle-preview--small{--pui-waffle-cell-size:10px}.pui-waffle-preview--medium{--pui-waffle-cell-size:12px}.pui-waffle-preview--large{--pui-waffle-cell-size:14px}
.pui-chart-preview__legend{display:flex;align-items:center;flex-wrap:wrap;gap:var(--pui-preview-space-xs) var(--pui-preview-space);color:var(--muted);font-size:var(--pui-font-size-caption);line-height:var(--pui-line-height-caption)}.pui-chart-preview__legend span{display:inline-flex;align-items:center;gap:var(--pui-preview-space-xs)}.pui-chart-preview__legend i{width:8px;height:8px;background:var(--pui-chart-accent);border-radius:var(--pui-preview-radius-round)}
.pui-chart-preview__empty{margin:0;padding:var(--pui-preview-space-xl) 0;color:var(--muted);font-size:var(--pui-font-size-body-medium);line-height:var(--pui-line-height-body-medium);text-align:center}
.pui-chart-theme--neutral{--pui-chart-accent:var(--pui-chart-accent-neutral);--pui-chart-gradient:var(--pui-chart-gradient-neutral);--pui-chart-gradient-vertical:var(--pui-chart-gradient-vertical-neutral);--pui-chart-cell-gradient:var(--pui-chart-cell-gradient-neutral)}.pui-chart-theme--violet{--pui-chart-accent:var(--pui-chart-accent-violet);--pui-chart-gradient:var(--pui-chart-gradient-violet);--pui-chart-gradient-vertical:var(--pui-chart-gradient-vertical-violet);--pui-chart-cell-gradient:var(--pui-chart-cell-gradient-violet)}.pui-chart-theme--blue{--pui-chart-accent:var(--pui-chart-accent-blue);--pui-chart-gradient:var(--pui-chart-gradient-blue);--pui-chart-gradient-vertical:var(--pui-chart-gradient-vertical-blue);--pui-chart-cell-gradient:var(--pui-chart-cell-gradient-blue)}.pui-chart-theme--teal{--pui-chart-accent:var(--pui-chart-accent-teal);--pui-chart-gradient:var(--pui-chart-gradient-teal);--pui-chart-gradient-vertical:var(--pui-chart-gradient-vertical-teal);--pui-chart-cell-gradient:var(--pui-chart-cell-gradient-teal)}.pui-chart-theme--pink{--pui-chart-accent:var(--pui-chart-accent-pink);--pui-chart-gradient:var(--pui-chart-gradient-pink);--pui-chart-gradient-vertical:var(--pui-chart-gradient-vertical-pink);--pui-chart-cell-gradient:var(--pui-chart-cell-gradient-pink)}.pui-chart-theme--amber{--pui-chart-accent:var(--pui-chart-accent-amber);--pui-chart-gradient:var(--pui-chart-gradient-amber);--pui-chart-gradient-vertical:var(--pui-chart-gradient-vertical-amber);--pui-chart-cell-gradient:var(--pui-chart-cell-gradient-amber)}
/* Rebind floating elevation on AppShell after its local --shadow preference is resolved. */
.app-shell[data-shadow="on"]{--shadow-floating:var(--shadow)}
.pui-donut-chart-preview__plot{position:relative;width:var(--pui-donut-size);height:var(--pui-donut-size);margin-inline:auto}.pui-donut-chart-preview__plot svg{display:block;width:100%;height:100%;overflow:visible}.pui-donut-chart-preview--small{--pui-donut-size:164px}.pui-donut-chart-preview--medium{--pui-donut-size:196px}.pui-donut-chart-preview--large{--pui-donut-size:224px}.pui-donut-chart-preview__arc{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-6deg) scale(.92);transform-origin:center;transition:stroke-dashoffset var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay),transform var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay)}.pui-donut-chart-preview__endpoint{fill:var(--pui-chart-accent);opacity:0;transform:scale(.2);transform-origin:center;transition:opacity var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay),transform var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay)}.pui-donut-chart-preview.is-entered .pui-donut-chart-preview__arc{stroke-dashoffset:0;transform:rotate(0) scale(1)}.pui-donut-chart-preview.is-entered .pui-donut-chart-preview__endpoint{opacity:1;transform:scale(1)}.pui-donut-chart-preview__center{position:absolute;inset:50% auto auto 50%;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;justify-content:center;gap:var(--pui-preview-space-xs);pointer-events:none}.pui-donut-chart-preview__center strong{font-size:var(--pui-font-size-title-large);line-height:var(--pui-line-height-title-large);font-variant-numeric:tabular-nums}.pui-donut-chart-preview__center span{color:var(--muted);font-size:var(--pui-font-size-caption);line-height:var(--pui-line-height-caption)}
.pui-radar-chart-preview svg{display:block;width:100%;height:var(--pui-radar-size);overflow:visible}.pui-radar-chart-preview--small{--pui-radar-size:220px}.pui-radar-chart-preview--medium{--pui-radar-size:254px}.pui-radar-chart-preview--large{--pui-radar-size:286px}.pui-radar-chart-preview__grid :is(polygon,line){fill:none;stroke:var(--pui-chart-grid-line);stroke-width:1;vector-effect:non-scaling-stroke}.pui-radar-chart-preview__labels{fill:var(--muted);font-size:var(--pui-font-size-caption)}.pui-radar-chart-preview__series{transform:scale(.06);transform-origin:150px 150px;opacity:0;transition:transform var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay),opacity var(--pui-chart-duration) var(--pui-ease-standard) var(--pui-chart-delay)}.pui-radar-chart-preview.is-entered .pui-radar-chart-preview__series{transform:scale(1);opacity:1}.pui-radar-chart-preview__line{fill:none;stroke:var(--pui-chart-accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.pui-radar-chart-preview__dot{fill:var(--surface-solid);stroke:var(--pui-chart-accent);stroke-width:2;vector-effect:non-scaling-stroke}
.pui-area-chart-preview.is-reduced-motion *,.pui-bar-chart-preview.is-reduced-motion .pui-bar-chart-preview__segment,.pui-waffle-preview.is-reduced-motion .pui-waffle-preview__cell,.pui-donut-chart-preview.is-reduced-motion *,.pui-radar-chart-preview.is-reduced-motion *{transition-duration:1ms!important;transition-delay:0ms!important}

/* SortableList owns one continuous collection Surface and one scroll context. */
.pui-sortable-list-showcase{display:flex;flex-direction:column;gap:var(--pui-preview-content-gap);width:100%;min-width:0;background:transparent}.pui-sortable-list-preview{box-sizing:border-box;width:100%;height:min(var(--pui-sortable-height),100%);min-height:180px;overflow:hidden;background:var(--surface);border:1px solid transparent;border-radius:var(--pui-preview-radius-large);box-shadow:none}.pui-sortable-list-preview.is-bordered{border-color:var(--border)}.pui-sortable-list-preview__viewport{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.pui-sortable-list-preview__viewport::-webkit-scrollbar{display:none}.pui-sortable-list-preview__item{position:relative;transition:transform var(--pui-sortable-duration) var(--pui-ease-standard),opacity var(--pui-sortable-duration) var(--pui-ease-standard),background-color var(--pui-sortable-duration) var(--pui-ease-standard)}.pui-sortable-list-preview__item.is-dragging{z-index:2;opacity:.72;background:var(--surface-soft);transform:scale(.985)}.pui-sortable-list-preview__item.is-target{box-shadow:inset 0 2px 0 var(--brand)}.pui-sortable-list-preview__item.is-disabled{opacity:.52}.pui-sortable-list-preview__cell{border-radius:0!important;box-shadow:none!important}.pui-sortable-list-preview__item [data-sortable-handle]{cursor:grab;touch-action:none}.pui-sortable-list-preview.is-dragging [data-sortable-handle]{cursor:grabbing}.pui-sortable-list-preview__status{margin:0;color:var(--muted);font-size:var(--pui-font-size-caption);line-height:var(--pui-line-height-caption)}.pui-sortable-list-preview.is-reduced-motion *{transition-duration:1ms!important}

/* Tour is edge-to-edge inside PreviewDevice, never the browser viewport. */
.pui-tour-showcase{position:relative;display:flex;box-sizing:border-box;width:100%;height:100%;min-height:0;flex-direction:column;justify-content:center;gap:var(--pui-section-gap);padding:var(--pui-preview-component-layout-padding);overflow:hidden;background:transparent}.pui-tour-showcase__targets{overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--pui-preview-radius-large)}.pui-tour-showcase__targets .pui-cell{border-radius:0;box-shadow:none}.pui-tour-showcase__action{display:flex;justify-content:center}.pui-tour-showcase__error{margin:0;color:var(--danger);font-size:var(--pui-font-size-caption);line-height:var(--pui-line-height-caption);text-align:center}.pui-tour-preview{position:absolute;z-index:11500;inset:0;opacity:0;transition:opacity var(--pui-tour-duration) var(--pui-ease-standard)}.pui-tour-preview.is-entered{opacity:1}.pui-tour-preview__mask{position:absolute;background:rgba(9,9,11,.56);pointer-events:auto}.pui-tour-preview--overlay-blur .pui-tour-preview__mask,.app-shell[data-frost="on"] .pui-tour-preview__mask{-webkit-backdrop-filter:var(--pui-overlay-blur);backdrop-filter:var(--pui-overlay-blur)}.pui-tour-preview__target{position:absolute;box-sizing:border-box;border:2px solid color-mix(in srgb,var(--brand) 76%,white);border-radius:var(--pui-preview-radius-large);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);pointer-events:none}.pui-tour-preview__panel{position:absolute;display:flex;box-sizing:border-box;max-width:calc(100% - 32px);max-height:260px;flex-direction:column;gap:var(--pui-preview-content-gap);padding:var(--pui-surface-inset,var(--pui-preview-space-lg));overflow:hidden;color:var(--text);background:var(--surface-solid);border:1px solid var(--border);border-radius:var(--pui-preview-radius-large);box-shadow:var(--shadow-floating);pointer-events:auto;transition:transform var(--pui-tour-duration) var(--pui-ease-standard);transform:translateY(4px)}.pui-tour-preview.is-entered .pui-tour-preview__panel{transform:translateY(0)}.pui-tour-preview__panel header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--pui-preview-content-gap)}.pui-tour-preview__panel header>div{display:flex;min-width:0;flex-direction:column;gap:var(--pui-preview-space-xs)}.pui-tour-preview__panel header span{color:var(--muted);font-size:var(--pui-font-size-caption);line-height:var(--pui-line-height-caption)}.pui-tour-preview__content{min-height:0;overflow-y:auto;color:var(--muted);font-size:var(--pui-font-size-body-medium);line-height:var(--pui-line-height-body-medium)}.pui-tour-preview__panel footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--pui-preview-content-gap)}.app-shell[data-shadow="off"] .pui-tour-preview__panel{box-shadow:none}.app-shell[data-frost="on"] .pui-tour-preview__panel{background:var(--surface);-webkit-backdrop-filter:var(--pui-overlay-blur);backdrop-filter:var(--pui-overlay-blur)}.app-shell[data-spacing="equal"] .pui-tour-preview__panel,.app-shell[data-spacing="equal"] .pui-tour-preview__panel :is(header,footer){gap:var(--pui-surface-inset,var(--pui-preview-space-lg))}.pui-tour-preview.is-reduced-motion,.pui-tour-preview.is-reduced-motion *{transition-duration:1ms!important}

/* Tabs owns its one shared Surface.  Frost and fruit must never turn each tab
 * trigger into a second glass Button.  Keep this at the cascade tail because
 * the generic PUI Button mirror deliberately applies frosted surfaces later. */
body .app-shell[data-page-mode] .pui-tabs-preview > .pui-tabs-preview__header .pui-tabs-preview__button.pui-button-preview {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body .app-shell[data-page-mode][data-frost="on"] .pui-tabs-preview > .pui-tabs-preview__header {
  -webkit-backdrop-filter: var(--blur) !important;
  backdrop-filter: var(--blur) !important;
}

/* Appearance effects are component-tree semantics, not a second layout mode.
   When the master switch is off, retain geometry while disabling only effect
   tokens; the raw shadow/frost/radius preferences remain persisted in state. */
.app-shell[data-effects="off"] .preview-device__viewport {
  --shadow: none;
  --shadow-soft: none;
  --shadow-floating: none;
  --shadow-edge-top: none;
  --shadow-edge-bottom: none;
  --shadow-edge-left: none;
  --shadow-edge-right: none;
  --preview-shadow: none;
  --preview-shadow-card: none;
  --blur: none;
  --pui-overlay-blur: none;
  --pui-popup-overlay-blur: none;
}

/* Leaf and list roots never become elevated merely because the global shadow
   switch is on. Their own selected/focus inset states remain authored above. */
body .app-shell[data-page-mode] .preview-stage .pui-image,
body .app-shell[data-page-mode] .preview-stage .pui-image-demo {
  box-shadow: none;
}

/* Attached surfaces cast away from the edge they are attached to. */
body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview,
body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--card .pui-popup-preview__surface {
  box-shadow: var(--shadow-edge-top);
}
body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--card {
  box-shadow: none;
}
body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--card .pui-popup-preview__surface {
  box-shadow: var(--shadow-edge-top);
}
body .app-shell[data-page-mode] .preview-stage .overlay-box--bottom .pui-popup-preview {
  box-shadow: var(--shadow-edge-bottom);
}
body .app-shell[data-page-mode] .preview-stage .overlay-box--left .pui-popup-preview {
  box-shadow: var(--shadow-edge-left);
}
body .app-shell[data-page-mode] .preview-stage .overlay-box--right .pui-popup-preview {
  box-shadow: var(--shadow-edge-right);
}
body .app-shell[data-page-mode] .preview-stage .overlay-box--center .pui-popup-preview {
  box-shadow: var(--shadow-floating);
}
body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview,
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview {
  box-shadow: var(--shadow-edge-bottom);
}
body .app-shell[data-page-mode] .preview-stage .pui-tabbar-preview {
  box-shadow: none;
}
body .app-shell[data-page-mode] .preview-stage .pui-tabbar-preview--shape-round {
  box-shadow: var(--shadow-floating);
}
body .app-shell[data-page-mode] .preview-stage .pui-tabbar-preview.is-split .pui-tabbar-preview__item + .pui-tabbar-preview__item::before {
  background: var(--pui-tabbar-split-color);
}
/* Equal spacing must be the last component-mirror cascade: the page-mode
   blocks below the first governance section otherwise reset these surfaces. */
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog--preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog-preview__body { gap: var(--pui-surface-stack-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__head { padding: var(--pui-surface-inset) var(--pui-surface-inset) 0; }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__content.is-active { padding: 0 var(--pui-surface-inset) var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__footer { gap: var(--pui-surface-stack-gap); padding: 0 var(--pui-surface-inset) var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__description { padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__items--list { padding-left: var(--pui-surface-inset); padding-right: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-popover-preview { padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-navigation-menu-preview__panel { gap: var(--pui-surface-stack-gap); padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview { display: grid; gap: var(--pui-surface-section-gap); padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__header,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__body,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__footer { padding-left: 0; padding-right: 0; }
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview__panel-inner { gap: var(--pui-surface-stack-gap); padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-collapsible-preview__content-inner,
body .app-shell[data-spacing="equal"] .preview-stage .pui-upload-preview__files,
body .app-shell[data-spacing="equal"] .preview-stage .pui-swiper-preview__viewport { gap: var(--pui-surface-stack-gap); }

/* Final equal-spacing cascade for mirrors whose page-mode rules are emitted
   later in this stylesheet.  The extra page-mode selectors otherwise win over
   the component-level Surface contract and silently leave gap:0/panel rhythm
   in Sheet, Dialog and the remaining eligible mirrors. */
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog--preview {
  gap: var(--pui-surface-section-gap);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog-preview__body {
  gap: var(--pui-surface-stack-gap);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview {
  gap: var(--pui-surface-section-gap);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__head {
  padding: var(--pui-surface-inset) var(--pui-surface-inset) 0;
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__content.is-active {
  padding: 0 var(--pui-surface-inset) var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__footer {
  gap: var(--pui-surface-stack-gap);
  padding: 0 var(--pui-surface-inset) var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview {
  gap: var(--pui-surface-section-gap);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__description {
  padding: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__items--list {
  padding-left: var(--pui-surface-inset);
  padding-right: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-popover-preview {
  padding: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-navigation-menu-preview__panel {
  gap: var(--pui-surface-stack-gap);
  padding: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview {
  display: grid;
  gap: var(--pui-surface-section-gap);
  padding: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__header,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__body,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__footer {
  padding-left: 0;
  padding-right: 0;
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview {
  gap: var(--pui-surface-section-gap);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview__panel-inner {
  gap: var(--pui-surface-stack-gap);
  padding: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-collapsible-preview__content-inner,
body .app-shell[data-spacing="equal"] .preview-stage .pui-upload-preview__files,
body .app-shell[data-spacing="equal"] .preview-stage .pui-swiper-preview__viewport {
  gap: var(--pui-surface-stack-gap);
}

/* Equal spacing coverage for the remaining eligible component mirrors. */
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-navigation-menu-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-collapsible-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-upload-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-swiper-preview {
  --pui-surface-inset: var(--pui-preview-panel-padding);
  --pui-surface-stack-gap: var(--pui-surface-inset);
  --pui-surface-section-gap: var(--pui-surface-inset);
}

body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-navigation-menu-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview,
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview {
  gap: var(--pui-surface-section-gap);
}

body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview__panel-inner,
body .app-shell[data-spacing="equal"] .preview-stage .pui-navigation-menu-preview__panel {
  gap: var(--pui-surface-stack-gap);
  padding: var(--pui-surface-inset);
}

body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__header,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__body,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__footer,

body .app-shell[data-spacing="equal"] .preview-stage .pui-collapsible-preview__content-inner,
body .app-shell[data-spacing="equal"] .preview-stage .pui-upload-preview__files,
body .app-shell[data-spacing="equal"] .preview-stage .pui-swiper-preview__viewport {
  gap: var(--pui-surface-stack-gap);
}
.pui-overlay-showcase__icon { display: grid; place-items: center; width: 34px; height: 34px; background: var(--surface-soft); border-radius: var(--pui-preview-radius-round); }
.pui-overlay-showcase__content strong { font-size: var(--pui-font-size-body-medium); }
.pui-overlay-showcase__content p { margin: 0; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-label); }
.pui-overlay-showcase__content [role="status"] { color: var(--muted); font-size: var(--pui-font-size-caption); }

@media (max-width: 680px) {
  .pui-action-sheet-showcase .overlay-box,
  .pui-overlay-showcase .overlay-box { min-height: 280px; }
}

@media (max-width:1180px) { .workspace { grid-template-columns:224px minmax(0,1fr); } .inspector { grid-column:1 / -1; border-top:1px solid var(--border); border-left:0; } .topbar__controls { max-width:360px; } }
@media (max-width:760px) { .topbar { grid-template-columns:minmax(0,1fr) auto; padding:var(--pui-preview-content-gap) var(--pui-preview-space-step-12); gap:var(--pui-preview-space-normal); } .topbar__nav { grid-column:1 / -1; grid-row:2; justify-content:flex-start; padding-bottom:var(--pui-preview-space-xxs); } .topbar__controls { max-width:150px; } .visual-toggle__text { display:none; } .workspace { display:block; } .sidebar { display:none; } .preview-toolbar { top:var(--pui-site-toolbar-offset-mobile); padding:var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-lg) var(--pui-preview-space-step-12); } .preview-stage { padding:var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12); } .phone { min-height:620px; padding:var(--pui-preview-space-lg); } .phone__content { min-height:510px; } .inspector { padding:var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-lg); } }

/* Release documentation layout. This deliberately resets the early glass-demo
   cascade so the live preview reads like a focused component reference. */
:root {
  --docs-canvas: #fafafa;
  --docs-canvas-dark: #111113;
  --docs-code: #f4f4f5;
  --docs-sidebar: #fcfcfc;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  color: var(--text);
  background: var(--page);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 57px;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-step-24);
  gap: var(--pui-preview-space-step-24);
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.brand {
  gap: var(--pui-preview-space-step-9);
  min-width: max-content;
}

.brand__mark {
  width: 25px;
  height: 25px;
  border-radius: var(--pui-preview-radius-step-5);
}

.brand__name {
  font-size: var(--pui-font-size-body-large);
  line-height: var(--pui-line-height-caption);
}

.brand__sub {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.brand__version {
  margin-left: var(--pui-preview-space-xxs);
  color: var(--subtle);
  background: transparent;
  border: 0;
}

.topbar__nav {
  min-width: 0;
  gap: var(--pui-preview-space-xs);
}

.topbar__link {
  position: relative;
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  color: var(--muted);
  border-radius: var(--pui-preview-radius-step-5);
}

.topbar__link:hover,
.topbar__link.is-active {
  color: var(--text);
  background: var(--surface-soft);
}

.topbar__link.is-active::after {
  display: none;
}

.topbar__controls {
  flex-wrap: nowrap;
  min-width: max-content;
}

.visual-toggle,
.theme-toggle {
  height: 30px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  border-radius: var(--pui-preview-radius-step-5);
}

.visual-toggle:hover,
.theme-toggle:hover,
.visual-toggle.is-active {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--border);
}

.visual-toggle.is-active {
  font-weight: var(--pui-font-weight-bold);
}

.visual-toggle__dot {
  background: var(--subtle);
  border-radius: var(--pui-preview-radius-round);
}

.visual-toggle.is-active .visual-toggle__dot {
  background: var(--text);
}

.theme-toggle__track {
  width: 28px;
  height: 16px;
  border-radius: var(--pui-preview-radius-round);
}

.theme-toggle__thumb {
  top: var(--pui-preview-space-step-3);
  width: 10px;
  height: 10px;
}

.workspace {
  grid-template-columns: 238px minmax(0, 1fr) 304px;
  align-items: start;
  min-height: calc(100vh - 57px);
}

.sidebar,
.inspector {
  position: sticky;
  top: var(--pui-site-topbar-height);
  height: calc(100vh - 57px);
  background: var(--docs-sidebar);
  box-shadow: none;
}

.app-shell[data-theme="dark"] .sidebar,
.app-shell[data-theme="dark"] .inspector {
  background: #0d0d0f;
}

.sidebar {
  padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12) var(--pui-preview-space-step-32);
  overflow: auto;
}

.search {
  height: 34px;
  padding: 0 var(--pui-preview-space-normal);
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
}

.search input {
  color: var(--text);
}

.component-group {
  margin-bottom: var(--pui-preview-space-step-17);
}

.component-group__title {
  margin: 0 var(--pui-preview-content-gap) var(--pui-preview-space-step-5);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  letter-spacing: 0.04em;
}

.component-item {
  min-height: 31px;
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  border-radius: var(--pui-preview-radius-step-5);
}

.component-item:hover,
.component-item.is-active {
  color: var(--text);
  background: var(--surface-soft);
}

.status-dot {
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
}

.main {
  min-width: 0;
  background: var(--page);
}

.preview-toolbar {
  top: var(--pui-site-topbar-height);
  z-index: 20;
  min-height: 113px;
  padding: var(--pui-preview-space-step-24) var(--pui-preview-space-step-32) var(--pui-preview-space-step-17);
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.preview-kicker {
  margin: 0;
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.preview-toolbar h1 {
  margin: var(--pui-preview-space-step-5) 0 0;
  color: var(--text);
  font-size: var(--pui-font-size-headline);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-title-large);
}

.toolbar-actions {
  align-items: center;
}

.tabs {
  padding: var(--pui-preview-space-step-3);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-small);
}

.tab {
  height: 27px;
  padding: 0 var(--pui-preview-space-normal);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  border: 0;
  border-radius: var(--pui-preview-radius-step-4);
}

.tab.is-active {
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
}

.device-select,
.icon-button,
.mini-action {
  height: 32px;
  color: var(--muted);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
}

.device-select {
  min-width: 164px;
  padding: 0 var(--pui-preview-space-step-9);
}

.icon-button {
  width: 32px;
  padding: 0;
  color: var(--text);
}

.preview-stage {
  display: block !important;
  min-height: calc(100vh - 170px);
  padding: var(--pui-preview-space-xxl) var(--pui-preview-space-step-32) var(--pui-preview-space-step-64);
  background: var(--page);
}

.preview-canvas {
  width: min(100%, 760px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--docs-canvas);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-10);
  box-shadow: var(--shadow-soft);
}

.app-shell[data-theme="dark"] .preview-canvas {
  background: var(--docs-canvas-dark);
}

.preview-canvas__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 var(--pui-preview-space-lg);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--surface-solid) 76%, transparent);
  border-bottom: 1px solid var(--border);
}

.preview-canvas__body {
  display: grid;
  place-items: center;
  min-height: 690px;
  padding: var(--pui-preview-space-step-34) var(--pui-preview-space-step-22);
}

.phone {
  box-sizing: border-box;
  width: min(100%, var(--device-width, 393px));
  min-height: 622px;
  margin: 0;
  padding: var(--pui-preview-space-step-15);
  overflow: hidden;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-large);
  box-shadow: var(--shadow);
}

.phone__status {
  padding: 0 var(--pui-preview-space-step-1) var(--pui-preview-space-normal);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.phone__title {
  padding: 0 0 var(--pui-preview-space-step-12);
  color: var(--text);
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-large);
}

.phone__content {
  min-height: 548px;
  padding-top: var(--pui-preview-space-lg);
}

.demo-section {
  gap: var(--pui-preview-space-normal);
}

.pui-button {
  min-height: 38px;
  padding: 0 var(--pui-preview-space-step-13);
  color: var(--text);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-semibold);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-small);
  box-shadow: none;
}

.pui-button:hover:not(.is-disabled) {
  background: var(--surface-soft);
}

.pui-button--primary,
.pui-button--success,
.pui-button--warning {
  color: #fafafa;
  background: #18181b;
  border-color: #18181b;
}

.pui-button--primary:hover:not(.is-disabled),
.pui-button--success:hover:not(.is-disabled),
.pui-button--warning:hover:not(.is-disabled) {
  color: #fafafa;
  background: #27272a;
}

.pui-button--danger,
.pui-button--danger.pui-button--base {
  color: #dc2626;
  background: transparent;
  border-color: #fecaca;
}

.app-shell[data-theme="dark"] .pui-button--primary,
.app-shell[data-theme="dark"] .pui-button--success,
.app-shell[data-theme="dark"] .pui-button--warning {
  color: #18181b;
  background: #fafafa;
  border-color: #fafafa;
}

.pui-button--text {
  padding-inline: var(--pui-preview-space-step-4);
  background: transparent;
  border-color: transparent;
}

.pui-button--block {
  width: 100%;
  min-width: 0;
}

.pui-cell {
  min-height: 60px;
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-11);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-7);
  box-shadow: none;
}

.pui-cell + .pui-cell {
  margin-top: 0;
}

.pui-cell__main > strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-semibold);
}

.pui-cell__main > span,
.pui-cell > em {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

.pui-cell__media {
  color: var(--muted);
}

.pui-field,
.field-demo,
.label-demo {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-7);
  box-shadow: none;
}

.pui-field {
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-11);
}

.pui-field input,
.pui-field textarea,
.field-demo input,
.label-demo input {
  color: var(--text);
  background: transparent;
}

.pui-field:focus-within,
.field-demo:focus-within,
.label-demo:focus-within {
  border-color: var(--muted);
  outline: 2px solid color-mix(in srgb, var(--muted) 18%, transparent);
  outline-offset: 1px;
}

.pui-switch {
  width: 36px;
  height: 21px;
  padding: var(--pui-preview-space-xxs);
  background: #d4d4d8;
  border: 0;
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
}

.pui-switch i {
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: var(--pui-preview-radius-round);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.pui-switch.is-checked {
  background: #18181b;
}

.pui-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-xs);
  height: var(--pui-preview-space-step-24);
  min-height: 24px;
  padding: 0 var(--pui-preview-content-gap);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  border-radius: var(--pui-preview-radius-small);
  box-shadow: none;
}

.pui-tag--primary,
.pui-tag--success,
.pui-tag--warning,
.pui-tag--danger {
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.pui-slider span {
  background: var(--pui-slider-active, #18181b);
}

.pui-progress span {
  background: var(--pui-progress-active, var(--progress-color, #18181b));
}

.pui-slider i {
  width: var(--pui-slider-thumb-size, 28px);
  height: var(--pui-slider-thumb-size, 28px);
  background: var(--surface-solid);
  border: 2px solid #18181b;
  box-shadow: none;
}

.overlay-box {
  min-height: 390px;
  overflow: hidden;
  background: rgba(24, 24, 27, 0.38);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-9);
}

.overlay-panel,
.pui-dialog,
.pui-popup-preview,
.action-sheet-preview,

.pui-popup-preview {
  width: calc(100% - 24px);
  max-width: none;
  margin: var(--pui-preview-space-step-12);
}

.pui-popup-preview__header {
  min-height: 52px;
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-11);
  border-bottom: 1px solid var(--border);
}

.pui-popup-preview__icon {
  width: 26px;
  height: 26px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
}

.pui-popup-preview__icon--check {
  color: #166534;
}

.pui-popup-preview__title-area strong {
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-semibold);
}

.pui-popup-preview__title-area span,
.pui-popup-preview__body p {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.pui-popup-preview__body {
  padding: var(--pui-preview-space-lg);
}

.pui-dialog {
  padding: var(--pui-preview-panel-padding-spacious);
}

.spec-sheet {
  width: min(100%, 760px);
  margin: var(--pui-preview-space-xl) auto 0;
}

.spec-sheet__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--pui-preview-panel-padding-spacious);
  padding: 0 0 var(--pui-preview-space-step-12);
  border-bottom: 1px solid var(--border);
}

.spec-sheet__head > div {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-normal);
}

.spec-sheet__head h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-large);
}

.spec-sheet__head p {
  max-width: 340px;
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-align: right;
}

.status {
  height: 20px;
  padding: 0 var(--pui-preview-space-sm);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
}

.state-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
  padding-top: var(--pui-preview-space-step-12);
}

.state-grid div {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--pui-preview-content-gap);
  min-height: 38px;
  padding: var(--pui-preview-space-step-9) var(--pui-preview-space-normal);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
}

.state-grid span,
.meta-grid span {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.state-grid strong,
.meta-grid strong {
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.inspector {
  padding: var(--pui-preview-space-step-24) var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-42);
  overflow: auto;
}

.inspector__header {
  gap: var(--pui-preview-content-gap);
  padding-bottom: var(--pui-preview-space-step-16);
}

.inspector__category {
  margin-bottom: var(--pui-preview-space-step-5);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.inspector h2 {
  font-size: var(--pui-font-size-title-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-title-small);
}

.inspector p {
  margin-top: var(--pui-preview-space-step-7);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-label);
}

.meta-grid {
  gap: var(--pui-preview-space-sm);
  margin-top: var(--pui-preview-space-step-16);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.meta-grid div {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-content-gap) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.panel {
  margin-top: var(--pui-preview-space-step-22);
}

.panel__title {
  margin-bottom: var(--pui-preview-content-gap);
}

.panel__title h3 {
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-semibold);
}

.props-panel {
  gap: var(--pui-preview-space-step-7);
}

.prop-control {
  gap: var(--pui-preview-space-step-5);
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-step-9);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
}

.prop-control > .prop-control__label {
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.prop-control input,
.prop-control select,
.prop-control textarea {
  width: 100%;
  min-height: 28px;
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-sm);
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: var(--pui-preview-radius-step-4);
}

.prop-control input:focus,
.prop-control select:focus,
.prop-control textarea:focus {
  border-color: var(--muted);
  outline: 0;
}

.prop-control input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  accent-color: #18181b;
}

.code {
  padding: var(--pui-preview-space-step-11);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  background: var(--docs-code);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-small);
}

.app-shell[data-theme="dark"] .code {
  background: #151517;
}

.compat-list {
  gap: var(--pui-preview-space-sm);
}

.compat-item {
  padding: var(--pui-preview-space-step-9);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
  box-shadow: none;
}

.compat-item strong,
.compat-item span {
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.code-stage {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 0;
}

.code-stage__header {
  padding-bottom: var(--pui-preview-space-step-12);
  border-bottom: 1px solid var(--border);
}

.preview-stage--icons {
  display: block !important;
}

.icon-library {
  width: min(100%, 860px);
}

.icon-library__hero,
.icon-toolbar,
.icon-card {
  border-radius: var(--pui-preview-radius-control, var(--pui-preview-radius-medium));
  box-shadow: none;
}

.icon-library__hero,
.icon-toolbar,
.icon-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
}

.icon-card__glyph {
  border-radius: var(--pui-preview-radius-small);
}

@media (max-width: 1220px) {
  .workspace {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .inspector {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    padding: var(--pui-preview-space-step-24);
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .inspector .props-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--pui-preview-content-gap) var(--pui-preview-space-lg);
  }

  .topbar__controls {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: var(--pui-preview-space-xxs);
  }

  .workspace {
    grid-template-columns: 206px minmax(0, 1fr);
  }

  .preview-toolbar {
    top: var(--pui-site-topbar-height);
    padding: var(--pui-preview-space-xl) var(--pui-preview-space-xl) var(--pui-preview-space-lg);
  }

  .preview-stage {
    padding: var(--pui-preview-space-xl);
  }
}

@media (max-width: 700px) {
  .topbar {
    position: static;
    display: flex;
    flex-wrap: wrap;
    min-height: auto;
    gap: var(--pui-preview-content-gap);
  }

  .brand__sub,
  .topbar__nav {
    display: none;
  }

  .topbar__controls {
    flex: 1 1 100%;
  }

  .visual-toggle,
  .theme-toggle {
    flex: 0 0 auto;
  }

  .workspace {
    display: block;
  }

  .sidebar {
    position: static;
    display: block;
    height: 210px;
    padding: var(--pui-preview-space-step-12);
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .preview-toolbar {
    position: static;
    display: grid;
    gap: var(--pui-preview-space-step-12);
    min-height: 0;
    padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-lg) var(--pui-preview-space-lg);
  }

  .preview-toolbar h1 {
    font-size: var(--pui-font-size-title-large);
    line-height: var(--pui-line-height-title-medium);
  }

  .toolbar-actions {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 32px;
    gap: var(--pui-preview-space-step-7);
    width: 100%;
  }

  .device-select {
    width: 100%;
    min-width: 0;
  }

  .preview-stage {
    min-height: 0;
    padding: var(--pui-preview-space-lg) var(--pui-preview-space-step-12) var(--pui-preview-space-step-32);
  }

  .preview-canvas {
    border-radius: var(--pui-preview-radius-medium);
  }

  .preview-canvas__body {
    min-height: 600px;
    padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12);
  }

  .phone {
    min-height: 564px;
    padding: var(--pui-preview-space-step-12);
    border-radius: var(--pui-preview-radius-step-10);
  }

  .phone__content {
    min-height: 490px;
  }

  .spec-sheet__head {
    display: grid;
    gap: var(--pui-preview-space-step-7);
    align-items: start;
  }

  .spec-sheet__head p {
    max-width: none;
    text-align: left;
  }

  .state-grid {
    grid-template-columns: 1fr;
  }

  .inspector {
    padding: var(--pui-preview-space-xl) var(--pui-preview-space-lg) var(--pui-preview-space-step-30);
  }

  .inspector .props-panel {
    grid-template-columns: 1fr;
  }

  .compat-list--grid {
    grid-template-columns: 1fr;
  }
}

/* Release component batch: display and navigation primitives. */
.pui-card-showcase-wrap,
.pui-badge-showcase,
.pui-avatar-showcase,
.pui-image-showcase,
.pui-tabs-showcase,
.pui-collapse-showcase {
  display: grid;
  gap: var(--pui-preview-space-step-12);
}

.pui-card-showcase {
  overflow: visible;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-control, var(--pui-preview-radius-medium));
  transition-property: opacity, transform, background-color;
  transition-duration: var(--pui-card-duration, 500ms);
  transition-timing-function: var(--pui-card-ease, cubic-bezier(0.2, 0, 0, 1));
}

.pui-card-showcase.is-borderless { border-color: transparent; }
.pui-card-showcase--compact header,
.pui-card-showcase--compact .pui-card-showcase__content,
.pui-card-showcase--compact footer { padding: var(--pui-preview-panel-padding-compact); }

.pui-card-showcase header,
.pui-card-showcase__content,
.pui-card-showcase footer { padding: var(--pui-preview-panel-padding); }

.pui-card-showcase header,
.pui-card-showcase footer,
.pui-card-showcase__meta,
.pui-avatar-showcase__profile,
.pui-badge-showcase__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-space-step-12);
}

.pui-card-showcase header { border-bottom: 1px solid var(--border); }
.pui-card-showcase__header-right { position: relative; display: flex; flex: none; max-width: calc(36px * 3 + 8px * 2); align-items: center; gap: var(--pui-preview-content-gap); }
.pui-card-showcase__menu { position: absolute; z-index: 4; top: calc(100% + var(--pui-preview-content-gap)); right: 0; display: grid; min-width: 148px; gap: var(--pui-preview-space-step-4); padding: var(--pui-preview-space-step-6); background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-medium); box-shadow: var(--shadow-soft); }
.pui-card-showcase header > div,
.pui-avatar-showcase__profile > div { display: grid; gap: var(--pui-preview-space-xs); min-width: 0; }
.pui-card-showcase header strong,
.pui-avatar-showcase__profile strong { color: var(--text); font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); }
.pui-card-showcase header span,
.pui-avatar-showcase__profile span,
.pui-card-showcase__content p,
.pui-tabs-showcase__panel span { color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-label); }

.pui-card-showcase header button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
}

.pui-card-showcase__content { display: grid; gap: var(--pui-preview-space-step-12); }
.pui-card-showcase__content p { margin: 0; }
.pui-card-showcase__meta { align-items: flex-start; }
.pui-card-showcase__meta span { display: inline-flex; align-items: center; gap: var(--pui-preview-space-step-5); color: var(--text); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); }
.pui-card-showcase__meta em,
.pui-avatar-showcase__profile em { color: var(--subtle); font-size: var(--pui-font-size-caption); font-style: normal; }
.pui-card-showcase__summary { display: grid; gap: var(--pui-preview-space-xs); color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-card-showcase__summary span { min-width: 0; overflow-wrap: anywhere; }
.pui-card-showcase__details { display: grid; gap: var(--pui-preview-space-step-7); padding: var(--pui-preview-space-normal); background: var(--surface-soft); border-radius: var(--pui-preview-radius-step-5); }
.pui-card-showcase__details span { display: flex; align-items: center; gap: var(--pui-preview-space-sm); color: var(--text); font-size: var(--pui-font-size-caption); }
.pui-card-showcase footer { border-top: 1px solid var(--border); }
.pui-card-showcase footer > span { color: var(--subtle); font-size: var(--pui-font-size-caption); }

.pui-badge-showcase__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pui-preview-space-normal); }
.pui-badge-demo-host {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 68px;
  padding: var(--pui-preview-space-normal);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-7);
}

.pui-badge-demo {
  --pui-badge-demo-tone: var(--text);
  --pui-badge-demo-contrast: var(--surface-solid);
  position: absolute;
  top: calc(0px - var(--pui-preview-space-step-5));
  right: calc(0px - var(--pui-preview-space-step-5));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--pui-preview-space-step-5);
  color: var(--pui-badge-demo-contrast);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-none);
  background: var(--pui-badge-demo-tone);
  border: 2px solid var(--surface-solid);
  border-radius: var(--pui-preview-radius-round);
}

.pui-badge-demo--square { border-radius: var(--pui-preview-radius-step-4); }
.pui-badge-demo--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; }
.pui-badge-demo--small { min-width: 18px; height: 18px; padding: 0 var(--pui-preview-space-xs); font-size: var(--pui-font-size-caption); }
.pui-badge-demo--large { min-width: 26px; height: 26px; padding: 0 var(--pui-preview-space-step-7); font-size: var(--pui-font-size-caption); }
.pui-badge-demo--primary { --pui-badge-demo-tone: var(--brand); --pui-badge-demo-contrast: #fff; }
.pui-badge-demo--success { --pui-badge-demo-tone: var(--success); --pui-badge-demo-contrast: #fff; }
.pui-badge-demo--warning { --pui-badge-demo-tone: var(--warning); --pui-badge-demo-contrast: #18181b; }
.pui-badge-demo--danger { --pui-badge-demo-tone: var(--danger); --pui-badge-demo-contrast: #fff; }
.pui-badge-demo--neutral { --pui-badge-demo-tone: var(--muted); --pui-badge-demo-contrast: #fff; }
.pui-badge-demo--outline { color: var(--pui-badge-demo-tone); background: transparent; border-color: var(--pui-badge-demo-tone); }
.pui-badge-demo--light { color: var(--pui-badge-demo-tone); background: color-mix(in srgb, var(--pui-badge-demo-tone) 14%, var(--surface-solid)); border-color: transparent; }
.pui-badge-demo--standalone { position: static; flex: 0 0 auto; transform: none; }
.pui-badge-showcase {
  gap: var(--pui-preview-space-step-12);
}

.pui-badge-demo-group {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}

.pui-badge-demo-group + .pui-badge-demo-group {
  padding-top: var(--pui-preview-section-gap);
}

.pui-badge-demo-group > header {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-step-3);
}

.pui-badge-demo-group > header strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
  font-weight: var(--pui-font-weight-semibold);
}

.pui-badge-demo-group > header span {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-body-small);
}

.pui-badge-demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  gap: var(--pui-preview-space-step-16);
  padding: var(--pui-preview-space-step-16);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

.pui-badge-demo-row.is-inline {
  min-height: 0;
  gap: var(--pui-preview-space-step-12);
}

.pui-badge-preview {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  color: inherit;
}

.pui-badge-preview__anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 44px;
  gap: var(--pui-preview-space-step-7);
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-lg);
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
}

.pui-badge-preview__content-text {
  overflow-wrap: anywhere;
}

.pui-badge-preview__mark {
  --pui-badge-tone: var(--danger);
  --pui-badge-soft: var(--danger-soft);
  --pui-badge-bg: var(--pui-badge-tone);
  --pui-badge-fg: var(--surface-solid);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  max-width: 120px;
  height: 20px;
  padding: 0 var(--pui-preview-space-step-5);
  overflow: hidden;
  gap: var(--pui-preview-space-xxs);
  color: var(--pui-badge-fg);
  font-size: var(--pui-font-size-caption);
  font-style: normal;
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-none);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--pui-badge-bg);
  border: 1px solid transparent;
  border-radius: var(--pui-preview-radius-round);
}

.pui-badge-preview__mark { position: absolute; z-index: 2; pointer-events: none; }
.pui-badge-preview__mark.is-primary { --pui-badge-tone: var(--brand); --pui-badge-soft: var(--brand-soft); }
.pui-badge-preview__mark.is-success { --pui-badge-tone: var(--success); --pui-badge-soft: var(--success-soft); }
.pui-badge-preview__mark.is-warning { --pui-badge-tone: var(--warning); --pui-badge-soft: var(--warning-soft); }
.pui-badge-preview__mark.is-neutral { --pui-badge-tone: var(--muted); --pui-badge-soft: var(--surface-soft); }
.pui-badge-preview__mark.is-light { --pui-badge-bg: var(--pui-badge-soft); --pui-badge-fg: var(--pui-badge-tone); }
.pui-badge-preview__mark.is-custom-color.is-light { --pui-badge-bg: var(--surface-soft); }
.pui-badge-preview__mark.is-outline { --pui-badge-bg: var(--surface-solid); --pui-badge-fg: var(--pui-badge-tone); border-color: var(--pui-badge-tone); }
.pui-badge-preview__mark.is-square { border-radius: var(--pui-preview-radius-step-4); }
.pui-badge-preview__mark.is-small { min-width: 16px; height: 16px; padding: 0 var(--pui-preview-space-xs); font-size: var(--pui-font-size-caption); }
.pui-badge-preview__mark.is-large { min-width: 24px; height: 24px; padding: 0 var(--pui-preview-space-sm); font-size: var(--pui-font-size-caption); }
.pui-badge-preview__mark.is-dot { min-width: 8px; width: 8px; max-width: 8px; height: 8px; padding: 0; border-radius: var(--pui-preview-radius-round); }
.pui-badge-preview__mark.is-small.is-dot { min-width: 6px; width: 6px; max-width: 6px; height: 6px; }
.pui-badge-preview__mark.is-large.is-dot { min-width: 10px; width: 10px; max-width: 10px; height: 10px; }
.pui-badge-preview__mark.is-top-right { top: 0; right: 0; transform: translate(50%, -50%) translate(var(--pui-badge-x), var(--pui-badge-y)); }
.pui-badge-preview__mark.is-standalone { position: relative; inset: auto; flex: 0 0 auto; transform: translate(var(--pui-badge-x), var(--pui-badge-y)); }

.pui-bubble-showcase {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-step-12);
}

.pui-bubble-showcase__thread,
.pui-bubble-showcase__stage {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-sm);
  padding: var(--pui-preview-space-lg);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

.pui-bubble-showcase__stage {
  min-height: 116px;
  align-content: center;
  background: var(--surface-solid);
}

.pui-bubble-preview {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transform-origin: center bottom;
  transition: opacity var(--pui-bubble-preview-duration, 500ms) var(--pui-bubble-preview-ease, cubic-bezier(.2, 0, 0, 1)), transform var(--pui-bubble-preview-duration, 500ms) var(--pui-bubble-preview-ease, cubic-bezier(.2, 0, 0, 1));
}

.pui-bubble-preview.is-active { opacity: 1; transform: translateY(0) scale(1); }
.pui-bubble-preview.is-start { justify-content: flex-start; }
.pui-bubble-preview.is-end { justify-content: flex-end; }
.pui-bubble-preview.is-disabled { opacity: .52; }

.pui-bubble-preview__shell {
  position: relative;
  display: flex;
  max-width: 80%;
  min-width: 0;
  flex-direction: column;
}

.pui-bubble-preview.is-ghost .pui-bubble-preview__shell { width: 100%; max-width: 100%; }

.pui-bubble-preview__surface {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-step-12);
  overflow: hidden;
  color: var(--page);
  font: inherit;
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-body-medium);
  text-align: left;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: var(--pui-site-radius-surface);
  box-shadow: none;
  transition: color var(--pui-bubble-preview-duration, 500ms) var(--pui-bubble-preview-ease, cubic-bezier(.2, 0, 0, 1)), background-color var(--pui-bubble-preview-duration, 500ms) var(--pui-bubble-preview-ease, cubic-bezier(.2, 0, 0, 1)), border-color var(--pui-bubble-preview-duration, 500ms) var(--pui-bubble-preview-ease, cubic-bezier(.2, 0, 0, 1)), transform var(--pui-bubble-preview-duration, 500ms) var(--pui-bubble-preview-ease, cubic-bezier(.2, 0, 0, 1));
}

button.pui-bubble-preview__surface { cursor: pointer; }
button.pui-bubble-preview__surface:active { transform: scale(.99); }
button.pui-bubble-preview__surface:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.pui-bubble-preview.is-secondary .pui-bubble-preview__surface { color: var(--text); background: var(--surface-solid); border-color: var(--border); }
.pui-bubble-preview.is-muted .pui-bubble-preview__surface { color: var(--text); background: var(--surface-soft); }
.pui-bubble-preview.is-tinted .pui-bubble-preview__surface { color: var(--brand); background: var(--brand-soft); }
.pui-bubble-preview.is-outline .pui-bubble-preview__surface { color: var(--text); background: var(--surface-solid); border-color: var(--border-strong); }
.pui-bubble-preview.is-ghost .pui-bubble-preview__surface { width: 100%; padding-right: 0; padding-left: 0; color: var(--text); background: transparent; }
.pui-bubble-preview.is-destructive .pui-bubble-preview__surface { color: var(--page); background: var(--danger); }

.pui-bubble-preview__clip {
  display: block;
  min-width: 0;
  max-height: var(--pui-bubble-preview-expanded, 1200px);
  overflow: hidden;
  transition: max-height var(--pui-bubble-preview-duration, 500ms) var(--pui-bubble-preview-ease, cubic-bezier(.2, 0, 0, 1)), opacity var(--pui-bubble-preview-duration, 500ms) var(--pui-bubble-preview-ease, cubic-bezier(.2, 0, 0, 1));
}

.pui-bubble-preview.is-collapsible.is-collapsed .pui-bubble-preview__clip {
  max-height: var(--pui-bubble-preview-collapsed, 80px);
}

.pui-bubble-preview__custom {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  flex-wrap: wrap;
}

.pui-bubble-preview__toggle-row {
  display: flex;
  width: 100%;
  min-width: 0;
  justify-content: flex-end;
  margin-top: var(--pui-preview-space-xs);
}

.pui-bubble-preview__toggle.pui-button {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  justify-content: flex-end !important;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--pui-preview-space-xs);
  min-height: 28px;
  padding: var(--pui-preview-space-step-3) var(--pui-preview-space-step-7);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: transparent;
  border: 0;
  border-radius: var(--pui-preview-radius-step-5);
}

.pui-bubble-preview__toggle:hover:not(:disabled) { color: var(--text); background: var(--surface-soft); }
.pui-bubble-preview__toggle:disabled { color: var(--subtle); cursor: not-allowed; }

.pui-bubble-preview__reactions {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  gap: var(--pui-preview-space-xs);
  padding: 0 var(--pui-preview-content-gap);
  flex-wrap: wrap;
}

.pui-bubble-preview__reactions.is-start { justify-content: flex-start; }
.pui-bubble-preview__reactions.is-end { justify-content: flex-end; }
.pui-bubble-preview.is-reaction-bottom .pui-bubble-preview__reactions { margin-top: var(--pui-preview-space-xs); }
.pui-bubble-preview.is-reaction-top .pui-bubble-preview__reactions { margin-bottom: var(--pui-preview-space-xs); order: -1; }

.pui-bubble-preview__reaction.pui-button {
  min-height: 24px;
  padding: var(--pui-preview-space-xxs) var(--pui-preview-space-step-7);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: var(--shadow-soft);
}

.pui-bubble-preview__reaction.pui-button.is-active { color: var(--page); background: var(--brand); border-color: var(--brand); }
.pui-bubble-preview__reaction:disabled { color: var(--subtle); cursor: not-allowed; box-shadow: none; }

.pui-tag__close {
  display: inline-flex;
  flex: 0 0 var(--pui-preview-space-lg);
  align-items: center;
  justify-content: center;
  width: var(--pui-preview-space-lg);
  height: var(--pui-preview-space-lg);
  color: currentColor;
  line-height: var(--pui-line-height-none);
  opacity: .72;
}

.pui-tag__close[tabindex] { cursor: pointer; }
.pui-tag__close:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }

.pui-bubble-preview.is-start.is-group-first .pui-bubble-preview__surface { border-bottom-left-radius: var(--pui-preview-radius-step-4); }
.pui-bubble-preview.is-start.is-group-middle .pui-bubble-preview__surface { border-top-left-radius: var(--pui-preview-radius-step-4); border-bottom-left-radius: var(--pui-preview-radius-step-4); }
.pui-bubble-preview.is-start.is-group-last .pui-bubble-preview__surface { border-top-left-radius: var(--pui-preview-radius-step-4); }
.pui-bubble-preview.is-end.is-group-first .pui-bubble-preview__surface { border-bottom-right-radius: var(--pui-preview-radius-step-4); }
.pui-bubble-preview.is-end.is-group-middle .pui-bubble-preview__surface { border-top-right-radius: var(--pui-preview-radius-step-4); border-bottom-right-radius: var(--pui-preview-radius-step-4); }
.pui-bubble-preview.is-end.is-group-last .pui-bubble-preview__surface { border-top-right-radius: var(--pui-preview-radius-step-4); }

.pui-bubble-showcase__methods {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
}

.pui-bubble-showcase__methods .pui-button { width: 100%; min-width: 0; justify-content: center; }
.pui-bubble-showcase__footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--pui-preview-content-gap); color: var(--muted); font-size: var(--pui-font-size-caption); }
.pui-bubble-showcase__footer span { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.pui-bubble-showcase__empty { padding: var(--pui-preview-space-step-22) var(--pui-preview-space-step-12); color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); text-align: center; border: 1px dashed var(--border); border-radius: var(--pui-site-radius-control); }

@media (max-width: 430px) {
  .pui-bubble-showcase__thread,
  .pui-bubble-showcase__stage { padding: var(--pui-preview-space-step-12); }
  .pui-bubble-preview__shell { max-width: 88%; }
  .pui-bubble-preview.is-ghost .pui-bubble-preview__shell { max-width: 100%; }
  .pui-bubble-showcase__footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .pui-bubble-preview,
  .pui-bubble-preview__surface,
  .pui-bubble-preview__clip { transition-duration: 1ms; animation-duration: 1ms !important; }
}

.pui-avatar-showcase__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pui-preview-space-normal); min-width: 0; }
.pui-avatar-showcase__row.is-composed { align-items: center; }
.pui-avatar-showcase__event { margin: var(--pui-preview-space-sm) 0 0; color: var(--muted); font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-small); overflow-wrap: anywhere; }
.pui-avatar-badge-host { position: relative; display: inline-flex; }
.pui-avatar-badge-host > .pui-badge-demo { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); }
.pui-avatar-action__content { display: inline-flex; align-items: center; gap: var(--pui-preview-space-sm); }
.pui-avatar-demo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #18181b;
  border: 0 solid transparent;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--pui-avatar-duration, 500ms) var(--pui-ease-standard), transform var(--pui-avatar-duration, 500ms) var(--pui-ease-standard);
}

.pui-avatar-demo.is-leaving { opacity: 0; transform: scale(.96); pointer-events: none; }
.pui-avatar-demo[hidden] { display: none; }
.pui-avatar-demo__fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pui-avatar-demo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--pui-avatar-duration, 500ms) var(--pui-ease-standard); }
.pui-avatar-demo img.is-loaded { opacity: 1; }
.pui-avatar-demo__loading { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: var(--text); background: var(--surface-soft); }
.pui-avatar-demo__loading[hidden] { display: none; }
.pui-avatar-demo strong { color: #fff; font-size: inherit; font-weight: var(--pui-font-weight-semibold); }
.pui-avatar-demo--small { width: 28px; height: 28px; font-size: var(--pui-font-size-caption); }
.pui-avatar-demo--medium { width: 40px; height: 40px; font-size: var(--pui-font-size-body-large); }
.pui-avatar-demo--large { width: 56px; height: 56px; font-size: var(--pui-font-size-title-large); }
.pui-avatar-demo--circle { border-radius: var(--pui-preview-radius-round); }
.pui-avatar-demo--round { border-radius: var(--pui-preview-radius-step-9); }
.pui-avatar-demo--square { border-radius: var(--pui-preview-radius-step-5); }
.pui-avatar-demo.is-bordered { border-width: 1px; border-color: var(--border-strong); outline: .5px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  .pui-avatar-demo,
  .pui-avatar-demo img { transition-duration: 1ms; }
}

.pui-image-demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 120px;
  padding: 0;
  overflow: hidden;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--pui-image-duration, 500ms) var(--pui-ease-standard), transform var(--pui-image-duration, 500ms) var(--pui-ease-standard);
}

.pui-image-demo--rectangle { border-radius: var(--pui-preview-radius-medium); }
.pui-image-demo--round { border-radius: var(--pui-preview-radius-step-14); }
.pui-image-demo--circle { border-radius: var(--pui-preview-radius-round); }
.pui-image-demo.is-compact { min-height: 0; }
.pui-image-demo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--pui-image-duration, 500ms) var(--pui-ease-standard); }
.pui-image-demo img.is-loaded { opacity: 1; }
.pui-image-demo__state { position: absolute; z-index: 1; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--pui-preview-space-sm); box-sizing: border-box; padding: var(--pui-preview-space-lg); color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-label); text-align: center; background: var(--surface-soft); }
.pui-image-demo__state[hidden] { display: none; }
.pui-image-demo__state [data-image-state-error] { color: var(--danger); }
.pui-image-demo__slot { position: absolute; z-index: 2; right: var(--pui-preview-space-normal); bottom: var(--pui-preview-space-normal); display: inline-flex; }
.pui-image-showcase__grid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pui-preview-space-normal); min-width: 0; }
.pui-image-showcase__grid.is-state > .pui-image-demo { flex: 1 1 132px; width: auto !important; min-width: 0; height: 112px !important; }
.pui-image-showcase__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pui-preview-space-normal); margin-top: var(--pui-preview-space-normal); }
.pui-image-action__content { display: inline-flex; align-items: center; gap: var(--pui-preview-space-sm); }

@media (prefers-reduced-motion: reduce) {
  .pui-image-demo,
  .pui-image-demo img { transition-duration: 1ms; }
}

.pui-tabs-preview {
  --pui-tabs-preview-duration: var(--pui-duration-normal);
  --pui-tabs-preview-ease: var(--pui-ease-standard);
  --pui-tabs-preview-indicator: var(--brand);
  --pui-tabs-preview-scroll-item-min-width: 80px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
}

.pui-tabs-preview__layer,
.pui-tabs-preview__content-shell {
  display: grid;
  min-width: 0;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: grid-template-rows var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease), opacity var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease), transform var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease);
}

.pui-tabs-preview__layer.is-active,
.pui-tabs-preview__content-shell.is-active { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; transform: translateY(0); }
.pui-tabs-preview__layer-inner,
.pui-tabs-preview__content-shell-inner { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 0; overflow: hidden; }

.pui-tabs-preview__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  transition: background-color var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease), border-color var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease);
}

body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-tabs-preview__header {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

body .app-shell[data-page-mode] .preview-stage .pui-tabs-preview__button.pui-button-preview {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pui-tabs-preview.is-sticky .pui-tabs-preview__header {
  position: sticky;
}

.pui-tabs-preview__scroller {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.pui-tabs-preview__scroller::-webkit-scrollbar {
  display: none;
}

.pui-tabs-preview__row {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 100%;
  width: max-content;
}

.pui-tabs-preview.is-evenly .pui-tabs-preview__row {
  width: 100%;
}

.pui-tabs-preview.is-overflow-peek .pui-tabs-preview__row {
  width: 100%;
}

.pui-tabs-preview__button.pui-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: var(--pui-preview-space-step-5);
  min-width: var(--pui-tabs-preview-scroll-item-min-width);
  height: 48px;
  padding: 0 var(--pui-preview-space-normal);
  overflow: visible;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: color var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease), opacity var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease), transform var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease);
}

/* Preview Button 的通用 text 规则会在后段将 min-width 收为 0；Tabs 必须保留自己的横向轨道语义。 */
body .app-shell[data-page-mode] .preview-stage .pui-tabs-preview:not(.is-evenly) .pui-tabs-preview__button.pui-button-preview.pui-button--text {
  min-width: var(--pui-tabs-preview-scroll-item-min-width);
}

body .app-shell[data-page-mode] .preview-stage .pui-tabs-preview.is-overflow-peek .pui-tabs-preview__button.pui-button-preview.pui-button--text {
  flex: 0 0 22.222222%;
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-tabs-preview.is-evenly .pui-tabs-preview__button.pui-button-preview {
  flex: 1 1 0;
  min-width: 0;
}

.pui-tabs-preview--small .pui-tabs-preview__button.pui-button { height: 48px; padding: 0 var(--pui-preview-space-sm); font-size: var(--pui-font-size-caption); }
.pui-tabs-preview--large .pui-tabs-preview__button.pui-button { height: 46px; padding: 0 var(--pui-preview-space-lg); font-size: var(--pui-font-size-body-medium); }
.pui-tabs-preview__button.is-active { color: var(--brand); font-weight: var(--pui-font-weight-semibold); }
.pui-tabs-preview__button:disabled { color: var(--subtle); opacity: .58; }
.pui-tabs-preview__button > .pui-button-preview__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-5);
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.pui-tabs-preview__tab-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-5);
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.pui-tabs-preview__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-tabs-preview__badge.pui-badge-demo {
  position: static;
  flex: 0 0 auto;
  display: inline-grid;
  min-width: 15px;
  height: 15px;
  padding: 0 var(--pui-preview-space-xs);
  place-items: center;
  color: #fff;
  font-size: var(--pui-font-size-caption);
  font-style: normal;
  background: var(--danger);
  border-radius: var(--pui-preview-radius-round);
}

.pui-tabs-preview__indicator {
  position: absolute;
  z-index: 0;
  bottom: 0;
  height: 3px;
  background: var(--pui-tabs-preview-indicator);
  border-radius: var(--pui-preview-radius-round);
  pointer-events: none;
  transition: left var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease), width var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease), opacity var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease), background-color var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease);
}

.pui-tabs-preview.is-without-indicator .pui-tabs-preview__indicator { opacity: 0 !important; }

.pui-tabs-preview--tag .pui-tabs-preview__header {
  padding: var(--pui-preview-space-normal);
  min-height: 0;
  background: transparent;
  border-bottom: 0;
}

.pui-tabs-preview--tag .pui-tabs-preview__row { gap: var(--pui-preview-space-normal); }
.pui-tabs-preview--tag.is-overflow-peek .pui-tabs-preview__row { gap: 0; }
.pui-tabs-preview--tag .pui-tabs-preview__button.pui-button {
  height: 32px;
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: var(--pui-site-radius-control);
}

.pui-tabs-preview--tag .pui-tabs-preview__button.pui-button.is-active { color: var(--brand); background: var(--brand-soft); }
.pui-tabs-preview--tag.pui-tabs-preview--small .pui-tabs-preview__button.pui-button { height: 32px; }
.pui-tabs-preview--tag.pui-tabs-preview--large .pui-tabs-preview__button.pui-button { height: 36px; }
.pui-tabs-preview--tag .pui-tabs-preview__indicator { top: var(--pui-preview-space-step-5); bottom: var(--pui-preview-space-step-5); height: auto; background: var(--brand-soft); border-radius: var(--pui-site-radius-control); }

.pui-tabs-preview.is-split .pui-tabs-preview__button + .pui-tabs-preview__button::before {
  position: absolute;
  top: 24%;
  bottom: 24%;
  left: 0;
  width: 1px;
  background: var(--border);
  content: '';
}

.pui-tabs-preview--tag.is-split .pui-tabs-preview__button + .pui-tabs-preview__button::before { display: none; }

.pui-tabs-preview__prefix,
.pui-tabs-preview__extra {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 var(--pui-preview-space-sm);
}

.pui-tabs-preview__extra .pui-button { min-width: 32px; width: 32px; height: 32px; padding: 0; }

.pui-tabs-preview__panel {
  display: grid;
  gap: var(--pui-preview-content-gap);
  min-height: 48px;
  padding: var(--pui-preview-space-sm) 0 0;
  touch-action: pan-y;
  background: transparent;
  border-radius: 0;
  transition: background-color var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease), color var(--pui-tabs-preview-duration) var(--pui-tabs-preview-ease);
}

.pui-tabs-preview__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-content-gap);
  min-height: 70px;
  padding: var(--pui-preview-space-step-12);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  background: var(--surface-soft);
  border-radius: var(--pui-site-radius-control);
}

.pui-tabs-preview__state.is-error { color: var(--danger); }
.pui-tabs-preview.is-disabled .pui-tabs-preview__header { opacity: .58; }
.pui-tabs-preview__methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-space-step-7);
  min-width: 0;
}
.pui-tabs-preview__methods .pui-button { width: 100%; min-width: 0; padding-inline: var(--pui-preview-space-step-7); }
.pui-tabs-showcase { min-width: 0; overflow: hidden; }
.pui-tabs-showcase > .pui-showcase-section { min-width: 0; }
.pui-tabs-showcase > .pui-showcase-section + .pui-showcase-section { margin-top: var(--pui-section-gap); }
.pui-tabs-showcase > .pui-showcase-section > h3 {
  margin: 0 0 var(--pui-preview-content-gap);
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}
.pui-tabs-preview.is-reduced-motion .pui-tabs-preview__indicator,
.pui-tabs-preview.is-reduced-motion .pui-tabs-preview__button,
.pui-tabs-preview.is-reduced-motion .pui-tabs-preview__header,
.pui-tabs-preview.is-reduced-motion .pui-tabs-preview__panel { transition-duration: 1ms !important; }

@media (prefers-reduced-motion: reduce) {
  .pui-tabs-preview__indicator,
  .pui-tabs-preview__button,
  .pui-tabs-preview__header,
  .pui-tabs-preview__panel,
  .pui-tabs-preview__layer,
  .pui-tabs-preview__content-shell {
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}


/* Navigation components use the same restrained surface and icon language as native. */
.pui-steps-showcase,
.pui-back-top-showcase {
  display: grid;
  gap: var(--pui-preview-space-step-12);
}

.pui-back-top-showcase > .pui-showcase-section { min-width: 0; }
.pui-back-top-showcase > .pui-showcase-section + .pui-showcase-section { margin-top: var(--pui-section-gap); }
.pui-back-top-showcase > .pui-showcase-section > h3 {
  margin: 0 0 var(--pui-preview-content-gap);
  padding-inline: var(--pui-preview-device-padding);
  box-sizing: border-box;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

.pui-steps-showcase {
  container-type: inline-size;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  gap: var(--pui-preview-content-gap);
}

.pui-steps-scenario__nav {
  display: grid;
  align-content: start;
  gap: var(--pui-preview-content-gap);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-steps-scenario__tab.pui-button-preview {
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: var(--pui-preview-space-xs);
  overflow: visible;
  color: var(--muted);
  border-radius: var(--pui-preview-radius-small);
}

body .app-shell[data-page-mode] .preview-stage .pui-steps-scenario__tab > .pui-button-preview__content {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: var(--pui-preview-space-step-5);
  overflow: visible;
  white-space: normal;
}

.pui-steps-scenario__tab > .pui-button-preview__content > span { overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-steps-scenario__tab.is-active {
  color: var(--surface-solid);
  background: var(--text);
  border-color: var(--text);
  box-shadow: inset 2px 0 0 var(--text);
}
.pui-steps-scenario__view { display: grid; align-content: start; min-width: 0; gap: var(--pui-preview-content-gap); }
.pui-steps-scenario__view > header { display: grid; gap: var(--pui-preview-space-xxs); min-width: 0; }
.pui-steps-scenario__view > header h3 { margin: 0; color: var(--text); font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-body-medium); }
.pui-steps-scenario__view > header p { margin: 0; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }

.pui-tabbar-showcase {
  display: grid;
  align-content: start;
  width: 100%;
  min-width: 0;
  padding-bottom: var(--pui-preview-space-normal);
  gap: var(--pui-preview-section-gap);
}

.pui-tabbar-demo-section {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}

.pui-tabbar-demo-section > header {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
}

.pui-tabbar-demo-section > header h3 { margin: 0; color: var(--text); font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-body-medium); }
.pui-tabbar-demo-section > header p { margin: 0; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }
.pui-tabbar-demo-section .pui-tabbar-viewport { flex: none; min-height: 148px; background: transparent; border: 0; border-radius: 0; }
.pui-tabbar-demo-section .pui-tabbar-viewport__content { padding: 0 0 var(--pui-preview-space-step-12); }

@media (max-width: 420px) {
  .pui-steps-showcase { grid-template-columns: minmax(0, 1fr); }
  .pui-steps-scenario__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body .app-shell[data-page-mode] .preview-stage .pui-steps-scenario__tab.pui-button-preview { justify-content: center; min-height: 36px; padding: var(--pui-preview-space-step-5); }
  body .app-shell[data-page-mode] .preview-stage .pui-steps-scenario__tab > .pui-button-preview__content { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--pui-preview-space-step-3); text-align: left; }
  .pui-tabbar-showcase { gap: var(--pui-section-gap); }
}

.pui-nav-event {
  min-height: 34px;
  padding: var(--pui-preview-space-step-9) var(--pui-preview-space-step-11);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-small);
}

.pui-tabbar-viewport {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-tabbar-viewport__content {
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-step-12);
}

/* Tabbar 的当前状态需要完整可读，避免在窄机型被单行省略。 */
.pui-tabbar-viewport__content .pui-cell {
  align-items: start;
}

.pui-tabbar-viewport__content .pui-cell__main > span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.pui-tabbar-preview {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  /* 普通形态的 Badge 可越过图标锚点；根节点不能成为裁切边界。 */
  overflow: visible;
  color: var(--muted);
  /* normal 是屏幕附着的透明导航布局，不应伪装成独立 Surface。 */
  background: transparent;
  border-top: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: color var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), background-color var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), border-color var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), border-radius var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), box-shadow var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), opacity var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), transform var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard);
}

.pui-tabbar-preview.is-fixed { position: absolute; right: 0; bottom: 0; left: 0; }

.pui-tabbar-preview.is-fixed.pui-tabbar-preview--shape-normal { background: var(--page); }

.pui-tabbar-preview--shape-round {
  overflow: hidden;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
  box-shadow: var(--shadow-floating);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.pui-tabbar-preview--shape-round:not(.is-fixed) { width: auto; margin: 0 var(--pui-preview-space-normal) var(--pui-preview-space-normal); }
.pui-tabbar-preview--shape-round.is-fixed { right: var(--pui-preview-content-gap); bottom: var(--pui-preview-content-gap); left: var(--pui-preview-content-gap); width: auto; }
.pui-tabbar-preview.is-bordered { border-top: 1px solid var(--border); }
.pui-tabbar-preview.is-borderless { border-top: 0; }
.pui-tabbar-preview.has-safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

.pui-tabbar-preview__items {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 100%;
  min-height: 56px;
}

.pui-tabbar-preview .pui-tabbar-preview__item {
  position: relative;
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-step-5);
  place-items: center;
  gap: var(--pui-preview-space-xxs);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-caption);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: color var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), background-color var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), opacity var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), transform var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard);
}

.pui-tabbar-preview .pui-tabbar-preview__item > .pui-button-preview__content {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
  overflow: visible;
  white-space: normal;
}

.pui-tabbar-preview .pui-tabbar-preview__item.is-active { color: var(--brand); }
.pui-tabbar-preview__item::after { position: absolute; bottom: var(--pui-preview-space-step-3); width: 16px; height: 2px; background: var(--brand); border-radius: var(--pui-preview-radius-step-1); opacity: 0; content: ''; transform: scaleX(.4); transition: opacity var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard), transform var(--pui-tabbar-preview-duration, 500ms) var(--ease-standard); }
.pui-tabbar-preview__item.is-active::after { opacity: 1; transform: scaleX(1); }
.pui-tabbar-preview.is-all-icon-only .pui-tabbar-preview__item::after { bottom: var(--pui-preview-space-step-20); }
.pui-tabbar-preview.is-all-icon-only .pui-tabbar-preview__icon { transform: translateY(var(--pui-preview-space-step-4)); }
.pui-tabbar-preview.is-split .pui-tabbar-preview__item + .pui-tabbar-preview__item::before {
  position: absolute;
  top: var(--pui-preview-space-step-28);
  bottom: var(--pui-preview-space-step-28);
  left: 0;
  width: 1px;
  background: var(--pui-tabbar-split-color);
  pointer-events: none;
  content: '';
}
.pui-tabbar-preview .pui-tabbar-preview__item:disabled { color: var(--subtle); cursor: not-allowed; opacity: .5; }

.pui-tabbar-preview__icon { position: relative; display: inline-grid; min-width: 18px; min-height: 18px; place-items: center; }
.pui-tabbar-preview__label { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }

.pui-tabbar-preview__icon > .pui-badge-demo {
  position: absolute;
  top: calc(0px - var(--pui-preview-space-step-5));
  left: calc(50% + var(--pui-preview-space-xs));
  display: inline-grid;
  min-width: 15px;
  height: 15px;
  padding: 0 var(--pui-preview-space-step-3);
  place-items: center;
  color: #fff;
  font-size: var(--pui-font-size-caption);
  font-style: normal;
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-none);
  background: #18181b;
  border: 1px solid var(--surface-solid);
  border-radius: var(--pui-preview-radius-round);
}

.pui-tabbar-preview__icon > .pui-badge-demo--dot { top: calc(0px - var(--pui-preview-space-xxs)); min-width: 7px; width: 7px; height: 7px; padding: 0; }

.pui-tabbar-preview__placeholder { width: 100%; height: 56px; }
.pui-tabbar-preview__placeholder.is-round { height: 64px; }
.pui-tabbar-preview__placeholder.has-safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.pui-tabbar-preview.is-disabled { opacity: .56; }
.pui-tabbar-preview.is-reduced-motion,
.pui-tabbar-preview.is-reduced-motion .pui-tabbar-preview__item,
.pui-tabbar-preview.is-reduced-motion .pui-tabbar-preview__item::after { transition-duration: 1ms !important; }

@media (prefers-reduced-motion: reduce) {
  .pui-tabbar-preview,
  .pui-tabbar-preview__item,
  .pui-tabbar-preview__item::after { transition-duration: 1ms !important; }
}

.pui-steps-preview {
  --pui-steps-indicator-size: var(--pui-preview-space-step-22);
  --pui-steps-indicator-center: var(--pui-preview-space-step-11);
  --pui-steps-connector-gap: var(--pui-preview-space-step-8);
  --pui-steps-vertical-item-gap: var(--pui-preview-space-sm);
  --pui-steps-dot-size: var(--pui-preview-space-step-10);
  --pui-steps-dot-center: var(--pui-preview-space-step-5);
  --pui-steps-dot-offset: var(--pui-preview-space-sm);

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color: var(--muted);
}

.pui-steps-preview__scroller {
  width: 100%;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.pui-steps-preview.is-scrollable .pui-steps-preview__scroller {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.pui-steps-preview.is-scrollable .pui-steps-preview__scroller::-webkit-scrollbar { display: none; }

.pui-steps-preview__list {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 100%;
  padding: var(--pui-preview-space-xs) 0;
}

.pui-steps-preview__item {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 0;
  min-width: 0;
}

.pui-steps-preview.is-scrollable .pui-steps-preview__item { flex: 0 0 100px; min-width: 100px; }

body .app-shell[data-page-mode] .preview-stage .pui-steps-preview .pui-steps-preview__button.pui-button-preview {
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 86px;
  padding: 0 var(--pui-preview-space-step-3) var(--pui-preview-space-xs);
  overflow: visible;
  color: inherit;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: var(--pui-preview-radius-step-5);
  box-shadow: none;
  transition: color var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard), opacity var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard), transform var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-steps-preview .pui-steps-preview__button > .pui-button-preview__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 100%;
  overflow: visible;
  white-space: normal;
}

.pui-steps-preview__indicator {
  position: relative;
  z-index: 1;
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--pui-steps-indicator-size);
  height: var(--pui-steps-indicator-size);
  place-items: center;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  transition: color var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard), background-color var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard), border-color var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard), transform var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard);
}

.pui-steps-preview__copy { display: grid; min-width: 0; max-width: 100%; margin-top: var(--pui-preview-space-step-7); gap: var(--pui-preview-space-xxs); text-align: center; white-space: normal; overflow-wrap: anywhere; }
.pui-steps-preview__copy strong,
.pui-steps-preview__copy em,
.pui-steps-preview__copy small { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.pui-steps-preview__copy strong { color: inherit; font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-caption); }
.pui-steps-preview__copy em,
.pui-steps-preview__copy small { color: var(--subtle); font-size: var(--pui-font-size-caption); font-style: normal; font-weight: var(--pui-font-weight-regular); line-height: var(--pui-line-height-caption); }
.pui-steps-preview__line { position: absolute; top: var(--pui-steps-indicator-center); right: calc(-50% + var(--pui-steps-indicator-center) + var(--pui-steps-connector-gap)); left: calc(50% + var(--pui-steps-indicator-center) + var(--pui-steps-connector-gap)); height: 1px; background: var(--border); pointer-events: none; transform: translateY(-50%); transition: background-color var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard), opacity var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard), transform var(--pui-steps-preview-duration, 500ms) var(--pui-ease-standard); }
.pui-steps-preview__line.is-active { background: var(--text); }
.pui-steps-preview__item.is-finish .pui-steps-preview__indicator,
.pui-steps-preview__item.is-process .pui-steps-preview__indicator { color: var(--surface-solid); background: var(--text); border-color: var(--text); }
.pui-steps-preview__item.is-error .pui-steps-preview__indicator { color: #fff; background: var(--danger); border-color: var(--danger); }
.pui-steps-preview__item.is-active .pui-steps-preview__copy strong { color: var(--text); }
.pui-steps-preview .pui-steps-preview__button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pui-steps-preview.is-readonly .pui-steps-preview__button { cursor: default; }
.pui-steps-preview.is-disabled .pui-steps-preview__list { opacity: .56; }

.pui-steps-preview.is-dot .pui-steps-preview__indicator { width: var(--pui-steps-dot-size); height: var(--pui-steps-dot-size); margin-top: var(--pui-steps-dot-offset); }
.pui-steps-preview.is-dot .pui-steps-preview__line { top: var(--pui-steps-indicator-center); right: calc(-50% + var(--pui-steps-dot-center) + var(--pui-steps-connector-gap)); left: calc(50% + var(--pui-steps-dot-center) + var(--pui-steps-connector-gap)); }
.pui-steps-preview.is-dot .pui-steps-preview__copy { margin-top: var(--pui-preview-space-step-9); }

.pui-steps-preview.is-vertical .pui-steps-preview__scroller { overflow: visible; white-space: normal; }
.pui-steps-preview.is-vertical .pui-steps-preview__list { display: grid; gap: var(--pui-steps-vertical-item-gap); padding: 0 var(--pui-preview-space-xxs); white-space: normal; }
.pui-steps-preview.is-vertical .pui-steps-preview__item { min-height: 48px; }
body .app-shell[data-page-mode] .preview-stage .pui-steps-preview.is-vertical .pui-steps-preview__button.pui-button-preview { min-height: 48px; padding: 0; text-align: left; }
body .app-shell[data-page-mode] .preview-stage .pui-steps-preview.is-vertical .pui-steps-preview__button > .pui-button-preview__content { flex-direction: row; align-items: flex-start; gap: var(--pui-preview-space-step-9); text-align: left; }
.pui-steps-preview.is-vertical .pui-steps-preview__copy { margin-top: var(--pui-preview-space-xxs); text-align: left; }
.pui-steps-preview.is-vertical .pui-steps-preview__line {
  top: calc(var(--pui-steps-indicator-size) + var(--pui-steps-connector-gap));
  right: auto;
  bottom: calc(var(--pui-steps-connector-gap) - var(--pui-steps-vertical-item-gap));
  left: var(--pui-steps-indicator-center);
  width: 1px;
  height: auto;
  transform: translateX(-50%);
}
.pui-steps-preview.is-vertical.is-dot .pui-steps-preview__indicator { margin: var(--pui-steps-dot-offset); }
.pui-steps-preview.is-vertical.is-dot .pui-steps-preview__line {
  top: calc(var(--pui-steps-dot-offset) + var(--pui-steps-dot-size) + var(--pui-steps-connector-gap));
  bottom: calc(var(--pui-steps-connector-gap) - var(--pui-steps-vertical-item-gap) - var(--pui-steps-dot-offset));
}

.pui-steps-preview.is-reduced-motion .pui-steps-preview__button,
.pui-steps-preview.is-reduced-motion .pui-steps-preview__indicator,
.pui-steps-preview.is-reduced-motion .pui-steps-preview__line { transition-duration: 1ms !important; }

@media (prefers-reduced-motion: reduce) {
  .pui-steps-preview__button,
  .pui-steps-preview__indicator,
  .pui-steps-preview__line { transition-duration: 1ms !important; }
}

.pui-indexes-showcase,
.pui-sidebar-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pui-preview-space-step-12);
  width: 100%;
  min-width: 0;
}

.pui-indexes-showcase > .pui-showcase-section + .pui-showcase-section {
  margin-top: var(--pui-section-gap);
}

.pui-sidebar-showcase { height: 100%; min-height: 0; }

.pui-indexes-preview__state-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pui-preview-space-step-12);
  min-width: 0;
}

.pui-indexes-preview {
  --pui-indexes-preview-active-radius: 50%;
  --pui-indexes-preview-magnifier-offset: 26px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur);
  transition: color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), background-color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), border-color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), border-radius var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), box-shadow var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), opacity var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview__body {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--pui-indexes-preview-height);
  overflow: hidden;
  background: var(--surface-solid);
  transition: height var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), background-color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview__scroll {
  position: absolute;
  z-index: 1;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The native scroll-view does not reserve a desktop scrollbar gutter. */
  scrollbar-width: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), transform var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), padding var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview__scroll::-webkit-scrollbar { width: 0; height: 0; }

.pui-indexes-preview__scroll.is-active { opacity: 1; transform: translateY(0); }
.pui-indexes-preview__scroll.is-inactive { pointer-events: none; }

.pui-indexes-preview__group {
  box-sizing: border-box;
  min-width: 0;
  transition: opacity var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview__group.is-disabled { opacity: .52; }

.pui-indexes-preview__group > div {
  box-sizing: border-box;
  transition: padding var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview.is-bar-right .pui-indexes-preview__group > div,
.pui-indexes-preview.is-bar-right .pui-indexes-preview__heading { padding-right: calc(var(--pui-indexes-preview-rail-width) + var(--pui-preview-space-normal)); }
.pui-indexes-preview.is-bar-left .pui-indexes-preview__group > div,
.pui-indexes-preview.is-bar-left .pui-indexes-preview__heading { padding-left: calc(var(--pui-indexes-preview-rail-width) + var(--pui-preview-space-normal)); }
.pui-indexes-preview.is-index-hidden .pui-indexes-preview__group > div { padding-right: 0; padding-left: 0; }
.pui-indexes-preview.is-index-hidden .pui-indexes-preview__heading { padding-right: var(--pui-preview-space-normal); padding-left: var(--pui-preview-space-normal); }

.pui-indexes-preview__heading {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  max-height: 28px;
  padding: 0 var(--pui-preview-space-normal);
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-title-large);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  opacity: 1;
  transition: max-height var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), padding var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), background-color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), border-color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), opacity var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview.has-sticky .pui-indexes-preview__heading {
  position: sticky;
  top: var(--pui-indexes-preview-sticky-offset);
  z-index: 2;
}

.pui-indexes-preview__entry {
  background: transparent;
  box-shadow: none;
}

.pui-indexes-preview__entry .pui-badge-demo { position: static; flex: 0 0 auto; transform: none; }
.pui-indexes-preview__image { flex: 0 0 auto; width: 24px; height: 24px; object-fit: cover; border-radius: var(--pui-preview-radius-small); }

.pui-indexes-preview__bar {
  position: absolute;
  z-index: 3;
  top: 50%;
  bottom: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--pui-indexes-preview-rail-width);
  max-width: var(--pui-indexes-preview-rail-width);
  height: var(--pui-indexes-preview-rail-height);
  max-height: calc(100% - 20px);
  overflow: visible;
  touch-action: none;
  opacity: 0;
  transform: translate(4px, -50%) scale(.98);
  transition: max-width var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), opacity var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), transform var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview.is-bar-right .pui-indexes-preview__bar { right: var(--pui-preview-space-normal); }
.pui-indexes-preview.is-bar-left .pui-indexes-preview__bar { left: var(--pui-preview-space-normal); transform: translate(-4px, -50%) scale(.98); }
.pui-indexes-preview.is-bar-left .pui-indexes-preview__bar.is-active { transform: translate(0, -50%) scale(1); }
.pui-indexes-preview.is-bar-right .pui-indexes-preview__bar.is-active,
.pui-indexes-preview__bar.is-active { opacity: 1; transform: translate(0, -50%) scale(1); }
.pui-indexes-preview__bar.is-inactive { max-width: 0; pointer-events: none; }

.pui-indexes-preview__bar-item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--pui-indexes-preview-rail-button-width);
  min-width: var(--pui-indexes-preview-rail-button-width);
  height: var(--pui-indexes-preview-rail-item-height);
  min-height: var(--pui-indexes-preview-rail-item-height);
  padding: 0;
  color: var(--muted);
  font-size: var(--pui-indexes-preview-rail-font-size);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-none);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transform: scale(1);
  transition: color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), background-color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), transform var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview__bar-item::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pui-indexes-preview-rail-item-height);
  height: var(--pui-indexes-preview-rail-item-height);
  background: var(--text);
  border-radius: var(--pui-indexes-preview-active-radius);
  opacity: 0;
  content: '';
  transform: translate(-50%, -50%) scale(.84);
  transition: opacity var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), transform var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview__bar-label { position: relative; z-index: 1; display: block; max-width: 100%; line-height: var(--pui-line-height-none); text-align: center; white-space: nowrap; transform: translate(.25px, .125px); }
.pui-indexes-preview__bar-item.is-active { color: var(--surface-solid); transform: scale(1); }
.pui-indexes-preview__bar-item.is-active::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pui-indexes-preview__bar-item[aria-disabled="true"] { color: var(--subtle); cursor: not-allowed; }

.pui-indexes-preview__magnifier {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: flex;
  min-width: 44px;
  max-width: calc(100% - var(--pui-indexes-preview-rail-width) - 52px);
  height: 44px;
  padding: 0 var(--pui-preview-space-normal);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--brand);
  font-size: var(--pui-font-size-title-medium);
  font-weight: var(--pui-font-weight-bold);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-floating);
  backdrop-filter: var(--blur);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.92);
  transition: opacity var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), transform var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}
.pui-indexes-preview.is-bar-right .pui-indexes-preview__magnifier { right: calc(var(--pui-indexes-preview-rail-width) + var(--pui-indexes-preview-magnifier-offset)); }
.pui-indexes-preview.is-bar-left .pui-indexes-preview__magnifier { left: calc(var(--pui-indexes-preview-rail-width) + var(--pui-indexes-preview-magnifier-offset)); }
.pui-indexes-preview__magnifier.is-active { opacity: 1; transform: translateY(-50%) scale(1); }

.pui-indexes-preview__state {
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-7);
  min-width: 0;
  padding: var(--pui-preview-space-xl) var(--pui-preview-space-normal);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  text-align: center;
  background: var(--surface-solid);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), background-color var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), opacity var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease), transform var(--pui-indexes-preview-duration) var(--pui-indexes-preview-ease);
}

.pui-indexes-preview__state.is-active { z-index: 4; opacity: 1; pointer-events: auto; transform: translateY(0); }
.pui-indexes-preview__state.is-error {
  padding-bottom: calc(var(--pui-preview-space-xl) + var(--pui-preview-space-normal));
  color: var(--danger);
}
.pui-indexes-preview__state .pui-button { min-height: 32px; margin-top: var(--pui-preview-space-step-3); }
.pui-indexes-preview__state:not(.is-active) .pui-spinner,
.pui-indexes-preview__state:not(.is-active) .pui-loading-inline-dots { animation-play-state: paused; }
.pui-indexes-preview.is-disabled { opacity: .56; }
.pui-indexes-preview.is-disabled .pui-indexes-preview__bar,
.pui-indexes-preview.is-disabled .pui-indexes-preview__entry,
.pui-indexes-preview.is-disabled .pui-indexes-preview__state { pointer-events: none; }

.pui-indexes-preview.is-reduced-motion,
.pui-indexes-preview.is-reduced-motion .pui-indexes-preview__body,
.pui-indexes-preview.is-reduced-motion .pui-indexes-preview__scroll,
.pui-indexes-preview.is-reduced-motion .pui-indexes-preview__group,
.pui-indexes-preview.is-reduced-motion .pui-indexes-preview__heading,
.pui-indexes-preview.is-reduced-motion .pui-indexes-preview__entry,
.pui-indexes-preview.is-reduced-motion .pui-indexes-preview__bar,
.pui-indexes-preview.is-reduced-motion .pui-indexes-preview__bar-item,
.pui-indexes-preview.is-reduced-motion .pui-indexes-preview__magnifier,
.pui-indexes-preview.is-reduced-motion .pui-indexes-preview__state { transition-duration: 1ms !important; }

@media (prefers-reduced-motion: reduce) {
  .pui-indexes-preview,
  .pui-indexes-preview__body,
  .pui-indexes-preview__scroll,
  .pui-indexes-preview__group,
  .pui-indexes-preview__heading,
  .pui-indexes-preview__entry,
  .pui-indexes-preview__bar,
  .pui-indexes-preview__bar-item,
  .pui-indexes-preview__magnifier,
  .pui-indexes-preview__state { transition-duration: 1ms !important; }
}

.pui-sidebar-layout {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: var(--pui-sidebar-preview-height);
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.pui-sidebar-workspace {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, var(--pui-sidebar-preview-width)) minmax(0, 1fr);
  width: 100%;
  height: min(100%, var(--pui-sidebar-preview-height));
  min-height: 0;
  overflow: hidden;
  background: var(--surface-solid);
}

.pui-sidebar-workspace > .pui-sidebar-layout {
  width: 100%;
  height: 100%;
}

.pui-sidebar-workspace .pui-sidebar-preview { width: 100%; }

.pui-sidebar-preview__context {
  box-sizing: border-box;
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: var(--pui-section-gap) var(--pui-preview-device-padding);
  overflow: hidden;
  color: var(--text);
  background: var(--surface-solid);
}

.pui-sidebar-preview__context > header { display: grid; gap: var(--pui-preview-space-step-5); min-width: 0; }
.pui-sidebar-preview__context > header span { color: var(--subtle); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-caption); }
.pui-sidebar-preview__context > header strong { overflow-wrap: anywhere; color: var(--text); font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-body-medium); }
.pui-sidebar-preview__context > header p { margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-sidebar-preview__context > .pui-cell-group { min-width: 0; margin-top: var(--pui-section-gap); }
.pui-sidebar-preview__context .pui-cell-group__header { padding-inline: 0; }
.pui-sidebar-preview__context .pui-cell { padding-inline: 0; background: transparent; }

.pui-sidebar-preview {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(100%, var(--pui-sidebar-preview-width));
  min-width: 0;
  height: 100%;
  overflow: hidden;
  color: var(--text);
  background: var(--surface-soft);
  border-right: 1px solid var(--border);
  transition: color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), background-color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), border-color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), border-radius var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), box-shadow var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), opacity var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease);
}

.pui-sidebar-preview.is-borderless { border-right-color: transparent; }
.pui-sidebar-preview.is-card { margin: var(--pui-preview-space-step-5); width: calc(100% - 10px); height: calc(100% - 10px); padding: var(--pui-preview-space-xs); background: var(--surface); border: 1px solid var(--border); border-radius: var(--pui-site-radius-surface); box-shadow: var(--shadow-soft); backdrop-filter: var(--blur); }

.pui-sidebar-preview__body { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.pui-sidebar-preview__scroll { position: absolute; z-index: 1; inset: 0; box-sizing: border-box; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; opacity: 0; transform: translateY(4px); transition: opacity var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), transform var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease); }
.pui-sidebar-preview__scroll.is-active { opacity: 1; transform: translateY(0); }
.pui-sidebar-preview__scroll.is-inactive { pointer-events: none; }

.pui-sidebar-preview__group { min-width: 0; transition: opacity var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease); }
.pui-sidebar-preview__group.is-disabled { opacity: .5; }
.pui-sidebar-preview__group-title { box-sizing: border-box; display: flex; align-items: center; max-height: 26px; padding: 0 var(--pui-preview-content-gap); overflow: hidden; color: var(--subtle); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-bold); line-height: var(--pui-line-height-title-medium); background: var(--surface-soft); opacity: 1; transition: max-height var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), padding var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), background-color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), opacity var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease); }
.pui-sidebar-preview__group-title.is-sticky { position: sticky; z-index: 2; top: var(--pui-sidebar-preview-sticky-offset); }
.pui-sidebar-preview__group-title.is-empty,
.pui-sidebar-preview.is-title-hidden .pui-sidebar-preview__group-title { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

body .app-shell[data-page-mode] .preview-stage .pui-sidebar-preview__item.pui-button-preview {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 52px;
  overflow: visible;
  margin: 0;
  padding: var(--pui-preview-space-sm) var(--pui-preview-space-normal);
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 transparent;
  transition: color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), background-color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), border-color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), border-radius var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), box-shadow var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), opacity var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), transform var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease);
}

.pui-sidebar-preview__item:not(:disabled):hover { background: var(--surface); }
.pui-sidebar-preview__item:not(:disabled):active { transform: scale(.995); }
.pui-sidebar-preview__item.is-active { color: var(--text); background: var(--surface-solid); box-shadow: inset 3px 0 0 var(--text); }
.pui-sidebar-preview__item.is-disabled { opacity: .45; cursor: not-allowed; }
.pui-sidebar-preview.is-card .pui-sidebar-preview__item { min-height: 40px; margin: var(--pui-preview-space-step-1) 0; border-radius: var(--pui-preview-radius-medium); }
.pui-sidebar-preview.is-card .pui-sidebar-preview__item.is-active { box-shadow: inset 0 0 0 1px var(--border); }
.pui-sidebar-preview__item > .pui-button-preview__content { display: block; width: 100%; overflow: visible; white-space: normal; }
.pui-sidebar-preview__item-content { display: flex; align-items: center; gap: var(--pui-preview-content-gap); width: 100%; min-width: 0; }
.pui-sidebar-preview__item-content > .pui-icon { flex: 0 0 auto; }
.pui-sidebar-preview__copy { display: grid; flex: 1; min-width: 0; gap: var(--pui-preview-space-step-1); }
.pui-sidebar-preview__copy strong,
.pui-sidebar-preview__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-sidebar-preview__copy strong { color: currentColor; font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-body-medium); }
.pui-sidebar-preview__copy small { color: var(--subtle); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-regular); line-height: var(--pui-line-height-caption); }
.pui-sidebar-preview__trailing { display: flex; flex: 0 0 auto; align-items: center; gap: var(--pui-preview-space-step-3); }
.pui-sidebar-preview.is-icon-hidden .pui-sidebar-preview__item-content > .pui-icon,
.pui-sidebar-preview.is-description-hidden .pui-sidebar-preview__copy small,
.pui-sidebar-preview.is-badge-hidden .pui-badge-demo { display: none; }

.pui-sidebar-preview__state { position: absolute; z-index: 2; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pui-preview-space-step-7); min-width: 0; padding: var(--pui-preview-space-lg) var(--pui-preview-content-gap); color: var(--muted); font-size: var(--pui-font-size-caption); text-align: center; background: var(--surface-soft); opacity: 0; pointer-events: none; transform: translateY(4px); transition: color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), background-color var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), opacity var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease), transform var(--pui-sidebar-preview-duration) var(--pui-sidebar-preview-ease); }
.pui-sidebar-preview__state.is-active { z-index: 4; opacity: 1; pointer-events: auto; transform: translateY(0); }
.pui-sidebar-preview__state.is-error { color: var(--danger); }
.pui-sidebar-preview__state .pui-empty { width: 100%; min-width: 0; }
.pui-sidebar-preview__state:not(.is-active) .pui-spinner,
.pui-sidebar-preview__state:not(.is-active) .pui-loading-inline-dots { animation-play-state: paused; }
.pui-sidebar-preview.is-disabled { opacity: .56; }
.pui-sidebar-preview.is-disabled .pui-sidebar-preview__body { pointer-events: none; }

.pui-sidebar-preview.is-reduced-motion,
.pui-sidebar-preview.is-reduced-motion .pui-sidebar-preview__scroll,
.pui-sidebar-preview.is-reduced-motion .pui-sidebar-preview__group,
.pui-sidebar-preview.is-reduced-motion .pui-sidebar-preview__group-title,
.pui-sidebar-preview.is-reduced-motion .pui-sidebar-preview__item,
.pui-sidebar-preview.is-reduced-motion .pui-sidebar-preview__state { transition-duration: 1ms !important; }

@media (prefers-reduced-motion: reduce) {
  .pui-sidebar-layout,
  .pui-sidebar-preview,
  .pui-sidebar-preview__scroll,
  .pui-sidebar-preview__group,
  .pui-sidebar-preview__group-title,
  .pui-sidebar-preview__item,
  .pui-sidebar-preview__state { transition-duration: 1ms !important; }
}

.pui-back-top-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
  min-width: 0;
}

/* Button-family floating action surface. The parent owns fixed/static position. */
.pui-fab-preview {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.pui-fab-preview__button {
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--pui-preview-radius-round);
  box-shadow: var(--shadow-soft);
}

.pui-fab-preview--extra-small .pui-fab-preview__button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
.pui-fab-preview--small .pui-fab-preview__button { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
.pui-fab-preview--large .pui-fab-preview__button { width: 50px; min-width: 50px; height: 50px; min-height: 50px; }
.pui-fab-preview.is-extended .pui-fab-preview__button {
  width: auto;
  min-width: 64px;
  max-width: 280px;
  height: 44px;
  min-height: 44px;
  padding-inline: var(--pui-preview-space-step-12);
}
.pui-fab-preview--inverse .pui-fab-preview__button {
  color: var(--pui-text-on-inverse);
  background: var(--pui-bg-inverse);
  border-color: var(--pui-bg-inverse);
}
.pui-fab-preview.is-reduced-motion .pui-fab-preview__button { transition-duration: 1ms !important; }

.pui-back-top-preview__frame {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--pui-preview-device-padding);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-back-top-scroll {
  box-sizing: border-box;
  width: 100%;
  height: 260px;
  padding: var(--pui-preview-content-gap);
  background: transparent;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.pui-back-top-scroll::-webkit-scrollbar { width: 0; height: 0; }
.pui-back-top-scroll .pui-cell + .pui-cell { margin-top: var(--pui-preview-space-sm); }
.pui-back-top-scroll:focus-visible { outline: 2px solid var(--text); outline-offset: -3px; }
.pui-back-top-preview__frame.is-reduced-motion .pui-back-top-scroll { scroll-behavior: auto; }

.pui-back-top-preview {
  display: inline-flex;
  max-width: 280px;
  max-height: 48px;
  align-self: flex-end;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(.96);
  transform-origin: center;
  transition: max-width var(--pui-back-top-preview-duration) var(--pui-ease-standard), max-height var(--pui-back-top-preview-duration) var(--pui-ease-standard), margin var(--pui-back-top-preview-duration) var(--pui-ease-standard), opacity var(--pui-back-top-preview-duration) var(--pui-ease-standard), transform var(--pui-back-top-preview-duration) var(--pui-ease-standard);
}

.pui-back-top-preview.is-fixed {
  position: absolute;
  right: calc(var(--pui-preview-device-padding) + var(--pui-preview-content-gap));
  bottom: calc(var(--pui-preview-device-padding) + var(--pui-preview-content-gap));
}

.pui-back-top-preview.is-static { position: relative; margin: var(--pui-preview-content-gap); }
.pui-back-top-preview.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.pui-back-top-preview.is-hidden.is-static { max-width: 0; max-height: 0; margin-block: 0; overflow: hidden; }

.pui-back-top-preview .pui-fab-preview__button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pui-back-top-preview .pui-fab-preview__button .pui-button-preview__content { max-width: 200px; overflow-wrap: anywhere; font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-caption); white-space: normal; }

@media (max-width: 420px) {
  .pui-tabbar-viewport { min-height: 244px; }
  .pui-tabbar-preview .pui-tabbar-preview__item { font-size: var(--pui-font-size-caption); }
  .pui-steps-preview__copy em { font-size: var(--pui-font-size-caption); }
  .pui-steps-preview__copy strong { font-size: var(--pui-font-size-caption); }
}

.pui-collapse-showcase { min-width: 0; }
.pui-collapse-preview { overflow: hidden; min-width: 0; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--pui-site-radius-surface); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.pui-collapse-preview.is-card { display: grid; overflow: visible; background: transparent; border-color: transparent; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: var(--pui-preview-content-gap); }
.pui-collapse-demo { overflow: hidden; min-width: 0; background: transparent; }
.pui-collapse-preview:not(.is-card) .pui-collapse-demo + .pui-collapse-demo { border-top: 1px solid var(--border); }
.pui-collapse-preview.is-card .pui-collapse-demo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--pui-site-radius-surface); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.pui-collapse-demo__trigger { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: var(--pui-preview-content-gap) var(--pui-preview-space-sm); color: var(--text); text-align: left; background: transparent; border: 0; cursor: pointer; transition: background-color var(--pui-collapse-duration, 500ms) var(--pui-ease-standard); }
.pui-collapse-demo__trigger > span { display: flex; flex: 1; align-items: center; min-width: 0; gap: var(--pui-preview-space-xs); }
.pui-collapse-demo__trigger strong { min-width: 0; font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-body-medium); overflow-wrap: anywhere; }
.pui-collapse-demo__trigger aside { display: inline-flex; flex: 0 0 auto; align-items: center; max-width: 44%; margin-left: var(--pui-preview-space-xs); color: var(--muted); gap: var(--pui-preview-space-xs); }
.pui-collapse-demo__trigger aside em { font-size: var(--pui-font-size-caption); font-style: normal; line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }
.pui-collapse-demo__trigger:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 42%, transparent); outline-offset: -2px; }
.pui-collapse-demo__trigger[aria-disabled="true"] { cursor: not-allowed; }
.pui-collapse-demo__icon { display: inline-flex; flex: 0 0 auto; color: var(--muted); transition: transform var(--pui-collapse-duration, 500ms) var(--pui-ease-standard), color var(--pui-collapse-duration, 500ms) var(--pui-ease-standard); }
.pui-collapse-demo__content { overflow: hidden; color: var(--muted); font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); pointer-events: none; transform-origin: top; transition: max-height var(--pui-collapse-duration, 500ms) var(--pui-ease-standard), opacity var(--pui-collapse-duration, 500ms) var(--pui-ease-standard), transform var(--pui-collapse-duration, 500ms) var(--pui-ease-standard); }
.pui-collapse-demo__content-inner { min-height: 1px; padding: 0 var(--pui-preview-space-sm) var(--pui-preview-space-sm); overflow-wrap: anywhere; }
.pui-collapse-demo__generic .pui-cell { background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pui-collapse-demo.is-open > .pui-collapse-demo__trigger { background: var(--surface-soft); }
.pui-collapse-demo.is-open .pui-collapse-demo__icon { color: var(--brand); transform: rotate(180deg); }
.pui-collapse-demo.is-open .pui-collapse-demo__content { pointer-events: auto; }
.pui-collapse-demo.is-disabled { opacity: .52; }
.pui-collapse-preview.is-disabled { opacity: .66; }
.pui-collapse-preview__actions { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; gap: var(--pui-preview-content-gap); }
.pui-collapse-preview__state { display: flex; align-items: center; justify-content: center; min-height: 140px; padding: var(--pui-preview-space); color: var(--muted); background: transparent; }
.pui-collapse-preview__state > .pui-empty-sample { background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pui-collapse-preview.is-reduced .pui-collapse-demo__trigger,
.pui-collapse-preview.is-reduced .pui-collapse-demo__icon,
.pui-collapse-preview.is-reduced .pui-collapse-demo__content { transition-duration: 1ms; }

@media (prefers-reduced-motion: reduce) {
  .pui-collapse-demo__trigger,
  .pui-collapse-demo__icon,
  .pui-collapse-demo__content { transition-duration: 1ms !important; }
}

/* Data-display batch: mirrors the native WXML structure without browser-only syntax. */
.pui-list-showcase,
.pui-swipe-cell-showcase,
.pui-count-down-showcase,
.pui-table-showcase,
.pui-calendar-showcase { display: grid; gap: var(--pui-preview-space-step-12); }

.pui-list-preview {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: color var(--pui-list-preview-duration) var(--pui-list-preview-ease), background-color var(--pui-list-preview-duration) var(--pui-list-preview-ease), border-color var(--pui-list-preview-duration) var(--pui-list-preview-ease), border-radius var(--pui-list-preview-duration) var(--pui-list-preview-ease), box-shadow var(--pui-list-preview-duration) var(--pui-list-preview-ease), opacity var(--pui-list-preview-duration) var(--pui-list-preview-ease);
}
.pui-list-preview.is-borderless { border-color: transparent; box-shadow: none; }
.pui-list-preview.is-disabled { opacity: .56; }

.pui-list-preview__header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-step-7);
  min-width: 0;
  min-height: 48px;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-step-12);
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  transition: color var(--pui-list-preview-duration) var(--pui-list-preview-ease), background-color var(--pui-list-preview-duration) var(--pui-list-preview-ease), border-color var(--pui-list-preview-duration) var(--pui-list-preview-ease);
}
.pui-list-preview__header > span { display: grid; min-width: 0; gap: var(--pui-preview-space-step-1); }
.pui-list-preview__header strong,
.pui-list-preview__header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-list-preview__header strong { color: var(--text); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-caption); }
.pui-list-preview__header small { color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-list-preview__header.is-custom { color: var(--muted); }

.pui-list-preview__body,
.pui-list-preview__content,
.pui-list-preview__item-wrap { box-sizing: border-box; width: 100%; min-width: 0; }
.pui-list-preview__item-wrap.is-appended {
  overflow: hidden;
  animation: pui-list-preview-item-reveal var(--pui-list-preview-duration) var(--pui-list-preview-ease) backwards;
}

@keyframes pui-list-preview-item-reveal {
  from { max-height: 0; opacity: 0; transform: translateY(4px); }
  to { max-height: 160px; opacity: 1; transform: translateY(0); }
}
.pui-list-preview__content { max-height: 6000px; overflow: hidden; opacity: 0; transform: translateY(4px); transition: max-height var(--pui-list-preview-duration) var(--pui-list-preview-ease), opacity var(--pui-list-preview-duration) var(--pui-list-preview-ease), transform var(--pui-list-preview-duration) var(--pui-list-preview-ease); }
.pui-list-preview__content.is-active { opacity: 1; transform: translateY(0); }
.pui-list-preview__content.is-inactive { max-height: 0; pointer-events: none; }
.pui-list-preview:not(.is-undivided) .pui-list-preview__item-wrap + .pui-list-preview__item-wrap { border-top: 1px solid var(--border); }

.pui-list-preview__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  width: 100%;
  min-width: 0;
  min-height: 58px;
  margin: 0;
  padding: var(--pui-preview-space-step-9) var(--pui-preview-space-step-12);
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: color var(--pui-list-preview-duration) var(--pui-list-preview-ease), background-color var(--pui-list-preview-duration) var(--pui-list-preview-ease), opacity var(--pui-list-preview-duration) var(--pui-list-preview-ease), transform var(--pui-list-preview-duration) var(--pui-list-preview-ease);
}
.pui-list-preview.is-compact .pui-list-preview__item { min-height: 46px; padding-top: var(--pui-preview-space-sm); padding-bottom: var(--pui-preview-space-sm); }
.pui-list-preview__item.is-align-top { align-items: flex-start; }
.pui-list-preview__item.is-align-bottom { align-items: flex-end; }
.pui-list-preview__item[aria-disabled="false"]:hover { background: var(--surface-soft); }
.pui-list-preview__item[aria-disabled="false"]:active { transform: scale(.997); }
.pui-list-preview__item.is-disabled { opacity: .45; cursor: not-allowed; }
.pui-list-preview__item.is-loading { opacity: .72; cursor: progress; }
.pui-list-preview__item > .pui-icon,
.pui-list-preview__item > .pui-loading { flex: 0 0 auto; }
.pui-list-preview__item > img { flex: 0 0 auto; width: 32px; height: 32px; object-fit: cover; border-radius: var(--pui-preview-radius-small); }
.pui-list-preview__copy { display: grid; flex: 1; min-width: 0; gap: var(--pui-preview-space-step-1); }
.pui-list-preview__copy strong,
.pui-list-preview__copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-list-preview__copy strong { color: var(--text); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-caption); }
.pui-list-preview__copy strong i { margin-right: var(--pui-preview-space-step-3); color: var(--danger); font-style: normal; }
.pui-list-preview__copy small { color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-list-preview__copy small.is-note { color: var(--muted); }
.pui-list-preview__trailing { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; min-width: 0; max-width: 46%; gap: var(--pui-preview-space-step-5); }
.pui-list-preview__trailing > em { overflow: hidden; min-width: 0; color: var(--muted); font-size: var(--pui-font-size-caption); font-style: normal; line-height: var(--pui-line-height-caption); text-overflow: ellipsis; white-space: nowrap; }
.pui-list-preview__trailing > .pui-icon,
.pui-list-preview__trailing > .pui-badge-demo { flex: 0 0 auto; }

.pui-list-preview__state {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-7);
  max-height: 0;
  min-height: 0;
  padding: 0 var(--pui-preview-space-step-12);
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  text-align: center;
  background: var(--surface-solid);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: max-height var(--pui-list-preview-duration) var(--pui-list-preview-ease), min-height var(--pui-list-preview-duration) var(--pui-list-preview-ease), padding var(--pui-list-preview-duration) var(--pui-list-preview-ease), color var(--pui-list-preview-duration) var(--pui-list-preview-ease), background-color var(--pui-list-preview-duration) var(--pui-list-preview-ease), opacity var(--pui-list-preview-duration) var(--pui-list-preview-ease), transform var(--pui-list-preview-duration) var(--pui-list-preview-ease);
}
.pui-list-preview__state.is-active { max-height: 260px; min-height: 116px; padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12); opacity: 1; transform: translateY(0); pointer-events: auto; }
.pui-list-preview__state.is-error { color: var(--danger); }
.pui-list-preview__state:not(.is-active) .pui-spinner,
.pui-list-preview__state:not(.is-active) .pui-loading-inline-dots { animation-play-state: paused; }
.pui-list-preview__empty-slot { display: grid; justify-items: center; gap: var(--pui-preview-space-sm); }
.pui-list-preview__empty-slot strong { color: var(--text); font-size: var(--pui-font-size-caption); }

.pui-list-preview__slot-content { display: grid; gap: var(--pui-preview-content-gap); padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12); }
.pui-list-preview__slot-content .pui-cell { grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; }
.pui-list-preview__slot-content .pui-button { justify-self: stretch; width: 100%; }

.pui-list-preview__footer {
  box-sizing: border-box;
  max-height: 64px;
  min-height: 44px;
  padding: var(--pui-preview-space-xs) var(--pui-preview-content-gap);
  overflow: hidden;
  background: var(--surface-strong);
  border-top: 1px solid var(--border);
  opacity: 1;
  transition: max-height var(--pui-list-preview-duration) var(--pui-list-preview-ease), min-height var(--pui-list-preview-duration) var(--pui-list-preview-ease), padding var(--pui-list-preview-duration) var(--pui-list-preview-ease), background-color var(--pui-list-preview-duration) var(--pui-list-preview-ease), border-color var(--pui-list-preview-duration) var(--pui-list-preview-ease), opacity var(--pui-list-preview-duration) var(--pui-list-preview-ease);
}
.pui-list-preview__footer.is-inactive { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; opacity: 0; pointer-events: none; }
.pui-list-preview__footer-button.pui-button { width: 100%; min-height: 34px; }
.pui-list-preview__footer-slot .pui-button { width: 100%; min-height: 34px; }

.pui-list-preview__event { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--pui-preview-space-xs) var(--pui-preview-space-normal); min-width: 0; min-height: 54px; padding: var(--pui-preview-space-step-9) var(--pui-preview-space-step-12); color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--pui-site-radius-control); }
.pui-list-preview__event > span { display: inline-flex; align-items: center; min-width: 0; color: var(--text); gap: var(--pui-preview-space-sm); }
.pui-list-preview__event strong { font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); }
.pui-list-preview__event em { grid-column: 1 / -1; min-width: 0; color: var(--muted); font-size: var(--pui-font-size-caption); font-style: normal; line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }
.pui-list-preview__event b { color: var(--text); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); }

.pui-list-preview.is-reduced-motion,
.pui-list-preview.is-reduced-motion .pui-list-preview__header,
.pui-list-preview.is-reduced-motion .pui-list-preview__content,
.pui-list-preview.is-reduced-motion .pui-list-preview__item-wrap.is-appended,
.pui-list-preview.is-reduced-motion .pui-list-preview__item,
.pui-list-preview.is-reduced-motion .pui-list-preview__state,
.pui-list-preview.is-reduced-motion .pui-list-preview__footer { transition-duration: 1ms !important; }
.pui-list-preview.is-reduced-motion .pui-list-preview__item-wrap.is-appended { animation-duration: 1ms !important; }

@media (prefers-reduced-motion: reduce) {
  .pui-list-preview,
  .pui-list-preview__header,
  .pui-list-preview__content,
  .pui-list-preview__item-wrap.is-appended,
  .pui-list-preview__item,
  .pui-list-preview__state,
  .pui-list-preview__footer { transition-duration: 1ms !important; }
  .pui-list-preview__item-wrap.is-appended { animation-duration: 1ms !important; }
}

.pui-swipe-cell-showcase { min-width: 0; }
.pui-swipe-cell-preview { position: relative; overflow: hidden; min-width: 0; min-height: 64px; border-radius: var(--pui-preview-radius-medium); isolation: isolate; }
.pui-swipe-cell-preview.is-disabled { opacity: 0.58; }
.pui-swipe-cell-preview__actions { position: absolute; top: 0; bottom: 0; display: flex; overflow: hidden; opacity: 0; transition: opacity var(--pui-duration-fast) var(--pui-ease-standard); }
.pui-swipe-cell-preview.is-dragging .pui-swipe-cell-preview__actions { transition-duration: 1ms; }
.pui-swipe-cell-preview.is-open-left .pui-swipe-cell-preview__actions--left,
.pui-swipe-cell-preview.is-open-right .pui-swipe-cell-preview__actions--right,
.pui-swipe-cell-preview.is-drag-left .pui-swipe-cell-preview__actions--left,
.pui-swipe-cell-preview.is-drag-right .pui-swipe-cell-preview__actions--right { opacity: 1; }
.pui-swipe-cell-preview__actions--left { left: 0; }
.pui-swipe-cell-preview__actions--right { right: 0; }
.pui-swipe-cell-preview__action-wrap { display: flex; flex: 0 0 auto; height: 100%; overflow: hidden; color: transparent; background: transparent; border: 0; box-shadow: none; }
.pui-swipe-cell-preview.is-open-left .pui-swipe-cell-preview__actions--left .pui-swipe-cell-preview__action-wrap,
.pui-swipe-cell-preview.is-open-right .pui-swipe-cell-preview__actions--right .pui-swipe-cell-preview__action-wrap,
.pui-swipe-cell-preview.is-drag-left .pui-swipe-cell-preview__actions--left .pui-swipe-cell-preview__action-wrap,
.pui-swipe-cell-preview.is-drag-right .pui-swipe-cell-preview__actions--right .pui-swipe-cell-preview__action-wrap { color: var(--pui-text-on-inverse); background: var(--surface-strong); }
.pui-swipe-cell-preview:is(.is-open-left, .is-drag-left) .pui-swipe-cell-preview__actions--left .pui-swipe-cell-preview__action-wrap.is-default,
.pui-swipe-cell-preview:is(.is-open-right, .is-drag-right) .pui-swipe-cell-preview__actions--right .pui-swipe-cell-preview__action-wrap.is-default { color: var(--text); background: var(--surface-soft); }
.pui-swipe-cell-preview:is(.is-open-left, .is-drag-left) .pui-swipe-cell-preview__actions--left .pui-swipe-cell-preview__action-wrap.is-primary,
.pui-swipe-cell-preview:is(.is-open-right, .is-drag-right) .pui-swipe-cell-preview__actions--right .pui-swipe-cell-preview__action-wrap.is-primary { background: var(--brand); }
.pui-swipe-cell-preview:is(.is-open-left, .is-drag-left) .pui-swipe-cell-preview__actions--left .pui-swipe-cell-preview__action-wrap.is-success,
.pui-swipe-cell-preview:is(.is-open-right, .is-drag-right) .pui-swipe-cell-preview__actions--right .pui-swipe-cell-preview__action-wrap.is-success { background: var(--success); }
.pui-swipe-cell-preview:is(.is-open-left, .is-drag-left) .pui-swipe-cell-preview__actions--left .pui-swipe-cell-preview__action-wrap.is-warning,
.pui-swipe-cell-preview:is(.is-open-right, .is-drag-right) .pui-swipe-cell-preview__actions--right .pui-swipe-cell-preview__action-wrap.is-warning { color: var(--text); background: var(--warning); }
.pui-swipe-cell-preview:is(.is-open-left, .is-drag-left) .pui-swipe-cell-preview__actions--left .pui-swipe-cell-preview__action-wrap.is-danger,
.pui-swipe-cell-preview:is(.is-open-right, .is-drag-right) .pui-swipe-cell-preview__actions--right .pui-swipe-cell-preview__action-wrap.is-danger { background: var(--danger); }
.pui-swipe-cell-preview__action-wrap .pui-button { width: 100%; height: 100%; min-height: 100%; padding: 0 var(--pui-preview-space-sm); color: inherit; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: var(--pui-font-size-caption); }
.pui-swipe-cell-preview__content { position: relative; z-index: 1; display: flex; align-items: stretch; width: 100%; min-width: 0; min-height: 64px; color: var(--text); background: var(--page); cursor: grab; touch-action: pan-y; user-select: none; transition: transform 500ms var(--pui-ease-standard); }
.pui-swipe-cell-preview__content:active { cursor: grabbing; }
.pui-swipe-cell-preview__content.is-dragging { cursor: grabbing; transition-duration: 0ms; }
.pui-swipe-cell-preview__content .pui-cell { width: 100%; min-width: 0; min-height: 64px; }
.pui-swipe-cell-showcase.is-reduced-motion .pui-swipe-cell-preview__content { transition-duration: 1ms !important; }

@media (prefers-reduced-motion: reduce) {
  .pui-swipe-cell-preview__content { transition-duration: 1ms !important; }
}

.pui-count-down-showcase__examples { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--pui-preview-space-lg); }
.pui-count-down-preview {
  --pui-count-down-duration: 500ms;
  display: inline-flex;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.pui-count-down-preview__segments { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; justify-content: center; flex-wrap: nowrap; gap: var(--pui-preview-space-xxs); }
.pui-count-down-preview__part { display: inline-flex; flex: 0 0 auto; min-width: 0; align-items: baseline; justify-content: center; }
.pui-count-down-preview__part--numeric { gap: var(--pui-preview-space-xxs); color: var(--text); font-family: var(--pui-font-family-mono); font-size: var(--pui-font-size-title-medium); font-weight: var(--pui-font-weight-bold); line-height: var(--pui-line-height-title-medium); }
.pui-count-down-preview__part--numeric small { color: currentColor; font-family: inherit; font-size: var(--pui-font-size-body-small); font-weight: var(--pui-font-weight-medium); opacity: .78; }
.pui-count-down-preview__value { display: inline-flex; min-width: 22px; align-items: center; justify-content: center; overflow: hidden; transition: color var(--pui-count-down-duration) var(--pui-ease-standard), background-color var(--pui-count-down-duration) var(--pui-ease-standard), border-radius var(--pui-count-down-duration) var(--pui-ease-standard), opacity var(--pui-count-down-duration) var(--pui-ease-standard), box-shadow var(--pui-count-down-duration) var(--pui-ease-standard); }
.pui-count-down-preview__digits { display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; line-height: var(--pui-line-height-none); }
.pui-count-down-preview__digit { display: inline-flex; width: .62em; height: 1em; align-items: flex-start; justify-content: center; overflow: hidden; line-height: var(--pui-line-height-none); }
.pui-count-down-preview__digit-reel { display: flex; width: 100%; height: 2em; flex: 0 0 auto; flex-direction: column; transform: translateY(-50%); }
.pui-count-down-preview__digit-glyph { display: flex; width: 100%; height: 1em; flex: 0 0 1em; align-items: center; justify-content: center; line-height: var(--pui-line-height-none); }
.pui-count-down-preview__digit-reel.is-motion-a { animation: pui-count-down-preview-digit-roll-a var(--pui-count-down-duration) var(--pui-ease-standard) both; }
.pui-count-down-preview__digit-reel.is-motion-b { animation: pui-count-down-preview-digit-roll-b var(--pui-count-down-duration) var(--pui-ease-standard) both; }
@keyframes pui-count-down-preview-digit-roll-a { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes pui-count-down-preview-digit-roll-b { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.pui-count-down-preview__part--numeric small { flex: 0 0 auto; white-space: nowrap; }
.pui-count-down-preview__part--split { color: var(--subtle); font-size: var(--pui-font-size-title-small); font-style: normal; font-weight: var(--pui-font-weight-bold); line-height: var(--pui-line-height-title-small); }
.pui-count-down-preview--round .pui-count-down-preview__value,
.pui-count-down-preview--square .pui-count-down-preview__value { width: 24px; height: 24px; min-width: 24px; align-items: center; color: #fff; background: var(--danger); box-shadow: var(--shadow-soft); }
.pui-count-down-preview--round .pui-count-down-preview__value { border-radius: var(--pui-preview-radius-round); }
.pui-count-down-preview--square .pui-count-down-preview__value { border-radius: var(--pui-preview-radius-small); }
.pui-count-down-preview--round .pui-count-down-preview__part--split,
.pui-count-down-preview--square .pui-count-down-preview__part--split { color: var(--danger); }
.pui-count-down-preview__slot { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: var(--pui-preview-content-gap); padding: var(--pui-preview-space-sm) var(--pui-preview-space-normal); color: var(--text); font-family: var(--pui-font-family-mono); font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-small); box-shadow: var(--shadow-soft); transition: opacity var(--pui-count-down-duration) var(--pui-ease-standard), transform var(--pui-count-down-duration) var(--pui-ease-standard); }
body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-count-down-preview__slot { background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
body .app-shell[data-frost="off"][data-page-mode] .preview-stage .pui-count-down-preview__slot { -webkit-backdrop-filter: none; backdrop-filter: none; }
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-count-down-preview__slot { box-shadow: none; }
.pui-count-down-preview__slot > span { min-width: 0; overflow-wrap: anywhere; }
.pui-count-down-preview__slot .pui-tag { flex: 0 0 auto; }
.pui-count-down-preview--small .pui-count-down-preview__part--numeric { min-width: 20px; font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); }
.pui-count-down-preview--small .pui-count-down-preview__part--split { font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); }
.pui-count-down-preview--small .pui-count-down-preview__value { min-width: 20px; }
.pui-count-down-preview--small.pui-count-down-preview--round .pui-count-down-preview__value,
.pui-count-down-preview--small.pui-count-down-preview--square .pui-count-down-preview__value { width: 20px; height: 20px; min-width: 20px; }
.pui-count-down-preview--large .pui-count-down-preview__part--numeric { min-width: 28px; font-size: var(--pui-font-size-title-large); line-height: var(--pui-line-height-title-large); }
.pui-count-down-preview--large .pui-count-down-preview__part--split { font-size: var(--pui-font-size-title-medium); line-height: var(--pui-line-height-title-medium); }
.pui-count-down-preview--large .pui-count-down-preview__value { min-width: 28px; }
.pui-count-down-preview--large.pui-count-down-preview--round .pui-count-down-preview__value,
.pui-count-down-preview--large.pui-count-down-preview--square .pui-count-down-preview__value { width: 28px; height: 28px; min-width: 28px; }
.pui-count-down-preview.is-paused .pui-count-down-preview__value { opacity: .7; }
.pui-count-down-preview.is-finished .pui-count-down-preview__value { color: var(--muted); }
.pui-count-down-preview.is-finished.pui-count-down-preview--round .pui-count-down-preview__value,
.pui-count-down-preview.is-finished.pui-count-down-preview--square .pui-count-down-preview__value { color: #fff; opacity: .7; }
.pui-count-down-preview .pui-count-down-preview__value.is-motion-a { animation: pui-count-down-value-a var(--pui-count-down-duration) var(--pui-ease-standard) both; }
.pui-count-down-preview .pui-count-down-preview__value.is-motion-b { animation: pui-count-down-value-b var(--pui-count-down-duration) var(--pui-ease-standard) both; }
.pui-count-down-preview__actions { display: flex; flex-wrap: wrap; gap: var(--pui-preview-content-gap); }
.pui-count-down-preview__actions .pui-button { flex: 0 1 auto; min-width: 64px; }
.pui-count-down-preview__status { min-width: 0; margin: 0; color: var(--muted); font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-small); overflow-wrap: anywhere; }
@keyframes pui-count-down-value-a { from { opacity: .42; transform: translateY(-16%); } to { opacity: 1; transform: translateY(0); } }
@keyframes pui-count-down-value-b { from { opacity: .42; transform: translateY(-16%); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 420px) {
  .pui-count-down-showcase__examples { align-items: flex-start; flex-direction: column; }
  .pui-count-down-preview__actions .pui-button { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pui-count-down-preview,
  .pui-count-down-preview .pui-count-down-preview__part--numeric,
  .pui-count-down-preview .is-motion-a,
  .pui-count-down-preview .is-motion-b { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

.pui-table-showcase { min-width: 0; }
.pui-table-showcase > .pui-showcase-section { width: 100%; min-width: 0; }
.pui-table-preview {
  --pui-table-preview-duration: 500ms;
  --pui-table-preview-easing: ease-out;
  --pui-table-preview-head-height: 34px;
  --pui-table-preview-row-height: 41px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  background: var(--preview-surface, var(--surface-solid));
  border: 1px solid var(--preview-border, var(--border));
  border-radius: var(--pui-preview-radius-control, var(--pui-preview-radius-medium));
  box-shadow: var(--preview-shadow-card, none);
  backdrop-filter: var(--preview-blur, none);
  transition: background-color var(--pui-table-preview-duration) var(--pui-table-preview-easing), border-color var(--pui-table-preview-duration) var(--pui-table-preview-easing), border-radius var(--pui-table-preview-duration) var(--pui-table-preview-easing), box-shadow var(--pui-table-preview-duration) var(--pui-table-preview-easing), opacity var(--pui-table-preview-duration) var(--pui-table-preview-easing);
}
.pui-table-preview.is-borderless { border-color: transparent; }
.pui-table-preview__viewport { position: relative; box-sizing: border-box; width: 100%; min-height: 94px; overflow: hidden; }
.pui-table-preview__scroll { box-sizing: border-box; width: 100%; max-height: 600px; overflow: auto; overscroll-behavior: contain; opacity: 1; transform: translateY(0); transition: height var(--pui-table-preview-duration) var(--pui-table-preview-easing), max-height var(--pui-table-preview-duration) var(--pui-table-preview-easing), opacity var(--pui-table-preview-duration) var(--pui-table-preview-easing), transform var(--pui-table-preview-duration) var(--pui-table-preview-easing); scrollbar-width: thin; }
.pui-table-preview__scroll.is-inactive { height: 0 !important; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-4px); }
.pui-table-preview__table { box-sizing: border-box; min-width: 100%; }
.pui-table-preview__row { display: flex; min-width: 100%; min-height: var(--pui-table-preview-row-height); color: var(--text); background: var(--preview-surface, var(--surface-solid)); transition: color var(--pui-table-preview-duration) var(--pui-table-preview-easing), background-color var(--pui-table-preview-duration) var(--pui-table-preview-easing), opacity var(--pui-table-preview-duration) var(--pui-table-preview-easing); }
.pui-table-preview__row.is-head { min-height: var(--pui-table-preview-head-height); color: var(--muted); background: var(--surface-soft); }
.pui-table-preview.is-sticky-header .pui-table-preview__row.is-head { position: sticky; top: 0; z-index: 8; }
.pui-table-preview__body .pui-table-preview__row { border-top: 1px solid var(--border); }
.pui-table-preview.is-borderless .pui-table-preview__body .pui-table-preview__row { border-top-color: transparent; }
.pui-table-preview.is-striped .pui-table-preview__body .pui-table-preview__row:nth-child(even) { background: var(--surface-soft); }
.pui-table-preview__row.is-selected { background: color-mix(in srgb, var(--text) 7%, var(--preview-surface, var(--surface-solid))); }
.pui-table-preview__row.is-clickable { cursor: pointer; }
.pui-table-preview__row.is-clickable:not(.is-disabled):active { background: var(--brand-soft); }
.pui-table-preview__row.is-disabled { color: var(--subtle); opacity: 0.52; cursor: not-allowed; }
.pui-table-preview__cell { position: relative; z-index: 1; display: flex; flex: none; box-sizing: border-box; min-width: 0; min-height: var(--pui-table-preview-row-height); align-items: center; padding: var(--pui-preview-space-sm) var(--pui-preview-space-normal); color: inherit; font: inherit; font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); text-align: left; background: inherit; border: 0; border-radius: 0; transition: color var(--pui-table-preview-duration) var(--pui-table-preview-easing), background-color var(--pui-table-preview-duration) var(--pui-table-preview-easing); }
button.pui-table-preview__cell { appearance: none; cursor: default; }
.pui-table-preview__cell.is-head-cell { min-height: var(--pui-table-preview-head-height); gap: var(--pui-preview-space-xs); color: var(--muted); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-bold); }
.pui-table-preview__cell.is-head-cell > span:not(.pui-icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-table-preview__cell.is-head-cell.is-sortable:not(:disabled) { cursor: pointer; }
.pui-table-preview__cell.is-head-cell:disabled { opacity: 1; }
.pui-table-preview__cell.is-center { justify-content: center; text-align: center; }
.pui-table-preview__cell.is-right { justify-content: flex-end; text-align: right; }
.pui-table-preview__cell.is-ellipsis > span:not(.pui-tag):not(.pui-icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-table-preview__cell.is-wrap { white-space: normal; overflow-wrap: anywhere; }
.pui-table-preview__cell.is-selection { z-index: 4; justify-content: center; padding: var(--pui-preview-space-xs); }
.pui-table-preview__cell.is-selection > .pui-checkbox-sample {
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.pui-table-preview__cell.is-fixed { position: sticky; z-index: 5; background: inherit; backdrop-filter: var(--preview-blur, none); }
.pui-table-preview__row.is-head .pui-table-preview__cell.is-fixed { z-index: 10; background: var(--surface-soft); }
.pui-table-preview__cell.is-fixed-edge-left:not(.is-selection) { border-right: 1px solid var(--border); }
.pui-table-preview__cell.is-fixed-edge-right { border-left: 1px solid var(--border); }
.pui-table-preview__sort-icon { flex: none; opacity: 0.28; transition: opacity var(--pui-table-preview-duration) var(--pui-table-preview-easing), transform var(--pui-table-preview-duration) var(--pui-table-preview-easing); }
.pui-table-preview__sort-icon.is-active { opacity: 1; transform: translateY(-1px); }
.pui-table-preview__cell.is-selection > .pui-checkbox-sample { flex: 0 0 28px; }
.pui-table-preview__state { position: absolute; inset: 0; z-index: 12; display: flex; box-sizing: border-box; width: 100%; min-height: 94px; max-height: 0; align-items: center; justify-content: center; gap: var(--pui-preview-content-gap); overflow: hidden; padding: 0 var(--pui-preview-space-step-12); color: var(--muted); background: var(--preview-surface, var(--surface-solid)); opacity: 0; pointer-events: none; transform: translateY(4px); transition: max-height var(--pui-table-preview-duration) var(--pui-table-preview-easing), opacity var(--pui-table-preview-duration) var(--pui-table-preview-easing), transform var(--pui-table-preview-duration) var(--pui-table-preview-easing); }
.pui-table-preview__state.is-error { flex-direction: column; padding-top: var(--pui-preview-space-step-12); padding-bottom: var(--pui-preview-space-step-12); text-align: center; }
.pui-table-preview__state.is-active { position: relative; max-height: 260px; opacity: 1; pointer-events: auto; transform: translateY(0); }
.pui-table-preview__state.is-active + .pui-table-preview__state { position: absolute; }
.pui-table-preview.is-disabled { opacity: 0.56; }
.pui-table-preview.is-disabled .pui-table-preview__scroll,
.pui-table-preview.is-disabled .pui-table-preview__state { pointer-events: none; }
.pui-table-preview__actions { display: flex; flex-wrap: wrap; gap: var(--pui-preview-space-step-7); }
.pui-table-preview__actions .pui-button { flex: 1 1 calc(50% - 4px); min-width: 0; }
.pui-table-preview__status { margin: var(--pui-preview-content-gap) 0 0; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }
.pui-table-preview__state-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pui-preview-content-gap); }
.pui-table-preview__state-examples > div { display: flex; min-width: 0; min-height: 96px; align-items: center; justify-content: center; padding: var(--pui-preview-space-normal); background: var(--surface-soft); border-radius: var(--pui-preview-radius-medium); }
.pui-table-preview.is-reduced,
.pui-table-preview.is-reduced * { animation-duration: 1ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) {
  .pui-table-preview,
  .pui-table-preview * { animation-duration: 1ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
}

@media (max-width: 420px) {
  .pui-table-preview__state-examples { grid-template-columns: 1fr; }
}

.pui-swiper-showcase { min-width: 0; }
.pui-swiper-showcase > .pui-showcase-section { width: 100%; min-width: 0; }
.pui-swiper-preview {
  --pui-swiper-preview-duration: 500ms;
  --pui-swiper-preview-motion-duration: 500ms;
  --pui-swiper-preview-ease: var(--ease-standard);
  --pui-swiper-preview-height: 180px;
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  color: var(--text);
}
.pui-swiper-preview__content,
.pui-swiper-preview__state {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(.99);
  transition: opacity var(--pui-swiper-preview-motion-duration) var(--ease-standard), transform var(--pui-swiper-preview-motion-duration) var(--ease-standard);
}
.pui-swiper-preview__content.is-active,
.pui-swiper-preview__state.is-active { z-index: 1; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.pui-swiper-preview__viewport {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: var(--pui-swiper-preview-height);
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-card, var(--pui-preview-radius-large));
  box-shadow: var(--preview-shadow, none);
  backdrop-filter: var(--preview-blur, none);
}
.pui-swiper-preview.is-vertical .pui-swiper-preview__viewport { touch-action: pan-x; }
.pui-swiper-preview__viewport:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 42%, transparent); outline-offset: 2px; }
.pui-swiper-preview__track { display: flex; width: 100%; height: 100%; will-change: transform; transition-property: transform; transition-duration: var(--pui-swiper-preview-duration); transition-timing-function: var(--pui-swiper-preview-ease); }
.pui-swiper-preview__slide { position: relative; flex: 0 0 100%; box-sizing: border-box; min-width: 0; min-height: 0; overflow: hidden; background: linear-gradient(135deg, var(--preview-surface, var(--surface-solid)), var(--surface-soft)); opacity: .86; transform: scale(.985); transition: opacity var(--pui-swiper-preview-motion-duration) var(--ease-standard), transform var(--pui-swiper-preview-motion-duration) var(--ease-standard), background-color var(--pui-swiper-preview-motion-duration) var(--ease-standard); }
.pui-swiper-preview__slide.is-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--text) 8%, var(--preview-surface, var(--surface-solid))), var(--surface-soft)); }
.pui-swiper-preview__slide.is-success { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 15%, var(--preview-surface, var(--surface-solid))), var(--surface-soft)); }
.pui-swiper-preview__slide.is-warning { background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 15%, var(--preview-surface, var(--surface-solid))), var(--surface-soft)); }
.pui-swiper-preview__slide.is-danger { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 15%, var(--preview-surface, var(--surface-solid))), var(--surface-soft)); }
.pui-swiper-preview__slide.is-active { opacity: 1; transform: scale(1); }
.pui-swiper-preview__slide.is-disabled { opacity: .48; }
.pui-swiper-preview__image,
.pui-swiper-preview__visual { position: absolute; inset: 0; width: 100%; height: 100%; }
.pui-swiper-preview__image { display: block; }
.pui-swiper-preview__visual { display: grid; place-items: center; color: var(--muted); opacity: .74; }
.pui-swiper-preview__scrim { position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgba(9,9,11,.8)); pointer-events: none; }
.pui-swiper-preview__copy { position: absolute; z-index: 1; inset: auto 0 0; display: flex; box-sizing: border-box; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--pui-preview-space-xs); padding: var(--pui-preview-space-step-24) var(--pui-preview-space-lg) var(--pui-preview-space-lg); color: #fafafa; pointer-events: none; }
.pui-swiper-preview__copy strong { max-width: 100%; overflow: hidden; font-size: var(--pui-font-size-body-large); line-height: var(--pui-line-height-body-medium); text-overflow: ellipsis; white-space: nowrap; }
.pui-swiper-preview__copy > span:not(.pui-tag) { display: -webkit-box; max-width: 100%; overflow: hidden; color: rgba(250,250,250,.82); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pui-swiper-preview__generic { display: flex; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; align-items: center; gap: var(--pui-preview-space-normal); padding: var(--pui-preview-space-step-16); }
.pui-swiper-preview__generic > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: var(--pui-preview-space-xs); }
.pui-swiper-preview__generic strong,
.pui-swiper-preview__generic span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-swiper-preview__generic span { color: var(--muted); font-size: var(--pui-font-size-caption); }
.pui-swiper-preview__arrows { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.pui-swiper-preview__arrows .pui-button { position: absolute; top: 50%; width: 32px; min-width: 32px; height: 32px; padding: 0; transform: translateY(-50%); pointer-events: auto; background: color-mix(in srgb, var(--preview-surface, var(--surface-solid)) 78%, transparent); -webkit-backdrop-filter: var(--preview-blur, none); backdrop-filter: var(--preview-blur, none); }
.pui-swiper-preview__arrows .pui-button:first-child { left: var(--pui-preview-space-step-7); }
.pui-swiper-preview__arrows .pui-button:last-child { right: var(--pui-preview-space-step-7); }
.pui-swiper-preview.is-vertical .pui-swiper-preview__arrows .pui-button { top: auto; left: 50%; right: auto; transform: translateX(-50%); }
.pui-swiper-preview.is-vertical .pui-swiper-preview__arrows .pui-button:first-child { top: var(--pui-preview-space-step-7); }
.pui-swiper-preview.is-vertical .pui-swiper-preview__arrows .pui-button:last-child { bottom: var(--pui-preview-space-step-7); }
.pui-swiper-preview__fraction { display: flex; min-width: 28px; align-items: center; justify-content: center; padding: var(--pui-preview-space-xxs) var(--pui-preview-space-sm); color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-swiper-preview__fraction.is-inside { position: absolute; z-index: 4; left: 50%; bottom: var(--pui-preview-content-gap); color: #fafafa; background: rgba(9,9,11,.58); border: 1px solid rgba(255,255,255,.24); border-radius: var(--pui-preview-radius-round); transform: translateX(-50%); }
.pui-swiper-preview__fraction.is-outside { margin: var(--pui-preview-content-gap) auto 0; }
.pui-swiper-preview__indicators { display: flex; max-width: calc(100% - 80px); align-items: center; justify-content: center; gap: var(--pui-preview-space-step-5); }
.pui-swiper-preview__indicators.is-inside { position: absolute; z-index: 4; left: 50%; bottom: var(--pui-preview-content-gap); transform: translateX(-50%); }
.pui-swiper-preview__indicators.is-outside { max-width: 100%; margin-top: var(--pui-preview-content-gap); }
.pui-swiper-preview__indicator { appearance: none; width: 6px; min-width: 6px; height: 6px; padding: 0; background: rgba(250,250,250,.52); border: 0; border-radius: var(--pui-preview-radius-round); cursor: pointer; transition: width var(--pui-swiper-preview-motion-duration) var(--ease-standard), background-color var(--pui-swiper-preview-motion-duration) var(--ease-standard), opacity var(--pui-swiper-preview-motion-duration) var(--ease-standard); }
.pui-swiper-preview__indicator.is-active { background: #fafafa; }
.pui-swiper-preview__indicators.is-dots-bar .pui-swiper-preview__indicator.is-active { width: 16px; }
.pui-swiper-preview__indicators.is-outside .pui-swiper-preview__indicator { background: var(--border); }
.pui-swiper-preview__indicators.is-outside .pui-swiper-preview__indicator.is-active { background: var(--text); }
.pui-swiper-preview__indicator:disabled { cursor: not-allowed; opacity: .56; }
.pui-swiper-preview__state { display: flex; box-sizing: border-box; width: 100%; height: var(--pui-swiper-preview-height); min-width: 0; align-items: center; justify-content: center; gap: var(--pui-preview-content-gap); padding: var(--pui-preview-space-lg); color: var(--muted); text-align: center; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-card, var(--pui-preview-radius-large)); box-shadow: var(--preview-shadow, none); backdrop-filter: var(--preview-blur, none); }
.pui-swiper-preview__state.is-error { flex-direction: column; }
.pui-swiper-preview__state.is-error .pui-button { width: 100%; min-width: 0; }
.pui-swiper-preview__state strong { min-width: 0; overflow-wrap: anywhere; }
.pui-swiper-preview__state.is-error { color: var(--danger); }
.pui-swiper-preview__state > .pui-spinner { flex: none; }
.pui-swiper-preview__state > .pui-button__loading-text { min-width: 0; overflow-wrap: anywhere; }
.pui-swiper-preview__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-space-sm); }
.pui-swiper-preview__actions .pui-button { width: 100%; min-width: 0; }
.pui-swiper-preview.is-disabled { opacity: .54; }
.pui-swiper-preview.is-reduced .pui-swiper-preview__content,
.pui-swiper-preview.is-reduced .pui-swiper-preview__state,
.pui-swiper-preview.is-reduced .pui-swiper-preview__track,
.pui-swiper-preview.is-reduced .pui-swiper-preview__slide,
.pui-swiper-preview.is-reduced .pui-swiper-preview__indicator { transition-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) {
  .pui-swiper-preview__content,
  .pui-swiper-preview__state,
  .pui-swiper-preview__track,
  .pui-swiper-preview__slide,
  .pui-swiper-preview__indicator { transition-duration: 1ms !important; }
}

.pui-calendar-showcase { position: relative; display: grid; gap: var(--pui-section-gap); }
.pui-calendar-showcase.is-popup-mode,
.pui-calendar-showcase.is-popup-mode > .pui-calendar-demo-section { height: 100%; min-height: 100%; }
.pui-calendar-demo-section { display: grid; min-width: 0; gap: var(--pui-preview-content-gap); }
.pui-calendar-demo-section + .pui-calendar-demo-section { margin-top: var(--pui-section-gap); }
.pui-calendar-demo-section > h3 { margin: var(--pui-preview-space-step-12) 0 var(--pui-preview-content-gap); color: var(--text); font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); }
.pui-calendar-demo-section:first-child > h3 { margin-top: 0; }
.pui-calendar-preview-host { position: relative; width: 100%; box-sizing: border-box; }
.pui-calendar-preview-host.is-popup { position: absolute; inset: 0; z-index: 24; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--pui-preview-space-step-12); }
.pui-calendar-preview__overlay { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; cursor: pointer; background: rgba(9,9,11,.42); border: 0; opacity: 0; transition: opacity var(--pui-calendar-duration) var(--pui-ease-standard); }
.pui-calendar-preview { position: relative; z-index: 1; width: 100%; overflow: hidden; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-medium); box-shadow: var(--shadow-soft); opacity: 0; transform: translateY(6px) scale(.985); transition: opacity var(--pui-calendar-duration) var(--pui-ease-standard), transform var(--pui-calendar-duration) var(--pui-ease-standard), background-color var(--pui-calendar-duration) var(--pui-ease-standard), border-color var(--pui-calendar-duration) var(--pui-ease-standard); }
.pui-calendar-preview-host.is-popup .pui-calendar-preview { max-width: 340px; }
.pui-calendar-preview-host.is-active .pui-calendar-preview { opacity: 1; transform: translateY(0) scale(1); }
.pui-calendar-preview-host.is-active .pui-calendar-preview__overlay { opacity: 1; }
.pui-calendar-preview-host.is-active .pui-calendar-preview.is-disabled { opacity: .56; pointer-events: none; }
.pui-calendar-preview__header { display: flex; min-height: 54px; box-sizing: border-box; flex-direction: column; justify-content: center; gap: var(--pui-preview-space-sm); padding: var(--pui-preview-content-gap) var(--pui-preview-space-step-12); border-bottom: 1px solid var(--border); }
.pui-calendar-preview__heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--pui-preview-space-sm); }
.pui-calendar-preview__switch { display: grid; min-width: 0; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: var(--pui-preview-space-sm); }
.pui-calendar-preview__heading > strong { min-width: 0; font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-bold); line-height: var(--pui-line-height-body-medium); overflow-wrap: anywhere; }
.pui-calendar-preview__switch em { min-width: 0; color: var(--muted); font-size: var(--pui-font-size-caption); font-style: normal; text-align: center; }
.pui-calendar-preview__body { position: relative; min-height: 254px; overflow: hidden; }
.pui-calendar-preview__content { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--pui-calendar-duration) var(--pui-ease-standard), transform var(--pui-calendar-duration) var(--pui-ease-standard), visibility 0s linear var(--pui-calendar-duration); }
.pui-calendar-preview__content.is-active { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.pui-calendar-preview__week,
.pui-calendar-preview__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); box-sizing: border-box; padding: 0 var(--pui-preview-content-gap); }
.pui-calendar-preview__week { padding-top: var(--pui-preview-content-gap); color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-body-medium); text-align: center; }
.pui-calendar-preview__days { padding-bottom: var(--pui-preview-content-gap); }
.pui-calendar-preview__days button { position: relative; min-width: 0; height: 36px; padding: 0; color: var(--text); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); cursor: pointer; background: transparent; border: 0; border-radius: var(--pui-preview-radius-step-4); transition: color var(--pui-calendar-duration) var(--pui-ease-standard), background-color var(--pui-calendar-duration) var(--pui-ease-standard), opacity var(--pui-calendar-duration) var(--pui-ease-standard), transform var(--pui-calendar-duration) var(--pui-ease-standard); }
.pui-calendar-preview__days button.is-other { color: var(--subtle); opacity: .56; }
.pui-calendar-preview__days button.is-between { background: var(--surface-soft); border-radius: 0; }
.pui-calendar-preview__days button.is-selected { z-index: 1; color: var(--surface-solid); font-weight: var(--pui-font-weight-bold); background: var(--text); }
.pui-calendar-preview__days button.is-start { border-radius: var(--pui-preview-radius-step-5) 0 0 var(--pui-preview-radius-step-5); }
.pui-calendar-preview__days button.is-end { border-radius: 0 var(--pui-preview-radius-step-5) var(--pui-preview-radius-step-5) 0; }
.pui-calendar-preview__days button.is-start.is-end { border-radius: var(--pui-preview-radius-step-5); }
.pui-calendar-preview__days button.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1px var(--text); }
.pui-calendar-preview__days button:disabled { cursor: default; opacity: .28; }
.pui-calendar-preview__days button:not(:disabled):active { transform: scale(.9); }
.pui-calendar-preview__state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--pui-preview-content-gap); padding: var(--pui-preview-space-step-12); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity var(--pui-calendar-duration) var(--pui-ease-standard), transform var(--pui-calendar-duration) var(--pui-ease-standard), visibility 0s linear var(--pui-calendar-duration); }
.pui-calendar-preview__state.is-error { flex-direction: column; text-align: center; }
.pui-calendar-preview__state.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.pui-calendar-preview__state > strong { font-size: var(--pui-font-size-caption); }
.pui-calendar-preview__footer { display: flex; box-sizing: border-box; justify-content: flex-end; gap: var(--pui-preview-content-gap); padding: var(--pui-preview-content-gap) var(--pui-preview-space-step-12) var(--pui-preview-space-step-12); border-top: 1px solid var(--border); }
.pui-calendar-preview__closed { display: grid; gap: var(--pui-preview-content-gap); }
.pui-calendar-preview__feedback { display: grid; min-width: 0; gap: var(--pui-preview-space-step-4); color: var(--muted); font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-medium); overflow-wrap: anywhere; }
.pui-calendar-preview__feedback strong { color: var(--text); font-size: var(--pui-font-size-body-medium); }
@media (prefers-reduced-motion: reduce) {
  .pui-calendar-preview-host *, .pui-calendar-preview-host { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Dedicated equivalents for native display primitives. */
.pui-divider-showcase,
.pui-grid-showcase {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-section-gap);
}

body .app-shell[data-page-mode] .preview-stage .preview-device__component-layout > .pui-divider-contract-showcase.demo-section {
  gap: var(--pui-preview-section-gap);
}

.pui-divider-demo-group {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}

.pui-divider-demo-group > header {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
}

.pui-divider-demo-group > header strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.pui-divider-demo-group > header span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.pui-divider-preview {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

.pui-divider-preview__line {
  flex: 1;
  min-width: 0;
  height: 1px;
  background: var(--pui-divider-color);
}

.pui-divider-preview.is-dashed > .pui-divider-preview__line {
  height: 0;
  background: transparent;
  border-top: 1px dashed var(--pui-divider-color);
}

.pui-divider-preview__content {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 var(--pui-preview-space-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-divider-preview--left > .pui-divider-preview__line--before,
.pui-divider-preview--right > .pui-divider-preview__line--after {
  flex: 0 0 16px;
}

.pui-divider-preview--vertical {
  display: inline-flex;
  flex: 0 0 1px;
  width: 1px;
  height: 32px;
  min-height: 0;
  vertical-align: middle;
}

.pui-divider-preview--vertical > .pui-divider-preview__line {
  flex: 0 0 1px;
  width: 1px;
  height: 100%;
  background: var(--pui-divider-color);
}

.pui-divider-preview--vertical.is-dashed > .pui-divider-preview__line {
  width: 0;
  height: 100%;
  background: transparent;
  border-top: 0;
  border-left: 1px dashed var(--pui-divider-color);
}

.pui-divider-inline-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-content-gap);
}

.pui-grid-preview {
  width: 100%;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-grid-preview:not(.is-bordered) { border-color: transparent; }
.pui-grid-preview__body { display: grid; min-width: 0; min-height: 90px; }
.pui-grid-preview__viewport,
.pui-grid-preview__state { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity var(--pui-grid-duration, 500ms) var(--ease-standard), transform var(--pui-grid-duration, 500ms) var(--ease-standard), visibility 0s linear var(--pui-grid-duration, 500ms); }
.pui-grid-preview__viewport.is-active,
.pui-grid-preview__state.is-active { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.pui-grid-preview__viewport { overflow-x: auto; overflow-y: hidden; }
.pui-grid-preview__content { display: grid; min-width: 100%; }
.pui-grid-preview.is-horizontal .pui-grid-preview__content { width: max-content; }

body .app-shell[data-page-mode] .preview-stage .pui-grid-preview__content > .pui-grid-preview__item.pui-button-preview {
  display: flex;
  min-width: 0;
  min-height: 82px;
  height: auto;
  gap: 0;
  padding: var(--pui-preview-space-step-12) var(--pui-preview-content-gap);
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-caption);
  text-align: center;
  background: var(--surface-solid);
  border: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-grid-preview__content > .pui-grid-preview__item .pui-button-preview__content { width: 100%; overflow: visible; white-space: normal; }
.pui-grid-preview__item-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pui-preview-space-step-7); width: 100%; min-width: 0; }
.pui-grid-preview.is-bordered .pui-grid-preview__item { box-shadow: inset -1px -1px 0 var(--border); }
.pui-grid-preview--left .pui-grid-preview__item-content { align-items: flex-start; text-align: left; }
.pui-grid-preview__item { transition: background-color var(--pui-grid-duration, 500ms) var(--ease-standard), opacity var(--pui-grid-duration, 500ms) var(--ease-standard); }
.pui-grid-preview__item:not(:disabled):active { background: var(--surface-soft); }
.pui-grid-preview__item:focus-visible { z-index: 1; outline: 2px solid var(--text); outline-offset: -2px; }
.pui-grid-preview__item:disabled { opacity: 0.48; cursor: not-allowed; }
.pui-grid-preview__words { display: flex; flex-direction: column; gap: var(--pui-preview-space-step-2); max-width: 100%; min-width: 0; }
.pui-grid-preview__text,
.pui-grid-preview__description { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.pui-grid-preview__description { color: var(--muted); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-regular); line-height: var(--pui-line-height-caption); }
.pui-grid-preview__item.is-primary .pui-icon { color: var(--brand); }
.pui-grid-preview__item.is-success .pui-icon { color: var(--success); }
.pui-grid-preview__item.is-warning .pui-icon { color: var(--warning); }
.pui-grid-preview__item.is-danger .pui-icon { color: var(--danger); }
.pui-grid-preview__badge-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.pui-grid-preview__badge-wrap > .pui-badge-demo { top: calc(0px - var(--pui-preview-space-step-7)); right: calc(0px - var(--pui-preview-space-normal)); }
.pui-grid-preview__state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pui-preview-content-gap); min-height: 90px; padding: var(--pui-preview-space-step-12); color: var(--muted); text-align: center; }
.pui-grid-preview__loading { display: inline-flex; align-items: center; gap: var(--pui-preview-content-gap); }
.pui-grid-preview__state .pui-empty-preview.is-embedded { width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.pui-grid-preview.is-compact .pui-grid-preview__item.pui-button-preview { min-height: 72px; padding: var(--pui-preview-content-gap); }
.pui-grid-showcase__stack,
.pui-grid-showcase__states { display: grid; gap: var(--pui-preview-content-gap); }
.pui-grid-showcase__states { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.icon-card {
  transition: background-color var(--pui-duration-normal, 500ms) ease, color var(--pui-duration-normal, 500ms) ease, box-shadow var(--pui-duration-normal, 500ms) ease;
}

.icon-card.is-selected {
  color: var(--surface-solid);
  background: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

.icon-card.is-selected .icon-card__category,
.icon-card.is-selected .icon-card__name {
  color: currentColor;
}

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-grid-preview__content > .pui-grid-preview__item.pui-button-preview { min-height: 72px; padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-5); }
  body .app-shell[data-page-mode] .preview-stage .pui-grid-preview__content > .pui-grid-preview__item .pui-button-preview__content { max-width: 100%; }
  .pui-grid-showcase__states { grid-template-columns: 1fr; }
}

/* The documentation shell becomes a single-column working surface on phones. */
@media (max-width: 700px) {
  html,
  body,
  .app-shell {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .topbar {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12);
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand__sub,
  .topbar__nav,
  .visual-toggle__text,
  .theme-toggle__icon {
    display: none;
  }

  .topbar__controls {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    gap: var(--pui-preview-space-xxs);
    overflow: visible;
  }

  .visual-toggle,
  .theme-toggle {
    width: 30px;
    padding: 0;
    justify-content: center;
  }

  .workspace {
    display: block !important;
    min-width: 0;
  }

  .sidebar {
    position: static;
    display: block !important;
    height: min(42dvh, var(--pui-site-mobile-catalog-max-height));
    padding: var(--pui-preview-space-step-12);
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .component-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pui-preview-section-gap);
    height: calc(100% - var(--pui-site-mobile-catalog-search-height));
    margin-top: var(--pui-preview-space-step-12);
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: var(--pui-preview-content-gap);
  }

  .component-group {
    min-width: 0;
    margin: 0;
  }

  .sidebar {
    display: none !important;
  }

  .main,
  .inspector {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
  }

  .preview-toolbar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pui-preview-space-normal);
    min-height: 0;
    padding: var(--pui-preview-space-step-16) var(--pui-preview-space-step-12) var(--pui-preview-space-step-12);
  }

  .preview-toolbar h1 {
    font-size: var(--pui-font-size-title-large);
    line-height: var(--pui-line-height-title-large);
  }

  .toolbar-actions {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 32px;
    gap: var(--pui-preview-space-step-7);
    width: 100%;
  }

  .device-select {
    width: 100%;
    min-width: 0;
  }

  .preview-stage {
    min-height: 0;
    padding: var(--pui-preview-space-step-12);
  }

  .preview-canvas,
  .preview-canvas__body {
    width: 100%;
    min-width: 0;
  }

  .preview-canvas__body {
    padding: var(--pui-preview-space-lg) var(--pui-preview-space-normal);
  }

  .phone {
    width: 100%;
    min-width: 0;
    min-height: 548px;
    padding: var(--pui-preview-space-step-12);
    border-width: 1px;
    border-radius: var(--pui-preview-radius-step-10);
  }

  .phone__content {
    min-height: 474px;
  }

  .inspector {
    padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12) var(--pui-preview-space-xxl);
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .inspector .props-panel {
    grid-template-columns: 1fr;
  }
}

/* Keep the documentation rail visible on the common 1280px desktop viewport. */
@media (min-width: 1221px) {
  .workspace {
    grid-template-columns: 238px minmax(0, 1fr) 304px;
  }

  .inspector {
    position: sticky;
    grid-column: auto;
    grid-row: auto;
    width: auto;
    height: calc(100vh - 57px);
    padding: var(--pui-preview-space-step-24) var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-42);
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}

.api-reference {
  margin-top: var(--pui-preview-space-xxl);
  padding-top: var(--pui-preview-panel-padding-spacious);
  border-top: 1px solid var(--border);
}

.api-reference__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--pui-preview-space-step-12);
  margin-bottom: var(--pui-preview-space-normal);
}

.api-reference__head span {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.api-reference__head h3 {
  margin: var(--pui-preview-space-step-3) 0 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-semibold);
}

.api-reference__head strong {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.api-reference__section {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
  margin-top: var(--pui-preview-section-gap);
}

.api-reference__section:first-of-type { margin-top: 0; }

.api-reference__section-head {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: var(--pui-preview-space-step-12);
}

.api-reference__section-head > div { display: grid; min-width: 0; gap: var(--pui-preview-space-xxs); }

.api-reference__section-head h4,
.api-reference__section-head p { margin: 0; }

.api-reference__section-head h4 {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.api-reference__section-head p,
.api-reference__section-head strong {
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

.api-reference__section-head strong { flex: 0 0 auto; }

.api-table {
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-small);
}

.api-table__row {
  display: grid;
  grid-template-columns: 112px 104px 108px minmax(180px, 0.8fr) minmax(240px, 1.4fr);
  gap: var(--pui-preview-space-step-12);
  align-items: start;
  min-height: 48px;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-step-12);
  border-top: 1px solid var(--border);
}

.api-table__row:first-child {
  border-top: 0;
}

.api-table__row--head {
  min-height: 38px;
  color: var(--subtle);
  background: var(--surface-soft);
  border-top: 0;
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
  font-weight: var(--pui-font-weight-semibold);
}

.api-table__row code {
  min-width: 0;
  color: var(--text);
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
  overflow-wrap: anywhere;
  white-space: normal;
}

.api-table__row > span {
  min-width: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
  overflow-wrap: anywhere;
  white-space: normal;
}

.api-table__row .api-type {
  color: var(--muted);
}

.api-table__row .api-options {
  overflow-wrap: anywhere;
  color: var(--text);
}

.api-table__row > span:last-child {
  color: var(--subtle);
}

.api-table--events .api-table__row {
  grid-template-columns: 190px 240px minmax(280px, 1fr);
}

.api-table--methods .api-table__row {
  grid-template-columns: 190px 160px minmax(360px, 1fr);
}

.api-table--slots .api-table__row {
  grid-template-columns: 190px minmax(360px, 1fr);
}

.api-table__row [role="cell"]::before { display: none; }

.pui-button-showcase {
  gap: var(--pui-preview-space-step-12);
}

.pui-showcase-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-xxs) var(--pui-preview-space-xxs) 0;
}

.pui-showcase-label strong {
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.pui-showcase-label span {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
}

.pui-button-showcase__stack,
.pui-button-showcase__grid {
  display: grid;
  gap: var(--pui-preview-content-gap);
}

.pui-button-showcase__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pui-button-showcase__grid .pui-button {
  min-width: 0;
}

.pui-button-showcase__grid .pui-button--large {
  grid-column: 1 / -1;
}

.pui-input-showcase {
  display: grid;
  gap: 0;
}

.pui-input-showcase > .pui-showcase-section {
  display: grid;
  gap: var(--pui-preview-space-step-12);
  width: 100%;
  min-width: 0;
}

.pui-input-showcase > .pui-showcase-section + .pui-showcase-section {
  padding-top: var(--pui-preview-space-step-18);
}

.pui-input-showcase > .pui-showcase-section > h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

.pui-input-showcase__stack {
  display: grid;
  gap: var(--pui-preview-space-step-12);
  min-width: 0;
}

.pui-field__control {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pui-preview-content-gap);
  align-items: center;
  min-width: 0;
}

.pui-field--focus {
  border-color: var(--text);
  outline: 2px solid color-mix(in srgb, var(--text) 14%, transparent);
  outline-offset: 1px;
}

.pui-field--error {
  border-color: #dc2626;
}

.pui-field--error em {
  color: #b91c1c;
}

.inspector .props-panel::before {
  content: '调整右侧控件，预览与 WXML 参数会同步更新';
  display: block;
  margin-bottom: var(--pui-preview-space-xxs);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.inspector .prop-control {
  min-width: 0;
}

.inspector .prop-control > span {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .api-table__row,
  .api-table--events .api-table__row,
  .api-table--methods .api-table__row,
  .api-table--slots .api-table__row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pui-preview-content-gap);
  }

  .api-table__row--head { display: none; }

  .api-table__row [role="cell"]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--pui-preview-space-xxs);
    color: var(--subtle);
    font-family: var(--pui-font-family-sans);
    font-size: var(--pui-font-size-body-small);
    font-weight: var(--pui-font-weight-semibold);
    line-height: var(--pui-line-height-body-small);
  }
}

/* Keep the Steps scenario navigation visibly selected after the shared text
   Button baseline is applied later in this sheet. This is a navigational tab,
   not a passive text action. */
body .app-shell[data-page-mode] .preview-stage .pui-steps-showcase .pui-steps-scenario__tab.pui-button-preview.is-active.pui-button--text {
  color: var(--surface-solid);
  background: var(--text);
  border-color: var(--text);
  box-shadow: inset 2px 0 0 var(--text);
}

/* PoemUI 月下成行：月亮是首句停顿，三行是可组合内容的节奏。
   外层仅是应用入口容器；品牌标记本身保持黑白、无阴影、无渐变。 */
.brand__mark {
  display: grid;
  place-items: center;
  width: var(--pui-preview-space-step-28);
  height: var(--pui-preview-space-step-28);
  color: var(--page);
  background: var(--brand);
  border: 0;
  border-radius: var(--pui-preview-radius-small);
  box-shadow: none;
}

.brand__glyph {
  display: block;
  width: var(--pui-preview-space-step-18);
  height: var(--pui-preview-space-step-18);
}

/* ActionSheet TDesign final H5 contract: the only visible surface is the
   bottom sheet itself; the canvas and its full-device overlay stay transparent. */
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-showcase,
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-showcase__canvas {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-showcase__canvas {
  position: relative;
  isolation: isolate;
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-showcase__canvas > .pui-button-preview {
  position: absolute;
  z-index: 0;
  top: var(--pui-preview-content-gap);
  left: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: rgba(9, 9, 11, .42);
  border: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity var(--pui-action-sheet-preview-duration) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview.is-active + .pui-sr-only,
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__overlay + .pui-action-sheet-preview.is-active { opacity: 1; }

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__overlay:has(+ .pui-action-sheet-preview.is-active) { opacity: 1; }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__overlay.is-blurred { -webkit-backdrop-filter: var(--pui-overlay-blur); backdrop-filter: var(--pui-overlay-blur); }

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-width: 0;
  max-height: min(82%, 500px);
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--text);
  pointer-events: none;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-large) var(--pui-preview-radius-large) 0 0;
  box-shadow: var(--shadow-edge-bottom);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--pui-action-sheet-preview-duration) var(--pui-ease-standard), transform var(--pui-action-sheet-preview-duration) var(--pui-ease-standard), background-color var(--pui-action-sheet-preview-duration) var(--pui-ease-standard), border-color var(--pui-action-sheet-preview-duration) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__description {
  margin: 0;
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-lg) var(--pui-preview-space-sm);
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
  text-align: center;
  overflow-wrap: anywhere;
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__items {
  display: grid;
  min-width: 0;
  padding: 0 var(--pui-preview-space-normal);
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview--grid .pui-action-sheet-preview__items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
  padding-bottom: var(--pui-preview-space-normal);
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__item {
  min-width: 0;
  min-height: 46px;
  justify-content: flex-start;
  padding: var(--pui-preview-space-sm) var(--pui-preview-space-xs);
  border-radius: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__item + .pui-action-sheet-preview__item { border-top: 1px solid var(--border); }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview--grid .pui-action-sheet-preview__item { min-height: 78px; flex-direction: column; justify-content: center; padding: var(--pui-preview-space-xs); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-small); text-align: center; }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview--grid .pui-action-sheet-preview__item + .pui-action-sheet-preview__item { border-top: 1px solid var(--border); }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview--align-center .pui-action-sheet-preview__item { justify-content: center; text-align: center; }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__item-copy { display: grid; min-width: 0; gap: var(--pui-preview-space-step-1); }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__item-copy strong,
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__item-copy small { display: block; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__item-copy strong { color: currentColor; font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-small); }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__item-copy small { color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview--grid .pui-action-sheet-preview__item-copy small { display: none; }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__pager { display: flex; align-items: center; justify-content: center; gap: var(--pui-preview-content-gap); padding: 0 var(--pui-preview-space-normal) var(--pui-preview-space-sm); color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__footer { margin-top: var(--pui-preview-space-sm); padding: var(--pui-preview-space-xs) var(--pui-preview-space-normal) max(var(--pui-preview-space-normal), env(safe-area-inset-bottom)); background: var(--surface-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__footer .pui-button-preview { width: 100%; min-height: 42px; }

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview,
  body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview__overlay { transition-duration: 1ms; }
}

/* Popover mirrors the lean anchor/content contract.  The visible trigger is a
   PUI Button; the transparent outside layer is the component's platform root. */
body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase {
  position: relative;
  box-sizing: border-box;
  min-height: var(--pui-preview-device-height);
  padding: var(--pui-preview-panel-padding);
}
body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__section { position: relative; z-index: 2; display: grid; gap: var(--pui-preview-content-gap); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__section > h3 { margin: 0; color: var(--text); font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-body-medium); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__section--hint { position: absolute; right: var(--pui-preview-panel-padding); bottom: var(--pui-preview-panel-padding); left: var(--pui-preview-panel-padding); color: var(--muted); pointer-events: none; }
body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__section--hint > p { margin: 0; font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-small); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__canvas { position: absolute; inset: 0; display: grid; place-items: center; min-height: 0; overflow: visible; }
body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__reference { position: relative; z-index: 3; }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__overlay { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview { position: absolute; z-index: 4; box-sizing: border-box; max-width: calc(100% - 28px); padding: var(--pui-preview-panel-padding); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-small); box-shadow: var(--shadow); opacity: 0; pointer-events: none; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: opacity var(--pui-popover-preview-duration) var(--pui-ease-standard), transform var(--pui-popover-preview-duration) var(--pui-ease-standard), background-color var(--pui-popover-preview-duration) var(--pui-ease-standard), border-color var(--pui-popover-preview-duration) var(--pui-ease-standard); overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview.is-active { opacity: 1; pointer-events: auto; }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--dark { color: var(--pui-text-on-inverse); background: var(--pui-bg-inverse); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--light { color: var(--text); background: var(--surface-solid); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--brand { color: var(--brand); background: var(--brand-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--success { color: var(--success); background: var(--success-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--warning { color: var(--warning); background: var(--warning-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--error { color: var(--danger); background: var(--danger-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__content { display: block; font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); white-space: pre-wrap; }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top { bottom: calc(50% + var(--pui-preview-space-step-24)); left: 50%; transform: translate(-50%, 8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom { top: calc(50% + var(--pui-preview-space-step-24)); left: 50%; transform: translate(-50%, -8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left { top: 50%; right: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(8px, -50%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right { top: 50%; left: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(-8px, -50%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-start { bottom: calc(50% + var(--pui-preview-space-step-24)); left: 50%; transform: translate(-16%, 8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-end { bottom: calc(50% + var(--pui-preview-space-step-24)); right: 50%; transform: translate(16%, 8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-start { top: calc(50% + var(--pui-preview-space-step-24)); left: 50%; transform: translate(-16%, -8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-end { top: calc(50% + var(--pui-preview-space-step-24)); right: 50%; transform: translate(16%, -8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-start { top: 50%; right: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(8px, -16%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-end { bottom: 50%; right: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(8px, 16%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-start { top: 50%; left: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(-8px, -16%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-end { bottom: 50%; left: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(-8px, 16%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top.is-active { transform: translate(-50%, 0) scale(1); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom.is-active { transform: translate(-50%, 0) scale(1); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left.is-active,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right.is-active,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-start.is-active,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-end.is-active,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-start.is-active,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-end.is-active,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-start.is-active,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-end.is-active,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-start.is-active,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-end.is-active { transform: translate(0, 0) scale(1); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--arrow::before { position: absolute; width: 10px; height: 10px; content: ''; background: inherit; border: inherit; transform: rotate(45deg); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top::before,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-start::before,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-end::before { bottom: calc(0px - var(--pui-preview-space-step-6)); left: 50%; border-top: 0; border-left: 0; margin-left: calc(0px - var(--pui-preview-space-step-5)); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom::before,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-start::before,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-end::before { top: calc(0px - var(--pui-preview-space-step-6)); left: 50%; border-right: 0; border-bottom: 0; margin-left: calc(0px - var(--pui-preview-space-step-5)); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left::before,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-start::before,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-end::before { top: 50%; right: calc(0px - var(--pui-preview-space-step-6)); border-bottom: 0; border-left: 0; margin-top: calc(0px - var(--pui-preview-space-step-5)); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right::before,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-start::before,body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-end::before { top: 50%; left: calc(0px - var(--pui-preview-space-step-6)); border-top: 0; border-right: 0; margin-top: calc(0px - var(--pui-preview-space-step-5)); }

/* Tag is a compact display primitive. These final rules mirror the native
   44/48/58rpx geometry and keep shape/max-width/Close behavior authoritative
   after the legacy preview normalization layers above. */
body .app-shell[data-page-mode] .preview-stage .pui-tag {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-4);
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--small {
  height: var(--pui-preview-space-step-22);
  min-height: var(--pui-preview-space-step-22);
  padding: 0 var(--pui-preview-space-step-6);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--medium {
  height: var(--pui-preview-space-step-24);
  min-height: var(--pui-preview-space-step-24);
  padding: 0 var(--pui-preview-content-gap);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--large {
  height: var(--pui-preview-space-step-29);
  min-height: var(--pui-preview-space-step-29);
  padding: 0 var(--pui-preview-space-step-10);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--square {
  border-radius: var(--pui-preview-radius-small);
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--round {
  border-radius: var(--pui-preview-radius-round);
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--mark {
  border-radius: var(--pui-preview-radius-small) var(--pui-preview-radius-round) var(--pui-preview-radius-round) var(--pui-preview-radius-small);
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--primary { color: var(--brand); background: var(--brand-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-tag--success { color: var(--success); background: var(--success-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-tag--warning { color: var(--warning); background: var(--warning-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-tag--danger { color: var(--danger); background: var(--danger-soft); }

/* Light tags are filled semantic chips in the preview. Keep the fill
   perceptible in the neutral PoemUI palette while leaving outline/dark as
   the explicit contrast variants. */
body .app-shell[data-page-mode] .preview-stage .pui-tag--default.pui-tag--light {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, var(--surface-solid));
  border-color: transparent;
}
body .app-shell[data-page-mode] .preview-stage .pui-tag--primary.pui-tag--light {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-solid));
  border-color: transparent;
}
body .app-shell[data-page-mode] .preview-stage .pui-tag--success.pui-tag--light {
  background: color-mix(in srgb, var(--success) 14%, var(--surface-solid));
  border-color: transparent;
}
body .app-shell[data-page-mode] .preview-stage .pui-tag--warning.pui-tag--light {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-solid));
  border-color: transparent;
}
body .app-shell[data-page-mode] .preview-stage .pui-tag--danger.pui-tag--light {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-solid));
  border-color: transparent;
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--outline {
  background: transparent;
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--dark {
  color: var(--page);
  background: var(--text);
  border-color: transparent;
}

body .app-shell[data-page-mode] .preview-stage .pui-tag--primary.pui-tag--dark { color: #fff; background: var(--brand); }
body .app-shell[data-page-mode] .preview-stage .pui-tag--success.pui-tag--dark { color: #fff; background: var(--success); }
body .app-shell[data-page-mode] .preview-stage .pui-tag--warning.pui-tag--dark { color: #18181b; background: var(--warning); }
body .app-shell[data-page-mode] .preview-stage .pui-tag--danger.pui-tag--dark { color: #fff; background: var(--danger); }

body .app-shell[data-page-mode] .preview-stage .pui-tag.is-disabled {
  opacity: .56;
}

body .app-shell[data-page-mode] .preview-stage .pui-tag__content {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-tag__close {
  display: inline-flex;
  flex: 0 0 var(--pui-preview-space-lg);
  width: var(--pui-preview-space-lg);
  height: var(--pui-preview-space-lg);
  align-items: center;
  justify-content: center;
}

body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-tag:not(.pui-tag--outline):not(.pui-tag--dark) {
  background-color: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.pui-tag-showcase {
  display: grid;
  gap: var(--pui-preview-section-gap);
  min-width: 0;
}

.pui-tag-showcase__row,
.pui-tag-showcase__grid {
  display: flex;
  min-width: 0;
  align-items: center;
  column-gap: var(--pui-preview-content-gap);
  row-gap: var(--pui-preview-space-step-10);
  flex-wrap: wrap;
}

.pui-tag-showcase__row.is-align-end { align-items: flex-end; }

.pui-tag-showcase__grid {
  align-content: start;
}
.pui-tag-showcase__grid + .pui-tag-showcase__row,
.pui-tag-showcase__row + .pui-tag-showcase__row {
  margin-top: var(--pui-preview-space-step-10);
}
.pui-tag-showcase__parent-state { display: flex; align-items: center; }

/* Form and feedback capability matrices. */
.pui-switch-showcase,
.pui-textarea-showcase,
.pui-form-showcase,
.pui-stepper-showcase,
.pui-slider-showcase,
.pui-toast-showcase,
.pui-dialog-showcase,
.pui-progress-showcase {
  gap: var(--pui-preview-space-step-12);
}

.pui-switch-state-grid {
  display: grid;
  gap: var(--pui-preview-content-gap);
}

.pui-switch-state-grid .pui-cell {
  min-height: 52px;
}

.pui-switch-state-grid .pui-cell > em {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 38px;
}

.pui-switch {
  width: 36px;
  height: 21px;
  padding: var(--pui-preview-space-xxs);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
}

.pui-switch i {
  top: var(--pui-preview-space-xxs);
  left: var(--pui-preview-space-xxs);
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: none;
}

.pui-switch.is-checked {
  background: var(--text);
  border-color: var(--text);
}

.pui-switch.is-checked i {
  left: var(--pui-preview-space-step-17);
  border-color: var(--text);
}

.pui-switch--small {
  width: 30px;
  height: 18px;
}

.pui-switch--small i {
  width: 12px;
  height: 12px;
}

.pui-switch--small.is-checked i {
  left: var(--pui-preview-space-lg);
}

.pui-switch--large {
  width: 44px;
  height: 25px;
}

.pui-switch--large i {
  width: 18px;
  height: 18px;
}

.pui-switch--large.is-checked i {
  left: var(--pui-preview-space-step-21);
}

.pui-switch.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pui-switch.is-loading i {
  background: transparent;
  border-color: transparent;
}

.pui-switch .pui-loading {
  width: 10px;
  height: 10px;
  border-width: 1px;
}

.pui-switch-preview {
  --pui-switch-preview-duration: var(--pui-duration-normal);
  --pui-switch-preview-ease: var(--ease-standard);
  display: inline-flex;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  min-width: 0;
  color: var(--text);
}

.pui-switch-preview.is-block {
  display: flex;
  width: 100%;
}

.pui-switch-preview__control {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  padding: 0;
  overflow: hidden;
  color: var(--muted);
  font: inherit;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  cursor: pointer;
  transition: color var(--pui-switch-preview-duration) var(--pui-switch-preview-ease), background-color var(--pui-switch-preview-duration) var(--pui-switch-preview-ease), border-color var(--pui-switch-preview-duration) var(--pui-switch-preview-ease), opacity var(--pui-switch-preview-duration) var(--pui-switch-preview-ease);
}

.pui-switch-preview__control:focus-visible,
.pui-switch-preview__label-target:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 24%, transparent);
  outline-offset: 2px;
}

.pui-switch-preview__thumb {
  position: absolute;
  top: var(--pui-preview-space-step-3);
  left: var(--pui-preview-space-step-3);
  display: grid;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--text);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: var(--shadow-soft);
  transform: translateX(0);
  transition: color var(--pui-switch-preview-duration) var(--pui-switch-preview-ease), background-color var(--pui-switch-preview-duration) var(--pui-switch-preview-ease), border-color var(--pui-switch-preview-duration) var(--pui-switch-preview-ease), transform var(--pui-switch-preview-duration) var(--pui-switch-preview-ease);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.pui-switch-preview.is-motion-prime .pui-switch-preview__control,
.pui-switch-preview.is-motion-prime .pui-switch-preview__thumb,
.pui-switch-preview.is-motion-prime .pui-switch-preview__status {
  transition: none !important;
}

.pui-switch-preview.is-checked .pui-switch-preview__control {
  color: var(--page);
  background: var(--text);
  border-color: var(--text);
}

.pui-switch-preview.is-checked .pui-switch-preview__thumb {
  color: var(--text);
  transform: translateX(18px);
}

.pui-switch-preview__status {
  position: absolute;
  inset: 0 var(--pui-preview-space-step-5) 0 var(--pui-preview-space-step-24);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-none);
  white-space: nowrap;
  transition: right var(--pui-switch-preview-duration) var(--pui-switch-preview-ease), left var(--pui-switch-preview-duration) var(--pui-switch-preview-ease);
}

.pui-switch-preview.is-checked .pui-switch-preview__status {
  right: var(--pui-preview-space-step-24);
  left: var(--pui-preview-space-step-5);
}

.pui-switch-preview.is-label .pui-switch-preview__control {
  width: 64px;
}

.pui-switch-preview.is-label.is-checked .pui-switch-preview__thumb {
  transform: translateX(36px);
}

.pui-switch-preview__label-target {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.pui-switch-preview__label-target strong {
  min-width: 0;
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-label);
}

.pui-switch-preview--small .pui-switch-preview__control {
  width: 38px;
  height: 22px;
}

.pui-switch-preview--small .pui-switch-preview__thumb {
  top: var(--pui-preview-space-xxs);
  left: var(--pui-preview-space-xxs);
  width: 16px;
  height: 16px;
}

.pui-switch-preview--small.is-checked .pui-switch-preview__thumb {
  transform: translateX(16px);
}

.pui-switch-preview--small.is-label .pui-switch-preview__control {
  width: 54px;
}

.pui-switch-preview--small.is-label.is-checked .pui-switch-preview__thumb {
  transform: translateX(32px);
}

.pui-switch-preview--small .pui-switch-preview__status {
  right: var(--pui-preview-space-xs);
  left: var(--pui-preview-space-xl);
  font-size: var(--pui-font-size-caption);
}

.pui-switch-preview--small.is-checked .pui-switch-preview__status {
  right: var(--pui-preview-space-xl);
  left: var(--pui-preview-space-xs);
}

.pui-switch-preview--large .pui-switch-preview__control {
  width: 54px;
  height: 32px;
}

.pui-switch-preview--large .pui-switch-preview__thumb {
  top: var(--pui-preview-space-step-3);
  left: var(--pui-preview-space-step-3);
  width: 24px;
  height: 24px;
}

.pui-switch-preview--large.is-checked .pui-switch-preview__thumb {
  transform: translateX(22px);
}

.pui-switch-preview--large.is-label .pui-switch-preview__control {
  width: 74px;
}

.pui-switch-preview--large.is-label.is-checked .pui-switch-preview__thumb {
  transform: translateX(42px);
}

.pui-switch-preview--large .pui-switch-preview__status {
  right: var(--pui-preview-space-sm);
  left: var(--pui-preview-space-xxl);
  font-size: var(--pui-font-size-caption);
}

.pui-switch-preview--large.is-checked .pui-switch-preview__status {
  right: var(--pui-preview-space-xxl);
  left: var(--pui-preview-space-sm);
}

.pui-switch-preview.is-readonly .pui-switch-preview__control {
  border-style: dashed;
}

.pui-switch-preview.is-disabled,
.pui-switch-preview.is-loading {
  opacity: 0.48;
}

.pui-switch-preview.is-disabled .pui-switch-preview__label-target,
.pui-switch-preview.is-disabled .pui-switch-preview__control,
.pui-switch-preview.is-loading .pui-switch-preview__label-target,
.pui-switch-preview.is-loading .pui-switch-preview__control {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .pui-switch-preview__control,
  .pui-switch-preview__thumb,
  .pui-switch-preview__status {
    transition-duration: 1ms !important;
  }
}

.pui-switch-showcase__stack {
  display: grid;
  gap: var(--pui-preview-content-gap);
}

.pui-switch-showcase {
  gap: var(--pui-section-gap);
}

.pui-textarea-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pui-preview-space-step-7);
}

.pui-textarea-showcase .pui-field textarea {
  grid-column: 1 / -1;
  min-height: 90px;
  padding: 0;
  line-height: var(--pui-line-height-body-medium);
}

.pui-textarea-showcase .pui-field--focus {
  border-color: var(--text);
}

.pui-textarea-showcase .pui-field--error {
  border-color: #dc2626;
}

.pui-form-preview,
.pui-form-preview__fields,
.pui-form-showcase__stack {
  display: grid;
  min-width: 0;
}

.pui-form-preview {
  gap: var(--pui-section-gap);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pui-form-preview__fields,
.pui-form-showcase__stack {
  gap: var(--pui-preview-content-gap);
}

.pui-form-preview__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
}

.pui-form-preview__actions .pui-button {
  width: 100%;
  min-width: 0;
}

.pui-form-preview__result {
  display: flex;
  min-width: 0;
  align-items: flex-start;
}

.pui-form-preview__result .pui-tag {
  max-width: 100%;
  height: auto;
  white-space: normal;
  text-align: left;
  transition-duration: var(--pui-form-duration, var(--pui-duration-normal));
}

.pui-form-showcase .pui-field {
  transition-duration: var(--pui-form-duration, var(--pui-duration-normal));
}

@media (prefers-reduced-motion: reduce) {
  .pui-form-showcase .pui-field,
  .pui-form-preview__result .pui-tag {
    transition-duration: 1ms !important;
  }
}

.pui-stepper-contract-showcase { gap: var(--pui-preview-section-gap); }

.pui-stepper-demo-group {
  display: grid;
  gap: var(--pui-preview-space-normal);
  min-width: 0;
}

.pui-stepper-demo-group + .pui-stepper-demo-group { margin-top: var(--pui-preview-section-gap); }

.pui-stepper-demo-group > header {
  display: grid;
  gap: var(--pui-preview-space-xxs);
}

.pui-stepper-demo-group > header strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.pui-stepper-demo-group > header span,
.pui-stepper-demo-item > span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.pui-stepper-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: var(--pui-preview-space-normal);
  min-width: 0;
}

.pui-stepper-demo-item {
  display: grid;
  justify-items: start;
  gap: var(--pui-preview-content-gap);
  min-width: 0;
}

.pui-stepper-demo-item .pui-stepper { max-width: 100%; }

.pui-slider-contract-showcase { gap: var(--pui-preview-section-gap); }

.pui-slider-demo-group {
  display: grid;
  gap: var(--pui-preview-space-normal);
  min-width: 0;
}

.pui-slider-demo-group + .pui-slider-demo-group { margin-top: var(--pui-preview-section-gap); }

.pui-slider-demo-group > header {
  display: grid;
  gap: var(--pui-preview-space-xxs);
}

.pui-slider-demo-group > header strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.pui-slider-demo-group > header span,
.pui-slider-demo-item > span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.pui-slider-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pui-preview-space-normal);
  min-width: 0;
}

.pui-slider-demo-item {
  display: grid;
  gap: var(--pui-preview-content-gap);
  min-width: 0;
}

.pui-slider-example { min-width: 0; }

.pui-slider-shell {
  flex: 1;
  min-width: 0;
  padding: var(--pui-preview-space-step-5) var(--pui-preview-space-xxs) var(--pui-preview-space-step-16);
}

.pui-slider-preview-row {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-normal);
  min-width: 0;
}

.pui-slider-bound {
  flex: none;
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-variant-numeric: tabular-nums;
}

.pui-slider-live-value {
  flex: none;
  max-width: 100px;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.toast-stage {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 136px;
  padding: var(--pui-preview-space-step-12);
  place-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
  overflow: hidden;
}

.toast-stage--top {
  align-items: start;
}

.toast-stage--bottom {
  align-items: end;
}

.toast-demo {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  gap: var(--pui-preview-space-sm);
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12);
  color: #fff;
  background: rgba(24, 24, 27, .92);
  border: 0;
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transition: opacity var(--pui-toast-duration) var(--pui-toast-ease), transform var(--pui-toast-duration) var(--pui-toast-ease);
  backdrop-filter: var(--blur);
}

.toast-stage--top .toast-demo { transform: translateY(-6px); }
.toast-stage--bottom .toast-demo { transform: translateY(6px); }
.toast-stage:not(.toast-stage--top):not(.toast-stage--bottom) .toast-demo { transform: scale(.96); }
.toast-stage .toast-demo.is-active { opacity: 1; transform: translateY(0) scale(1); }
.toast-demo.is-inactive { pointer-events: none; }
.toast-demo.pui-toast--success,
.toast-demo.pui-toast--warning,
.toast-demo.pui-toast--error,
.toast-demo.pui-toast--loading { color: #fff; background: rgba(24, 24, 27, .94); border: 0; }
.toast-demo__message { min-width: 0; max-width: 240px; color: inherit; font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-label); overflow-wrap: anywhere; word-break: break-word; }
.toast-demo .pui-tag { flex: 0 0 auto; color: #fff; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.pui-toast-showcase { display: grid; gap: var(--pui-section-gap); min-width: 0; }
.toast-demo-section { display: grid; min-width: 0; gap: var(--pui-preview-content-gap); }
.toast-demo-section > h3 { margin: 0; color: var(--text); font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-body-medium); }
.toast-theme-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; gap: var(--pui-preview-content-gap); }
.toast-theme-list .toast-demo { width: 100%; justify-content: center; min-height: 48px; }
.toast-stage--protected .toast-demo { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .toast-demo { transition-duration: 1ms !important; }
}


.pui-dialog-showcase {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--pui-section-gap);
  min-width: 0;
}

.pui-dialog-showcase__content {
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  min-height: 100%;
  align-content: start;
  gap: var(--pui-section-gap);
  padding: var(--pui-preview-panel-padding);
}

.dialog-demo-section {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}

.dialog-demo-section > h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

.dialog-demo-section > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
  overflow-wrap: anywhere;
}

.dialog-demo-section > .pui-button { justify-self: start; }

.pui-dialog-showcase__stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pui-dialog-showcase__stage.is-active { background: transparent; }

.pui-dialog-layer {
  position: absolute;
  inset: 0;
  display: grid;
  box-sizing: border-box;
  min-height: 0;
  padding: var(--pui-preview-panel-padding);
  place-items: center;
  pointer-events: none;
}

.dialog-scrim {
  position: absolute;
  z-index: var(--pui-dialog-z-index, 1);
  inset: 0;
  opacity: 0;
  pointer-events: auto;
  transition: opacity var(--pui-dialog-duration, 500ms) var(--pui-ease-standard);
}

.dialog-scrim.is-visible { opacity: 1; }
body .app-shell[data-frost="on"][data-page-mode] .preview-stage .dialog-scrim { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.dialog-scrim:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -3px;
}

.pui-dialog-showcase .pui-dialog--preview {
  position: relative;
  z-index: calc(var(--pui-dialog-z-index, 1) + 1);
}

.pui-dialog--preview {
  --pui-dialog-action-spacing: var(--pui-preview-panel-padding);
  --pui-dialog-close-size: var(--pui-preview-space-step-36);
  --pui-dialog-section-spacing: var(--pui-preview-section-gap);
  --pui-dialog-content-gap: var(--pui-preview-content-gap);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 304px;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  gap: 0;
  padding: 0;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-card);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity var(--pui-dialog-duration, 500ms) var(--pui-ease-standard), transform var(--pui-dialog-duration, 500ms) var(--pui-ease-standard), background-color var(--pui-dialog-duration, 500ms) var(--pui-ease-standard), border-color var(--pui-dialog-duration, 500ms) var(--pui-ease-standard);
}

.pui-dialog--preview.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.pui-dialog-preview__header {
  display: grid;
  flex: none;
  grid-template-columns: var(--pui-dialog-close-size) minmax(0, 1fr) var(--pui-dialog-close-size);
  min-height: 56px;
  align-items: start;
  min-width: 0;
  gap: var(--pui-dialog-content-gap);
  padding: var(--pui-dialog-action-spacing);
  text-align: center;
}

.pui-dialog-preview__header-action { display: grid; width: var(--pui-dialog-close-size); min-width: 0; min-height: var(--pui-dialog-close-size); place-items: center; }

.pui-dialog--preview h3 {
  margin: 0;
  font-size: var(--pui-font-size-body-large);
  line-height: var(--pui-line-height-body-medium);
  overflow-wrap: anywhere;
}

.pui-dialog-preview__content {
  color: var(--muted);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.pui-dialog-preview__content { margin: 0; }

.pui-dialog-preview__body { display: grid; flex: 0 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: var(--pui-dialog-content-gap); padding: 0 var(--pui-dialog-action-spacing) var(--pui-dialog-action-spacing); text-align: center; }
.pui-dialog-preview__slot { display: grid; min-width: 0; gap: var(--pui-dialog-content-gap); }
.pui-dialog-preview__slot > .pui-tag { width: max-content; max-width: 100%; justify-self: center; }
.pui-dialog-preview__slot .pui-cell { text-align: left; }

.pui-dialog--preview > .pui-dialog__actions {
  display: grid !important;
  flex: none;
  gap: var(--pui-dialog-action-spacing);
  padding: var(--pui-dialog-action-spacing);
  border-top: 1px solid var(--glass-border);
}

.pui-dialog__actions--vertical { grid-template-columns: minmax(0, 1fr); }
.pui-dialog__actions--vertical .pui-button { width: 100%; }
.pui-dialog__actions .pui-button {
  display: flex;
  width: 100%;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pui-dialog--preview,
  .dialog-scrim { transition-duration: 1ms !important; }
}

.pui-direction-showcase {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  gap: var(--pui-preview-space-step-12);
  min-width: 0;
  overflow: visible;
}

.pui-direction-preview {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  transition: opacity var(--pui-direction-preview-duration, 250ms) var(--pui-direction-preview-ease, var(--ease-standard)), background-color var(--pui-direction-preview-duration, 250ms) var(--pui-direction-preview-ease, var(--ease-standard));
}

.pui-direction-preview--block,
.pui-direction-preview--flex { width: 100%; }
.pui-direction-preview--inline-block,
.pui-direction-preview--inline-flex { width: auto; }
.pui-direction-preview.is-changing { opacity: .62; }
.pui-direction-preview.is-selectable { user-select: text; }
.pui-direction-preview:not(.is-selectable) { user-select: none; }

.pui-direction-preview__slot {
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  gap: var(--pui-preview-space-step-9);
  overflow: visible;
}

.pui-direction-preview__copy {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-step-3);
}

.pui-direction-preview__copy strong { max-width: 100%; overflow-wrap: anywhere; font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); }
.pui-direction-preview__copy span,
.pui-direction-preview__plain { margin: 0; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }

.pui-direction-preview__actions {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: var(--pui-preview-space-step-7);
  flex-wrap: wrap;
}

/* A base Button is an elevated surface. The transparent composition root must
   reserve its lower shadow before an opaque sibling can begin. */
.pui-preview-elevation-clearance { padding-block-end: var(--pui-preview-shadow-bleed); }

.pui-direction-preview__actions .pui-button {
  box-sizing: border-box;
  flex: 1 1 120px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.pui-direction-preview__slot > .pui-cell { width: 100%; min-width: 0; max-width: 100%; }

.pui-direction-preview__boundary {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--pui-preview-space-sm);
  padding: var(--pui-preview-content-gap);
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-control);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.pui-direction-preview__boundary span { min-width: 0; overflow-wrap: anywhere; }
.pui-direction-preview__methods { display: flex; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; gap: var(--pui-preview-space-step-7); flex-wrap: wrap; overflow: visible; }
.pui-direction-preview__methods .pui-button { box-sizing: border-box; flex: 1 1 96px; min-width: 0; max-width: 100%; padding-inline: var(--pui-preview-space-step-8); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pui-direction-preview { transition-duration: 1ms !important; }
}

.pui-progress-showcase {
  align-items: stretch;
}

.pui-progress-showcase__section { display: grid; gap: var(--pui-preview-space-normal); }
.pui-progress-demo__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pui-preview-space-normal); color: var(--text); font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); }
.pui-progress-demo__heading span { color: var(--muted); font-size: var(--pui-font-size-caption); }

.pui-progress-demo {
  display: grid;
  gap: var(--pui-preview-space-normal);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--pui-preview-space-lg);
  color: var(--text);
  background: var(--surface);
  border-radius: var(--pui-preview-radius-card);
  box-shadow: none;
}

.pui-progress-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-space-normal); }
.pui-progress-demo-grid .pui-progress-demo { padding: var(--pui-preview-space-normal); box-shadow: none; }
.pui-progress-demo-grid .pui-progress-demo--circle { grid-column: 1 / -1; justify-items: center; }

.pui-progress-demo__body {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-normal);
  min-width: 0;
}

.pui-progress-demo__track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--pui-progress-height);
  overflow: hidden;
  background: var(--pui-progress-track);
  border-radius: var(--pui-preview-radius-round);
}

.pui-progress-demo__bar {
  display: block;
  width: var(--pui-progress-value);
  height: 100%;
  background: var(--pui-progress-active);
  border-radius: inherit;
}

.pui-progress-demo.is-changing .pui-progress-demo__bar {
  animation: pui-progress-value-line var(--pui-progress-duration) var(--pui-progress-ease) both;
}

.pui-progress-demo__info {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: var(--pui-preview-space-step-5);
  min-width: 38px;
  max-width: 132px;
  overflow: hidden;
  color: var(--pui-progress-active);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-align: right;
}

.pui-progress-demo__info strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pui-progress-demo__body--plump { min-height: 24px; }
.pui-progress-demo__track--plump { height: 24px; }
.pui-progress-demo--plump .pui-progress-demo__bar { display: flex; align-items: center; justify-content: flex-end; min-width: 0; padding-right: var(--pui-preview-content-gap); }
.pui-progress-demo--plump .pui-progress-demo__bar .pui-progress-demo__info { max-width: 100%; min-height: 0; color: var(--pui-text-on-inverse); }

.pui-progress-demo__label-slot {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-space-step-3);
  color: var(--muted);
  white-space: nowrap;
}

.pui-progress-demo__label-slot small { font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }

.pui-progress-demo__circle {
  position: relative;
  display: grid;
  width: var(--pui-progress-circle-size);
  height: var(--pui-progress-circle-size);
  margin: 0 auto;
  place-items: center;
}

.pui-progress-demo__circle svg {
  display: block;
  overflow: visible;
  transform: rotate(-90deg);
}

.pui-progress-demo__circle-track {
  stroke: var(--pui-progress-track);
}

.pui-progress-demo__circle-value {
  stroke: var(--pui-progress-active);
  stroke-dashoffset: var(--pui-progress-circle-to);
}

.pui-progress-demo.is-changing .pui-progress-demo__circle-value {
  animation: pui-progress-value-circle var(--pui-progress-duration) var(--pui-progress-ease) both;
}

.pui-progress-demo__circle .pui-progress-demo__info {
  position: absolute;
  inset: 18%;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  text-align: center;
}

.pui-progress-demo.is-reduced-motion .pui-progress-demo__bar,
.pui-progress-demo.is-reduced-motion .pui-progress-demo__circle-value {
  animation-duration: 1ms !important;
}

.pui-progress-demo__interaction { display: flex; flex-wrap: wrap; gap: var(--pui-preview-content-gap); }
.pui-progress-demo__interaction .pui-button { flex: 1 1 104px; min-width: 0; }
.pui-progress-demo__status { color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }

@keyframes pui-progress-value-line {
  from { width: var(--pui-progress-from); }
  to { width: var(--pui-progress-value); }
}

@keyframes pui-progress-value-circle {
  from { stroke-dashoffset: var(--pui-progress-circle-from); }
  to { stroke-dashoffset: var(--pui-progress-circle-to); }
}

@media (max-width: 700px) {
  .pui-progress-demo-grid { grid-template-columns: 1fr; }
  .pui-progress-demo-grid .pui-progress-demo--circle { grid-column: auto; }
  .pui-textarea-state-grid {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  .pui-progress-demo__bar,
  .pui-progress-demo__circle-value {
    animation-duration: 1ms !important;
  }
}

/* Native form-component mirrors. These stay independent from the Props panel. */
.pui-field-showcase,
.pui-otp-showcase,
.pui-select-showcase,
.pui-search-showcase {
  gap: var(--pui-preview-space-step-12);
}

.pui-textarea-preview {
  display: grid;
  gap: var(--pui-preview-space-step-7);
  padding: var(--pui-preview-space-step-11);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-7);
}

.pui-textarea-preview textarea {
  width: 100%;
  min-height: 82px;
  padding: 0;
  color: var(--text);
  font: inherit;
  line-height: var(--pui-line-height-body-medium);
  resize: none;
  background: transparent;
  border: 0;
  outline: 0;
}

.pui-textarea-preview textarea:focus-visible {
  outline: 0;
}

.pui-textarea-preview:focus-within,
.pui-textarea-preview--focus {
  border-color: var(--text);
  outline: 2px solid color-mix(in srgb, var(--text) 14%, transparent);
  outline-offset: 1px;
}

.pui-textarea-preview--error {
  border-color: #dc2626;
}

.pui-textarea-preview--readonly {
  background: var(--surface-soft);
}

.pui-textarea-preview--disabled {
  opacity: 0.5;
}

.pui-textarea-preview__count {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  text-align: right;
}

.pui-textarea-preview__message {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-style: normal;
  line-height: var(--pui-line-height-caption);
}

.pui-textarea-preview__message.is-error { color: #b91c1c; }

.pui-field--slot {
  gap: var(--pui-preview-space-step-7);
}

.pui-field--slot span {
  display: flex;
  gap: var(--pui-preview-space-xs);
  align-items: center;
}

.pui-field--slot b {
  color: #b91c1c;
}

.pui-field--slot .pui-field__control {
  min-height: 36px;
  padding: 0 var(--pui-preview-space-normal);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
}

.pui-field--slot .pui-field__control input {
  min-width: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
}

.pui-field--slot em {
  text-align: left;
}

.pui-field--slot em.is-error {
  color: #b91c1c;
}

  width: 100%;
  min-height: 42px;
  padding: 0;
  border-radius: var(--pui-preview-radius-step-7);
}

  display: flex;
  align-self: stretch;
  align-items: center;
  padding: 0 var(--pui-preview-space-normal);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  background: var(--surface-soft);
}

  flex: 1;
  min-width: 0;
}

  min-height: 40px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

  opacity: 0.52;
}

  background: var(--surface-soft);
}

.otp-demo {
  display: flex;
  gap: var(--pui-preview-space-sm);
  width: 100%;
}

.otp-demo input {
  flex: 1 1 0;
  min-width: 0;
  height: 42px;
  padding: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-semibold);
  text-align: center;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-small);
  outline: 0;
}

.otp-demo input:focus {
  border-color: var(--text);
  outline: 2px solid color-mix(in srgb, var(--text) 14%, transparent);
  outline-offset: 1px;
}

.otp-demo.is-disabled {
  opacity: 0.5;
}

.otp-demo.is-error input { border-color: #dc2626; }
.pui-otp-showcase__message { color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-otp-showcase__message.is-error { color: #b91c1c; }

.pui-search-showcase > .pui-showcase-section {
  display: grid;
  gap: var(--pui-preview-space-step-12);
  width: 100%;
  min-width: 0;
}

.pui-search-showcase > .pui-showcase-section + .pui-showcase-section {
  padding-top: var(--pui-preview-space-step-18);
}

.pui-search-showcase > .pui-showcase-section > h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

.pui-search-showcase__stack {
  display: grid;
  gap: var(--pui-preview-space-step-12);
  min-width: 0;
}

.pui-search-showcase .pui-search {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
  transition: opacity var(--pui-search-duration, 500ms) var(--pui-search-ease, var(--ease-standard));
}

.pui-search__field.pui-input-preview {
  flex: 1;
  min-width: 0;
}

.pui-search--round .pui-search__field .pui-input-preview__control {
  border-radius: var(--pui-preview-radius-round);
}

.pui-search-showcase .pui-search:focus-within .pui-input-preview__control,
.pui-search-showcase .pui-search.is-focused .pui-input-preview__control {
  border-color: var(--text);
  outline: 2px solid color-mix(in srgb, var(--text) 14%, transparent);
  outline-offset: 1px;
}

.pui-search-showcase .pui-search.is-disabled,
.pui-search-showcase .pui-search.is-readonly,
.pui-search-cancel:disabled {
  opacity: 0.5;
}

.pui-search-cancel.pui-button-preview {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
  background: transparent;
  border: 0;
  transition: opacity var(--pui-search-duration, 500ms) var(--pui-search-ease, var(--ease-standard)), color var(--pui-search-duration, 500ms) var(--pui-search-ease, var(--ease-standard));
}

.pui-search-showcase .pui-tag-preview {
  flex: 0 0 auto;
}

.pui-select-trigger {
  display: flex;
  width: 100%;
  min-height: 42px;
  padding: 0 var(--pui-preview-space-step-11);
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  text-align: left;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-7);
  transition: opacity var(--pui-select-duration, 500ms) var(--pui-select-ease, ease), background-color var(--pui-select-duration, 500ms) var(--pui-select-ease, ease), border-color var(--pui-select-duration, 500ms) var(--pui-select-ease, ease);
}

.pui-select-trigger .pui-button-preview__content {
  flex: 1 1 auto;
  justify-content: flex-start;
  text-align: left;
}

.pui-select-trigger .pui-button-preview__content > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-select-trigger .pui-button-preview__content > span.is-placeholder,
.pui-select-trigger .pui-button-preview__suffix {
  color: var(--muted);
}

.pui-select-trigger.is-open {
  border-color: var(--text);
}

.pui-select-trigger__icon {
  display: inline-flex;
  transition: transform var(--pui-select-duration, 500ms) var(--pui-select-ease, ease);
}

.pui-select-trigger.is-open .pui-select-trigger__icon {
  transform: rotate(180deg);
}

.pui-select-trigger:disabled {
  color: var(--muted);
  background: var(--surface-soft);
}
.pui-select-trigger.is-empty { color: var(--muted); background: var(--surface-soft); }

.pui-select-menu {
  display: grid;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-step-5);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-7);
}

.pui-select-menu button {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-step-7);
  min-height: 35px;
  padding: 0 var(--pui-preview-content-gap);
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--pui-preview-radius-step-5);
}

.pui-select-menu .pui-button-preview__content {
  flex: 1 1 auto;
  justify-content: flex-start;
  text-align: left;
}

.pui-select-menu button:hover,
.pui-select-menu button.is-selected {
  background: var(--surface-soft);
}

.pui-select-menu button .pui-icon:last-child {
  margin-left: auto;
}

.pui-select-menu button:disabled {
  color: var(--subtle);
}

.pui-select-menu__empty {
  padding: var(--pui-preview-space-step-9);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  text-align: center;
}

/* Overlay components share the source contracts while preserving a compact phone canvas. */
.preview-scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  min-height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
}

.preview-scrim--contained {
  border-radius: inherit;
}

.overlay-box--clear {
  background: var(--surface-soft);
}

.overlay-box--clear > span {
  color: var(--subtle);
}

.pui-popup-preview,
.pui-sheet-preview,
.pui-popover-preview {
  z-index: 2;
}

.pui-popup-preview--safe-area,
.pui-sheet-preview {
  padding-bottom: max(var(--pui-preview-space-lg), env(safe-area-inset-bottom));
}

.pui-sheet-preview {
  width: calc(100% - 16px);
  gap: 0;
  overflow: hidden;
  padding: 0;
  transition: opacity var(--pui-sheet-duration, 500ms) var(--pui-sheet-ease, ease), transform var(--pui-sheet-duration, 500ms) var(--pui-sheet-ease, ease);
}

.pui-sheet-preview__handle {
  width: 34px;
  height: 4px;
  margin: var(--pui-preview-space-step-9) auto 0;
  background: var(--subtle);
  border-radius: var(--pui-preview-radius-round);
}

.pui-sheet-preview__head,
.pui-popover-preview__head {
  display: flex;
  gap: var(--pui-preview-space-normal);
  align-items: flex-start;
  justify-content: space-between;
}

.pui-sheet-preview__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  padding: var(--pui-preview-space-step-12) var(--pui-preview-space-lg);
  border-bottom: 1px solid var(--border);
}

.pui-sheet-preview__title-area {
  display: grid;
  gap: var(--pui-preview-space-step-3);
  min-width: 0;
}

.pui-sheet-preview__header-action {
  display: grid;
  box-sizing: border-box;
  width: 36px;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-items: end;
}

.pui-sheet-preview__head strong,
.pui-popover-preview__head strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

.pui-sheet-preview__head span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.pui-sheet-preview__content {
  display: grid;
  gap: var(--pui-preview-content-gap);
  min-height: 62px;
  padding: var(--pui-preview-space-step-12) var(--pui-preview-space-lg) 0;
}

.pui-sheet-preview__content p,
.pui-sheet-preview__content span {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-label);
}

.pui-popover-showcase__canvas,
.pui-tooltip-showcase__canvas {
  position: relative;
  display: grid;
  min-height: 214px;
  overflow: visible;
  place-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-popover-showcase__canvas {
  isolation: isolate;
}

.pui-popover-showcase__reference,
.pui-tooltip-showcase__trigger {
  z-index: 2;
  display: inline-flex;
  gap: var(--pui-preview-space-sm);
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 var(--pui-preview-space-step-11);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-small);
}

.pui-popover-showcase__reference:disabled,
.pui-tooltip-showcase__trigger:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.pui-popover-showcase__reference:focus-visible,
.pui-tooltip-showcase__trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 24%, transparent);
  outline-offset: 2px;
}

.pui-popover-showcase__hint {
  position: absolute;
  bottom: var(--pui-preview-panel-padding-spacious);
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

.pui-popover-preview {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: var(--pui-preview-content-gap);
  width: min(230px, calc(100% - 24px));
  padding: var(--pui-preview-space-step-11);
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-7);
  box-shadow: var(--shadow-soft);
}

.pui-popover-preview--arrow::before {
  position: absolute;
  width: 10px;
  height: 10px;
  content: '';
  background: var(--surface-solid);
  border: 1px solid var(--border);
  transform: rotate(45deg);
}

.pui-popover-preview--bottom { top: calc(50% + var(--pui-preview-space-step-31)); left: 50%; transform: translateX(-50%); }
.pui-popover-preview--top { bottom: calc(50% + var(--pui-preview-space-step-31)); left: 50%; transform: translateX(-50%); }
.pui-popover-preview--left { top: 50%; right: calc(50% + var(--pui-popover-preview-anchor-distance)); transform: translateY(-50%); }
.pui-popover-preview--right { top: 50%; left: calc(50% + var(--pui-popover-preview-anchor-distance)); transform: translateY(-50%); }
.pui-popover-preview--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pui-popover-preview--bottom::before { top: calc(0px - var(--pui-preview-space-sm)); left: 50%; border-right: 0; border-bottom: 0; transform: translateX(-50%) rotate(45deg); }
.pui-popover-preview--top::before { bottom: calc(0px - var(--pui-preview-space-sm)); left: 50%; border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
.pui-popover-preview--left::before { top: 50%; right: calc(0px - var(--pui-preview-space-sm)); border-bottom: 0; border-left: 0; transform: translateY(-50%) rotate(45deg); }
.pui-popover-preview--right::before { top: 50%; left: calc(0px - var(--pui-preview-space-sm)); border-top: 0; border-right: 0; transform: translateY(-50%) rotate(45deg); }
.pui-popover-preview--center::before { display: none; }

.pui-popover-preview p,
.pui-popover-preview > span {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.pui-popover-showcase__dismiss,
.pui-tooltip-showcase__dismiss {
  position: absolute;
  right: var(--pui-preview-space-step-12);
  bottom: var(--pui-preview-space-normal);
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-sm);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  background: transparent;
  border: 0;
}

.pui-tooltip-showcase__canvas {
  place-items: center;
}

.pui-tooltip-showcase__anchor {
  position: relative;
  display: inline-flex;
}

.pui-tooltip-preview {
  position: absolute;
  z-index: 3;
  max-width: 190px;
  padding: var(--pui-preview-space-step-7) var(--pui-preview-space-step-9);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  white-space: nowrap;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
  box-shadow: var(--shadow-soft);
}

.pui-tooltip-preview--top { bottom: calc(100% + var(--pui-preview-content-gap)); left: 50%; transform: translateX(-50%); }
.pui-tooltip-preview--bottom { top: calc(100% + var(--pui-preview-content-gap)); left: 50%; transform: translateX(-50%); }
.pui-tooltip-preview--left { top: 50%; right: calc(100% + var(--pui-preview-content-gap)); transform: translateY(-50%); }
.pui-tooltip-preview--right { top: 50%; left: calc(100% + var(--pui-preview-content-gap)); transform: translateY(-50%); }

.pui-tooltip-preview--arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  content: '';
  background: var(--surface-solid);
  border: 1px solid var(--border);
  transform: rotate(45deg);
}

.pui-tooltip-preview--top::before { bottom: calc(0px - var(--pui-preview-space-step-5)); left: 50%; border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
.pui-tooltip-preview--bottom::before { top: calc(0px - var(--pui-preview-space-step-5)); left: 50%; border-right: 0; border-bottom: 0; transform: translateX(-50%) rotate(45deg); }
.pui-tooltip-preview--left::before { top: 50%; right: calc(0px - var(--pui-preview-space-step-5)); border-bottom: 0; border-left: 0; transform: translateY(-50%) rotate(45deg); }
.pui-tooltip-preview--right::before { top: 50%; left: calc(0px - var(--pui-preview-space-step-5)); border-top: 0; border-right: 0; transform: translateY(-50%) rotate(45deg); }

.pui-tooltip-showcase__canvas > p {
  position: absolute;
  bottom: var(--pui-preview-panel-padding-spacious);
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

@media (max-width: 420px) {
  .pui-popover-preview--left,
  .pui-popover-preview--right {
    top: calc(50% + var(--pui-preview-space-step-34));
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .pui-tooltip-preview--left,
  .pui-tooltip-preview--right {
    top: auto;
    right: auto;
    bottom: calc(100% + var(--pui-preview-content-gap));
    left: 50%;
    transform: translateX(-50%);
  }
}

.pui-skeleton-showcase { display: grid; gap: var(--pui-section-gap); min-width: 0; }
.pui-skeleton-showcase__section { display: grid; gap: var(--pui-preview-space-normal); min-width: 0; }
.pui-skeleton-showcase__heading { display: grid; gap: var(--pui-preview-space-step-4); color: var(--text); }
.pui-skeleton-showcase__heading strong { font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); }
.pui-skeleton-showcase__heading span { color: var(--muted); font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-small); }
.pui-skeleton-showcase__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-space-normal); min-width: 0; }
.pui-skeleton-showcase__interaction { display: flex; justify-content: flex-start; min-width: 0; }
.pui-skeleton-preview { --pui-skeleton-circle-radius: 50%; position: relative; display: grid; box-sizing: border-box; width: 100%; min-width: 0; min-height: 72px; color: var(--text); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.pui-skeleton-preview__placeholder,
.pui-skeleton-preview__content { grid-area: 1 / 1; box-sizing: border-box; min-width: 0; opacity: 0; transition: opacity var(--pui-skeleton-duration) var(--pui-ease-standard); }
.pui-skeleton-preview__placeholder { z-index: 1; pointer-events: none; }
.pui-skeleton-preview__placeholder.is-active,
.pui-skeleton-preview__content.is-active { opacity: 1; }
.pui-skeleton-preview__content { display: grid; align-content: start; gap: var(--pui-preview-space-normal); pointer-events: none; }
.pui-skeleton-preview__content.is-active { pointer-events: auto; }
.pui-skeleton-preview__rows { display: flex; flex-direction: column; gap: var(--pui-preview-space-step-8); min-width: 0; }
.pui-skeleton-preview__row { display: flex; align-items: center; min-width: 0; gap: var(--pui-preview-space-step-8); }
.pui-skeleton-preview__part { position: relative; display: block; box-sizing: border-box; min-width: 0; min-height: 16px; flex: 1 1 0; overflow: hidden; background: var(--surface-soft); border-radius: var(--pui-preview-radius-small); }
.pui-skeleton-preview__part--rect { border-radius: var(--pui-preview-radius-medium); }
.pui-skeleton-preview__part--circle { width: 48px; height: 48px; min-height: 0; flex: 0 0 auto; border-radius: var(--pui-skeleton-circle-radius); }
.pui-skeleton-preview.is-gradient .pui-skeleton-preview__part::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent); transform: translateX(-100%) skewX(-15deg); animation: pui-preview-skeleton-gradient var(--pui-duration-normal) linear infinite; }
.pui-skeleton-preview.is-flashed .pui-skeleton-preview__part { animation: pui-preview-skeleton-flashed var(--pui-duration-normal) linear infinite; }
.pui-skeleton-preview.is-reduced-motion .pui-skeleton-preview__placeholder,
.pui-skeleton-preview.is-reduced-motion .pui-skeleton-preview__content { transition-duration: 1ms; }
.pui-skeleton-preview.is-reduced-motion .pui-skeleton-preview__part,
.pui-skeleton-preview.is-reduced-motion .pui-skeleton-preview__part::after { animation: none; }
@keyframes pui-preview-skeleton-gradient { from { transform: translateX(-100%) skewX(-15deg); } to { transform: translateX(100%) skewX(-15deg); } }
@keyframes pui-preview-skeleton-flashed { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }

@media (max-width: 390px) {
  .pui-skeleton-showcase__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pui-skeleton-preview__placeholder,
  .pui-skeleton-preview__content { transition-duration: 1ms; }
  .pui-skeleton-preview__part,
  .pui-skeleton-preview__part::after { animation: none !important; }
}

.pui-empty-showcase { min-width: 0; }
.pui-empty-preview {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: var(--pui-preview-space-step-16) 0;
  color: var(--text);
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition: opacity var(--pui-empty-preview-duration, 500ms) var(--pui-empty-preview-ease, var(--ease-standard)), transform var(--pui-empty-preview-duration, 500ms) var(--pui-empty-preview-ease, var(--ease-standard));
}
.pui-empty-preview.is-entered { opacity: 1; transform: translateY(0) scale(1); }
.pui-empty-preview__visual { display: grid; flex: none; place-items: center; max-width: 100%; }
.pui-empty-preview__visual > .pui-image-demo { flex: none; }
.pui-empty-preview__icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--muted); background: var(--surface-soft); border-radius: var(--pui-preview-radius-round); transition: color var(--pui-empty-preview-duration, 500ms) var(--pui-empty-preview-ease, var(--ease-standard)), background-color var(--pui-empty-preview-duration, 500ms) var(--pui-empty-preview-ease, var(--ease-standard)); }
.pui-empty-preview__slot-image { box-sizing: border-box; display: grid; width: 96px; height: 96px; place-items: center; align-content: center; gap: var(--pui-preview-space-step-5); color: var(--muted); background: var(--surface-soft); border-radius: var(--pui-preview-radius-medium); }
.pui-empty-preview__slot-image span { font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-empty-preview__copy { display: grid; max-width: 300px; min-width: 0; gap: var(--pui-preview-space-xs); margin-top: var(--pui-preview-space-lg); }
.pui-empty-preview__copy p { max-width: 100%; margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-label); }
.pui-empty-preview__actions { display: flex; max-width: 100%; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pui-preview-content-gap); margin-top: var(--pui-preview-space-step-16); }
.pui-empty-showcase__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-space-lg); }

@media (max-width: 390px) {
  .pui-empty-showcase__grid { grid-template-columns: minmax(0, 1fr); }
}

.pui-result-showcase { display: grid; min-width: 0; max-width: 100%; gap: var(--pui-section-gap); }
.pui-result-showcase > .pui-showcase-section { min-width: 0; max-width: 100%; }
.pui-result-showcase__grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-content-gap); }
.pui-result-showcase__note { margin: var(--pui-preview-content-gap) 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-result-preview { box-sizing: border-box; display: flex; width: 100%; min-width: 0; flex-direction: column; align-items: center; padding: var(--pui-preview-space-xxl) var(--pui-preview-space-step-16); color: var(--text); text-align: center; background: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 0; transform: translateY(6px) scale(.985); transition: opacity var(--pui-result-preview-duration, 500ms) var(--pui-result-preview-ease, var(--ease-standard)), transform var(--pui-result-preview-duration, 500ms) var(--pui-result-preview-ease, var(--ease-standard)); }
.pui-result-preview.is-entered { opacity: 1; transform: translateY(0) scale(1); }
.pui-result-preview__thumb { display: grid; min-width: 0; place-items: center; }
.pui-result-preview__thumb > img { display: block; width: 96px; height: 96px; max-width: 100%; object-fit: contain; border-radius: var(--pui-preview-radius-medium); }
.pui-result-preview__icon { display: grid; place-items: center; width: 60px; height: 60px; color: var(--brand); background: var(--surface-soft); border-radius: var(--pui-preview-radius-round); transition: color var(--pui-result-preview-duration, 500ms) var(--pui-result-preview-ease, var(--ease-standard)); }
.pui-result-preview__title { max-width: 320px; min-width: 0; margin-top: var(--pui-preview-space-lg); overflow-wrap: anywhere; font-size: var(--pui-font-size-body-large); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-body-large); }
.pui-result-preview__title:empty { display: none; }
.pui-result-preview__description { max-width: 320px; min-width: 0; margin-top: var(--pui-preview-space-xs); overflow-wrap: anywhere; color: var(--muted); font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); }
.pui-result-preview__description:empty { display: none; }
.pui-result-preview--success .pui-result-preview__icon { color: var(--success); }
.pui-result-preview--warning .pui-result-preview__icon { color: var(--warning); }
.pui-result-preview--error .pui-result-preview__icon { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .pui-empty-preview { transition-duration: 1ms; }
  .pui-result-preview { transition-duration: 1ms; }
}

.pui-notice-showcase { display: grid; min-width: 0; max-width: 100%; gap: var(--pui-section-gap); }
.pui-notice-showcase > .pui-showcase-section { min-width: 0; max-width: 100%; }
.pui-notice-showcase__stack { display: grid; gap: var(--pui-preview-content-gap); }
.pui-notice-showcase__note { margin: var(--pui-preview-content-gap) 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-notice-preview { box-sizing: border-box; display: flex; width: 100%; max-width: 100%; max-height: 0; min-width: 0; min-height: 0; align-items: center; gap: var(--pui-preview-content-gap); overflow: hidden; padding: 0 var(--pui-preview-space-normal); color: var(--text); background: var(--surface-soft); border: 1px solid transparent; border-radius: var(--pui-preview-radius-medium); opacity: 0; transform: translateY(-4px); transition: max-height var(--pui-notice-preview-duration, 500ms) var(--pui-ease-standard), min-height var(--pui-notice-preview-duration, 500ms) var(--pui-ease-standard), padding var(--pui-notice-preview-duration, 500ms) var(--pui-ease-standard), opacity var(--pui-notice-preview-duration, 500ms) var(--pui-ease-standard), transform var(--pui-notice-preview-duration, 500ms) var(--pui-ease-standard); }
.pui-notice-preview.is-active { max-height: 120px; min-height: 44px; padding-block: var(--pui-preview-space-step-5); opacity: 1; transform: translateY(0); }
.pui-notice-preview__icon { display: grid; flex: none; place-items: center; }
.pui-notice-preview__icon--suffix { margin-left: auto; }
.pui-notice-preview__icon .pui-button { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; color: inherit; box-shadow: none; }
.pui-notice-preview__viewport { flex: 1; min-width: 0; overflow: hidden; }
.pui-notice-preview__viewport[role="button"] { cursor: pointer; outline: 0; }
.pui-notice-preview__viewport[role="button"]:focus-visible { box-shadow: inset 0 0 0 2px var(--text); }
.pui-notice-preview__text { display: inline-flex; width: max-content; min-width: 100%; flex: none; align-items: center; gap: var(--pui-preview-space-sm); overflow: visible; font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-label); text-align: left; white-space: nowrap; transition-property: transform; transition-timing-function: linear; will-change: transform; }
.pui-notice-preview--vertical .pui-notice-preview__text { white-space: normal; }
.pui-notice-preview__operation { display: flex; flex: none; align-items: center; justify-content: center; font-weight: var(--pui-font-weight-bold); }
.pui-notice-preview__operation .pui-button { min-width: 0; height: 32px; min-height: 32px; padding-inline: var(--pui-preview-space-step-6); color: inherit; box-shadow: none; }
.pui-notice-preview--primary { color: var(--brand); background: var(--brand-soft); }
.pui-notice-preview--success { color: var(--success); background: var(--success-soft); }
.pui-notice-preview--warning { color: var(--warning); background: var(--warning-soft); }
.pui-notice-preview--danger { color: var(--danger); background: var(--danger-soft); }
.preview-stage .pui-notice-preview__icon:not(.pui-notice-preview__icon--suffix) .pui-button { color: inherit; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .pui-notice-preview { transition-duration: 1ms; }
  .pui-notice-preview__text { transition: none !important; transform: translate3d(0, 0, 0) !important; will-change: auto; }
}

@media (max-width: 390px) {
  .pui-result-showcase__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Native form components: mirror WXML controls without inventing a separate H5 API. */
.pui-picker-showcase,
.pui-date-time-picker-showcase,
.pui-rate-showcase,
.pui-upload-showcase { display: grid; gap: var(--pui-preview-space-step-12); }

.pui-picker-showcase,
.pui-date-time-picker-showcase { position: relative; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; align-content: start; padding: var(--pui-preview-device-padding); overflow: visible; }
.pui-picker-showcase .pui-showcase-section,
.pui-date-time-picker-showcase .pui-showcase-section { min-width: 0; }
.pui-picker-showcase__trigger { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--pui-preview-content-gap); }
.pui-picker-showcase__trigger > span { min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-picker-showcase__examples,
.pui-picker-showcase__states { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-content-gap); }
.pui-picker-showcase__examples > div,
.pui-picker-showcase__states > div { display: grid; min-width: 0; gap: var(--pui-preview-space-sm); }
.pui-picker-showcase__examples > div > span,
.pui-picker-showcase__states > div > span { color: var(--muted); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-caption); }
.pui-picker-h5__layer { position: absolute; z-index: 50; inset: 0; display: grid; align-items: end; pointer-events: none; }
.pui-picker-h5__mask { position: absolute; inset: 0; background: rgb(0 0 0 / 44%); opacity: 0; transition: opacity var(--pui-picker-duration, 500ms) var(--pui-ease-standard); }
.pui-picker-h5__layer > .pui-picker-h5__panel { position: relative; z-index: 1; max-height: 88%; overflow: hidden; opacity: 0; transform: translate3d(0, 100%, 0); transition: opacity var(--pui-picker-duration, 500ms) var(--pui-ease-standard), transform var(--pui-picker-duration, 500ms) var(--pui-ease-standard); }
.pui-picker-h5__layer.is-open { pointer-events: auto; }
.pui-picker-h5__layer.is-open .pui-picker-h5__mask,
.pui-picker-h5__layer.is-open > .pui-picker-h5__panel { opacity: 1; }
.pui-picker-h5__layer.is-open > .pui-picker-h5__panel { transform: translate3d(0, 0, 0); }
.pui-picker-h5__layer.is-entering { pointer-events: auto; }
.pui-picker-h5__layer.is-entering .pui-picker-h5__mask { animation: pui-picker-mask-enter var(--pui-picker-duration, 500ms) var(--pui-ease-standard) forwards; }
.pui-picker-h5__layer.is-entering > .pui-picker-h5__panel { animation: pui-picker-panel-enter var(--pui-picker-duration, 500ms) var(--pui-ease-standard) forwards; }
.pui-picker-h5__layer.is-leaving .pui-picker-h5__mask { animation: pui-picker-mask-leave var(--pui-picker-duration, 500ms) var(--pui-ease-standard) forwards; }
.pui-picker-h5__layer.is-leaving > .pui-picker-h5__panel { animation: pui-picker-panel-leave var(--pui-picker-duration, 500ms) var(--pui-ease-standard) forwards; }
@keyframes pui-picker-mask-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes pui-picker-mask-leave { from { opacity: 1; } to { opacity: 0; } }
@keyframes pui-picker-panel-enter { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes pui-picker-panel-leave { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, 100%, 0); } }
.pui-picker-h5__inline { min-width: 0; overflow: hidden; background: transparent; border: 0; border-radius: var(--pui-preview-radius-large); box-shadow: none; }
.pui-picker-h5__inline.is-example { width: 100%; }
.pui-picker-h5__panel { box-sizing: border-box; width: 100%; min-width: 0; color: var(--text); background: var(--preview-surface, var(--surface-solid)); border: 1px solid var(--preview-border, var(--border)); border-radius: var(--pui-preview-radius-large) var(--pui-preview-radius-large) 0 0; box-shadow: var(--preview-shadow-card, none); -webkit-backdrop-filter: var(--preview-blur, none); backdrop-filter: var(--preview-blur, none); }
.pui-picker-h5__inline > .pui-picker-h5__panel,
.pui-picker-showcase__examples .pui-picker-h5__panel,
.pui-picker-showcase__states .pui-picker-h5__panel { border-radius: inherit; box-shadow: none; }
.pui-picker-h5__header { display: grid; box-sizing: border-box; min-height: 56px; align-items: center; gap: var(--pui-preview-content-gap); padding: var(--pui-preview-panel-padding) var(--pui-preview-panel-padding) 0; }
.pui-picker-h5__header--popup { grid-template-columns: 36px minmax(0, 1fr) 36px; }
.pui-picker-h5__header--popup.is-header-actions { grid-template-columns: 36px minmax(0, 1fr) 36px; }
.pui-picker-h5__header--inline { grid-template-columns: minmax(56px, auto) minmax(0, 1fr) minmax(56px, auto); min-height: 52px; padding: 0 var(--pui-preview-space-step-8); border-bottom: 1px solid var(--border); }
.pui-picker-h5__header > strong { min-width: 0; overflow-wrap: anywhere; font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); text-align: center; }
.pui-picker-h5__header .pui-button { min-width: 0; }
.pui-picker-h5__footer { display: grid; box-sizing: border-box; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-content-gap); padding: var(--pui-preview-content-gap) var(--pui-preview-panel-padding) var(--pui-preview-panel-padding); border-top: 1px solid var(--border); }
.pui-picker-h5__wheels { position: relative; display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); overflow: hidden; background: var(--surface-solid); }
.pui-picker-h5__indicator { position: absolute; z-index: 0; top: calc(var(--pui-picker-middle) * var(--pui-picker-item-height)); right: var(--pui-preview-space-normal); left: var(--pui-preview-space-normal); box-sizing: border-box; height: var(--pui-picker-item-height); pointer-events: none; background: var(--surface-soft); border-block: 1px solid var(--border); border-radius: var(--pui-preview-radius-small); }
.pui-picker-h5__wheel { position: relative; z-index: 1; min-width: 0; overflow: hidden; touch-action: none; cursor: grab; outline: 0; }
.pui-picker-h5__wheel:focus-visible { box-shadow: inset 0 0 0 2px var(--text); }
.pui-picker-h5__wheel.is-dragging { cursor: grabbing; }
.pui-picker-h5__track { transition: transform var(--pui-picker-duration, 500ms) var(--pui-ease-standard); will-change: transform; }
.pui-picker-h5__wheel.is-dragging .pui-picker-h5__track { transition-duration: 1ms; }
.pui-picker-h5__option { display: flex; box-sizing: border-box; min-width: 0; height: var(--pui-picker-item-height); align-items: center; justify-content: center; gap: var(--pui-preview-space-xs); padding: 0 var(--pui-preview-space-sm); overflow: hidden; color: var(--muted); font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-small); text-align: center; cursor: pointer; opacity: .62; transition: color var(--pui-picker-duration, 500ms) var(--pui-ease-standard), opacity var(--pui-picker-duration, 500ms) var(--pui-ease-standard), transform var(--pui-picker-duration, 500ms) var(--pui-ease-standard); }
.pui-picker-h5__option > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-picker-h5__option.is-selected { color: var(--text); font-size: var(--pui-font-size-body-medium); font-weight: var(--pui-font-weight-semibold); opacity: 1; transform: scale(1.02); }
.pui-picker-h5__option.is-disabled { color: var(--muted); cursor: not-allowed; opacity: .28; }
.pui-picker-h5__state { display: grid; min-height: 160px; place-items: center; padding: var(--pui-preview-panel-padding); }
.pui-picker-h5__state > .pui-spinner { margin-right: var(--pui-preview-space-sm); }
.pui-picker-h5__panel.is-disabled,
.pui-picker-h5__panel.is-readonly { opacity: .56; }
.pui-picker-showcase__examples .pui-picker-h5__wheels,
.pui-picker-showcase__states .pui-picker-h5__wheels { --pui-picker-item-height: 32px !important; --pui-picker-wheel-height: 96px !important; --pui-picker-middle: 1 !important; }
.pui-picker-showcase__examples .pui-picker-h5__wheel,
.pui-picker-showcase__states .pui-picker-h5__wheel { height: 96px !important; }
.pui-picker-showcase__examples .pui-picker-h5__state,
.pui-picker-showcase__states .pui-picker-h5__state { min-height: 96px; padding: var(--pui-preview-space-normal); }

@media (max-width: 480px) {
  .pui-picker-showcase__examples,
  .pui-picker-showcase__states { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pui-picker-h5__mask,
  .pui-picker-h5__panel,
  .pui-picker-h5__track,
  .pui-picker-h5__option { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

.pui-rate-preview { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: var(--pui-preview-content-gap); color: var(--text); transition: opacity var(--pui-rate-duration, 500ms) var(--ease-standard), color var(--pui-rate-duration, 500ms) var(--ease-standard); }
.pui-rate-preview__stars { display: flex; min-width: 0; gap: var(--pui-preview-rate-gap); touch-action: none; }
.pui-rate-preview__star { position: relative; display: grid; flex: 0 0 var(--pui-preview-rate-size); width: var(--pui-preview-rate-size); height: var(--pui-preview-rate-size); place-items: center; overflow: hidden; transition: opacity var(--pui-rate-duration, 500ms) var(--ease-standard), transform var(--pui-rate-duration, 500ms) var(--ease-standard); }
.pui-rate-preview__base-icon { opacity: .28; }
.pui-rate-preview__fill { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; overflow: hidden; color: var(--pui-preview-rate-color); transition: width var(--pui-rate-duration, 500ms) var(--ease-standard); }
.pui-rate-preview__fill > .pui-icon { position: absolute; top: 0; left: 0; }
.pui-rate-preview__star > button { position: absolute; top: 0; bottom: 0; z-index: 2; width: 50%; padding: 0; background: transparent; border: 0; cursor: pointer; }
.pui-rate-preview__star > button:first-of-type { left: 0; }
.pui-rate-preview__star > button:last-of-type { right: 0; }
.pui-rate-preview__star > button:only-of-type { right: 0; width: 100%; }
.pui-rate-preview__star > button:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.pui-rate-preview.is-disabled { opacity: .4; }
.pui-rate-preview.is-readonly { opacity: .64; }
.pui-rate-preview__text,
.pui-rate-preview__event { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-body-small); }
.pui-rate-showcase__row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--pui-preview-content-gap); }
.pui-rate-showcase__stack { display: grid; min-width: 0; gap: var(--pui-preview-space-normal); }

.pui-upload-preview { display: grid; min-width: 0; gap: var(--pui-preview-space-normal); background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity var(--pui-upload-duration, 500ms) var(--ease-standard); }
.pui-upload-preview__files { display: grid; min-width: 0; gap: var(--pui-preview-content-gap); }
.pui-upload-preview__files.is-grid { grid-template-columns: repeat(var(--pui-upload-columns), minmax(0, 1fr)); }
.pui-upload-preview__file { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--pui-preview-space-normal); align-items: center; min-width: 0; min-height: 56px; padding: var(--pui-preview-space-step-7); overflow: hidden; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-step-7); transition: opacity var(--pui-upload-duration, 500ms) var(--ease-standard), background-color var(--pui-upload-duration, 500ms) var(--ease-standard), border-color var(--pui-upload-duration, 500ms) var(--ease-standard), border-radius var(--pui-upload-duration, 500ms) var(--ease-standard), box-shadow var(--pui-upload-duration, 500ms) var(--ease-standard), -webkit-backdrop-filter var(--pui-upload-duration, 500ms) var(--ease-standard), backdrop-filter var(--pui-upload-duration, 500ms) var(--ease-standard); }
.pui-upload-preview__files.is-grid .pui-upload-preview__file { grid-template-columns: minmax(0, 1fr); align-content: start; }
.pui-upload-preview__visual { display: grid; width: 40px; height: 40px; overflow: hidden; place-items: center; color: var(--muted); background: var(--surface-solid); border-radius: var(--pui-preview-radius-step-5); }
.pui-upload-preview__files.is-grid .pui-upload-preview__visual { width: 100%; height: 72px; }
.pui-upload-preview__visual img { width: 100%; height: 100%; object-fit: cover; }
.pui-upload-preview__body { display: grid; min-width: 0; gap: var(--pui-preview-space-xs); }
.pui-upload-preview__heading { display: flex; align-items: center; min-width: 0; gap: var(--pui-preview-space-sm); }
.pui-upload-preview__files.is-grid .pui-upload-preview__heading { align-items: flex-start; flex-direction: column; }
.pui-upload-preview__heading > strong { flex: 1; min-width: 0; overflow: hidden; color: var(--text); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); line-height: var(--pui-line-height-caption); text-overflow: ellipsis; white-space: nowrap; }
.pui-upload-preview__meta { display: flex; min-width: 0; gap: var(--pui-preview-space-step-7); color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-upload-preview__files.is-grid .pui-upload-preview__meta { align-items: flex-start; flex-direction: column; }
.pui-upload-preview__error { display: flex; align-items: flex-start; min-width: 0; gap: var(--pui-preview-space-xs); padding: var(--pui-preview-space-xs) var(--pui-preview-space-sm); color: var(--danger); background: var(--danger-soft); border-radius: var(--pui-preview-radius-small); }
.pui-upload-preview__error > span { min-width: 0; overflow: hidden; font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); text-overflow: ellipsis; white-space: nowrap; }
.pui-upload-preview__retry { width: 60px; min-width: 60px; max-width: 60px; padding-right: 0; padding-left: 0; }
.pui-upload-preview__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; max-width: calc(var(--pui-preview-space-step-36) * 3 + var(--pui-preview-space-step-3) * 2); gap: var(--pui-preview-space-step-3); }
.pui-upload-preview__files.is-grid .pui-upload-preview__actions { justify-content: flex-start; max-width: none; }
.pui-upload-preview__progress { position: relative; display: flex; align-items: center; min-width: 0; gap: var(--pui-preview-space-sm); }
.pui-upload-preview__progress::before { flex: 1; height: 4px; content: ''; background: var(--surface-solid); border-radius: var(--pui-preview-radius-round); }
.pui-upload-preview__progress > span { position: absolute; left: 0; height: 4px; background: var(--brand); border-radius: var(--pui-preview-radius-round); transition: width var(--pui-upload-duration, 500ms) var(--pui-upload-ease, var(--ease-standard)); }
.pui-upload-preview__progress > small { min-width: 28px; color: var(--muted); font-size: var(--pui-font-size-caption); text-align: right; }
.pui-upload-preview__add { position: relative; display: grid; min-width: 0; gap: var(--pui-preview-space-step-3); color: var(--text); text-align: center; cursor: pointer; transition: opacity var(--pui-upload-duration, 500ms) var(--ease-standard); }
.pui-upload-preview__add.is-custom { min-height: 48px; padding: var(--pui-preview-space-sm); border: 1px dashed var(--border); border-radius: var(--pui-preview-radius-large); }
.pui-upload-preview__add-button { pointer-events: none; }
.pui-upload-preview__add-hint { color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-upload-preview__add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pui-upload-preview__add.is-disabled,.pui-upload-preview__add.is-disabled input { cursor: not-allowed; }
.pui-upload-preview.is-disabled { opacity: .52; }
.pui-upload-preview.is-reduced-motion,
.pui-upload-preview.is-reduced-motion * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
.pui-upload-preview__feedback { color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-upload-showcase__stack { display: grid; min-width: 0; gap: var(--pui-preview-space-normal); }

@media (max-width: 420px) {
  .pui-upload-preview__file { grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--pui-preview-content-gap); }
  .pui-upload-preview__visual { width: 36px; height: 36px; }
  .pui-upload-preview__actions { justify-content: flex-end; max-width: 60px; }
  .pui-rate-preview { max-width: 100%; }
  .pui-rate-preview__stars { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pui-rate-preview,
  .pui-rate-preview__star,
  .pui-rate-preview__fill { transition-duration: 1ms !important; }
}

/* Completed native mirrors: every control below uses the same props as its WXML component. */
.pui-breadcrumb-showcase,
.pui-scroll-area-showcase {
  display: grid;
  gap: var(--pui-preview-section-gap);
}

.pui-breadcrumb-showcase > .pui-showcase-section {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}

.pui-breadcrumb-showcase > .pui-showcase-section > h3 {
  box-sizing: border-box;
  margin: 0;
  padding-inline: var(--pui-preview-device-padding);
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

.pui-breadcrumb-preview {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: var(--pui-preview-content-gap);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-breadcrumb-preview__scroller {
  flex: 1;
  min-width: 0;
}

.pui-breadcrumb-preview.is-nowrap .pui-breadcrumb-preview__scroller {
  overflow-x: auto;
  scrollbar-width: none;
}

.pui-breadcrumb-preview.is-nowrap .pui-breadcrumb-preview__scroller::-webkit-scrollbar { display: none; }

.pui-breadcrumb-preview__list {
  display: flex;
  align-items: center;
  min-width: 100%;
}

.pui-breadcrumb-preview__item-wrap { display: inline-flex; min-width: 0; flex: 0 0 auto; }

.pui-breadcrumb-preview.is-wrap .pui-breadcrumb-preview__list {
  flex-wrap: wrap;
  row-gap: var(--pui-preview-space-xs);
}

.pui-breadcrumb-preview.is-nowrap .pui-breadcrumb-preview__list {
  width: max-content;
  white-space: nowrap;
}

.pui-breadcrumb-preview .pui-breadcrumb-preview__item {
  display: inline-flex;
  align-items: center;
  gap: var(--pui-preview-space-step-5);
  min-height: 30px;
  min-width: 0;
  padding: 0 var(--pui-preview-space-step-5);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
  background: transparent;
  border: 0;
  border-radius: var(--pui-preview-radius-step-5);
  box-shadow: none;
  transition: color var(--pui-breadcrumb-preview-duration, 500ms) var(--pui-breadcrumb-preview-ease, var(--ease-standard)), background-color var(--pui-breadcrumb-preview-duration, 500ms) var(--pui-breadcrumb-preview-ease, var(--ease-standard)), opacity var(--pui-breadcrumb-preview-duration, 500ms) var(--pui-breadcrumb-preview-ease, var(--ease-standard)), transform var(--pui-breadcrumb-preview-duration, 500ms) var(--pui-breadcrumb-preview-ease, var(--ease-standard));
}

.pui-breadcrumb-preview .pui-breadcrumb-preview__item > .pui-button-preview__content {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-space-step-5);
  overflow: visible;
}

.pui-breadcrumb-preview .pui-breadcrumb-preview__label {
  overflow: hidden;
  max-width: 112px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pui-breadcrumb-preview .pui-breadcrumb-preview__item.is-active {
  color: var(--text);
  font-weight: var(--pui-font-weight-bold);
  background: var(--surface-soft);
}

.pui-breadcrumb-preview .pui-breadcrumb-preview__item:disabled { opacity: .42; }

.pui-breadcrumb-preview__separator {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-style: normal;
  transition: color var(--pui-breadcrumb-preview-duration, 500ms) var(--pui-breadcrumb-preview-ease, var(--ease-standard)), opacity var(--pui-breadcrumb-preview-duration, 500ms) var(--pui-breadcrumb-preview-ease, var(--ease-standard));
}

.pui-breadcrumb-preview__prefix,
.pui-breadcrumb-preview__suffix {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 var(--pui-preview-space-xs);
}

.pui-breadcrumb-preview__suffix .pui-button { min-width: 30px; min-height: 30px; padding: 0; }
.pui-breadcrumb-preview--small .pui-breadcrumb-preview__item { min-height: 26px; font-size: var(--pui-font-size-caption); }
.pui-breadcrumb-preview--small .pui-breadcrumb-preview__label { max-width: 96px; }
.pui-breadcrumb-preview--large .pui-breadcrumb-preview__item { min-height: 34px; font-size: var(--pui-font-size-body-small); }
.pui-breadcrumb-preview--large .pui-breadcrumb-preview__label { max-width: 128px; }
.pui-breadcrumb-preview.is-disabled { opacity: .56; }

.pui-breadcrumb-preview__state {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-content-gap);
  min-height: 52px;
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-medium);
  transition: color var(--pui-breadcrumb-preview-duration, 500ms) var(--pui-breadcrumb-preview-ease, var(--ease-standard)), background-color var(--pui-breadcrumb-preview-duration, 500ms) var(--pui-breadcrumb-preview-ease, var(--ease-standard)), opacity var(--pui-breadcrumb-preview-duration, 500ms) var(--pui-breadcrumb-preview-ease, var(--ease-standard));
}

.pui-breadcrumb-preview__state.is-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  justify-content: stretch;
  color: var(--danger);
  text-align: left;
}

.pui-breadcrumb-preview__state-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pui-showcase-label > button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-small);
}

.pui-showcase-label > button:hover { color: var(--text); background: var(--surface-soft); }

.pui-scroll-area-preview {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.pui-scroll-area-preview__viewport {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.pui-scroll-area-preview[data-scroll-area-adaptive="true"] .pui-scroll-area-preview__viewport {
  height: auto;
  max-height: inherit;
}

.pui-scroll-area-preview__viewport::-webkit-scrollbar { display: none; }
.pui-scroll-area-preview__content { box-sizing: border-box; width: 100%; min-height: 100%; }
.pui-scroll-area-preview__entry { box-sizing: border-box; min-width: 0; }
.pui-scroll-area-preview__gradient {
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  height: var(--pui-scroll-area-gradient-overlay-size);
  opacity: 0;
  pointer-events: none;
}
.pui-scroll-area-preview__gradient--top { top: 0; background: linear-gradient(to bottom, var(--pui-scroll-area-gradient-overlay-color), transparent); }
.pui-scroll-area-preview__gradient--bottom { bottom: 0; background: linear-gradient(to top, var(--pui-scroll-area-gradient-overlay-color), transparent); }
.pui-scroll-area-preview.has-scroll-area-overflow:not(.is-scroll-area-at-top) .pui-scroll-area-preview__gradient--top,
.pui-scroll-area-preview.has-scroll-area-overflow:not(.is-scroll-area-at-bottom) .pui-scroll-area-preview__gradient--bottom { opacity: 1; }

@media (max-width: 420px) {
  .pui-breadcrumb-preview .pui-breadcrumb-preview__label { max-width: 82px; }
}

/* Completed native mirrors: feedback, framing, grouped actions, and cards. */
.pui-alert-showcase,
.pui-aspect-ratio-showcase,
.pui-button-group-showcase {
  display: grid;
  gap: var(--pui-preview-space-step-12);
}

.pui-alert-demo {
  align-items: flex-start;
  padding: var(--pui-preview-space-lg);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-alert-demo__main {
  display: flex;
  flex: 1;
  gap: var(--pui-preview-space-normal);
  min-width: 0;
}

.pui-alert-demo__main > div {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xs);
}

.pui-alert-demo__main strong { color: var(--text); font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-label); }
.pui-alert-demo__main span { color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-alert-demo--info { background: var(--info-soft); }
.pui-alert-demo--success { background: var(--success-soft); }
.pui-alert-demo--warning { background: var(--warning-soft); }
.pui-alert-demo--danger { background: var(--danger-soft); }
.pui-alert-demo--center,
.pui-alert-demo--center .pui-alert-demo__main { align-items: center; }
.pui-alert-demo--center .pui-alert-demo__main > div { text-align: center; }

.pui-alert-showcase__hidden {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  min-height: 54px;
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  background: var(--surface-soft);
  border: 1px dashed var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-alert-showcase__hidden > span { flex: 1; min-width: 0; }
.pui-alert-showcase__hidden .pui-button { flex: 0 0 auto; min-width: 0; }
.pui-aspect-preview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-preview-space-sm);
}

.pui-aspect-preview__meta > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-step-3) var(--pui-preview-space-step-7);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-round);
}

.pui-aspect-preview {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
  color: var(--muted);
  background: var(--pui-aspect-preview-background, var(--surface-soft));
  border: 1px solid transparent;
  transition-property: padding-top;
  transition-duration: var(--pui-aspect-preview-duration, 500ms);
  transition-timing-function: var(--pui-aspect-preview-ease, cubic-bezier(0.2, 0, 0, 1));
}

.pui-aspect-preview.is-bordered { border-color: var(--border); }
.pui-aspect-preview--radius-none { border-radius: 0; }
.pui-aspect-preview--radius-small { border-radius: var(--pui-preview-radius-small); }
.pui-aspect-preview--radius-medium { border-radius: var(--pui-preview-radius-medium); }
.pui-aspect-preview--radius-large { border-radius: var(--pui-preview-radius-large); }
.pui-aspect-preview.is-overflow-visible { overflow: visible; }

.pui-aspect-preview__content {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--pui-preview-space-step-5);
  place-items: center;
  text-align: center;
}

.pui-aspect-preview__content strong { color: var(--text); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-aspect-preview__content span { color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-aspect-preview__badge {
  position: absolute;
  right: var(--pui-preview-content-gap);
  bottom: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-step-3) var(--pui-preview-space-sm);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-4);
}

.pui-button-group-preview {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--pui-preview-radius-medium);
  box-shadow: var(--preview-shadow-card, none);
  transition-property: opacity;
  transition-duration: var(--pui-button-group-duration, 500ms);
  transition-timing-function: var(--pui-button-group-ease, cubic-bezier(0.2, 0, 0, 1));
}

.pui-button-group-preview.is-block { display: flex; width: 100%; }
.pui-button-group-preview--vertical { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.pui-button-group-preview--round { border-radius: var(--pui-preview-radius-round); }
.pui-button-group-preview.is-bordered { border: 1px solid var(--border); }
.pui-button-group-preview.is-disabled { opacity: .56; }

.pui-button-group-preview > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  gap: var(--pui-preview-space-step-5);
  padding: 0 var(--pui-preview-space-step-11);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pui-button-group-preview.is-bordered > button + button { border-left: 1px solid var(--border); }
.pui-button-group-preview--vertical.is-bordered > button + button { border-top: 1px solid var(--border); border-left: 0; }
.pui-button-group-preview > button:disabled { cursor: not-allowed; }
.pui-button-group-preview--small > button { min-height: 30px; height: 30px; padding: 0 var(--pui-preview-space-normal); font-size: var(--pui-font-size-caption); }
.pui-button-group-preview--large > button { min-height: 42px; height: 42px; padding: 0 var(--pui-preview-space-lg); font-size: var(--pui-font-size-caption); }

.pui-card-showcase.is-header-borderless header { border-bottom-color: transparent; }
.pui-card-showcase.is-footer-borderless footer { border-top-color: transparent; }
.pui-card-showcase.has-shadow { box-shadow: var(--shadow-soft); }
.pui-card-showcase.is-clickable { cursor: pointer; }
.pui-card-showcase.is-disabled { opacity: .56; }
.pui-card-showcase.is-clickable:not(.is-disabled):hover { background: var(--surface-soft); transform: scale(.992); }
.pui-card-showcase__event {
  display: inline-flex;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  width: fit-content;
  max-width: 100%;
  padding: var(--pui-preview-space-step-5) var(--pui-preview-space-step-7);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-step-5);
}

@media (max-width: 420px) {
  .pui-alert-showcase__hidden { flex-wrap: wrap; }
  .pui-alert-showcase__hidden .pui-button { width: 100%; }
  .pui-button-group-preview > button { padding: 0 var(--pui-preview-content-gap); }
}

/* Native form foundations: H5 mirrors the WXML structure and keeps all state changes visible. */
.pui-input-preview {
  --pui-input-action-size: 32px;
  --pui-input-loading-size: 14px;
  display: grid;
  gap: var(--pui-preview-space-step-7);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  transition: opacity var(--pui-input-preview-duration) var(--pui-input-preview-ease);
}

.pui-input-preview__label,
.pui-field-showcase__label {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-xs);
  min-width: 0;
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-caption);
}

.pui-input-preview__label b { color: var(--danger); }

.pui-input-preview__control {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 var(--pui-preview-space-step-9);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-control);
  box-shadow: var(--preview-shadow-card);
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
  transition: border-color var(--pui-input-preview-duration) var(--pui-input-preview-ease), background-color var(--pui-input-preview-duration) var(--pui-input-preview-ease), box-shadow var(--pui-input-preview-duration) var(--pui-input-preview-ease), opacity var(--pui-input-preview-duration) var(--pui-input-preview-ease);
}

.pui-input-preview--small .pui-input-preview__control { min-height: 34px; padding-inline: var(--pui-preview-space-step-8); }
.pui-input-preview--large .pui-input-preview__control { min-height: 50px; padding-inline: var(--pui-preview-space-step-12); }
.pui-input-preview--borderless .pui-input-preview__control { background: var(--surface-soft); border-color: transparent; }

.pui-input-preview__control input {
  flex: 1 1 0;
  width: 0;
  max-width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0;
  color: var(--text);
  font: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

.pui-input-preview--small .pui-input-preview__control input { height: 32px; font-size: var(--pui-font-size-caption); }
.pui-input-preview--large .pui-input-preview__control input { height: 44px; font-size: var(--pui-font-size-body-medium); }
.pui-input-preview--align-center .pui-input-preview__control input { text-align: center; }
.pui-input-preview--align-right .pui-input-preview__control input { text-align: right; }
.pui-input-preview__control input:disabled { cursor: not-allowed; }

.pui-input-preview__slot,
.pui-input-preview__suffix,
.pui-input-preview__trailing > .icon {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  color: var(--muted);
}

.pui-input-preview__slot > .pui-button { min-width: 0; }

.pui-input-preview__trailing {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
  margin-left: auto;
}

.pui-input-preview__clear-host,
.pui-input-preview__loading-host {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.pui-input-preview__clear-host {
  width: var(--pui-input-action-size);
  height: var(--pui-input-action-size);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--pui-input-preview-duration) var(--pui-input-preview-ease), visibility var(--pui-input-preview-duration) var(--pui-input-preview-ease);
}

.pui-input-preview--clear-focus:not(:focus-within) .pui-input-preview__clear-host {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.pui-input-preview__loading-host {
  width: var(--pui-input-loading-size);
  height: var(--pui-input-loading-size);
}

.pui-input-preview__feedback {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
  min-width: 0;
}

.pui-input-preview__feedback em,
.pui-field-showcase__feedback,
.pui-input-preview__feedback em { min-width: 0; overflow-wrap: anywhere; }
.pui-input-preview__counter { flex: 0 0 auto; color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-input-preview--status-success .pui-input-preview__control { border-color: var(--success); }
.pui-input-preview--status-warning .pui-input-preview__control { border-color: var(--warning); }
.pui-input-preview--status-error .pui-input-preview__control { border-color: var(--danger); }
.pui-input-preview--status-success .pui-input-preview__feedback em { color: var(--success); }
.pui-input-preview--status-warning .pui-input-preview__feedback em { color: var(--warning); }
.pui-input-preview--status-error .pui-input-preview__feedback em,
.pui-field-showcase__feedback.is-error { color: #b91c1c; }
.pui-input-preview:focus-within .pui-input-preview__control,
.pui-input-preview--focus .pui-input-preview__control { border-color: var(--text); outline: 2px solid color-mix(in srgb, var(--text) 12%, transparent); outline-offset: 1px; }
.pui-input-preview--status-success:focus-within .pui-input-preview__control,
.pui-input-preview--status-success.pui-input-preview--focus .pui-input-preview__control { border-color: var(--success); }
.pui-input-preview--status-warning:focus-within .pui-input-preview__control,
.pui-input-preview--status-warning.pui-input-preview--focus .pui-input-preview__control { border-color: var(--warning); }
.pui-input-preview--status-error:focus-within .pui-input-preview__control,
.pui-input-preview--status-error.pui-input-preview--focus .pui-input-preview__control { border-color: var(--danger); outline-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.pui-input-preview--readonly .pui-input-preview__control { background: var(--surface-soft); }
.pui-input-preview--disabled { opacity: .5; }
.pui-input-preview--loading { opacity: .72; }
.pui-input-preview__extra { min-width: 0; }
.pui-input-preview__extra .pui-cell { min-width: 0; box-shadow: none; }

.pui-field-showcase > .pui-showcase-section + .pui-showcase-section {
  margin-top: var(--pui-preview-section-gap);
}

.pui-field-showcase__stack {
  display: grid;
  gap: var(--pui-preview-space-lg);
  min-width: 0;
}

.pui-field-preview {
  display: block;
}

.pui-field-preview--status-success { border-color: var(--success); }
.pui-field-preview--status-warning { border-color: var(--warning); }
.pui-field-preview--status-error { border-color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 16%, transparent); }

.pui-field-preview__wrap {
  display: grid;
  grid-template-columns: var(--pui-field-preview-label-width) minmax(0, 1fr) auto;
  column-gap: var(--pui-preview-space-normal);
  align-items: center;
  min-width: 0;
}

.pui-field-preview--has-supporting .pui-field-preview__wrap { align-items: start; }

.pui-field-preview--label-top .pui-field-preview__wrap {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: var(--pui-preview-space-sm);
}

.pui-field-preview__label {
  display: flex;
  gap: var(--pui-preview-space-step-3);
  align-items: center;
  min-width: 0;
  min-height: 34px;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-body-medium);
  overflow-wrap: anywhere;
}

.pui-field-preview--label-right .pui-field-preview__label {
  justify-content: flex-end;
  text-align: right;
}

.pui-field-preview--label-top .pui-field-preview__label {
  grid-column: 1 / -1;
  min-height: 0;
}

.pui-field-preview__required { color: var(--danger); }
.pui-field-preview__label-slot { display: inline-flex; gap: var(--pui-preview-space-xs); align-items: center; min-width: 0; }
.pui-field-preview__controls { display: flex; flex-direction: column; min-width: 0; }
.pui-field-preview__content { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.pui-field-preview--content-right .pui-field-preview__content { justify-content: flex-end; }
.pui-field-preview__input { min-width: 0; max-width: 100%; }
.pui-field-preview__content > .pui-input-preview { flex: 1 1 auto; gap: 0; }
.pui-field-preview__input .pui-input-preview__control {
  min-height: 34px;
  padding: 0 var(--pui-preview-space-sm);
  background: transparent;
  border-color: transparent;
  border-radius: var(--pui-preview-radius-control, var(--pui-preview-radius-medium));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pui-field-preview__input:focus-within .pui-input-preview__control { border-color: var(--text); outline: 2px solid color-mix(in srgb, var(--text) 12%, transparent); outline-offset: 1px; }
.pui-field-preview--status-success .pui-field-preview__input:focus-within .pui-input-preview__control { border-color: var(--success); }
.pui-field-preview--status-warning .pui-field-preview__input:focus-within .pui-input-preview__control { border-color: var(--warning); }
.pui-field-preview--status-error .pui-field-preview__input:focus-within .pui-input-preview__control { border-color: var(--danger); outline-color: color-mix(in srgb, var(--danger) 20%, transparent); }

.pui-field-preview__help,
.pui-field-preview__message {
  width: 100%;
  min-width: 0;
  margin-top: var(--pui-preview-space-xs);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  overflow-wrap: anywhere;
  transition: color var(--pui-field-preview-duration) var(--pui-ease-standard), opacity var(--pui-field-preview-duration) var(--pui-ease-standard);
}

.pui-field-preview__help,
.pui-field-preview__message { color: var(--muted); }
.pui-field-preview--status-success .pui-field-preview__message { color: var(--success); }
.pui-field-preview--status-warning .pui-field-preview__message { color: var(--warning); }
.pui-field-preview--status-error .pui-field-preview__message { color: var(--danger); }
.pui-field-preview__message.is-changing {
  animation: pui-field-preview-message-color var(--pui-field-preview-duration) var(--pui-ease-standard) both;
}

@keyframes pui-field-preview-message-color {
  from { color: var(--pui-field-preview-from-color); }
  to { color: var(--pui-field-preview-to-color); }
}

.pui-field-preview__message .pui-tag { width: max-content; max-width: 100%; }
.pui-field-preview__controls > .pui-tag { align-self: flex-start; max-width: 100%; margin-top: var(--pui-preview-space-xs); }

.pui-field-preview__arrow {
  display: inline-flex;
  align-self: start;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  color: var(--muted);
}

.pui-field-preview--label-top .pui-field-preview__arrow { grid-column: 2; grid-row: 2; }
.pui-field-preview--label-top .pui-field-preview__controls { grid-column: 1; grid-row: 2; }

@media (prefers-reduced-motion: reduce) {
  .pui-field-preview__help,
  .pui-field-preview__message { transition-duration: 1ms; animation-duration: 1ms; }
}


.pui-label-showcase { gap: var(--pui-preview-space-step-12); }
.pui-label-showcase__label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--pui-preview-space-step-3); color: var(--text); }
.pui-label-showcase__label > span { font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); }
.pui-label-showcase__label i { margin-left: var(--pui-preview-space-step-3); color: var(--danger); font-style: normal; }
.pui-label-showcase__label.is-disabled { opacity: .5; }

/* Props-complete native mirrors. */
.pui-button--round { border-radius: var(--pui-preview-radius-round); }
.pui-button--circle,
.pui-button--square { width: 44px; min-width: 44px; padding-inline: 0; }
.pui-button--circle { border-radius: var(--pui-preview-radius-round); }
.pui-button--ghost { background: transparent; border-color: currentColor; box-shadow: none; }
.pui-button--transparent { background: transparent; border-color: transparent; box-shadow: none; }
.pui-button { transition-delay: var(--pui-button-hover-start, 0ms); }
.pui-button:active { transition-delay: 0ms; transition-duration: var(--pui-button-hover-stay, 500ms); }
.pui-spinner.is-paused { animation-play-state: paused; }
.pui-spinner.is-reverse { animation-direction: reverse; }
.pui-spinner.is-reduced-motion { animation: none; transform: rotate(30deg); }
.pui-button__loading-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-loading-inline-dots { display: inline-flex; align-items: center; gap: var(--pui-preview-space-step-3); color: var(--pui-loading-inline-color); }
.pui-loading-inline-dots i { width: calc(var(--pui-loading-inline-size) / 3); height: calc(var(--pui-loading-inline-size) / 3); min-width: 3px; min-height: 3px; background: currentColor; border-radius: var(--pui-preview-radius-round); animation: pui-loading-preview-dot var(--pui-loading-inline-duration) ease-in-out infinite alternate; }
.pui-loading-inline-dots i:nth-child(2) { animation-delay: 500ms; }
.pui-loading-inline-dots i:nth-child(3) { animation-delay: 500ms; }
.pui-loading-inline-dots.is-paused i { animation-play-state: paused; }
.pui-loading-inline-dots.is-reverse i { animation-direction: reverse; }
.pui-loading-inline-dots.is-reduced-motion i { animation: none; }
.pui-loading-inline-dots.is-reduced-motion i:nth-child(2) { opacity: .68; }
.pui-loading-inline-dots.is-reduced-motion i:nth-child(3) { opacity: .38; }
.pui-cell.is-clickable { cursor: pointer; }
.pui-cell.is-borderless { border-color: transparent; }
.pui-cell__main > small { display: block; margin-top: var(--pui-preview-space-xxs); overflow: hidden; color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); text-overflow: ellipsis; white-space: nowrap; }
.pui-cell__required { margin-right: var(--pui-preview-space-step-3); color: var(--danger); font-style: normal; }
.pui-tag--round { border-radius: var(--pui-preview-radius-round); }
.pui-tag--mark { border-radius: var(--pui-preview-radius-small) var(--pui-preview-radius-round) var(--pui-preview-radius-round) var(--pui-preview-radius-small); }
.pui-tag.is-disabled { opacity: .52; }
.pui-tag > span:last-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pui-loading-showcase { display: grid; gap: var(--pui-preview-section-gap); }
.pui-loading-showcase > .pui-showcase-section { display: grid; gap: var(--pui-preview-space-normal); }
.pui-loading-preview { display: grid; min-height: 118px; width: 100%; place-items: center; color: var(--text); overflow: hidden; }
.pui-loading-preview.is-fullscreen { position: relative; min-height: 276px; padding: var(--pui-preview-panel-padding-spacious); background: var(--surface-strong); box-shadow: var(--shadow); backdrop-filter: var(--blur); }
.pui-loading-preview__content { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; gap: var(--pui-preview-space-normal); padding: var(--pui-preview-space-xs); opacity: 0; transform: scale(.98); transition: opacity var(--pui-loading-duration) var(--pui-ease-standard), transform var(--pui-loading-duration) var(--pui-ease-standard); }
.pui-loading-preview__content.is-active { opacity: 1; transform: scale(1); }
.pui-loading-preview__content.is-inactive { pointer-events: none; }
.pui-loading-preview__content.is-vertical { flex-direction: column; text-align: center; }
.pui-loading-preview__indicator {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  flex: 0 0 var(--pui-loading-size);
  width: var(--pui-loading-size);
  height: var(--pui-loading-size);
  color: var(--pui-loading-color);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--pui-preview-radius-round);
  animation: pui-loading-preview-spin var(--pui-loading-duration) linear infinite;
}
.pui-loading-preview__indicator--spinner { border: 0; animation-timing-function: steps(12); }
.pui-loading-preview__spinner-dot { position: absolute; inset: 0; display: block; transform-origin: center; }
.pui-loading-preview__spinner-dot::before { display: block; width: 2px; height: 25%; margin: 0 auto; background: currentColor; border-radius: var(--pui-preview-radius-round); content: ''; }
.pui-loading-preview__spinner-dot-0 { transform: rotate(0deg); opacity: 0; }
.pui-loading-preview__spinner-dot-1 { transform: rotate(30deg); opacity: .08; }
.pui-loading-preview__spinner-dot-2 { transform: rotate(60deg); opacity: .16; }
.pui-loading-preview__spinner-dot-3 { transform: rotate(90deg); opacity: .24; }
.pui-loading-preview__spinner-dot-4 { transform: rotate(120deg); opacity: .32; }
.pui-loading-preview__spinner-dot-5 { transform: rotate(150deg); opacity: .4; }
.pui-loading-preview__spinner-dot-6 { transform: rotate(180deg); opacity: .48; }
.pui-loading-preview__spinner-dot-7 { transform: rotate(210deg); opacity: .56; }
.pui-loading-preview__spinner-dot-8 { transform: rotate(240deg); opacity: .64; }
.pui-loading-preview__spinner-dot-9 { transform: rotate(270deg); opacity: .72; }
.pui-loading-preview__spinner-dot-10 { transform: rotate(300deg); opacity: .8; }
.pui-loading-preview__spinner-dot-11 { transform: rotate(330deg); opacity: .88; }
.pui-loading-preview__dots { display: inline-flex; align-items: center; gap: var(--pui-preview-space-step-5); color: var(--pui-loading-color); }
.pui-loading-preview__dots i { width: calc(var(--pui-loading-size) / 3); height: calc(var(--pui-loading-size) / 3); min-width: 5px; min-height: 5px; background: currentColor; border-radius: var(--pui-preview-radius-round); animation: pui-loading-preview-dot var(--pui-loading-duration) ease-in-out infinite alternate; }
.pui-loading-preview__dots i:nth-child(2) { animation-delay: 500ms; }
.pui-loading-preview__dots i:nth-child(3) { animation-delay: 500ms; }
.pui-loading-preview__content.is-paused .pui-loading-preview__indicator,
.pui-loading-preview__content.is-paused .pui-loading-preview__dots i { animation-play-state: paused; }
.pui-loading-preview__content.is-reverse .pui-loading-preview__indicator,
.pui-loading-preview__content.is-reverse .pui-loading-preview__dots i { animation-direction: reverse; }
.pui-loading-preview__content.is-reduced-motion .pui-loading-preview__indicator,
.pui-loading-preview__content.is-reduced-motion .pui-loading-preview__dots i { animation: none; }
.pui-loading-preview__content.is-reduced-motion .pui-loading-preview__indicator { transform: rotate(30deg); }
.pui-loading-preview__content.is-reduced-motion .pui-loading-preview__dots i:nth-child(2) { opacity: .68; }
.pui-loading-preview__content.is-reduced-motion .pui-loading-preview__dots i:nth-child(3) { opacity: .38; }
.pui-loading-preview__text { min-width: 0; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }
.pui-loading-preview__progress { color: var(--text); font-size: var(--pui-font-size-caption); font-variant-numeric: tabular-nums; }
.pui-loading-showcase__actions { display: flex; flex-wrap: wrap; gap: var(--pui-preview-space-sm); }
@keyframes pui-loading-preview-spin { to { transform: rotate(360deg); } }
@keyframes pui-loading-preview-dot { from { opacity: .3; transform: translateY(0); } to { opacity: 1; transform: translateY(-4px); } }

.icon-library__preview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--pui-preview-space-step-12); align-items: center; margin: var(--pui-preview-space-lg) 0; padding: var(--pui-preview-space-step-13); background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-medium); }
.icon-library__preview-glyph { display: grid; width: 56px; height: 56px; place-items: center; color: var(--text); background: var(--surface-soft); border-radius: var(--pui-preview-radius-step-7); }
.icon-library__preview-copy strong,
.icon-library__preview-copy span { display: block; }
.icon-library__preview-copy strong { color: var(--text); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.icon-library__preview-copy span,
.icon-library__preview em { overflow: hidden; color: var(--muted); font-size: var(--pui-font-size-caption); font-style: normal; line-height: var(--pui-line-height-caption); text-overflow: ellipsis; white-space: nowrap; }
.icon-library__preview em { max-width: 130px; text-align: right; }

@media (max-width: 420px) {
  .pui-loading-preview { min-height: 102px; }
  .pui-loading-preview.is-fullscreen { min-height: 220px; }
  .icon-library__preview { grid-template-columns: auto minmax(0, 1fr); }
  .icon-library__preview em { grid-column: 2; max-width: none; text-align: left; }
}

/* Final documentation surface. Keep the default state intentionally quiet;
   visual switches opt components into effects without changing layout. */
:root {
  --page: #fafafa;
  --page-strong: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #f4f4f5;
  --surface-solid: #ffffff;
  --text: #09090b;
  --muted: #52525b;
  --subtle: #a1a1aa;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --pui-control-outline-color: #a1a1aa;
  --pui-divider-color: #a1a1aa;
  --glass-border: #e4e4e7;
  --highlight: transparent;
  --brand: #18181b;
  --brand-2: #27272a;
  --brand-soft: #f4f4f5;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --shadow: none;
  --shadow-soft: none;
  --blur: none;
  --pui-site-radius-control: var(--pui-preview-radius-small);
  --pui-site-radius-surface: var(--pui-preview-radius-medium);
  --pui-site-radius-popup: var(--pui-preview-radius-large);
  --control-height: 36px;
  --pui-preview-shell-gap: var(--pui-preview-content-gap);
  font-family: var(--pui-font-family-sans);
}

body,
.app-shell {
  background: var(--page);
}

body {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-normal);
}

.app-shell {
  min-height: 100vh;
  overflow-x: hidden;
  color-scheme: light;
  background: var(--page);
}

.app-shell[data-theme="dark"] {
  color-scheme: dark;
  --page: #09090b;
  --page-strong: #09090b;
  --surface: #0f0f11;
  --surface-strong: #0f0f11;
  --surface-soft: #18181b;
  --surface-solid: #18181b;
  --text: #fafafa;
  --muted: #d4d4d8;
  --subtle: #71717a;
  --border: #27272a;
  --border-strong: #3f3f46;
  --pui-control-outline-color: #71717a;
  --pui-divider-color: #a1a1aa;
  --glass-border: #27272a;
  --brand: #fafafa;
  --brand-2: #e4e4e7;
  --brand-soft: #27272a;
  --danger: #f87171;
  --danger-soft: #2b1517;
  --success: #4ade80;
  --success-soft: #122719;
  --warning: #fbbf24;
  --warning-soft: #2b210c;
  --info: #60a5fa;
  --info-soft: #172554;
}

/* Native form nodes are only platform bridges or intrinsic browser controls.
   Keep their system chrome on the same palette as the PUI shell; visible menus
   still use the shared PUI Select surface below. */
.app-shell :is(input, select, textarea, option, optgroup) {
  color-scheme: inherit;
}

.app-shell select option,
.app-shell select optgroup {
  color: var(--text);
  background-color: var(--surface-solid);
}

.app-shell[data-shadow="on"] {
  --shadow: 0 14px 36px rgba(9, 9, 11, 0.1);
  --shadow-soft: 0 6px 18px rgba(9, 9, 11, 0.08);
}

.app-shell[data-theme="dark"][data-shadow="on"] {
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.app-shell[data-frost="on"] {
  --surface: rgba(255, 255, 255, 0.78);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(228, 228, 231, 0.86);
  --blur: blur(14px) saturate(120%);
}

.app-shell[data-theme="dark"][data-frost="on"] {
  --surface: rgba(15, 15, 17, 0.78);
  --surface-strong: rgba(15, 15, 17, 0.9);
  --glass-border: rgba(63, 63, 70, 0.86);
}

.app-shell[data-radius="normal"] {
  --pui-site-radius-control: var(--pui-preview-radius-small);
  --pui-site-radius-surface: var(--pui-preview-radius-medium);
  --pui-site-radius-popup: var(--pui-preview-radius-large);
}

.app-shell[data-radius="large"] {
  --pui-site-radius-control: var(--pui-preview-radius-large);
  --pui-site-radius-surface: var(--pui-preview-radius-xlarge);
  --pui-site-radius-popup: var(--pui-preview-radius-step-22);
}

.topbar {
  grid-template-columns: 238px minmax(0, 1fr) auto;
  min-height: 57px;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-xl);
  gap: var(--pui-preview-space-xl);
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.brand {
  gap: var(--pui-preview-space-step-9);
}

.brand__mark {
  width: 25px;
  height: 25px;
  background: var(--brand);
  border: 0;
  border-radius: var(--pui-preview-radius-step-5);
  box-shadow: none;
}

.brand__name {
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-caption);
}

.brand__sub {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
  line-height: var(--pui-line-height-caption);
}

.brand__version,
.status {
  height: 20px;
  padding: 0 var(--pui-preview-space-sm);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
}

.topbar__nav {
  justify-content: flex-start;
  gap: var(--pui-preview-space-step-3);
}

.topbar__link {
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
  border-radius: var(--pui-preview-radius-step-5);
}

.topbar__link:hover,
.topbar__link.is-active {
  color: var(--text);
  background: var(--surface-soft);
}

.topbar__link.is-active::after {
  display: none;
}

.topbar__controls {
  gap: var(--pui-preview-space-xxs);
}

.theme-toggle,
.visual-toggle,
.icon-button,
.mini-action,
.tab,
.device-select {
  border: 1px solid var(--border);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.theme-toggle,
.visual-toggle {
  height: 30px;
  padding: 0 var(--pui-preview-content-gap);
  gap: var(--pui-preview-space-sm);
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  border-radius: var(--pui-preview-radius-step-5);
}

.theme-toggle:hover,
.visual-toggle:hover,
.visual-toggle.is-active {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--border);
}

.visual-toggle {
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
}

.visual-toggle.is-active {
  font-weight: var(--pui-font-weight-semibold);
}

.visual-toggle__dot {
  width: 7px;
  height: 7px;
  background: var(--subtle);
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
}

.visual-toggle.is-active .visual-toggle__dot {
  background: var(--text);
  box-shadow: none;
}

.theme-toggle__icon {
  min-width: 31px;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
}

.theme-toggle__track {
  width: 28px;
  height: 16px;
  background: var(--text);
  border-radius: var(--pui-preview-radius-round);
}

.theme-toggle__thumb {
  top: var(--pui-preview-space-step-3);
  left: var(--pui-preview-space-step-15);
  width: 10px;
  height: 10px;
  background: var(--surface-solid);
}

.app-shell[data-theme="dark"] .theme-toggle__thumb {
  left: var(--pui-preview-space-step-3);
}

.workspace {
  grid-template-columns: 238px minmax(0, 1fr) 304px;
  min-height: calc(100vh - 57px);
}

.sidebar,
.inspector {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.sidebar {
  padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12) var(--pui-preview-space-step-32);
  border-right: 1px solid var(--border);
  box-shadow: none;
}

.inspector {
  padding: var(--pui-preview-space-step-24) var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-42);
  border-left: 1px solid var(--border);
  box-shadow: none;
}

.search {
  height: 34px;
  padding: 0 var(--pui-preview-space-normal);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-step-5);
  box-shadow: none;
}

.search:focus-within {
  border-color: var(--text);
  outline: 2px solid rgba(24, 24, 27, 0.1);
  outline-offset: 1px;
}

.app-shell[data-theme="dark"] .search:focus-within {
  outline-color: rgba(250, 250, 250, 0.14);
}

.component-groups {
  margin-top: var(--pui-preview-space-lg);
}

.component-group {
  margin: 0 0 var(--pui-preview-space-step-17);
}

.component-group__title {
  margin: 0 var(--pui-preview-content-gap) var(--pui-preview-space-step-5);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.component-item {
  min-height: 31px;
  margin: var(--pui-preview-space-step-1) 0;
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
  border-radius: var(--pui-preview-radius-step-5);
}

.component-item:hover,
.component-item.is-active {
  color: var(--text);
  background: var(--surface-soft);
  box-shadow: none;
}

.component-item.is-active .component-item__name {
  font-weight: var(--pui-font-weight-semibold);
}

.status-dot {
  height: 18px;
  padding: 0 var(--pui-preview-space-step-5);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: transparent;
  border: 0;
}

.main {
  min-width: 0;
  background: var(--page);
}

.preview-toolbar {
  top: var(--pui-site-topbar-height);
  min-height: 113px;
  padding: var(--pui-preview-space-step-24) var(--pui-preview-space-step-32) var(--pui-preview-space-step-17);
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.preview-kicker,
.inspector__category {
  margin: 0 0 var(--pui-preview-space-xs);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.preview-toolbar h1,
.inspector h2 {
  color: var(--text);
  font-weight: var(--pui-font-weight-semibold);
  letter-spacing: 0;
}

.preview-toolbar h1 {
  margin: 0;
  font-size: var(--pui-font-size-headline);
  line-height: var(--pui-line-height-title-large);
}

.toolbar-actions {
  gap: var(--pui-preview-space-step-7);
}

.tabs {
  gap: var(--pui-preview-space-xxs);
  padding: var(--pui-preview-space-step-3);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-small);
  box-shadow: none;
}

.tab {
  height: 27px;
  padding: 0 var(--pui-preview-space-normal);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
  background: transparent;
  border-color: transparent;
  border-radius: var(--pui-preview-radius-step-4);
}

.tab.is-active {
  color: var(--text);
  background: var(--surface-solid);
  border-color: var(--border);
}

.device-select,
.icon-button,
.mini-action {
  height: 32px;
  color: var(--muted);
  background: var(--surface-solid);
  border-radius: var(--pui-preview-radius-step-5);
}

.device-select {
  min-width: 164px;
  padding: 0 var(--pui-preview-space-step-9);
}

.icon-button {
  width: 32px;
  padding: 0;
  color: var(--text);
}

.preview-stage {
  display: block !important;
  min-height: calc(100vh - 170px);
  padding: var(--pui-preview-space-xxl) var(--pui-preview-space-step-32) var(--pui-preview-space-step-64);
  background: var(--page);
}

.preview-canvas {
  width: min(100%, 760px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
  box-shadow: var(--shadow-soft);
}

.preview-canvas__bar {
  height: 38px;
  padding: 0 var(--pui-preview-space-lg);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}

.preview-canvas__body {
  min-height: 690px;
  padding: var(--pui-preview-space-step-34) var(--pui-preview-space-step-22);
  background: var(--surface-solid);
}

.phone {
  width: min(100%, var(--device-width, 393px));
  min-height: 622px;
  padding: var(--pui-preview-space-step-15);
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--pui-site-radius-popup);
  box-shadow: var(--shadow);
}

.phone__status {
  height: 22px;
  padding: 0 var(--pui-preview-space-step-1) var(--pui-preview-space-normal);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.phone__title {
  height: auto;
  padding: 0 0 var(--pui-preview-space-step-12);
  color: var(--text);
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-large);
  border-bottom: 1px solid var(--border);
}

.phone__content {
  min-height: 548px;
  padding-top: var(--pui-preview-space-lg);
}

.demo-section,
.pui-card-showcase-wrap,
.pui-badge-showcase,
.pui-avatar-showcase,
.pui-image-showcase,
.pui-tabs-showcase,
.pui-collapse-showcase,
.pui-switch-showcase,
.pui-textarea-showcase,
.pui-form-showcase,
.pui-stepper-showcase,
.pui-slider-showcase,
.pui-toast-showcase,
.pui-dialog-showcase,
.pui-progress-showcase,
.pui-picker-showcase,
.pui-date-time-picker-showcase,
.pui-rate-showcase,
.pui-upload-showcase,
.pui-breadcrumb-showcase,
.pui-scroll-area-showcase {
  gap: var(--pui-preview-shell-gap);
}

.pui-showcase-label {
  padding: var(--pui-preview-space-xxs) var(--pui-preview-space-xxs) 0;
}

.pui-showcase-label strong {
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.pui-showcase-label span,
.demo-note {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
}

.pui-button,
.pui-cell,
.pui-field,
.pui-dialog,
.pui-empty,
.pui-result,
.pui-grid,
.pui-image,
.pui-card-showcase,
.pui-alert-demo,
.pui-input-preview,
.pui-textarea-preview,
.pui-picker-preview,
.pui-upload-preview__file,
.pui-select-trigger,
.pui-select-menu,
.field-demo,
.label-demo,
.toast-stage,
.native-overlay-demo > div,
.overlay-panel,
.pui-popup-preview,
.pui-sheet-preview,
.pui-popover-preview,
.pui-tooltip-preview,
.pui-calendar-preview,
.pui-table-preview,
.pui-notice-preview,
.pui-breadcrumb-preview,
.pui-grid-preview,
.icon-card,
.icon-library__hero,
.icon-toolbar {
  border-radius: var(--pui-site-radius-surface);
  box-shadow: none;
}

.pui-button {
  min-height: 38px;
  padding: 0 var(--pui-preview-space-step-13);
  color: var(--text);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-semibold);
  background: var(--surface-solid);
  background-image: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--pui-site-radius-control);
  transition: background-color 500ms ease, border-color 500ms ease, color 500ms ease;
}

.pui-button:hover:not(.is-disabled) {
  background: var(--surface-soft);
  border-color: var(--text);
}

.pui-button:active:not(.is-disabled) {
  transform: translateY(1px);
}

.pui-button--primary,
.pui-button--success,
.pui-button--warning {
  color: var(--surface-solid);
  background: var(--brand);
  border-color: var(--brand);
}

.pui-button--primary:hover:not(.is-disabled),
.pui-button--success:hover:not(.is-disabled),
.pui-button--warning:hover:not(.is-disabled) {
  color: var(--surface-solid);
  background: var(--brand-2);
  border-color: var(--brand-2);
}

.app-shell[data-theme="dark"] .pui-button--primary,
.app-shell[data-theme="dark"] .pui-button--success,
.app-shell[data-theme="dark"] .pui-button--warning {
  color: var(--surface-solid);
  background: var(--brand);
  border-color: var(--brand);
}

.pui-button--danger,
.pui-button--danger.pui-button--base {
  color: var(--danger);
  background: transparent;
  border-color: var(--danger);
}

.pui-button--outline,
.pui-button--text,
.pui-button--ghost,
.pui-button--transparent {
  background: transparent;
  box-shadow: none;
}

.pui-button--text {
  padding-inline: var(--pui-preview-space-step-4);
  border-color: transparent;
}

.pui-button--block {
  width: 100%;
  min-width: 0;
}

.pui-button.is-disabled,
.pui-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pui-cell {
  min-height: 60px;
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-11);
  background: var(--surface-solid);
  border: 1px solid var(--border);
}

.pui-cell + .pui-cell {
  margin-top: var(--pui-preview-content-gap);
}

.pui-cell__main > strong,
.pui-card-showcase strong,
.pui-alert-demo strong {
  color: var(--text);
  font-weight: var(--pui-font-weight-semibold);
}

.pui-cell__main > span,
.pui-cell > em,
.pui-card-showcase p,
.pui-alert-demo span {
  color: var(--muted);
}

.pui-field,
.field-demo,
.label-demo,
.pui-textarea-preview {
  background: var(--surface-solid);
  border: 1px solid var(--border);
}

.pui-field:focus-within,
.field-demo:focus-within,
.label-demo:focus-within,
.pui-textarea-preview:focus-within {
  border-color: var(--text);
  outline: 2px solid rgba(24, 24, 27, 0.1);
  outline-offset: 1px;
}

.app-shell[data-theme="dark"] .pui-field:focus-within,
.app-shell[data-theme="dark"] .field-demo:focus-within,
.app-shell[data-theme="dark"] .label-demo:focus-within,
.app-shell[data-theme="dark"] .pui-textarea-preview:focus-within {
  outline-color: rgba(250, 250, 250, 0.14);
}

.pui-switch {
  box-shadow: none;
}

.pui-tag,
.pui-badge,
.pui-avatar,
.pui-rate button.is-active {
  box-shadow: none;
}

.pui-tag--primary,
.pui-tag--success,
.pui-tag--warning,
.pui-tag--danger {
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.overlay-box,
.pui-popover-showcase__canvas,
.pui-tooltip-showcase__canvas,
.pui-action-sheet-showcase .overlay-box,
.pui-overlay-showcase .overlay-box {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: none;
}

.overlay-panel,
.pui-popup-preview,
.pui-sheet-preview,
.pui-popover-preview,
.pui-dialog,
.action-sheet-preview,

.pui-popup-preview__header {
  min-height: 64px;
  padding: var(--pui-preview-space-step-11) var(--pui-preview-space-step-12);
  border-bottom: 1px solid var(--border);
}

.pui-popup-preview__actions {
  gap: var(--pui-preview-space-sm);
  min-width: 60px;
}

.pui-popup-preview__actions--right {
  justify-content: flex-end;
}

.pui-popup-preview__icon {
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-round);
}

.pui-popup-preview__icon:hover {
  background: var(--surface-solid);
  border-color: var(--text);
}

.pui-popup-preview__icon--check {
  color: var(--success);
}

.pui-popup-preview__icon--close {
  color: var(--muted);
}

.pui-popup-preview__title-area {
  padding: var(--pui-preview-space-xs) var(--pui-preview-content-gap) 0;
}

.pui-popup-preview__title-area strong {
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-semibold);
}

.pui-popup-preview__title-area span,
.pui-popup-preview__body p {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.pui-popup-preview__body {
  padding: var(--pui-preview-space-lg);
}

.pui-progress span,
.pui-slider span {
  background: var(--brand);
}

.pui-slider i {
  width: var(--pui-slider-thumb-size, 28px);
  height: var(--pui-slider-thumb-size, 28px);
  background: var(--surface-solid);
  border-color: var(--brand);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .pui-slider span,
  .pui-slider i {
    transition-duration: 1ms !important;
  }
}

.spec-sheet,
.code-stage {
  width: min(100%, 760px);
  margin: var(--pui-preview-space-xl) auto 0;
}

.spec-sheet__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--pui-preview-panel-padding-spacious);
  padding: 0 0 var(--pui-preview-space-step-12);
  border-bottom: 1px solid var(--border);
}

.spec-sheet__head h2 {
  margin: 0;
  font-size: var(--pui-font-size-body-large);
  font-weight: var(--pui-font-weight-semibold);
}

.spec-sheet__head p {
  max-width: 340px;
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-align: right;
}

.state-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
  padding-top: var(--pui-preview-space-step-12);
}

.state-grid div {
  min-height: 38px;
  padding: var(--pui-preview-space-step-9) var(--pui-preview-space-normal);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
}

.state-grid span,
.meta-grid span {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.state-grid strong,
.meta-grid strong {
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.inspector__header {
  gap: var(--pui-preview-content-gap);
  padding-bottom: var(--pui-preview-space-step-16);
  border-bottom: 1px solid var(--border);
}

.inspector h2 {
  margin: 0;
  font-size: var(--pui-font-size-title-medium);
  line-height: var(--pui-line-height-title-small);
}

.inspector p {
  margin-top: var(--pui-preview-space-step-7);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-label);
}

.meta-grid {
  gap: var(--pui-preview-space-sm);
  margin-top: var(--pui-preview-space-step-16);
  background: transparent;
  border: 0;
}

.meta-grid div {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-content-gap) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.panel {
  margin-top: var(--pui-preview-space-step-22);
  padding: 0;
  background: transparent;
  border: 0;
}

.panel__title {
  margin-bottom: var(--pui-preview-content-gap);
  padding: 0;
  border: 0;
}

.panel__title h3 {
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-semibold);
}

.props-panel {
  gap: var(--pui-preview-space-step-7);
}

.prop-control {
  gap: var(--pui-preview-space-step-5);
  min-width: 0;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-step-9);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: none;
}

.prop-control > .prop-control__label {
  overflow: hidden;
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prop-control input,
.prop-control select,
.prop-control textarea {
  min-height: 28px;
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-sm);
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: var(--pui-preview-radius-step-4);
  box-shadow: none;
}

.prop-control input:focus,
.prop-control select:focus,
.prop-control textarea:focus {
  border-color: var(--text);
  outline: 0;
}

.prop-control input.is-invalid,
.prop-control textarea.is-invalid {
  color: var(--danger);
  border-color: var(--danger);
}

.prop-control__validation {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--danger);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.prop-control input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  accent-color: var(--brand);
}

/* Radio / RadioGroup: native radio inputs mirror the independent relation contract. */
body .app-shell[data-page-mode] .preview-stage .pui-radio-showcase,
body .app-shell[data-page-mode] .preview-stage .pui-radio-demo-section,
body .app-shell[data-page-mode] .preview-stage .pui-radio-group-preview {
  display: grid;
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-radio-showcase { gap: var(--pui-section-gap); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-demo-section { gap: var(--pui-preview-content-gap); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-demo-section > h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .preview-stage .pui-radio-group-preview { gap: var(--pui-preview-content-gap); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-group-preview.is-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-radio-preview {
  position: relative;
  display: inline-flex;
  gap: var(--pui-preview-space-sm);
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-normal);
  color: var(--text);
  background: var(--preview-surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-control);
  box-shadow: var(--preview-shadow-card);
  cursor: pointer;
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
  transition: color var(--pui-radio-duration) var(--pui-ease-standard), background-color var(--pui-radio-duration) var(--pui-ease-standard), border-color var(--pui-radio-duration) var(--pui-ease-standard), border-radius var(--pui-radio-duration) var(--pui-ease-standard), box-shadow var(--pui-radio-duration) var(--pui-ease-standard), opacity var(--pui-radio-duration) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-block { display: flex; width: 100%; }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-borderless { padding: var(--pui-preview-content-gap) 0; background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-checked:not(.is-borderless) { border-color: var(--border-strong); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-disabled { cursor: not-allowed; opacity: .45; }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-readonly { cursor: default; opacity: .72; }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-content-disabled .pui-radio-preview__body { cursor: default; opacity: .52; }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview--right { flex-direction: row-reverse; }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview--right .pui-radio-preview__body { align-items: flex-end; text-align: right; }

body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-radio-preview:has(.pui-radio-preview__native:focus-visible) {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__target {
  display: grid;
  flex: 0 0 28px;
  align-self: stretch;
  min-height: 28px;
  place-items: center;
}

body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__mark {
  display: grid;
  width: 16px;
  height: 16px;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--pui-control-outline-color);
  border-radius: var(--pui-preview-radius-round);
  place-items: center;
  transition: color var(--pui-radio-duration) var(--pui-ease-standard), background-color var(--pui-radio-duration) var(--pui-ease-standard), border-color var(--pui-radio-duration) var(--pui-ease-standard), transform var(--pui-radio-duration) var(--pui-ease-standard), opacity var(--pui-radio-duration) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__mark--line,
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__mark--slot,
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__mark--custom { background: transparent; border-color: transparent; opacity: 0; transform: scale(.4); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__mark--dot { background: var(--text); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__dot { width: 50%; height: 50%; background: var(--text); border-radius: var(--pui-preview-radius-round); opacity: 0; transform: scale(.25); transition: opacity var(--pui-radio-duration) var(--pui-ease-standard), transform var(--pui-radio-duration) var(--pui-ease-standard); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview--icon-dot .pui-radio-preview__dot { width: 100%; height: 100%; background: var(--surface-solid); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-checked .pui-radio-preview__mark { border-color: var(--text); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-checked .pui-radio-preview__dot { opacity: 1; transform: scale(1); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-checked .pui-radio-preview__mark--line,
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-checked .pui-radio-preview__mark--slot,
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview.is-checked .pui-radio-preview__mark--custom { opacity: 1; transform: scale(1); }

body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__body { display: grid; flex: 1; gap: var(--pui-preview-space-step-1); min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__label,
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__content { display: -webkit-box; min-width: 0; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__label { font-size: var(--pui-font-size-body-medium); line-height: var(--pui-line-height-body-medium); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__content { color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-radio-preview__slot { display: inline-flex; flex-wrap: wrap; gap: var(--pui-preview-space-xs); align-items: center; min-width: 0; }

body .app-shell[data-page-mode] .preview-stage .pui-radio-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-content-gap); min-width: 0; }

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-radio-demo-grid { grid-template-columns: minmax(0, 1fr); }
  body .app-shell[data-page-mode] .preview-stage .pui-radio-group-preview.is-inline { display: grid; grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-radio-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-radio-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-radio-showcase *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}



.code {
  padding: var(--pui-preview-space-step-11);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: none;
}

.compat-list {
  gap: var(--pui-preview-space-sm);
}

.compat-item {
  padding: var(--pui-preview-space-step-9);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: none;
}

.compat-item strong,
.compat-item span {
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.api-reference {
  margin-top: var(--pui-preview-space-xxl);
  padding-top: var(--pui-preview-panel-padding-spacious);
  border-top: 1px solid var(--border);
}

.api-table {
  overflow-x: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
}

.api-table__row {
  min-width: 0;
  grid-template-columns: 112px 104px 108px minmax(180px, 0.8fr) minmax(240px, 1.4fr);
  border-top-color: var(--border);
}

.api-table__row--head {
  background: var(--surface-soft);
}

@media (max-width: 1220px) and (min-width: 701px) {
  .workspace {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .inspector {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    padding: var(--pui-preview-space-step-24);
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .inspector .props-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) and (min-width: 701px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--pui-preview-content-gap) var(--pui-preview-space-lg);
  }

  .topbar__controls {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .workspace {
    grid-template-columns: 206px minmax(0, 1fr);
  }

  .preview-toolbar {
    top: var(--pui-site-topbar-height);
    padding: var(--pui-preview-space-xl) var(--pui-preview-space-xl) var(--pui-preview-space-lg);
  }

  .preview-stage {
    padding: var(--pui-preview-space-xl);
  }
}

@media (max-width: 700px) {
  html,
  body,
  .app-shell {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .topbar {
    position: static;
    display: flex;
    flex-wrap: wrap;
    min-height: auto;
    padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12);
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand__sub,
  .topbar__nav,
  .visual-toggle__text,
  .theme-toggle__icon {
    display: none;
  }

  .topbar__controls {
    display: flex;
    flex: 0 0 auto;
    gap: var(--pui-preview-space-xxs);
    overflow: visible;
  }

  .visual-toggle,
  .theme-toggle {
    width: 30px;
    padding: 0;
    justify-content: center;
  }

  .workspace {
    display: block !important;
    min-width: 0;
  }

  .main,
  .inspector {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
  }

  .preview-toolbar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pui-preview-space-normal);
    min-height: 0;
    padding: var(--pui-preview-space-step-16) var(--pui-preview-space-step-12) var(--pui-preview-space-step-12);
  }

  .preview-toolbar h1 {
    font-size: var(--pui-font-size-title-large);
    line-height: var(--pui-line-height-title-large);
  }

  .toolbar-actions {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 32px;
    gap: var(--pui-preview-space-step-7);
    width: 100%;
  }

  .device-select {
    width: 100%;
    min-width: 0;
  }

  .preview-stage {
    min-height: 0;
    padding: var(--pui-preview-space-step-12) var(--pui-preview-space-step-12) var(--pui-preview-space-step-32);
  }

  .preview-canvas,
  .preview-canvas__body {
    width: 100%;
    min-width: 0;
  }

  .preview-canvas__body {
    min-height: 600px;
    padding: var(--pui-preview-space-lg) var(--pui-preview-space-normal);
  }

  .phone {
    width: 100%;
    min-width: 0;
    min-height: 548px;
    padding: var(--pui-preview-space-step-12);
  }

  .phone__content {
    min-height: 474px;
  }

  .spec-sheet__head {
    display: grid;
    gap: var(--pui-preview-space-step-7);
    align-items: start;
  }

  .spec-sheet__head p {
    max-width: none;
    text-align: left;
  }

  .state-grid {
    grid-template-columns: 1fr;
  }

  .inspector {
    padding: var(--pui-preview-panel-padding-spacious) var(--pui-preview-space-step-12) var(--pui-preview-space-xxl);
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .inspector .props-panel {
    grid-template-columns: 1fr;
  }

  .api-table__row { min-width: 0; }
}

/* Documentation pages use the shadcn-style reading surface directly. */
.app-shell[data-page-mode="document"] .device-select {
  display: none;
}

.preview-stage--document {
  min-height: calc(100vh - 170px);
}

.document-stage,
.spec-sheet--document {
  width: min(100%, 980px);
  margin: 0 auto;
}

.document-stage {
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
}

.document-stage__header {
  display: flex;
  justify-content: space-between;
  gap: var(--pui-preview-space-xxl);
  padding: var(--pui-preview-space-xxl) var(--pui-preview-space-step-30) var(--pui-preview-space-step-24);
  border-bottom: 1px solid var(--border);
}

.document-stage__eyebrow,
.document-stage__path {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  letter-spacing: 0.02em;
}

.document-stage__header h2 {
  margin: var(--pui-preview-space-step-7) 0 var(--pui-preview-space-sm);
  color: var(--text);
  font-size: var(--pui-font-size-headline);
  line-height: var(--pui-line-height-title-large);
}

.document-stage__header p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: var(--pui-line-height-relaxed);
}

.document-stage__path {
  flex: 0 0 auto;
  max-width: 260px;
  padding-top: var(--pui-preview-space-xs);
  text-align: right;
  overflow-wrap: anywhere;
}

.document-stage__content {
  padding: var(--pui-preview-space-step-26) var(--pui-preview-space-step-30) var(--pui-preview-space-step-30);
}

.document-stage__content > .demo-section {
  margin: 0;
}

.spec-sheet--document {
  margin-top: var(--pui-preview-space-xl);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
}

.spec-sheet--document .api-reference {
  margin-top: var(--pui-preview-space-step-24);
  border-top: 1px solid var(--border);
}

.shadcn-boundary-preview {
  display: flex;
  gap: var(--pui-preview-panel-padding-spacious);
  align-items: flex-start;
  padding: var(--pui-preview-space-step-24);
  background: var(--surface-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--pui-site-radius-control);
}

.shadcn-boundary-preview__icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
}

.shadcn-boundary-preview__copy {
  min-width: 0;
}

.shadcn-boundary-preview__copy h3 {
  margin: var(--pui-preview-space-step-7) 0 var(--pui-preview-space-sm);
  color: var(--text);
  font-size: var(--pui-font-size-title-medium);
}

.shadcn-boundary-preview__copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: var(--pui-line-height-relaxed);
}

.shadcn-boundary-preview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-preview-space-step-7) var(--pui-preview-space-step-16);
  margin-top: var(--pui-preview-space-step-15);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
}

.shadcn-boundary-preview .text-link {
  display: inline-flex;
  gap: var(--pui-preview-space-step-5);
  align-items: center;
  margin-top: var(--pui-preview-panel-padding-spacious);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.api-empty {
  padding: var(--pui-preview-panel-padding-spacious) 0 var(--pui-preview-space-xxs);
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
}

@media (max-width: 760px) {
  .document-stage__header {
    display: block;
    padding: var(--pui-preview-space-step-22) var(--pui-preview-panel-padding-spacious) var(--pui-preview-panel-padding-spacious);
  }

  .document-stage__header h2 {
    font-size: var(--pui-font-size-title-large);
    line-height: var(--pui-line-height-title-large);
  }

  .document-stage__path {
    max-width: none;
    padding-top: var(--pui-preview-space-lg);
    text-align: left;
  }

  .document-stage__content {
    padding: var(--pui-preview-panel-padding-spacious);
  }

  .shadcn-boundary-preview {
    padding: var(--pui-preview-panel-padding-spacious);
  }

  .spec-sheet--document {
    margin-top: var(--pui-preview-space-lg);
  }
}

/* Global visual modes are rendered inside the preview surface itself. The
   controls stay in the top bar, while the actual mini-program mirror owns
   the material, depth and radius changes. */
.app-shell {
  --preview-stage-surface: var(--page);
  --preview-surface: var(--surface-solid);
  --preview-surface-soft: var(--surface-soft);
  --preview-border: var(--border);
  --preview-blur: none;
  --preview-shadow: none;
  --preview-shadow-phone: none;
  --preview-shadow-card: none;
  --pui-preview-radius-shell: var(--pui-preview-radius-medium);
  --pui-preview-radius-phone: var(--pui-preview-radius-large);
  --pui-preview-radius-card: var(--pui-preview-radius-medium);
  --pui-preview-radius-control: var(--pui-preview-radius-small);
  --pui-preview-radius-floating: var(--pui-preview-radius-large);
  --pui-preview-radius-popup: var(--pui-preview-radius-xlarge);
}

.app-shell[data-shadow="on"] {
  --preview-shadow: 0 18px 38px rgba(9, 9, 11, 0.12), 0 3px 10px rgba(9, 9, 11, 0.08);
  --preview-shadow-phone: 0 26px 58px rgba(9, 9, 11, 0.18), 0 6px 18px rgba(9, 9, 11, 0.1);
  --preview-shadow-card: 0 12px 26px rgba(9, 9, 11, 0.1), 0 2px 6px rgba(9, 9, 11, 0.06);
}

.app-shell[data-theme="dark"][data-shadow="on"] {
  --preview-shadow: 0 20px 46px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.25);
  --preview-shadow-phone: 0 28px 66px rgba(0, 0, 0, 0.54), 0 7px 20px rgba(0, 0, 0, 0.3);
  --preview-shadow-card: 0 14px 30px rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.2);
}

.app-shell[data-frost="on"] {
  --preview-stage-surface: #eef0f3;
  --preview-surface: rgba(255, 255, 255, 0.72);
  --preview-surface-soft: rgba(255, 255, 255, 0.56);
  --preview-border: rgba(255, 255, 255, 0.92);
  --preview-blur: blur(18px) saturate(135%);
}

.app-shell[data-theme="dark"][data-frost="on"] {
  --preview-stage-surface: #18181b;
  --preview-surface: rgba(39, 39, 42, 0.74);
  --preview-surface-soft: rgba(39, 39, 42, 0.58);
  --preview-border: rgba(255, 255, 255, 0.16);
}

.app-shell[data-radius="large"] {
  --pui-preview-radius-shell: var(--pui-preview-radius-step-28);
  --pui-preview-radius-phone: var(--pui-preview-radius-step-32);
  --pui-preview-radius-card: var(--pui-preview-radius-step-14);
  --pui-preview-radius-control: var(--pui-preview-radius-step-9);
  --pui-preview-radius-floating: var(--pui-preview-radius-step-20);
  --pui-preview-radius-popup: var(--pui-preview-radius-step-24);
}

.topbar__controls {
  gap: var(--pui-preview-space-xs);
}

.visual-toggle {
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.visual-toggle.is-active {
  color: var(--surface-solid);
  background: var(--text);
  border-color: var(--text);
}

.visual-toggle.is-active .visual-toggle__dot {
  background: currentColor;
}

.preview-stage {
  background: var(--preview-stage-surface);
  transition: background-color 500ms ease;
}

.preview-canvas,
.phone,
.spec-sheet,
.code-stage {
  transition: background-color 500ms ease, border-color 500ms ease, border-radius 500ms ease, box-shadow 500ms ease;
}

.preview-canvas {
  background: var(--preview-surface);
  border-color: var(--preview-border);
  border-radius: var(--pui-preview-radius-shell);
  box-shadow: var(--preview-shadow);
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
}

.preview-canvas__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pui-preview-space-sm) var(--pui-preview-space-lg);
  min-height: 38px;
  height: auto;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-lg);
  background: var(--preview-surface-soft);
  border-bottom-color: var(--preview-border);
  transition: background-color 500ms ease, border-color 500ms ease;
}

.preview-canvas__modes {
  margin-left: auto;
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  letter-spacing: 0;
}

.preview-canvas__body {
  background: var(--preview-stage-surface);
  transition: background-color 500ms ease;
}

.phone {
  background: var(--preview-surface);
  border-color: var(--preview-border);
  border-radius: var(--pui-preview-radius-phone);
  box-shadow: var(--preview-shadow-phone);
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
}

.preview-stage .pui-button,
.preview-stage .pui-cell,
.preview-stage .pui-field,
.preview-stage .pui-dialog,
.preview-stage .pui-empty,
.preview-stage .pui-result,
.preview-stage .pui-grid,
.preview-stage .pui-image,
.preview-stage .pui-card-showcase,
.preview-stage .pui-alert-demo,
.preview-stage .pui-input-preview,
.preview-stage .pui-textarea-preview,
.preview-stage .pui-picker-preview,
.preview-stage .pui-upload-preview__file,
.preview-stage .pui-select-trigger,
.preview-stage .pui-select-menu,
.preview-stage .pui-stepper,
.preview-stage .field-demo,
.preview-stage .label-demo,
.preview-stage .toast-stage,
.preview-stage .overlay-panel,
.preview-stage .pui-popup-preview,
.preview-stage .pui-sheet-preview,
.preview-stage .pui-popover-preview,
.preview-stage .pui-tooltip-preview,
.preview-stage .pui-calendar-preview,
.preview-stage .pui-table-preview,
.preview-stage .pui-notice-preview,
.preview-stage .pui-breadcrumb-preview,
.preview-stage .pui-grid-preview,
.preview-stage .icon-card,
.preview-stage .icon-toolbar {
  border-radius: var(--pui-preview-radius-control);
  box-shadow: var(--preview-shadow-card);
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
  transition: background-color 500ms ease, border-color 500ms ease, border-radius 500ms ease, box-shadow 500ms ease;
}

/* Table owns a fixed 500ms/1ms lifecycle; visual preferences must not replace it. */
.preview-stage .pui-table-preview {
  transition: background-color var(--pui-table-preview-duration) var(--pui-table-preview-easing), border-color var(--pui-table-preview-duration) var(--pui-table-preview-easing), border-radius var(--pui-table-preview-duration) var(--pui-table-preview-easing), box-shadow var(--pui-table-preview-duration) var(--pui-table-preview-easing), opacity var(--pui-table-preview-duration) var(--pui-table-preview-easing);
}

/* Stepper owns a fixed 500ms/1ms lifecycle. Appearance preferences may alter
   the rendered material, but must not replace the component motion contract. */
.preview-stage .pui-stepper {
  transition:
    opacity var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)),
    background-color var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)),
    border-color var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)),
    border-radius var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard)),
    box-shadow var(--pui-stepper-duration, 500ms) var(--pui-stepper-ease, var(--ease-standard));
}

/* Keep NoticeBar's lifecycle token authoritative. The global visual-toggle
   transition must not replace max-height/opacity/transform timing. */
.preview-stage .pui-notice-preview {
  transition:
    max-height var(--pui-notice-preview-duration, 500ms) var(--pui-notice-preview-ease, var(--ease-standard)),
    min-height var(--pui-notice-preview-duration, 500ms) var(--pui-notice-preview-ease, var(--ease-standard)),
    padding var(--pui-notice-preview-duration, 500ms) var(--pui-notice-preview-ease, var(--ease-standard)),
    opacity var(--pui-notice-preview-duration, 500ms) var(--pui-notice-preview-ease, var(--ease-standard)),
    transform var(--pui-notice-preview-duration, 500ms) var(--pui-notice-preview-ease, var(--ease-standard)),
    background-color 500ms ease,
    border-color 500ms ease,
    border-radius 500ms ease,
    box-shadow 500ms ease;
}

.preview-stage .pui-cell,
.preview-stage .pui-field,
.preview-stage .pui-dialog,
.preview-stage .pui-empty,
.preview-stage .pui-result,
.preview-stage .pui-grid,
.preview-stage .pui-image,
.preview-stage .pui-card-showcase,
.preview-stage .pui-alert-demo,
.preview-stage .pui-input-preview,
.preview-stage .pui-textarea-preview,
.preview-stage .pui-picker-preview,
.preview-stage .pui-upload-preview__file,
.preview-stage .pui-select-trigger,
.preview-stage .pui-select-menu,
.preview-stage .pui-stepper,
.preview-stage .field-demo,
.preview-stage .label-demo,
.preview-stage .toast-stage,
.preview-stage .overlay-panel,
.preview-stage .pui-popup-preview,
.preview-stage .pui-sheet-preview,
.preview-stage .pui-popover-preview,
.preview-stage .pui-tooltip-preview,
.preview-stage .pui-calendar-preview,
.preview-stage .pui-table-preview,
.preview-stage .pui-notice-preview,
.preview-stage .pui-breadcrumb-preview,
.preview-stage .pui-grid-preview,
.preview-stage .icon-card,
.preview-stage .icon-toolbar {
  background-color: var(--preview-surface);
  border-color: var(--preview-border);
}

.preview-stage .pui-table-preview.is-borderless { border-color: transparent; }

/* Card owns its published `shadow` prop. Global appearance still supplies the
   surface, border, radius and frosted material, but cannot make a Card with
   shadow=false look elevated or erase the distinction when the prop changes. */
body .app-shell[data-page-mode] .preview-stage .pui-card-showcase {
  background-color: var(--preview-surface);
  border-color: var(--preview-border);
  box-shadow: none;
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
  /* The shared appearance transition is intentionally overridden here: Card
     publishes duration/easing/reduceMotion as component Props. */
  transition-property: opacity, transform, background-color;
  transition-duration: var(--pui-card-duration, 500ms);
  transition-timing-function: var(--pui-card-ease, var(--ease-standard));
}

body .app-shell[data-page-mode] .preview-stage .pui-card-showcase.has-shadow {
  box-shadow: var(--preview-shadow-card);
}

.app-shell[data-frost="on"] .preview-stage .phone__content {
  background: transparent;
}

@media (max-width: 760px) {
  .preview-canvas__modes {
    width: 100%;
    margin-left: 0;
  }

  .app-shell[data-radius="large"] {
    --pui-preview-radius-phone: var(--pui-preview-radius-step-26);
  }
}

@media (max-width: 700px) {
  .topbar__controls {
    gap: var(--pui-preview-space-step-3);
    max-width: none;
    overflow: visible;
  }

  .visual-toggle,
  .theme-toggle {
    width: auto;
    min-width: 30px;
    padding: 0 var(--pui-preview-space-step-7);
  }

  .visual-toggle__text {
    display: inline;
    font-size: var(--pui-font-size-caption);
  }
}

/* Legacy radius rules are kept for older demos; this final selector makes
   the three global modes authoritative for the live preview surface. */
body .app-shell[data-radius="normal"] .preview-stage .phone {
  border-radius: var(--pui-preview-radius-phone);
}

body .app-shell[data-page-mode] .preview-stage .pui-button,
body .app-shell[data-page-mode] .preview-stage .pui-input-preview,
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview,
body .app-shell[data-page-mode] .preview-stage .pui-picker-preview,
body .app-shell[data-page-mode] .preview-stage .pui-select-trigger,
body .app-shell[data-page-mode] .preview-stage .pui-stepper,
  border-radius: var(--pui-preview-radius-control);
}

body .app-shell[data-page-mode] .preview-stage .pui-cell,
body .app-shell[data-page-mode] .preview-stage .pui-field,
body .app-shell[data-page-mode] .preview-stage .pui-empty,
body .app-shell[data-page-mode] .preview-stage .pui-result,
body .app-shell[data-page-mode] .preview-stage .pui-grid,
body .app-shell[data-page-mode] .preview-stage .pui-image,
body .app-shell[data-page-mode] .preview-stage .pui-card-showcase,
body .app-shell[data-page-mode] .preview-stage .pui-alert-demo,
body .app-shell[data-page-mode] .preview-stage .pui-upload-preview__file,
body .app-shell[data-page-mode] .preview-stage .field-demo,
body .app-shell[data-page-mode] .preview-stage .label-demo,
body .app-shell[data-page-mode] .preview-stage .toast-stage,
body .app-shell[data-page-mode] .preview-stage .overlay-panel,
body .app-shell[data-page-mode] .preview-stage .pui-calendar-preview,
body .app-shell[data-page-mode] .preview-stage .pui-table-preview,
body .app-shell[data-page-mode] .preview-stage .pui-notice-preview,
body .app-shell[data-page-mode] .preview-stage .pui-breadcrumb-preview,
body .app-shell[data-page-mode] .preview-stage .pui-grid-preview,
body .app-shell[data-page-mode] .preview-stage .icon-card,
body .app-shell[data-page-mode] .preview-stage .icon-toolbar {
  border-radius: var(--pui-preview-radius-card);
}

body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview,
body .app-shell[data-page-mode] .preview-stage .pui-select-menu {
  border-radius: var(--pui-preview-radius-control);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview {
  border-radius: var(--pui-preview-radius-floating);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview,
body .app-shell[data-page-mode] .preview-stage .pui-dialog,
body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview,
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview {
  border-radius: var(--pui-preview-radius-popup);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Site infrastructure also consumes the shared PUI Button/Icon/Badge mirrors.
   These selectors only arrange the helpers for navigation and catalog layouts;
   component state, disabled semantics and child geometry stay in the helpers. */
.app-shell .sidebar .component-item.pui-button-preview {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: var(--pui-preview-space-step-32);
  margin: var(--pui-preview-space-step-1) 0;
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  overflow: hidden;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--pui-site-radius-control);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-shell .sidebar .component-item.pui-button-preview:hover,
.app-shell .sidebar .component-item.pui-button-preview.is-active {
  color: var(--text);
  background: var(--surface-soft);
  border-color: transparent;
  box-shadow: none;
}

.app-shell .sidebar .component-item > .pui-button-preview__content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  width: 100%;
  min-width: 0;
  overflow: visible;
  text-align: left;
  white-space: normal;
}

.app-shell .sidebar .component-item__feedback-index {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: var(--pui-preview-space-step-24);
  color: var(--subtle);
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-caption);
  font-variant-numeric: tabular-nums;
  line-height: var(--pui-line-height-caption);
}

.app-shell .sidebar .component-item__variant {
  min-width: 0;
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-medium);
  line-height: var(--pui-line-height-caption);
  white-space: nowrap;
}

.app-shell .sidebar .component-item__translation {
  min-width: 0;
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-regular);
  line-height: var(--pui-line-height-caption);
  white-space: nowrap;
}

body .app-shell[data-page-mode] .preview-stage .mini-action.pui-button-preview {
  width: auto;
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .icon-category.pui-button-preview {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  box-shadow: none;
}

body .app-shell[data-page-mode] .preview-stage .icon-card.pui-button-preview {
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 136px;
  padding: var(--pui-preview-space-lg) var(--pui-preview-space-normal) var(--pui-preview-space-step-12);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

body .app-shell[data-page-mode] .preview-stage .icon-card.pui-button-preview[data-icon] {
  background: var(--surface);
  border-color: var(--border);
}

body .app-shell[data-shadow="on"][data-page-mode] .preview-stage .icon-card.pui-button-preview {
  box-shadow: var(--preview-shadow-card);
}

body .app-shell[data-page-mode] .preview-stage .icon-card.pui-button-preview > .pui-button-preview__content {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

/* Standard component information architecture.
   The Inspector rail is retired: Overview, API and Properties are mutually exclusive
   PUI Tabs views inside the main workspace. */
body .app-shell[data-page-mode] .workspace {
  grid-template-columns: 244px minmax(0, 1fr);
}

.component-page-tabs {
  width: min(270px, 42vw);
  min-width: 210px;
}

.component-page-tabs[hidden] {
  display: none;
}

.toolbar-actions > [hidden] {
  display: none !important;
}

.component-page-tabs__control.pui-tabs-preview {
  --pui-tabs-preview-duration: var(--pui-duration-normal);
  --pui-tabs-preview-ease: var(--pui-ease-standard);
  overflow: visible;
}

.component-page-tabs__control .pui-tabs-preview__header {
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.component-page-tabs__control .pui-tabs-preview__button.pui-button {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 var(--pui-preview-content-gap);
  font-size: var(--pui-font-size-body-small);
  background: transparent;
  border-color: transparent;
  transition: color var(--pui-duration-normal) var(--pui-ease-standard);
}

.component-page-tabs__control .pui-tabs-preview__indicator {
  top: var(--pui-preview-space-step-2);
  bottom: var(--pui-preview-space-step-2);
  left: 0;
  width: calc(100% / 3);
  height: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: calc(var(--pui-site-radius-control) - var(--pui-preview-radius-step-2));
  transform: translate3d(0, 0, 0);
  transition: transform var(--pui-duration-normal) var(--pui-ease-standard),
    background-color var(--pui-duration-normal) var(--pui-ease-standard),
    border-color var(--pui-duration-normal) var(--pui-ease-standard);
  will-change: transform;
}

/* Fixed grid tracks and semantic states keep the indicator deterministic.
   Only transform changes; button geometry and the Tabs DOM remain untouched. */
.component-page-tabs__control .pui-tabs-preview__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.component-page-tabs__control[data-active-view="api"] .pui-tabs-preview__indicator {
  transform: translate3d(100%, 0, 0);
}

.component-page-tabs__control[data-active-view="prop"] .pui-tabs-preview__indicator {
  transform: translate3d(200%, 0, 0);
}

.preview-stage--overview {
  grid-template-columns: minmax(0, var(--device-width, 393px));
}

.preview-stage--api,
.preview-stage--prop,
.preview-stage--document,
.preview-stage--icons {
  display: block;
}

.preview-stage--overview .preview-canvas {
  width: 100%;
  min-width: 0;
}

.component-api-workspace,
.component-prop-workspace {
  width: min(100%, 980px);
  margin: 0 auto;
}

.component-api-workspace .api-reference {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.component-prop-workspace {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-section-gap);
}

.component-prop-workspace--document {
  margin-top: var(--pui-preview-space-3xl);
  padding-top: var(--pui-preview-space-3xl);
  border-top: 1px solid var(--border);
}

.component-prop-workspace .component-prop-workspace__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
  margin: 0;
}

.component-prop-workspace .component-prop-workspace__meta > div {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: var(--pui-preview-space-xs);
  min-width: 0;
  padding: var(--pui-preview-panel-padding);
  background: var(--surface-soft);
  border: 0;
  border-radius: var(--pui-site-radius-control);
}

.component-prop-workspace__meta strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-label);
}

.component-prop-workspace .component-prop-workspace__section {
  margin: 0;
  padding-top: var(--pui-preview-section-gap);
  border-top: 1px solid var(--border);
}

.component-prop-workspace .panel__title {
  margin-bottom: var(--pui-preview-panel-padding);
}

.component-prop-workspace .panel__title h2 {
  font-size: var(--pui-font-size-body-large);
  line-height: var(--pui-line-height-body-large);
}

.component-prop-workspace .props-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
}

.component-prop-workspace .props-panel .prop-control {
  min-height: 64px;
  padding: var(--pui-preview-panel-padding);
  background: var(--surface-soft);
  border: 0;
  border-radius: var(--pui-site-radius-control);
}

.component-prop-workspace .props-panel .prop-control:last-child {
  border-bottom: 0;
}

.component-prop-workspace .code {
  max-height: 520px;
  overflow: auto;
  padding: var(--pui-preview-panel-padding-spacious);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

.component-prop-workspace .compat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
}

.component-prop-workspace .compat-item {
  min-width: 0;
  padding: var(--pui-preview-panel-padding);
  background: var(--surface-soft);
  border: 0;
}

.component-prop-workspace .compat-item strong,
.component-prop-workspace .compat-item span {
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-label);
}

@media (max-width: 900px) {
  .preview-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .component-page-tabs {
    width: min(100%, 360px);
  }

  .component-prop-workspace .component-prop-workspace__meta,
  .component-prop-workspace .props-panel,
  .component-prop-workspace .compat-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body .app-shell[data-page-mode] .workspace {
    display: block;
  }

  .component-page-tabs {
    width: 100%;
    min-width: 0;
  }

  .device-select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .preview-stage--overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .component-prop-workspace .component-prop-workspace__meta,
  .component-prop-workspace .props-panel,
  .component-prop-workspace .compat-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .component-prop-workspace .code {
    max-height: 440px;
  }
}

/* H5 mirror of the public single-line text utility. */
.pui-text-cut,
.pui-text-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Global preview preferences reuse the same PUI Switch mirror as the Switch
   component page. This final layer replaces the legacy dot/button controls. */
.topbar__controls {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  max-width: none;
}

.topbar-preference {
  --pui-switch-preview-duration: var(--pui-duration-normal);
  --pui-switch-preview-ease: var(--ease-standard);
  gap: var(--pui-preview-space-xs);
  min-width: 0;
}

.topbar-preference .pui-switch-preview__label-target strong {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-label);
  white-space: nowrap;
}

.topbar-preference.is-checked .pui-switch-preview__label-target strong {
  color: var(--text);
}

.topbar-preference .pui-switch-preview__control {
  background: var(--surface-soft);
}

.topbar-preference.is-checked .pui-switch-preview__control {
  color: var(--surface-solid);
  background: var(--text);
  border-color: var(--text);
}

@media (max-width: 700px) {
  .topbar__controls {
    display: grid;
    flex: 1 0 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: var(--pui-preview-space-xs);
  }

  .topbar-preference {
    justify-content: space-between;
    width: 100%;
    padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--pui-site-radius-control);
  }

  .topbar-preference .pui-switch-preview__body {
    min-width: 0;
  }

}

/* Layout rhythm is inherited from the shared PUI preview tokens. */

.preview-stage {
  padding: var(--pui-preview-space-step-32);
}

.preview-canvas__body {
  padding: var(--pui-preview-space-step-32);
}

.app-shell[data-page-mode="document"] .document-stage__header,
.app-shell[data-page-mode="document"] .document-stage__content {
  padding: var(--pui-preview-space-step-32);
}

.app-shell[data-page-mode="document"] .spec-sheet--document {
  padding: var(--pui-preview-space-step-24);
}

.app-shell[data-page-mode="document"] .spec-sheet__head {
  padding: 0 0 var(--pui-preview-space-step-16);
  border-radius: 0;
}

.app-shell[data-page-mode] .state-grid {
  min-width: 0;
  gap: var(--pui-preview-space-step-12);
  padding: var(--pui-preview-space-step-16) 0 0;
}

.app-shell[data-page-mode] .state-grid div {
  min-width: 0;
  min-height: 44px;
  padding: var(--pui-preview-space-step-12);
}

.app-shell[data-page-mode] .api-reference {
  min-width: 0;
  margin-top: var(--pui-preview-space-step-24);
  padding-top: var(--pui-preview-space-step-24);
}

.app-shell[data-page-mode] .api-reference__head {
  margin-bottom: var(--pui-preview-space-step-12);
}

.app-shell[data-page-mode] .api-table__row {
  min-height: 0;
  padding: var(--pui-preview-space-step-12);
  gap: var(--pui-preview-space-step-12);
}

@media (max-width: 760px) {
  .preview-stage,
  .preview-canvas__body {
    padding: var(--pui-preview-space-step-16);
  }

  .app-shell[data-page-mode="document"] .document-stage__header,
  .app-shell[data-page-mode="document"] .document-stage__content,
  .app-shell[data-page-mode="document"] .spec-sheet--document {
    padding: var(--pui-preview-space-xl);
  }

  .app-shell[data-page-mode] .state-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Alert keeps its render node through the exit frame; the following mirror is
   intentionally scoped so broad page-token transitions cannot override it. */
body .app-shell[data-page-mode] .preview-stage .pui-alert-showcase .pui-alert-demo {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--pui-alert-duration, 500ms) var(--pui-alert-ease, cubic-bezier(0.2, 0, 0, 1)), transform var(--pui-alert-duration, 500ms) var(--pui-alert-ease, cubic-bezier(0.2, 0, 0, 1));
  will-change: opacity, transform;
}

body .app-shell[data-page-mode] .preview-stage .pui-alert-showcase .pui-alert-demo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body .app-shell[data-page-mode] .preview-stage .pui-alert-demo__slot {
  display: inline-flex;
  margin-top: var(--pui-preview-space-step-7);
  font-style: normal;
}

/* Component motion remains authoritative after the global visual-token rules. */
body .app-shell[data-page-mode] .preview-stage .pui-steps-preview .pui-button {
  transition: color var(--pui-steps-preview-duration, 500ms) var(--pui-steps-preview-ease, ease), background-color var(--pui-steps-preview-duration, 500ms) var(--pui-steps-preview-ease, ease), border-color var(--pui-steps-preview-duration, 500ms) var(--pui-steps-preview-ease, ease), border-radius var(--pui-steps-preview-duration, 500ms) var(--pui-steps-preview-ease, ease), box-shadow var(--pui-steps-preview-duration, 500ms) var(--pui-steps-preview-ease, ease), opacity var(--pui-steps-preview-duration, 500ms) var(--pui-steps-preview-ease, ease), transform var(--pui-steps-preview-duration, 500ms) var(--pui-steps-preview-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-steps-preview .pui-button {
    transition-duration: 1ms !important;
  }
}

/* BackTop owns both its visibility motion and the nested Button state motion. */
body .app-shell[data-page-mode] .preview-stage .pui-back-top-preview {
  transition: max-width var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), max-height var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), margin var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), opacity var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), transform var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-back-top-preview .pui-fab-preview__button {
  transition: color var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), background-color var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), border-color var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), border-radius var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), box-shadow var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), opacity var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard), transform var(--pui-back-top-preview-duration, 500ms) var(--pui-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-back-top-preview,
  body .app-shell[data-page-mode] .preview-stage .pui-back-top-preview .pui-fab-preview__button {
    transition-duration: 1ms !important;
  }

  body .app-shell[data-page-mode] .preview-stage .pui-back-top-scroll { scroll-behavior: auto; }
}

/* Indexes owns the Cell/Button motion inside its mirror. Keep these selectors
   after the global visual-token rules so duration/easing Props stay real. */
body .app-shell[data-page-mode] .preview-stage .pui-indexes-preview .pui-cell,
body .app-shell[data-page-mode] .preview-stage .pui-indexes-preview .pui-button {
  transition: color var(--pui-indexes-preview-duration, 500ms) var(--pui-indexes-preview-ease, cubic-bezier(0.2, 0, 0, 1)), background-color var(--pui-indexes-preview-duration, 500ms) var(--pui-indexes-preview-ease, cubic-bezier(0.2, 0, 0, 1)), border-color var(--pui-indexes-preview-duration, 500ms) var(--pui-indexes-preview-ease, cubic-bezier(0.2, 0, 0, 1)), border-radius var(--pui-indexes-preview-duration, 500ms) var(--pui-indexes-preview-ease, cubic-bezier(0.2, 0, 0, 1)), box-shadow var(--pui-indexes-preview-duration, 500ms) var(--pui-indexes-preview-ease, cubic-bezier(0.2, 0, 0, 1)), opacity var(--pui-indexes-preview-duration, 500ms) var(--pui-indexes-preview-ease, cubic-bezier(0.2, 0, 0, 1)), transform var(--pui-indexes-preview-duration, 500ms) var(--pui-indexes-preview-ease, cubic-bezier(0.2, 0, 0, 1));
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-indexes-preview .pui-cell,
  body .app-shell[data-page-mode] .preview-stage .pui-indexes-preview .pui-button {
    transition-duration: 1ms !important;
  }
}

/* SideBar keeps nested Button/Cell feedback on its own motion contract. */
body .app-shell[data-page-mode] .preview-stage .pui-sidebar-layout .pui-button,
body .app-shell[data-page-mode] .preview-stage .pui-sidebar-layout .pui-cell {
  transition: color var(--pui-sidebar-preview-duration, 500ms) var(--pui-sidebar-preview-ease, ease-out), background-color var(--pui-sidebar-preview-duration, 500ms) var(--pui-sidebar-preview-ease, ease-out), border-color var(--pui-sidebar-preview-duration, 500ms) var(--pui-sidebar-preview-ease, ease-out), border-radius var(--pui-sidebar-preview-duration, 500ms) var(--pui-sidebar-preview-ease, ease-out), box-shadow var(--pui-sidebar-preview-duration, 500ms) var(--pui-sidebar-preview-ease, ease-out), opacity var(--pui-sidebar-preview-duration, 500ms) var(--pui-sidebar-preview-ease, ease-out), transform var(--pui-sidebar-preview-duration, 500ms) var(--pui-sidebar-preview-ease, ease-out);
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-sidebar-layout .pui-button,
  body .app-shell[data-page-mode] .preview-stage .pui-sidebar-layout .pui-cell {
    transition-duration: 1ms !important;
  }
}

/* Popup mirrors the native retained-node lifecycle and five placement transforms. */
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview-host {
  position: relative;
  min-height: 390px;
  overflow: hidden;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__mask {
  z-index: 1;
  background: rgba(9, 9, 11, 0.42);
  opacity: 0;
  transition: opacity var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, cubic-bezier(0.2, 0, 0, 1));
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__mask--blurred {
  -webkit-backdrop-filter: var(--pui-popup-overlay-blur);
  backdrop-filter: var(--pui-popup-overlay-blur);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview-host.is-active .pui-popup-preview__mask {
  opacity: 1;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview {
  z-index: var(--pui-popup-preview-z-index, 1000);
  display: flex;
  width: auto;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  flex-direction: column;
  gap: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: opacity var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, cubic-bezier(0.2, 0, 0, 1)), transform var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, cubic-bezier(0.2, 0, 0, 1)), background-color var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, cubic-bezier(0.2, 0, 0, 1)), border-color var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, cubic-bezier(0.2, 0, 0, 1));
  will-change: opacity, transform;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview--card {
  background: var(--pui-glass-tint);
  --pui-scroll-area-gradient-overlay-color-context: var(--pui-scroll-area-gradient-overlay-material-color);
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--bottom .pui-popup-preview {
  top: auto;
  right: var(--pui-preview-space-step-12);
  bottom: var(--pui-preview-space-step-12);
  left: var(--pui-preview-space-step-12);
  transform: translateY(24px);
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview {
  top: 0;
  right: var(--pui-preview-space-step-12);
  bottom: auto;
  left: var(--pui-preview-space-step-12);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  transform: translateY(-24px);
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--card {
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__surface {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__surface-top {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--card .pui-popup-preview__surface {
  background: var(--pui-glass-tint);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-card);
  box-shadow: var(--preview-shadow-card);
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--left .pui-popup-preview,
body .app-shell[data-page-mode] .preview-stage .overlay-box--right .pui-popup-preview {
  top: 50%;
  bottom: auto;
  width: 68vw;
  max-width: 68vw;
  height: 70vh;
  max-height: 70vh;
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--left .pui-popup-preview {
  right: auto;
  left: var(--pui-preview-space-step-12);
  transform: translate(-24px, -50%);
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--right .pui-popup-preview {
  right: var(--pui-preview-space-step-12);
  left: auto;
  transform: translate(24px, -50%);
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--center .pui-popup-preview {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(82%, 320px);
  transform: translate(-50%, -50%) scale(.96);
  transform-origin: center;
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--bottom .pui-popup-preview--edge {
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--edge {
  top: 0;
  right: 0;
  left: 0;
  max-width: 100%;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--left .pui-popup-preview--edge,
body .app-shell[data-page-mode] .preview-stage .overlay-box--right .pui-popup-preview--edge {
  top: 50%;
  bottom: auto;
  width: 68vw;
  max-width: 68vw;
  height: 70vh;
  max-height: 70vh;
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--left .pui-popup-preview--edge {
  left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--right .pui-popup-preview--edge {
  right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--center .pui-popup-preview--edge {
  width: min(100%, 320px);
  max-width: 100%;
  max-height: 100%;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview-host.is-active .pui-popup-preview--bottom,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview-host.is-active .pui-popup-preview--top {
  opacity: 1;
  transform: translate(0, 0);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview-host.is-active .pui-popup-preview--left,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview-host.is-active .pui-popup-preview--right {
  opacity: 1;
  transform: translate(0, -50%);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview-host.is-active .pui-popup-preview--center {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview.is-disabled {
  opacity: 0.64;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview-host.is-active .pui-popup-preview.is-disabled {
  opacity: 0.64;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__header {
  display: grid;
  min-height: 56px;
  grid-template-columns: 68px minmax(0, 1fr) 68px;
  align-items: start;
  gap: var(--pui-preview-space-sm);
  padding: var(--pui-preview-space-step-9) var(--pui-preview-space-normal);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-space-xs);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__actions--right {
  justify-content: flex-end;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__actions .pui-button,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__custom-header > .pui-button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-color: var(--preview-border);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__custom-header {
  display: grid;
  min-height: 56px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pui-preview-space-normal);
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12);
  border-bottom: 1px solid var(--preview-border);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__custom-header div,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__custom-header strong,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__custom-header span {
  display: block;
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__custom-header span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__body {
  position: relative;
  min-height: 152px;
  overflow: hidden;
  padding: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__content {
  box-sizing: border-box;
  width: 100%;
  max-height: 0;
  padding: 0 var(--pui-preview-space-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, ease), padding var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, ease), opacity var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, ease), transform var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__content.is-active {
  max-height: 280px;
  padding-top: var(--pui-preview-space-lg);
  padding-bottom: var(--pui-preview-space-step-16);
  overflow: auto;
  opacity: 1;
  transform: translateY(0);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__content .pui-cell {
  margin-bottom: var(--pui-preview-content-gap);
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__content-group {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__content-group .pui-cell {
  margin-bottom: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, ease), transform var(--pui-popup-preview-duration, 500ms) var(--pui-popup-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__state.is-error {
  flex-direction: column;
  text-align: center;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__state.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pui-preview-space-step-7);
  padding: var(--pui-preview-space-step-9) var(--pui-preview-space-step-12) var(--pui-preview-space-step-12);
  border-top: 1px solid var(--preview-border);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__footer > span:first-child {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-overflow: ellipsis;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview--safe-area.pui-popup-preview--bottom {
  padding-bottom: max(var(--pui-preview-space-step-12), env(safe-area-inset-bottom));
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview--safe-area.pui-popup-preview--top {
  padding-top: max(var(--pui-preview-space-step-12), env(safe-area-inset-top));
  padding-bottom: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview--left.pui-popup-preview--safe-area,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview--right.pui-popup-preview--safe-area,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview--center.pui-popup-preview--safe-area {
  padding-bottom: 0;
}

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__header {
    grid-template-columns: var(--pui-preview-space-step-36) minmax(0, 1fr) var(--pui-preview-space-step-36);
    padding-inline: var(--pui-preview-space-step-8);
  }

  body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__footer {
    flex-wrap: wrap;
  }

  body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__footer > span:first-child {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__mask,
  body .app-shell[data-page-mode] .preview-stage .pui-popup-preview {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Popup mirrors the native three-region contract: Header / scrollable Content / Footer. */
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--pui-section-gap);
  margin: 0;
  padding: var(--pui-preview-panel-padding);
  position: relative;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase > .pui-popup-preview-host {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__trigger {
  display: flex;
  width: 100%;
  min-width: 0;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__trigger--top,
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__trigger--bottom {
  align-self: stretch;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__trigger--middle {
  display: grid;
  align-self: center;
  gap: var(--pui-preview-content-gap);
}
.pui-popup-showcase__trigger-center,
.pui-popup-showcase__trigger-sides {
  min-width: 0;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__trigger-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-content-gap);
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__preferences {
  display: grid;
  min-width: 0;
  gap: 0;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--preview-border);
  border-radius: var(--pui-preview-radius-medium);
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__preferences .pui-cell {
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__preferences .pui-cell + .pui-cell {
  border-top: 1px solid var(--preview-border);
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__preferences .pui-switch-preview {
  flex: 0 0 auto;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-showcase__trigger .pui-button {
  width: 100%;
  min-width: 0;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__header {
  display: grid;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 56px;
  grid-template-columns: var(--pui-preview-space-step-36) minmax(0, 1fr) var(--pui-preview-space-step-36);
  align-items: start;
  gap: var(--pui-preview-space-step-8);
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-normal) 0;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__header-side {
  display: flex;
  min-width: 0;
  align-items: flex-start;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__header-side--left { justify-content: flex-start; }
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__header-side--right { justify-content: flex-end; }
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__header-side .pui-button {
  width: var(--pui-preview-space-step-36);
  min-width: var(--pui-preview-space-step-36);
  min-height: var(--pui-preview-space-step-36);
  padding: 0;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__title-area {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-2);
  text-align: center;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__title-area strong,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__title-area span {
  display: block;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__title-area span {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__scroll {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: min(360px, calc(var(--pui-preview-device-height) - 120px));
  padding: var(--pui-preview-space-normal);
  overflow: auto;
  color: var(--text);
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__scroll--with-header {
  padding-top: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__scroll.is-static {
  overflow: hidden;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__scroll > :first-child,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__scroll > p:first-child {
  margin-top: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__scroll > :last-child,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__scroll > p:last-child {
  margin-bottom: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__footer {
  display: grid;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--pui-preview-space-step-8) var(--pui-preview-space-normal) var(--pui-preview-space-normal);
  border-top: 1px solid var(--preview-border);
}
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__footer .pui-button { width: 100%; }

body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--custom-navbar {
  top: 0;
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--custom-navbar .pui-popup-preview__header,
body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--custom-navbar .pui-popup-preview__scroll {
  padding-top: calc(var(--pui-preview-space-normal) + var(--pui-navbar-preview-safe-height) + var(--pui-navbar-preview-content-height) + var(--pui-preview-space-step-12));
}
body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--custom-navbar .pui-popup-preview__scroll--with-header {
  padding-top: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--custom-navbar.pui-popup-preview--card .pui-popup-preview__surface {
  margin-top: calc(var(--pui-navbar-preview-safe-height) + var(--pui-navbar-preview-content-height) + var(--pui-preview-space-step-12));
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--custom-navbar.pui-popup-preview--card .pui-popup-preview__header {
  padding-top: var(--pui-preview-space-step-9);
}

body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--custom-navbar.pui-popup-preview--card .pui-popup-preview__scroll {
  padding-top: var(--pui-preview-space-normal);
}
body .app-shell[data-page-mode] .preview-stage .overlay-box--top .pui-popup-preview--custom-navbar.pui-popup-preview--card .pui-popup-preview__scroll--with-header {
  padding-top: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__event {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Popover delivery mirror: retained lifecycle, five placements, native component composition. */
body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase {
  display: grid;
  gap: var(--pui-preview-space-step-12);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__canvas {
  position: relative;
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  min-height: 460px;
  overflow: hidden;
  isolation: isolate;
  place-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--preview-border);
  border-radius: var(--pui-preview-radius-card);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__overlay {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--pui-popover-preview-duration, 500ms) var(--pui-popover-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__canvas.is-active .pui-popover-preview__overlay {
  opacity: 1;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__reference {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__reference .pui-button {
  min-width: 66px;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__reference {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview {
  position: absolute;
  z-index: var(--pui-popover-preview-z-index, 3);
  display: grid;
  box-sizing: border-box;
  gap: 0;
  width: var(--pui-popover-preview-width, auto);
  min-width: var(--pui-popover-preview-min-width, 90px);
  max-width: min(230px, calc(100% - 24px));
  overflow: visible;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--preview-border);
  border-radius: var(--pui-preview-radius-control);
  box-shadow: var(--shadow-edge-bottom);
  opacity: 0;
  transition: opacity var(--pui-popover-preview-duration, 500ms) var(--pui-popover-preview-ease, ease), transform var(--pui-popover-preview-duration, 500ms) var(--pui-popover-preview-ease, ease), background-color var(--pui-popover-preview-duration, 500ms) var(--pui-popover-preview-ease, ease), border-color var(--pui-popover-preview-duration, 500ms) var(--pui-popover-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview.is-disabled {
  opacity: .56;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom {
  top: calc(22% + var(--pui-preview-space-step-21) + var(--pui-popover-preview-offset, var(--pui-preview-space-step-7)));
  left: 50%;
  transform: translate(-50%, -4px);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top {
  bottom: calc(22% + var(--pui-preview-space-step-21) + var(--pui-popover-preview-offset, var(--pui-preview-space-step-7)));
  left: 50%;
  transform: translate(-50%, 4px);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left {
  top: 50%;
  right: calc(50% + var(--pui-preview-space-3xl) + var(--pui-popover-preview-offset, var(--pui-preview-space-step-7)));
  left: auto;
  max-width: calc(50% - 44px);
  transform: translate(4px, -50%);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right {
  top: 50%;
  right: auto;
  left: calc(50% + var(--pui-preview-space-3xl) + var(--pui-popover-preview-offset, var(--pui-preview-space-step-7)));
  max-width: calc(50% - 44px);
  transform: translate(-4px, -50%);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 4px));
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top.is-active {
  opacity: 1;
  transform: translate(-50%, 0);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right.is-active {
  opacity: 1;
  transform: translate(0, -50%);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--center.is-active {
  opacity: 1;
  transform: translate(-50%, -50%);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview.is-disabled.is-active {
  opacity: .56;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--arrow::before {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  content: '';
  background: var(--surface-solid);
  border: 1px solid var(--preview-border);
  transition: background-color var(--pui-popover-preview-duration, 500ms) var(--pui-popover-preview-ease, ease), border-color var(--pui-popover-preview-duration, 500ms) var(--pui-popover-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom::before { top: calc(0px - var(--pui-preview-space-sm)); left: 50%; border-right: 0; border-bottom: 0; transform: translateX(-50%) rotate(45deg); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top::before { bottom: calc(0px - var(--pui-preview-space-sm)); left: 50%; border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left::before { top: 50%; right: calc(0px - var(--pui-preview-space-sm)); border-bottom: 0; border-left: 0; transform: translateY(-50%) rotate(45deg); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right::before { top: 50%; left: calc(0px - var(--pui-preview-space-sm)); border-top: 0; border-right: 0; transform: translateY(-50%) rotate(45deg); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--center::before { display: none; }

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__title,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__custom-title {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  min-width: 0;
  padding: var(--pui-preview-space-step-9) var(--pui-preview-space-normal) var(--pui-preview-space-step-5);
  color: var(--text);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-label);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__custom-title {
  display: flex;
  gap: var(--pui-preview-space-sm);
  align-items: center;
  flex-wrap: wrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__body {
  position: relative;
  z-index: 2;
  display: grid;
  box-sizing: border-box;
  min-height: 66px;
  overflow: hidden;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__content,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__state {
  box-sizing: border-box;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity var(--pui-popover-preview-duration, 500ms) var(--pui-popover-preview-ease, ease), transform var(--pui-popover-preview-duration, 500ms) var(--pui-popover-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__content {
  display: grid;
  align-content: center;
  gap: var(--pui-preview-space-sm);
  max-height: 170px;
  overflow: auto;
  padding: var(--pui-preview-content-gap) var(--pui-preview-space-normal) var(--pui-preview-space-normal);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__content > p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

/* Side popups own a fixed viewport height: let the Content flex to the Footer instead of
   capping it at the generic 360px and leaving a blank strip below the primary action. */
body .app-shell[data-page-mode] .preview-stage .overlay-box--left .pui-popup-preview__scroll,
body .app-shell[data-page-mode] .preview-stage .overlay-box--right .pui-popup-preview__scroll {
  max-height: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__state {
  position: absolute;
  inset: 0;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-7);
  padding: var(--pui-preview-space-step-9);
  text-align: center;
  transform: translateY(3px);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__state.is-error {
  flex-direction: column;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__content.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__state.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__footer {
  position: relative;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pui-preview-space-sm);
  padding: var(--pui-preview-space-step-7) var(--pui-preview-content-gap) var(--pui-preview-content-gap);
  border-top: 1px solid var(--preview-border);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__footer > span:first-child {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-overflow: ellipsis;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__methods {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  flex-wrap: wrap;
}

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__canvas {
    min-height: 440px;
  }

  body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__footer {
    flex-wrap: wrap;
  }

  body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__footer > span:first-child {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Popover final H5 contract. This comes after the pre-alignment rules so a
   focused component battle cannot be silently re-expanded by legacy preview CSS. */
body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase {
  position: relative;
  display: grid;
  box-sizing: border-box;
  min-height: 100%;
  padding: var(--pui-preview-panel-padding);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__section {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__section > h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__section--hint {
  position: absolute;
  right: var(--pui-preview-panel-padding);
  bottom: var(--pui-preview-panel-padding);
  left: var(--pui-preview-panel-padding);
  color: var(--muted);
  pointer-events: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__section--hint > p {
  margin: 0;
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__canvas {
  position: absolute;
  inset: 0;
  display: grid;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__canvas.is-fixed {
  transform: translateZ(0);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__reference {
  position: relative;
  z-index: 3;
  display: inline-flex;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__reference .pui-button {
  min-width: 66px;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transition: opacity var(--pui-popover-preview-duration, 500ms) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__canvas.is-active .pui-popover-preview__overlay {
  opacity: 1;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview {
  position: absolute;
  z-index: 4;
  display: block;
  box-sizing: border-box;
  width: auto;
  min-width: 90px;
  max-width: calc(100% - (var(--pui-preview-panel-padding) * 2));
  padding: var(--pui-preview-panel-padding);
  overflow: visible;
  overflow-wrap: anywhere;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-floating);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transform-origin: center;
  transition: opacity var(--pui-popover-preview-duration, 500ms) var(--pui-ease-standard), transform var(--pui-popover-preview-duration, 500ms) var(--pui-ease-standard), background-color var(--pui-popover-preview-duration, 500ms) var(--pui-ease-standard), border-color var(--pui-popover-preview-duration, 500ms) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview.is-active {
  opacity: 1;
  pointer-events: auto;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase__canvas.is-fixed .pui-popover-preview {
  position: fixed;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--dark { color: var(--pui-text-on-inverse); background: var(--pui-bg-inverse); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--light { color: var(--text); background: var(--surface-solid); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--brand { color: var(--brand); background: var(--brand-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--success { color: var(--success); background: var(--success-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--warning { color: var(--warning); background: var(--warning-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--error { color: var(--danger); background: var(--danger-soft); }

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__content {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 0;
  color: inherit;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
  white-space: pre-wrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top { bottom: calc(50% + var(--pui-preview-space-step-24)); left: 50%; transform: translate(-50%, 8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom { top: calc(50% + var(--pui-preview-space-step-24)); left: 50%; transform: translate(-50%, -8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left { top: 50%; right: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(8px, -50%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right { top: 50%; left: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(-8px, -50%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-start { bottom: calc(50% + var(--pui-preview-space-step-24)); left: 50%; transform: translate(-16%, 8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-end { right: 50%; bottom: calc(50% + var(--pui-preview-space-step-24)); transform: translate(16%, 8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-start { top: calc(50% + var(--pui-preview-space-step-24)); left: 50%; transform: translate(-16%, -8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-end { top: calc(50% + var(--pui-preview-space-step-24)); right: 50%; transform: translate(16%, -8px) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-start { top: 50%; right: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(8px, -16%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-end { right: calc(50% + (var(--pui-preview-space-step-22) * 2)); bottom: 50%; transform: translate(8px, 16%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-start { top: 50%; left: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(-8px, -16%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-end { bottom: 50%; left: calc(50% + (var(--pui-preview-space-step-22) * 2)); transform: translate(-8px, 16%) scale(.98); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-start,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-end,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-start,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-end {
  width: min(180px, calc(50% - (var(--pui-preview-panel-padding) * 2)));
  min-width: 144px;
}
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom.is-active { transform: translate(-50%, 0) scale(1); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-start.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-end.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-start.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-end.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-start.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-end.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-start.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-end.is-active { transform: translate(0, 0) scale(1); }

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--arrow::before {
  position: absolute;
  z-index: 0;
  width: 10px;
  height: 10px;
  content: '';
  background: inherit;
  border: inherit;
  transform: rotate(45deg);
}
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top::before,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-start::before,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--top-end::before { bottom: calc(0px - var(--pui-preview-space-step-6)); left: 50%; border-top: 0; border-left: 0; margin-left: calc(0px - var(--pui-preview-space-step-5)); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom::before,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-start::before,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--bottom-end::before { top: calc(0px - var(--pui-preview-space-step-6)); left: 50%; border-right: 0; border-bottom: 0; margin-left: calc(0px - var(--pui-preview-space-step-5)); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left::before,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-start::before,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--left-end::before { top: 50%; right: calc(0px - var(--pui-preview-space-step-6)); border-bottom: 0; border-left: 0; margin-top: calc(0px - var(--pui-preview-space-step-5)); }
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right::before,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-start::before,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview--right-end::before { top: 50%; left: calc(0px - var(--pui-preview-space-step-6)); border-top: 0; border-right: 0; margin-top: calc(0px - var(--pui-preview-space-step-5)); }

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-popover-showcase *::before {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Sheet mirror: a persistent trigger scene plus a transparent full-viewport layer. */
body .app-shell[data-page-mode] .preview-stage .pui-sheet-showcase {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-showcase__trigger {
  z-index: 1;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  align-items: end;
  padding: var(--pui-preview-panel-padding);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview-host {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview-host > :is(.pui-sheet-preview__overlay, .pui-sheet-preview) {
  pointer-events: auto;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  min-height: 100%;
  padding: 0;
  background: rgba(9, 9, 11, .36);
  border: 0;
  opacity: 0;
  transition: opacity var(--pui-sheet-preview-duration, 500ms) var(--pui-sheet-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview-host.is-active .pui-sheet-preview__overlay {
  opacity: 1;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview {
  position: absolute;
  z-index: var(--pui-sheet-preview-z-index, 2);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100% - 10px);
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--preview-border);
  border-bottom: 0;
  border-radius: var(--pui-preview-radius-card) var(--pui-preview-radius-card) 0 0;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(calc(100% + var(--pui-sheet-drag-offset, 0px)));
  transition: opacity var(--pui-sheet-preview-duration, 500ms) var(--pui-sheet-preview-ease, ease), transform var(--pui-sheet-preview-duration, 500ms) var(--pui-sheet-preview-ease, ease), background-color var(--pui-sheet-preview-duration, 500ms) var(--pui-sheet-preview-ease, ease), border-color var(--pui-sheet-preview-duration, 500ms) var(--pui-sheet-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview.is-active {
  opacity: 1;
  transform: translateY(var(--pui-sheet-drag-offset, 0px));
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview.is-active.is-disabled {
  opacity: .64;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview.is-dragging {
  transition-duration: 0ms;
  user-select: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__handle-area {
  position: absolute;
  z-index: 1;
  top: var(--pui-preview-space-xs);
  left: 50%;
  display: flex;
  box-sizing: border-box;
  width: var(--pui-preview-space-step-24);
  min-height: var(--pui-preview-space-step-12);
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  touch-action: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__handle-area.is-draggable {
  cursor: grab;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__handle {
  display: block;
  width: 32px;
  height: 4px;
  margin: 0;
  background: var(--subtle);
  border-radius: var(--pui-preview-radius-round);
  transition: width var(--pui-sheet-preview-duration, 500ms) var(--pui-sheet-preview-ease, ease), background-color var(--pui-sheet-preview-duration, 500ms) var(--pui-sheet-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview.is-dragging .pui-sheet-preview__handle {
  width: 44px;
  background: var(--muted);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__head {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: var(--pui-preview-space-normal);
  padding: var(--pui-preview-panel-padding) var(--pui-preview-panel-padding) var(--pui-preview-space-step-8);
  border-bottom: 1px solid var(--preview-border);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__title-area {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__head strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__head span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__head--custom {
  display: flex;
  grid-template-columns: none;
  justify-content: flex-start;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__head--custom > .pui-tag {
  flex: 0 0 auto;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__body {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--pui-sheet-body-min, 120px);
  max-height: min(var(--pui-sheet-body-max, 480px), 390px);
  height: var(--pui-sheet-body-height, auto);
  flex: 1 1 auto;
  overflow: hidden;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__content,
body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__state {
  grid-area: 1 / 1;
  box-sizing: border-box;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--pui-sheet-preview-duration, 500ms) var(--pui-sheet-preview-ease, ease), transform var(--pui-sheet-preview-duration, 500ms) var(--pui-sheet-preview-ease, ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__content {
  display: grid;
  align-content: start;
  gap: var(--pui-preview-content-gap);
  max-height: 0;
  overflow: auto;
  padding: 0 var(--pui-preview-space-step-12);
  overscroll-behavior: contain;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-lg);
  text-align: center;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__state.is-error {
  flex-direction: column;
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__content.is-active,
body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__state.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__content.is-active {
  max-height: min(var(--pui-sheet-body-max, 480px), 390px);
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-step-12) var(--pui-preview-space-lg);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__footer {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-step-9) var(--pui-preview-space-step-12) var(--pui-preview-space-step-12);
  border-top: 1px solid var(--preview-border);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview--safe-area {
  padding-bottom: max(var(--pui-preview-space-step-12), env(safe-area-inset-bottom));
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__methods {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--pui-preview-content-gap);
  flex-wrap: wrap;
}

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__footer {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-sheet-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-sheet-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-sheet-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* DropdownMenu：筛选项的真实轻量镜像。 */
body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim {
  --pui-dropdown-slim-panel-offset: calc(var(--pui-preview-space-step-64) + var(--pui-preview-space-step-2));
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100%;
  isolation: isolate;
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__bar {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--preview-border);
  border-radius: var(--pui-preview-radius-card);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__trigger {
  min-width: 0;
  min-height: 54px;
  flex: 1 1 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__trigger + .pui-dropdown-slim__trigger {
  border-left: 1px solid var(--preview-border);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__trigger.is-active {
  background: var(--surface-soft);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__trigger > .pui-button-preview__content,
body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__option > .pui-button-preview__content {
  width: 100%;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__trigger-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--pui-preview-space-step-1);
  text-align: left;
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__trigger-copy strong,
body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__trigger-copy small,
body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__option-copy {
  overflow-wrap: anywhere;
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__trigger-copy strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-label);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__trigger-copy small {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__layer {
  position: absolute;
  z-index: var(--pui-dropdown-slim-z-index, 11600);
  inset: 0;
  pointer-events: none;
}

/* The mask is a real close target while the menu is open. Keeping the layer
 * non-interactive during its leaving frame prevents a second click from
 * reopening or mutating an already-closing menu. */
body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__layer.is-active {
  pointer-events: auto;
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__overlay {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  min-height: 100%;
  padding: 0;
  pointer-events: none;
  background: rgba(9, 9, 11, .28);
  border: 0;
  opacity: 0;
  transition: opacity var(--pui-dropdown-slim-duration, 500ms) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__layer.is-active .pui-dropdown-slim__overlay {
  pointer-events: auto;
  opacity: 1;
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__panel {
  position: absolute;
  z-index: 1;
  top: var(--pui-dropdown-slim-panel-offset);
  right: var(--pui-preview-space-step-14);
  left: var(--pui-preview-space-step-14);
  display: grid;
  min-width: 0;
  max-height: calc(100% - 80px);
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--preview-border);
  border-radius: var(--pui-preview-radius-floating);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.99);
  transform-origin: top center;
  transition: opacity var(--pui-dropdown-slim-duration, 500ms) var(--pui-ease-standard), transform var(--pui-dropdown-slim-duration, 500ms) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__layer.is-active .pui-dropdown-slim__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__options {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-step-1);
  padding: var(--pui-preview-space-step-7);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__option {
  justify-content: flex-start;
  min-height: 44px;
  color: var(--text);
  text-align: left;
  border-radius: calc(var(--pui-preview-radius-card) * .58);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__option.is-checked {
  color: var(--text);
  background: var(--surface-soft);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__option-copy {
  min-width: 0;
  flex: 1;
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-label);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__default {
  padding: 0 var(--pui-preview-space-step-7) var(--pui-preview-space-step-7);
}

body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-step-7) var(--pui-preview-space-step-9);
  border-top: 1px solid var(--preview-border);
}

body .app-shell[data-frost="on"] .preview-stage .pui-dropdown-slim__panel {
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__panel {
    right: var(--pui-preview-content-gap);
    left: var(--pui-preview-content-gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim *,
  body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Overlay delivery preview: a controlled full-viewport mask, not a private popup. */
body .app-shell[data-page-mode] .preview-stage .pui-overlay-showcase {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body .app-shell[data-page-mode] .preview-stage .pui-overlay-preview__background {
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 100%;
}

body .app-shell[data-page-mode] .preview-stage .pui-overlay-preview__navbar {
  display: grid;
  align-items: center;
  padding: 0 var(--pui-preview-space-step-16);
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
  background: var(--surface-soft);
}

body .app-shell[data-page-mode] .preview-stage .pui-overlay-preview__trigger {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: var(--pui-preview-space-step-16);
}

body .app-shell[data-page-mode] .preview-stage .pui-overlay-preview__layer {
  position: absolute;
  z-index: var(--pui-overlay-preview-z-index, 11000);
  top: var(--pui-overlay-preview-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: var(--pui-overlay-preview-background, rgba(9, 9, 11, .42));
  -webkit-backdrop-filter: var(--pui-overlay-preview-filter, none);
  backdrop-filter: var(--pui-overlay-preview-filter, none);
  transition: opacity var(--pui-overlay-preview-duration, 500ms) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .preview-stage .pui-overlay-preview__layer.is-active {
  opacity: 1;
  pointer-events: auto;
}

body .app-shell[data-page-mode] .preview-stage .pui-overlay-preview__mask {
  position: absolute;
  inset: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-overlay-preview__slot {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--pui-preview-space-step-16);
  color: var(--pui-text-on-inverse);
  font-family: var(--pui-font-family-sans);
  font-size: var(--pui-font-size-display);
  font-weight: var(--pui-font-weight-heavy);
  line-height: var(--pui-line-height-display);
  letter-spacing: var(--pui-letter-spacing-tight);
  pointer-events: none;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
body .app-shell[data-page-mode] .preview-stage .pui-overlay-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-overlay-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-overlay-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Button delivery preview: scoped mirror of button/button.wxml + button.wxss. */
body .app-shell[data-page-mode] .preview-stage .pui-button-contract-showcase {
  display: grid;
  gap: var(--pui-preview-section-gap);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-demo-group {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-demo-group > header {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-demo-group > header strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-demo-group > header span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-demo-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--pui-preview-content-gap);
  align-items: center;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-demo-row--baseline { align-items: baseline; }

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__form {
  display: block;
  min-width: 0;
  margin: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__form.is-block {
  width: 100%;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview {
  --pui-button-size: 44px;
  --pui-button-tone: var(--text);
  --pui-button-contrast: var(--page);
  --pui-button-soft: var(--surface-soft);
  box-sizing: border-box;
  display: inline-flex;
  min-width: 66px;
  height: var(--pui-button-size);
  min-height: var(--pui-button-size);
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-xs);
  max-width: 100%;
  padding: 0 var(--pui-preview-space-step-15);
  overflow: hidden;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
  box-shadow: var(--shadow-soft);
  transition: opacity var(--pui-button-duration, var(--pui-duration-normal)) var(--pui-button-ease, var(--pui-ease-standard)), color var(--pui-button-duration, var(--pui-duration-normal)) var(--pui-button-ease, var(--pui-ease-standard)), background-color var(--pui-button-duration, var(--pui-duration-normal)) var(--pui-button-ease, var(--pui-ease-standard)), border-color var(--pui-button-duration, var(--pui-duration-normal)) var(--pui-button-ease, var(--pui-ease-standard)), transform var(--pui-button-duration, var(--pui-duration-normal)) var(--pui-button-ease, var(--pui-ease-standard)), box-shadow var(--pui-button-duration, var(--pui-duration-normal)) var(--pui-button-ease, var(--pui-ease-standard));
  transition-delay: var(--pui-button-hover-start, 0ms);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview--extra-small,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--extra-small {
  --pui-button-size: 32px;
  min-width: 44px;
  padding: 0 var(--pui-preview-content-gap);
  font-size: var(--pui-font-size-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--small {
  --pui-button-size: 36px;
  min-width: 52px;
  padding: 0 var(--pui-preview-space-normal);
  font-size: var(--pui-font-size-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--large {
  --pui-button-size: 50px;
  min-width: 86px;
  padding: 0 var(--pui-preview-space-xl);
  font-size: var(--pui-font-size-body-medium);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--block { width: 100%; min-width: 0; }

/* ButtonGroup owns the surface. Its composed Button children stay contiguous. */
body .app-shell[data-page-mode] .preview-stage .pui-button-group-preview > .pui-button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--round,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--circle { border-radius: var(--pui-preview-radius-round); }

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--square,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--circle {
  width: var(--pui-button-size);
  min-width: var(--pui-button-size);
  padding-right: 0;
  padding-left: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--icon-only {
  gap: 0;
  line-height: var(--pui-line-height-none);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--icon-only > .pui-button-preview__icon,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--icon-only > .pui-button-preview__slot-icon {
  display: inline-flex;
  width: var(--pui-button-size);
  min-width: var(--pui-button-size);
  height: var(--pui-button-size);
  min-height: var(--pui-button-size);
  align-items: center;
  justify-content: center;
  line-height: var(--pui-line-height-none);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--primary { --pui-button-tone: var(--brand); }
body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--danger { --pui-button-tone: var(--danger); }

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--default.pui-button--base {
  background: var(--pui-button-soft);
  border-color: var(--border);
  box-shadow: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--primary.pui-button--base,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--danger.pui-button--base {
  color: var(--pui-button-contrast);
  background: var(--pui-button-tone);
  border-color: var(--pui-button-tone);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--outline {
  color: var(--pui-button-tone);
  background: transparent;
  border-color: currentColor;
  box-shadow: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--text,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--ghost,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--transparent {
  color: var(--pui-button-tone);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--text {
  min-width: 0;
  padding-right: var(--pui-preview-space-xs);
  padding-left: var(--pui-preview-space-xs);
  border-color: transparent;
}

/* Tabbar 的条目不是 small Button：共享 Button 的 36px 变量不能覆盖
   应用级导航的 56px 可点击区与图文垂直节奏。 */
body .app-shell[data-page-mode] .preview-stage .pui-tabbar-preview .pui-tabbar-preview__item.pui-button-preview {
  --pui-button-size: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  height: 56px;
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-step-5);
  overflow: visible;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview.pui-button--surface-transparent {
  background: transparent;
  background-color: transparent !important;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-tabbar-preview .pui-tabbar-preview__item.pui-button-preview > .pui-button-preview__content {
  overflow: visible;
}


body .app-shell[data-page-mode] .preview-stage .pui-button-preview:hover:not(:disabled) {
  opacity: .86;
  transform: translateY(-1px);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview:active:not(:disabled) {
  opacity: .72;
  transform: scale(.98);
  transition-delay: 0ms;
  transition-duration: var(--pui-button-hover-stay, 500ms);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview:disabled {
  color: var(--subtle);
  background: var(--surface-soft);
  border-color: var(--border);
  box-shadow: none;
  opacity: .58;
}

/* Tabbar 的禁用目的地仍属于同一条导航 Surface；禁用只降低语义色和透明度，
   不能让共享 Button 的通用 disabled 状态重新画出独立边框或底色。 */
body .app-shell[data-page-mode] .preview-stage .pui-tabbar-preview .pui-tabbar-preview__item.pui-button-preview:disabled {
  background: transparent;
  background-color: transparent !important;
  border-color: transparent;
  box-shadow: none;
}

/* BackTop themes own this nested FAB surface. Keep this after the shared Button
   mirror so theme choices remain observable in the H5 demo. */
body .app-shell[data-page-mode] .preview-stage .pui-back-top-preview .pui-fab-preview__button {
  color: var(--pui-text-on-inverse);
  background: var(--brand);
  border-color: var(--brand);
}

body .app-shell[data-page-mode] .preview-stage .pui-back-top-preview.is-round-dark .pui-fab-preview__button,
body .app-shell[data-page-mode] .preview-stage .pui-back-top-preview.is-half-round-dark .pui-fab-preview__button {
  color: var(--pui-text-on-inverse);
  background: var(--pui-bg-inverse);
  border-color: var(--pui-bg-inverse);
}

body .app-shell[data-page-mode] .preview-stage .pui-back-top-preview .pui-fab-preview__button:disabled {
  color: var(--subtle);
  background: var(--surface-soft);
  border-color: var(--border);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__content {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-back-top-preview .pui-fab-preview__button .pui-button-preview__content {
  max-width: 200px;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__content:empty {
  display: none;
}

/* Tabs 的标签与徽标是两个独立的可读单元：通用 Button 只裁切文字，
   绝不能把数量/红点裁掉。此处必须晚于通用 Button 文本规则。 */
body .app-shell[data-page-mode] .preview-stage .pui-tabs-preview__button.pui-button-preview {
  overflow: visible;
}

body .app-shell[data-page-mode] .preview-stage .pui-tabs-preview__button.pui-button-preview > .pui-button-preview__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

body .app-shell[data-page-mode] .preview-stage .pui-tabs-preview__tab-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-5);
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-tabs-preview__tab-content > .pui-tabs-preview__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-tabs-preview__tab-content > .pui-tabs-preview__badge.pui-badge-demo {
  position: static;
  flex: 0 0 auto;
  transform: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__icon,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview__slot-icon,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview__suffix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__suffix .pui-tag {
  max-width: 48px;
  padding: var(--pui-preview-space-step-1) var(--pui-preview-space-xs);
  font-size: var(--pui-font-size-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__event,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview__platform {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--pui-preview-space-sm);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pui-preview-space-xs);
  align-items: center;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__event div,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview__platform {
  display: grid;
  gap: var(--pui-preview-space-xs);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__event strong,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview__platform p,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview__platform small {
  min-width: 0;
  overflow-wrap: anywhere;
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__event strong {
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__event span,
body .app-shell[data-page-mode] .preview-stage .pui-button-preview__platform small {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__platform > span {
  display: flex;
  gap: var(--pui-preview-space-sm);
  align-items: center;
  font-size: var(--pui-font-size-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__platform p {
  margin: 0;
  color: var(--muted);
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__examples {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body .app-shell[data-page-mode] .preview-stage .pui-button-preview__examples .pui-button-preview {
  width: 100%;
  min-width: 0;
}

body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-button-preview__event,
body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-button-preview__platform {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-button-preview,
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-button-preview__event,
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-button-preview__platform { box-shadow: none; }

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-button-preview__examples { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-button-contract-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-button-contract-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-button-contract-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* Collapsible delivery preview: single trigger + single measured content region. */
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-showcase {
  display: grid;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview {
  --pui-collapsible-preview-accent: var(--brand);
  --pui-collapsible-preview-accent-soft: color-mix(in srgb, var(--brand) 10%, var(--surface-solid));
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  background: var(--surface-solid);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: none;
  transition: border-color var(--pui-collapsible-preview-duration, 500ms) var(--pui-collapsible-preview-ease, cubic-bezier(.2, 0, 0, 1)), background-color var(--pui-collapsible-preview-duration, 500ms) var(--pui-collapsible-preview-ease, cubic-bezier(.2, 0, 0, 1)), box-shadow var(--pui-collapsible-preview-duration, 500ms) var(--pui-collapsible-preview-ease, cubic-bezier(.2, 0, 0, 1));
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview--primary { --pui-collapsible-preview-accent: var(--brand); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview--success { --pui-collapsible-preview-accent: var(--success); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview--warning { --pui-collapsible-preview-accent: var(--warning); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview--danger { --pui-collapsible-preview-accent: var(--danger); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-block { width: 100%; }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-inline { display: inline-block; min-width: min(100%, 180px); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-bordered { border: 1px solid var(--border); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-borderless { border: 0; box-shadow: none; }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.has-shadow.is-open { box-shadow: var(--preview-shadow-card); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-disabled { opacity: .56; }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-readonly .pui-collapsible-preview__trigger { opacity: .76; }

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__trigger {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-normal) var(--pui-preview-space-lg);
  color: var(--text);
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: background-color var(--pui-collapsible-preview-duration, 500ms) var(--pui-collapsible-preview-ease, cubic-bezier(.2, 0, 0, 1)), opacity var(--pui-collapsible-preview-duration, 500ms) var(--pui-collapsible-preview-ease, cubic-bezier(.2, 0, 0, 1)), transform var(--pui-collapsible-preview-duration, 500ms) var(--pui-collapsible-preview-ease, cubic-bezier(.2, 0, 0, 1));
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__trigger:active:not(:disabled) { transform: scale(.995); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-open .pui-collapsible-preview__trigger { background: var(--pui-collapsible-preview-accent-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-icon-left .pui-collapsible-preview__trigger { flex-direction: row-reverse; }

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__heading,
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__trigger-slot {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--pui-preview-space-xs);
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__heading strong,
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__trigger-slot strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__heading > .pui-icon,
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__trigger-slot > .pui-icon { flex: 0 0 auto; color: var(--pui-collapsible-preview-accent); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__trigger-slot .pui-tag { flex: 0 0 auto; }

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__expand {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
  transition: color var(--pui-collapsible-preview-duration, 500ms) var(--pui-collapsible-preview-ease, cubic-bezier(.2, 0, 0, 1)), transform var(--pui-collapsible-preview-duration, 500ms) var(--pui-collapsible-preview-ease, cubic-bezier(.2, 0, 0, 1));
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-open .pui-collapsible-preview__expand { color: var(--pui-collapsible-preview-accent); transform: rotate(180deg); }

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__content {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  pointer-events: none;
  transform-origin: top;
  transition-property: max-height, opacity, transform;
  transition-duration: var(--pui-collapsible-preview-duration, 500ms);
  transition-timing-function: var(--pui-collapsible-preview-ease, cubic-bezier(.2, 0, 0, 1));
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview.is-open .pui-collapsible-preview__content { pointer-events: auto; }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__content-inner { box-sizing: border-box; min-height: 1px; padding: var(--pui-preview-space-normal) var(--pui-preview-space-lg) var(--pui-preview-space-lg); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__copy { margin: 0; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__state {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-xs);
  padding: var(--pui-preview-space-sm);
  color: var(--muted);
  text-align: center;
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__state.is-error { color: var(--danger); }

/* A composed Empty keeps the PUI Empty layout and typography, while the
   owning component remains the only surface. This prevents panel-in-panel
   decoration without replacing the child component with private state HTML. */
body .app-shell[data-page-mode] .preview-stage .pui-empty-sample.is-embedded {
  padding: var(--pui-preview-space-lg) 0;
  background: transparent;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-empty-sample.is-embedded .pui-empty-preview__actions { margin-top: var(--pui-preview-space-lg); }

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-table-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-swiper-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-popover-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-list-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-navigation-menu-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .virtual-list-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-calendar-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-collapse-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-sidebar-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-indexes-preview__state > .pui-empty-sample,
body .app-shell[data-page-mode] .preview-stage .pui-indexes-preview__state > .pui-empty-sample {
  width: 100%;
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__slot-content { display: grid; gap: var(--pui-preview-space-xs); min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__slot-actions { display: flex; flex-wrap: wrap; gap: var(--pui-preview-space-xs); align-items: center; justify-content: space-between; }

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__methods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pui-preview-space-xs);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__methods .pui-button { min-width: 0; width: 100%; }

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--pui-preview-space-xs);
  align-items: center;
  min-width: 0;
  padding: var(--pui-preview-space-sm);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
}

body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__event span { display: grid; min-width: 0; gap: var(--pui-preview-space-xxs); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__event strong { color: var(--text); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__event em { min-width: 0; overflow-wrap: anywhere; color: var(--subtle); font-size: var(--pui-font-size-caption); font-style: normal; line-height: var(--pui-line-height-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__event b { color: var(--muted); font-family: var(--pui-font-family-mono); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); }
body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__after { min-width: 0; color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }

body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-collapsible-preview,
body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-collapsible-preview__event { background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-collapsible-preview,
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-collapsible-preview__event { box-shadow: none; }

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .app-shell[data-page-mode] .preview-stage .pui-collapsible-preview__trigger-slot .pui-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-collapsible-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-collapsible-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-collapsible-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Combobox — the H5 workbench mirrors the native measured-panel contract. */
body .app-shell[data-page-mode] .preview-stage .pui-combobox-showcase {
  display: grid;
  gap: var(--pui-preview-space-sm);
  width: 100%;
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview {
  --pui-combobox-preview-option-inset-inline: var(--pui-preview-panel-padding);
  --pui-combobox-preview-option-inset-block: var(--pui-preview-space-xs);
  --pui-combobox-preview-option-gap: var(--pui-preview-content-gap);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--pui-preview-space-xs);
  width: 100%;
  min-width: 0;
  color: var(--text);
}

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-top { flex-direction: column-reverse; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview { --pui-combobox-preview-radius: var(--pui-preview-radius-medium); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-round { --pui-combobox-preview-radius: var(--pui-preview-radius-xxlarge); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-inline { width: min(100%, 260px); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-block { width: 100%; }

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-xs);
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-sm);
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-combobox-preview-radius);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: border-color var(--pui-combobox-preview-duration) var(--pui-combobox-preview-ease), background-color var(--pui-combobox-preview-duration) var(--pui-combobox-preview-ease), box-shadow var(--pui-combobox-preview-duration) var(--pui-combobox-preview-ease), opacity var(--pui-combobox-preview-duration) var(--pui-combobox-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-small .pui-combobox-preview__trigger { min-height: 36px; padding: var(--pui-preview-space-xs) var(--pui-preview-space-xs); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-large .pui-combobox-preview__trigger { min-height: 48px; padding: var(--pui-preview-space-sm) var(--pui-preview-space-normal); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-borderless .pui-combobox-preview__trigger { border-color: transparent; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-open .pui-combobox-preview__trigger { border-color: var(--text); background: var(--surface-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-disabled { opacity: .56; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-disabled .pui-combobox-preview__trigger { cursor: not-allowed; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-readonly .pui-combobox-preview__trigger { background: var(--surface-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__trigger:focus-visible,
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 42%, transparent);
  outline-offset: -2px;
}

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__trigger-main {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  color: inherit;
}

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__selection,
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__custom-trigger { display: flex; align-items: center; gap: var(--pui-preview-space-xs); min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__selection strong,
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__custom-trigger strong { min-width: 0; overflow: hidden; font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); text-overflow: ellipsis; white-space: nowrap; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__selection.is-placeholder { color: var(--muted); }

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__chips {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pui-preview-space-xs);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__chips > .pui-tag { min-width: 0; }

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__trigger-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--pui-preview-space-xxs); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__chevron { display: flex; color: var(--muted); transition: transform var(--pui-combobox-preview-duration) var(--pui-combobox-preview-ease), color var(--pui-combobox-preview-duration) var(--pui-combobox-preview-ease); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-open .pui-combobox-preview__chevron { color: var(--text); transform: rotate(180deg); }

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__panel {
  overflow: hidden;
  pointer-events: none;
  transform-origin: top;
  transition-property: height, opacity, transform;
  transition-duration: var(--pui-combobox-preview-duration);
  transition-timing-function: var(--pui-combobox-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-top .pui-combobox-preview__panel { transform-origin: bottom; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview.is-open .pui-combobox-preview__panel { pointer-events: auto; }

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__panel-inner {
  box-sizing: border-box;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-combobox-preview-radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__list {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__group { display: block; padding: var(--pui-combobox-preview-option-inset-block) var(--pui-combobox-preview-option-inset-inline) var(--pui-preview-space-xxs); color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--pui-combobox-preview-option-gap); align-items: center; width: 100%; min-height: 42px; padding: var(--pui-combobox-preview-option-inset-block) var(--pui-combobox-preview-option-inset-inline); color: var(--text); text-align: left; background: transparent; border: 0; border-radius: var(--pui-site-radius-control); cursor: pointer; transition: background-color var(--pui-combobox-preview-duration) var(--pui-combobox-preview-ease), opacity var(--pui-combobox-preview-duration) var(--pui-combobox-preview-ease), transform var(--pui-combobox-preview-duration) var(--pui-combobox-preview-ease); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option[aria-disabled="false"]:hover { background: var(--surface-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option[aria-disabled="false"]:active { transform: scale(.995); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option.is-selected { background: var(--surface-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option.is-create { border-top: 1px solid var(--border); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option-icon,
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option-check { display: flex; align-items: center; justify-content: center; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option-copy { display: grid; gap: var(--pui-preview-space-xxs); min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option strong { overflow: hidden; font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); text-overflow: ellipsis; white-space: nowrap; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__option small { overflow: hidden; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); text-overflow: ellipsis; white-space: nowrap; }

body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__state { box-sizing: border-box; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; gap: var(--pui-preview-space-xs); padding: var(--pui-preview-space-sm); color: var(--muted); text-align: center; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__state.is-error { color: var(--danger); }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__state.is-custom-empty { display: block; }
body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pui-preview-space-xs); padding: var(--pui-preview-space-xs) var(--pui-preview-space-sm); border-top: 1px solid var(--border); }

body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-combobox-preview__trigger,
body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-combobox-preview__panel-inner { background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-combobox-preview__trigger,
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-combobox-preview__panel-inner { box-shadow: none; }

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-combobox-preview__custom-trigger .pui-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-combobox-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-combobox-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-combobox-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Input owns its runtime motion token; global visual switches must not replace it. */
body .app-shell[data-page-mode] .preview-stage .pui-input-preview {
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity var(--pui-input-preview-duration) var(--pui-input-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-input-preview__control {
  transition: border-color var(--pui-input-preview-duration) var(--pui-input-preview-ease), background-color var(--pui-input-preview-duration) var(--pui-input-preview-ease), border-radius var(--pui-input-preview-duration) var(--pui-input-preview-ease), box-shadow var(--pui-input-preview-duration) var(--pui-input-preview-ease), opacity var(--pui-input-preview-duration) var(--pui-input-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-stepper--normal,
body .app-shell[data-page-mode] .preview-stage .pui-stepper--outline { background-color: var(--surface-solid); }
body .app-shell[data-page-mode] .preview-stage .pui-stepper--filled { background-color: var(--surface-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-stepper--outline { border-color: var(--border); }

body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-input-preview__control { box-shadow: none; }
body .app-shell[data-frost="on"][data-page-mode] .preview-stage .pui-input-preview__control { background: var(--surface); }
body .app-shell[data-page-mode] .preview-stage .pui-stepper__input .pui-input-preview__control {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body .app-shell[data-page-mode] .preview-stage .pui-field-preview__input .pui-input-preview__control {
  padding-right: var(--pui-preview-space-sm);
  padding-left: var(--pui-preview-space-sm);
  background: transparent;
  border-radius: var(--pui-preview-radius-control, var(--pui-preview-radius-medium));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-input-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-input-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-input-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Cell owns a real selectable row instead of a button-wrapped static sample. */
body .app-shell[data-page-mode] .preview-stage .pui-cell-showcase {
  display: grid;
  gap: var(--pui-preview-section-gap);
  width: 100%;
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .preview-device__component-layout > .pui-cell-contract-showcase.demo-section {
  gap: var(--pui-preview-section-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-cell-demo-group {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .preview-stage .pui-cell-demo-group > header {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
}

body .app-shell[data-page-mode] .preview-stage .pui-cell-demo-group > header strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .preview-stage .pui-cell-demo-group > header span {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-field-row-preview {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-normal);
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid transparent;
  border-radius: var(--pui-preview-radius-medium);
  box-shadow: none;
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
  transition: color var(--pui-field-row-preview-duration, 500ms) var(--pui-field-row-preview-ease, var(--pui-ease-standard)), background-color var(--pui-field-row-preview-duration, 500ms) var(--pui-field-row-preview-ease, var(--pui-ease-standard)), border-color var(--pui-field-row-preview-duration, 500ms) var(--pui-field-row-preview-ease, var(--pui-ease-standard)), box-shadow var(--pui-field-row-preview-duration, 500ms) var(--pui-field-row-preview-ease, var(--pui-ease-standard)), opacity var(--pui-field-row-preview-duration, 500ms) var(--pui-field-row-preview-ease, var(--pui-ease-standard)), transform var(--pui-field-row-preview-duration, 500ms) var(--pui-field-row-preview-ease, var(--pui-ease-standard));
}

body .app-shell[data-page-mode] .preview-stage .pui-cell-preview {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  overflow: hidden;
}

body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-small { min-height: 42px; padding: var(--pui-preview-space-xs) var(--pui-preview-space-sm); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-large { min-height: 62px; padding: var(--pui-preview-space-md); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-outline { border-color: var(--border); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-soft { background: var(--surface-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-bordered::after { position: absolute; right: var(--pui-preview-space-sm); bottom: 0; left: var(--pui-preview-space-sm); height: 1px; background: var(--border); content: ""; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview[tabindex] { cursor: pointer; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview[tabindex]:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 24%, transparent); outline-offset: 2px; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-hoverable:hover { background: var(--surface); transform: translateX(2px); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-selected { background: var(--surface-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-disabled { cursor: not-allowed; opacity: .46; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-readonly { cursor: default; background: var(--surface-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-loading { cursor: wait; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-align-top { align-items: flex-start; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-align-bottom { align-items: flex-end; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__media {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 0;
  overflow: hidden;
  color: var(--brand);
  background: var(--surface-soft);
  border-radius: var(--pui-preview-radius-step-7);
  transition: color var(--pui-cell-preview-duration, 500ms) var(--pui-cell-preview-ease, var(--ease-standard)), background-color var(--pui-cell-preview-duration, 500ms) var(--pui-cell-preview-ease, var(--ease-standard));
}

body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__media img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__media[hidden],
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__media img[hidden] { display: none !important; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__media-slot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pui-preview-space-xxs); width: 100%; min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__media-slot .pui-tag { height: 14px; padding-inline: var(--pui-preview-space-step-3); font-size: var(--pui-font-size-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-selected > .pui-cell-preview__media { color: var(--surface-solid); background: var(--brand); }

body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__main { display: grid; flex: 1 1 auto; gap: var(--pui-preview-space-xxs); min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__main > strong { display: flex; align-items: center; gap: var(--pui-preview-space-step-3); min-width: 0; color: var(--text); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-large .pui-cell-preview__main > strong { font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-label); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__main > strong i { color: var(--danger); font-style: normal; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__main > span,
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__main > small { display: flex; align-items: center; gap: var(--pui-preview-space-step-3); min-width: 0; margin: 0; overflow: visible; color: var(--muted); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); white-space: normal; overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__main > small { color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pui-preview-space-xs); padding-top: var(--pui-preview-space-xxs); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__extra > small { color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }

body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__right { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: var(--pui-preview-space-xs); min-width: 0; max-width: 52%; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__right > em { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--pui-font-size-caption); font-style: normal; line-height: var(--pui-line-height-caption); text-align: right; overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__right .pui-button { min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__right > .pui-badge-demo { align-self: center; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__loading { display: inline-flex; align-items: center; gap: var(--pui-preview-space-step-3); color: var(--muted); font-size: var(--pui-font-size-caption); white-space: nowrap; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__loading > .pui-spinner { flex: 0 0 auto; }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__selected { color: var(--brand); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__arrow { transition: transform var(--pui-cell-preview-duration, 500ms) var(--pui-cell-preview-ease, var(--ease-standard)); }
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-hoverable:hover .pui-cell-preview__arrow { transform: translateX(2px); }

body .app-shell[data-frost="off"][data-page-mode] .preview-stage .pui-field-row-preview { -webkit-backdrop-filter: none; backdrop-filter: none; }
body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-field-row-preview { box-shadow: none; }
body .app-shell[data-radius="normal"][data-page-mode] .preview-stage .pui-field-row-preview { border-radius: var(--pui-preview-radius-medium); }

@media (max-width: 420px) {
  body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__right { max-width: 48%; }
  body .app-shell[data-page-mode] .preview-stage .pui-cell-preview__extra > small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-cell-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-cell-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-cell-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Textarea release contract: mirrors textarea/textarea.wxss without relying on browser-only layout. */
body .app-shell[data-page-mode] .preview-stage .pui-textarea-showcase {
  gap: var(--pui-preview-space-step-12);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-showcase > .pui-showcase-section + .pui-showcase-section {
  padding-top: var(--pui-preview-space-step-18);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-showcase > .pui-showcase-section > h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-showcase__stack {
  display: grid;
  gap: var(--pui-preview-space-step-12);
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--pui-preview-space-sm);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__header,
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__label,
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__extra {
  display: flex;
  align-items: center;
  min-width: 0;
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__header {
  justify-content: space-between;
  gap: var(--pui-preview-space-sm);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__label,
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__extra {
  gap: var(--pui-preview-space-xs);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__label b {
  color: var(--danger);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__field {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--pui-preview-space-sm);
  overflow: hidden;
  background: var(--preview-surface);
  border: 1px solid var(--preview-border);
  border-radius: var(--pui-preview-radius-control);
  box-shadow: var(--preview-shadow-card);
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
  transition:
    border-color var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease),
    background-color var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease),
    box-shadow var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease),
    opacity var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease),
    transform var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--small .pui-textarea-preview__field { padding: var(--pui-preview-space-xs); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--large .pui-textarea-preview__field { padding: var(--pui-preview-space-normal); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--borderless .pui-textarea-preview__field { background: var(--surface-soft); border-color: transparent; }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--focus .pui-textarea-preview__field,
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview:focus-within .pui-textarea-preview__field { border-color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent), var(--preview-shadow-card); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--error .pui-textarea-preview__field { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 16%, transparent), var(--preview-shadow-card); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--warning .pui-textarea-preview__field { border-color: var(--warning); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--success .pui-textarea-preview__field { border-color: var(--success); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--readonly .pui-textarea-preview__field { background: var(--surface-soft); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--disabled { opacity: .5; }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--loading { opacity: .72; }

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--pui-textarea-field-height);
  min-height: var(--pui-textarea-field-min-height);
  max-height: var(--pui-textarea-field-max-height);
  padding: 0;
  overflow-y: auto;
  color: var(--text);
  font: inherit;
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-body-medium);
  resize: none;
  background: transparent;
  border: 0;
  outline: 0;
  transition: height var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease), color var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--small textarea { font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-label); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--large textarea { font-size: var(--pui-font-size-body-small); line-height: var(--pui-line-height-title-small); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__field.has-action textarea { padding-right: var(--pui-preview-space-xxl); }

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__loading-wrap {
  position: absolute;
  z-index: 1;
  top: var(--pui-preview-space-xs);
  right: var(--pui-preview-space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  opacity: 0;
  pointer-events: none;
  transform: scale(.82);
  transition: opacity var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease), transform var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__loading-wrap.is-active { opacity: 1; pointer-events: auto; transform: scale(1); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__loading-wrap:not(.is-active) .pui-spinner { animation-play-state: paused; }

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__feedback-shell {
  display: grid;
  min-width: 0;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-2px);
  transition: grid-template-rows var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease), opacity var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease), transform var(--pui-textarea-preview-duration) var(--pui-textarea-preview-ease);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__feedback-shell.is-active { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__feedback-shell > div { min-width: 0; min-height: 0; overflow: hidden; }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__feedback {
  display: flex;
  align-items: flex-start;
  gap: var(--pui-preview-space-sm);
  min-width: 0;
  padding: 0 var(--pui-preview-space-step-1);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__tips { display: flex; flex: 1 1 auto; align-items: flex-start; gap: var(--pui-preview-space-xs); min-width: 0; }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__tips > span { min-width: 0; overflow-wrap: anywhere; }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__tips.is-error { color: var(--danger); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--warning .pui-textarea-preview__tips { color: var(--warning); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview--success .pui-textarea-preview__tips { color: var(--success); }
body .app-shell[data-page-mode] .preview-stage .pui-textarea-preview__count { flex: 0 0 auto; margin-left: auto; color: var(--subtle); font-size: var(--pui-font-size-caption); font-variant-numeric: tabular-nums; }

body .app-shell[data-shadow="off"][data-page-mode] .preview-stage .pui-textarea-preview__field { box-shadow: none; }
body .app-shell[data-frost="off"][data-page-mode] .preview-stage .pui-textarea-preview__field { -webkit-backdrop-filter: none; backdrop-filter: none; }
body .app-shell[data-radius="normal"][data-page-mode] .preview-stage .pui-textarea-preview__field { border-radius: var(--pui-preview-radius-step-7); }

@media (prefers-reduced-motion: reduce) {
  body .app-shell[data-page-mode] .preview-stage .pui-textarea-showcase *,
  body .app-shell[data-page-mode] .preview-stage .pui-textarea-showcase *::before,
  body .app-shell[data-page-mode] .preview-stage .pui-textarea-showcase *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* NavigationMenu / Menubar: touch-first roots, retained panel states and drill-in submenus. */
.pui-navigation-menu-showcase { position: relative; min-width: 0; }
.pui-navigation-menu-preview {
  --pui-navigation-menu-preview-duration: 500ms;
  --pui-navigation-menu-preview-ease: var(--ease-standard);
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: max-content;
  min-width: 0;
  max-width: 100%;
}
.pui-navigation-menu-preview.is-block { display: block; width: 100%; }
.pui-navigation-menu-preview.is-vertical {
  display: grid;
  grid-template-columns: minmax(96px, 42%) minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--pui-navigation-menu-preview-offset, var(--pui-preview-space-step-7)) + var(--pui-preview-space-sm));
  width: 100%;
}
.pui-navigation-menu-preview__triggers {
  position: relative;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: var(--pui-preview-space-step-5);
  padding: var(--pui-preview-space-step-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-control, var(--pui-preview-radius-step-10));
}
.pui-navigation-menu-preview__triggers::-webkit-scrollbar { display: none; }
.pui-navigation-menu-preview:not(.is-scrollable) .pui-navigation-menu-preview__triggers { overflow: hidden; }
.pui-navigation-menu-preview.is-wrap .pui-navigation-menu-preview__triggers { flex-wrap: wrap; overflow-x: visible; }
.pui-navigation-menu-preview.is-vertical .pui-navigation-menu-preview__triggers {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  min-height: var(--pui-navigation-menu-preview-rail-height, 280px);
  flex-direction: column;
  overflow: visible;
}
.pui-navigation-menu-preview__trigger {
  appearance: none;
  display: inline-flex;
  box-sizing: border-box;
  min-width: 0;
  min-height: 32px;
  flex: 1 1 0;
  max-width: none;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-5);
  margin: 0;
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  color: var(--muted);
  font: inherit;
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-tight);
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pui-preview-radius-control, var(--pui-preview-radius-medium));
  cursor: pointer;
  transition: color var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), background-color var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), border-color var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), box-shadow var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), opacity var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), transform var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease);
}
.pui-navigation-menu-preview.is-scrollable:not(.is-wrap):not(.is-vertical) .pui-navigation-menu-preview__trigger,
.pui-navigation-menu-preview.is-wrap:not(.is-vertical) .pui-navigation-menu-preview__trigger {
  min-width: 104px;
  flex: 1 0 104px;
  max-width: none;
}
.pui-navigation-menu-preview.is-vertical .pui-navigation-menu-preview__trigger { width: 100%; min-width: 0; max-width: none; flex-basis: auto; justify-content: flex-start; overflow: visible; }
.pui-navigation-menu-preview.is-small .pui-navigation-menu-preview__trigger { min-height: 28px; padding: var(--pui-preview-space-step-5) var(--pui-preview-space-step-7); font-size: var(--pui-font-size-caption); }
.pui-navigation-menu-preview.is-large .pui-navigation-menu-preview__trigger { min-height: 38px; padding: var(--pui-preview-content-gap) var(--pui-preview-space-normal); font-size: var(--pui-font-size-caption); }
.pui-navigation-menu-preview.is-outline .pui-navigation-menu-preview__trigger { border-color: var(--border); }
.pui-navigation-menu-preview.is-soft .pui-navigation-menu-preview__trigger { background: var(--surface-solid); }
.pui-navigation-menu-preview__trigger:hover:not(:disabled),
.pui-navigation-menu-preview__trigger.is-selected,
.pui-navigation-menu-preview__trigger.is-expanded { color: var(--text); background: var(--surface-solid); border-color: var(--border-strong); box-shadow: var(--preview-shadow, none); }
.pui-navigation-menu-preview__trigger:active:not(:disabled) { transform: scale(.97); }
.pui-navigation-menu-preview__trigger:focus-visible,
.pui-navigation-menu-preview__item:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 36%, transparent); outline-offset: 1px; }
.pui-navigation-menu-preview__trigger:disabled,
.pui-navigation-menu-preview__item[aria-disabled="true"] { opacity: .44; cursor: not-allowed; }
.pui-navigation-menu-preview__trigger.is-custom { padding-inline: var(--pui-preview-space-step-7); }
.pui-navigation-menu-preview__trigger > .pui-button-preview__content { display: inline-flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: var(--pui-preview-space-step-5); overflow: hidden; text-overflow: ellipsis; }
.pui-navigation-menu-preview__trigger > .pui-button-preview__suffix { display: inline-flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: var(--pui-preview-space-step-5); margin-left: auto; overflow: visible; }
.pui-navigation-menu-preview__badge {
  position: static;
  display: inline-flex;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pui-preview-space-step-3);
  color: var(--surface-solid);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-bold);
  line-height: var(--pui-line-height-none);
  background: var(--text);
  border-radius: var(--pui-preview-radius-round);
  transform: none;
  white-space: nowrap;
}
.pui-navigation-menu-preview__badge:empty { width: 6px; min-width: 6px; height: 6px; padding: 0; }
.pui-navigation-menu-preview__indicator { display: inline-flex; transition: transform var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease); }
.pui-navigation-menu-preview__indicator.is-expanded { transform: rotate(180deg); }
.pui-navigation-menu-preview__layer {
  --pui-navigation-menu-preview-width: 100%;
  --pui-navigation-menu-preview-offset: 6px;
  position: absolute;
  z-index: 1;
  left: 0;
  box-sizing: border-box;
  width: min(100%, var(--pui-navigation-menu-preview-width));
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease);
}
.pui-navigation-menu-preview__layer.is-bottom { top: calc(100% + var(--pui-navigation-menu-preview-offset)); }
.pui-navigation-menu-preview__layer.is-top { bottom: calc(100% + var(--pui-navigation-menu-preview-offset)); }
.pui-navigation-menu-preview.is-vertical .pui-navigation-menu-preview__layer {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-height: 0;
}
.pui-navigation-menu-preview__layer.is-active { opacity: 1; pointer-events: auto; }
.pui-navigation-menu-preview__overlay {
  appearance: none;
  position: fixed;
  z-index: 0;
  inset: 0;
  margin: 0;
  padding: 0;
  background: color-mix(in srgb, var(--page) 36%, transparent);
  border: 0;
  cursor: default;
}
.pui-navigation-menu-preview__panel {
  position: relative;
  z-index: 1;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--preview-surface, var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--pui-preview-radius-card, var(--pui-preview-radius-large));
  box-shadow: var(--preview-shadow);
  -webkit-backdrop-filter: var(--preview-blur, var(--blur));
  backdrop-filter: var(--preview-blur, var(--blur));
  opacity: 0;
  transform: translateY(-7px) scale(.985);
  transform-origin: top center;
  transition: opacity var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), transform var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), background-color var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), border-color var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease);
}
.pui-navigation-menu-preview__layer.is-top .pui-navigation-menu-preview__panel { transform: translateY(7px) scale(.985); transform-origin: bottom center; }
.pui-navigation-menu-preview.is-vertical .pui-navigation-menu-preview__panel {
  width: min(100%, var(--pui-navigation-menu-preview-width));
  max-width: 100%;
  transform: translateX(-7px) scale(.985);
  transform-origin: left center;
}
.pui-navigation-menu-preview.is-vertical .pui-navigation-menu-preview__layer.is-top .pui-navigation-menu-preview__panel { transform: translateX(-7px) scale(.985); transform-origin: left center; }
.pui-navigation-menu-preview__layer.is-active .pui-navigation-menu-preview__panel { opacity: 1; transform: translateY(0) scale(1); }
.pui-navigation-menu-preview.is-vertical .pui-navigation-menu-preview__layer.is-active .pui-navigation-menu-preview__panel { transform: translateX(0) scale(1); }
.pui-navigation-menu-preview__header {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: var(--pui-preview-space-step-5);
  min-height: 42px;
  padding: var(--pui-preview-space-step-5) var(--pui-preview-space-step-7);
  border-bottom: 1px solid var(--border);
}
.pui-navigation-menu-preview__header.is-custom { display: block; padding: var(--pui-preview-space-sm); }
.pui-navigation-menu-preview__header > span { display: flex; min-width: 0; flex-direction: column; text-align: center; }
.pui-navigation-menu-preview__header strong { overflow: hidden; font-size: var(--pui-font-size-caption); text-overflow: ellipsis; white-space: nowrap; }
.pui-navigation-menu-preview__header small { display: -webkit-box; margin-top: var(--pui-preview-space-step-1); overflow: hidden; color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pui-navigation-menu-preview__header-spacer {
  width: 28px;
  min-width: 28px;
  height: 28px;
  pointer-events: none;
}
body .app-shell[data-page-mode] .preview-stage .pui-navigation-menu-preview__header .pui-navigation-menu-preview__header-action.pui-button-preview {
  --pui-button-size: 28px;
  width: var(--pui-button-size);
  min-width: var(--pui-button-size);
  height: var(--pui-button-size);
  min-height: var(--pui-button-size);
  padding: 0;
  color: var(--text);
  background: var(--border);
  border-color: transparent;
  border-radius: var(--pui-preview-radius-round);
}
.pui-navigation-menu-preview__body { position: relative; box-sizing: border-box; min-height: 120px; overflow: hidden; }
.pui-navigation-menu-preview__state {
  position: absolute;
  inset: 0;
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-space-step-7);
  padding: var(--pui-preview-space-step-12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), transform var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease);
}
.pui-navigation-menu-preview__state.is-content { display: block; padding: 0; }
.pui-navigation-menu-preview__state.is-error,
.pui-navigation-menu-preview__state.is-empty { flex-direction: column; color: var(--muted); font-size: var(--pui-font-size-caption); text-align: center; }
.pui-navigation-menu-preview__state.is-error { color: var(--danger); }
.pui-navigation-menu-preview__state.is-active { z-index: 1; opacity: 1; pointer-events: auto; transform: translateY(0); }
.pui-navigation-menu-preview__scroller { box-sizing: border-box; width: 100%; min-height: 120px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.pui-navigation-menu-preview__content-stack { position: relative; box-sizing: border-box; min-height: 100%; padding: var(--pui-preview-space-step-7); overflow: hidden; }
.pui-navigation-menu-preview__pane { box-sizing: border-box; width: 100%; opacity: 0; transform: translateX(10px); transition: opacity var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), transform var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease); }
.pui-navigation-menu-preview__content-stack.is-back .pui-navigation-menu-preview__pane.is-current,
.pui-navigation-menu-preview__content-stack.is-back:not(.is-content-active) .pui-navigation-menu-preview__pane.is-current { transform: translateX(-10px); }
.pui-navigation-menu-preview__content-stack:not(.is-transitioning) .pui-navigation-menu-preview__pane.is-current,
.pui-navigation-menu-preview__content-stack.is-content-active .pui-navigation-menu-preview__pane.is-current { opacity: 1; transform: translateX(0); }
.pui-navigation-menu-preview__pane.is-outgoing { position: absolute; top: var(--pui-preview-space-step-7); right: var(--pui-preview-space-step-7); left: var(--pui-preview-space-step-7); width: auto; opacity: 1; transform: translateX(0); }
.pui-navigation-menu-preview__content-stack.is-content-active .pui-navigation-menu-preview__pane.is-outgoing { opacity: 0; transform: translateX(-10px); }
.pui-navigation-menu-preview__content-stack.is-back.is-content-active .pui-navigation-menu-preview__pane.is-outgoing { transform: translateX(10px); }
.pui-navigation-menu-preview__group + .pui-navigation-menu-preview__group { margin-top: var(--pui-preview-space-step-5); }
.pui-navigation-menu-preview__group > hr,
.pui-navigation-menu-preview__items > hr { height: 1px; margin: var(--pui-preview-space-step-5) var(--pui-preview-space-step-7); background: var(--border); border: 0; }
.pui-navigation-menu-preview__group > header { display: flex; box-sizing: border-box; min-width: 0; flex-direction: column; gap: var(--pui-preview-space-step-1); padding: var(--pui-preview-space-step-5) var(--pui-preview-space-step-7); }
.pui-navigation-menu-preview__group > header strong { font-size: var(--pui-font-size-caption); }
.pui-navigation-menu-preview__group > header small { color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); }
.pui-navigation-menu-preview__items { display: grid; gap: var(--pui-preview-space-step-3); }
.pui-navigation-menu-preview__item {
  appearance: none;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pui-preview-space-sm);
  margin: 0;
  padding: var(--pui-preview-space-sm) var(--pui-preview-space-step-7);
  color: var(--text);
  font: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pui-preview-radius-control, var(--pui-preview-radius-medium));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
  transition: color var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), background-color var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), border-color var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), opacity var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease), transform var(--pui-navigation-menu-preview-duration) var(--pui-navigation-menu-preview-ease);
}
.pui-navigation-menu-preview__item:hover[aria-disabled="false"],
.pui-navigation-menu-preview__item.is-checked { background: var(--surface-soft); border-color: var(--border); }
.pui-navigation-menu-preview__item:active[aria-disabled="false"] { transform: scale(.985); }
.pui-navigation-menu-preview__item-media { display: inline-flex; width: 20px; min-width: 20px; align-items: center; justify-content: center; color: inherit; }
.pui-navigation-menu-preview__item > .pui-cell__main { display: flex; min-width: 0; flex-direction: column; }
.pui-navigation-menu-preview__item-tail { display: inline-flex; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--pui-preview-space-step-5); }
.pui-navigation-menu-preview__item-tail > .pui-tag { flex: none; }
.pui-navigation-menu-preview__item strong { overflow: hidden; font-size: var(--pui-font-size-caption); text-overflow: ellipsis; white-space: nowrap; }
.pui-navigation-menu-preview__item small { display: -webkit-box; margin-top: var(--pui-preview-space-step-1); overflow: hidden; color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pui-navigation-menu-preview__item.is-danger { color: var(--danger); }
.pui-navigation-menu-preview__item.is-warning { color: var(--warning); }
.pui-navigation-menu-preview__item.is-success { color: var(--success); }
.pui-navigation-menu-preview__custom-content { display: grid; box-sizing: border-box; min-height: 100%; gap: var(--pui-preview-space-step-7); align-content: start; padding: var(--pui-preview-space-step-7); }
.pui-navigation-menu-preview__footer { display: flex; box-sizing: border-box; min-width: 0; align-items: center; justify-content: space-between; gap: var(--pui-preview-space-sm); min-height: 38px; padding: var(--pui-preview-space-step-5) var(--pui-preview-space-step-7); border-top: 1px solid var(--border); }
.pui-navigation-menu-preview__methods { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pui-preview-space-step-5); margin-top: var(--pui-preview-space-normal); }
.pui-navigation-menu-preview__methods .pui-button { width: 100%; min-width: 0; padding-inline: var(--pui-preview-space-step-5); }
.pui-navigation-menu-preview__event { display: grid; box-sizing: border-box; width: 100%; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: var(--pui-preview-space-step-7); margin-top: var(--pui-preview-space-step-9); padding: var(--pui-preview-space-step-9) var(--pui-preview-space-normal); color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--pui-preview-radius-control, var(--pui-preview-radius-medium)); }
.pui-navigation-menu-preview__event > span { display: flex; min-width: 0; flex-direction: column; gap: var(--pui-preview-space-xxs); }
.pui-navigation-menu-preview__event strong { color: var(--text); font-size: var(--pui-font-size-caption); }
.pui-navigation-menu-preview__event em { min-width: 0; overflow-wrap: anywhere; font-size: var(--pui-font-size-caption); font-style: normal; line-height: var(--pui-line-height-caption); }
.pui-navigation-menu-preview__event b { grid-column: 2; color: var(--subtle); font-size: var(--pui-font-size-caption); font-weight: var(--pui-font-weight-semibold); overflow-wrap: anywhere; }
.pui-navigation-menu-preview__after { box-sizing: border-box; width: 100%; min-width: 0; margin-top: var(--pui-preview-space-step-5); color: var(--subtle); font-size: var(--pui-font-size-caption); line-height: var(--pui-line-height-caption); overflow-wrap: anywhere; }
.pui-navigation-menu-preview.is-disabled { opacity: .6; }
.pui-navigation-menu-preview.is-readonly .pui-navigation-menu-preview__item,
.pui-navigation-menu-preview.is-readonly .pui-navigation-menu-preview__trigger { cursor: default; }

body .app-shell[data-shadow="off"] .pui-navigation-menu-preview__panel,
body .app-shell[data-shadow="off"] .pui-navigation-menu-preview__trigger { box-shadow: none; }
body .app-shell[data-frost="off"] .pui-navigation-menu-preview__panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
body .app-shell[data-radius="normal"] .pui-navigation-menu-preview__triggers,
body .app-shell[data-radius="normal"] .pui-navigation-menu-preview__panel,
body .app-shell[data-radius="normal"] .pui-navigation-menu-preview__trigger,
body .app-shell[data-radius="normal"] .pui-navigation-menu-preview__item,
body .app-shell[data-radius="normal"] .pui-navigation-menu-preview__event { border-radius: var(--pui-preview-radius-small); }

@media (max-width: 420px) {
  .pui-navigation-menu-showcase,
  .pui-navigation-menu-preview,
  .pui-navigation-menu-preview__layer,
  .pui-navigation-menu-preview__panel { max-width: 100%; }
  .pui-navigation-menu-preview__methods { grid-template-columns: 1fr; }
  .pui-navigation-menu-preview__trigger { max-width: none; }
  .pui-navigation-menu-preview.is-vertical .pui-navigation-menu-preview__trigger { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pui-navigation-menu-showcase *,
  .pui-navigation-menu-showcase *::before,
  .pui-navigation-menu-showcase *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* The desktop navigation rails share one authoritative top-bar measurement.
   `dvh` follows browser chrome changes; `vh` remains the compatibility fallback. */
:root {
  --pui-site-topbar-height: 57px;
}

/* `overflow-x: hidden` turns the shell into a non-scrolling overflow container,
   which makes descendant sticky rails follow the shell instead of the page. */
.app-shell {
  overflow-x: visible;
  overflow-x: clip;
  overflow-y: visible;
}

@media (min-width: 1181px) {
  .workspace {
    min-height: calc(100vh - var(--pui-site-topbar-height));
    min-height: calc(100dvh - var(--pui-site-topbar-height));
    align-items: stretch;
  }

  .sidebar,
  .inspector {
    position: sticky;
    top: var(--pui-site-topbar-height);
    align-self: start;
    height: calc(100vh - var(--pui-site-topbar-height));
    height: calc(100dvh - var(--pui-site-topbar-height));
    max-height: calc(100vh - var(--pui-site-topbar-height));
    max-height: calc(100dvh - var(--pui-site-topbar-height));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .workspace {
    min-height: calc(100vh - var(--pui-site-topbar-height));
    min-height: calc(100dvh - var(--pui-site-topbar-height));
  }

  .sidebar {
    position: sticky;
    top: var(--pui-site-topbar-height);
    align-self: start;
    height: calc(100vh - var(--pui-site-topbar-height));
    height: calc(100dvh - var(--pui-site-topbar-height));
    overflow-y: auto;
  }

  .inspector {
    position: static;
    top: auto;
    grid-column: 1 / -1;
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .workspace {
    min-height: calc(100vh - 98px);
    min-height: calc(100dvh - 98px);
  }

  .sidebar,
  .inspector {
    position: static;
    top: auto;
    align-self: auto;
    height: auto;
    max-height: none;
  }

  .sidebar {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }

  .inspector {
    overflow: visible;
  }
}

/* Global readability and surface contract.
   This final layer is intentionally authoritative because component mirrors
   are accumulated above as individual release contracts. */
.app-shell .panel {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.app-shell .panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-space-sm);
  margin-bottom: var(--pui-preview-space-sm);
}

.app-shell .props-panel {
  gap: var(--pui-preview-space-sm);
}

.app-shell .state-grid > div,
.app-shell .meta-grid > div {
  padding: var(--pui-preview-panel-padding-compact);
}

.app-shell .props-panel .prop-control {
  padding: var(--pui-preview-panel-padding-compact) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.app-shell .props-panel .prop-control:last-child {
  border-bottom: 0;
}

.preview-toolbar__intro {
  min-width: 0;
  max-width: 720px;
}

.preview-description {
  max-width: 680px;
  margin: var(--pui-preview-space-step-7) 0 0;
  color: var(--muted);
  font-size: var(--pui-preview-doc-body-size);
  line-height: var(--pui-preview-doc-body-line-height);
}

.preview-canvas {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.preview-canvas__body {
  min-height: 0;
  padding: 0;
  background: transparent;
}

.preview-device {
  --pui-preview-device-surface: var(--preview-stage-surface, var(--page));
  --pui-preview-scroll-gradient-size: var(--pui-scroll-area-gradient-overlay-size-md);
  --pui-preview-scroll-gradient-color: var(--pui-preview-device-surface);
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  box-sizing: border-box;
  width: min(100%, var(--device-width, 393px));
  height: var(--pui-preview-device-height);
  min-height: var(--pui-preview-device-height);
  max-height: var(--pui-preview-device-height);
  padding: 0;
  overflow: hidden;
  background: var(--pui-preview-device-surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-phone);
  box-shadow: var(--preview-shadow-phone);
  transform: translate3d(0, 0, 0);
  transition: transform var(--pui-site-element-inspector-duration) var(--pui-site-element-inspector-ease);
  will-change: transform;
}

.preview-stage--overview {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  container-type: inline-size;
}

body .app-shell[data-page-mode] .preview-device__component-layout--edge-to-edge > :is(
  .pui-dialog-showcase,
  .pui-popup-showcase,
  .pui-sheet-showcase,
  .pui-popover-showcase,
  .pui-action-sheet-showcase,
  .pui-dropdown-slim,
  .pui-overlay-showcase,
  .pui-tooltip-showcase,
  .pui-calendar-showcase.is-popup-mode
) {
  height: 100%;
  min-height: 100%;
}

body .app-shell[data-page-mode] .preview-device__viewport :is(
  .pui-dialog-showcase__stage,
  .pui-badge-showcase__stage,
  .pui-bubble-showcase__stage,
  .pui-bubble-showcase__thread,
  .pui-dropdown-slim,
  .pui-popover-showcase__canvas,
  .pui-tooltip-showcase__canvas,
  .pui-sheet-preview-host,
  .overlay-box.pui-popup-preview-host,
  .pui-action-sheet-showcase__canvas,
  .pui-overlay-showcase,
  .toast-stage,
  .pui-navbar-showcase__frame,
  .pui-tabbar-viewport,
  .pui-back-top-preview__frame
) {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .app-shell[data-page-mode] .preview-device__viewport :is(
  .pui-dialog-showcase__stage,
  .pui-popover-showcase__canvas,
  .pui-tooltip-showcase__canvas,
  .pui-sheet-preview-host,
  .overlay-box.pui-popup-preview-host,
  .pui-action-sheet-showcase__canvas,
  .pui-dropdown-slim,
  .pui-overlay-showcase
) {
  min-height: 100%;
}

.preview-device__viewport {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: inherit;
  /* Reserve matching inline gutters so a classic browser scrollbar never
     shifts every component preview 11px to the left. */
  scrollbar-gutter: stable both-edges;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

/* 屏幕附着组件必须真正贴边；不能为浏览器滚动条在两侧保留对称 gutter，
   否则 Tabbar/Navbar 会被误缩进成内层面板。 */
.preview-device__viewport--edge-to-edge { scrollbar-gutter: auto; }
.preview-device__viewport--edge-to-edge { scrollbar-width: none; }
.preview-device__viewport--edge-to-edge::-webkit-scrollbar { display: none; }

.preview-device__viewport::-webkit-scrollbar {
  width: var(--pui-preview-device-scrollbar-size);
}

.preview-device__viewport::-webkit-scrollbar-track {
  background: transparent;
}

.preview-device__viewport::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--pui-preview-radius-round);
}

.preview-device__viewport.is-scrolling {
  scrollbar-color: var(--pui-preview-device-scrollbar-color) transparent;
}

.preview-device__viewport.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--pui-preview-device-scrollbar-color);
}

.preview-device__viewport:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 34%, transparent);
  outline-offset: -2px;
}

.preview-device__viewport[data-preview-drag-scroll="true"],
.preview-device__viewport [data-preview-drag-scroll="true"] { cursor: grab; }

.preview-device__viewport.is-pointer-dragging,
.preview-device__viewport .is-pointer-dragging {
  cursor: grabbing;
  user-select: none;
}

.preview-device__scroll-gradient {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: var(--pui-preview-scroll-gradient-size);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--pui-duration-normal) var(--pui-ease-standard), visibility 0s linear var(--pui-duration-normal);
}

.preview-device__scroll-gradient--top {
  top: 0;
  background: linear-gradient(to bottom, var(--pui-preview-scroll-gradient-color), transparent);
}

.preview-device__scroll-gradient--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--pui-preview-scroll-gradient-color), transparent);
}

.preview-device.has-preview-scroll-overflow:not(.is-preview-scroll-top) .preview-device__scroll-gradient--top,
.preview-device.has-preview-scroll-overflow:not(.is-preview-scroll-bottom) .preview-device__scroll-gradient--bottom {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.preview-device__viewport > * {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.preview-device__component-layout {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  align-content: start;
}

.preview-device__component-layout--shadow-safe {
  grid-template-rows: minmax(0, auto);
  height: auto;
  min-height: 100%;
  align-content: start;
  padding: var(--pui-preview-component-layout-padding);
}

.preview-device__component-layout--edge-to-edge {
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  align-content: stretch;
  padding: 0;
}

.preview-device__component-layout > * {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

.preview-device__component-layout--shadow-safe > * {
  height: auto;
  min-height: 100%;
}

.preview-device__component-layout--edge-to-edge > * {
  height: 100%;
  min-height: 0;
}

body .app-shell[data-page-mode] .preview-stage .preview-device__component-layout > .demo-section {
  gap: var(--pui-preview-content-gap);
  margin: 0;
}

body .app-shell[data-page-mode] .preview-stage .preview-device__component-layout > .pui-switch-showcase.demo-section {
  gap: var(--pui-section-gap);
}

body .app-shell[data-page-mode] .preview-stage .preview-device__component-layout > .pui-checkbox-showcase.demo-section {
  gap: var(--pui-section-gap);
}

body .app-shell[data-page-mode] .preview-stage .preview-device__component-layout > .pui-breadcrumb-showcase.demo-section {
  gap: var(--pui-preview-section-gap);
}

body .app-shell[data-page-mode] .preview-stage .preview-device__component-layout > .pui-tabbar-showcase.demo-section {
  gap: var(--pui-preview-section-gap);
}

.preview-device__viewport .pui-cell {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.preview-device__viewport .pui-cell > em {
  min-width: 0;
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-device__viewport .pui-showcase-label,
.preview-device__viewport .pui-badge-showcase,
.preview-device__viewport .pui-badge-showcase > * {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.preview-device__viewport .pui-showcase-label > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-device__viewport .pui-badge-showcase__stage {
  overflow: hidden;
}

.preview-device__viewport .pui-navigation-menu-preview__overlay {
  right: 0;
  left: 0;
}

/* Authoritative standard-component page layout. Keep this near the final
   global contract so earlier Inspector-era rules cannot widen PROP. */
body .app-shell[data-page-mode] .workspace {
  grid-template-columns: 244px minmax(0, 1fr);
}

body .app-shell[data-page-mode] .component-prop-workspace {
  grid-template-columns: minmax(0, 1fr);
}

body .app-shell[data-page-mode] .component-prop-workspace__section,
body .app-shell[data-page-mode] .component-prop-workspace .props-panel,
body .app-shell[data-page-mode] .component-prop-workspace .compat-list,
body .app-shell[data-page-mode] .component-prop-workspace .code {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body .app-shell[data-page-mode] .component-prop-workspace .component-prop-workspace__section {
  margin: 0;
  padding-top: var(--pui-preview-section-gap);
  border-top: 1px solid var(--border);
}

body .app-shell[data-page-mode] .component-prop-workspace .panel__title {
  margin-bottom: var(--pui-preview-panel-padding);
}

body .app-shell[data-page-mode] .component-prop-workspace .panel__title h2 {
  font-size: var(--pui-font-size-body-large);
  line-height: var(--pui-line-height-body-large);
}

body .app-shell[data-page-mode] .component-prop-workspace .component-prop-workspace__meta {
  margin: 0;
}

body .app-shell[data-page-mode] .component-prop-workspace .component-prop-workspace__meta > div,
body .app-shell[data-page-mode] .component-prop-workspace .props-panel .prop-control,
body .app-shell[data-page-mode] .component-prop-workspace .compat-item {
  min-width: 0;
  padding: var(--pui-preview-panel-padding);
  background: var(--surface-soft);
  border: 0;
  border-radius: var(--pui-site-radius-control);
}

body .app-shell[data-page-mode] .component-prop-workspace .code {
  padding: var(--pui-preview-panel-padding-spacious);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

body .app-shell[data-page-mode] .component-prop-workspace .compat-item > strong,
body .app-shell[data-page-mode] .component-prop-workspace .compat-item > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

body .app-shell[data-page-mode] .component-page-navigation > .component-page-tabs[hidden] {
  display: none !important;
}

body .app-shell[data-page-mode] .component-page-navigation {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: var(--pui-preview-content-gap);
  box-sizing: border-box;
  width: min(270px, 42vw);
  min-width: 0;
  contain: layout;
}

body .app-shell[data-page-mode="interactive"] .preview-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
  align-items: start;
}

body .app-shell[data-page-mode="interactive"] .preview-toolbar__intro,
body .app-shell[data-page-mode="interactive"] .component-page-navigation {
  align-self: start;
}

body .app-shell[data-page-mode="interactive"] .component-page-navigation {
  grid-column: 2;
}

body .app-shell[data-page-mode="interactive"] .component-page-navigation {
  grid-template-rows: var(--pui-preview-tabs-row-height);
  height: var(--pui-preview-tabs-row-height);
  min-height: var(--pui-preview-tabs-row-height);
}

body .app-shell[data-page-mode="interactive"] .component-page-tabs {
  grid-row: 1;
  align-self: start;
  width: 100%;
  height: var(--pui-preview-tabs-row-height);
  min-height: var(--pui-preview-tabs-row-height);
  max-height: var(--pui-preview-tabs-row-height);
  overflow: hidden;
}

body .app-shell[data-page-mode="interactive"] .main,
body .app-shell[data-page-mode="interactive"] .preview-toolbar,
body .app-shell[data-page-mode="interactive"] #previewStage {
  overflow-anchor: none;
}

body .app-shell[data-page-mode] .component-view-action-mount {
  display: inline-flex;
  gap: var(--pui-preview-content-gap);
  width: var(--pui-preview-actions-group-width);
  height: var(--pui-preview-actions-row-height);
  align-items: center;
  justify-content: flex-end;
}

body .app-shell[data-page-mode] .component-view-action-mount > .is-action-hidden {
  visibility: hidden;
  pointer-events: none;
}

body .app-shell[data-page-mode] .component-device-select-mount {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: var(--pui-preview-actions-row-height);
}

body .app-shell[data-page-mode] .pui-select-control {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: var(--pui-preview-space-step-36);
  color: var(--text);
  color-scheme: inherit;
}

body .app-shell[data-page-mode] .pui-select-control--extra-small {
  height: var(--pui-preview-space-step-32);
}

body .app-shell[data-page-mode] .pui-select-control__trigger.pui-button-preview {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
  padding: 0 var(--pui-preview-space-step-8);
  overflow: hidden;
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  cursor: pointer;
  background: var(--surface-solid);
  border-color: var(--border);
  border-radius: var(--pui-preview-radius-control);
  box-shadow: var(--preview-shadow-card);
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
}

body .app-shell[data-page-mode] .pui-select-control__trigger.pui-button-preview > .pui-button-preview__content {
  display: block;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .app-shell[data-page-mode] .pui-select-control__trigger.pui-button-preview:focus-visible {
  border-color: var(--text);
  outline: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
  outline-offset: 1px;
}

body .app-shell[data-page-mode] .pui-select-control__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  pointer-events: none;
  transition: transform var(--pui-duration-normal) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .pui-select-control.is-open .pui-select-control__icon {
  transform: rotate(180deg);
}

body .app-shell[data-page-mode] .pui-select-control.is-action-hidden {
  visibility: hidden;
  pointer-events: none;
}

body .app-shell[data-page-mode] .pui-select-control__menu[popover] {
  position: fixed;
  inset: auto;
  z-index: calc(var(--pui-site-appearance-menu-z-index) + 4);
  box-sizing: border-box;
  max-width: calc(100vw - (var(--pui-preview-content-gap) * 2));
  max-height: min(280px, calc(100vh - (var(--pui-preview-content-gap) * 2)));
  padding: var(--pui-preview-space-xs);
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text);
  color-scheme: inherit;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-control);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--preview-blur);
  backdrop-filter: var(--preview-blur);
  opacity: 0;
  transform: translateY(-4px) scale(.985);
  transform-origin: top center;
  transition: opacity var(--pui-duration-normal) var(--pui-ease-standard), transform var(--pui-duration-normal) var(--pui-ease-standard);
}

body .app-shell[data-page-mode] .pui-select-control__menu[popover]:popover-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body .app-shell[data-page-mode] .pui-select-control__menu[aria-hidden="true"] {
  display: none;
}

body .app-shell[data-page-mode] .pui-select-control__option.pui-button-preview {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: var(--pui-preview-space-step-32);
  justify-content: flex-start;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-xs) var(--pui-preview-space-step-8);
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--pui-preview-radius-small);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .app-shell[data-page-mode] .pui-select-control__option.pui-button-preview > .pui-button-preview__content {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .app-shell[data-page-mode] .pui-select-control__option.pui-button-preview:is(:focus-visible, .is-selected) {
  background: var(--surface-soft);
}

body .app-shell[data-page-mode] .pui-select-control__option .pui-button-preview__suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 0;
}

body .app-shell[data-page-mode] .pui-select-control__option.is-selected .pui-button-preview__suffix {
  opacity: 1;
}

body .app-shell[data-page-mode] .pui-select-control__empty {
  padding: var(--pui-preview-content-gap);
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  text-align: center;
}

.component-search-mount,
.component-search-control.pui-input-preview {
  display: block;
  width: 100%;
  min-width: 0;
}

.icon-search-mount,
.icon-search-control.pui-input-preview {
  display: block;
  width: 100%;
  min-width: 0;
}

.icon-search-control.pui-input-preview .pui-input-preview__control {
  min-height: var(--pui-site-icon-search-height);
  background: var(--surface-soft);
}

.component-search-control.pui-input-preview .pui-input-preview__control {
  background: var(--surface-soft);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .app-shell[data-page-mode] .component-prop-workspace .prop-control {
  align-content: start;
  gap: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .component-prop-workspace .prop-control--row {
  align-content: center;
  align-items: center;
}

body .app-shell[data-page-mode] .component-prop-workspace .prop-control__label {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .app-shell[data-page-mode] .component-prop-workspace .prop-control__label em {
  float: right;
  color: var(--brand);
  font-style: normal;
}

body .app-shell[data-page-mode] .component-prop-workspace .prop-control__input,
body .app-shell[data-page-mode] .component-prop-workspace .prop-control__select,
body .app-shell[data-page-mode] .component-prop-workspace .prop-control__textarea {
  width: 100%;
  min-width: 0;
}

body .app-shell[data-page-mode] .component-prop-workspace .prop-control .pui-input-preview__control input,
body .app-shell[data-page-mode] .component-prop-workspace .prop-control .pui-textarea-preview textarea {
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}

body .app-shell[data-page-mode] .component-prop-workspace .pui-textarea-control-sample {
  --pui-textarea-preview-duration: var(--pui-duration-normal);
  --pui-textarea-preview-ease: var(--ease-standard);
  --pui-textarea-field-height: var(--pui-preview-prop-json-height);
  --pui-textarea-field-min-height: var(--pui-preview-prop-json-height);
  --pui-textarea-field-max-height: var(--pui-preview-prop-json-height);
}

body .app-shell[data-page-mode] .component-prop-workspace .prop-control:has([data-prop].is-invalid) .pui-input-preview__control,
body .app-shell[data-page-mode] .component-prop-workspace .prop-control:has([data-prop].is-invalid) .pui-textarea-preview__field {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 16%, transparent), var(--preview-shadow-card);
}

body .app-shell[data-page-mode] .component-prop-workspace .pui-switch-control-sample {
  justify-self: end;
  width: auto;
}

body .app-shell[data-page-mode] .component-prop-workspace .pui-switch-control-sample .pui-switch-preview__control {
  position: relative;
  display: block;
}

body .app-shell[data-page-mode] .component-prop-workspace .pui-switch-control-sample__native {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

body .app-shell[data-page-mode] .component-prop-workspace .pui-switch-control-sample .pui-switch-preview__control:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--text) 18%, transparent);
  outline-offset: 2px;
}

body .app-shell[data-page-mode] .component-prop-workspace .prop-control > .pui-slider {
  width: auto;
  min-width: 0;
}

body .app-shell[data-page-mode] .component-view-action-mount > .icon-button.pui-button {
  display: inline-flex;
  width: var(--pui-preview-space-step-36);
  min-width: var(--pui-preview-space-step-36);
  height: var(--pui-preview-space-step-36);
  min-height: var(--pui-preview-space-step-36);
  align-items: center;
  justify-content: center;
  padding: 0;
}

body .app-shell[data-page-mode] #componentCopyAction[data-copy-state="success"] {
  color: var(--success);
}

body .app-shell[data-page-mode] #componentCopyAction[data-copy-state="error"] {
  color: var(--danger);
}

/* Mirrors the public pui-sr-only utility so aria-live feedback never consumes
 * toolbar geometry while remaining available to assistive technology. */
.pui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  body .app-shell[data-page-mode] .workspace {
    display: block;
  }

  body .app-shell[data-page-mode] .component-page-navigation {
    display: grid;
    grid-column: 1;
    justify-items: stretch;
    gap: var(--pui-preview-content-gap);
    width: 100%;
  }

  body .app-shell[data-page-mode="interactive"] .preview-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  body .app-shell[data-page-mode] .component-page-tabs {
    width: 100%;
    min-width: 0;
  }

  body .app-shell[data-page-mode] .component-view-action-mount > .icon-button.pui-button {
    flex: 0 0 auto;
  }

  body .app-shell[data-page-mode] .component-prop-workspace .component-prop-workspace__meta,
  body .app-shell[data-page-mode] .component-prop-workspace .props-panel,
  body .app-shell[data-page-mode] .component-prop-workspace .compat-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.document-content {
  width: min(100%, 980px);
  margin: 0 auto;
}

.document-content > .demo-section {
  margin: 0;
}

.spec-sheet > .api-reference:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.app-shell .panel__title h2 {
  margin: 0;
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-label);
}

.app-shell .pui-popup-preview__header,
.app-shell .pui-popup-preview__body,
.app-shell .pui-dialog,
.app-shell .pui-overlay-showcase__content {
  padding: var(--pui-dialog-action-spacing, var(--pui-preview-panel-padding));
}

.app-shell .pui-tag__close,
.app-shell .pui-cell__arrow {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .app-shell .panel {
    padding: 0;
  }
}

/* Getting Started is a document surface, not a simulated phone. It keeps one
 * readable content column and only exposes copy actions for verified public
 * npm, GitHub and currently usable page code. */
.pui-guide {
  display: grid;
  gap: calc(var(--pui-section-gap) * 2);
  width: min(100%, 920px);
}

.pui-guide__hero {
  display: grid;
  gap: var(--pui-preview-space-normal);
  padding: var(--pui-preview-panel-padding-spacious) 0 0;
}

.pui-guide__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pui-preview-space-normal);
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
}

.pui-guide__hero h2,
.pui-guide__section-header h2,
.pui-guide__code-header h3 {
  margin: 0;
  color: var(--text);
}

.pui-guide__hero h2 {
  font-size: var(--pui-font-size-title-large);
  line-height: var(--pui-line-height-title-large);
}

.pui-guide__hero p,
.pui-guide__section-header p,
.pui-guide__code-header p,
.pui-guide__notice p,
.pui-guide__skill p,
.pui-guide__license p {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.pui-guide__notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pui-preview-panel-padding);
  align-items: start;
  padding: var(--pui-preview-panel-padding-spacious);
  color: var(--warning);
  background: var(--warning-soft);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-guide__notice > div {
  display: grid;
  gap: var(--pui-preview-space-xs);
}

.pui-guide__notice p {
  color: currentColor;
}

.pui-guide__notice-icon,
.pui-guide__skill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pui-guide__section {
  display: grid;
  gap: var(--pui-section-gap);
}

.pui-guide__section-header {
  display: grid;
  grid-template-columns: var(--pui-preview-space-step-36) minmax(0, 1fr);
  gap: var(--pui-preview-panel-padding);
  align-items: start;
}

.pui-guide__section-header > span {
  color: var(--muted);
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-title-medium);
}

.pui-guide__section-header > div {
  display: grid;
  gap: var(--pui-preview-space-xs);
}

.pui-guide__section-header h2 {
  font-size: var(--pui-font-size-title-medium);
  line-height: var(--pui-line-height-title-medium);
}

.pui-guide__status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-guide__status-grid > div {
  display: grid;
  gap: var(--pui-preview-space-xs);
  min-width: 0;
  padding: var(--pui-preview-panel-padding-spacious);
}

.pui-guide__status-grid > div:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.pui-guide__status-grid > div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--border);
}

.pui-guide__status-grid span,
.pui-guide__skill span {
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
}

.pui-guide__status-grid strong {
  overflow-wrap: anywhere;
  font-size: var(--pui-font-size-body-medium);
}

.pui-guide__status-grid .is-pending {
  color: var(--warning);
}

.pui-guide__steps,
.pui-guide__checklist {
  display: grid;
  gap: var(--pui-preview-panel-padding);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pui-guide__steps li,
.pui-guide__checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pui-preview-panel-padding);
  align-items: start;
}

.pui-guide__steps li > span {
  display: inline-flex;
  width: var(--pui-preview-space-step-24);
  height: var(--pui-preview-space-step-24);
  align-items: center;
  justify-content: center;
  color: var(--surface-solid);
  background: var(--text);
  border-radius: var(--pui-radius-round);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
}

.pui-guide__steps p,
.pui-guide__checklist span {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.pui-guide__code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pui-preview-panel-padding);
}

.pui-guide__code-section {
  display: grid;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-guide__code-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pui-preview-panel-padding);
  align-items: center;
  padding: var(--pui-preview-panel-padding);
  border-bottom: 1px solid var(--border);
}

.pui-guide__code-header > div {
  display: grid;
  gap: var(--pui-preview-space-xxs);
}

.pui-guide__code-header h3 {
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.pui-guide__copy.pui-button {
  width: var(--pui-preview-space-step-36);
  min-width: var(--pui-preview-space-step-36);
  height: var(--pui-preview-space-step-36);
  min-height: var(--pui-preview-space-step-36);
  padding: 0;
}

.pui-guide__copy[data-copy-state="success"] {
  color: var(--success);
}

.pui-guide__copy[data-copy-state="error"] {
  color: var(--danger);
}

.pui-guide__code {
  min-width: 0;
  margin: 0;
  padding: var(--pui-preview-panel-padding-spacious);
  overflow: auto;
  color: var(--text);
  background: var(--surface-soft);
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-body-small);
  font-variant-ligatures: none;
  line-height: var(--pui-line-height-body-medium);
  tab-size: 2;
}

.pui-guide__code code {
  font: inherit;
}

.pui-guide__skill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pui-preview-panel-padding-spacious);
  align-items: center;
  padding: var(--pui-preview-panel-padding-spacious);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-guide__skill-icon {
  width: var(--pui-preview-space-step-44);
  height: var(--pui-preview-space-step-44);
  color: var(--surface-solid);
  background: var(--text);
  border-radius: var(--pui-preview-radius-medium);
}

.pui-guide__skill > div:last-child,
.pui-guide__license {
  display: grid;
  gap: var(--pui-preview-space-xs);
}

.pui-guide__license {
  padding-left: calc(var(--pui-preview-space-step-36) + var(--pui-preview-panel-padding));
}

@media (max-width: 700px) {
  .pui-guide {
    gap: calc(var(--pui-section-gap) + var(--pui-preview-panel-padding));
  }

  .pui-guide__status-grid,
  .pui-guide__code-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pui-guide__status-grid > div:nth-child(odd) {
    border-right: 0;
  }

  .pui-guide__status-grid > div:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }

  .pui-guide__section-header {
    grid-template-columns: var(--pui-preview-space-step-24) minmax(0, 1fr);
    gap: var(--pui-preview-space-normal);
  }

  .pui-guide__license {
    padding-left: calc(var(--pui-preview-space-step-24) + var(--pui-preview-space-normal));
  }
}

/* Authoritative site layout spacing. Page gutters are site semantics, while
   visible preview/device surfaces use the shared PUI panel/content rhythm. */
.preview-toolbar {
  padding: var(--pui-site-toolbar-padding-block-start) var(--pui-site-page-gutter) var(--pui-site-toolbar-padding-block-end);
}

.preview-stage {
  padding: var(--pui-site-stage-padding-block-start) var(--pui-site-page-gutter) var(--pui-site-stage-padding-block-end);
}

@media (max-width: 700px) {
  .preview-toolbar {
    padding: var(--pui-site-toolbar-padding-block-start-mobile) var(--pui-site-page-gutter-mobile) var(--pui-site-toolbar-padding-block-end-mobile);
  }

  .preview-stage {
    padding: var(--pui-site-page-gutter-mobile) var(--pui-site-page-gutter-mobile) var(--pui-site-stage-padding-block-end-mobile);
  }
}

/* Compact component header. The title summary is source-authored and must not
   be visually clipped; implementation detail belongs in API or PROP. */
.preview-toolbar {
  min-height: 0;
}

.preview-toolbar__intro {
  display: grid;
  gap: var(--pui-site-toolbar-title-gap);
}

.preview-toolbar h1 {
  margin: 0;
  font-size: var(--pui-font-size-title-medium);
  line-height: var(--pui-line-height-title-medium);
}

.preview-description {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
  white-space: nowrap;
}

body .app-shell[data-page-mode="interactive"] .preview-toolbar {
  column-gap: var(--pui-site-toolbar-column-gap);
}

/* The component-page Tabs use a high-contrast PUI selected surface. This
   remains legible in light/dark themes and does not depend on component borders. */
.component-page-tabs__control .pui-tabs-preview__indicator {
  background: var(--text);
  border-color: var(--text);
}

.component-page-tabs__control .pui-tabs-preview__button.pui-button.is-active {
  color: var(--page);
  font-weight: var(--pui-font-weight-semibold);
}

.component-page-tabs__control .pui-tabs-preview__button.pui-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -3px;
}

@media (max-width: 760px) {
  body .app-shell[data-page-mode="interactive"] .preview-toolbar {
    row-gap: var(--pui-preview-content-gap);
  }
}

/* Final PUI surface-radius contract. Keep this at the end so component-specific
   preview blocks cannot collapse large surfaces back to control/card radii. */
body .app-shell[data-page-mode] .preview-stage .pui-tooltip-preview,
body .app-shell[data-page-mode] .preview-stage .pui-select-menu {
  border-radius: var(--pui-preview-radius-control);
}

body .app-shell[data-page-mode] .preview-stage .pui-select-menu .pui-select-menu__option.pui-button {
  border-radius: var(--pui-site-radius-control);
}

body .app-shell[data-page-mode] .preview-stage .pui-select-menu .pui-select-menu__option.is-selected.pui-button {
  color: var(--brand);
  background: var(--pui-button-soft);
  background-color: var(--pui-button-soft) !important;
  border-color: transparent;
}

body .app-shell[data-page-mode] .preview-stage .pui-popover-preview,
body .app-shell[data-page-mode] .preview-stage .pui-dropdown-slim__panel {
  border-radius: var(--pui-preview-radius-floating);
}

body .app-shell[data-page-mode] .preview-stage .pui-dialog,
body .app-shell[data-page-mode] .preview-stage .pui-popup-preview,
body .app-shell[data-page-mode] .preview-stage .pui-action-sheet-preview,
body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview {
  border-radius: var(--pui-preview-radius-popup);
}

body .app-shell[data-page-mode] .preview-stage .pui-sheet-preview {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Global gradient is a background preference, not another Surface.
   Presets are theme-aware so a named dark material never makes light-theme
   text unreadable (and vice versa). */
.app-shell {
  --pui-bg-gradient-neutral:
    radial-gradient(circle at 12% 6%, rgba(24, 24, 27, 0.09) 0, transparent 34%),
    radial-gradient(circle at 88% 92%, rgba(113, 113, 122, 0.12) 0, transparent 38%),
    linear-gradient(145deg, #fafafa 0%, #f4f4f5 52%, #fafafa 100%);
  --pui-bg-gradient-flowing-gold-pink:
    radial-gradient(circle at 14% 10%, rgba(245, 208, 220, 0.72) 0, transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(232, 200, 132, 0.58) 0, transparent 42%),
    linear-gradient(145deg, #fffdfa 0%, #f7ede4 52%, #fff8f2 100%);
  --pui-bg-gradient-premium-black:
    radial-gradient(circle at 12% 8%, rgba(39, 39, 42, 0.16) 0, transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(113, 113, 122, 0.16) 0, transparent 42%),
    linear-gradient(145deg, #fafafa 0%, #e4e4e7 52%, #f4f4f5 100%);
  --pui-bg-gradient-cement-white:
    radial-gradient(circle at 16% 10%, rgba(214, 211, 209, 0.56) 0, transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(168, 162, 158, 0.24) 0, transparent 42%),
    linear-gradient(145deg, #fafaf9 0%, #e7e5e4 52%, #f5f5f4 100%);
  --pui-bg-gradient-black-gold:
    radial-gradient(circle at 14% 10%, rgba(156, 119, 44, 0.22) 0, transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(90, 68, 29, 0.16) 0, transparent 42%),
    linear-gradient(145deg, #fffdf6 0%, #f3e8c9 52%, #fffaf0 100%);
  --pui-bg-gradient-light-gold:
    radial-gradient(circle at 12% 8%, rgba(255, 248, 220, 0.9) 0, transparent 36%),
    radial-gradient(circle at 88% 90%, rgba(225, 190, 112, 0.42) 0, transparent 40%),
    linear-gradient(145deg, #fffdf8 0%, #f8edcf 52%, #fffdfa 100%);
  --pui-bg-gradient-ai-mist-blue-violet:
    radial-gradient(circle at 12% 8%, rgba(174, 206, 255, 0.74) 0, transparent 36%),
    radial-gradient(circle at 88% 90%, rgba(211, 181, 255, 0.7) 0, transparent 42%),
    linear-gradient(145deg, #f9fbff 0%, #e8edff 52%, #faf7ff 100%);
  --pui-bg-gradient-cyber-pink-blue:
    radial-gradient(circle at 14% 10%, rgba(255, 190, 222, 0.7) 0, transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(166, 221, 255, 0.76) 0, transparent 40%),
    linear-gradient(145deg, #fff9fd 0%, #e9f4ff 52%, #fbf8ff 100%);
  --pui-bg-gradient-aurora-violet:
    radial-gradient(circle at 10% 12%, rgba(157, 225, 213, 0.62) 0, transparent 34%),
    radial-gradient(circle at 90% 84%, rgba(198, 165, 255, 0.7) 0, transparent 42%),
    linear-gradient(145deg, #f6fffd 0%, #edf1ff 52%, #fcf8ff 100%);
  --pui-global-gradient-background: var(--pui-bg-gradient-neutral);
}

.app-shell[data-theme="dark"] {
  --pui-bg-gradient-neutral:
    radial-gradient(circle at 12% 6%, rgba(250, 250, 250, 0.08) 0, transparent 32%),
    radial-gradient(circle at 88% 92%, rgba(113, 113, 122, 0.12) 0, transparent 38%),
    linear-gradient(145deg, #09090b 0%, #111113 52%, #09090b 100%);
  --pui-bg-gradient-flowing-gold-pink:
    radial-gradient(circle at 14% 10%, rgba(246, 185, 204, 0.16) 0, transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(229, 190, 107, 0.2) 0, transparent 40%),
    linear-gradient(145deg, #151014 0%, #2a1c1c 52%, #171114 100%);
  --pui-bg-gradient-premium-black:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.07) 0, transparent 32%),
    radial-gradient(circle at 90% 90%, rgba(113, 113, 122, 0.16) 0, transparent 40%),
    linear-gradient(145deg, #09090b 0%, #18181b 52%, #111113 100%);
  --pui-bg-gradient-cement-white:
    radial-gradient(circle at 16% 10%, rgba(214, 211, 209, 0.12) 0, transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(168, 162, 158, 0.14) 0, transparent 42%),
    linear-gradient(145deg, #141414 0%, #292524 52%, #18181b 100%);
  --pui-bg-gradient-black-gold:
    radial-gradient(circle at 14% 10%, rgba(227, 193, 114, 0.18) 0, transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(129, 93, 27, 0.18) 0, transparent 42%),
    linear-gradient(145deg, #09090b 0%, #211808 52%, #0f0c06 100%);
  --pui-bg-gradient-light-gold:
    radial-gradient(circle at 12% 8%, rgba(255, 232, 166, 0.13) 0, transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(216, 169, 69, 0.18) 0, transparent 40%),
    linear-gradient(145deg, #151108 0%, #2a210f 52%, #131008 100%);
  --pui-bg-gradient-ai-mist-blue-violet:
    radial-gradient(circle at 12% 8%, rgba(112, 162, 255, 0.22) 0, transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(185, 135, 255, 0.22) 0, transparent 42%),
    linear-gradient(145deg, #0b1020 0%, #171632 52%, #120d26 100%);
  --pui-bg-gradient-cyber-pink-blue:
    radial-gradient(circle at 14% 10%, rgba(255, 106, 181, 0.18) 0, transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(77, 188, 255, 0.22) 0, transparent 40%),
    linear-gradient(145deg, #160c20 0%, #102440 52%, #140d24 100%);
  --pui-bg-gradient-aurora-violet:
    radial-gradient(circle at 10% 12%, rgba(81, 211, 184, 0.15) 0, transparent 34%),
    radial-gradient(circle at 90% 84%, rgba(167, 106, 255, 0.24) 0, transparent 42%),
    linear-gradient(145deg, #081615 0%, #171539 52%, #110c23 100%);
  --shadow-edge-top: 0 12px 30px rgba(0, 0, 0, 0.32);
  --shadow-edge-bottom: 0 -12px 30px rgba(0, 0, 0, 0.32);
  --shadow-edge-left: 12px 0 30px rgba(0, 0, 0, 0.32);
  --shadow-edge-right: -12px 0 30px rgba(0, 0, 0, 0.32);
}

.app-shell[data-gradient-preset="neutral"] { --pui-global-gradient-background: var(--pui-bg-gradient-neutral); }
.app-shell[data-gradient-preset="flowing-gold-pink"] { --pui-global-gradient-background: var(--pui-bg-gradient-flowing-gold-pink); }
.app-shell[data-gradient-preset="premium-black"] { --pui-global-gradient-background: var(--pui-bg-gradient-premium-black); }
.app-shell[data-gradient-preset="cement-white"] { --pui-global-gradient-background: var(--pui-bg-gradient-cement-white); }
.app-shell[data-gradient-preset="black-gold"] { --pui-global-gradient-background: var(--pui-bg-gradient-black-gold); }
.app-shell[data-gradient-preset="light-gold"] { --pui-global-gradient-background: var(--pui-bg-gradient-light-gold); }
.app-shell[data-gradient-preset="ai-mist-blue-violet"] { --pui-global-gradient-background: var(--pui-bg-gradient-ai-mist-blue-violet); }
.app-shell[data-gradient-preset="cyber-pink-blue"] { --pui-global-gradient-background: var(--pui-bg-gradient-cyber-pink-blue); }
.app-shell[data-gradient-preset="aurora-violet"] { --pui-global-gradient-background: var(--pui-bg-gradient-aurora-violet); }

.app-shell[data-gradient="on"] {
  background-color: var(--page);
  background-image: var(--pui-global-gradient-background);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.app-shell[data-gradient="on"] .preview-stage {
  background: transparent;
}

.app-shell[data-gradient="on"] .preview-device {
  background-color: var(--page);
  background-image: var(--pui-global-gradient-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.app-shell[data-gradient="on"] .preview-device__viewport {
  background: transparent;
}

.utility-doc .pui-bg-gradient-neutral,
.utility-doc .pui-bg-gradient-flowing-gold-pink,
.utility-doc .pui-bg-gradient-premium-black,
.utility-doc .pui-bg-gradient-cement-white,
.utility-doc .pui-bg-gradient-black-gold,
.utility-doc .pui-bg-gradient-light-gold,
.utility-doc .pui-bg-gradient-ai-mist-blue-violet,
.utility-doc .pui-bg-gradient-cyber-pink-blue,
.utility-doc .pui-bg-gradient-aurora-violet {
  background-color: var(--page);
  background-repeat: no-repeat;
  background-size: cover;
}
.utility-doc .pui-bg-gradient-neutral { background-image: var(--pui-bg-gradient-neutral); }
.utility-doc .pui-bg-gradient-flowing-gold-pink { background-image: var(--pui-bg-gradient-flowing-gold-pink); }
.utility-doc .pui-bg-gradient-premium-black { background-image: var(--pui-bg-gradient-premium-black); }
.utility-doc .pui-bg-gradient-cement-white { background-image: var(--pui-bg-gradient-cement-white); }
.utility-doc .pui-bg-gradient-black-gold { background-image: var(--pui-bg-gradient-black-gold); }
.utility-doc .pui-bg-gradient-light-gold { background-image: var(--pui-bg-gradient-light-gold); }
.utility-doc .pui-bg-gradient-ai-mist-blue-violet { background-image: var(--pui-bg-gradient-ai-mist-blue-violet); }
.utility-doc .pui-bg-gradient-cyber-pink-blue { background-image: var(--pui-bg-gradient-cyber-pink-blue); }
.utility-doc .pui-bg-gradient-aurora-violet { background-image: var(--pui-bg-gradient-aurora-violet); }

/* End global gradient preference contract. */

/* Global border preference belongs to the rendered PUI component tree only.
   PreviewDevice, API, navigation and documentation infrastructure keep their borders.
   Divider remains visible because it expresses content hierarchy, not a surface boundary. */
.app-shell[data-border="off"] .preview-device__viewport {
  --border: transparent;
  --border-strong: transparent;
  --glass-border: transparent;
  --preview-border: transparent;
  --pui-border-color: transparent;
  --pui-tabbar-split-color: color-mix(in srgb, var(--text) 10%, transparent);
}

/* End global border preference contract. */

/* Authoritative catalog navigation and global command-search contract. */
:root {
  --pui-site-command-width: 640px;
  --pui-site-command-max-height: calc(100dvh - (var(--pui-preview-space-step-64) * 2));
  --pui-site-command-scrim: rgba(9, 9, 11, 0.58);
  --pui-site-command-z-index: 2000;
}

.component-group {
  margin: 0 0 var(--pui-preview-section-gap);
}

.component-group__title {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  min-height: var(--pui-preview-space-step-28);
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
  margin: 0 0 var(--pui-preview-space-sm);
  padding: var(--pui-preview-space-xxs) var(--pui-preview-content-gap);
  color: var(--text);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.component-group__title .component-group__count.pui-badge-demo {
  min-width: var(--pui-preview-space-step-20);
  height: var(--pui-preview-space-step-18);
  padding-inline: var(--pui-preview-space-step-5);
  color: var(--subtle);
  background: transparent;
  border-color: var(--border);
}

.pui-input-preview__suffix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.component-search-shortcut.pui-button-preview {
  width: auto;
  min-width: var(--pui-preview-space-step-32);
  min-height: var(--pui-preview-space-step-24);
  padding: 0 var(--pui-preview-space-sm);
  color: var(--subtle);
  font-family: var(--pui-font-family-mono);
  font-size: var(--pui-font-size-caption);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-control);
  box-shadow: none;
}

.component-search-shortcut.pui-button-preview:hover {
  color: var(--text);
  background: var(--surface-solid);
}

body.is-global-search-open {
  overflow: hidden;
}

.global-search-mount:empty {
  display: none;
}

.global-search-overlay {
  position: fixed;
  z-index: var(--pui-site-command-z-index);
  inset: 0;
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: center;
  padding: var(--pui-preview-space-step-64) var(--pui-site-page-gutter);
  background: var(--pui-site-command-scrim);
}

.app-shell .global-search-dialog.pui-dialog {
  display: grid;
  box-sizing: border-box;
  width: min(100%, var(--pui-site-command-width));
  max-height: var(--pui-site-command-max-height);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--pui-preview-section-gap);
  padding: var(--pui-preview-panel-padding);
  overflow: hidden;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-preview-radius-popup);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.global-search-dialog__header {
  display: grid;
  grid-template-columns: var(--pui-preview-space-step-36) minmax(0, 1fr) var(--pui-preview-space-step-36);
  align-items: center;
  gap: var(--pui-preview-content-gap);
}

.global-search-dialog__header-slot,
.global-search-close.pui-button-preview {
  width: var(--pui-preview-space-step-36);
  min-width: var(--pui-preview-space-step-36);
  height: var(--pui-preview-space-step-36);
  min-height: var(--pui-preview-space-step-36);
}

.global-search-close.pui-button-preview {
  padding: 0;
  border-radius: var(--pui-preview-radius-round);
}

.global-search-dialog__heading {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
  text-align: center;
}

.global-search-dialog__heading strong {
  font-size: var(--pui-font-size-title-small);
  line-height: var(--pui-line-height-title-small);
}

.global-search-dialog__heading small {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.global-search-dialog__content {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--pui-preview-content-gap);
}

.global-search-input.pui-input-preview,
.global-search-input.pui-input-preview .pui-input-preview__control {
  width: 100%;
  min-width: 0;
}

.global-search-results {
  min-width: 0;
  min-height: var(--pui-preview-space-step-240);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.global-search-group + .global-search-group {
  margin-top: var(--pui-preview-content-gap);
}

.global-search-group h3 {
  margin: 0;
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-caption);
}

.global-search-result.pui-button-preview {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: var(--pui-preview-space-step-42);
  grid-template-columns: auto minmax(0, 1fr) auto;
  justify-content: stretch;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.global-search-result.pui-button-preview:hover,
.global-search-result.pui-button-preview.is-active {
  color: var(--text);
  background: var(--surface-soft);
}

.global-search-result > .pui-icon {
  color: var(--subtle);
}

.global-search-result > .pui-button-preview__content {
  min-width: 0;
  overflow: hidden;
}

.global-search-result__copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--pui-preview-content-gap);
}

.global-search-result__copy strong,
.global-search-result__copy small,
.global-search-result__group {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result__copy strong {
  color: inherit;
  font-size: var(--pui-font-size-body-small);
}

.global-search-result__copy small,
.global-search-result__group {
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
}

.global-search-empty {
  min-height: var(--pui-preview-space-step-240);
}

.global-search-dialog__footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pui-preview-content-gap);
  padding-top: var(--pui-preview-content-gap);
  color: var(--subtle);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  .component-group__title {
    position: static;
  }

  .global-search-overlay {
    align-items: center;
    padding: var(--pui-site-page-gutter-mobile);
  }

  .app-shell .global-search-dialog.pui-dialog {
    max-height: calc(100dvh - (var(--pui-site-page-gutter-mobile) * 2));
  }

  .global-search-result__group {
    display: none;
  }
}

/* Authoritative preview interaction-mode and contextual element Inspector. */
:root {
  --pui-site-element-inspector-width: 286px;
  --pui-site-element-inspector-height: 560px;
  --pui-site-element-inspector-offset: var(--pui-preview-panel-padding);
  --pui-site-element-inspector-motion-distance: var(--pui-preview-panel-padding);
  --pui-site-element-inspector-duration: var(--pui-duration-normal);
  --pui-site-element-inspector-ease: var(--pui-ease-standard);
  --pui-site-element-inspector-z-index: 18;
  --pui-site-preview-code-mobile-height: 240px;
  --pui-site-preview-code-line-number-width: var(--pui-preview-space-step-36);
  --pui-site-preview-code-gutter: var(--pui-site-page-gutter);
}

.preview-experience {
  position: relative;
  min-width: 0;
}

.preview-utility-toolbar {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--pui-site-preview-utility-toolbar-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
  margin-bottom: var(--pui-preview-content-gap);
  padding-block-start: var(--pui-preview-content-gap);
  padding-inline: var(--pui-site-page-gutter);
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.preview-mode-mount {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
}

.preview-mode-mount[hidden] {
  display: none;
}

.preview-utility-toolbar__right {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pui-preview-content-gap);
  margin-left: auto;
}

body .app-shell[data-page-mode] .preview-utility-toolbar__right .component-device-select-mount {
  flex: 0 0 var(--pui-site-preview-device-control-width);
  width: var(--pui-site-preview-device-control-width);
}

.preview-utility-toolbar__right .component-view-action-mount {
  flex: 0 0 var(--pui-preview-actions-group-width);
}

.preview-utility-toolbar[hidden],
.element-inspector-mount[hidden] {
  display: none;
}

.preview-mode-control {
  display: inline-flex;
  align-items: center;
  gap: var(--pui-preview-space-xxs);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.preview-mode-option.pui-button-preview {
  min-height: var(--pui-preview-space-step-32);
  padding-inline: var(--pui-preview-content-gap);
  color: var(--muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.preview-mode-option.pui-button-preview:hover,
.preview-mode-option.pui-button-preview.is-active {
  color: var(--text);
  background: var(--surface-soft);
}

.preview-experience[data-preview-mode="select"] .preview-device__viewport {
  cursor: default;
}

.preview-experience[data-preview-mode="select"] [data-preview-selectable="true"] {
  cursor: pointer;
  outline: 1px dashed transparent;
  outline-offset: var(--pui-preview-space-xxs);
}

.preview-experience[data-preview-mode="select"] [data-preview-selectable="true"]:hover {
  outline-color: color-mix(in srgb, var(--brand) 62%, transparent);
}

.preview-experience[data-preview-mode="select"] [data-preview-selectable="true"]:has([data-preview-selectable="true"]:hover) {
  outline-color: transparent;
}

.preview-experience[data-preview-mode="select"] [data-preview-selectable="true"].is-preview-element-selected,
.preview-experience[data-preview-mode="select"] [data-preview-selectable="true"].is-preview-element-selected:has([data-preview-selectable="true"]:hover) {
  outline: 2px solid var(--brand);
  outline-offset: var(--pui-preview-space-xxs);
}

.element-inspector-mount {
  position: absolute;
  z-index: var(--pui-site-element-inspector-z-index);
  top: calc(var(--pui-site-preview-utility-toolbar-height) + var(--pui-preview-content-gap) + var(--pui-site-stage-padding-block-start));
  right: 0;
  bottom: var(--pui-preview-panel-padding);
  left: 0;
  min-width: 0;
  pointer-events: none;
}

.element-inspector {
  display: grid;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  width: min(var(--pui-site-element-inspector-width), calc(50% - (var(--device-width, var(--pui-preview-device-width-default)) / 2) - (var(--pui-site-element-inspector-offset) * 2)));
  height: min(100%, var(--pui-site-element-inspector-height));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-panel-padding);
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-popup);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity var(--pui-site-element-inspector-duration) var(--pui-site-element-inspector-ease), transform var(--pui-site-element-inspector-duration) var(--pui-site-element-inspector-ease);
  will-change: opacity, transform;
}

.element-inspector--left {
  right: calc(50% + (var(--device-width, var(--pui-preview-device-width-default)) / 2) + var(--pui-site-element-inspector-offset));
}

.element-inspector--right {
  left: calc(50% + (var(--device-width, var(--pui-preview-device-width-default)) / 2) + var(--pui-site-element-inspector-offset));
}

.preview-code-document {
  display: block;
  position: absolute;
  top: 0;
  right: calc(50% + (var(--device-width, var(--pui-preview-device-width-default)) / 2) + var(--pui-site-element-inspector-offset));
  box-sizing: border-box;
  width: min(var(--pui-site-element-inspector-width), calc(50% - (var(--device-width, var(--pui-preview-device-width-default)) / 2) - (var(--pui-site-element-inspector-offset) * 2)));
  height: min(100%, var(--pui-site-element-inspector-height));
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity var(--pui-site-element-inspector-duration) var(--pui-site-element-inspector-ease), transform var(--pui-site-element-inspector-duration) var(--pui-site-element-inspector-ease);
  will-change: opacity, transform;
}

.preview-code-mount.is-entering .preview-code-document,
.preview-code-mount.is-leaving .preview-code-document {
  opacity: 0;
  transform: translate3d(var(--pui-site-element-inspector-motion-distance), 0, 0) scale(.98);
}

.preview-code-mount.is-leaving .preview-code-document {
  pointer-events: none;
}

.preview-code-document__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--pui-preview-section-gap);
}

.preview-code-document__section {
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto;
  gap: var(--pui-preview-content-gap);
}

.preview-code-document__section-header {
  display: flex;
  min-width: 0;
  min-height: var(--pui-preview-space-step-28);
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
}

.preview-code-document__section-title {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

.preview-code-document__copy.pui-button {
  flex: 0 0 auto;
}

.preview-code-document__copy[data-copy-state="success"] {
  color: var(--success);
}

.preview-code-document__copy[data-copy-state="error"] {
  color: var(--danger);
}

.preview-code-document__block {
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  color: var(--text);
  font-family: var(--pui-font-family-mono);
  font-feature-settings: "liga" 0, "calt" 0;
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-regular);
  font-variant-ligatures: none;
  line-height: var(--pui-line-height-body-medium);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-control);
  tab-size: 2;
  scrollbar-width: thin;
}

.preview-code-document__block:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.preview-code-document__block code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding-block: var(--pui-preview-content-gap);
  font-family: inherit;
}

.preview-code-document__line {
  display: grid;
  min-width: max-content;
  min-height: var(--pui-line-height-body-small);
  grid-template-columns: var(--pui-site-preview-code-line-number-width) minmax(max-content, 1fr);
}

.preview-code-document__line-number {
  position: sticky;
  z-index: 1;
  left: 0;
  box-sizing: border-box;
  padding-right: var(--pui-preview-content-gap);
  color: var(--subtle);
  text-align: right;
  user-select: none;
  background: var(--surface-soft);
  border-right: 1px solid var(--border);
}

.preview-code-document__source {
  padding-inline: var(--pui-preview-space-step-12) var(--pui-preview-panel-padding);
  white-space: pre;
}

.preview-code-token--comment { color: var(--muted); }
.preview-code-token--tag { color: var(--info); }
.preview-code-token--attribute { color: var(--text); font-weight: var(--pui-font-weight-medium); }
.preview-code-token--string { color: var(--success); }
.preview-code-token--literal { color: var(--warning); }

@media (min-width: 1181px) {
  .preview-experience[data-preview-mode="normal"] .preview-stage--overview .preview-device {
    transform: translate3d(calc(50cqw - (var(--device-width, var(--pui-preview-device-width-default)) / 2)), 0, 0);
  }

  .preview-experience[data-preview-mode="normal"] .preview-code-document {
    right: calc(var(--pui-site-preview-code-gutter) + var(--device-width, var(--pui-preview-device-width-default)) + var(--pui-site-element-inspector-offset));
    left: var(--pui-site-preview-code-gutter);
    width: auto;
    height: var(--pui-preview-device-height);
  }
}

.element-inspector-mount.is-entering .element-inspector--left,
.element-inspector-mount.is-leaving .element-inspector--left {
  opacity: 0;
  transform: translate3d(var(--pui-site-element-inspector-motion-distance), 0, 0) scale(.98);
}

.element-inspector-mount.is-entering .element-inspector--right,
.element-inspector-mount.is-leaving .element-inspector--right {
  opacity: 0;
  transform: translate3d(calc(var(--pui-site-element-inspector-motion-distance) * -1), 0, 0) scale(.98);
}

.element-inspector-mount.is-switching .element-inspector {
  opacity: .72;
  transform: translate3d(0, var(--pui-preview-space-xs), 0) scale(.99);
}

.element-inspector-mount.is-leaving .element-inspector {
  pointer-events: none;
}

.element-inspector__header {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) var(--pui-preview-space-step-32);
  align-items: center;
  gap: var(--pui-preview-content-gap);
}

.element-inspector__heading {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
}

.element-inspector__heading strong {
  overflow-wrap: anywhere;
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.element-inspector__heading small {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.element-inspector__close.pui-button-preview {
  width: var(--pui-preview-space-step-32);
  min-width: var(--pui-preview-space-step-32);
  height: var(--pui-preview-space-step-32);
  min-height: var(--pui-preview-space-step-32);
  padding: 0;
  border-radius: var(--pui-preview-radius-round);
}

.element-inspector__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
}

.element-inspector__body {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.element-inspector__props {
  display: grid;
  min-width: 0;
  gap: 0;
}

.element-inspector__props .prop-control {
  min-width: 0;
  padding: var(--pui-preview-space-step-12) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.element-inspector__props .prop-control:first-child {
  padding-top: 0;
}

.element-inspector__props .prop-control:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.element-inspector__props .prop-control__label {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.element-inspector__empty .pui-empty-preview {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.element-inspector__footer {
  padding-top: var(--pui-preview-content-gap);
  border-top: 1px solid var(--border);
}

.element-inspector__footer .pui-button-preview {
  width: 100%;
}

.element-inspector__footer--note {
  display: flex;
  min-height: var(--pui-preview-space-step-32);
  align-items: center;
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

@media (max-width: 1180px) {
  .element-inspector-mount {
    display: grid;
    top: auto;
    right: var(--pui-preview-panel-padding);
    bottom: var(--pui-preview-panel-padding);
    left: var(--pui-preview-panel-padding);
    height: min(52dvh, var(--pui-site-element-inspector-height));
    grid-template-columns: repeat(2, minmax(0, var(--pui-site-element-inspector-width)));
    justify-content: center;
    gap: var(--pui-preview-content-gap);
  }

  .element-inspector {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: 100%;
  }

  .element-inspector-mount.preview-code-mount {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    box-sizing: border-box;
    width: calc(100% - (var(--pui-site-page-gutter) * 2));
    height: min(38dvh, var(--pui-site-preview-code-mobile-height));
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
    margin: var(--pui-preview-content-gap) var(--pui-site-page-gutter) 0;
  }

  .preview-code-document {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: 100%;
    background: transparent;
  }

  .preview-code-document__line-number {
    background: var(--surface-soft);
  }
}

@media (max-width: 700px) {
  .preview-utility-toolbar {
    min-height: var(--pui-site-preview-utility-toolbar-height-mobile);
    flex-wrap: wrap;
    padding-inline: var(--pui-site-page-gutter-mobile);
  }

  .preview-experience[data-preview-mode="copy-only"] .preview-utility-toolbar {
    min-height: var(--pui-site-preview-utility-toolbar-height);
  }

  .preview-mode-mount,
  .preview-mode-control {
    width: 100%;
  }

  .preview-utility-toolbar__right {
    width: 100%;
    justify-content: flex-end;
  }

  .preview-mode-option.pui-button-preview {
    width: auto;
    justify-content: flex-start;
  }

  .element-inspector-mount {
    top: auto;
  }

  .element-inspector-mount {
    right: var(--pui-site-page-gutter-mobile);
    bottom: var(--pui-site-page-gutter-mobile);
    left: var(--pui-site-page-gutter-mobile);
  }

  .element-inspector {
    padding: var(--pui-preview-panel-padding-compact);
  }

  .element-inspector-mount.preview-code-mount {
    width: calc(100% - (var(--pui-site-page-gutter-mobile) * 2));
    margin-inline: var(--pui-site-page-gutter-mobile);
  }

  .element-inspector__meta {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .element-inspector,
  .preview-code-document,
  .preview-device,
  .preview-device__scroll-gradient {
    transition-duration: 1ms;
  }
}

/* The top bar exposes one PUI IconButton; the six persisted PUI Switches live
   in a single anchored appearance menu instead of competing with navigation. */
.topbar__controls {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  align-items: center;
  overflow: visible;
}

.appearance-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pui-preview-content-gap);
}

.appearance-flavor {
  display: flex;
  min-width: 0;
  align-items: center;
}

.appearance-flavor-switch {
  gap: var(--pui-preview-space-xs);
}

.appearance-flavor-switch .pui-switch-preview__label-target strong {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-label);
  white-space: nowrap;
}

.appearance-flavor-switch.is-checked .pui-switch-preview__label-target strong {
  color: var(--text);
}

.appearance-flavor-switch .pui-switch-preview__control {
  background: var(--surface-soft);
}

.appearance-flavor-switch.is-checked .pui-switch-preview__control {
  color: var(--surface-solid);
  background: var(--text);
  border-color: var(--text);
}

body .app-shell .pui-button-preview > .pui-button-preview__content:empty {
  display: none;
}

.appearance-menu__trigger.pui-button-preview {
  width: var(--pui-preview-actions-row-height);
  min-width: var(--pui-preview-actions-row-height);
  height: var(--pui-preview-actions-row-height);
  min-height: var(--pui-preview-actions-row-height);
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pui-preview-radius-round);
  box-shadow: none;
}

.appearance-menu.is-open .appearance-menu__trigger.pui-button-preview {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--border);
}

.appearance-menu__trigger.pui-button-preview:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 28%, transparent);
  outline-offset: 2px;
}

.appearance-menu__panel {
  position: absolute;
  z-index: var(--pui-site-appearance-menu-z-index);
  top: calc(100% + var(--pui-preview-panel-padding));
  right: 0;
  box-sizing: border-box;
  display: grid;
  width: min(var(--pui-site-appearance-menu-width), calc(100vw - (var(--pui-preview-space-step-12) * 2)));
  max-height: calc(100dvh - var(--pui-site-topbar-height) - var(--pui-preview-space-step-24));
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-panel-padding);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--pui-site-radius-surface);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(0px - var(--pui-preview-space-xs))) scale(.98);
  transform-origin: top right;
  transition: opacity var(--pui-duration-normal) var(--ease-standard), transform var(--pui-duration-normal) var(--ease-standard), visibility 0s linear var(--pui-duration-normal);
}

.appearance-menu.is-open .appearance-menu__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.appearance-menu__header {
  display: flex;
  min-height: var(--pui-preview-space-step-24);
  align-items: center;
  padding: 0 var(--pui-preview-space-xs);
}

.appearance-menu__header strong {
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

.appearance-menu__controls {
  display: grid;
  gap: var(--pui-preview-space-xs);
}

.appearance-menu .topbar-preference {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
  background: transparent;
  border: 0;
  border-radius: var(--pui-site-radius-control);
}

.appearance-menu .topbar-preference .pui-switch-preview__body {
  min-width: 0;
}

.appearance-menu .topbar-preference .pui-switch-preview__label-target strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

.appearance-gradient-preset {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
  padding: var(--pui-preview-space-sm) var(--pui-preview-content-gap);
}

.appearance-gradient-preset > span {
  display: grid;
  min-width: 0;
  gap: var(--pui-preview-space-xxs);
}

.appearance-gradient-preset strong {
  color: var(--text);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

.appearance-gradient-preset small {
  color: var(--muted);
  font-size: var(--pui-font-size-caption);
  line-height: var(--pui-line-height-caption);
}

.appearance-gradient-preset__select {
  flex: 0 1 148px;
  min-width: 0;
}

@media (max-width: 700px) {
  .topbar {
    position: relative;
    z-index: 30;
  }

  .topbar__controls {
    display: flex;
    flex: 0 0 auto;
    width: auto;
  }

  .appearance-menu__panel {
    max-height: calc(100dvh - var(--pui-preview-space-step-64));
  }
}

@media (prefers-reduced-motion: reduce) {
  .appearance-menu__panel,
  body .app-shell[data-page-mode] .pui-select-control__menu[popover],
  body .app-shell[data-page-mode] .pui-select-control__icon {
    transition-duration: 1ms;
  }
}

/* Grouped API/Props contracts keep everyday Button controls visible and move
   WeChat-only capabilities behind an explicit advanced section. */
body .app-shell[data-page-mode] .component-prop-workspace .props-group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: var(--pui-preview-content-gap);
}

body .app-shell[data-page-mode] .component-prop-workspace .props-group + .props-group {
  margin-top: var(--pui-preview-section-gap);
  padding-top: var(--pui-preview-section-gap);
  border-top: 1px solid var(--border);
}

body .app-shell[data-page-mode] .component-prop-workspace .props-group > h4,
body .app-shell[data-page-mode] .component-prop-workspace .props-group > summary,
body .app-shell[data-page-mode] .component-prop-workspace .props-group__description {
  grid-column: 1 / -1;
}

body .app-shell[data-page-mode] .component-prop-workspace .props-group > h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--pui-font-size-body-medium);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .component-prop-workspace .props-group__description {
  margin: 0;
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  line-height: var(--pui-line-height-body-small);
}

body .app-shell[data-page-mode] .component-prop-workspace .props-group > summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-preview-content-gap);
  color: var(--text);
  cursor: pointer;
  font-size: var(--pui-font-size-body-medium);
  font-weight: var(--pui-font-weight-semibold);
  line-height: var(--pui-line-height-body-medium);
}

body .app-shell[data-page-mode] .component-prop-workspace .props-group > summary small {
  color: var(--muted);
  font-size: var(--pui-font-size-body-small);
  font-weight: var(--pui-font-weight-regular);
}

body .app-shell[data-page-mode] .preview-stage .pui-button-demo-group + .pui-button-demo-group {
  margin-top: var(--pui-preview-section-gap);
}

@media (max-width: 700px) {
  body .app-shell[data-page-mode] .component-prop-workspace .props-group {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* API content is reference material: it may grow and reflow, but it must never
   be shortened with ellipsis, line clamps, or a fixed-height crop. */
body .app-shell[data-page-mode] .api-table__row code,
body .app-shell[data-page-mode] .api-table__row > span {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* Indexes is one grouped collection Surface. Its direct Cell entries retain
   the native continuous-list geometry; the collection root alone owns visual
   effects, while Cell's bordered pseudo-element remains the separator. */
body .app-shell[data-page-mode] .preview-stage .pui-indexes-preview .pui-indexes-preview__entry.pui-cell {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-indexes-preview .pui-indexes-preview__entry.pui-cell + .pui-indexes-preview__entry.pui-cell {
  margin-top: 0;
}

/* 在窄屏保留站点目录的唯一纵向浏览区；它是站点导航，不属于任一
   PreviewDevice 的组件预览 viewport。 */
@media (max-width: 700px) {
  body .app-shell .sidebar {
    display: block !important;
    height: min(42dvh, var(--pui-site-mobile-catalog-max-height)) !important;
    max-height: min(42dvh, var(--pui-site-mobile-catalog-max-height));
    overflow: hidden !important;
  }

  body .app-shell .component-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: calc(100% - var(--pui-site-mobile-catalog-search-height));
    margin-top: var(--pui-preview-space-step-12);
    overflow-x: hidden;
    overflow-y: auto;
  }

  body .app-shell .component-group {
    min-width: 0;
    margin: 0;
  }
}

/* Non-elevated primitives never receive an outer drop shadow from the global
   appearance switch. A shadow represents a detached Surface only; selected,
   focus and bordered states keep their inset outline/divider semantics. */
body .app-shell[data-page-mode] .preview-stage .pui-cell,
body .app-shell[data-page-mode] .preview-stage .pui-cell-preview,
body .app-shell[data-page-mode] .preview-stage .pui-field,
body .app-shell[data-page-mode] .preview-stage .pui-field-preview,
body .app-shell[data-page-mode] .preview-stage .pui-empty,
body .app-shell[data-page-mode] .preview-stage .pui-result,
body .app-shell[data-page-mode] .preview-stage .pui-grid,
body .app-shell[data-page-mode] .preview-stage .pui-grid-preview,
body .app-shell[data-page-mode] .preview-stage .pui-grid button,
body .app-shell[data-page-mode] .preview-stage .pui-grid-preview__item.pui-button-preview,
body .app-shell[data-page-mode] .preview-stage .pui-steps,
body .app-shell[data-page-mode] .preview-stage .pui-steps-preview,
body .app-shell[data-page-mode] .preview-stage .pui-avatar,
body .app-shell[data-page-mode] .preview-stage .pui-avatar-demo,
body .app-shell[data-page-mode] .preview-stage .pui-image,
body .app-shell[data-page-mode] .preview-stage .pui-image-demo,
body .app-shell[data-page-mode] .preview-stage .pui-progress,
body .app-shell[data-page-mode] .preview-stage .pui-progress-ring,
body .app-shell[data-page-mode] .preview-stage .pui-progress-demo,
body .app-shell[data-page-mode] .preview-stage .pui-badge,
body .app-shell[data-page-mode] .preview-stage .pui-icon,
body .app-shell[data-page-mode] .preview-stage .pui-divider,
body .app-shell[data-page-mode] .preview-stage .pui-skeleton {
  box-shadow: none;
}

body .app-shell[data-page-mode] .preview-stage .pui-cell-preview.is-selected {
  box-shadow: inset 0 0 0 1px var(--brand);
}

body .app-shell[data-page-mode] .preview-stage .pui-grid-preview.is-bordered .pui-grid-preview__item {
  box-shadow: inset -1px -1px 0 var(--border);
}

@media (max-width: 900px) {
  body .app-shell[data-page-mode] .api-table__row,
  body .app-shell[data-page-mode] .api-table--events .api-table__row,
  body .app-shell[data-page-mode] .api-table--methods .api-table__row,
  body .app-shell[data-page-mode] .api-table--slots .api-table__row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pui-preview-content-gap);
  }

  body .app-shell[data-page-mode] .api-table__row--head { display: none; }

  body .app-shell[data-page-mode] .api-table__row [role="cell"]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--pui-preview-space-xxs);
    color: var(--subtle);
    font-family: var(--pui-font-family-sans);
    font-size: var(--pui-font-size-body-small);
    font-weight: var(--pui-font-weight-semibold);
    line-height: var(--pui-line-height-body-small);
  }
}

/* Equal-spacing final cascade for independent Surface mirrors. */
body .app-shell[data-spacing="equal"] .preview-stage .pui-picker-h5__layer > .pui-picker-h5__panel {
  display: grid;
  gap: var(--pui-surface-section-gap);
  padding: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-picker-h5__layer > .pui-picker-h5__panel > .pui-picker-h5__header,
body .app-shell[data-spacing="equal"] .preview-stage .pui-picker-h5__layer > .pui-picker-h5__panel > .pui-picker-h5__footer {
  padding: 0;
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-select-menu {
  gap: var(--pui-surface-stack-gap);
  padding: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview {
  gap: 0;
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview__header {
  padding: var(--pui-surface-inset) var(--pui-surface-inset) 0;
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview__scroll {
  padding: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview__scroll--with-header {
  padding-top: var(--pui-surface-inset);
}
body .app-shell[data-spacing="equal"] .preview-stage .pui-popup-preview__footer {
  padding: var(--pui-surface-inset);
}

/* Final H5 component structure names differ slightly from the WXML mirror. */
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__items { padding-left: var(--pui-surface-inset); padding-right: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__footer { padding: 0 var(--pui-surface-inset) var(--pui-surface-inset); }

/* Last cascade wins over page-mode mirror declarations emitted above. */
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog--preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-dialog-preview__body { gap: var(--pui-surface-stack-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__head { padding: var(--pui-surface-inset) var(--pui-surface-inset) 0; }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__content.is-active { padding: 0 var(--pui-surface-inset) var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-sheet-preview__footer { gap: var(--pui-surface-stack-gap); padding: 0 var(--pui-surface-inset) var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__description { padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-action-sheet-preview__items--list { padding-left: var(--pui-surface-inset); padding-right: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-popover-preview { padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-navigation-menu-preview__panel { gap: var(--pui-surface-stack-gap); padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview { display: grid; gap: var(--pui-surface-section-gap); padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__header,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__body,
body .app-shell[data-spacing="equal"] .preview-stage .pui-calendar-preview__footer { padding-left: 0; padding-right: 0; }
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview { gap: var(--pui-surface-section-gap); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-combobox-preview__panel-inner { gap: var(--pui-surface-stack-gap); padding: var(--pui-surface-inset); }
body .app-shell[data-spacing="equal"] .preview-stage .pui-collapsible-preview__content-inner,
body .app-shell[data-spacing="equal"] .preview-stage .pui-upload-preview__files,
body .app-shell[data-spacing="equal"] .preview-stage .pui-swiper-preview__viewport { gap: var(--pui-surface-stack-gap); }