.demo-page{background:var(--bg);color:var(--ink);font-family:var(--font-ui);flex-direction:column;height:100vh;display:flex}.demo-nav{border-bottom:1px solid var(--rule-strong);background:var(--bg);z-index:100;justify-content:space-between;align-items:center;height:50px;padding:0 32px;display:flex;position:sticky;top:0}.demo-nav-left{align-items:center;gap:20px;display:flex}.demo-nav-right{align-items:center;gap:14px;display:flex}.demo-nav-link{font-family:var(--font-ui);color:var(--ink-3);transition:color var(--t-fast), border-color var(--t-fast);border-bottom:1px solid #0000;padding-bottom:1px;font-size:13px;font-weight:500;text-decoration:none}.demo-nav-link.active{color:var(--accent-ink);border-color:var(--accent)}.demo-nav-link:hover{color:var(--ink)}.demo-nav-search{font-family:var(--font-ui);color:var(--ink-3);cursor:pointer;align-items:center;gap:7px;font-size:13px;display:flex}.demo-nav-kbd{font-family:var(--font-mono);color:var(--ink-3);border:1px solid var(--rule-strong);background:var(--bg-sunken);border-radius:var(--r-sm);padding:1px 5px;font-size:10px}.demo-auth-chip{border:1px solid var(--rule-strong);height:30px;font-family:var(--font-ui);color:var(--ink);background:var(--bg);cursor:pointer;transition:background var(--t-fast);align-items:center;gap:7px;padding:0 12px;font-size:12px;font-weight:500;display:inline-flex}.demo-auth-chip:hover{background:var(--bg-elev)}.demo-auth-dot{background:var(--accent);border-radius:50%;width:7px;height:7px}.demo-breadcrumb{border-bottom:1px solid var(--rule-strong);background:var(--bg);align-items:center;gap:6px;padding:9px 32px;display:flex}.demo-crumb{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-size:10px}.demo-crumb.active{color:var(--accent-ink);font-weight:500}.demo-crumb-sep{color:var(--ink-4)}.demo-btn{font-family:var(--font-ui);border:1px solid var(--rule-strong);height:34px;color:var(--ink);border-radius:var(--r-md);cursor:pointer;transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out);background:0 0;align-items:center;gap:8px;padding:0 14px;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex}.demo-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}.demo-btn:active{transform:translateY(1px)}.demo-btn.primary{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}.demo-btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--accent-on)}.demo-mobile-wrap{background:var(--bg-sunken);flex:1;justify-content:center;align-items:flex-start;padding:48px 24px;display:flex}.demo-mobile{background:var(--bg);border:1px solid var(--rule-strong);flex-direction:column;width:390px;height:844px;display:flex;box-shadow:0 24px 64px -12px oklch(16% .008 80/.2)}.sn-wrap .demo-nav,.br-nav-wrap .demo-nav{-webkit-backdrop-filter:blur(14px);background:#fbf9f3db;border-bottom:1px solid #24221c14}.sn-wrap .sl-wordmark,.br-nav-wrap .sl-wordmark{color:var(--ink)}.sn-wrap .demo-nav .sl-dot,.br-nav-wrap .demo-nav .sl-dot{color:var(--sage)}.sn-wrap .demo-nav-link,.br-nav-wrap .demo-nav-link{color:var(--ink-3)}.sn-wrap .demo-nav-link:hover,.br-nav-wrap .demo-nav-link:hover{color:var(--ink)}.sn-wrap .demo-nav-link.active,.br-nav-wrap .demo-nav-link.active{color:var(--ink);border-color:var(--sage)}.sn-wrap .br-signin-btn,.br-nav-wrap .br-signin-btn{color:var(--ink);border-color:var(--rule-strong);background:0 0}.sn-wrap .br-signin-btn:hover,.br-nav-wrap .br-signin-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}.sn-wrap .br-account-avatar,.br-nav-wrap .br-account-avatar{border-color:var(--rule-strong)}.sn-wrap .sn-hamburger span,.br-nav-wrap .br-nav-hamburger span{background:var(--ink)}html[data-nav=over] .sn-wrap{position:fixed;top:0;left:0;right:0}html[data-nav=over] .sn-wrap .demo-nav{-webkit-backdrop-filter:none;transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);background:0 0;border-bottom-color:#0000}html[data-nav=over]:not([data-nav-solid]) .sn-wrap .sl-wordmark{color:#fff}html[data-nav=over]:not([data-nav-solid]) .sn-wrap .demo-nav .sl-dot{color:var(--accent-lit)}html[data-nav=over]:not([data-nav-solid]) .sn-wrap .demo-nav-link{color:#ffffffd1}html[data-nav=over]:not([data-nav-solid]) .sn-wrap .demo-nav-link:hover{color:#fff}html[data-nav=over]:not([data-nav-solid]) .sn-wrap .demo-nav-link.active{color:#fff;border-color:#ffffffb3}html[data-nav=over]:not([data-nav-solid]) .sn-wrap .br-signin-btn{color:#fff;border-radius:var(--r-full);background:0 0;border-color:#ffffff73;padding-inline:18px}html[data-nav=over]:not([data-nav-solid]) .sn-wrap .br-signin-btn:hover{color:#fff;background:#ffffff24;border-color:#fffc}html[data-nav=over]:not([data-nav-solid]) .sn-wrap .br-account-avatar{border-color:#ffffff73}html[data-nav=over]:not([data-nav-solid]) .sn-wrap .sn-hamburger span{background:#fff}html[data-nav=over][data-nav-solid] .sn-wrap .demo-nav{-webkit-backdrop-filter:blur(14px);background:#fbf9f3db;border-bottom-color:#24221c14}