html,body{height:100%;overflow:hidden;color-scheme:dark}body{display:flex;flex-direction:column;background:var(--bg-base)}[hidden]{display:none!important}.demo-nav{display:flex;gap:24px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border-default);flex-shrink:0}.demo-nav button,.mobile-nav button{border:0;background:none;color:var(--text-muted);font:13px var(--font-sans);padding:5px 0;cursor:pointer}.demo-nav button[aria-pressed=true],.mobile-nav button[aria-pressed=true]{color:var(--text-primary);box-shadow:0 1px 0 var(--text-primary)}.demo-nav [data-reset]{margin-left:auto;font-size:11px}.demo-notice{font:10px/1.5 var(--font-sans);color:var(--text-subtle);padding:8px 18px;border-top:1px solid var(--border-default);flex-shrink:0}#vault{flex:1;min-height:0;overflow:hidden}.app-mockup{height:100%;width:100%;max-width:none;grid-template-columns:190px minmax(0,1fr) minmax(280px,1.3fr)}.app-sidebar,.app-list,.app-detail{min-height:0;overflow:auto}.app-detail{padding:24px}.app-detail-head{max-width:100%}#grants{display:grid;place-items:center;flex:1;min-height:0;padding:16px;overflow:auto}.menubar-mockup{width:min(100%,340px)}.menubar-window{width:100%;margin:0}.mobile-nav{display:none}.app-sidebar-section-add,.app-list-add,.app-detail-add-field{display:none}button:focus-visible,[role=button]:focus-visible{outline-offset:-2px}.secret-plain{overflow-wrap:anywhere}.app-detail-row.is-revealed .secret-dots{display:none}.app-detail-row.is-revealed .secret-plain{display:inline}
@media(max-width:720px){.mobile-nav{display:flex;gap:23px;padding:8px 18px;border-bottom:1px solid var(--border-default)}.mobile-nav button{font-size:12px}.app-mockup,.app-mockup.is-sidebar-collapsed{display:block}.app-titlebar{display:none}.app-sidebar,.app-list,.app-detail{display:none;height:100%;width:100%;max-width:100%;border:0}.app-detail{padding:22px 18px}.app-detail-row{min-width:0}.app-detail-row-value{overflow-wrap:anywhere}#vault[data-mobile-pane=categories] .app-sidebar,#vault[data-mobile-pane=list] .app-list,#vault[data-mobile-pane=detail] .app-detail{display:block}.demo-nav{gap:19px}.app-sidebar-section{padding-top:15px}.app-sidebar-item{min-height:42px}.app-list-item{min-height:72px}.app-detail-row-label{min-width:58px}.app-detail-row-value{font-size:12px}.chrome-dots{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Leave the window edge free for the mascot's hanging paw. */
.demo-nav{padding-top:35px}
.demo-detail-actions{display:flex;justify-content:flex-end;margin-bottom:18px;gap:15px}.demo-detail-actions button{border:0;background:none;color:var(--text-secondary);font:12px var(--font-sans);cursor:pointer;padding:5px 0}