/* Demo layout, scoped to presentation pages. Glass material remains in the shared component. */
.ui-demo-page, .ui-demo-page * { box-sizing: border-box; }
.ui-demo-page { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: normal; }
.ui-demo-page h1, .ui-demo-page h3 { line-height: normal; }
.ui-demo-page [hidden] { display: none !important; }
.ui-demo-page a { color: inherit; text-decoration: none; }
.ui-demo-page button, .ui-demo-page input { font: inherit; }
.ui-demo-page button { cursor: pointer; }
.ui-demo-page .hero { margin-top: 118px; margin-bottom: 126px; padding: 66px 68px 78px; min-height: 550px; scroll-margin-top: 130px; border-radius: 38px; background: #1c1c1f; color: #f7f7f7; box-shadow: 0 24px 55px rgba(25,26,32,.14); user-select: none; -webkit-user-select: none; }
.ui-demo-page .hero .eyebrow, .ui-demo-page .hero-date { color: #a9a9b0; }
.ui-demo-page .hero-intro { display: flex; justify-content: space-between; max-width: 820px; align-items: center; }
.ui-demo-page .eyebrow { margin: 0; font-size: 10px; font-weight: 730; letter-spacing: .16em; color: #858892; }
.ui-demo-page .hero-date { font-size: 10px; font-weight: 640; letter-spacing: .13em; color: #a3a4aa; }
.ui-demo-page .hero h1 { width: max-content; max-width: 100%; margin: 28px 0 28px; font-size: clamp(60px, 5.4vw, 76px); line-height: 1.12; font-weight: 750; letter-spacing: -.095em; color: #fafafa; }
.ui-demo-page .hero h1 em { font-style: normal; color: #dbdbe1; }
.ui-demo-page .hero-description { max-width: 610px; font-size: 16px; color: #babac2; line-height: 1.9; letter-spacing: .008em; margin: 0; }
.ui-demo-page .hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 39px; }
.ui-demo-page .glass-cta { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 37px; min-height: 55px; padding: 0 18px 0 23px; border-radius: 18px; font-size: 13px; font-weight: 690; transition: transform .28s cubic-bezier(.2,.9,.2,1); }
.ui-demo-page .glass-cta:hover { transform: translateY(-4px); }
.ui-demo-page .glass-cta:active { transform: translateY(0) scale(.97); }
.ui-demo-page .glass-cta > span:not(.liquid-glass-surface) { position: relative; z-index: 1; }
.ui-demo-page .cta-arrow { font-size: 21px; line-height: 1; transition: transform .25s ease; }
.ui-demo-page .glass-cta:hover .cta-arrow { transform: rotate(45deg); }
.ui-demo-page .hero .glass-cta { color: #24252a; }
.ui-demo-page .hero .glass-cta .liquid-skin { background: rgba(250,250,252,.86); }
.ui-demo-page .archive-section { scroll-margin-top: 130px; margin-bottom: 72px; }
.ui-demo-page .archive-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.ui-demo-page .archive-header h2, .ui-demo-page .about-content h2 { margin: 13px 0 0; font-size: clamp(37px,4vw,53px); line-height: 1.2; letter-spacing: -.075em; font-weight: 740; }
.ui-demo-page .archive-header > p { margin: 0 0 6px; font-size: 12px; color: #96989d; }
.ui-demo-page .filters-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.ui-demo-page .glass-filters { padding: 5px; }
.ui-demo-page .glass-filters .glass-item { min-height: 35px; min-width: 60px; font-size: 11px; padding: 0 15px; }
.ui-demo-page .category-tab-slots { display: contents; }
.ui-demo-page .glass-filters .more-tab { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: #626a7b; }
.ui-demo-page .more-tab-arrow { flex: none; font-size: .9em; line-height: 1; }
.ui-demo-page .result-count { font-size: 10px; font-weight: 680; letter-spacing: .15em; color: #9b9da3; }
.ui-demo-page .story-list { position: relative; }
.ui-demo-page .story-row { position: relative; display: grid; grid-template-columns: 135px minmax(0,1fr) 135px 25px; align-items: center; gap: 20px; width: 100%; min-height: 136px; padding: 25px 20px; border: 0; border-radius: 0; background: transparent; color: #292c32; text-align: left; transition: transform .28s cubic-bezier(.2,.8,.2,1), background-color .28s ease, border-radius .28s ease, box-shadow .28s ease; }
.ui-demo-page .story-row::before, .ui-demo-page .story-row:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #dddfe1; opacity: 1; transition: opacity .28s ease; }
.ui-demo-page .story-row:last-child::after { top: auto; bottom: 0; }
.ui-demo-page .story-row:hover { z-index: 1; background: rgba(255,255,255,.8); border-radius: 25px; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(50,55,70,.09), 0 1px 3px rgba(50,55,70,.03); }
.ui-demo-page .story-row:hover::before, .ui-demo-page .story-row:hover + .story-row::before, .ui-demo-page .story-row:last-child:hover::after { opacity: 0; }
.ui-demo-page .story-row:active { transform: scale(.99); }
.ui-demo-page .row-date, .ui-demo-page .row-category { font-size: 11px; color: #9a9ca2; font-weight: 560; }
.ui-demo-page .row-category { text-align: right; }
.ui-demo-page .row-main { display: flex; flex-direction: column; gap: 8px; }
.ui-demo-page .row-main strong { font-size: 21px; font-weight: 660; letter-spacing: -.045em; line-height: 1.4; }
.ui-demo-page .row-main small { font-size: 11px; color: #9a9ca2; }
.ui-demo-page .row-arrow { text-align: right; color: #777f8c; font-size: 18px; transition: transform .25s ease; }
.ui-demo-page .story-row:hover .row-arrow { transform: translate(3px,-3px) rotate(42deg); }
.ui-demo-page .category-path { margin: 0; font-size: 10px; letter-spacing: .045em; color: #9499a2; }
.ui-demo-page .compact-post { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e8e9eb; color: #343840; font-size: 12px; line-height: 1.45; transition: color .2s ease, padding-left .2s ease; }
.ui-demo-page .compact-post:hover { color: #797fa0; padding-left: 5px; }
.ui-demo-page .compact-post > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-demo-page .compact-post time { flex: none; color: #a0a4ac; font-size: 10px; font-variant-numeric: tabular-nums; }
.ui-demo-page .section-more span { transition: transform .2s ease; }
.ui-demo-page .section-more:hover span { transform: translate(3px,-3px); }
.ui-demo-page .archive-preview, .ui-demo-page .tags-section { scroll-margin-top: 130px; margin-bottom: 90px; }
.ui-demo-page .archive-preview-list { position: relative; }
.ui-demo-page .archive-entry { position: relative; display: grid; grid-template-columns: 45px minmax(0,1fr) 130px 100px 20px; gap: 15px; align-items: center; min-height: 65px; padding: 12px 16px; border: 0; border-radius: 0; transition: background .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), border-radius .28s ease, box-shadow .28s ease; }
.ui-demo-page .archive-entry::before, .ui-demo-page .archive-entry:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #dedfe2; opacity: 1; transition: opacity .28s ease; }
.ui-demo-page .archive-entry:last-child::after { top: auto; bottom: 0; }
.ui-demo-page .archive-entry:hover { z-index: 1; background: rgba(255,255,255,.8); border-radius: 17px; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(50,55,70,.09), 0 1px 3px rgba(50,55,70,.03); }
.ui-demo-page .archive-entry:hover::before, .ui-demo-page .archive-entry:hover + .archive-entry::before, .ui-demo-page .archive-entry:last-child:hover::after { opacity: 0; }
.ui-demo-page .archive-index, .ui-demo-page .archive-category, .ui-demo-page .archive-entry time { font-size: 10px; color: #9b9fa8; font-variant-numeric: tabular-nums; }
.ui-demo-page .archive-entry strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 640; letter-spacing: -.035em; }
.ui-demo-page .archive-arrow { color: #838a98; text-align: right; }
.ui-demo-page .section-more { display: inline-flex; align-items: center; gap: 15px; margin-top: 25px; padding: 13px 19px; border: 1px solid #d9dce1; border-radius: 14px; background: rgba(255,255,255,.55); color: #424751; font-size: 12px; font-weight: 680; }
.ui-demo-page .tags-panel { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); gap: 26px; padding: 28px; border: 1px solid rgba(255,255,255,.88); border-radius: 34px; background: rgba(237,239,242,.72); box-shadow: inset 0 1px 1px #fff, 0 18px 45px rgba(48,55,70,.055); }
.ui-demo-page .tag-cloud { display: flex; flex-wrap: wrap; align-content: center; align-items: flex-start; gap: 10px; min-height: 260px; }
.ui-demo-page .tag-chip { display: inline-flex; align-items: center; gap: 12px; min-height: 43px; padding: 0 15px; border: 1px solid rgba(255,255,255,.94); border-radius: 999px; background: rgba(255,255,255,.6); box-shadow: inset 0 1px 1px #fff; color: #626976; font-size: 12px; font-weight: 650; transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, box-shadow .25s ease, color .25s ease; }
.ui-demo-page .tag-chip:hover { transform: translateY(-3px); background: #fff; }
.ui-demo-page .tag-chip.is-active { background: #24262b; color: #fff; box-shadow: 0 8px 18px rgba(36,38,43,.2); }
.ui-demo-page .tag-chip small { font-size: 9px; font-variant-numeric: tabular-nums; opacity: .55; }
.ui-demo-page .tag-detail { align-self: stretch; padding: 28px; border-radius: 25px; background: #f9f9f8; box-shadow: 0 12px 30px rgba(45,51,62,.06); }
.ui-demo-page .tag-detail h3 { margin: 19px 0 7px; font-size: clamp(25px, 3vw, 37px); letter-spacing: -.065em; }
.ui-demo-page .tag-detail > p:not(.eyebrow) { margin: 0 0 16px; color: #9296a0; font-size: 11px; }
.ui-demo-page .tag-detail .compact-post { font-size: 11px; }
.ui-demo-page .tag-detail .compact-post time { display: none; }
.ui-demo-page .tag-detail > small { display: block; margin-top: 15px; color: #a0a4ac; font-size: 10px; }
.ui-demo-page .listing-shell { padding-top: 105px; padding-bottom: 130px; min-height: 75vh; }
.ui-demo-page .listing-shell > .eyebrow { margin-top: 64px; }
.ui-demo-page .listing-shell h1 { margin: 15px 0 10px; font-size: clamp(48px, 6vw, 76px); letter-spacing: -.075em; }
.ui-demo-page .listing-description { margin: 0 0 48px; color: #8e929b; font-size: 13px; }
.ui-demo-page .category-index-tools { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.9); border-radius: 17px; background: rgba(255,255,255,.65); box-shadow: inset 0 1px 1px #fff; }
.ui-demo-page .category-index-tools label { flex: none; font-size: 11px; font-weight: 700; color: #747986; }
.ui-demo-page .category-index-tools input { width: 100%; min-width: 0; padding: 7px 0; border: 0; outline: 0; background: transparent; color: #26292f; font-size: 13px; }
.ui-demo-page .category-index-tools input::placeholder { color: #a3a7ae; }
.ui-demo-page .category-index-tools > span { flex: none; font-size: 10px; color: #969ba4; }
.ui-demo-page .category-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.ui-demo-page .directory-card { display: flex; flex-direction: column; min-height: 146px; min-width: 0; padding: 21px; border: 1px solid rgba(255,255,255,.95); border-radius: 24px; background: rgba(255,255,255,.59); box-shadow: inset 0 1px 1px #fff, 0 8px 25px rgba(48,55,70,.04); transition: transform .24s ease, box-shadow .24s ease; }
.ui-demo-page .directory-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 1px #fff, 0 17px 34px rgba(48,55,70,.1); }
.ui-demo-page .directory-card strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 13px; font-size: 24px; letter-spacing: -.06em; }
.ui-demo-page .directory-meta { display: flex; justify-content: space-between; margin-top: auto; color: #9399a3; font-size: 11px; }
.ui-demo-page .directory-meta span { font-size: 16px; }
.ui-demo-page .category-empty { padding: 45px 0; text-align: center; color: #9ca0a8; font-size: 12px; }
.ui-demo-page .full-category-list { border-top: 1px solid #dfe1e4; }
.ui-demo-page .full-category-list .compact-post { padding: 20px 8px; font-size: 17px; }
.ui-demo-page .full-category-list .compact-post time { font-size: 12px; }
.ui-demo-page .archive-year { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 25px; padding: 25px 0 50px; border-top: 1px solid #dfe1e4; }
.ui-demo-page .archive-year h2 { margin: 0; font-size: 43px; letter-spacing: -.08em; }
.ui-demo-page .archive-year h2 small { display: block; margin-top: 3px; color: #9b9ea8; font-size: 11px; font-weight: 550; letter-spacing: 0; }
.ui-demo-page .archive-year .compact-post { padding: 15px 5px; font-size: 14px; }
.ui-demo-page .about-section { scroll-margin-top: 130px; padding-top: 40px; padding-bottom: 128px; border-top: 1px solid #dddfe1; }
.ui-demo-page .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 18px; }
.ui-demo-page .about-content h2 { font-size: clamp(44px,5.5vw,72px); }
.ui-demo-page .about-content p { max-width: 460px; font-size: 14px; line-height: 2; color: #777a81; margin: 8px 0 21px; }
.ui-demo-page .text-action { display: inline-flex; align-items: center; gap: 11px; border: 0; background: transparent; padding: 8px 0; font-size: 12px; font-weight: 700; color: #424651; }
.ui-demo-page .text-action span { display: inline-block; transition: transform .23s ease; }
.ui-demo-page .text-action:hover span { transform: translate(4px,-3px); }
.ui-demo-page .back-button { padding: 7px 0; border: 0; background: transparent; color: #868991; font-size: 12px; font-weight: 620; transition: color .2s ease, transform .2s ease; }
.ui-demo-page .back-button:hover { color: #25272b; transform: translateX(-4px); }
@media (max-width: 900px) {
  .ui-demo-page .hero { margin-top: 102px; padding: 58px 52px 64px; min-height: 0; }
  .ui-demo-page .hero h1 { font-size: clamp(58px, 7.3vw, 70px); }
  .ui-demo-page .tags-panel { grid-template-columns: 1fr; }
  .ui-demo-page .tag-cloud { min-height: 0; }
  .ui-demo-page .category-directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .ui-demo-page .hero { margin-top: 104px; margin-bottom: 102px; padding: 42px 27px 52px; border-radius: 28px; }
  .ui-demo-page .hero h1 { font-size: clamp(46px, 11.6vw, 55px); margin-top: 23px; }
  .ui-demo-page .hero-description { font-size: 14px; line-height: 1.9; }
  .ui-demo-page .hero-actions { flex-wrap: wrap; gap: 15px; }
  .ui-demo-page .category-directory { grid-template-columns: 1fr; }
  .ui-demo-page .directory-card { min-height: 128px; }
  .ui-demo-page .archive-preview, .ui-demo-page .tags-section { margin-bottom: 80px; }
  .ui-demo-page .archive-entry { grid-template-columns: 28px minmax(0,1fr) 71px 16px; gap: 7px; padding-inline: 4px; }
  .ui-demo-page .archive-entry strong { font-size: 13px; }
  .ui-demo-page .archive-category { display: none; }
  .ui-demo-page .archive-entry time { font-size: 9px; }
  .ui-demo-page .tags-panel { padding: 19px; gap: 18px; border-radius: 25px; }
  .ui-demo-page .tag-cloud { gap: 8px; }
  .ui-demo-page .tag-chip { min-height: 39px; padding: 0 12px; font-size: 11px; }
  .ui-demo-page .tag-detail { padding: 23px; }
  .ui-demo-page .listing-shell { padding-top: 78px; }
  .ui-demo-page .archive-year { grid-template-columns: 1fr; gap: 9px; }
  .ui-demo-page .archive-year h2 { font-size: 36px; }
  .ui-demo-page .archive-header { display: block; }
  .ui-demo-page .archive-header > p { margin-top: 12px; }
  .ui-demo-page .filters-wrap { display: block; }
  .ui-demo-page .glass-filters { width: max-content; max-width: 100%; }
  .ui-demo-page .glass-filters .glass-item { min-width: 0; padding: 0 9px; font-size: 10px; }
  .ui-demo-page .result-count { display: block; margin-top: 10px; text-align: right; white-space: nowrap; }
  .ui-demo-page .story-row { grid-template-columns: minmax(0,1fr) 20px; gap: 8px; min-height: 128px; padding: 22px 6px; }
  .ui-demo-page .row-date { grid-column: 1; grid-row: 1; }
  .ui-demo-page .row-main { grid-column: 1; grid-row: 2; }
  .ui-demo-page .row-main strong { font-size: 19px; }
  .ui-demo-page .row-category { display: none; }
  .ui-demo-page .row-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .ui-demo-page .about-section { padding-bottom: 100px; }
  .ui-demo-page .about-content { grid-template-columns: 1fr; gap: 14px; }
  .ui-demo-page .about-content h2 { font-size: 56px; }
}
@media (max-width: 390px) {
  .ui-demo-page .hero h1 { font-size: 48px; }
  .ui-demo-page .glass-filters .glass-item { font-size: 10px; padding: 0 10px; }
  .ui-demo-page .result-count { font-size: 9px; }
  .ui-demo-page .about-content h2 { font-size: 50px; }
}
html[data-theme="dark"] .ui-demo-page .glass-filters .more-tab { color: #c1cbe0; }
html[data-theme="dark"] .ui-demo-page .hero { border: 1px solid rgba(255,255,255,.08); background: #090b10; box-shadow: 0 25px 58px rgba(0,0,0,.32); }
html[data-theme="dark"] .ui-demo-page .eyebrow, html[data-theme="dark"] .ui-demo-page .hero-date { color: #aeb9ca; }
html[data-theme="dark"] .ui-demo-page .archive-header > p, html[data-theme="dark"] .ui-demo-page .listing-description, html[data-theme="dark"] .ui-demo-page .about-content p { color: #aab4c3; }
html[data-theme="dark"] .ui-demo-page .result-count, html[data-theme="dark"] .ui-demo-page .row-date, html[data-theme="dark"] .ui-demo-page .row-category, html[data-theme="dark"] .ui-demo-page .row-main small, html[data-theme="dark"] .ui-demo-page .archive-index, html[data-theme="dark"] .ui-demo-page .archive-category, html[data-theme="dark"] .ui-demo-page .archive-entry time { color: #a2adbc; }
html[data-theme="dark"] .ui-demo-page .story-row { color: #e7ecf4; }
html[data-theme="dark"] .ui-demo-page .story-row::before, html[data-theme="dark"] .ui-demo-page .story-row:last-child::after, html[data-theme="dark"] .ui-demo-page .archive-entry::before, html[data-theme="dark"] .ui-demo-page .archive-entry:last-child::after { background: #363d49; }
html[data-theme="dark"] .ui-demo-page .story-row:hover, html[data-theme="dark"] .ui-demo-page .archive-entry:hover { background: rgba(42,48,59,.93); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
html[data-theme="dark"] .ui-demo-page .row-arrow, html[data-theme="dark"] .ui-demo-page .archive-arrow { color: #aebbd0; }
html[data-theme="dark"] .ui-demo-page .section-more { border-color: #414958; background: rgba(42,48,59,.82); color: #e0e7f2; }
html[data-theme="dark"] .ui-demo-page .tags-panel { border-color: #38404d; background: rgba(34,39,49,.85); box-shadow: inset 0 1px 1px rgba(255,255,255,.07), 0 18px 45px rgba(0,0,0,.16); }
html[data-theme="dark"] .ui-demo-page .tag-chip { border-color: #454e5d; background: #2e3541; box-shadow: inset 0 1px 1px rgba(255,255,255,.08); color: #d1dae8; }
html[data-theme="dark"] .ui-demo-page .tag-chip:hover { background: #394453; }
html[data-theme="dark"] .ui-demo-page .tag-chip.is-active { border-color: #d5e2f3; background: #dbe7f7; color: #202838; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
html[data-theme="dark"] .ui-demo-page .tag-detail { background: #1b2029; box-shadow: 0 12px 30px rgba(0,0,0,.14); }
html[data-theme="dark"] .ui-demo-page .tag-detail > p:not(.eyebrow), html[data-theme="dark"] .ui-demo-page .tag-detail > small { color: #aab6c7; }
html[data-theme="dark"] .ui-demo-page .compact-post { border-bottom-color: #39404c; color: #dbe3ef; }
html[data-theme="dark"] .ui-demo-page .compact-post:hover { color: #b8cbed; }
html[data-theme="dark"] .ui-demo-page .compact-post time, html[data-theme="dark"] .ui-demo-page .category-path, html[data-theme="dark"] .ui-demo-page .directory-meta, html[data-theme="dark"] .ui-demo-page .archive-year h2 small { color: #a3aebf; }
html[data-theme="dark"] .ui-demo-page .category-index-tools, html[data-theme="dark"] .ui-demo-page .directory-card { border-color: #3b4452; background: rgba(39,45,56,.82); box-shadow: inset 0 1px 1px rgba(255,255,255,.07), 0 8px 25px rgba(0,0,0,.12); }
html[data-theme="dark"] .ui-demo-page .directory-card:hover { box-shadow: inset 0 1px 1px rgba(255,255,255,.1), 0 17px 34px rgba(0,0,0,.23); }
html[data-theme="dark"] .ui-demo-page .category-index-tools label, html[data-theme="dark"] .ui-demo-page .category-index-tools > span { color: #aeb9c8; }
html[data-theme="dark"] .ui-demo-page .category-index-tools input { color: #eef3fa; }
html[data-theme="dark"] .ui-demo-page .category-index-tools input::placeholder { color: #8f9bae; }
html[data-theme="dark"] .ui-demo-page .full-category-list, html[data-theme="dark"] .ui-demo-page .archive-year, html[data-theme="dark"] .ui-demo-page .about-section { border-color: #39414d; }
html[data-theme="dark"] .ui-demo-page .text-action { color: #e2e9f3; }
html[data-theme="dark"] .ui-demo-page .back-button:hover { color: #f3f7fc; }
html[data-theme="dark"] .ui-demo-page .back-button { color: #a4afbf; }

/* Adapt the demo's document flow to NexT's fixed header and existing shell. */
.main-inner.ui-demo-page { padding-top: 206px; }
.ui-home { overflow-anchor: none; }
.ui-demo-page .hero { position: relative; margin-top: 0; overflow: hidden; }
.ui-demo-page .hero .liquid-glass-float { left: 64px; top: 114px; }
.ui-demo-page h1, .ui-demo-page h2, .ui-demo-page h3 { color: var(--ui-text); }
.ui-demo-page .hero h1 { color: #fafafa; }
.ui-demo-page .hero .glass-cta { color: #24252a; }
.ui-demo-page .listing-shell { padding-top: 0; }
.ui-demo-page .glass-cta { border: 0; background: #fafafa; }
.ui-demo-page .glass-filters { position: relative; display: flex; align-items: center; width: max-content; border: 1px solid var(--glass-border); border-radius: 999px; }
.ui-demo-page .glass-item { position: relative; z-index: 1; display: grid; place-items: center; border: 0; background: transparent; border-radius: 999px; color: var(--ui-secondary); font-weight: 640; white-space: nowrap; }
.ui-demo-page .glass-item.is-selected { color: var(--ui-text); }
.ui-demo-page .tag-detail p:not(.eyebrow) { margin: 0 0 16px; color: var(--ui-muted); font-size: 11px; }
.ui-demo-page .tag-detail small { display: block; margin-top: 15px; color: var(--ui-muted); font-size: 10px; }
.ui-demo-page .story-row, .ui-demo-page .archive-entry, .ui-demo-page .compact-post, .ui-demo-page .directory-card { overflow-wrap: anywhere; }
.ui-demo-page .archive-entry strong, .ui-demo-page .compact-post > span { white-space: normal; }
.ui-demo-page .category-index-tools:focus-within { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.ui-demo-page .tag-cloud { padding: 0; }
body:has(.ui-home) .footer { margin-top: 0; }
@media (max-width: 900px) {
  .main-inner.ui-demo-page { padding-top: 190px; }
  .ui-demo-page .hero .liquid-glass-float { left: 48px; top: 106px; }
}
@media (max-width: 650px) {
  .ui-demo-page .hero .liquid-glass-float { left: 23px; top: 85px; width: min(280px, calc(100vw - 72px)); }
  .ui-demo-page .hero h1 { overflow-wrap: anywhere; }
  .ui-demo-page .glass-filters .glass-item { padding: 0 9px; }
  .ui-demo-page .listing-shell { padding-bottom: 65px; }
}
@media (max-width: 767px) {
  .main-inner.ui-demo-page { padding-top: 105px; }
  .ui-demo-page .hero { margin-bottom: 32px; padding-top: 32px; padding-bottom: 32px; }
  .ui-home .about-section { padding-bottom: 0; }
  body:has(.ui-home) .footer { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-demo-page *, .ui-demo-page *::before, .ui-demo-page *::after { transition: none !important; }
}