.demo-expandable-search .search-wrap{display: inline-flex;align-items: center;background: var(--surface-2);border: 2px solid var(--border);border-radius: 999px;padding: .5rem .75rem;transition: border-color .25s, background .25s;}:is(.demo-expandable-search .search-wrap):focus-within{background: var(--surface);border-color: var(--accent);}.demo-expandable-search .search-icon{display: flex;color: var(--text-muted);flex-shrink: 0;}.demo-expandable-search .search-input{border: none;background: transparent;outline: none;font-size: .95rem;font-family: inherit;width: 120px;padding: 0 .5rem;transition: width .35s;color: var(--text);}:is(.demo-expandable-search .search-input):focus{width: 240px;}@media (prefers-reduced-motion: reduce){.demo-expandable-search .mini-input, .demo-expandable-search .sg-panel, .demo-expandable-search .search-input{transition: none;}}
.demo-tab-navigation .tabs{display: flex;flex-direction: column;width: 320px;}.demo-tab-navigation .tab-inputs{display: none;}.demo-tab-navigation .tab-labels{display: flex;border-bottom: 2px solid var(--border);}.demo-tab-navigation .tab-label{padding: .6rem 1.1rem;cursor: pointer;font-size: .9rem;font-weight: 500;color: var(--text-muted);border-bottom: 2px solid transparent;margin-bottom: -2px;user-select: none;transition: color .2s;}:is(.demo-tab-navigation .tab-label):hover{color: var(--accent);}.demo-tab-navigation .tab-panel{display: none;padding: 1.25rem 0;font-size: .9rem;color: var(--text);}#demo-tab-navigation-t1:checked ~ .tab-labels label[for="demo-tab-navigation-t1"], #demo-tab-navigation-t2:checked ~ .tab-labels label[for="demo-tab-navigation-t2"], #demo-tab-navigation-t3:checked ~ .tab-labels label[for="demo-tab-navigation-t3"]{color: var(--accent);border-bottom-color: var(--accent);}#demo-tab-navigation-t1:checked ~ .tab-panels #demo-tab-navigation-p1, #demo-tab-navigation-t2:checked ~ .tab-panels #demo-tab-navigation-p2, #demo-tab-navigation-t3:checked ~ .tab-panels #demo-tab-navigation-p3{display: block;}@media (prefers-reduced-motion: reduce){.demo-tab-navigation .stab-slider{transition: none;}}
.demo-hover-dropdown .dropdown{position: relative;display: inline-block;}:is(.demo-hover-dropdown .dropdown):hover .dropdown-arrow{transform: rotate(180deg);}:is(.demo-hover-dropdown .dropdown):hover .dropdown-menu{opacity: 1;visibility: visible;transform: translateY(0);}.demo-hover-dropdown .dropdown-trigger{display: inline-flex;align-items: center;gap: .4rem;padding: .55rem 1rem;background: var(--accent);color: var(--bg);border-radius: 8px;font-size: .9rem;font-weight: 500;cursor: default;user-select: none;}.demo-hover-dropdown .dropdown-arrow{transition: transform .2s;flex-shrink: 0;}.demo-hover-dropdown .dropdown-menu{position: absolute;top: calc(100% + 6px);left: 0;background: var(--surface);border: 1px solid var(--border);border-radius: 8px;box-shadow: 0 4px 16px rgba(0,0,0,.1);min-width: 160px;opacity: 0;visibility: hidden;transform: translateY(-6px);transition: opacity .2s, transform .2s, visibility .2s;}:is(.demo-hover-dropdown .dropdown-menu) a{display: block;padding: .6rem 1rem;font-size: .875rem;color: var(--text);text-decoration: none;transition: background .15s;}:is(:is(.demo-hover-dropdown .dropdown-menu) a):first-child{border-radius: 8px 8px 0 0;}:is(:is(.demo-hover-dropdown .dropdown-menu) a):last-child{border-radius: 0 0 8px 8px;}:is(:is(.demo-hover-dropdown .dropdown-menu) a):hover{background: var(--accent-dim);color: var(--accent);}.card-preview .demo-hover-dropdown{pointer-events: auto;}@media (prefers-reduced-motion: reduce){.demo-hover-dropdown .cdrop-menu, .demo-hover-dropdown .sdrop-menu, .demo-hover-dropdown .cdrop-arrow{transition: none;}}
.demo-offcanvas-nav{position: relative;overflow: hidden;min-height: 260px;}.demo-offcanvas-nav .offcanvas-check{display: none;}.demo-offcanvas-nav .offcanvas-open{display: inline-flex;align-items: center;gap: .5rem;padding: .55rem 1rem;background: var(--accent);color: var(--bg);border-radius: 8px;cursor: pointer;font-size: .9rem;user-select: none;position: relative;z-index: 2;}.demo-offcanvas-nav .offcanvas-panel{position: absolute;top: 0;left: 0;width: 220px;height: 100%;background: var(--surface);transform: translateX(-100%);transition: transform .3s ease;z-index: 10;padding: 1.5rem 0;}:is(.demo-offcanvas-nav .offcanvas-panel) nav a{display: block;padding: .65rem 1.25rem;color: var(--text);font-size: .9rem;text-decoration: none;transition: background .15s;}:is(:is(.demo-offcanvas-nav .offcanvas-panel) nav a):hover{background: rgba(255,255,255,.08);}.demo-offcanvas-nav .offcanvas-check:checked ~ .offcanvas-panel{transform: translateX(0);}.demo-offcanvas-nav .offcanvas-close{display: block;padding: .65rem 1.25rem;color: var(--text-muted);font-size: .85rem;cursor: pointer;margin-bottom: .5rem;border-bottom: 1px solid rgba(255,255,255,.1);}.demo-offcanvas-nav .offcanvas-overlay{position: absolute;inset: 0;background: rgba(0,0,0,.45);opacity: 0;pointer-events: none;transition: opacity .3s;z-index: 9;}.demo-offcanvas-nav .offcanvas-check:checked ~ .offcanvas-overlay{opacity: 1;pointer-events: auto;}@media (prefers-reduced-motion: reduce){.demo-offcanvas-nav .ocp-panel, .demo-offcanvas-nav .ocp-shift, .demo-offcanvas-nav .ocb-panel, .demo-offcanvas-nav .ocb-burger span, .demo-offcanvas-nav .offcanvas-panel, .demo-offcanvas-nav .offcanvas-overlay{transition: none;}}
.demo-scroll-spy .scroll-area{timeline-scope: --spy;border: 1px solid var(--border);border-radius: 10px;overflow: hidden;display: flex;flex-direction: column;}.demo-scroll-spy .scroll-header{position: sticky;top: 0;background: var(--surface);border-bottom: 1px solid var(--border);padding: .6rem 1rem .5rem;display: flex;flex-direction: column;gap: .45rem;z-index: 2;}.demo-scroll-spy .scroll-label{font-size: .7rem;font-family: var(--font-mono);color: var(--text-muted);text-transform: uppercase;letter-spacing: .08em;}.demo-scroll-spy .bar-track{height: 6px;background: var(--surface-2);border-radius: 999px;overflow: hidden;}.demo-scroll-spy .bar-local{height: 100%;width: 0%;background: linear-gradient(90deg, var(--accent), var(--teal));border-radius: 999px;animation: reading-progress linear;animation-timeline: --spy;animation-fill-mode: both;}.demo-scroll-spy .scroll-content{scroll-timeline-name: --spy;padding: 1.25rem 1.25rem 2rem;height: 280px;overflow-y: auto;}:is(.demo-scroll-spy .scroll-content) h3{font-size: .9rem;font-weight: 700;margin: 1.25rem 0 .5rem;color: var(--text);}:is(:is(.demo-scroll-spy .scroll-content) h3):first-child{margin-top: 0;}:is(.demo-scroll-spy .scroll-content) p{margin-bottom: .85rem;font-size: .875rem;color: var(--text-muted);line-height: 1.7;}:is(.demo-scroll-spy .scroll-content) code{font-family: var(--font-mono);font-size: .8em;color: var(--accent);}@keyframes reading-progress{from{width: 0%;}to{width: 100%;}}@supports (animation-timeline: scroll()){.demo-scroll-spy .inbar-bar{animation: inbar-fill linear both;animation-timeline: scroll();}}@supports (animation-timeline: scroll()){.demo-scroll-spy .spy-item{animation: spy-on linear;animation-timeline: --spy-rail;}.demo-scroll-spy .spy-i1{animation-range: 0% 25%;}.demo-scroll-spy .spy-i2{animation-range: 25% 50%;}.demo-scroll-spy .spy-i3{animation-range: 50% 75%;}.demo-scroll-spy .spy-i4{animation-range: 75% 100%;animation-fill-mode: forwards;}}
.demo-sticky-sidebar .sticky-layout{display: grid;grid-template-columns: 180px 1fr;gap: 1.5rem;height: 260px;overflow-y: auto;}.demo-sticky-sidebar .sticky-nav{position: sticky;top: 0;align-self: start;background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius);padding: .75rem;height: fit-content;}:is(.demo-sticky-sidebar .sticky-nav) h3{font-size: .75rem;text-transform: uppercase;letter-spacing: .08em;color: var(--text-muted);margin-bottom: .5rem;}:is(.demo-sticky-sidebar .sticky-nav) ul{list-style: none;display: flex;flex-direction: column;gap: .1rem;}:is(.demo-sticky-sidebar .sticky-nav) li a{display: block;padding: .4rem .6rem;border-radius: 6px;color: var(--text);text-decoration: none;font-size: .875rem;transition: background .15s, color .15s;}:is(:is(.demo-sticky-sidebar .sticky-nav) li a):hover{background: var(--accent-dim);color: var(--accent);}.active:is(:is(.demo-sticky-sidebar .sticky-nav) li a){background: var(--accent-dim);color: var(--accent);font-weight: 600;}.demo-sticky-sidebar .sticky-content{display: flex;flex-direction: column;gap: 1rem;}.demo-sticky-sidebar .content-block{background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius);padding: 1rem;}:is(.demo-sticky-sidebar .content-block) h4{font-size: .9rem;margin-bottom: .4rem;color: var(--accent);}:is(.demo-sticky-sidebar .content-block) p{font-size: .82rem;color: var(--text-muted);line-height: 1.5;}
.demo-breadcrumb .breadcrumb-variants{display: flex;flex-direction: column;gap: 1.5rem;align-items: flex-start;}.demo-breadcrumb nav ol{list-style: none;display: flex;align-items: center;flex-wrap: wrap;gap: 0;}.demo-breadcrumb nav li{display: flex;align-items: center;font-size: .9rem;}:is(.demo-breadcrumb nav li) + li::before{content: "/";color: var(--text-muted);margin: 0 .5rem;}:is(.demo-breadcrumb nav li):last-child{color: var(--text);font-weight: 500;}.demo-breadcrumb nav a{color: var(--text-muted);text-decoration: none;transition: color .15s;}:is(.demo-breadcrumb nav a):hover{color: var(--accent);}.demo-breadcrumb .bc-arrow li + li::before{content: "›";font-size: 1.1rem;line-height: 1;}.demo-breadcrumb .bc-chevron li + li::before{content: "";display: inline-block;width: 6px;height: 6px;border-top: 1.5px solid var(--text-muted);border-right: 1.5px solid var(--text-muted);transform: rotate(45deg);margin: 0 .6rem;}.demo-breadcrumb .bc-pill li{background: var(--surface-2);padding: .25rem .75rem;border-radius: 99px;font-size: .8rem;}:is(.demo-breadcrumb .bc-pill li) + li::before{display: none;}:is(.demo-breadcrumb .bc-pill li) + li{margin-left: .35rem;}:is(.demo-breadcrumb .bc-pill li):last-child{background: var(--accent-dim);color: var(--accent);}
.demo-pagination .pg-radio{display: none;}.demo-pagination .pg-wrap{display: flex;flex-direction: column;gap: 1.25rem;align-items: center;}.demo-pagination .pg-bar{display: flex;align-items: center;gap: .3rem;}:is(.demo-pagination .pg-bar) label{display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border-radius: var(--radius);border: 1px solid var(--border);color: var(--text-muted);font-size: .9rem;font-weight: 500;cursor: pointer;transition: background .15s, color .15s, border-color .15s;user-select: none;}:is(:is(.demo-pagination .pg-bar) label):hover{background: var(--surface-2);color: var(--text);border-color: var(--text-muted);}.demo-pagination .pg-bar .pg-prev,.demo-pagination .pg-bar .pg-next{width: auto;padding: 0 .75rem;gap: .3rem;font-size: .85rem;cursor: default;opacity: .45;}.demo-pagination .pg-bar .pg-prev:hover,.demo-pagination .pg-bar .pg-next:hover{background: none;color: var(--text-muted);border-color: var(--border);}.demo-pagination .pg-content{background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius);padding: .75rem 1.25rem;font-size: .85rem;color: var(--text-muted);min-height: 44px;display: flex;align-items: center;width: 100%;max-width: 320px;justify-content: center;}.demo-pagination .pg-page{display: none;}#pg1:checked ~ .pg-wrap .pg-bar label[for="pg1"], #pg2:checked ~ .pg-wrap .pg-bar label[for="pg2"], #pg3:checked ~ .pg-wrap .pg-bar label[for="pg3"], #pg4:checked ~ .pg-wrap .pg-bar label[for="pg4"], #pg5:checked ~ .pg-wrap .pg-bar label[for="pg5"]{background: var(--accent);color: var(--bg);border-color: var(--accent);}#pg1:checked ~ .pg-wrap .pg-content .pg-page-1, #pg2:checked ~ .pg-wrap .pg-content .pg-page-2, #pg3:checked ~ .pg-wrap .pg-content .pg-page-3, #pg4:checked ~ .pg-wrap .pg-content .pg-page-4, #pg5:checked ~ .pg-wrap .pg-content .pg-page-5{display: block;color: var(--text);}@media (prefers-reduced-motion: reduce){.demo-pagination .pgd-dots label, .demo-pagination .pgn-bar label{transition: none;}}
.demo-vertical-tabs .vtab-radio{display: none;}.demo-vertical-tabs .vtab-layout{display: grid;grid-template-columns: 160px 1fr;gap: 0;border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;min-height: 220px;}.demo-vertical-tabs .vtab-nav{background: var(--surface);border-right: 1px solid var(--border);padding: .5rem;display: flex;flex-direction: column;gap: .2rem;}:is(.demo-vertical-tabs .vtab-nav) label{display: block;padding: .55rem .8rem;border-radius: var(--radius);color: var(--text-muted);font-size: .875rem;cursor: pointer;transition: background .15s, color .15s;font-weight: 500;user-select: none;}:is(:is(.demo-vertical-tabs .vtab-nav) label):hover{background: var(--accent-dim);color: var(--text);}.demo-vertical-tabs .vtab-panels{background: var(--surface-2);padding: 1.25rem;}.demo-vertical-tabs .vtab-panel{display: none;}:is(.demo-vertical-tabs .vtab-panel) h3{font-size: 1rem;margin-bottom: .5rem;}:is(.demo-vertical-tabs .vtab-panel) p{font-size: .875rem;color: var(--text-muted);line-height: 1.6;}#vtab1:checked ~ .vtab-layout .vtab-nav label[for="vtab1"], #vtab2:checked ~ .vtab-layout .vtab-nav label[for="vtab2"], #vtab3:checked ~ .vtab-layout .vtab-nav label[for="vtab3"], #vtab4:checked ~ .vtab-layout .vtab-nav label[for="vtab4"]{background: var(--accent-dim);color: var(--accent);}#vtab1:checked ~ .vtab-layout .vtab-panel-1, #vtab2:checked ~ .vtab-layout .vtab-panel-2, #vtab3:checked ~ .vtab-layout .vtab-panel-3, #vtab4:checked ~ .vtab-layout .vtab-panel-4{display: block;}@media (prefers-reduced-motion: reduce){.demo-vertical-tabs .vslide-bar{transition: none;}}
.demo-shrinking-header .shrink-frame{width: 100%;height: 320px;overflow-y: auto;border-radius: var(--radius-lg);border: 1px solid var(--border);}.demo-shrinking-header .shrink-header{position: sticky;top: 0;z-index: 10;display: flex;align-items: center;justify-content: space-between;padding: 0 1.25rem;background: var(--surface);border-bottom: 1px solid var(--border);animation: sh-shrink linear both;animation-timeline: scroll();animation-range: 0px 80px;}@keyframes sh-shrink{from{height: 60px;}to{height: 38px;}}.demo-shrinking-header .shrink-logo{font-family: var(--font-mono);font-weight: 700;color: var(--accent);animation: sh-logo linear both;animation-timeline: scroll();animation-range: 0px 80px;}@keyframes sh-logo{from{font-size: 1rem;}to{font-size: .72rem;}}.demo-shrinking-header .shrink-nav{display: flex;gap: 1.25rem;}.demo-shrinking-header .shrink-nav a{font-family: var(--font-mono);color: var(--text-muted);text-decoration: none;animation: sh-nav linear both;animation-timeline: scroll();animation-range: 0px 80px;}@keyframes sh-nav{from{font-size: .72rem;}to{font-size: .58rem;}}.demo-shrinking-header .shrink-content{padding: 1rem 1.25rem 1.25rem;display: flex;flex-direction: column;gap: .75rem;}.demo-shrinking-header .shrink-hint{font-family: var(--font-mono);font-size: .65rem;color: var(--text-muted);letter-spacing: .08em;text-align: center;padding: .25rem 0;}.demo-shrinking-header .shrink-block{height: 52px;background: var(--surface-2);border-radius: var(--radius);border: 1px solid var(--border);}.demo-shrinking-header .shrink-block-tall{height: 76px;background: var(--surface-2);border-radius: var(--radius);border: 1px solid var(--border);}.card-preview .demo-shrinking-header{pointer-events: auto;}@supports (animation-timeline: scroll()){.demo-shrinking-header .prog-header{animation: ph-shrink linear both;animation-timeline: scroll();animation-range: 0px 80px;}.demo-shrinking-header .prog-logo{animation: ph-logo linear both;animation-timeline: scroll();animation-range: 0px 80px;}.demo-shrinking-header .prog-bar{animation: ph-progress linear both;animation-timeline: scroll();}}@media (prefers-reduced-motion: reduce){.demo-shrinking-header .shrink-header, .demo-shrinking-header .prog-header, .demo-shrinking-header .prog-logo, .demo-shrinking-header .prog-bar, .demo-shrinking-header .shrink-logo, .demo-shrinking-header .shrink-nav a{animation: none;}.demo-shrinking-header .shrink-header, .demo-shrinking-header .prog-header{height: 38px;}}
.demo-sticky-sections .sticky-frame{width: 100%;height: 320px;overflow-y: auto;border-radius: var(--radius-lg);border: 1px solid var(--border);}.demo-sticky-sections .sticky-section{}.demo-sticky-sections .sticky-section-title{position: sticky;top: 0;z-index: 1;padding: .35rem 1rem;font-family: var(--font-mono);font-size: .62rem;font-weight: 700;text-transform: uppercase;letter-spacing: .12em;color: var(--accent);background: var(--surface-2);border-bottom: 1px solid var(--border);border-top: 1px solid var(--border);}.demo-sticky-sections .sticky-section:first-child .sticky-section-title{border-top: none;}.demo-sticky-sections .sticky-item{padding: .65rem 1rem;border-bottom: 1px solid var(--border);display: flex;align-items: center;gap: .75rem;}.demo-sticky-sections .sticky-avatar{width: 28px;height: 28px;border-radius: 50%;background: var(--surface-2);border: 1px solid var(--border);flex-shrink: 0;display: flex;align-items: center;justify-content: center;font-family: var(--font-mono);font-size: .6rem;font-weight: 600;color: var(--text-muted);}.demo-sticky-sections .sticky-name{font-size: .85rem;color: var(--text);flex: 1;}.demo-sticky-sections .sticky-detail{font-family: var(--font-mono);font-size: .65rem;color: var(--text-muted);}.card-preview .demo-sticky-sections{pointer-events: auto;}