/* GENERATED by scripts/mirror-drawer-css.py from the #drawer rules -- do not edit by hand. */
/* from app/css/base.css */
#drawer-r{position:fixed;top:0;left:0;bottom:0;width:min(78vw,300px);z-index:99;
  transform:translateX(-104%);transition:transform .32s cubic-bezier(0.32,0.72,0,1);
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-right:1px solid color-mix(in srgb,var(--accent) 12%,transparent);
  display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 28px) 12px 24px}
#drawer-r.open{transform:translateX(0)}
body.tabs-mode #drawer-r{display:none}
#drawer-r{width:min(82vw,318px);padding:calc(env(safe-area-inset-top,0px) + 24px) 14px calc(env(safe-area-inset-bottom,0px) + 18px);
  background:color-mix(in srgb,var(--bg) 88%,transparent);border-radius:0 26px 26px 0;
  box-shadow:28px 0 70px rgba(0,0,0,.16);transition:transform .36s cubic-bezier(.2,.8,.2,1)}
#drawer-r .drawer-item[hidden]{display:none}
#drawer-r{width:min(88vw,370px);padding-left:22px;padding-right:22px}
#drawer-r .drawer-head{padding:18px 14px 26px}
#drawer-r>div[style*="flex:1"]{display:flex;flex-direction:column;justify-content:center;overflow:visible!important;padding-bottom:30px}
#drawer-r .drawer-section{width:min(100%,290px);margin:0 auto 9px;padding-left:18px}
#drawer-r .drawer-item{width:min(100%,290px);min-height:58px;margin:3px auto;padding:15px 18px;border-radius:18px;font-size:21px}
#drawer-r .drawer-item svg{width:21px;height:21px}
#drawer-r .drawer-settings{padding-top:18px}
body[data-theme="vintage"] #drawer-r{
  background:color-mix(in srgb,var(--bg) 97%,var(--card));
  border-right-color:color-mix(in srgb,var(--accent) 22%,transparent);
  backdrop-filter:blur(calc(var(--glass)*8px));-webkit-backdrop-filter:blur(calc(var(--glass)*8px));
}
@media(prefers-reduced-motion:reduce){#drawer-r{transition:none!important}}
#drawer-r{
  --paper:var(--bg);
  --sheet:var(--card);
  --edge:color-mix(in srgb,var(--text) 6%,transparent);
  --lift:0 1px 2px color-mix(in srgb,var(--text) 4%,transparent),
         0 10px 26px color-mix(in srgb,var(--text) 5%,transparent);
  --serif:'Cormorant Garamond',var(--cjk-serif),serif;
  --sage:#8FAE96;--mist:#93A9C6;--clay:#C9A079;--butter:#E3CE97;
}
#drawer-r .drawer-section{
  font:400 9px/1.4 var(--ui-font)!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--textL);opacity:.62;
}
#drawer-r{
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  border-right:0;border-radius:0 28px 28px 0;
}
#drawer-r .drawer-section{margin:0 auto 7px;padding:14px 0 4px 20px}
#drawer-r .drawer-item{
  position:relative;background:none;border-radius:14px;
  font-family:var(--serif);font-size:20px;font-weight:500;
  min-height:54px;padding:12px 18px 12px 20px;
}
#drawer-r .drawer-item.active{background:none;font-weight:600;color:var(--text)}
#drawer-r .drawer-item.active::before{
  content:'';position:absolute;left:6px;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 70%,transparent);
}
#drawer-r .drawer-item svg{opacity:.4}
#drawer-r .drawer-more-caret{margin-left:auto;font:400 18px var(--ui-font);opacity:.35;transition:transform .25s}
#drawer-r .drawer-more[aria-expanded="true"] .drawer-more-caret{transform:rotate(90deg)}
#drawer-r .drawer-more-list{display:flex;flex-direction:column;margin:-4px 0 6px 50px}
#drawer-r .drawer-more-list[hidden]{display:none}
#drawer-r .drawer-subitem{position:relative;text-align:left;border:0;background:none;padding:8px 10px;font:400 16px var(--serif);color:color-mix(in srgb,var(--text) 58%,transparent);cursor:pointer}
#drawer-r .drawer-subitem.active{color:var(--text);font-weight:500}
#drawer-r .drawer-subitem.active::before{content:'';position:absolute;left:-6px;top:50%;margin-top:-2.5px;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--accent) 70%,transparent)}
#drawer-r .drawer-home{display:block;position:relative;padding:8px 2px 6px}
#drawer-r{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#drawer-r>*{flex-shrink:0}
/* from app/css/title-font.css */
body[data-title-font="script"] :is(
  .page-heading,.settings-detail-heading,.us-name,.us-page .us-entry-name,
  .us-directory-title,.chat-header h2,.ian-call-name,.drawer-profile-name,
  .moment-profile-name,#p-me .settings-menu-title,#drawer-r .drawer-item
){
  font-family:'Pinyon Script',var(--serif);
  font-weight:400;letter-spacing:0;
  font-size-adjust:.44;
}