/* motionary showcase — component gallery (extends styles.css) */

.nav-link { padding: 0 12px; }
.gallery-page .toolbar { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px); padding-bottom: 10px; }
@media (max-width: 640px) { .nav-link { padding: 0 9px; font-size: 0.78rem; } .topbar .brand-name { display: none; } }
/* 6.0.1: six nav items overflowed a 390px viewport by ~48px — let the bar shrink and tighten on phones (one row, so the sticky toolbar offset still holds) */
.gallery-page .topbar-actions { min-width: 0; }
@media (max-width: 480px) {
  .gallery-page .topbar { gap: 8px; }
  .gallery-page .topbar-actions { gap: 4px; }
  .gallery-page .topbar-actions .icon-btn { flex: none; min-width: 34px; height: 36px; padding: 0 7px; border-radius: 10px; }
  .gallery-page .topbar-actions .nav-link { padding: 0 7px; font-size: 0.74rem; }
  .gallery-page .topbar-actions .nav-link[href="./"] { display: none; } /* the brand already links to the store */
  .gallery-page .topbar-actions .nav-run { display: none; } /* 12.4: the hero links to run.html on phones */
  .gallery-page .topbar .brand-store { display: none; }
}
@media (max-width: 374px) { .gallery-page .topbar-actions a.icon-btn[href^="https://github.com"] { display: none; } /* GitHub stays in the footer */ }
@media (max-width: 340px) { .gallery-page .topbar { padding-inline: 10px; gap: 6px; } .gallery-page .topbar-actions .nav-link { padding: 0 5px; } }


/* Hero: a real <usa-aurora> */
.g-hero { display: block; padding: clamp(48px, 9vw, 110px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.g-hero-copy { max-width: 1280px; margin: 0 auto; }
.g-hero h1 { margin: 0; max-width: 18ch; font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.05; letter-spacing: -0.035em; }
.g-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.g-platforms li { font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted); }

.g-loading { display: grid; place-items: center; min-height: 240px; color: var(--accent); }

/* Categories */
.cat { margin-top: clamp(28px, 4vw, 48px); scroll-margin-top: 140px; }
.cat[hidden] { display: none; }
.cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.cat-head h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; }
.cat-head p { margin: 2px 0 0; color: var(--muted); font-size: 0.92rem; max-width: 70ch; }
.cat-head > div { flex: 1; min-width: 240px; }
.cat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex: none; font-size: 1.25rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cat-import { font-size: 0.75rem; color: var(--muted); padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }

.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 2vw, 20px); }
.ccard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 150px; }
.ccard[hidden] { display: none; }
.ccard.is-open { grid-column: 1 / -1; }
.ccard.is-target { outline: 2px solid var(--accent); outline-offset: 2px; }
.ccard-stage {
  position: relative; display: grid; place-items: center; min-height: 220px; padding: 20px; overflow: hidden;
  background: var(--stage); border-bottom: 1px solid var(--line); isolation: isolate;
}
.ccard.is-open .ccard-stage { min-height: 260px; }
.ccard-body { display: grid; gap: 8px; padding: 14px 16px 16px; min-width: 0; }
.ccard-title { margin: 0; font-size: 1.02rem; font-weight: 700; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccard-title code { font-size: 0.75rem; font-weight: 500; color: var(--accent-2); }
.ccard-desc { margin: 0; color: var(--muted); font-size: 0.87rem; }
.ccard-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; align-items: center; }
.ccard-controls select, .chip-btn {
  height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 0.82rem; font-weight: 600;
}
.chip-btn:hover { border-color: var(--accent); }
.code-btn { margin-left: auto; }
.ccard-code { min-width: 0; }
.ccard-code .code-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ccard-code .code-tabs button { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.ccard-code .code-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: transparent; }
.ccard-code .copy-btn { position: absolute; top: 10px; right: 10px; }
.ccard-code pre { max-height: 360px; }

/* ---------------- Demo objects ---------------- */
.demo-tile { display: grid; place-items: center; width: 140px; height: 96px; border-radius: 18px; font-weight: 800; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow); }
.demo-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.demo-col { display: grid; gap: 14px; }
.demo-stack { display: grid; gap: 14px; justify-items: center; width: 100%; }
.demo-wide { max-width: 360px; }
.demo-pill { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c5cff, #c084fc); }
.demo-pill:nth-child(2n) { background: linear-gradient(135deg, #22d3ee, #34d399); }
.demo-big { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; text-align: center; }
.demo-huge { font-size: clamp(2rem, 4.4vw, 2.8rem); font-weight: 850; letter-spacing: -0.03em; }
.demo-mono { font-family: var(--mono); letter-spacing: 0.04em; }
.demo-accent { color: var(--accent-2); }
.demo-note { margin: 0; color: var(--muted); font: 600 0.85rem var(--mono); }
.demo-progress { width: min(320px, 80%); --usa-progress-height: 8px; --usa-progress-track: var(--line-2); }
.demo-jump { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; border: 1px dashed var(--line-2); text-decoration: none; font-weight: 700; }
.demo-jump b { display: inline-block; animation: g-bob 1.4s ease-in-out infinite; }
@keyframes g-bob { 50% { transform: translateY(4px); } }
.demo-btn {
  height: 44px; padding: 0 20px; border: 0; border-radius: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), #9b7bff); box-shadow: 0 10px 30px -12px rgb(124 92 255 / 0.8);
}
.demo-btn-alt { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }
.demo-btn-wrap { border-radius: 12px; }
.demo-link { border: 0; background: none; color: var(--accent); font-weight: 700; padding: 6px 10px; border-radius: 8px; }
.demo-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.demo-tilt { border-radius: 20px; }
.demo-card3d { display: grid; place-items: center; align-content: center; gap: 4px; width: 190px; height: 130px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%); box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.6); }
.demo-card3d b { font-size: 2rem; transform: translateZ(40px) translate(calc(var(--usa-tilt-x, 0) * 6px), calc(var(--usa-tilt-y, 0) * 6px)); }
.demo-card3d span { font-size: 0.8rem; opacity: 0.85; }
.demo-fluent-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; border-radius: 14px; background: #1b1b1f; --usa-spot-color: rgb(255 255 255 / 0.7); }
.demo-fluent-grid button { height: 52px; min-width: 76px; border-radius: 6px; border: 1px solid rgb(255 255 255 / 0.06); background: #2a2a30; color: #f3f3f3; font-size: 0.8rem; }
[data-theme="light"] .demo-fluent-grid { background: #ececf1; --usa-spot-color: rgb(0 90 200 / 0.55); }
[data-theme="light"] .demo-fluent-grid button { background: #fff; color: #1b1b1f; border-color: rgb(0 0 0 / 0.06); }
.demo-spinners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; color: var(--accent); }
.demo-spinners figure { display: grid; justify-items: center; gap: 8px; margin: 0; }
.demo-spinners figcaption { font: 600 0.72rem var(--mono); color: var(--muted); }
.demo-spinners usa-spinner[kind="windows"] { color: var(--accent-2); }
.demo-profile { display: flex; gap: 14px; align-items: center; }
.demo-profile p { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.demo-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.demo-wide usa-skeleton { width: 100%; }
.demo-wide usa-progress { width: 100%; --usa-progress-height: 6px; }
.demo-fill { position: absolute !important; inset: 0; display: grid !important; place-items: center; }
.demo-particles { color: var(--accent-2); }
.demo-grain { background: linear-gradient(135deg, #ff7ab6, #7c5cff 55%, #22d3ee); color: #fff; }
.demo-chip { flex: none; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; background: var(--surface-2); border: 1px solid var(--line-2); }
.demo-chip-alt { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.demo-wide usa-marquee { width: 100%; }
.demo-acrylic-bg { gap: 14px; grid-auto-flow: column; background: #0e1020; }
[data-theme="light"] .demo-acrylic-bg { background: #eef0f8; }
.demo-acrylic-bg > i { position: absolute; border-radius: 50%; animation: g-float 7s ease-in-out infinite alternate; }
.demo-acrylic-bg > i:nth-child(1) { width: 140px; height: 140px; left: 12%; top: 14%; background: #ff7ab6; }
.demo-acrylic-bg > i:nth-child(2) { width: 120px; height: 120px; right: 12%; bottom: 10%; background: #22d3ee; animation-direction: alternate-reverse; }
@keyframes g-float { to { transform: translate(40px, -20px) scale(1.2); } }
.demo-acrylic { display: grid; place-items: center; width: 130px; height: 120px; border-radius: 12px; font-weight: 700; color: var(--text); }
.demo-accordion { width: min(100%, 360px); }
.demo-accordion details { border: 1px solid var(--line-2); border-radius: 12px; padding: 0 14px; background: var(--surface); margin-bottom: 8px; }
.demo-accordion summary { padding: 11px 0; font-weight: 700; font-size: 0.92rem; }
.demo-accordion p { margin: 0 0 12px; color: var(--muted); font-size: 0.86rem; }
.demo-flip { display: grid !important; grid-template-columns: repeat(4, 44px); gap: 10px; }
.demo-flip-item { display: grid; place-items: center; height: 44px; border-radius: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c5cff, #22d3ee); }
.demo-flip-item:nth-child(3n) { background: linear-gradient(135deg, #ff7ab6, #ffb86b); }
.demo-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.demo-tabs button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-weight: 600; font-size: 0.85rem; color: var(--muted); }
.demo-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.demo-views { width: 100%; }
.demo-views > section { display: grid; place-items: center; height: 90px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 1.1rem; }
.demo-vt { display: grid; place-items: center; width: 100%; height: 110px; border-radius: 16px; font-weight: 800; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, #7c5cff, #22d3ee); view-transition-name: g-vt-panel; }
.demo-vt[data-n="2"] { background: linear-gradient(135deg, #ff7ab6, #ffb86b); }
.demo-vt[data-n="3"] { background: linear-gradient(135deg, #34d399, #22d3ee); }
.demo-vt[data-n="4"] { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.demo-connected { position: relative; width: 100%; max-width: 320px; height: 170px; }
.demo-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 100%; align-content: center; }
.demo-thumbs button, .demo-detail { border: 0; border-radius: 14px; background: linear-gradient(135deg, #7c5cff, #22d3ee); }
.demo-thumbs button { height: 80px; cursor: pointer; }
.demo-thumbs button:nth-child(2), .demo-detail[data-n="1"] { background: linear-gradient(135deg, #ff7ab6, #ffb86b); }
.demo-thumbs button:nth-child(3), .demo-detail[data-n="2"] { background: linear-gradient(135deg, #34d399, #22d3ee); }
.demo-detail { position: absolute; inset: 0; display: grid; align-content: end; justify-items: start; padding: 10px; }
.demo-detail[hidden] { display: none; }
.demo-detail .demo-link { color: #fff; background: rgb(0 0 0 / 0.25); }

/* Scrollytelling section */
.g-scrolly, .g-windows { max-width: 1280px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 40px); }
.g-scrolly h2, .g-windows h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; }
.g-scrolly-body { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 48px); --usa-sticky-top: 120px; }
.g-scrolly-figure { align-self: start; display: grid; place-items: center; height: 300px; margin: 0; border-radius: var(--radius); background: var(--stage); border: 1px solid var(--line); overflow: hidden; }
.g-scrolly-shape { width: 120px; height: 120px; border-radius: 28px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); transform: rotate(calc(var(--usa-step, 0) * 90deg)) scale(calc(1 + var(--usa-step, 0) * 0.12)); transition: transform 0.7s var(--ease-spring), border-radius 0.7s; grid-area: 1 / 1; }
usa-scrolly[data-step-name="electron"] .g-scrolly-shape { border-radius: 50%; }
usa-scrolly[data-step-name="tauri"] .g-scrolly-shape { border-radius: 8px; background: linear-gradient(135deg, #ffc131, #24c8db); }
usa-scrolly[data-step-name="webview2"] .g-scrolly-shape { border-radius: 40% 10%; background: linear-gradient(135deg, #0078d4, #50e6ff); }
.g-scrolly-num { grid-area: 1 / 1; font-size: 2.6rem; font-weight: 850; color: #fff; z-index: 1; }
.g-scrolly-steps section { min-height: 55vh; display: grid; align-content: center; }
.g-scrolly-steps h3 { margin: 0 0 6px; font-size: 1.3rem; }
.g-scrolly-steps p { margin: 0; color: var(--muted); }
@media (max-width: 720px) { .g-scrolly-body { grid-template-columns: 1fr; --usa-sticky-top: 70px; } .g-scrolly-figure { height: 180px; z-index: 1; } }

.g-win-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin: 22px 0; }
.g-win-grid article { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.g-win-grid h3 { margin: 0 0 10px; font-size: 1rem; }
.g-win-grid pre { margin: 0; padding: 12px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); font-size: 0.76rem; overflow: auto; }

#demo-dialog { --usa-dialog-bg: var(--surface); --usa-dialog-fg: var(--text); }
#demo-dialog .dlg-title { margin: 0 0 8px; font-size: 1.2rem; }
#demo-dialog p { color: var(--muted); }
#demo-dialog .dlg-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
usa-toaster .usa-toast { --usa-toast-bg: color-mix(in srgb, var(--surface) 88%, transparent); --usa-toast-fg: var(--text); }
usa-switch { --usa-sw-c: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .demo-jump b, .demo-acrylic-bg > i { animation: none; }
  .g-scrolly-shape { transition: none; }
}

/* v2.3+ demos */
.demo-drag-area { position: relative; min-height: 120px; width: 100%; justify-content: center; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 18px; padding: 12px; }
.demo-scroll { height: 150px; width: min(100%, 260px); border-radius: 14px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.demo-list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 6px; }
.demo-list li { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, currentColor 7%, transparent); }
.demo-card { width: min(100%, 220px); }
.demo-face { display: grid; place-items: center; min-height: 120px; padding: 16px; border-radius: 18px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent, #7c5cff), var(--accent-2, #22d3ee)); }
.demo-face-back { background: linear-gradient(135deg, #f472b6, #fb923c); }
.demo-face-b { background: linear-gradient(135deg, #22d3ee, #34d399); } .demo-face-c { background: linear-gradient(135deg, #f472b6, #c084fc); } .demo-face-d { background: linear-gradient(135deg, #fb923c, #facc15); }
.demo-face-sm { min-height: 90px; width: 90px; padding: 8px; }
.demo-deck { width: 200px; }
.demo-c3d { width: 100%; min-height: 170px; }
.demo-detail-body { padding: 18px; display: grid; gap: 10px; justify-items: start; }
.g-sticky { padding: 48px 20px; max-width: 760px; margin: 0 auto; }
.g-sticky-card { padding: 36px 28px; min-height: 220px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #7c5cff, #22d3ee); box-shadow: 0 20px 50px -24px rgb(0 0 0 / 0.6); }
.g-sticky-card:nth-child(2) { background: linear-gradient(135deg, #f472b6, #c084fc); } .g-sticky-card:nth-child(3) { background: linear-gradient(135deg, #fb923c, #f43f5e); }
.demo-icons usa-icon-morph { padding: 8px; border-radius: 12px; background: color-mix(in srgb, currentColor 8%, transparent); }
.demo-photo { width: min(100%, 240px); border-radius: 18px; overflow: hidden; }
.demo-btn[data-shape="circle"], .demo-btn[data-shape="icon"] { min-width: 0; width: 46px; height: 46px; }
.demo-fab-wrap { display: grid; place-items: center; min-height: 160px; width: 100%; }
.demo-fab-wrap usa-fab { margin-top: 70px; }
.demo-nav-scroll { position: relative; }
.demo-navbar { display: block; padding: 12px 14px; background: color-mix(in srgb, var(--bg, #0b0d12) 88%, var(--accent, #7c5cff)); border-radius: 12px 12px 0 0; }
.demo-avatar { background: hsl(var(--h) 70% 55%) !important; color: #fff; }
.demo-variants { gap: 12px; }
.demo-wide { width: min(100%, 320px); }
.demo-fullpage { height: 170px !important; width: min(100%, 300px); border-radius: 14px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.demo-fullpage section { display: grid; place-content: center; text-align: center; height: 170px; min-height: 0 !important; }
.demo-fullpage section:nth-child(2) { background: color-mix(in srgb, var(--accent, #7c5cff) 18%, transparent); }
.demo-fullpage section:nth-child(3) { background: color-mix(in srgb, var(--accent-2, #22d3ee) 18%, transparent); }
.demo-water { background: linear-gradient(135deg, #0ea5e9, #1e3a8a); color: #fff; }

/* v3.4 WebGL demos */
.demo-gl { width: min(100%, 320px); aspect-ratio: 16 / 10; border-radius: 14px; display: grid; place-items: center; }
.demo-gl > img { width: 100%; height: 100%; object-fit: cover; }
.demo-gl__label { color: #fff; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
.demo-gl--canvas { display: block; background: linear-gradient(120deg, #6366f1, #22d3ee); }

/* v3.5 3D demos */
.demo-cube { margin: 12px auto; }
.demo-face { display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #fff; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 1px solid rgba(255, 255, 255, 0.3); }
.demo-depth { width: min(100%, 320px); }
.demo-depth__scene { position: relative; height: 180px; display: grid; place-items: center; border-radius: 16px; overflow: hidden; background: #0f172a; }
.demo-depth__l { position: absolute; border-radius: 50%; filter: blur(2px); }
.demo-depth__l--1 { width: 220px; height: 220px; left: -40px; top: -60px; background: radial-gradient(circle, #6366f1 0, transparent 70%); }
.demo-depth__l--2 { width: 160px; height: 160px; right: -20px; bottom: -40px; background: radial-gradient(circle, #ec4899 0, transparent 70%); }

/* v3.6 layout demos */
.demo-aa { display: flex; flex-wrap: wrap; gap: 8px; max-width: 320px; }
.demo-masonry { width: min(100%, 320px); }
.demo-masonry > div { border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); opacity: 0.85; }
.demo-shared__thumb { width: 56px; height: 56px; border-radius: 12px; border: 0; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); cursor: pointer; }
.demo-shared__big { width: 200px; height: 120px; border-radius: 18px; display: grid; place-items: center; color: #fff; font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); margin-bottom: 8px; }

/* v3.9 effect packs */
.demo-pack { width: min(100%, 340px); }
.demo-pack h4 { margin: 0 0 8px; }
.demo-pack__card { display: grid; gap: 6px; justify-items: center; padding: 10px; border-radius: 14px; background: rgba(127, 127, 127, 0.12); min-width: 84px; }
.demo-pack__thumb { font-size: 1.8rem; }
.demo-pack__cart { font-size: 1.6rem; display: inline-block; }

/* 4.0.1: helpers the pinch-zoom / mask-reveal demos referenced but never had */
.demo-tile--lg { width: 220px; height: 132px; padding: 12px; text-align: center; font-size: 1.05rem; line-height: 1.3; }
.demo-zoom { display: block; max-width: 100%; border-radius: 18px; overflow: hidden; }
@media (max-width: 400px) { .demo-tile--lg { width: 180px; height: 116px; font-size: 0.95rem; } }

/* 4.1: native scrub demo */
.demo-scrub { position: relative; width: min(100%, 260px); height: 130px; overflow-y: auto; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.demo-scrub-pin { position: sticky; top: 0; height: 130px; display: flex; gap: 10px; align-items: center; justify-content: center; }
.demo-scrub-track { height: 420px; }

/* 4.3: splitText() demo */
.demo-split { display: grid; gap: 4px; text-align: center; }
.demo-split-line { margin: 0; font-weight: 800; font-size: 1.15rem; }

.demo-dot{display:inline-block;width:6px;height:6px;margin:1px;border-radius:50%;background:currentColor;opacity:.7}

.demo-holo{min-height:110px;display:grid;place-items:center;background:linear-gradient(135deg,#1e1b4b,#312e81);color:#fff;border-radius:14px;font-weight:600}
.demo-fan{justify-content:center}
.demo-gen{min-height:140px;display:grid;place-items:center;color:#fff;font-weight:700;border-radius:14px;background:transparent}
.demo-charge{background:linear-gradient(90deg,#7c5cff calc(var(--usa-charge,0)*100%),#2a2f3a 0)}
.demo-theme{padding:14px;border-radius:12px}.demo-theme-card{display:flex;gap:12px;align-items:center;padding:12px 16px}
.demo-player{display:flex!important;gap:12px;align-items:center;padding:16px 16px 44px;min-height:90px}
/* 6.x widget demos */
.demo-slide{display:grid;place-items:center;min-height:150px;border-radius:14px;color:#fff;font:700 20px/1.2 system-ui;letter-spacing:.02em}
.demo-slide-0{background:linear-gradient(135deg,#7c5cff,#22d3ee)}.demo-slide-1{background:linear-gradient(135deg,#ff5c8a,#facc15)}.demo-slide-2{background:linear-gradient(135deg,#0ea5e9,#34d399)}.demo-slide-3{background:linear-gradient(135deg,#f97316,#ef4444)}.demo-slide-4{background:linear-gradient(135deg,#64748b,#a5b4fc)}
.demo-carousel{width:100%;max-width:320px;min-height:150px}
usa-carousel[data-effect="cards"].demo-carousel .demo-slide{margin:0 18%}
.demo-tabbar{width:100%;max-width:340px;font-size:14px}
.demo-disclosure{width:100%;max-width:340px;font-size:14px;text-align:left}
.demo-stories{width:180px;height:240px;aspect-ratio:auto}
.demo-stories .demo-slide{border-radius:0;min-height:0}
.demo-sky{background:linear-gradient(#bae6fd,#fbcfe8)!important;color:#7c2d12}
.demo-word{margin:0;font:800 clamp(30px,8vw,44px)/1.1 system-ui,sans-serif;letter-spacing:.01em;color:var(--text,#111)}
.demo-menu{align-self:start;margin-top:4px}
.demo-trail{background:linear-gradient(135deg,#7c5cff,#22d3ee)!important;color:#fff!important}
.demo-pr{--usa-pr-size:110px}.demo-pr[data-variant="bar"]{--usa-pr-size:190px}
.demo-odo{font:800 34px/1 system-ui,sans-serif}
.demo-skr{width:min(260px,100%);text-align:left;font-size:14px}.demo-skr p{margin:8px 0 0}.demo-skr-row{display:flex;align-items:center;gap:10px}
.demo-skr-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#7c5cff,#22d3ee);color:#fff;font-weight:700}
.demo-lens{background:repeating-linear-gradient(45deg,#7c5cff 0 12px,#22d3ee 12px 24px)!important;color:#fff!important;font-size:28px!important}
.demo-metal{background:#94a3b8!important;color:#0f172a!important;letter-spacing:.08em}
.demo-rays{color:#fff7d6!important}
.demo-ms{width:min(240px,100%);font-size:14px;text-align:left}
.demo-mf-wrap{width:100%;max-width:340px}.demo-mf .demo-mf-item{display:grid;place-items:center;border-radius:10px;color:#fff;font-weight:700}
.demo-cmp{width:min(300px,100%);aspect-ratio:16/10}.demo-cmp-b,.demo-cmp-a{display:grid!important;place-items:center;font:800 22px system-ui;letter-spacing:.1em;color:#fff}
.demo-cmp-b{background:linear-gradient(135deg,#475569,#94a3b8)}.demo-cmp-a{background:linear-gradient(135deg,#f97316,#db2777,#7c3aed)}
.demo-cube-g{width:min(240px,100%)}.demo-cube-g .demo-slide{height:100%;min-height:0}
.demo-depth3{position:relative;display:grid;place-items:center;width:180px;height:130px;border-radius:16px;background:linear-gradient(135deg,#1e1b4b,#4c1d95);color:#fff}
.demo-d3-a{position:absolute;font-size:70px;opacity:.35}.demo-d3-b{position:absolute;top:28px;font:800 34px system-ui}.demo-d3-c{position:absolute;bottom:22px;font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.demo-flip3{width:180px;height:120px;cursor:pointer}.demo-flip3>div{display:grid;place-items:center;border-radius:14px;color:#fff;font-weight:700}
.demo-dock{--usa-dock-size:38px}.demo-dock .usa-dock-item{font-weight:800}
.demo-navm{font-size:14px}.demo-mt{color:var(--text,#111)}
.demo-morph-svg path{fill:#7c5cff;stroke:#22d3ee;stroke-width:2}
.demo-blob-btn{border:0;background:none;color:#fff;font:700 16px system-ui;padding:16px 26px;cursor:pointer}
.demo-stepper{width:min(300px,100%)}.demo-col{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.demo-trans{background:linear-gradient(135deg,#0ea5e9,#7c5cff)!important;color:#fff}.demo-trans-b{background:linear-gradient(135deg,#f43f5e,#f59e0b)!important}.demo-trans-c{background:linear-gradient(135deg,#10b981,#0ea5e9)!important}
.demo-kanban{width:100%;font-size:12px}.demo-kanban .usa-kb-col{min-height:60px;padding:8px}.demo-deck{--usa-sd-w:170px;--usa-sd-h:130px}
.demo-amb{width:min(260px,100%);height:150px;color:#fff;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5);background:transparent!important}.demo-light{background:#f8fafc!important;color:#334155;text-shadow:none}
.demo-wc{--usa-wc-w:240px}.demo-pc{height:170px}
.demo-dp{--usa-dp-w:250px;transform:scale(.86);transform-origin:50% 50%;margin:-18px 0}.demo-cp{--usa-cp-w:220px}.demo-fd{--usa-fd-w:260px}
.demo-ke-stage{display:flex;gap:10px;align-items:center;justify-content:center}.demo-ke-stage>*{padding:6px 10px;border-radius:8px;background:linear-gradient(135deg,#7c5cff,#22d3ee);color:#fff;font:700 12px system-ui;font-style:normal}.demo-ke{width:100%}
.demo-mp{--usa-mp-w:280px}.demo-vk{--usa-vk-size:110px}.demo-eq{--usa-eq-w:280px}.demo-ly{--usa-ly-w:260px;--usa-ly-h:120px;font-size:15px}.demo-ly .usa-ly-list{padding:45px 0}
.demo-dark{background:#0b1020!important}.demo-vinyl{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#f43f5e 0 18%,#111 19% 21%,transparent 22%),repeating-radial-gradient(circle,#111 0 2px,#262626 2px 4px);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.demo-bc{--usa-bc-h:130px;--usa-bc-w:280px}.demo-gg{--usa-gg-w:180px}.demo-sl{--usa-sl-w:200px;--usa-sl-h:40px}.demo-kpi{--usa-kpi-w:240px}
.demo-svgchart{width:min(220px,100%);height:110px;fill:#7c5cff;stroke:#7c5cff}.demo-flow path{fill:none;stroke:#22d3ee;opacity:.8}
.demo-shop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}.demo-prod{display:flex;flex-direction:column;align-items:center;gap:8px}.demo-prod img{width:84px;height:84px;border-radius:12px}
.demo-pgal{--usa-pg2-w:240px;--usa-pg2-t:46px}.demo-cdn{--usa-cd-w:24px}.demo-fxprod{width:72px;height:72px;border-radius:12px;cursor:pointer}.demo-fxcart{font-size:30px;margin-left:40px}
.demo-price{display:inline-block;font:800 26px/1 ui-monospace,monospace;perspective:300px}.demo-stock{display:inline-block;padding:6px 12px;border-radius:999px;background:#fee2e2;color:#b91c1c;font-size:13px}
.demo-ml{--usa-ml-w:280px;--usa-ml-h:150px}.demo-nb{margin-right:8px}
.demo-bubble{display:inline-block;min-width:44px;min-height:18px;margin:0;padding:8px 12px;border-radius:16px 16px 16px 4px;background:#e2e8f0;color:#0f172a;font-size:14px}.demo-me{background:#7c5cff;color:#fff;border-radius:16px 16px 4px 16px}.demo-seen{font-size:13px;opacity:.75}
.demo-lb{--usa-lb-w:280px}.demo-bw{--usa-bw-w:300px}.demo-pw{--usa-pw-size:170px}
.demo-ach{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#0f172a;color:#fff;font-weight:700;font-size:14px}.demo-chest{position:relative;font-size:30px;line-height:1;padding:6px 10px;border:0;border-radius:12px;background:#fef3c7;cursor:pointer;perspective:300px}.demo-chest [data-lid]{position:absolute;left:0;right:0;top:-6px;display:block;font-size:18px}
.demo-globe{--usa-gl-size:150px}.demo-lc{--usa-lc-w:260px;--usa-lc-map-h:90px}
.demo-pin{font-size:34px;line-height:1;border:0;background:none;cursor:pointer;padding:4px}.demo-dot{width:22px;height:22px;border-radius:50%;border:3px solid #fff;background:#ef4444;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer}
.demo-form{gap:6px}.demo-fld{--usa-fld-w:240px}.demo-otp{--usa-otp-size:36px}.demo-ups{gap:8px}.demo-up{--usa-up-w:270px}
.demo-input{min-width:150px;padding:9px 12px;border-radius:8px;border:1.5px solid rgba(100,116,139,.45);background:var(--card,#fff);color:inherit;font:inherit;text-align:left;cursor:pointer}
.demo-formfx{display:flex;flex-direction:column;gap:8px;width:220px}.demo-mini-field{display:flex;flex-direction:column;gap:3px;font-size:12px;opacity:.85}.demo-mini-field span{height:28px;border-radius:7px;border:1.5px solid rgba(100,116,139,.4)}
.demo-ai{width:280px;gap:8px}.demo-cc{--usa-cc-w:280px}.demo-ai-out{margin:0;font-size:12px;opacity:.75;text-align:center}.demo-chips{max-width:280px}.demo-hint{font-size:12px;opacity:.7}
.demo-streamp{display:block;max-width:250px;margin:0;border:0;color:inherit;font-family:inherit;text-align:left;padding:10px 13px;border-radius:14px 14px 14px 4px;background:rgba(99,102,241,.12);font-size:13px;line-height:1.45;cursor:pointer}
.demo-vbars{display:flex;align-items:center;gap:4px;height:44px;padding:0 12px;border:0;border-radius:22px;background:#6366f1;cursor:pointer}.demo-vbars i{display:block;width:4px;height:16px;border-radius:2px;background:#fff}.demo-vbars i:nth-child(2),.demo-vbars i:nth-child(4){height:24px}.demo-vbars i:nth-child(3){height:30px}
.demo-gencard{width:130px;height:96px;border-radius:12px;border:0;background:linear-gradient(135deg,#a5b4fc,#f9a8d4);color:#1e1b4b;font:600 13px/1.3 system-ui,sans-serif;cursor:pointer}
.demo-cpbtn{display:flex;align-items:center;gap:14px;min-width:240px;padding:9px 10px 9px 14px;border-radius:10px;border:1px solid rgba(100,116,139,.35);background:var(--card,#fff);color:inherit;font:inherit;font-size:13px;cursor:pointer}.demo-cpbtn>span{flex:1;text-align:left;opacity:.65}.demo-cpw{width:300px;gap:6px}.demo-cpw usa-command-palette{--usa-cp-w:300px}.demo-cpw .usa-cp-list{max-height:112px}.demo-cpw .usa-cp-q{padding:11px 14px;font-size:14px}.demo-sks{align-items:flex-start;gap:8px}
.demo-clk{gap:14px}.demo-clkbox{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#eef2ff;color:#4338ca;font:800 15px/1 system-ui,sans-serif}.demo-clkseq{display:flex;gap:6px}.demo-clkseq i{display:block;width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#6366f1,#ec4899)}
.demo-hy{display:flex;flex-direction:column;gap:7px;width:230px;padding:12px;border-radius:12px;background:var(--card,#fff);box-shadow:0 6px 18px -12px rgba(15,23,42,.4)}.demo-hy-h{height:16px;width:60%;border-radius:5px;background:#6366f1}.demo-hy-l{height:9px;border-radius:4px;background:rgba(100,116,139,.3)}.demo-hy-row{display:flex;gap:6px;margin-top:3px}.demo-hy-row span{flex:1;height:34px;border-radius:7px;background:rgba(99,102,241,.15)}
.demo-res{gap:18px}.demo-res usa-red-envelope{--usa-re-w:96px}.demo-fbs{width:300px;gap:8px}.demo-fbs usa-festival-banner{font-size:13px;padding:12px 40px 12px 14px}
.demo-lantern{font-size:38px;line-height:1;border:0;background:none;cursor:pointer;padding:4px}.demo-snowcard{display:grid;place-items:center;width:150px;height:96px;border-radius:12px;background:linear-gradient(160deg,#1e3a8a,#0f172a);color:#fff;font:700 13px/1.2 system-ui,sans-serif}
.demo-grid2{display:grid;grid-template-columns:1fr 1fr}.demo-term{--usa-term-w:300px;--usa-term-h:96px}.demo-rbs{gap:14px;align-items:center;justify-items:center}
.demo-crt{width:200px;height:110px;border:0;border-radius:14px;background:#03140a;color:#4ade80;font:700 15px/1.4 ui-monospace,Menlo,monospace;text-shadow:0 0 6px #4ade80;cursor:pointer;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)}
.demo-vhs{padding:12px 18px;border:0;border-radius:6px;background:#111827;color:#fff;font:800 18px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;cursor:pointer}.demo-y2k{padding:12px 20px;border:1px solid #fff;border-radius:999px;background:linear-gradient(180deg,#f8fafc,#c7d2fe 45%,#818cf8 52%,#e0e7ff);color:#1e1b4b;font:800 16px/1 system-ui,sans-serif;cursor:pointer}
.demo-orgs{gap:14px}.demo-orgs usa-organic-card{display:flex;flex-direction:column;gap:4px;width:110px;padding:22px 16px;font-size:14px}.demo-orgs small{opacity:.7}
.demo-vine{padding:0;border:0;background:none;cursor:pointer}.demo-drop{padding:12px 18px;border:0;border-radius:14px;background:#0ea5e9;color:#fff;font:700 14px/1 system-ui,sans-serif;cursor:pointer}.demo-blob{display:block;width:84px;height:84px;border-radius:50%;background:linear-gradient(140deg,#a78bfa,#f472b6)}
.demo-hud{width:min(260px,100%)}.demo-radar{width:150px;max-width:100%}
.demo-cy{padding:12px 16px;border:1px solid #22d3ee;border-radius:4px;background:#0b1220;color:#67e8f9;font:700 13px/1 ui-monospace,monospace;letter-spacing:.06em;cursor:pointer}.demo-holo{display:inline-block;padding:14px 18px;border:1px solid #22d3ee;border-radius:6px;background:rgba(8,47,73,.6);color:#a5f3fc;font:800 16px/1 ui-monospace,monospace;letter-spacing:.2em}
.demo-sticky{padding:4px;gap:10px}.demo-sticky>p{margin:0;width:96px!important;min-height:80px!important}.demo-sks{gap:12px}.demo-sks usa-sketch-chart{width:150px}
.demo-paper{padding:12px 16px;border:1px solid #e7e0cf;border-radius:4px;background:#fffdf5;color:#3f3a2e;font:600 14px/1 Georgia,serif;box-shadow:0 6px 12px -8px rgba(0,0,0,.35);cursor:pointer}.demo-pencil{padding:0;border:0;background:#fffdf5;border-radius:6px;cursor:pointer}.demo-wc{padding:16px 20px;border:0;border-radius:40% 60% 55% 45%/50% 45% 55% 50%;background:radial-gradient(circle at 30% 40%,#93c5fd,#c4b5fd 45%,#f9a8d4);color:#1e1b4b;font:700 14px/1 Georgia,serif;cursor:pointer}
.demo-stickyw,.demo-skw{gap:8px;align-items:center}.demo-skbtn{padding:6px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:600 12px/1 system-ui,sans-serif;cursor:pointer}
.demo-themes{gap:12px;align-items:center;padding:10px;border-radius:14px;max-width:100%}.demo-themes[data-usa-surface=neon]{background:#120a1f}.demo-themes[data-usa-surface=glass]{background:linear-gradient(135deg,#a5b4fc,#f0abfc)}.demo-themes[data-usa-surface=neu]{background:#e0e5ec}.demo-themes usa-theme-surface,.demo-surfs usa-theme-surface{display:flex;flex-direction:column;gap:2px;padding:14px 16px;font-size:14px}.demo-themes small{opacity:.7}
.demo-surfs{gap:10px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#c7d2fe,#fbcfe8)}
.demo-neonbg,.demo-glassbg{gap:14px;padding:14px;border-radius:12px}.demo-neonbg{background:#0b0614}.demo-glassbg{background:linear-gradient(135deg,#93c5fd,#e0e5ec)}
.demo-neon{padding:10px 14px;border:0;background:none;color:#fdf4ff;font:800 18px/1 system-ui,sans-serif;letter-spacing:.08em;cursor:pointer;text-shadow:0 0 4px #f0abfc,0 0 12px #f0abfc}.demo-neonbox{display:inline-block;padding:10px 16px;border:2px solid #22d3ee;border-radius:10px;color:#a5f3fc;font:700 14px/1 system-ui,sans-serif}
.demo-glass{padding:14px 20px;border:1px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#0f172a;font:700 14px/1 system-ui,sans-serif;cursor:pointer}.demo-neu{padding:14px 20px;border:0;border-radius:14px;background:#e0e5ec;color:#334155;font:700 14px/1 system-ui,sans-serif;box-shadow:6px 6px 12px rgba(163,177,198,.7),-6px -6px 12px rgba(255,255,255,.9);cursor:pointer}
.demo-gyro{display:flex;flex-direction:column;gap:6px;width:min(220px,100%)}.demo-gyro b{font-size:18px}.demo-gyro small{opacity:.85}
.demo-stickers{display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;min-height:120px;width:100%}.demo-stk-spin{padding:6px 12px;font-size:12px}.demo-stk{display:inline-block;padding:12px 16px;border-radius:14px;background:#fde047;color:#422006;font:800 14px/1 system-ui,sans-serif;border:3px solid #fff}
.demo-gest{padding:12px 16px;border:0;border-radius:12px;background:#4f46e5;color:#fff;font:700 14px/1 system-ui,sans-serif;cursor:pointer}
.demo-layers{position:relative;display:block;width:96px;height:72px;padding:0;border:0;background:none;cursor:pointer}.demo-layers i{position:absolute;inset:0;border-radius:10px}.demo-layers i[data-depth="3"]{background:#c7d2fe;transform:translate(-10px,-10px)}.demo-layers i[data-depth="2"]{background:#818cf8;transform:translate(0,0)}.demo-layers i[data-depth="1"]{background:#4338ca;transform:translate(10px,10px)}
.demo-gyrow{align-items:center;gap:10px}
.demo-pano{width:min(320px,100%);height:150px}
.demo-spbg{display:flex;justify-content:center;padding:14px 12px 4px;border-radius:14px;background:linear-gradient(135deg,#a5b4fc,#fbcfe8 60%,#99f6e4);width:min(280px,100%);box-sizing:border-box}.demo-sp{display:flex;flex-direction:column;gap:4px;width:100%;padding:16px 18px}.demo-sp small{opacity:.7}.demo-sp [slot=ornament] button{border:0;background:none;font-size:14px;cursor:pointer}
.demo-portal{padding:16px 20px;border:0;border-radius:14px;background:radial-gradient(circle,#4c1d95,#1e1b4b);color:#ede9fe;font:700 14px/1 system-ui,sans-serif;cursor:pointer}.demo-orbit{padding:14px 18px;border:1px solid rgba(255,255,255,.7);border-radius:16px;background:rgba(255,255,255,.6);color:#0f172a;font:700 14px/1 system-ui,sans-serif;box-shadow:0 12px 24px -14px rgba(15,23,42,.6);cursor:pointer}.demo-float{display:inline-block;padding:14px 18px;border-radius:16px;background:#fff;color:#0f172a;font:700 14px/1 system-ui,sans-serif}
.demo-ce{width:min(320px,100%)}.demo-pp{gap:10px;align-items:center;width:min(280px,100%)}.demo-pp usa-prop-panel{width:100%}
.demo-motion{display:flex!important;flex-wrap:wrap;gap:8px;justify-content:center}.demo-motion span{padding:10px 12px;border-radius:10px;background:#eef2ff;color:#3730a3;font:700 13px/1 ui-monospace,monospace;cursor:pointer}
.demo-pstore{width:min(340px,100%)}
.demo-chapters{gap:8px;width:min(320px,100%)}.demo-story{display:none}
.demo-scene{width:min(300px,100%);height:150px}.demo-shot{background:linear-gradient(180deg,#fdba74 0%,#f472b6 38%,#1e3a8a 39%,#0f172a 100%),radial-gradient(circle at 70% 30%,#fff7ed 0 8%,transparent 9%)!important;background-blend-mode:screen}
.demo-film{padding:14px 18px;border:0;border-radius:8px;background:linear-gradient(135deg,#1f2937,#111827);color:#fde68a;font:700 14px/1 Georgia,serif;letter-spacing:.04em;cursor:pointer}.demo-film-wide{padding:20px 26px}
.demo-rack{display:flex;gap:16px;padding:12px 16px;border:0;border-radius:10px;background:#0f172a;color:#e2e8f0;font:700 16px/1 system-ui,sans-serif;cursor:pointer}
.demo-lottie,.demo-licons{gap:16px;justify-content:center}
.demo-ipop{width:48px;height:48px;border:0;border-radius:50%;background:#ffe4e6;color:#e11d48;font-size:22px;cursor:pointer}.demo-ipop-b{background:#e0e7ff;color:#4f46e5}
.demo-genart{gap:10px}.demo-genart usa-gen-art{width:140px;height:110px}.demo-bggen{width:min(320px,100%)}
.demo-ht{padding:18px 22px;border:0;border-radius:10px;background:linear-gradient(135deg,#f43f5e,#f59e0b);color:#fff;font:800 15px/1 system-ui,sans-serif;cursor:pointer}.demo-kal{display:inline-block;padding:18px 22px;border-radius:12px;background:#7c3aed;color:#fff;font:800 15px/1 system-ui,sans-serif}
.demo-mesh{display:inline-block;padding:18px 22px;border-radius:12px;color:#fff;font:800 15px/1 system-ui,sans-serif;text-shadow:0 1px 4px rgba(0,0,0,.35)}.demo-grain{background:#334155}
.demo-vcard{width:min(260px,100%)}.demo-vposter{background:linear-gradient(135deg,#0ea5e9,#6366f1 55%,#ec4899)}.demo-vcard h3{margin:0}
.demo-hero{width:min(340px,100%);min-height:170px;padding:16px}.demo-hero h2{margin:0;font:800 20px/1.1 system-ui,sans-serif}.demo-hero p{margin:4px 0 0;font-size:12px;opacity:.85}
.demo-burn{padding:16px 20px;border:0;border-radius:10px;background:#292524;color:#fde68a;font:700 14px/1 Georgia,serif;cursor:pointer}
.demo-mprefs{width:min(340px,100%)}
.demo-pa{gap:14px;align-items:center}.demo-pa-spin{display:inline-block;width:28px;height:28px;border-radius:8px;background:#6366f1;animation:demo-pa-spin 1.6s linear infinite}.demo-pa-b{background:#f472b6;border-radius:50%;animation-duration:2.4s}
@keyframes demo-pa-spin{to{transform:rotate(360deg)}}
.demo-safe{padding:10px 14px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#0f172a;font:600 13px/1 system-ui,sans-serif;cursor:pointer}.demo-safe-link{color:#4f46e5;font:600 14px/1.6 system-ui,sans-serif;text-decoration:none}
.demo-perf{gap:10px;align-items:flex-start}.demo-perf usa-worker-canvas{width:150px;height:110px}.demo-wcanvas{width:min(300px,100%);height:150px}
.demo-lift{padding:12px 16px;border:0;border-radius:12px;background:#fff;color:#0f172a;font:700 14px/1 system-ui,sans-serif;box-shadow:0 8px 20px -12px rgba(15,23,42,.6);cursor:pointer}
.demo-mspec{width:min(360px,100%)}
.demo-native{width:min(420px,100%)}.demo-nrow{padding:10px;border-radius:10px;background:#fff;box-shadow:0 4px 10px -6px rgba(15,23,42,.4);color:#0f172a;font:600 12px/1 system-ui,sans-serif}
.demo-plugin-card{width:min(300px,100%)}.demo-install{width:min(320px,100%)}

/* 10.1: prerequisites of runtime-powered components */
.ccard-prereq{margin:8px 0 0;border:1px solid var(--line,#e2e8f0);border-radius:10px;font-size:.8rem}
.ccard-prereq summary{cursor:pointer;padding:6px 10px;font-weight:700;color:#4338ca}
.ccard-prereq dl{margin:0;padding:0 10px 8px}
.ccard-prereq dt{margin-top:6px;font-weight:600}
.ccard-prereq dd{margin:2px 0 0}
.ccard-prereq pre{margin:0;padding:6px 8px;max-width:100%;overflow:auto;border-radius:6px;background:#0f172a;color:#e2e8f0;font:11px/1.45 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.demo-scroll-scene{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:8px}.demo-ss-card{padding:16px 14px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#ec4899);color:#fff;font:800 15px/1 system-ui,sans-serif;box-shadow:0 8px 18px -10px rgba(79,70,229,.8)}
.demo-mi-wrap{width:min(320px,100%);display:grid;gap:8px}.demo-mi-row{display:flex;gap:10px;align-items:center;justify-content:center}.demo-mi-dot{width:18px;height:18px;border-radius:50%;background:#6366f1;animation:demo-mi-bounce 1.2s ease-in-out infinite alternate}.demo-mi-dot2{background:#ec4899;animation-duration:.8s}.demo-mi-bar{width:80px;height:8px;border-radius:4px;background:#22c55e;transform-origin:left;animation:demo-mi-grow 2s linear infinite}
@keyframes demo-mi-bounce{to{transform:translateY(-10px)}}@keyframes demo-mi-grow{from{transform:scaleX(.1)}to{transform:scaleX(1)}}
.demo-route{width:min(320px,100%)}.demo-route-nav{display:flex;gap:6px;margin-bottom:8px}.demo-route-nav button{padding:5px 10px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;font:600 12px/1 system-ui,sans-serif;cursor:pointer}.demo-route-page{padding:14px;border-radius:12px;background:linear-gradient(135deg,#eef2ff,#fdf2f8);color:#0f172a}.demo-route-page h4{margin:0 0 4px;font:800 18px/1.1 system-ui,sans-serif}.demo-route-page p{margin:0;font-size:13px}.demo-route-b{background:linear-gradient(135deg,#ecfeff,#f0fdf4)}.demo-route-c{background:linear-gradient(135deg,#fff7ed,#fef2f2)}
.demo-splitter{max-width:100%;font:800 26px/1.15 system-ui,sans-serif;color:#312e81;text-align:center}
.demo-ring{position:relative;width:min(300px,100%);height:180px}.demo-ring-scroll{height:100%;overflow:auto;padding:10px 74px 10px 12px;border-radius:12px;background:linear-gradient(180deg,#eef2ff,#fdf4ff);box-sizing:border-box;font:13px/1.5 system-ui,sans-serif;color:#1e1b4b}.demo-ring-scroll p{margin:0 0 26px}.demo-ring usa-scroll-ring{position:absolute;right:10px;top:10px}
.demo-plx{width:min(300px,100%);height:170px;border-radius:14px;background:#0f172a}.demo-plx>*{position:absolute}.demo-plx-sky{inset:-30px;background:linear-gradient(180deg,#312e81,#7c3aed 60%,#f472b6)}.demo-plx-sun{width:54px;height:54px;border-radius:50%;left:58%;top:34px;background:radial-gradient(circle,#fde68a,#f59e0b)}.demo-plx-far{left:-20px;right:-20px;bottom:-30px;height:110px;background:#4c1d95;clip-path:polygon(0 70%,18% 30%,34% 62%,52% 18%,70% 58%,86% 34%,100% 60%,100% 100%,0 100%)}.demo-plx-near{left:-20px;right:-20px;bottom:-30px;height:80px;background:#1e1b4b;clip-path:polygon(0 60%,22% 26%,40% 58%,62% 30%,80% 64%,100% 36%,100% 100%,0 100%)}.demo-plx h4{left:0;right:0;top:44%;margin:0;text-align:center;font:800 20px/1 system-ui,sans-serif;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.demo-smooth{width:min(300px,100%);height:180px;padding:12px 14px;border-radius:12px;background:linear-gradient(180deg,#ecfeff,#f0fdf4);box-sizing:border-box;font:13px/1.5 system-ui,sans-serif;color:#064e3b}.demo-smooth h4{margin:0 0 8px;font:800 16px/1.2 system-ui,sans-serif}.demo-smooth p{margin:0 0 30px}.demo-smooth-bar{position:sticky;top:-12px;height:4px;margin:-12px -14px 8px;background:linear-gradient(90deg,#10b981 calc(var(--usa-smooth-progress,0)*100%),transparent 0)}
.demo-gl{width:min(300px,100%);height:180px;aspect-ratio:auto;border-radius:14px;background:radial-gradient(circle at 50% 35%,#312e81,#0f172a)}
.demo-gpu{width:min(300px,100%);height:180px;aspect-ratio:auto}
.demo-sb{width:min(300px,100%);height:170px;border-radius:14px;display:grid;place-content:center;text-align:center;color:#fff}.demo-sb h4{margin:0;font:800 20px/1.1 system-ui,sans-serif;text-shadow:0 2px 12px rgba(0,0,0,.45)}.demo-sb p{margin:4px 0 0;font:12px/1.3 ui-monospace,monospace;opacity:.85}
.demo-lottie{width:min(200px,100%)}
.demo-rive{width:min(200px,100%);height:160px}
.demo-te{width:min(320px,100%);--usa-te-max:170px}
.demo-phys{width:min(300px,100%);height:180px;aspect-ratio:auto}
.demo-mp{width:min(320px,100%)}
.demo-snap{width:min(340px,100%)}
.demo-snap .demo-slide{height:120px;display:grid;place-items:center;border-radius:12px}