.emerald .demo-banner{border-radius:var(--r-sm);flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:8px;padding:14px 14px 14px 24px;display:flex}.emerald .demo-banner p{color:var(--soft);flex:320px;font-size:.92rem}.emerald .demo-banner .btn{padding:10px 18px;font-size:.88rem}.emerald .demo-banner-wrap{z-index:20;position:relative}.emerald .demo-btn{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--glass-lo);color:var(--soft);align-items:center;gap:9px;padding:9px 14px 9px 16px;font-size:.86rem;transition:color .3s,background .3s;display:inline-flex}.emerald .demo-btn:hover,.emerald .demo-btn[aria-expanded=true]{color:var(--paper);background:var(--glass-hi)}.emerald .demo-btn b{color:var(--paper);font-weight:500}.emerald .demo-btn svg{width:15px;height:15px;transition:transform .3s var(--ease)}.emerald .demo-btn[aria-expanded=true] svg{transform:rotate(180deg)}.emerald .demo-menu{width:min(320px,100vw - 32px);animation:emerald-pop .35s var(--ease);transform-origin:100% 0;border-radius:22px;gap:2px;padding:10px;display:grid;position:absolute;top:calc(100% + 8px);right:14px}.emerald .demo-item{border:1px solid #0000;border-radius:14px;gap:2px;padding:10px 12px;transition:background .25s;display:grid}.emerald .demo-item:hover,.emerald .demo-item:focus-visible{background:rgba(var(--fg),.07)}.emerald .demo-item[aria-current=page]{border-color:rgba(var(--ac),.55);background:rgba(var(--ac),.12)}.emerald .demo-item b{color:var(--paper);font-size:.92rem;font-weight:450}.emerald .demo-item span{color:var(--muted);font-size:.76rem}@media (max-width:720px){.emerald .demo-banner{border-radius:var(--r-md);padding:18px}.emerald .demo-banner .btn,.emerald .demo-btn{flex:100%;justify-content:center}.emerald .demo-menu{width:100%;left:0;right:auto}.emerald .demo-btn-label{display:none}}