pb-sidebar { display: contents; }




.pb-skip {
  position: fixed;
  left: var(--rail-gap, 0.75rem);
  top: var(--rail-gap, 0.75rem);
  z-index: calc(var(--z-sidebar) + 10);
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--primary-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
}
.pb-skip:not(:focus) {
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.side {
  position: fixed;
  left: var(--rail-gap);
  top: var(--rail-gap);
  bottom: var(--rail-gap);
  width: var(--rail-w);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  

  padding: var(--chrome-top-inset) var(--rail-pad) var(--rail-pad);
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  transition: width var(--rail-dur) var(--rail-ease);
  
}


.side-toggle {
  position: absolute;
  
  top: calc(
    var(--chrome-top-inset)
    + var(--side-head-mt)
    + (var(--side-head-h) / 2)
    - (var(--side-toggle-h) / 2)
  );
  right: -0.8125rem;
  width: 1.5rem;
  height: var(--side-toggle-h);
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: none;
  box-shadow: none;
  color: var(--text-soft);
  opacity: 0;
  transform: translateX(-0.5rem) scale(0.96);
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), color 0.15s var(--ease);
  z-index: 2;
}
.side:hover .side-toggle,


.side-toggle:focus-visible,
.side:has(:focus-visible) .side-toggle { opacity: 1; transform: none; pointer-events: auto; }





@media (hover: none) {
  .side-toggle {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    width: var(--touch);
    right: -1.4375rem;
  }
}
.side-toggle:hover { color: var(--text); }
.side-toggle svg {
  width: 14px;
  height: 14px;
  font-size: 0.875rem;
  transition: transform 0.2s var(--ease);
}
html.rail-expanded .side-toggle svg { transform: rotate(180deg); }







a.side-head { color: inherit; text-decoration: none; }
.mtop-home { display: contents; color: inherit; text-decoration: none; }
.side-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--side-head-h);
  min-height: var(--side-head-h);
  max-height: var(--side-head-h);
  padding-left: var(--rail-logo-pl);
  flex: 0 0 auto;
  
  margin-top: var(--side-head-mt);
  box-sizing: border-box;
  overflow: hidden; 
}
html:not(.rail-expanded) .side-head {
  justify-content: center;
  padding-left: 0;
}

html.rail-expanded .side-head {
  justify-content: flex-end;
  padding-left: calc(var(--rail-btn-ml) + var(--rail-icon-pl));
  padding-right: var(--rail-btn-ml);
}
.pb-logo {
  flex: 0 0 auto;
  width: var(--rail-logo);
  height: var(--rail-logo);
  object-fit: contain;
  display: block;
  user-select: none;
  position: relative;
  z-index: 1; 
}

html.rail-expanded .pb-logo {
  margin-right: 0.5rem;
}





.side-word,
.nav-label,
.av-meta {
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--rail-dur) var(--rail-ease),
    visibility var(--rail-dur) var(--rail-ease);
}
.side-word {
  position: absolute;
  left: calc(var(--rail-btn-ml) + var(--rail-icon-pl));
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--fs-h3) * 0.95);
  pointer-events: none;
}
html.rail-expanded .side-word {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.nav-label { color: var(--text); }
html.rail-expanded .nav-label { opacity: 1; visibility: visible; }
html.rail-expanded .av-meta   { opacity: 1; visibility: visible; }







.side-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; margin-top: 0; flex: 0 0 auto; }

.side-nav > .nav-ic, .nav-cat > .nav-ic, .side-nav > a, .side-nav > button { flex-shrink: 0; }





.side-nav:has(.nav-cat.open) { flex: 0 1 auto; min-height: 0; }
.side-nav:has(.nav-cat.open) .nav-cat.open { min-height: 0; flex: 0 1 auto; }

.side-head + .side-nav { margin-top: 1.875rem; }





.side-nav + .side-nav--win,
.side-nav + .side-nav--account {
  position: relative;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
}
.side-nav--win::before,
.side-nav--account::before {
  
  --divider-inset: 0.5rem;
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--rail-btn-ml) + var(--divider-inset));
  width: calc(var(--rail-btn) - 2 * var(--divider-inset));
  height: 0.0625rem;
  background: var(--border);
  transition: width var(--rail-dur) var(--rail-ease);
}
html.rail-expanded .side-nav--win::before,
html.rail-expanded .side-nav--account::before {
  width: calc(var(--rail-w) - 2 * var(--rail-pad) - 2 * var(--rail-btn-ml) - 2 * var(--divider-inset));
}
.nav-ic {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.875rem; 
  width: var(--rail-btn);
  height: var(--rail-btn);
  margin-left: var(--rail-btn-ml);           
  padding-left: var(--rail-icon-pl);         
  padding-right: 0;
  border-radius: var(--r-lg);
  color: var(--text-soft);
  position: relative;
  box-sizing: border-box;
  overflow: hidden; 
  
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              width var(--rail-dur) var(--rail-ease);
}

html:not(.rail-expanded) .av-more { display: none; }
html.rail-expanded .nav-ic {
  

  width: calc(var(--rail-w) - 2 * var(--rail-pad) - 2 * var(--rail-btn-ml));
  padding-right: var(--rail-btn-ml);   
}


.nav-ic > .nav-glyph {
  position: relative;
  flex: 0 0 var(--rail-icon);
  line-height: 0;
  display: grid;
  place-items: center;
}


.nav-ic > .nm { flex: 0 0 var(--rail-icon); }
.nav-ic svg {
  width: var(--rail-icon);
  height: var(--rail-icon);
  font-size: var(--rail-icon);
  display: block;
}



.nav-ic .nm { color: color-mix(in srgb, var(--text-soft) 55%, var(--surface)); } 
.nav-ic:hover .nm,
.nav-ic.on .nm,
.nav-cat.open .nav-ic .nm { color: color-mix(in srgb, var(--text-soft) 70%, var(--text)); } 
.nav-ic:hover { background: var(--fill-hover); color: var(--text); }
.nav-ic.on { background: var(--fill-active); color: var(--text); }   

.nav-cat.open .nav-ic { background: var(--fill-active); color: var(--text); }


.nav-ic.on:hover,
.nav-cat.open .nav-ic:hover { background: var(--fill-strong); }



.nav-label { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: var(--track-body); flex: 0 0 auto; }
.nav-ic.on .nav-label { font-weight: 500; }




.nav-go {
  margin-left: auto;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface-bright); 
  color: var(--text-soft);
  display: grid;
  place-items: center;
  overflow: hidden;                       
  opacity: 0;
  transform: scale(0.2);                  
  

  transition: opacity 0.18s var(--ease) 0.06s, transform 0.26s var(--ease);
}



.nav-go svg {
  width: 15px;
  height: 15px;
  font-size: 0.9375rem;
  opacity: 0;
  transform: translateX(-0.625rem);
  transition: opacity 0.16s var(--ease) 0.05s, transform 0.28s var(--ease) 0.05s;
}


[data-theme="dark"] .nav-go {
  background: var(--bg);
  color: var(--text);
}
html:not(.rail-expanded) .nav-go { display: none; }   
html.rail-expanded .nav-ic.on .nav-go,
html.rail-expanded .nav-cat.open .nav-ic .nav-go,
html.rail-expanded .nav-ic:hover .nav-go {
  opacity: 1;
  transform: scale(1);
  

  transition: opacity 0.1s var(--ease), transform 0.26s var(--ease);
}
html.rail-expanded .nav-ic.on .nav-go svg,
html.rail-expanded .nav-cat.open .nav-ic .nav-go svg,
html.rail-expanded .nav-ic:hover .nav-go svg {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .nav-go { transform: none; transition: opacity 0.16s var(--ease); }
  .nav-go svg { transform: none; transition: opacity 0.16s var(--ease); }
}


.nav-ic .nav-dot {
  position: absolute;
  

  right: -3px;
  top: -1px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  


  pointer-events: none;
}










.nav-ic svg.nm { overflow: visible; }
.nm .nm-lens, .nm .nm-glint, .nm .nm-flap, .nm .nm-ribbon, .nm .nm-bubble,
.nm .nm-bell-body, .nm .nm-clap, .nm .nm-board, .nm .nm-head, .nm .nm-shoulders { transform-box: view-box; }

.nm .nm-moving { display: none; }
.nm.is-play .nm-moving, .nm.is-moving .nm-moving { display: inline; }
.nm.is-play .nm-rest, .nm.is-moving .nm-rest { display: none; }
.nm-instant, .nm-instant * { transition: none !important; }


.nm-search .nm-lens { transform-origin: 11px 11px; }
.nm-search .nm-glint { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.nm-search.is-play .nm-lens  { animation: nm-lens 760ms cubic-bezier(.45, 0, .55, 1) both; }
.nm-search.is-play .nm-glint { animation: nm-glint 760ms cubic-bezier(.45, 0, .55, 1) both; }
@keyframes nm-lens {
  0%   { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  26%  { transform: translate(-1.6px, -.7px) rotate(-12deg); }
  56%  { transform: translate(1.4px, -.9px) rotate(9deg); }
  80%  { transform: translate(-.3px, .15px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes nm-glint {
  0%, 20%   { stroke-dashoffset: 1; opacity: 0; }
  24%       { stroke-dashoffset: .85; opacity: 1; }
  48%       { stroke-dashoffset: 0; opacity: 1; }
  70%       { stroke-dashoffset: -1; opacity: 1; }
  72%, 100% { stroke-dashoffset: -1; opacity: 0; }
}



.nm-inbox .nm-ring { fill: none; stroke: #000; stroke-width: 0; }
.nm-inbox .nm-flap { transform-origin: 12px 21.5px; transition: transform 300ms var(--ease), stroke-width 200ms var(--ease) 100ms; }
.nm-inbox.is-open .nm-flap { transform: skewX(-12deg) scaleY(.93); transition: transform 480ms cubic-bezier(.34, 1.56, .64, 1), stroke-width 140ms var(--ease); }
.nm-inbox.is-open .nm-ring { stroke-width: 3.25; }


.nm-bookmark .nm-ribbon { transform-origin: 12px 2.5px; }
.nm-bookmark.is-play .nm-ribbon { animation: nm-ribbon 820ms cubic-bezier(.45, 0, .55, 1) both; }
@keyframes nm-ribbon {
  0%   { transform: rotate(0deg) scale(1, 1); animation-timing-function: cubic-bezier(.3, 0, .15, 1); }
  18%  { transform: rotate(0deg) scale(.9, 1.13); }
  38%  { transform: rotate(-5deg) scale(1.05, .95); }
  56%  { transform: rotate(3.5deg) scale(.98, 1.035); }
  73%  { transform: rotate(-1.6deg) scale(1.01, .99); }
  88%  { transform: rotate(.5deg) scale(1, 1); }
  100% { transform: rotate(0deg) scale(1, 1); }
}


.nm-chart .nm-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.nm-chart.is-play .nm-b1 { animation: nm-b1 960ms cubic-bezier(.45, 0, .55, 1) both; }
.nm-chart.is-play .nm-b2 { animation: nm-b2 960ms cubic-bezier(.45, 0, .55, 1) both; }
.nm-chart.is-play .nm-b3 { animation: nm-b3 960ms cubic-bezier(.45, 0, .55, 1) both; }
@keyframes nm-b1 {
  0%        { transform: scaleY(1); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  13%       { transform: scaleY(.5); }
  33%       { transform: scaleY(1.24); }
  50%       { transform: scaleY(.9); }
  65%       { transform: scaleY(1.04); }
  78%, 100% { transform: scaleY(1); }
}
@keyframes nm-b2 {
  0%, 9%    { transform: scaleY(1); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  23%       { transform: scaleY(.42); }
  43%       { transform: scaleY(1.1); }
  59%       { transform: scaleY(.95); }
  73%       { transform: scaleY(1.02); }
  86%, 100% { transform: scaleY(1); }
}
@keyframes nm-b3 {
  0%, 18%   { transform: scaleY(1); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  33%       { transform: scaleY(1.9); }
  52%       { transform: scaleY(.72); }
  68%       { transform: scaleY(1.14); }
  82%       { transform: scaleY(.97); }
  94%, 100% { transform: scaleY(1); }
}



.nm-chat .nm-bubble { transform-origin: 5px 20.5px; }
.nm-chat .nm-dot { transform-box: fill-box; transform-origin: 50% 50%; }
.nm-chat.is-play .nm-bubble { animation: nm-bubble 1050ms cubic-bezier(.45, 0, .55, 1) both; }
.nm-chat.is-play .nm-d1 { animation: nm-d1 1050ms cubic-bezier(.45, 0, .55, 1) both; }
.nm-chat.is-play .nm-d2 { animation: nm-d2 1050ms cubic-bezier(.45, 0, .55, 1) both; }
.nm-chat.is-play .nm-d3 { animation: nm-d3 1050ms cubic-bezier(.45, 0, .55, 1) both; }
@keyframes nm-bubble {
  0%   { transform: scale(1, 1); }
  9%   { transform: scale(.965, 1.03); }
  22%  { transform: scale(1.055, .955); }
  30%  { transform: scale(.985, 1.015); }
  38%  { transform: scale(1.045, .965); }
  46%  { transform: scale(.99, 1.01); }
  54%  { transform: scale(1.04, .97); }
  65%  { transform: scale(.985, 1.012); }
  78%  { transform: scale(1.006, .996); }
  100% { transform: scale(1, 1); }
}
@keyframes nm-d1 {
  0%        { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  8%, 15%   { transform: translateY(0) scale(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  22%       { transform: translateY(-1px) scale(1.25); }
  30%, 70%  { transform: translateY(0) scale(1); }
  77%       { transform: translateY(-.7px) scale(1); }
  85%, 100% { transform: translateY(0) scale(1); }
}
@keyframes nm-d2 {
  0%        { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  8%, 31%   { transform: translateY(0) scale(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  38%       { transform: translateY(-1px) scale(1.25); }
  46%, 75%  { transform: translateY(0) scale(1); }
  82%       { transform: translateY(-.7px) scale(1); }
  90%, 100% { transform: translateY(0) scale(1); }
}
@keyframes nm-d3 {
  0%        { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  8%, 47%   { transform: translateY(0) scale(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  54%       { transform: translateY(-1px) scale(1.25); }
  62%, 80%  { transform: translateY(0) scale(1); }
  87%       { transform: translateY(-.7px) scale(1); }
  95%, 100% { transform: translateY(0) scale(1); }
}



.nm-bell .nm-bell-body, .nm-bell .nm-clap { transform-origin: 12px 3px; }
.nm-bell.is-play .nm-bell-body { animation: nm-bell 1150ms cubic-bezier(.45, 0, .55, 1) both; }
.nm-bell.is-play .nm-clap { animation: nm-clap 1150ms cubic-bezier(.45, 0, .55, 1) both; }
@keyframes nm-bell {
  0%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  12%  { transform: rotate(15deg); }
  28%  { transform: rotate(-12deg); }
  43%  { transform: rotate(8.5deg); }
  57%  { transform: rotate(-5.5deg); }
  70%  { transform: rotate(3deg); }
  82%  { transform: rotate(-1.2deg); }
  92%  { transform: rotate(.4deg); }
  100% { transform: rotate(0deg); }
}
@keyframes nm-clap {
  0%, 5% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  19%  { transform: rotate(20deg); }
  35%  { transform: rotate(-16deg); }
  50%  { transform: rotate(10.5deg); }
  64%  { transform: rotate(-6deg); }
  77%  { transform: rotate(3deg); }
  89%  { transform: rotate(-.9deg); }
  100% { transform: rotate(0deg); }
}



.nm-user .nm-board { transform-origin: 12px 22.1px; }
.nm-user .nm-head { transform-origin: 12px 14.2px; }
.nm-user .nm-shoulders { transform-origin: 12px 18.7px; }
.nm-user.is-play .nm-board     { animation: nm-board 900ms cubic-bezier(.45, 0, .55, 1) both; }
.nm-user.is-play .nm-head      { animation: nm-head 900ms cubic-bezier(.45, 0, .55, 1) both; }
.nm-user.is-play .nm-shoulders { animation: nm-shoulders 900ms cubic-bezier(.45, 0, .55, 1) both; }
@keyframes nm-board {
  0%   { transform: translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  22%  { transform: translateY(-1.1px) rotate(-5deg); }
  44%  { transform: translateY(0) rotate(2.5deg); }
  62%  { transform: translateY(0) rotate(-1deg); }
  80%  { transform: translateY(0) rotate(.3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes nm-head {
  0%, 10% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  32%  { transform: rotate(16deg); }
  52%  { transform: rotate(-7deg); }
  68%  { transform: rotate(3.5deg); }
  84%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
@keyframes nm-shoulders {
  0%, 12%   { transform: translateY(0); }
  28%       { transform: translateY(-.6px); }
  44%       { transform: translateY(.15px); }
  58%, 100% { transform: translateY(0); }
}



.nav-cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.nav-sub {
  display: grid;
  min-height: 0;
  grid-template-rows: 0fr;
  




  width: calc(100% - 2 * var(--rail-btn-ml));
  overflow: hidden;
  margin-left: var(--rail-btn-ml);
  transition: grid-template-rows 0.32s var(--ease);
}
.nav-sub-in { width: calc(var(--rail-w) - 2 * var(--rail-pad) - 2 * var(--rail-btn-ml)); }
.nav-cat.open .nav-sub { grid-template-rows: 1fr; }



.nav-cat.open .nav-sub-in { overflow-y: auto; scrollbar-width: thin; max-height: min(40vh, 22rem); }
.nav-sub-in {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  


  padding: 0;
}
.nav-sub-in > .nav-sub-item:first-child { margin-top: 0.75rem; }






.nav-sub-in::after {
  content: "";
  flex: none;
  position: sticky;
  bottom: 0;
  height: 1.75rem;
  margin-top: -1.8125rem; 
  background: linear-gradient(to bottom, transparent, var(--surface) 88%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.nav-sub-in.has-more::after { opacity: 1; }





.nav-cat.open .nav-sub-in { padding-bottom: 0.75rem; }
.nav-cat.open .nav-sub::after {
  content: "";
  height: 1px;
  margin: 0 0.625rem 0.5rem;
  background: var(--border);
}
html:not(.rail-expanded) .nav-sub { display: none; }

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  



  width: auto;
  max-width: calc(100% - var(--rail-btn-ml));
  box-sizing: border-box;
  align-self: flex-start;
  margin-left: var(--rail-btn-ml);
  padding: 0.4375rem 1.125rem 0.4375rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 15px; 
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-sub-item:hover { color: var(--text); background: var(--fill-hover); }

.nav-sub-item.on { color: var(--text); background: var(--fill-active); }




.nav-sub-count {
  flex: none;
  width: 1.125rem;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-family: var(--font-display); 
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: center;
}
.nav-sub-item.on .nav-sub-count { color: var(--text-soft); }


.nav-sub-ic {
  flex: none;
  width: 1.125rem;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  line-height: 0;
}
.nav-sub-ic svg { width: 15px; height: 15px; display: block; }
.nav-sub-item.on .nav-sub-ic,
.nav-sub-item:hover .nav-sub-ic { color: var(--text-soft); }
.nav-sub-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-grow { flex: 1 1 auto; }



.side-bottom { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--rail-btn-ml); }
.account-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.875rem; 
  width: var(--rail-btn);
  height: var(--rail-btn);
  margin-left: var(--rail-btn-ml);
  padding-left: var(--rail-av-pl);             
  padding-right: 0;
  border-radius: var(--r-lg);
  box-sizing: border-box;
  overflow: hidden; 
  font-family: var(--font-display); 
  transition: background var(--dur) var(--ease),
              width var(--rail-dur) var(--rail-ease);
}
html.rail-expanded .account-btn {
  width: calc(var(--rail-w) - 2 * var(--rail-pad) - 2 * var(--rail-btn-ml));
  padding-right: var(--rail-btn-ml);
}
.account-btn:hover { background: var(--fill-hover); }
.av-ini {
  flex: 0 0 auto;
  width: var(--rail-av);
  height: var(--rail-av);
  border-radius: 50%;
  background: var(--avatar);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sm);
  overflow: hidden;
}
.av-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden; 
  text-align: left;
  flex: 1 1 auto;
}
.av-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.av-more {
  flex: 0 0 auto;
  margin-left: auto;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  color: var(--text-soft);
}
.av-more svg { width: 18px; height: 18px; display: block; }




.mtop { display: none; }
.pb-pblur, .pb-edge, .pb-tint { display: none; }
@media (max-width: 767.98px) {
  .side { display: none; }
  

























  .pb-pblur, .pb-edge, .pb-tint {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    pointer-events: none;
  }
  .pb-pblur {
    z-index: calc(var(--z-sidebar) - 2);
    isolation: isolate;
    contain: paint;
    overflow: hidden;
    transform: translateZ(0);
  }
  

  



  .pb-pblur--top { top: 0; height: calc(2 * (env(safe-area-inset-top, 0px) + var(--strips-h, 0px) + var(--rail-gap) + var(--mtop-h)) + 3rem); }
  .pb-pblur--bottom { bottom: 0; height: calc(2 * (env(safe-area-inset-bottom, 0px) + var(--rail-gap) + 3.5rem) + 1.5rem); }
  .pb-pblur-l { position: absolute; inset: 0; --pb-dir: to bottom; }
  .pb-pblur--top .pb-pblur-l { --pb-dir: to top; }
  .pb-pblur-l.is--1 {
    
    -webkit-backdrop-filter: blur(0.140625em); backdrop-filter: blur(0.140625em);
    -webkit-mask: linear-gradient(var(--pb-dir), transparent 50%, black 62.5% 75%, transparent 87.5%);
    mask: linear-gradient(var(--pb-dir), transparent 50%, black 62.5% 75%, transparent 87.5%);
  }
  .pb-pblur-l.is--2 {
    -webkit-backdrop-filter: blur(0.28125em); backdrop-filter: blur(0.28125em);
    -webkit-mask: linear-gradient(var(--pb-dir), transparent 62.5%, black 75% 87.5%, transparent 100%);
    mask: linear-gradient(var(--pb-dir), transparent 62.5%, black 75% 87.5%, transparent 100%);
  }
  .pb-pblur-l.is--3 {
    -webkit-backdrop-filter: blur(0.5625em); backdrop-filter: blur(0.5625em);
    -webkit-mask: linear-gradient(var(--pb-dir), transparent 75%, black 87.5% 100%);
    mask: linear-gradient(var(--pb-dir), transparent 75%, black 87.5% 100%);
  }
  .pb-pblur-l.is--4 {
    -webkit-backdrop-filter: blur(1.125em); backdrop-filter: blur(1.125em);
    -webkit-mask: linear-gradient(var(--pb-dir), transparent 82%, black 92% 100%);
    mask: linear-gradient(var(--pb-dir), transparent 82%, black 92% 100%);
  }
  .pb-pblur-l.is--5 {
    -webkit-backdrop-filter: blur(2.25em); backdrop-filter: blur(2.25em);
    -webkit-mask: linear-gradient(var(--pb-dir), transparent 88%, black 100%);
    mask: linear-gradient(var(--pb-dir), transparent 88%, black 100%);
  }
  .pb-edge {
    z-index: calc(var(--z-sidebar) - 1);
    background-color: var(--bg);
    --edge-dir: to bottom;
    --edge-s: 50%;   
    
    --edge-mask: linear-gradient(var(--edge-dir),
      black var(--edge-s),
      rgb(0 0 0 / 0.84) calc(var(--edge-s) + (100% - var(--edge-s)) * 0.25),
      rgb(0 0 0 / 0.5) calc(var(--edge-s) + (100% - var(--edge-s)) * 0.5),
      rgb(0 0 0 / 0.16) calc(var(--edge-s) + (100% - var(--edge-s)) * 0.75),
      transparent);
    -webkit-mask-image: var(--edge-mask);
    mask-image: var(--edge-mask);
  }
  







  .pb-edge--top {
    top: 0;
    height: calc(env(safe-area-inset-top, 0px) + var(--strips-h, 0px) + var(--rail-gap) + var(--mtop-h) + 1.5rem);
    --edge-s: calc(env(safe-area-inset-top, 0px) + var(--strips-h, 0px) + var(--rail-gap) + var(--r-lg));
  }
  .pb-edge--bottom {
    bottom: 0;
    height: calc(env(safe-area-inset-bottom, 0px) + 4.75rem);
    --edge-dir: to top;
    --edge-s: calc(env(safe-area-inset-bottom, 0px) + var(--rail-gap));
  }
  .pb-tint {
    z-index: calc(var(--z-toast) - 1);
    height: max(1rem, 12px);
    background-color: var(--bg);
    -webkit-mask-image: linear-gradient(transparent, transparent);
    mask-image: linear-gradient(transparent, transparent);
  }
  .pb-tint--top { top: 0; }
  .pb-pblur--top .pb-pblur-l.is--1 { -webkit-backdrop-filter: blur(0.2109em); backdrop-filter: blur(0.2109em); }
  .pb-pblur--top .pb-pblur-l.is--2 { -webkit-backdrop-filter: blur(0.4219em); backdrop-filter: blur(0.4219em); }
  .pb-pblur--top .pb-pblur-l.is--3 { -webkit-backdrop-filter: blur(0.8438em); backdrop-filter: blur(0.8438em); }
  .pb-pblur--top .pb-pblur-l.is--4 { -webkit-backdrop-filter: blur(1.6875em); backdrop-filter: blur(1.6875em); }
  .pb-pblur--top .pb-pblur-l.is--5 { -webkit-backdrop-filter: blur(3.375em); backdrop-filter: blur(3.375em); }
  .pb-tint--bottom { bottom: 0; }
  .pb-pblur--bottom, .pb-edge--bottom, .pb-tint--bottom { display: none; }
  html:has(pb-selection-bar .sel-zone):not(:has(.app-main.is-agent)) :is(.pb-pblur--bottom, .pb-edge--bottom, .pb-tint--bottom) { display: block; }
  



  html.overlay-open .pb-tint { background-color: color-mix(in srgb, black calc(var(--dim-amount, 0.05) * 100%), var(--bg)); }
  html:has(.td-stage .td2) .pb-tint--bottom { background-color: var(--surface); }
  html:is(.scroll-locked, :has(.pb-lightbox.open)) .pb-tint { background-color: var(--scrim-edge); }
  html:has(pb-auth-gate .am-scrim--curtain.open) .pb-tint { background-color: var(--bg); }
  html:has(pb-mobile-menu .mm.open) .pb-tint { background-color: var(--surface); }
  .mtop {
    position: fixed;
    left: max(var(--rail-gap), env(safe-area-inset-left, 0px));
    right: max(var(--rail-gap), env(safe-area-inset-right, 0px));
    

    top: calc(var(--rail-gap) + env(safe-area-inset-top, 0px));
    height: var(--mtop-h);
    z-index: var(--z-sidebar);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.375rem 0 1rem;
    background: var(--surface);
    border-radius: var(--r-lg);
  }
  .mtop .pb-logo {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    user-select: none;
  }
  .mtop-word {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: calc(var(--fs-h3) * 0.95);
    white-space: nowrap;
  }
  .mtop-burger {
    position: relative;
    margin-left: auto;
    flex: none;
    width: var(--touch);
    height: var(--touch);
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    color: var(--text);
    transition: background var(--dur) var(--ease);
  }
  .mtop-burger:active { background: var(--surface-2); }
  

  .mtop-burger .mtop-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.375rem;
    height: 0.125rem;
    margin: -0.0625rem 0 0 -0.6875rem;
    background: currentColor;
    transition: transform 0.6s var(--ease);
    transform: translateY(-0.25rem) rotate(0.001deg);
  }
  .mtop-burger .mtop-bar:nth-child(2) { transform: translateY(0.15rem) rotate(0.001deg); }
  .mtop-burger:hover .mtop-bar { transform: translateY(0.25rem) rotate(0.001deg); }
  .mtop-burger:hover .mtop-bar:nth-child(2) { transform: translateY(-0.15rem) rotate(0.001deg); }
  .mtop-burger .mtop-dot {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand); 
    pointer-events: none;
  }
}